From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs
---
.../Timeline/TimelineTrack.reel/TimelineTrack.html | 280 ++++-----
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 632 ++++++++++-----------
.../TimelineTrack.reel/scss/TimelineTrack.scss | 14 +-
3 files changed, 463 insertions(+), 463 deletions(-)
(limited to 'js/panels/Timeline/TimelineTrack.reel')
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 1889e41b..1a8b3133 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -29,9 +29,9 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
-->
-
-
-
+
+
+
-
-
+
+
-
+
-
+
@@ -228,16 +228,16 @@ POSSIBILITY OF SUCH DAMAGE.
-
+
-
+
-
+
-
+
-
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 11d275ce..d10cd39d 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -45,10 +45,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._trackID;
},
set:function (value) {
- if (value !== this._trackID) {
- this._trackID = value;
+ if (value !== this._trackID) {
+ this._trackID = value;
this.trackData.layerID = value;
- }
+ }
}
},
@@ -71,7 +71,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
_isFirstDraw: {
- value: true
+ value: true
},
_isVisible:{
@@ -83,31 +83,31 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._isVisible;
},
set:function(value){
- if (this._isVisible !== value) {
- this._isVisible = value;
- if (this.element !== null) {
- if (value === true) {
- this.element.classList.remove("layer-hidden");
- } else {
- this.element.classList.add("layer-hidden");
- }
- }
- }
- this.trackData.isVisible = value;
+ if (this._isVisible !== value) {
+ this._isVisible = value;
+ if (this.element !== null) {
+ if (value === true) {
+ this.element.classList.remove("layer-hidden");
+ } else {
+ this.element.classList.add("layer-hidden");
+ }
+ }
+ }
+ this.trackData.isVisible = value;
}
},
_stageElement: {
- value: null
+ value: null
},
stageElement: {
- get: function() {
- return this._stageElement;
- },
- set: function(newVal) {
- this._stageElement = newVal;
- this.trackData.stageElement = newVal;
- }
+ get: function() {
+ return this._stageElement;
+ },
+ set: function(newVal) {
+ this._stageElement = newVal;
+ this.trackData.stageElement = newVal;
+ }
},
// Are the various collapsers collapsed or not
@@ -160,88 +160,88 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
}
},
_bypassAnimation : {
- value: false
+ value: false
},
bypassAnimation : {
- serializable: true,
- get: function() {
- return this._bypassAnimation;
- },
- set: function(newVal) {
- if (typeof(this.trackData) !== "undefined") {
- this._bypassAnimation = newVal;
+ serializable: true,
+ get: function() {
+ return this._bypassAnimation;
+ },
+ set: function(newVal) {
+ if (typeof(this.trackData) !== "undefined") {
+ this._bypassAnimation = newVal;
this.trackData.bypassAnimation = newVal;
- }
- }
+ }
+ }
},
_arrStyleTracks : {
- value: []
+ value: []
},
arrStyleTracks: {
serializable:true,
- get: function() {
- return this._arrStyleTracks;
- },
- set: function(newVal) {
- this._arrStyleTracks = newVal;
+ get: function() {
+ return this._arrStyleTracks;
+ },
+ set: function(newVal) {
+ this._arrStyleTracks = newVal;
this.trackData.arrStyleTracks = newVal;
- }
+ }
},
_styleTracksRepetition: {
- value: null
+ value: null
},
styleTracksRepetition : {
serializable:true,
- get: function() {
- return this._styleTracksRepetition;
- },
- set: function(newVal) {
- this._styleTracksRepetition = newVal;
- }
+ get: function() {
+ return this._styleTracksRepetition;
+ },
+ set: function(newVal) {
+ this._styleTracksRepetition = newVal;
+ }
},
/* Position Property Tracks */
_arrPositionTracks : {
- value: []
+ value: []
},
arrPositionTracks: {
serializable:true,
- get: function() {
- return this._arrPositionTracks;
- },
- set: function(newVal) {
- this._arrPositionTracks = newVal;
- this.trackData.arrPositionTracks = newVal;
+ get: function() {
+ return this._arrPositionTracks;
+ },
+ set: function(newVal) {
+ this._arrPositionTracks = newVal;
+ this.trackData.arrPositionTracks = newVal;
- }
+ }
},
_positionTracksRepetition: {
- value: null
+ value: null
},
positionTracksRepetition : {
- get: function() {
- return this._positionTracksRepetition;
- },
- set: function(newVal) {
- this._positionTracksRepetition = newVal;
- }
+ get: function() {
+ return this._positionTracksRepetition;
+ },
+ set: function(newVal) {
+ this._positionTracksRepetition = newVal;
+ }
},
/* Transform Property Tracks */
_arrTransformTracks : {
- value: []
+ value: []
},
arrTransformTracks: {
serializable:true,
- get: function() {
- return this._arrTransformTracks;
- },
- set: function(newVal) {
- this._arrTransformTracks = newVal;
+ get: function() {
+ return this._arrTransformTracks;
+ },
+ set: function(newVal) {
+ this._arrTransformTracks = newVal;
this.trackData.arrTransformTracks = newVal;
- }
+ }
},
_tweens:{
@@ -249,7 +249,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
tweens:{
- serializable: true,
+ serializable: true,
get:function () {
return this._tweens;
},
@@ -443,48 +443,48 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
}
},
- // Drag and Drop properties
+ // Drag and Drop properties
_dragAndDropHelper : {
- value: false
+ value: false
},
_dragAndDropHelperCoords: {
- value: false
+ value: false
},
dragAndDropHelperCoords: {
- get: function() {
- return this._dragAndDropHelperCoords;
- },
- set: function(newVal) {
- this._dragAndDropHelperCoords = newVal;
- }
+ get: function() {
+ return this._dragAndDropHelperCoords;
+ },
+ set: function(newVal) {
+ this._dragAndDropHelperCoords = newVal;
+ }
},
_draggingIndex: {
- value: false
+ value: false
},
draggingIndex: {
- get: function() {
- return this._draggingIndex;
- },
- set: function(newVal) {
- this._draggingIndex = newVal;
- }
+ get: function() {
+ return this._draggingIndex;
+ },
+ set: function(newVal) {
+ this._draggingIndex = newVal;
+ }
},
_dragAndDropHelperOffset : {
- value: false
+ value: false
},
_appendHelper: {
- value: false
+ value: false
},
_deleteHelper: {
- value: false
+ value: false
},
_trackData:{
- value: false
+ value: false
},
trackData:{
- serializable: true,
+ serializable: true,
get:function(){
return this._trackData;
},
@@ -497,14 +497,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
_setDataTimestamp : {
- value: false
+ value: false
},
setData:{
value:function(){
- if (typeof(this.trackData) === "undefined") {
- return;
- }
+ if (typeof(this.trackData) === "undefined") {
+ return;
+ }
this.bypassAnimation = this.trackData.bypassAnimation;
this.trackID = this.trackData.layerID;
this.tweens = this.trackData.tweens;
@@ -528,8 +528,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
createTrackData: {
- value: function() {
- tempData = {};
+ value: function() {
+ tempData = {};
tempData.bypassAnimation = this.bypassAnimation;
tempData.trackID = this.layerID;
tempData.tweens = this.tweens;
@@ -547,29 +547,29 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
tempData.trackPosition = this.trackPosition;
tempData.isVisible = this.isVisible;
this.trackData = tempData;
- }
+ }
},
// Data binding observation point and trigger method
- _bindingPoint : {
- value : {}
+ _bindingPoint : {
+ value : {}
},
bindingPoint: {
- get: function() {
- return this._bindingPoint;
- },
- set: function(newVal) {
- if (newVal !== this._bindingPoint) {
- this._bindingPoint = newVal;
- this.setData();
- }
- }
+ get: function() {
+ return this._bindingPoint;
+ },
+ set: function(newVal) {
+ if (newVal !== this._bindingPoint) {
+ this._bindingPoint = newVal;
+ this.setData();
+ }
+ }
},
triggerOutgoingBinding : {
- value: function() {
+ value: function() {
this.trackData.triggerBinding = !this.trackData.triggerBinding;
- }
+ }
},
prepareForDraw:{
@@ -580,10 +580,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
this.eventManager.addEventListener("tlZoomSlider", this, false);
// Drag and Drop event handlers
- //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
- this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
- this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
- //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
+ //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+ this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
+ this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
+ //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
}
},
@@ -592,45 +592,45 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
this.ninjaStylesContoller = this.application.ninja.stylesController;
var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
if (selectedIndex !== false) {
- if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){
- this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
- }
+ if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){
+ this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
+ }
}
- // Drag and Drop:
- // Do we have a helper to append?
+ // Drag and Drop:
+ // Do we have a helper to append?
if (this._appendHelper === true) {
- this.track_lanes.appendChild(this._dragAndDropHelper);
- this._appendHelper = false;
+ this.track_lanes.appendChild(this._dragAndDropHelper);
+ this._appendHelper = false;
}
// Do we need to move the helper?
- if (this._dragAndDropHelperCoords !== false) {
- if (this._dragAndDropHelper !== null) {
- if (typeof(this._dragAndDropHelper.style) !== "undefined") {
- this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
- }
- }
- this._dragAndDropHelperCoords = false;
- }
- // Do we have a helper to delete?
- if (this._deleteHelper === true) {
- if (this._dragAndDropHelper === null) {
- // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
- // Try and recover the helper so we can delete it.
- var myHelper = this.element.querySelector(".track-dnd-helper");
- if (myHelper != null) {
- this._dragAndDropHelper = myHelper;
- }
- }
- if (this._dragAndDropHelper !== null) {
- // We need to delete the helper. Can we delete it from track_lanes?
- if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
- this.track_lanes.removeChild(this._dragAndDropHelper);
- this._dragAndDropHelper = null;
- this._deleteHelper = false;
- }
- }
- }
+ if (this._dragAndDropHelperCoords !== false) {
+ if (this._dragAndDropHelper !== null) {
+ if (typeof(this._dragAndDropHelper.style) !== "undefined") {
+ this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
+ }
+ }
+ this._dragAndDropHelperCoords = false;
+ }
+ // Do we have a helper to delete?
+ if (this._deleteHelper === true) {
+ if (this._dragAndDropHelper === null) {
+ // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
+ // Try and recover the helper so we can delete it.
+ var myHelper = this.element.querySelector(".track-dnd-helper");
+ if (myHelper != null) {
+ this._dragAndDropHelper = myHelper;
+ }
+ }
+ if (this._dragAndDropHelper !== null) {
+ // We need to delete the helper. Can we delete it from track_lanes?
+ if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
+ this.track_lanes.removeChild(this._dragAndDropHelper);
+ this._dragAndDropHelper = null;
+ this._deleteHelper = false;
+ }
+ }
+ }
}
},
@@ -641,79 +641,79 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
if (this.application.ninja.currentDocument.model.documentRoot.children[0]) {
var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
if (selectedIndex !== false) {
- if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
- this.retrieveStoredTweens();
- }
+ if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
+ this.retrieveStoredTweens();
+ }
}
}
}
- if (this._isFirstDraw === true) {
-
- if (this.isMainCollapsed === false) {
- this._mainCollapser.myContent.style.height = "auto";
- this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
- this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
- }
- if (this.isPositionCollapsed === false) {
- this._positionCollapser.myContent.style.height = "auto";
- this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
- this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
- }
- if (this.isTransformCollapsed === false) {
- this._transformCollapser.myContent.style.height = "auto";
- this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
- this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
- }
- if (this.isStyleCollapsed === false) {
- this._styleCollapser.myContent.style.height = "auto";
- this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
- this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
- }
- this._isFirstDraw = false;
- }
+ if (this._isFirstDraw === true) {
+
+ if (this.isMainCollapsed === false) {
+ this._mainCollapser.myContent.style.height = "auto";
+ this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
+ this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass);
+ }
+ if (this.isPositionCollapsed === false) {
+ this._positionCollapser.myContent.style.height = "auto";
+ this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass);
+ this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass);
+ }
+ if (this.isTransformCollapsed === false) {
+ this._transformCollapser.myContent.style.height = "auto";
+ this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass);
+ this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass);
+ }
+ if (this.isStyleCollapsed === false) {
+ this._styleCollapser.myContent.style.height = "auto";
+ this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass);
+ this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass);
+ }
+ this._isFirstDraw = false;
+ }
}
},
- handleTlZoomSlider: {
- value: function(event) {
-
- var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
- var i = 0,
- tweensLength = this.tweens.length;
-
- for (i = 0; i < tweensLength; i++) {
-
- if (i === 0) {
- // Exception: 0th item does not depend on anything
- // TODO: If 0th tween is draggable, this will need to be fixed.
- this.tweens[i].tweenData.spanWidth=0;
- this.tweens[i].tweenData.spanPosition=0;
- this.tweens[i].tweenData.keyFramePosition=0;
- this.tweens[i].tweenData.keyFrameMillisec=0;
-
- } else {
- var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition,
- myObj = {},
- thing = {};
-
- currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
- currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec;
- clickPos = currentMilliSec / currentMilliSecPerPixel;
-
- for (thing in this.tweens[i].tweenData) {
- myObj[thing] = this.tweens[i].tweenData[thing];
- }
- myObj.spanWidth = clickPos - prevKeyFramePosition;
- myObj.keyFramePosition = clickPos;
- myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition);
-
- this.tweens[i].tweenData = myObj;
- }
- }
- }
- },
+ handleTlZoomSlider: {
+ value: function(event) {
+
+ var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
+ var i = 0,
+ tweensLength = this.tweens.length;
+
+ for (i = 0; i < tweensLength; i++) {
+
+ if (i === 0) {
+ // Exception: 0th item does not depend on anything
+ // TODO: If 0th tween is draggable, this will need to be fixed.
+ this.tweens[i].tweenData.spanWidth=0;
+ this.tweens[i].tweenData.spanPosition=0;
+ this.tweens[i].tweenData.keyFramePosition=0;
+ this.tweens[i].tweenData.keyFrameMillisec=0;
+
+ } else {
+ var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition,
+ myObj = {},
+ thing = {};
+
+ currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+ currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec;
+ clickPos = currentMilliSec / currentMilliSecPerPixel;
+
+ for (thing in this.tweens[i].tweenData) {
+ myObj[thing] = this.tweens[i].tweenData[thing];
+ }
+ myObj.spanWidth = clickPos - prevKeyFramePosition;
+ myObj.keyFramePosition = clickPos;
+ myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition);
+
+ this.tweens[i].tweenData = myObj;
+ }
+ }
+ }
+ },
handleClick:{
value:function (ev) {
@@ -722,7 +722,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
var targetElementOffset = this.findXOffset(ev.currentTarget),
- position = (event.pageX - targetElementOffset) - 18;
+ position = (event.pageX - targetElementOffset) - 18;
this.application.ninja.timeline.playheadmarker.style.left = position + "px";
var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
@@ -730,8 +730,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
this.application.ninja.timeline.updateTimeText(currentMillisec);
if (ev.shiftKey) {
- var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
- this.application.ninja.timeline.selectLayer(selectedIndex, true);
+ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+ this.application.ninja.timeline.selectLayer(selectedIndex, true);
if (this.tweens.length < 1) {
this.insertTween(0);
this.addAnimationRuleToElement(ev);
@@ -769,21 +769,21 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
handleNewTween:{
value:function (ev) {
-
+
if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) {
var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
this.application.ninja.timeline.selectLayer(selectedIndex, false);
this.insertTween(ev.offsetX);
} else {
- // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
- // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
- if (typeof(ev.currentTarget) === "undefined") {
- this.splitTweenAt(ev.offsetX);
- } else {
- var targetElementOffset = this.findXOffset(ev.currentTarget),
- position = event.pageX - targetElementOffset;
- this.splitTweenAt(position-18);
- }
+ // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
+ // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
+ if (typeof(ev.currentTarget) === "undefined") {
+ this.splitTweenAt(ev.offsetX);
+ } else {
+ var targetElementOffset = this.findXOffset(ev.currentTarget),
+ position = event.pageX - targetElementOffset;
+ this.splitTweenAt(position-18);
+ }
}
}
},
@@ -793,7 +793,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
// Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
var curleft = 0;
if (typeof(obj) === "undefined") {
- //debugger;
+ //debugger;
}
if (obj.offsetParent) {
do {
@@ -901,25 +901,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
}
},
- // splitTweenAt: Split a tween at a particular position (x coordinate)
+ // splitTweenAt: Split a tween at a particular position (x coordinate)
splitTweenAt: {
value:function (position) {
var i, j, nextComponentIndex,
- tweensLength = this.tweens.length-1,
- prevTween,
- nextTween,
- splitTweenIndex;
+ tweensLength = this.tweens.length-1,
+ prevTween,
+ nextTween,
+ splitTweenIndex;
- // Search through the tweens and find the pair whose keyframes bracket position.
+ // Search through the tweens and find the pair whose keyframes bracket position.
for(i=0; i prevTween && position < nextTween) {
-
- // We will insert a new tween at this index
+
+ // We will insert a new tween at this index
splitTweenIndex = i+1;
- // Update the next tween to have new span position and width.
+ // Update the next tween to have new span position and width.
this.tweens[i+1].tweenData.spanPosition = position;
this.tweens[i+1].spanPosition = position;
this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - position;
@@ -929,13 +929,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
// Turns out we have to manually poke the desired childComponent in the repetition to register its new changes.
// So we have to get the index of the actual componentin the repetition, which may not match our iteration index.
for (j = 0; j < tweensLength +1; j++) {
- if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) {
- nextComponentIndex = j;
- }
+ if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) {
+ nextComponentIndex = j;
+ }
}
this.tweenRepetition.childComponents[nextComponentIndex].setData();
- // Create the new tween and splice it into the model
+ // Create the new tween and splice it into the model
var newTweenToInsert = {};
newTweenToInsert.tweenData = {};
newTweenToInsert.tweenData.spanWidth = position - prevTween;
@@ -960,9 +960,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
// Our tween IDs are now all messed up. Fix them.
for (i = 0; i <= tweensLength+1; i++) {
- this.tweens[i].tweenID = i;
- this.tweens[i].tweenData.tweenID = i;
- }
+ this.tweens[i].tweenID = i;
+ this.tweens[i].tweenData.tweenID = i;
+ }
}
},
@@ -1043,7 +1043,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth;
newTween.tweenData.easing = this.currentKeyframeRule[i].style.webkitAnimationName;
if (newTween.tweenData.easing == "") {
- newTween.tweenData.easing = "none";
+ newTween.tweenData.easing = "none";
}
this.tweens.push(newTween);
this.createMatchingPositionSizeTween(newTween);
@@ -1153,7 +1153,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
// ... but only do it if we haven't already.
if (this.arrPositionTracks.length > 0) {
- return;
+ return;
}
// create 'left' track
@@ -1209,7 +1209,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex;
newStyleTrack.propTrackData.existingRule = "";
- this.arrStyleTracks.push(newStyleTrack);
+ this.arrStyleTracks.push(newStyleTrack);
} else if (layerEvent.layerEventType === "restoreStyle") {
var restoredStyleTrack = {};
@@ -1224,31 +1224,31 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
this.arrStyleTracks.push(restoredStyleTrack);
}
else if (layerEvent.layerEventType === "deleteStyle") {
- // We are deleting a style, so delete the associated track
- this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1);
+ // We are deleting a style, so delete the associated track
+ this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1);
}
}
},
getTweenIndexById: {
- value: function(intID) {
- var i = 0,
- arrTweensLength = this.tweens.length;
- for (i = 0; i < arrTweensLength; i++) {
- if (this.tweens[i].tweenData.tweenID === intID) {
- returnVal = i;
- }
- }
- return returnVal;
- }
+ value: function(intID) {
+ var i = 0,
+ arrTweensLength = this.tweens.length;
+ for (i = 0; i < arrTweensLength; i++) {
+ if (this.tweens[i].tweenData.tweenID === intID) {
+ returnVal = i;
+ }
+ }
+ return returnVal;
+ }
},
// Drag and drop event handlers
handleKeyframeDragstart : {
- value: function(event) {
+ value: function(event) {
var dragIcon = document.createElement("img"),
- minPosition = 0,
- maxPosition = 100000000000;
-
+ minPosition = 0,
+ maxPosition = 100000000000;
+
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('Text', this.identifier);
dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
@@ -1267,71 +1267,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
//this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
this._dragAndDropHelper.classList.add("track-dnd-helper");
- if (this.draggingIndex < (this.tweens.length -1)) {
- maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition;
- }
- if (this.draggingIndex > 1) {
- minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition;
- }
- this._keyframeMinPosition = minPosition+2;
- this._keyframeMaxPosition = maxPosition-9;
- this._appendHelper = true;
- this._deleteHelper = false;
-
- // Get my index in the track array
- var i = 0,
- arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
- myId = null;
- for (i = 0; i < arrLayersLength; i++) {
- var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid;
- if ( currUuid === this.uuid) {
- myId = i;
- }
- }
- this.parentComponent.parentComponent.draggingTrackId = myId;
- this.parentComponent.parentComponent.draggingType = "keyframe";
- }
+ if (this.draggingIndex < (this.tweens.length -1)) {
+ maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition;
+ }
+ if (this.draggingIndex > 1) {
+ minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition;
+ }
+ this._keyframeMinPosition = minPosition+2;
+ this._keyframeMaxPosition = maxPosition-9;
+ this._appendHelper = true;
+ this._deleteHelper = false;
+
+ // Get my index in the track array
+ var i = 0,
+ arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
+ myId = null;
+ for (i = 0; i < arrLayersLength; i++) {
+ var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid;
+ if ( currUuid === this.uuid) {
+ myId = i;
+ }
+ }
+ this.parentComponent.parentComponent.draggingTrackId = myId;
+ this.parentComponent.parentComponent.draggingType = "keyframe";
+ }
},
handleKeyframeDragend : {
- value: function(event) {
- if (this.parentComponent.parentComponent.draggingType !== "keyframe") {
- return;
- }
- this._deleteHelper = true;
- this.needsDraw = true;
+ value: function(event) {
+ if (this.parentComponent.parentComponent.draggingType !== "keyframe") {
+ return;
+ }
+ this._deleteHelper = true;
+ this.needsDraw = true;
- }
+ }
},
- /* Begin: Logging routines */
+ /* Begin: Logging routines */
_boolDebug: {
- enumerable: false,
- value: false // set to true to enable debugging to console; false for turning off all debugging.
+ enumerable: false,
+ value: false // set to true to enable debugging to console; false for turning off all debugging.
},
boolDebug: {
- get: function() {
- return this._boolDebug;
- },
- set: function(boolDebugSwitch) {
- this._boolDebug = boolDebugSwitch;
- }
+ get: function() {
+ return this._boolDebug;
+ },
+ set: function(boolDebugSwitch) {
+ this._boolDebug = boolDebugSwitch;
+ }
},
log: {
- value: function(strMessage) {
- if (this.boolDebug) {
- console.log(this.getLineNumber() + ": " + strMessage);
- }
- }
+ value: function(strMessage) {
+ if (this.boolDebug) {
+ console.log(this.getLineNumber() + ": " + strMessage);
+ }
+ }
},
getLineNumber: {
- value: function() {
- try {
- throw new Error('bazinga')
- }catch(e){
- return e.stack.split("at")[3].split(":")[2];
- }
- }
+ value: function() {
+ try {
+ throw new Error('bazinga')
+ }catch(e){
+ return e.stack.split("at")[3].split(":")[2];
+ }
+ }
}
- /* End: Logging routines */
+ /* End: Logging routines */
});
diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
index 2c090f04..3376e174 100644
--- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
+++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
@@ -73,21 +73,21 @@ POSSIBILITY OF SUCH DAMAGE.
.tl_layertracks .content-position {
- height: 63px;
+ height: 63px;
}
.tl_layertracks .content-transform {
- height: 106px;
+ height: 106px;
}
.tl_layertracks .collapsible-content.collapsible-collapsed {
- overflow: hidden;
- height: 0px;
+ overflow: hidden;
+ height: 0px;
}
.tl_layertracks .collapsible-content .collapsible-label {
- height: 21px;
- background-color: $color-panel-bg;
- color: $color-panel-text;
+ height: 21px;
+ background-color: $color-panel-bg;
+ color: $color-panel-text;
}
--
cgit v1.2.3