Timeline : Adding Zoom Slider

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

4 files changed, 129 insertions, 1 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 2e0bf7dd..42921a2d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -119,6 +119,24 @@
                         
                         }
                     },
+
+                "timelineZoomSlider":{
+                    "module":"js/components/slider.reel",
+                    "name":"Slider",
+                    "properties":{
+                        "element":{"#":"tl_slider"},
+                        "maxValue" : 10000,
+                        "minValue" : 1000
+                    },
+                    "bindings": {
+                        "value": {
+                            "boundObject": {"@": "owner"},
+                            "boundObjectPropertyPath": "millisecondsOffset",
+                            "oneway": false
+                        }
+                    }
+                },
+
                 "endHottext" : {
                     "module": "js/components/hottextunit.reel",
                     "name": "HotTextUnit",
@@ -168,6 +186,7 @@
                         </div>
 
                         <div id="timeline_gutter" class="timelinegutter">
+                            <div id="tl_slider" class="tl_slider"></div>
                             <input id="end_hottext" class="endhottext">
                         </div>
                     </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index bc474a46..1d22c109 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, {
         }
     },
 
-    millisecondsOffset:{
+    _millisecondsOffset:{
         value:1000
     },
 
+    millisecondsOffset:{
+        get:function () {
+            return this._millisecondsOffset;
+    },
+        set:function (newVal) {
+            if (newVal !== this._millisecondsOffset) {
+                this._millisecondsOffset= newVal;
+                this.drawTimeMarkers();
+                NJevent('tlZoomSlider',this);
+            }
+        }
+    },
+
+    tweenarray:{
+            value:[],
+            writable:true
+    },
+
+    tempArray:{
+        value:[],
+        writable:true
+    },
+
     _masterDuration:{
         serializable:true,
         value:0
@@ -686,6 +709,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     drawTimeMarkers:{
         value:function () {
             this.timeMarkerHolder = document.createElement("div");
+
+            if(this.time_markers.children[0]){
+               this.time_markers.removeChild(this.time_markers.children[0]);
+            }
+
             this.time_markers.appendChild(this.timeMarkerHolder);
             var i;
             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 129b9771..21a7535c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -284,3 +284,9 @@
         display: none;
         box-shadow: rgb(17, 17, 17) 0px 0px 14px inset;
 }
+.tl_slider{
+    width: 65px;
+    height: 5px;
+    background: none;
+    margin-left: 25%;
+}
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 2b308d9a..e8c7e187 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, {
         },
         set: function(value){
             this._spanWidth = value;
+            this.needsDraw=true;
         }
     },
 
@@ -58,6 +59,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._spanPosition = value;
+            this.needsDraw=true;
         }
     },
 
@@ -72,6 +74,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._keyFramePosition = value;
+            this.needsDraw=true;
         }
     },
 
@@ -133,6 +136,12 @@ var Tween = exports.Tween = Montage.create(Component, {
         }
     },
 
+    prepareForDraw:{
+        value:function(){
+            this.eventManager.addEventListener("tlZoomSlider", this, false);
+        }
+    },
+
     draw:{
         value:function () {
             this.element.style.left = this.spanPosition + "px";
@@ -217,5 +226,71 @@ var Tween = exports.Tween = Montage.create(Component, {
             // deselect the keyframe for this tween
             this.keyframe.deselectKeyframe();
         }
+    },
+
+    handleTlZoomSlider:{
+        value:function(event){
+            var currentMilliSecPerPixel , currentMilliSec , clickPos,i=0;
+
+            length = this.application.ninja.timeline.tempArray.length;
+            if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){
+                this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
+                var i = this.application.ninja.timeline.tweenarray.length-1;
+                for(;this.currentTween = this.application.ninja.timeline.tweenarray[i];i--){
+                    if(this.application.ninja.timeline.tweenarray[i].tweenID===0){
+                        this.currentTween.spanWidth=0;
+                        this.currentTween.spanPosition=0;
+                        this.currentTween.keyFramePosition=0;
+                        this.currentTween.keyFrameMillisec=0;
+                        this.needsDraw=true;
+                    }else{
+                        currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                        currentMilliSec = this.currentTween.keyFrameMillisec;
+                        clickPos = currentMilliSec / currentMilliSecPerPixel;
+                        this.currentTween.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition;
+                        this.currentTween.keyFramePosition = clickPos;
+                        this.currentTween.spanPosition=clickPos-this.currentTween.spanWidth;
+                        this.needsDraw=true;
+                    }
+
+                }
+                this.application.ninja.timeline.tweenarray.length=0;
+                this.application.ninja.timeline.tweenarray.push(this);
+            }else if(length===0){
+                this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
+                this.application.ninja.timeline.tweenarray.push(this);
+            }else{
+                this.application.ninja.timeline.tweenarray.push(this);
+            }
+
+            var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
+            var k = this.application.ninja.timeline.tweenarray.length-1;
+            if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){
+                for(;this.currentTween = this.application.ninja.timeline.tweenarray[k];k--){
+                    if(this.application.ninja.timeline.tweenarray[k].tweenID===0){
+                        this.currentTween.spanWidth=0;
+                        this.currentTween.spanPosition=0;
+                        this.currentTween.keyFramePosition=0;
+                        this.currentTween.keyFrameMillisec=0;
+                        this.needsDraw=true;
+                    }else{
+                        currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                        currentMilliSec = this.currentTween.keyFrameMillisec;