diff options
author | Jonathan Duran | 2012-05-24 09:35:17 -0700 |
---|---|---|
committer | Jonathan Duran | 2012-05-24 09:35:17 -0700 |
commit | 9809c96d96c24a512f6da1efbf44f174ca9321fe (patch) | |
tree | fa87aeee120500e57d1077c6c0c01a6cc717e144 /js/panels/Timeline/Span.reel | |
parent | 458714f5bf2ab095f6e96dfec3f9ff7042527c04 (diff) | |
parent | a8dff9f5cb9dec84e6805118d49903710b361275 (diff) | |
download | ninja-9809c96d96c24a512f6da1efbf44f174ca9321fe.tar.gz |
Merge branch 'refs/heads/timeline-local' into TimelineUber
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.html | 18 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 127 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 107 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/Span.scss | 101 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/config.rb | 9 |
5 files changed, 349 insertions, 13 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index 8baa141a..a1f3afeb 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html | |||
@@ -13,7 +13,10 @@ | |||
13 | "owner": { | 13 | "owner": { |
14 | "prototype": "js/panels/Timeline/Span.reel", | 14 | "prototype": "js/panels/Timeline/Span.reel", |
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "spanspace"} | 16 | "element": {"#": "spanspace"}, |
17 | "container_easing" : {"#" : "container_easing"}, | ||
18 | "easing_choice" : {"#": "easing_choice"}, | ||
19 | "easing_choices" : {"#" : "easing_choices"} | ||
17 | } | 20 | } |
18 | } | 21 | } |
19 | 22 | ||
@@ -23,6 +26,19 @@ | |||
23 | <body> | 26 | <body> |
24 | 27 | ||
25 | <div data-montage-id="spanspace" class="tween_span"> | 28 | <div data-montage-id="spanspace" class="tween_span"> |
29 | <div class="tween_span_bar"></div> | ||
30 | <div data-montage-id="container_easing" class="container-easing"> | ||
31 | <div data-montage-id="easing_choice" class="easing-choice"> | ||
32 | ease-out | ||
33 | </div> | ||
34 | <ul data-montage-id="easing_choices" class="easing-choices"> | ||
35 | <li data-ninja-ease="ease">ease</li> | ||
36 | <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li> | ||
37 | <li data-ninja-ease="ease-in">ease-in</li> | ||
38 | <li data-ninja-ease="ease-in-out">ease-in-out</li> | ||
39 | <li data-ninja-ease="linear">linear</li> | ||
40 | </ul> | ||
41 | </div> | ||
26 | </div> | 42 | </div> |
27 | 43 | ||
28 | </body> | 44 | </body> |
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bfa6aab8..1ab3455c 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js | |||
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, { | |||
13 | value: true | 13 | value: true |
14 | }, | 14 | }, |
15 | 15 | ||
16 | // BEGIN: Models | ||
16 | _spanWidth:{ | 17 | _spanWidth:{ |
17 | value:0 | 18 | value:0 |
18 | }, | 19 | }, |
19 | |||
20 | spanWidth:{ | 20 | spanWidth:{ |
21 | serializable:true, | 21 | serializable:true, |
22 | get:function () { | 22 | get:function () { |
@@ -27,16 +27,137 @@ var Span = exports.Span = Montage.create(Component, { | |||
27 | this.needsDraw = true; | 27 | this.needsDraw = true; |
28 | } | 28 | } |
29 | }, | 29 | }, |
30 | 30 | ||
31 | _isHighlighted: { | ||
32 | value: false | ||
33 | }, | ||
34 | isHighlighted: { | ||
35 | get: function() { | ||
36 | return this._isHighlighted; | ||
37 | }, | ||
38 | set: function(newVal) { | ||
39 | if (newVal !== this._isHighlighted) { | ||
40 | this._isHighlighted = newVal; | ||
41 | this.needsDraw = true; | ||
42 | } | ||
43 | } | ||
44 | }, | ||
45 | |||
46 | _areChoicesVisible: { | ||
47 | value: false | ||
48 | }, | ||
49 | areChoicesVisible: { | ||
50 | get: function() { | ||
51 | return this._areChoicesVisible; | ||
52 | }, | ||
53 | set: function(newVal) { | ||
54 | if (newVal !== this._areChoicesVisible) { | ||
55 | this._areChoicesVisible = newVal; | ||
56 | this.needsDraw = true; | ||
57 | } | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | _easing: { | ||
62 | value: "ease-in" | ||
63 | }, | ||
64 | easing: { | ||
65 | get: function() { | ||
66 | return this._easing; | ||
67 | }, | ||
68 | set: function(newVal) { | ||
69 | if (newVal !== this._easing) { | ||
70 | this._easing = newVal; | ||
71 | this.parentComponent.setKeyframeEase(newVal); | ||
72 | this.needsDraw = true; | ||
73 | } | ||
74 | } | ||
75 | }, | ||
76 | |||
77 | // BEGIN: draw cycle | ||
78 | prepareForDraw: { | ||
79 | value: function() { | ||
80 | this.init(); | ||
81 | } | ||
82 | }, | ||
83 | |||
31 | draw:{ | 84 | draw:{ |
32 | value: function(){ | 85 | value: function(){ |
86 | |||
33 | this.element.style.width = this.spanWidth + "px"; | 87 | this.element.style.width = this.spanWidth + "px"; |
88 | |||
89 | if ((this.spanWidth <= 70) && (this.spanWidth >0)) { | ||
90 | var containerWidth = this.spanWidth -18, | ||
91 | choiceWidth; | ||
92 | if (containerWidth < 0) { | ||
93 | containerWidth = 0; | ||
94 | } | ||
95 | choiceWidth = containerWidth -3; | ||
96 | if (choiceWidth < 0) { | ||
97 | choiceWidth = 0; | ||
98 | } | ||
99 | this.container_easing.style.width = containerWidth + "px"; | ||
100 | this.easing_choice.style.width = choiceWidth + "px"; | ||
101 | this.easing_choice.style.overflow = "hidden"; | ||
102 | } | ||
103 | if (this.spanWidth > 70) { | ||
104 | this.container_easing.setAttribute("style", ""); | ||
105 | this.easing_choice.setAttribute("style", ""); | ||
106 | } | ||
107 | |||
108 | // Highlight the span? | ||
109 | if (this.isHighlighted === true) { | ||
110 | this.element.classList.add("spanHighlight"); | ||
111 | } else { | ||
112 | this.element.classList.remove("spanHighlight"); | ||
113 | } | ||
114 | |||
115 | // Hide or show the choices menu? | ||
116 | if (this.areChoicesVisible === true) { | ||
117 | this.easing_choices.style.display = "block"; | ||
118 | } else { | ||
119 | this.easing_choices.style.display = "none"; | ||
120 | } | ||
121 | |||
122 | // Change easing? | ||
123 | if (this.easing_choice.innerText !== this.easing) { | ||
124 | this.easing_choice.innerText = this.easing; | ||
125 | } | ||
126 | |||
34 | } | 127 | } |
35 | }, | 128 | }, |
36 | 129 | ||
130 | // BEGIN: Controllers | ||
131 | init: { | ||
132 | value: function() { | ||
133 | this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); | ||
134 | this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); | ||
135 | |||
136 | } | ||
137 | }, | ||
138 | |||
37 | highlightSpan:{ | 139 | highlightSpan:{ |
38 | value: function(){ | 140 | value: function(){ |
39 | this.element.classList.add("spanHighlight"); | 141 | // Class add/remove should only be done in draw cycle. |
142 | // this.element.classList.add("spanHighlight"); | ||
143 | this.isHighlighted = true; | ||
40 | } | 144 | } |
145 | }, | ||
146 | |||
147 | handleEasingChoiceClick: { | ||
148 | value: function(event) { | ||
149 | this.areChoicesVisible = true; | ||
150 | } | ||
151 | }, | ||
152 | handleEasingChoicesClick: { | ||
153 | value: function(event) { | ||
154 | |||
155 | this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); | ||
156 | event.target.classList.add("easing-selected"); | ||
157 | this.easing = event.target.dataset.ninjaEase; | ||
158 | |||
159 | // Which element was just | ||
160 | this.areChoicesVisible = false; | ||
161 | } | ||
41 | } | 162 | } |
42 | }); | 163 | }); |
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 198d71f3..e5cb4263 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css | |||
@@ -1,17 +1,106 @@ | |||
1 | @charset "UTF-8"; | ||
1 | /* <copyright> | 2 | /* <copyright> |
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 6 | </copyright> */ |
7 | /* Span.scss | ||
8 | * Main SCSS file for Span component, compiled by SASS into the file css/Span.css. | ||
9 | */ | ||
10 | /* line 22, ../scss/Span.scss */ | ||
11 | .tween_span { | ||
12 | position: absolute; | ||
13 | height: 16px; | ||