diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 129 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 44 |
2 files changed, 136 insertions, 37 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 14315f8d..79b522ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -17,7 +17,12 @@ | |||
17 | "element": {"#": "layer"}, | 17 | "element": {"#": "layer"}, |
18 | "styleRepetition" : {"@":"repetition1"}, | 18 | "styleRepetition" : {"@":"repetition1"}, |
19 | "dynamicLayerName" : {"@":"dtext1"}, | 19 | "dynamicLayerName" : {"@":"dtext1"}, |
20 | "slotStyle" : {"@":"slot1"} | 20 | "slotStyle" : {"@":"slot1"}, |
21 | "mainCollapser" : {"@" : "mainCollapser"}, | ||
22 | "positionCollapser" : {"@" : "positionCollapser"}, | ||
23 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
24 | "styleCollapser" : {"@" : "styleCollapser"}, | ||
25 | "clickerMain" : {"#" : "clicker-main"} | ||
21 | } | 26 | } |
22 | }, | 27 | }, |
23 | "dtext1" : { | 28 | "dtext1" : { |
@@ -225,6 +230,90 @@ | |||
225 | "oneway": false | 230 | "oneway": false |
226 | } | 231 | } |
227 | } | 232 | } |
233 | }, | ||
234 | |||
235 | "mainCollapser" : { | ||
236 | "module" : "js/panels/timeline/Collapser.js", | ||
237 | "name" : "Collapser", | ||
238 | "properties" : { | ||
239 | "element" : {"#" : "content-main"}, | ||
240 | "myContent" : {"#" : "content-main"}, | ||
241 | "contentHeight" : 60, | ||
242 | "isLabelClickable" : true, | ||
243 | "clicker" : {"#" : "clicker-main"}, | ||
244 | "isCollapsed" : true, | ||
245 | "isAnimated" : true | ||
246 | }, | ||
247 | "bindings" : { | ||
248 | "isToggling" : { | ||
249 | "boundObject" : {"@" : "owner" }, | ||
250 | "boundObjectPropertyPath" : "isMainCollapsed", | ||
251 | "oneway" : false | ||
252 | } | ||
253 | } | ||
254 | }, | ||
255 | |||
256 | "positionCollapser" : { | ||
257 | "module" : "js/panels/timeline/Collapser.js", | ||
258 | "name" : "Collapser", | ||
259 | "properties" : { | ||
260 | "element" : {"#" : "content-position"}, | ||
261 | "myContent" : {"#":"content-position"}, | ||
262 | "contentHeight" : 60, | ||
263 | "isLabelClickable" : true, | ||
264 | "clicker" : {"#" : "clicker-position"}, | ||
265 | "isCollapsed" : true, | ||
266 | "isAnimated" : true | ||
267 | }, | ||
268 | "bindings" : { | ||
269 | "isToggling" : { | ||
270 | "boundObject" : {"@" : "owner" }, | ||
271 | "boundObjectPropertyPath" : "isPositionCollapsed", | ||
272 | "oneway" : false | ||
273 | } | ||
274 | } | ||
275 | }, | ||
276 | |||
277 | "transformCollapser" : { | ||
278 | "module" : "js/panels/timeline/Collapser.js", | ||
279 | "name" : "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" : { | ||
299 | "module" : "js/panels/timeline/Collapser.js", | ||
300 | "name" : "Collapser", | ||
301 | "properties" : { | ||
302 | "element" : {"#" : "content-style"}, | ||
303 | "myContent" : {"#":"content-style"}, | ||
304 | "contentHeight" : 60, | ||
305 | "isLabelClickable" : true, | ||
306 | "clicker" : {"#" : "clicker-style"}, | ||
307 | "isCollapsed" : true, | ||
308 | "isAnimated" : true | ||
309 | }, | ||
310 | "bindings" : { | ||
311 | "isToggling" : { | ||
312 | "boundObject" : {"@" : "owner" }, | ||
313 | "boundObjectPropertyPath" : "isStyleCollapsed", | ||
314 | "oneway" : false | ||
315 | } | ||
316 | } | ||
228 | } | 317 | } |
229 | 318 | ||
230 | 319 | ||
@@ -233,68 +322,68 @@ | |||
233 | </head> | 322 | </head> |
234 | <body> | 323 | <body> |
235 | 324 | ||
236 | <div id="layer" class="container-layer"> | 325 | <div data-montage-id="layer" class="container-layer"> |
237 | <div class="label-layer"> | 326 | <div class="label-layer"> |
238 | <span class="collapsible-label" id="layer-label-text" spellcheck="false">Label</span> | 327 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> |
239 | <span class="collapsible-clicker collapsible-collapsed"></span> | 328 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> |
240 | <div class="cssbutton button-lock"></div> | 329 | <div class="cssbutton button-lock"></div> |
241 | <div class="cssbutton button-visible"></div> | 330 | <div class="cssbutton button-visible"></div> |
242 | </div> | 331 | </div> |
243 | <div class="collapsible-content content-layer collapsible-collapsed"> | 332 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> |
244 | <div class="label-position"> | 333 | <div class="label-position"> |
245 | <span class="collapsible-label">Position</span> | 334 | <span class="collapsible-label">Position</span> |
246 | <span class="collapsible-clicker clicker-position collapsible-collapsed"></span> | 335 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> |
247 | </div> | 336 | </div> |
248 | <div class="content-position collapsible-content collapsible-collapsed"> | 337 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> |
249 | <div class="layout-table"> | 338 | <div class="layout-table"> |
250 | <div class="layout-row"> | 339 | <div class="layout-row"> |
251 | <div class="layout-cell">X</div> | 340 | <div class="layout-cell">X</div> |
252 | <div class="layout-cell"><div id="position-x"></div></div> | 341 | <div class="layout-cell"><div data-montage-id="position-x"></div></div> |
253 | </div> | 342 | </div> |
254 | <div class="layout-row"> | 343 | <div class="layout-row"> |
255 | <div class="layout-cell">Y</div> | 344 | <div class="layout-cell">Y</div> |
256 | <div class="layout-cell"><div id="position-y"></div></div> | 345 | <div class="layout-cell"><div data-montage-id="position-y"></div></div> |
257 | </div> | 346 | </div> |
258 | </div> | 347 | </div> |
259 | </div> | 348 | </div> |
260 | <div class="label-transform"> | 349 | <div class="label-transform"> |
261 | <span class="collapsible-label">Transform</span> | 350 | <span class="collapsible-label">Transform</span> |
262 | <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span> | 351 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> |
263 | </div> | 352 | </div> |
264 | <div class="content-transform collapsible-content collapsible-collapsed"> | 353 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> |
265 | <div class="layout-table"> | 354 | <div class="layout-table"> |
266 | <div class="layout-row"> | 355 | <div class="layout-row"> |
267 | <div class="layout-cell">Scale X</div> | 356 | <div class="layout-cell">Scale X</div> |
268 | <div class="layout-cell"><div id="scale-x"></div></div> | 357 | <div class="layout-cell"><div data-montage-id="scale-x"></div></div> |
269 | </div> | 358 | </div> |
270 | <div class="layout-row"> | 359 | <div class="layout-row"> |
271 | <div class="layout-cell">Scale Y</div> | 360 | <div class="layout-cell">Scale Y</div> |
272 | <div class="layout-cell"><div id="scale-y"></div></div> | 361 | <div class="layout-cell"><div data-montage-id="scale-y"></div></div> |
273 | </div> | 362 | </div> |
274 | <div class="layout-row"> | 363 | <div class="layout-row"> |
275 | <div class="layout-cell">Skew X</div> | 364 | <div class="layout-cell">Skew X</div> |
276 | <div class="layout-cell"><div id="skew-x"></div></div> | 365 | <div class="layout-cell"><div data-montage-id="skew-x"></div></div> |
277 | </div> | 366 | </div> |
278 | <div class="layout-row"> | 367 | <div class="layout-row"> |
279 | <div class="layout-cell">Skew Y</div> | 368 | <div class="layout-cell">Skew Y</div> |
280 | <div class="layout-cell"><div id="skew-y"></div></div> | 369 | <div class="layout-cell"><div data-montage-id="skew-y"></div></div> |
281 | </div> | 370 | </div> |
282 | <div class="layout-row"> | 371 | <div class="layout-row"> |
283 | <div class="layout-cell">Rotation</div> | 372 | <div class="layout-cell">Rotation</div> |
284 | <div class="layout-cell"><div id="rotation"></div></div> |