diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 153 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 779 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 78 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 14 |
4 files changed, 691 insertions, 333 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 9288d718..5ee50491 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -17,12 +17,19 @@ | |||
17 | "styleRepetition" : {"@":"repetition1"}, | 17 | "styleRepetition" : {"@":"repetition1"}, |
18 | "dynamicLayerName" : {"@":"dtext1"}, | 18 | "dynamicLayerName" : {"@":"dtext1"}, |
19 | "dynamicLayerTag" : {"@": "dtext2"}, | 19 | "dynamicLayerTag" : {"@": "dtext2"}, |
20 | "layer_label_text" : {"#": "layer-label-text"}, | ||
20 | "mainCollapser" : {"@" : "mainCollapser"}, | 21 | "mainCollapser" : {"@" : "mainCollapser"}, |
21 | "positionCollapser" : {"@" : "positionCollapser"}, | 22 | "positionCollapser" : {"@" : "positionCollapser"}, |
22 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
23 | "styleCollapser" : {"@" : "styleCollapser"}, | 23 | "styleCollapser" : {"@" : "styleCollapser"}, |
24 | "clickerMain" : {"#" : "clicker-main"}, | 24 | "clickerMain" : {"#" : "clicker-main"}, |
25 | "myLabel" : {"#" : "myLabel"} | 25 | "myLabel" : {"#" : "myLabel"}, |
26 | "leftControl": {"@" : "dtext_position_x"}, | ||
27 | "topControl": {"@" : "dtext_position_y"}, | ||
28 | "widthControl": {"@" : "dtext_scale_x"}, | ||
29 | "heightControl": {"@" : "dtext_scale_y"}, | ||
30 | "styleType":{"@" : "style"}, | ||
31 | "layerLock":{"#" : "layerLock"}, | ||
32 | "visibilityButton":{"#" : "visibilityButton"} | ||
26 | } | 33 | } |
27 | }, | 34 | }, |
28 | "dtext1" : { | 35 | "dtext1" : { |
@@ -34,7 +41,7 @@ | |||
34 | "value" : { | 41 | "value" : { |
35 | "boundObject" : {"@": "owner"}, | 42 | "boundObject" : {"@": "owner"}, |
36 | "boundObjectPropertyPath" : "layerName", | 43 | "boundObjectPropertyPath" : "layerName", |
37 | "oneway" : false | 44 | "oneway" : true |
38 | } | 45 | } |
39 | } | 46 | } |
40 | }, | 47 | }, |
@@ -105,7 +112,12 @@ | |||
105 | "boundObject" : {"@": "repetition1"}, | 112 | "boundObject" : {"@": "repetition1"}, |
106 | "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener", | 113 | "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener", |
107 | "oneway" : false | 114 | "oneway" : false |
108 | } | 115 | }, |
116 | "colorelement" : { | ||
117 | "boundObject" : {"@": "repetition1"}, | ||
118 | "boundObjectPropertyPath" : "objectAtCurrentIteration.colorelement", | ||
119 | "oneway" : false | ||
120 | } | ||
109 | } | 121 | } |
110 | }, | 122 | }, |
111 | "dtext_position_x" : { | 123 | "dtext_position_x" : { |
@@ -148,10 +160,10 @@ | |||
148 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 160 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
149 | "properties": { | 161 | "properties": { |
150 | "element": {"#": "scale-x"}, | 162 | "element": {"#": "scale-x"}, |
151 | "maxValue" : 100, | 163 | "maxValue" : 100000, |
152 | "minValue" : 0, | 164 | "minValue" : -100000, |
153 | "acceptableUnits" : "%", | 165 | "acceptableUnits" : "px", |
154 | "units" : "%", | 166 | "units" : "px", |
155 | "value" : 0 | 167 | "value" : 0 |
156 | }, | 168 | }, |
157 | "bindings": { | 169 | "bindings": { |
@@ -166,10 +178,10 @@ | |||
166 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 178 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
167 | "properties": { | 179 | "properties": { |
168 | "element": {"#": "scale-y"}, | 180 | "element": {"#": "scale-y"}, |
169 | "maxValue" : 100, | 181 | "maxValue" : 100000, |
170 | "minValue" : 0, | 182 | "minValue" : -100000, |
171 | "acceptableUnits" : "%", | 183 | "acceptableUnits" : "px", |
172 | "units" : "%", | 184 | "units" : "px", |
173 | "value" : 0 | 185 | "value" : 0 |
174 | }, | 186 | }, |
175 | "bindings": { | 187 | "bindings": { |
@@ -180,60 +192,6 @@ | |||
180 | } | 192 | } |
181 | } | 193 | } |
182 | }, | 194 | }, |
183 | "dtext_skew_x" : { | ||
184 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
185 | "properties": { | ||
186 | "element": {"#": "skew-x"}, | ||
187 | "maxValue" : 100, | ||
188 | "minValue" : 0, | ||
189 | "acceptableUnits" : "%", | ||
190 | "units" : "%", | ||
191 | "value" : 0 | ||
192 | }, | ||
193 | "bindings": { | ||
194 | "value": { | ||
195 | "boundObject": {"@": "owner"}, | ||
196 | "boundObjectPropertyPath": "dtextSkewX", | ||
197 | "oneway": false | ||
198 | } | ||
199 | } | ||
200 | }, | ||
201 | "dtext_skew_y" : { | ||
202 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
203 | "properties": { | ||
204 | "element": {"#": "skew-y"}, | ||
205 | "maxValue" : 100, | ||
206 | "minValue" : 0, | ||
207 | "acceptableUnits" : "%", | ||
208 | "units" : "%", | ||
209 | "value" : 0 | ||
210 | }, | ||
211 | "bindings": { | ||
212 | "value": { | ||
213 | "boundObject": {"@": "owner"}, | ||
214 | "boundObjectPropertyPath": "dtextSkewY", | ||
215 | "oneway": false | ||
216 | } | ||
217 | } | ||
218 | }, | ||
219 | "dtext_rotate" : { | ||
220 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
221 | "properties": { | ||
222 | "element": {"#": "rotation"}, | ||
223 | "maxValue" : 360, | ||
224 | "minValue" : -360, | ||
225 | "acceptableUnits" : "degrees", | ||
226 | "units" : "degrees", | ||
227 | "value" : 0 | ||
228 | }, | ||
229 | "bindings": { | ||
230 | "value": { | ||
231 | "boundObject": {"@": "owner"}, | ||
232 | "boundObjectPropertyPath": "dtextRotate", | ||
233 | "oneway": false | ||
234 | } | ||
235 | } | ||
236 | }, | ||
237 | 195 | ||
238 | "mainCollapser" : { | 196 | "mainCollapser" : { |
239 | "prototype" : "js/panels/timeline/Collapser", | 197 | "prototype" : "js/panels/timeline/Collapser", |
@@ -275,26 +233,6 @@ | |||
275 | } | 233 | } |
276 | }, | 234 | }, |
277 | 235 | ||
278 | "transformCollapser" : { | ||
279 | "prototype" : "js/panels/timeline/Collapser", | ||
280 | "properties" : { | ||
281 | "element" : {"#" : "content-transform"}, | ||
282 | "myContent" : {"#":"content-transform"}, | ||
283 | "contentHeight" : 60, | ||
284 | "isLabelClickable" : true, | ||
285 | "clicker" : {"#" : "clicker-transform"}, | ||
286 | "isCollapsed" : true, | ||
287 | "isAnimated" : true | ||
288 | }, | ||
289 | "bindings" : { | ||
290 | "isToggling" : { | ||
291 | "boundObject" : {"@" : "owner" }, | ||
292 | "boundObjectPropertyPath" : "isTransformCollapsed", | ||
293 | "oneway" : false | ||
294 | } | ||
295 | } | ||
296 | }, | ||
297 | |||
298 | "styleCollapser" : { | 236 | "styleCollapser" : { |
299 | "prototype" : "js/panels/timeline/Collapser", | 237 | "prototype" : "js/panels/timeline/Collapser", |
300 | "properties" : { | 238 | "properties" : { |
@@ -326,12 +264,12 @@ | |||
326 | <span data-montage-id="layer-tag" class="layer-tag"></span> | 264 | <span data-montage-id="layer-tag" class="layer-tag"></span> |
327 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> | 265 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> |
328 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> | 266 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> |
329 | <div class="cssbutton button-lock"></div> | 267 | <div class="cssbutton button-lock" data-montage-id="layerLock"></div> |
330 | <div class="cssbutton button-visible"></div> | 268 | <div class="cssbutton button-visible" data-montage-id="visibilityButton"></div> |
331 | </div> | 269 | </div> |
332 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> | 270 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> |
333 | <div class="label-position"> | 271 | <div class="label-position"> |
334 | <span class="collapsible-label">Position</span> | 272 | <span class="collapsible-label">Position and Size</span> |
335 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> | 273 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> |
336 | </div> | 274 | </div> |
337 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> | 275 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> |
@@ -344,37 +282,16 @@ | |||
344 | <div class="cell-property">Top</div> | 282 | <div class="cell-property">Top</div> |
345 | <div class="cell-value"><div data-montage-id="position-y"></div></div> |