-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmaterial.coffee
126 lines (100 loc) · 3.37 KB
/
material.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
exports.transformCurve = 'cubic-bezier(0.4, 0, 0.2, 1)' # fast out, slow in
exports.enterCurve = 'cubic-bezier(0, 0, 0.2, 1)' # linear out, slow in
exports.exitCurve = 'cubic-bezier(0.4, 0, 0.2, 1)' # fast out, linear in
exports.Button = class Button extends Layer
constructor: (text, options={}) ->
options.backgroundColor ?= '#03a9f4'
options.color ?= '#fff'
options.shadowY ?= 2
options.shadowBlur ?= 2
options = _.extend options,
borderRadius: 2
height: 36
shadowColor: 'rgba(0, 0, 0, 0.24)'
super options
@style.font = '500 14px/36px Roboto'
@style.textTransform = 'uppercase'
@style.textAlign = 'center'
@html = text
if options.fit
@style.display = 'inline-block'
@style.width = 'auto'
@style.minWidth = '88px'
@style.padding = '0 8px'
exports.Card = class Card extends Layer
constructor: (options={}) ->
options.backgroundColor ?= '#fff'
options.shadowY ?= 2
options.shadowBlur ?= 2
options = _.extend options,
borderRadius: 2
shadowColor: 'rgba(0, 0, 0, 0.24)'
super options
exports.ProgressBar = class ProgressBar extends Layer
constructor: (options={}) ->
options.backgroundColor ?= 'rgba(0, 0, 0, 0.12)'
options.height ?= 4
options.originY ?= 1
options.scaleY ?= 0
super options
@fill = new Layer
superLayer: @
backgroundColor: options.fillColor || '#03a9f4'
scaleX: 0
originX: 0
@fill.style.width = '100%'
@fill.style.height = '100%'
animateTo: (fill, time) =>
@fill.scaleX = 0
@animate properties: scaleY: 1
fillAnimation = new Animation
layer: @fill
properties: scaleX: fill
time: time || 1
containerAnimation = new Animation
layer: @
properties: scaleY: 0
fillAnimation.on Events.AnimationEnd, -> containerAnimation.start()
fillAnimation.start()
containerAnimation
exports.Ripple = class Ripple extends Layer
constructor: (options={}) ->
options.container ?= Framer.Device.screen
options.origin ?= x: options.container.midX, y: options.container.midY
options.radius ?= Math.max options.container.width, options.container.height
options.color ?= '#000'
super
backgroundColor: null
width: options.container.width
height: options.container.height
x: options.container.screenFrame.x
y: options.container.screenFrame.y
clip: true
@placeBefore options.container
@ink = new Layer
superLayer: @
backgroundColor: options.color
opacity: 0.25
width: options.radius * 2
height: options.radius * 2
midX: options.origin.x - options.container.screenFrame.x
midY: options.origin.y - options.container.screenFrame.y
borderRadius: '50%'
scale: 0
@grow()
grow: ->
@ink.animate properties: scale: 1
remove: ->
animation = @ink.animate properties: opacity: 0
animation.on Events.AnimationEnd, => @destroy()
# via https://www.facebook.com/groups/framerjs/permalink/580709592056116/
scaledScreenFrame = ->
frame = Framer.Device.screen.screenFrame
frame.width *= Framer.Device.screen.screenScaleX()
frame.height *= Framer.Device.screen.screenScaleY()
frame.x += (Framer.Device.screen.width - frame.width) * Framer.Device.screen.originX
frame.y += (Framer.Device.screen.height - frame.height) * Framer.Device.screen.originY
return frame
exports.eventToOrigin = (event) ->
x: (event.x - scaledScreenFrame().x) / Framer.Device.screen.screenScaleX()
y: (event.y - scaledScreenFrame().y) / Framer.Device.screen.screenScaleY()