aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html25
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js18
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css8
3 files changed, 41 insertions, 10 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 2a84c21a..33145028 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -25,7 +25,9 @@
25 "playhead": {"#": "playhead"}, 25 "playhead": {"#": "playhead"},
26 "playheadmarker": {"#": "playhead_marker"}, 26 "playheadmarker": {"#": "playhead_marker"},
27 "timetext" : {"#": "time_text"}, 27 "timetext" : {"#": "time_text"},
28 "timebar" : {"#": "time_bar"} 28 "timebar" : {"#": "time_bar"},
29 "container_tracks" : {"#" : "container-tracks"},
30 "end_hottext" : {"@" : "endHottext"}
29 } 31 }
30 }, 32 },
31 33
@@ -200,7 +202,19 @@
200 "oneway" : false 202 "oneway" : false
201 } 203 }
202 } 204 }
203 } 205 },
206 "endHottext" : {
207 "module": "js/components/hottextunit.reel",
208 "name": "HotTextUnit",
209 "properties": {
210 "element": {"#": "end_hottext"},
211 "maxValue" : 100000,
212 "minValue" : 1,
213 "acceptableUnits" : "sec",
214 "units" : "sec",
215 "value" : 25
216 }
217 }
204 } 218 }
205 </script> 219 </script>
206 220
@@ -240,7 +254,7 @@
240 <div id="timeline_gutter" class="timelinegutter"> 254 <div id="timeline_gutter" class="timelinegutter">
241 <div id="newlayer_button" class="newlayerbutton"></div> 255 <div id="newlayer_button" class="newlayerbutton"></div>
242 <div id="deletelayer_button" class="deletelayerbutton"></div> 256 <div id="deletelayer_button" class="deletelayerbutton"></div>
243 <input id="end_hottext" class="endhottext hottext"> 257 <input id="end_hottext" class="endhottext">
244 </div> 258 </div>
245 </div> 259 </div>
246 </div> 260 </div>
@@ -250,9 +264,8 @@
250 <div id="timeline_rightpane" class="tl_rightpane"> 264 <div id="timeline_rightpane" class="tl_rightpane">
251 <div id="right_inside" class="rightinside"> 265 <div id="right_inside" class="rightinside">
252 <div class="layout_markers"> 266 <div class="layout_markers">
253 <div id="timeline_markers" class="timelinemarkers"> 267 <div id="playhead" class="playhead"></div>
254 <div id="playhead" class="playhead"></div> 268 <div id="timeline_markers" class="timelinemarkers"></div>
255 </div>
256 </div> 269 </div>
257 270
258 271
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 43e758f4..8764d041 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -157,6 +157,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
157 value:false, 157 value:false,
158 writable:true 158 writable:true
159 }, 159 },
160 timeMarkerHolder:{
161 value: null
162 },
160 /* === END: Models === */ 163 /* === END: Models === */
161 164
162 /* === BEGIN: Draw cycle === */ 165 /* === BEGIN: Draw cycle === */
@@ -202,6 +205,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
202 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); 205 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
203 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 206 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
204 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 207 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
208 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
205 209
206 this.drawTimeMarkers(); 210 this.drawTimeMarkers();
207 211
@@ -213,6 +217,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
213 } 217 }
214 }, 218 },
215 219
220 updateTrackContainerWidth:{
221 value: function(){
222 this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
223 this.master_track.style.width = (this.end_hottext.value * 80) + "px";
224 this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
225 this.time_markers.removeChild(this.timeMarkerHolder);
226 this.drawTimeMarkers();
227 }
228 },
229
216 updateLayerScroll:{ 230 updateLayerScroll:{
217 value:function () { 231 value:function () {
218 this.user_layers.scrollTop = this.layout_tracks.scrollTop; 232 this.user_layers.scrollTop = this.layout_tracks.scrollTop;
@@ -602,6 +616,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
602 616
603 drawTimeMarkers:{ 617 drawTimeMarkers:{
604 value:function () { 618 value:function () {
619 this.timeMarkerHolder = document.createElement("div");
620 this.time_markers.appendChild(this.timeMarkerHolder);
605 var i; 621 var i;
606 var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); 622 var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80);
607 for (i = 0; i < totalMarkers; i++) { 623 for (i = 0; i < totalMarkers; i++) {
@@ -609,7 +625,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
609 var markValue = this.calculateTimeMarkerValue(i); 625 var markValue = this.calculateTimeMarkerValue(i);
610 timeMark.className = "timemark"; 626 timeMark.className = "timemark";
611 timeMark.innerHTML = markValue; 627 timeMark.innerHTML = markValue;
612 this.time_markers.appendChild(timeMark); 628 this.timeMarkerHolder.appendChild(timeMark);
613 } 629 }
614 } 630 }
615 }, 631 },
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index b8784d4d..26dd272c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -251,16 +251,18 @@
251} 251}
252.timebar{ 252.timebar{
253 height: 3px; 253 height: 3px;
254 width:1px; 254 width:0;
255 background-color: #ff0003; 255 background-color: #ff0003;
256 opacity: 0.3; 256 opacity: 0.3;
257 top:10px; 257 top:10px;
258 position: absolute; 258 position: absolute;
259 border-top: #c7a19f thin solid; 259 border-top: #c7a19f thin solid;
260 border-right: #ffffff thin solid; 260 border-right: #ffffff thin solid;
261
262} 261}
263.endhottext{ 262.endhottext{
264 float: right; 263 float: right;
265 padding-right: 8px; 264 font-family: 'Droid Sans';
265 font-size: 12px;
266 text-shadow: 1px 1px 1px black;
267 color: white;
266} \ No newline at end of file 268} \ No newline at end of file