forked from vgeshel/one
-
Notifications
You must be signed in to change notification settings - Fork 0
/
animation.cljs
129 lines (106 loc) · 4.02 KB
/
animation.cljs
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
127
128
129
(ns ^{:doc "Defines animations which are used in the sample
application."}
one.sample.animation
(:use [one.core :only (start)]
[one.browser.animation :only (bind parallel serial)]
[domina :only (by-id set-html! set-styles! destroy-children! append!)]
[domina.xpath :only (xpath)])
(:require [goog.dom.forms :as gforms]))
(def form "//div[@id='form']")
(def cloud "//div[@id='greeting']")
(def label "//label[@id='name-input-label']/span")
(defn play
"Accepts an element and any number of animations and plays them in
order."
[element & animations]
(start (apply bind element animations)))
(def ^:private
form-in {:effect :fade :start 0 :end 1 :time 800})
(defn initialize-views
"Accepts the form and greeting view HTML and adds them to the
page. Animates the form sliding in from above. This function must be
run before any other view functions. It may be called from any state
to reset the UI."
[form-html greeting-html]
(let [content (xpath "//div[@id='content']")]
(destroy-children! content)
(set-html! content form-html)
(append! content greeting-html)
(set-styles! (xpath cloud) {:opacity "0" :display "none"})
(play form form-in)))
(comment ;; Try it
(initialize-views (:form one.sample.view/snippets)
(:greeting one.sample.view/snippets))
)
(defn label-move-up
"Move the passed input field label above the input field. Run when
the field gets focus and is empty."
[label]
(play label [{:effect :color :end "#53607b" :time 200}
{:effect :slide :up 40 :time 200}]))
(defn label-fade-out
"Make the passed input field label invisible. Run when the input
field loses focus and contains a valid input value."
[label]
(play label {:effect :fade :end 0 :time 200}))
(def move-down [{:effect :fade :end 1 :time 200}
{:effect :color :end "#BBC4D7" :time 200}
{:effect :slide :down 40 :time 200}])
(def fade-in {:effect :fade :end 1 :time 400})
(def fade-out {:effect :fade :start 1 :end 0 :time 400})
(defn label-move-down
"Make the passed input field label visible and move it down into the
input field. Run when an input field loses focus and is empty."
[label]
(play label move-down))
(comment ;; Examples of label effects.
(label-move-up label)
(label-fade-out label)
(label-move-down label)
)
(defn show-greeting
"Move the form out of view and the greeting into view. Run when the
submit button is clicked and the form has valid input."
[]
(start (parallel (bind form {:effect :fade :start 1 :end 0 :time 500})
(bind cloud
{:effect :color :time 500} ; Dummy animation for delay purposes
{:effect :fade-in-and-show :time 600}))))
(defn show-form
"Move the greeting cloud out of view and show the form. Run when the
back button is clicked from the greeting view."
[]
(start (serial (parallel (bind cloud {:effect :fade-out-and-hide :time 500})
(bind form
{:effect :color :time 300} ; Dummy animation for delay purposes
form-in))
(bind label fade-in move-down))))
(comment ;; Switch between greeting and form views
(label-move-up label)
(show-greeting)
(show-form)
)
(defn disable-button
"Accepts an element id for a button and disables it. Fades the
button to 0.2 opacity."
[id]
(let [button (by-id id)]
(gforms/setDisabled button true)
(play button (assoc fade-out :end 0.2))))
(defn enable-button
"Accepts an element id for a button and enables it. Fades the button
to an opactiy of 1."
[id]
(let [button (by-id id)]
(gforms/setDisabled button false)
(play button fade-in)))
(comment ;; Examples of all effects
(initialize-views (:form one.sample.view/snippets)
(:greeting one.sample.view/snippets))
(label-move-up label)
(label-fade-out label)
(show-greeting)
(show-form)
(disable-button "greet-button")
(enable-button "greet-button")
)