mozilla
/
reflex-virtual-dom-driver
зеркало из https://github.com/mozilla/reflex-virtual-dom-driver.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Remove obsolete modules.

This commit is contained in:
Irakli Gozalishvili 2015-10-19 22:33:58 -07:00
Родитель bc6f640e17
Коммит b7672e74b9
2 изменённых файлов: 0 добавлений и 403 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

215
examples/spin-squares/src/color.js
Просмотреть файл

@ -1,215 +0,0 @@
/* @flow */
// Port of http://package.elm-lang.org/packages/elm-lang/core/2.1.0/Color
/*::
export type Int = number
export type Float = number
*/
class RGBAType {
/*::
$typeof: "Color.RGBA";
red: Int;
green: Int;
blue: Int;
alpha: Float;
*/
constructor(red/*:Int*/, green/*:Int*/, blue/*:Int*/, alpha/*:Float*/) {
this.$typeof = "Color.RGBA"
this.red = red
this.green = green
this.blue = blue
this.alpha = alpha
}
}
class HSLAType {
/*::
$typeof: "Color.HSLA";
hue: Float;
saturation: Float;
lightness: Float;
alpha: Float;
*/
constructor(hue/*:Float*/, saturation/*:Float*/, lightness/*:Float*/, alpha/*:Float*/) {
this.$typeof = "Color.HSLA"
this.hue = hue
this.saturation = saturation
this.lightness = lightness
this.alpha = alpha
}
}
/*::
export type RGBA = {$typeof: "Color.RGBA", red: Int, green: Int, blue: Int, alpha: Float}
export type HSLA = {$typeof: "Color.HSLA", hue: Float, saturation: Float, lightness: Float, alpha: Float}
export type Color = RGBA|HSLA
*/
// Create RGB colors with an alpha component for transparency.
// The alpha component is specified with numbers between 0 and 1
export const rgba = (red/*:Int*/, green/*:Int*/, blue/*:Int*/, alpha/*:Float*/)/*:Color*/ =>
new RGBAType(red, green, blue, alpha)
// Create RGB colors from numbers between 0 and 255 inclusive
export const rgb = (red/*:Int*/, green/*:Int*/, blue/*:Int*/)/*:Color*/ =>
new RGBAType(red, green, blue, 1)
export const turns = (n/*:Float*/)/*:Float*/ => 2 * Math.PI * n
export const degrees = (n/*:Float*/)/*:Float*/ => n * Math.PI / 180
// Create [HSL colors](http://en.wikipedia.org/wiki/HSL_and_HSV)
// with an alpha component for transparency.
export const hsla = (hue/*:Float*/, saturation/*:Float*/, lightness/*:Float*/, alpha/*:Float*/)/*:Color*/ =>
new HSLAType(hue - turns(Math.floor(hue / (2 * Math.PI))), saturation, lightness, alpha)
// Create [HSL colors](http://en.wikipedia.org/wiki/HSL_and_HSV). This gives
// you access to colors more like a color wheel, where all hues are aranged in a
// circle that you specify with angles (radians).
//
// const red = hsl(degrees(0), 1, 0.5)
// const green = hsl(degrees(120), 1, 0.5)
// const blue = hsl(degrees(240), 1, 0.5)
// const pastelRed = hsl(degrees(0), 0.7, 0.7)
//
// To cycle through all colors, just cycle through degrees. The saturation level
// is how vibrant the color is, like a dial between grey and bright colors. The
// lightness level is a dial between white and black.
export const hsl = (hue/*:Float*/, saturation/*:Float*/, lightness/*:Float*/)/*:Color*/ =>
hsla(hue, saturation, lightness, 1)
// Produce a gray based on the input. 0 is white, 1 is black.
export const grayscale = (p/*:Float*/)/*:Color*/=>
new HSLAType(0, 0, 1 - p, 1)
// Produce a "complementary color". The two colors will
// accent each other. This is the same as rotating the hue by 180°
export const complement = (color/*:Color*/)/*:Color*/ => {
if (color.$typeof === "Color.HSLA") {
return hsla(color.hue + degrees(180),
color.saturation,
color.lightness,
color.alpha)
}
if (color.$typeof === "Color.RGBA") {
return complement(rgba2hsla(color))
}
throw TypeError("Invalid color value was passed")
}
// Convert given color into the HSL format.
export const toHSL = (color/*:Color*/)/*:HSLA*/ => {
if (color.$typeof === "Color.HSLA") {
return color
}
if (color.$typeof === "Color.RGBA") {
return rgba2hsla(color)
}
throw TypeError("Invalid color value was passed")
}
// Convert given color into the RGB format.
export const toRGB = (color/*:Color*/)/*:RGBA*/ => {
if (color.$typeof === "Color.RGBA") {
return color
}
if (color.$typeof === "Color.HSLA") {
return hsla2rgba(color)
}
throw TypeError("Invalid color value was passed")
}
const fmod = (f/*:Float*/, n/*:Int*/)/*:Float*/ => {
const integer = Math.floor(f)
return integer % n + f - integer
}
const rgba2hsla = ({red, green, blue, alpha}/*:RGBA*/)/*:HSLA*/ => {
const [r, g, b] = [red/255, green/255, blue/255]
const max = Math.max(Math.max(r, g), b)
const min = Math.min(Math.min(r, g), b)
const delta = max - min
const h = max === r ? fmod(((g - b) / delta), 6) :
max === g ? (((b - r) / delta) + 2) :
((r - g) / delta) + 4
const hue = degrees(60) * h
const lightness = (max + min) / 2
const saturation = lightness === 0 ? 0 :
delta / (1 - Math.abs(2 * lightness - 1))
return new HSLAType(hue, lightness, saturation, alpha)
}
const hsla2rgba = ({hue, saturation, lightness, alpha}/*:HSLA*/)/*:RGBA*/ => {
const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation
const h = hue / degrees(60)
const x = chroma * (1 - Math.abs(fmod(h, 2 - 1)))
const [r, g, b] = h < 0 ? [0, 0, 0] :
h < 1 ? [chroma, x, 0] :
h < 2 ? [x, chroma, 0] :
h < 3 ? [0, chroma, x] :
h < 4 ? [0, x, chroma] :
h < 5 ? [x, 0, chroma] :
h < 6 ? [chroma, 0, x] :
[0, 0, 0]
const m = lightness - chroma / 2
return new RGBAType(Math.round(255 * (r + m)),
Math.round(255 * (g + m)),
Math.round(255 * (b + m)),
alpha)
}
export const lightRed = rgb(239, 41, 41)
export const red = rgb(204, 0, 0)
export const darkRed = rgb(164, 0, 0)
export const lightOrange = rgb(252, 175, 62)
export const orange = rgb(245, 121, 0)
export const darkOrange = rgb(206, 92, 0)
export const lightYellow = rgb(255, 233, 79)
export const yellow = rgb(237, 212, 0)
export const darkYellow = rgb(196, 160, 0)
export const lightGreen = rgb(138, 226, 52)
export const green = rgb(115, 210, 22)
export const darkGreen = rgb(78, 154, 6)
export const lightBlue = rgb(114, 159, 207)
export const blue = rgb(52, 101, 164)
export const darkBlue = rgb(32, 74, 135)
export const lightPurple = rgb(173, 127, 168)
export const purple = rgb(117, 80, 123)
export const darkPurple = rgb(92, 53, 102)
export const lightBrown = rgb(233, 185, 110)
export const brown = rgb(193, 125, 17)
export const darkBrown = rgb(143, 89, 2)
export const black = rgb(0, 0, 0)
export const white = rgb(255, 255, 255)
export const lightGrey = rgb(238, 238, 236)
export const grey = rgb(211, 215, 207)
export const darkGrey = rgb(186, 189, 182)
export const lightCharcoal = rgb(136, 138, 133)
export const charcoal = rgb(85, 87, 83)
export const darkCharcoal = rgb(46, 52, 54)

