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.js23
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css8
-rw-r--r--js/panels/Timeline/Span.reel/Span.js6
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js499
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css1
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html3
7 files changed, 354 insertions, 190 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 4bb73514..b6623dcd 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
78 } 78 }
79 }, 79 },
80 80
81 containingSpan:{
82 value: null
83 },
84
81 prepareForDraw:{ 85 prepareForDraw:{
82 value:function(){ 86 value:function(){
83 this.tweenkeyframe.addEventListener("click", this, false); 87 this.tweenkeyframe.addEventListener("click", this, false);
@@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
91 95
92 draw:{ 96 draw:{
93 value:function(){ 97 value:function(){
94 this.tweenkeyframe.style.left = (this.position - 2) + "px"; 98 this.tweenkeyframe.style.left = (this.position - 3) + "px";
95 } 99 }
96 }, 100 },
97 101
@@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
101 if(event.detail.source && event.detail.source !== "keyframe") { 105 if(event.detail.source && event.detail.source !== "keyframe") {
102 106
103 var items = this.application.ninja.selectedElements; 107 var items = this.application.ninja.selectedElements;
104 108 this.containingSpan.highlightSpan();
105 // update this keyframe's animated properties from the item[0] element props 109 if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){
106 this.animatedProperties["top"] = items[0]._element.offsetTop; 110 // update this keyframe's animated properties from the item[0] element props
107 this.animatedProperties["left"] = items[0]._element.offsetLeft; 111 this.animatedProperties["top"] = items[0]._element.offsetTop;
108 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; 112 this.animatedProperties["left"] = items[0]._element.offsetLeft;
109 113 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
110 this.containingTrack.updateKeyframeRule(); 114 this.containingTrack.updateKeyframeRule();
115 }
111 } 116 }
112
113
114 } 117 }
115 }, 118 },
116 119
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index e66bcf10..4afc1180 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -1,11 +1,15 @@
1.tween_keyframe{ 1.tween_keyframe{
2 position: absolute; 2 position: absolute;
3 height: 16px; 3 height: 16px;
4 width: 4px; 4 width: 5px;
5 background-color: white; 5 background-color: white;
6 z-index: 23; 6 z-index: 23;
7 border-radius: 3px;
7} 8}
8 9
9.tween_keyframe.keyframeSelected{ 10.tween_keyframe.keyframeSelected{
10 background-color: blue; 11 background-color: #570e19;
12 border-style: solid;
13 border-width: thin;
14 border-color: #d6d1cf;
11} \ No newline at end of file 15} \ No newline at end of file
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 05f56a32..f7bd4ff0 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, {
31 value: function(){ 31 value: function(){
32 this.tweenspan.style.width = this.spanWidth + "px"; 32 this.tweenspan.style.width = this.spanWidth + "px";
33 } 33 }
34 },
35
36 highlightSpan:{
37 value: function(){
38 this.tweenspan.classList.add("spanHighlight");
39 }
34 } 40 }
35}); 41});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 1583c20f..1e988c6c 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -3,4 +3,8 @@
3 height: 16px; 3 height: 16px;
4 opacity: 0.3; 4 opacity: 0.3;
5 background-color: white; 5 background-color: white;
6}
7
8.tween_span.spanHighlight{
9 background-color: #a0c8ff;
6} \ No newline at end of file 10} \ No newline at end of file
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 52b63376..48537cef 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -114,27 +114,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
114 value: false 114 value: false
115 }, 115 },
116 116
117 _isLayerAdded:{ 117 _firstTimeLoaded:{
118 value:false 118 value:true,
119 }, 119 writable:true
120
121 addButtonClicked:{
122 value:true
123 }, 120 },
124 121
125 _firstLayerDraw:{ 122 _arrLayersNonEmpty:{
126 value:false, 123 value:true,
127 writable:true 124 writable:true
128 }, 125 },
129 126
130 willDraw: { 127 willDraw: {
131 value: function() { 128 value: function() {
132 if (this._isLayer) { 129 if (this._isLayer) {
133 this.addButtonClicked=false; 130 this.insertLayer();
134 this._isElementAdded=true; 131 this._isLayer = false;;
135 NJevent('newLayer',this)
136 this._isLayer = false;
137 this.addButtonClicked=true;
138 } 132 }
139 } 133 }
140 }, 134 },
@@ -204,7 +198,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
204 //event.stopPropagation(); 198 //event.stopPropagation();
205 this._isLayer = true; 199 this._isLayer = true;
206 this.needsDraw = true; 200 this.needsDraw = true;
207
208 } 201 }
209 }, 202 },
210 203
@@ -215,7 +208,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
215 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ 208 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
216 this._hashKey="123"; 209 this._hashKey="123";
217 } 210 }
218 NJevent('deleteLayer') 211 this.removeLayer();
219 } 212 }
220 }, 213 },
221 214
@@ -223,23 +216,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
223 value:function(event){ 216 value:function(event){
224 var i=0; 217 var i=0;
225 this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode; 218 this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode;
226 this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid;
227 this.currentElement= event.detail.element;
228
229// if(this._firstLayerDraw===false){
230// while(this.arrLayers.pop()){
231// }
232// while(this.arrTracks.pop()){
233// }
234// }
235
236 this._hashKey = event.detail.element.uuid;
237 if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
238 this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
239 this._hashFind = true;
240 NJevent('newLayer');
241 219
242 } 220 if(this._firstTimeLoaded){
221 this._firstTimeLoaded=false;
222 }else{
223 while(this.arrLayers.pop()){
224 }
225 while(this.arrTracks.pop()){
226 }
227
228 if(event.detail.element.id==="UserContent"){
229 this._hashKey= "123";
230 }else{
231 this._hashKey = event.detail.element.uuid;
232 }
233
234 if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
235 this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
236 this._hashFind = true;
237 }
238 NJevent('newLayer',event.detail);
239