diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 6 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 4 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 499 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 1 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.html | 3 |
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 | |||
240 | } | ||
243 | 241 | ||