188
examples/spin-squares/src/easing.js
Просмотреть файл

@ -1,188 +0,0 @@
/* @flow */
// Port of http://package.elm-lang.org/packages/Dandandan/Easing/2.0.0
import {toRGB, rgba} from "./color";
/*::
import type {Color} from "./color";
export type Time = number
export type Float = number
// Type alias for Easing functions.
export type Easing = (x:Float) => Float
// An interpolation of two values using a Float value.
export type Interpolation <a> = (from:a, to:a, value:Float) => a
// An `Animation` is a function that returns a value given a duration and the current time.
export type Animation <a> = (duration:Time, time:Time) => a
// Compute an animation using the parameters.
// Parameters are: an `Easing` function, an `Interpolation` function, a `from` value, a `to` value, the duration of the transition and the elapsed time.
// ease(linear, float, 0, 20, second, 0) // => 0
// ease(linear, float, 0, 20, second, second) // => 20
// ease(linear, color, blue, red, second, second) // => red
*/
export const ease = /*::<a>*/(easing/*:Easing*/, interpolation/*:Interpolation<a>*/, from/*:a*/, to/*:a*/, duration/*:Time*/, time/*:Time*/)/*:a*/ =>
interpolation(from, to, easing(Math.min(time / duration, 1)))
// Interpolation of two Floats
export const float = (from/*:Float*/, to/*:Float*/, progress/*:Float*/)/*:Float*/ =>
from + (to - from) * progress
// Interpolation of two points in 2D
/*::
export type Point2D = {x: Float, y:Float}
*/
export const point2D = (from/*:Point2D*/, to/*:Point2D*/, progress/*:Float*/)/*:Point2D*/ =>
({
x: float(from.x, to.x, progress),
y: float(from.y, to.y, progress)
})
/*::
export type Point3D = {x: Float, y:Float, z:Float}
*/
export const point3D = (from/*:Point3D*/, to/*:Point3D*/, progress/*:Float*/)/*:Point3D*/ =>
({
x: float(from.x, to.x, progress),
y: float(from.y, to.y, progress),
z: float(from.z, to.z, progress)
})
export const color = (from/*:Color*/, to/*:Color*/, progress/*:Float*/)/*Color*/ => {
const [begin, end] = [toRGB(from), toRGB(to)]
return rgba(Math.round(float(begin.red, end.red, progress)),
Math.round(float(begin.green, end.green, progress)),
Math.round(float(begin.blue, end.blue, progress)),
float(begin.alpha, end.alpha, progress))
}
export const pair = /*::<a>*/(interpolate/*:Interpolation<a>*/)/*:Interpolation<[a,a]>*/ =>
([a0, b0]/*:[a,a]*/, [a1, b1]/*:[a,a]*/, progress/*:Float*/)/*:[a,a]*/ =>
[interpolate(a0, a1, progress), interpolate(b0, b1, progress)]
// Inverts an `Easing` function. A transition that starts fast and continues
// slow now starts slow and continues fast.
export const invert = (easing/*:Easing*/)/*:Easing*/=>
time => 1 - easing(1 - time)
// Flips an `Easing` function. A transition that looks like `/`, now looks like
// `\`.
export const flip = (easing/*:Easing*/)/*:Easing*/=>
time => easing(1 - time)
// Makes an Easing function using two `Easing` functions. The first half the
// first `Easing` function is used, the other half the second.
export const inOut = (begin/*:Easing*/, end/*:Easing*/)/*:Easing*/=>
time =>
time < 0.5 ? begin(time * 2) / 2 :
0.5 + (end((time - 0.5) * 2) / 2)
// Makes an `Easing` function go to the end first and then back to the start.
// A transition that looks like `/` now looks like `/\`.
export const retour = (easing/*:Easing*/)/*:Easing*/=>
time =>
time < 0.5 ? easing(time * 2) :
easing(1 - ((time - 0.5) * 2))
// Repeats an `Animation` infinitely
// const rotate = cycle(ease(linear, float, 0, 360), second)
export const cycle = /*::<a>*/ (animation/*:Animation<a>*/)/*:Animation<a>*/=>
(duration, time) =>
animation(1, (time / duration) - Math.floor(time / duration))
export const linear/*:Easing*/ = x => x
export const easeInQuad/*:Easing*/ = time => time ^ 2
export const easeOutQuad/*:Easing*/ = invert(easeInQuad)
export const easeInOutQuad/*:Easing*/ = inOut(easeInQuad, easeOutQuad)
export const easeInCubic/*:Easing*/ = time => time ^ 3
export const easeOutCubic/*:Easing*/ = invert(easeInCubic)
export const easeInOutCubic/*:Easing*/ = inOut(easeInCubic, easeOutCubic)
export const easeInQuart/*:Easing*/ = time => time ^ 4
export const easeOutQuart/*:Easing*/ = invert(easeInQuad)
export const easeInOutQuart/*:Easing*/ = inOut(easeInQuart, easeOutQuart)
export const easeInQuint/*:Easing*/ = time => time ^ 5
export const easeOutQuint/*:Easing*/ = invert(easeInQuint)
export const easeInOutQuint/*:Easing*/ = inOut(easeInQuint, easeOutQuint)
export const easeOutSine/*:Easing*/ = time => Math.sin(time * (Math.PI / 2))
export const easeInSine/*:Easing*/ = invert(easeOutSine)
export const easeInOutSine/*:Easing*/ = inOut(easeInSine, easeOutSine)
export const easeInExpo/*:Easing*/ = time => 2 ^ (10 * (time - 1))
export const easeOutExpo/*:Easing*/ = invert(easeInExpo)
export const easeInOutExpo/*:Easing*/ = inOut(easeInExpo, easeOutExpo)
export const easeOutCirc/*:Easing*/ = time => Math.sqrt(1 - (time - 1) ^ 2)
export const easeInCirc/*:Easing*/ = invert(easeOutCirc)
export const easeInOutCirc/*:Easing*/ = inOut(easeInCirc, easeOutCirc)
export const easeInBack/*:Easing*/ = time =>
time * time * (2.70158 * time - 1.70158)
export const easeOutBack/*:Easing*/ = invert(easeInBack)
export const easeInOutBack/*:Easing*/ = inOut(easeInBack, easeOutBack)
export const easeOutBounce/*:Easing*/ = time => {
const a = 7.5625
const t2 = time - (1.5 / 2.75)
const t3 = time - (2.25 / 2.75)
const t4 = time - (2.65 / 2.75)
return time < 1 / 2.75 ? a * time * time :
time < 2 / 2.75 ? a * t2 * t2 + 0.75 :
time < 2.5 / 2.75 ? a * t3 * t3 + 0.9375 :
a * t4 * t4 + 0.984375
}
export const easeInBounce/*:Easing*/ = invert(easeOutBounce)
export const easeInOutBounce/*:Easing*/ = inOut(easeInBounce, easeOutBounce)
export const easeInElastic/*:Easing*/ = time => {
const s = 0.075
const p = 0.3
const t = time - 1
return -((2 ^ (10 * t)) * Math.sin((t - s) * (2 * Math.PI) / p))
}
export const easeOutElastic/*:Easing*/ = invert(easeInElastic)
export const easeInOutElastic/*:Easing*/ = inOut(easeInElastic, easeOutElastic)
const floats = pair(float)
const zip = /*::<x,y,z>*/(f/*:(x:x,y:y)=>z*/, xs/*:Array<x>*/, ys/*:Array<y>*/)/*:Array<z>*/ => {
const zs = []
const count = Math.min(xs.length, ys.length)
let index = 0
while (index < count) {
zs.push(f(xs[index], ys[index]))
index = index + 1
}
return zs
}
// A cubic bezier function using 4 parameters: x and y position of first
// control point, and x and y position of second control point.
export const bezier = (x1/*:Float*/, y1/*:Float*/, x2/*:Float*/, y2/*:Float*/)/*:Easing*/ =>
time => {
const f = (xs, ys) => floats(xs, ys, time)
const casteljau = points => {
if (points.length === 1) {
const [[x, y]] = points
return y
} else {
return casteljau(zip(f, points, points.slice(1)))
}
}
return casteljau([[0,0], [x1,y1], [x2,y2], [1,1]])
}