aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html19
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js38
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css8
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js75
4 files changed, 139 insertions, 1 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 3833a891..9eb126e0 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -119,6 +119,24 @@
119 119
120 } 120 }
121 }, 121 },
122
123 "timelineZoomSlider":{
124 "module":"js/components/slider.reel",
125 "name":"Slider",
126 "properties":{
127 "element":{"#":"tl_slider"},
128 "maxValue" : 10000,
129 "minValue" : 1000
130 },
131 "bindings": {
132 "value": {
133 "boundObject": {"@": "owner"},
134 "boundObjectPropertyPath": "millisecondsOffset",
135 "oneway": false
136 }
137 }
138 },
139
122 "endHottext" : { 140 "endHottext" : {
123 "module": "js/components/hottextunit.reel", 141 "module": "js/components/hottextunit.reel",
124 "name": "HotTextUnit", 142 "name": "HotTextUnit",
@@ -168,6 +186,7 @@
168 </div> 186 </div>
169 187
170 <div id="timeline_gutter" class="timelinegutter"> 188 <div id="timeline_gutter" class="timelinegutter">
189 <div id="tl_slider" class="tl_slider"></div>
171 <input id="end_hottext" class="endhottext"> 190 <input id="end_hottext" class="endhottext">
172 </div> 191 </div>
173 </div> 192 </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 5e64c066..cb133f58 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -137,10 +137,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
137 } 137 }
138 }, 138 },
139 139
140 millisecondsOffset:{ 140 _millisecondsOffset:{
141 value:1000 141 value:1000
142 }, 142 },
143 143
144 millisecondsOffset:{
145 get:function () {
146 return this._millisecondsOffset;
147 },
148 set:function (newVal) {
149 if (newVal !== this._millisecondsOffset) {
150 this._millisecondsOffset= newVal;
151 this.drawTimeMarkers();
152 NJevent('tlZoomSlider',this);
153 }
154 }
155 },
156
157 tweenarray:{
158 value:[],
159 writable:true
160 },
161
162 tempArray:{
163 value:[],
164 writable:true
165 },
166
144 _masterDuration:{ 167 _masterDuration:{
145 serializable:true, 168 serializable:true,
146 value:0 169 value:0
@@ -487,6 +510,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
487 } 510 }
488 // Feed the new array of objects into the repetitions. 511 // Feed the new array of objects into the repetitions.
489 this.arrLayers = this.temparrLayers; 512 this.arrLayers = this.temparrLayers;
513 }else if(this.application.ninja.breadCrumbClick){
514 var parentNode = this.application.ninja.currentSelectedContainer;
515 for (myIndex = 0; parentNode.children[myIndex]; myIndex++) {
516 this._openDoc = true;
517 this.restoreLayer(parentNode.children[myIndex]);
518 }
519 this.arrLayers = this.temparrLayers;
520
490 } 521 }
491 522
492 // After recreating the tracks and layers, store the result in the currentDocument. 523 // After recreating the tracks and layers, store the result in the currentDocument.
@@ -770,6 +801,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
770 drawTimeMarkers:{ 801 drawTimeMarkers:{
771 value:function () { 802 value:function () {
772 this.timeMarkerHolder = document.createElement("div"); 803 this.timeMarkerHolder = document.createElement("div");
804
805 if(this.time_markers.children[0]){
806 this.time_markers.removeChild(this.time_markers.children[0]);
807 }
808
773 this.time_markers.appendChild(this.timeMarkerHolder); 809 this.time_markers.appendChild(this.timeMarkerHolder);
774 var i; 810 var i;
775 var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); 811 var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80);
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index b9d45979..7dddaba7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -272,6 +272,7 @@
272 font-size: 12px; 272 font-size: 12px;
273 text-shadow: 1px 1px 1px black; 273 text-shadow: 1px 1px 1px black;
274 color: white; 274 color: white;
275 margin-top: 0%;
275} 276}
276.timeline-disabled { 277.timeline-disabled {
277 position: absolute; 278 position: absolute;
@@ -287,3 +288,10 @@
287.timeline-dnd-helper { 288.timeline-dnd-helper {
288 -webkit-transform: scale(.9, .9); 289 -webkit-transform: scale(.9, .9);
289} 290}
291.tl_slider{
292 width: 65px;
293 height: 5px;
294 background: none;
295 float:left;
296 margin-left: 5%;
297}
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 77aeb4a7..28c9a585 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -44,6 +44,7 @@ var Tween = exports.Tween = Montage.create(Component, {
44 }, 44 },
45 set: function(value){ 45 set: function(value){
46 this._spanWidth = value; 46 this._spanWidth = value;
47 this.needsDraw=true;
47 } 48 }
48 }, 49 },
49 50
@@ -58,6 +59,7 @@ var Tween = exports.Tween = Montage.create(Component, {
58 }, 59 },
59 set:function (value) { 60 set:function (value) {
60 this._spanPosition = value; 61 this._spanPosition = value;
62 this.needsDraw=true;
61 } 63 }
62 }, 64 },
63 65
@@ -72,6 +74,7 @@ var Tween = exports.Tween = Montage.create(Component, {
72 }, 74 },
73 set:function (value) { 75 set:function (value) {
74 this._keyFramePosition = value; 76 this._keyFramePosition = value;
77 this.needsDraw=true;
75 } 78 }
76 }, 79 },
77 80
@@ -133,6 +136,12 @@ var Tween = exports.Tween = Montage.create(Component, {
133 } 136 }
134 }, 137 },
135 138
139 prepareForDraw:{
140 value:function(){
141 this.eventManager.addEventListener("tlZoomSlider", this, false);
142 }
143 },
144
136 draw:{ 145 draw:{
137 value:function () { 146 value:function () {
138 this.element.style.left = this.spanPosition + "px"; 147 this.element.style.left = this.spanPosition + "px";
@@ -218,5 +227,71 @@ var Tween = exports.Tween = Montage.create(Component, {
218 // deselect the keyframe for this tween 227 // deselect the keyframe for this tween
219 this.keyframe.deselectKeyframe(); 228 this.keyframe.deselectKeyframe();
220 } 229 }
230 },
231
232 handleTlZoomSlider:{
233 value:function(event){
234 var currentMilliSecPerPixel , currentMilliSec , clickPos,i=0;
235
236 length = this.application.ninja.timeline.tempArray.length;
237 if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){
238 this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
239 var i = this.application.ninja.timeline.tweenarray.length-1;
240 for(;this.currentTween = this.application.ninja.timeline.tweenarray[i];i--){
241 if(this.application.ninja.timeline.tweenarray[i].tweenID===0){
242 this.currentTween.spanWidth=0;
243 this.currentTween.spanPosition=0;
244 this.currentTween.keyFramePosition=0;
245 this.currentTween.keyFrameMillisec=0;
246 this.needsDraw=true;
247 }else{
248 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
249 currentMilliSec = this.currentTween.keyFrameMillisec;
250 clickPos = currentMilliSec / currentMilliSecPerPixel;
251 this.currentTween.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition;
252 this.currentTween.keyFramePosition = clickPos;
253 this.currentTween.spanPosition=clickPos-this.currentTween.spanWidth;