From d555b8e68bb672be620e15171039ab9ec8f1fabd Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 26 Mar 2012 11:08:04 -0700 Subject: Timeline : Adding Zoom Slider Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 19 ++++++++++++++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 30 +++++++++++++++++++++- .../TimelinePanel.reel/css/TimelinePanel.css | 6 +++++ 3 files changed, 54 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') 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 @@
+
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%; +} -- cgit v1.2.3