aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js6
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.html11
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js123
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css6
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html160
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js167
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css110
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss29
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html29
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js21
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css19
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/images/gridline.jpgbin0 -> 724 bytes
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss28
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/Span.reel/Span.html11
-rw-r--r--js/panels/Timeline/Span.reel/Span.js17
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css6
-rw-r--r--js/panels/Timeline/Style.reel/Style.html5
-rw-r--r--js/panels/Timeline/Style.reel/Style.js6
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss12
-rw-r--r--[-rwxr-xr-x]js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html112
-rw-r--r--[-rwxr-xr-x]js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js240
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css31
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html107
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js358
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css63
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss20
-rw-r--r--js/panels/Timeline/Track.reel/Track.html5
-rw-r--r--js/panels/Timeline/Track.reel/Track.js6
-rw-r--r--js/panels/Timeline/Track.reel/css/Track.css6
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html5
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js6
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css6
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html21
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js120
-rw-r--r--js/panels/Timeline/Tween.reel/css/Tween.css6
36 files changed, 1403 insertions, 484 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index d286d84c..5de884a9 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -1,3 +1,9 @@
1/* <copyright>
2 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 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
1/* 7/*
2 * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. 8 * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other.
3 * Required properties: 9 * Required properties:
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index bf21994b..7e917b5a 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -1,4 +1,9 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
2<html lang="en"> 7<html lang="en">
3 <head> 8 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -9,8 +14,7 @@
9 "module": "js/panels/Timeline/Keyframe.reel", 14 "module": "js/panels/Timeline/Keyframe.reel",
10 "name": "Keyframe", 15 "name": "Keyframe",
11 "properties": { 16 "properties": {
12 "element": {"#": "keyframespace"}, 17 "element": {"#": "keyframespace"}
13 "tweenkeyframe": {"#": "tweenkeyframe"}
14 } 18 }
15 } 19 }
16 20
@@ -19,8 +23,7 @@
19 </head> 23 </head>
20 <body> 24 <body>
21 25
22 <div id="keyframespace"> 26 <div id="keyframespace" class="tween_keyframe">
23 <div id="tweenkeyframe" class="tween_keyframe"></div>
24 </div> 27 </div>
25 28
26 </body> 29 </body>
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c82a9086..859cdfb1 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,6 +1,11 @@
1/* <copyright>
2 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 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
1var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
4 9
5var Keyframe = exports.Keyframe = Montage.create(Component, { 10var Keyframe = exports.Keyframe = Montage.create(Component, {
6 11
@@ -19,136 +24,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
19 }, 24 },
20 set:function(value){ 25 set:function(value){
21 this._position = value; 26 this._position = value;
27 this.needsDraw = true;
22 } 28 }
23 }, 29 },
24 30
25 _id:{
26 value:0
27 },
28
29 id:{
30 serializable:true,
31 get:function () {
32 return this._id;
33 },
34 set:function (value) {
35 this._id = value;
36 }
37 },
38
39 _timelinePosition:{
40 value:0
41 },
42
43 timelinePosition:{
44 serializable:true,
45 get:function () {
46 return this._timelinePosition;
47 },
48 set:function (value) {
49 this._timelinePosition = value;
50 }
51 },
52
53 _containingTrack:{
54 value:{}
55 },
56
57 containingTrack:{
58 serializable:true,
59 get:function () {
60 return this._containingTrack;
61 },
62 set:function (value) {
63 this._containingTrack = value;
64 }
65 },
66
67 _animatedProperties:{
68 value:[]
69 },
70
71 animatedProperties:{
72 serializable:true,
73 get:function () {
74 return this._animatedProperties;
75 },
76 set:function (value) {
77 this._animatedProperties = value;
78 }
79 },
80
81 containingSpan:{
82 value: null
83 },
84
85 prepareForDraw:{ 31 prepareForDraw:{
86 value:function(){ 32 value:function(){
87 this.tweenkeyframe.addEventListener("click", this, false); 33 this.element.addEventListener("click", this, false);
88 this.animatedProperties = new Array();
89 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
90 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
91 } 34 }
92 }, 35 },
93 36
94 draw:{ 37 draw:{
95 value:function(){ 38 value:function(){
96 this.tweenkeyframe.style.left = (this.position - 3) + "px"; 39 this.element.style.left = (this.position - 3) + "px";
97 }
98 },
99
100 handleElementChange:{
101 value:function (event) {
102 if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
103 alert("Wrong element selected for this keyframe track");
104 return;
105 }
106
107 if(event.detail.source && event.detail.source !== "keyframe") {
108 this.containingSpan.highlightSpan();
109 if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
110