diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 26 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 18 | ||||
-rwxr-xr-x | js/panels/Timeline/TimelinePanel.reel/images/knob.png | bin | 0 -> 1036 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 23 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 |
6 files changed, 52 insertions, 21 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 291e3416..c10731a3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -1071,105 +1071,89 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
1071 | handleLeftChange: { | 1071 | handleLeftChange: { |
1072 | value: function(event) { | 1072 | value: function(event) { |
1073 | var prevPosition; | 1073 | var prevPosition; |
1074 | if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ | 1074 | |
1075 | if(!event.wasSetByCode) { | 1075 | if(!event.wasSetByCode) { |
1076 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; | 1076 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; |
1077 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); | 1077 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); |
1078 | this.savedPosition = null; | 1078 | this.savedPosition = null; |
1079 | } | 1079 | } |
1080 | 1080 | ||
1081 | } | 1081 | |
1082 | } | 1082 | } |
1083 | }, | 1083 | }, |
1084 | 1084 | ||
1085 | handleTopChange: { | 1085 | handleTopChange: { |
1086 | value: function(event) { | 1086 | value: function(event) { |
1087 | var prevPosition; | 1087 | var prevPosition; |
1088 | if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ | ||
1089 | if(!event.wasSetByCode) { | 1088 | if(!event.wasSetByCode) { |
1090 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; | 1089 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; |
1091 | 1090 | ||
1092 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); | 1091 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); |
1093 | this.savedPosition = null; | 1092 | this.savedPosition = null; |
1094 | } | 1093 | } |
1095 | } | 1094 | |
1096 | } | 1095 | } |
1097 | }, | 1096 | }, |
1098 | 1097 | ||
1099 | handleWidthChange:{ | 1098 | handleWidthChange:{ |
1100 | value: function(event) { | 1099 | value: function(event) { |
1101 | var prevPosition; | 1100 | var prevPosition; |
1102 | if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ | 1101 | |
1103 | if(!event.wasSetByCode) { | 1102 | if(!event.wasSetByCode) { |
1104 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; | 1103 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; |
1105 | 1104 | ||
1106 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); | 1105 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); |
1107 | this.savedPosition = null; | 1106 | this.savedPosition = null; |
1108 | } | 1107 | } |
1109 | } | ||
1110 | } | 1108 | } |
1111 | }, | 1109 | }, |
1112 | 1110 | ||
1113 | handleHeightChange:{ | 1111 | handleHeightChange:{ |
1114 | value: function(event) { | 1112 | value: function(event) { |
1115 | var prevPosition; | 1113 | var prevPosition; |
1116 | if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ | 1114 | |
1117 | if(!event.wasSetByCode) { | 1115 | if(!event.wasSetByCode) { |
1118 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; | 1116 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; |
1119 | 1117 | ||
1120 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition); | 1118 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition); |
1121 | this.savedPosition = null; | 1119 | this.savedPosition = null; |
1122 | } | 1120 | } |
1123 | } | ||
1124 | } | 1121 | } |
1125 | }, | 1122 | }, |
1126 | 1123 | ||
1127 | handleLeftChanging: { | 1124 | handleLeftChanging: { |
1128 | value: function(event) { | 1125 | value: function(event) { |
1129 | |||
1130 | if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ | ||
1131 | if(!event.wasSetByCode) { | 1126 | if(!event.wasSetByCode) { |
1132 | if(!this.savedPosition) this.savedPosition = this.leftPosition; | 1127 | if(!this.savedPosition) this.savedPosition = this.leftPosition; |
1133 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline"); | 1128 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline"); |
1134 | } | 1129 | } |
1135 | } | ||
1136 | |||
1137 | } | 1130 | } |
1138 | }, | 1131 | }, |
1139 | 1132 | ||
1140 | handleTopChanging: { | 1133 | handleTopChanging: { |
1141 | value: function(event) { | 1134 | value: function(event) { |
1142 | if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ | ||
1143 | if(!event.wasSetByCode) { | 1135 | if(!event.wasSetByCode) { |
1144 | if(!this.savedPosition) this.savedPosition = this.topPosition; | 1136 | if(!this.savedPosition) this.savedPosition = this.topPosition; |
1145 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline"); | 1137 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline"); |
1146 | } | 1138 | } |
1147 | } | ||
1148 | |||
1149 | } | 1139 | } |
1150 | }, | 1140 | }, |
1151 | 1141 | ||
1152 | handleWidthChanging:{ | 1142 | handleWidthChanging:{ |
1153 | value: function(event) { | 1143 | value: function(event) { |
1154 | if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ | ||
1155 | if(!event.wasSetByCode) { | 1144 | if(!event.wasSetByCode) { |
1156 | if(!this.savedPosition) this.savedPosition = this.dtextScaleX; | 1145 | if(!this.savedPosition) this.savedPosition = this.dtextScaleX; |
1157 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); | 1146 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); |
1158 | } | 1147 | } |
1159 | } | ||
1160 | |||
1161 | } | 1148 | } |
1162 | }, | 1149 | }, |
1163 | 1150 | ||
1164 | handleHeightChanging:{ | 1151 | handleHeightChanging:{ |
1165 | value: function(event) { | 1152 | value: function(event) { |
1166 | if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ | ||
1167 | if(!event.wasSetByCode) { | 1153 | if(!event.wasSetByCode) { |
1168 | if(!this.savedPosition) this.savedPosition = this.dtextScaleY; | 1154 | if(!this.savedPosition) this.savedPosition = this.dtextScaleY; |
1169 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); | 1155 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); |
1170 | } | 1156 | } |
1171 | } | ||
1172 | |||
1173 | } | 1157 | } |
1174 | }, | 1158 | }, |
1175 | 1159 | ||
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 57285704..9ae5d3d5 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -216,7 +216,9 @@ POSSIBILITY OF SUCH DAMAGE. | |||
216 | </div> | 216 | </div> |
217 | 217 | ||
218 | <div data-montage-id="timeline_gutter" class="timelinegutter"> | 218 | <div data-montage-id="timeline_gutter" class="timelinegutter"> |
219 | <div class="sliderClass"> | ||
219 | <div data-montage-id="tl_slider" class="tl_slider"></div> | 220 | <div data-montage-id="tl_slider" class="tl_slider"></div> |
221 | </div> | ||
220 | <input data-montage-id="end_hottext" class="endhottext"> | 222 | <input data-montage-id="end_hottext" class="endhottext"> |
221 | </div> | 223 | </div> |
222 | </div> | 224 | </div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 88b37563..0bf025ab 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -505,11 +505,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
505 | }, | 505 | }, |
506 | millisecondsOffset:{ | 506 | millisecondsOffset:{ |
507 | get:function () { | 507 | get:function () { |
508 | |||
508 | return this._millisecondsOffset; | 509 | return this._millisecondsOffset; |
509 | }, | 510 | }, |
510 | set:function (newVal) { | 511 | set:function (newVal) { |
511 | if (newVal !== this._millisecondsOffset) { | 512 | if (newVal !== this._millisecondsOffset) { |
512 | 513 | ||
514 | this.tempValue = newVal; | ||
513 | var tempValue = (1/newVal) * 1000000; | 515 | var tempValue = (1/newVal) * 1000000; |
514 | newVal = tempValue; | 516 | newVal = tempValue; |
515 | 517 | ||
@@ -1704,6 +1706,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1704 | } | 1706 | } |
1705 | }, | 1707 | }, |
1706 | 1708 | ||
1709 | zoomTrackContainerWidthChange:{ | ||
1710 | value:function () { | ||
1711 | |||
1712 | this.tempValue = this.tempValue/1000; | ||
1713 | this.tempValue *= 30; | ||
1714 | |||
1715 | this.container_tracks.style.width = (this.tempValue * 80) + "px"; | ||
1716 | this.master_track.style.width = (this.tempValue * 80) + "px"; | ||
1717 | this.time_markers.style.width = (this.tempValue * 80) + "px"; | ||
1718 | if (this.timeMarkerHolder) { | ||
1719 | this.time_markers.removeChild(this.timeMarkerHolder); | ||