aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.html6
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js117
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html2
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js27
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css117
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss17
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html24
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js15
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css13
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss21
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/Span.reel/Span.html6
-rw-r--r--js/panels/Timeline/Span.reel/Span.js11
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss6
-rw-r--r--[-rwxr-xr-x]js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html70
-rw-r--r--[-rwxr-xr-x]js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js216
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css25
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html102
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js325
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css62
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss14
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html16
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js114
23 files changed, 853 insertions, 482 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index bf21994b..72da49d5 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -9,8 +9,7 @@
9 "module": "js/panels/Timeline/Keyframe.reel", 9 "module": "js/panels/Timeline/Keyframe.reel",
10 "name": "Keyframe", 10 "name": "Keyframe",
11 "properties": { 11 "properties": {
12 "element": {"#": "keyframespace"}, 12 "element": {"#": "keyframespace"}
13 "tweenkeyframe": {"#": "tweenkeyframe"}
14 } 13 }
15 } 14 }
16 15
@@ -19,8 +18,7 @@
19 </head> 18 </head>
20 <body> 19 <body>
21 20
22 <div id="keyframespace"> 21 <div id="keyframespace" class="tween_keyframe">
23 <div id="tweenkeyframe" class="tween_keyframe"></div>
24 </div> 22 </div>
25 23
26 </body> 24 </body>
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c82a9086..bb2acee0 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,6 +1,5 @@
1var Montage = require("montage/core/core").Montage; 1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
4 3
5var Keyframe = exports.Keyframe = Montage.create(Component, { 4var Keyframe = exports.Keyframe = Montage.create(Component, {
6 5
@@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
19 }, 18 },
20 set:function(value){ 19 set:function(value){
21 this._position = value; 20 this._position = value;
21 this.needsDraw = true;
22 } 22 }
23 }, 23 },
24 24
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:{ 25 prepareForDraw:{
86 value:function(){ 26 value:function(){
87 this.tweenkeyframe.addEventListener("click", this, false); 27 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 } 28 }
92 }, 29 },
93 30
94 draw:{ 31 draw:{
95 value:function(){ 32 value:function(){
96 this.tweenkeyframe.style.left = (this.position - 3) + "px"; 33 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 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
111 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
112 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
113 this.containingTrack.updateKeyframeRule();
114 }
115 }
116 } 34 }
117 }, 35 },
118 36
119 deselect:{ 37 deselectKeyframe:{
120 value:function(){ 38 value:function(){
121 this.tweenkeyframe.classList.remove("keyframeSelected"); 39 this.element.classList.remove("keyframeSelected");
122 this.eventManager.removeEventListener("elementChange", this, false);
123 } 40 }
124 }, 41 },
125 42
126 select:{ 43 selectKeyframe:{
127 value:function(){ 44 value:function(){
128 this.application.ninja.timeline.deselectKeyframes(); 45 this.element.classList.add("keyframeSelected");
129 this.tweenkeyframe.classList.add("keyframeSelected"); 46 this.parentComponent.selectTween();
130 this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
131 this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
132 this.application.ninja.timeline.selectedKeyframes.push(this);
133
134 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
135 var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
136 this.application.ninja.timeline.updateTimeText(currentMillisec);
137
138 var currentTop = this.animatedProperties["top"] + "px";
139 var currentLeft = this.animatedProperties["left"] + "px";
140
141 ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
142 ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
143
144 // turn on element change event listener
145 this.eventManager.addEventListener("elementChange", this, false);
146 } 47 }