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/TimelinePanel.reel/TimelinePanel.html | 182 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1986 ++++++++++---------- .../TimelinePanel.reel/scss/TimelinePanel.scss | 118 +- 3 files changed, 1143 insertions(+), 1143 deletions(-) (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 57285704..29701e8e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. --> - - - - + + + + - - + + -

@@ -199,19 +199,19 @@ POSSIBILITY OF SUCH DAMAGE.

Master Layer -

- +

@@ -226,31 +226,31 @@ POSSIBILITY OF SUCH DAMAGE.

+ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3dc2e514..da6f8595 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -29,9 +29,9 @@ POSSIBILITY OF SUCH DAMAGE. */ var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - nj = require("js/lib/NJUtils").NJUtils, - EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu; + Component = require("montage/ui/component").Component, + nj = require("js/lib/NJUtils").NJUtils, + EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu; var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { @@ -144,20 +144,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._currentDocument = value; var boolDoc = false, - boolView = false; - - // Should we enable the panel? - // Only if we have both a document and we're in design view. - if (typeof(value) !== "undefined") { - if (value.currentView === "design") { - // We are in design view. - boolView = true; - } - } - if (typeof(this._currentDocument) !== "undefined") { - // We have a document, or at least we have initialized the panel. - boolDoc = true; - } + boolView = false; + + // Should we enable the panel? + // Only if we have both a document and we're in design view. + if (typeof(value) !== "undefined") { + if (value.currentView === "design") { + // We are in design view. + boolView = true; + } + } + if (typeof(this._currentDocument) !== "undefined") { + // We have a document, or at least we have initialized the panel. + boolDoc = true; + } if(boolDoc === false) { this._boolCacheArrays = false; @@ -165,18 +165,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._boolCacheArrays = true; this.enablePanel(false); } else { - if(boolView === true) { - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // Initialize the timeline for the document. - this.initTimelineForDocument(); - this.enablePanel(true); - } + if(boolView === true) { + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + + // Rebind the document events for the new document context + this._bindDocumentEvents(); + + // Initialize the timeline for the document. + this.initTimelineForDocument(); + this.enablePanel(true); + } } } }, @@ -264,23 +264,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _areTracksScrolling: { - value: false + value: false }, _areTracksCollapsing: { - value: false + value: false }, _currentOpenSpanMenu: { - value: false + value: false }, currentOpenSpanMenu: { - get: function() { - return this._currentOpenSpanMenu; - }, - set: function(newVal) { - this._currentOpenSpanMenu = newVal; - } + get: function() { + return this._currentOpenSpanMenu; + }, + set: function(newVal) { + this._currentOpenSpanMenu = newVal; + } }, // Set to false to skip array caching array sets in currentDocument @@ -288,7 +288,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:true }, - // Current layer number: iterated and used to assign layer IDs. + // Current layer number: iterated and used to assign layer IDs. _currentLayerNumber:{ value:0 }, @@ -318,16 +318,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, _currentElementsSelected: { - value: [] + value: [] }, currentElementsSelected: { - get: function() { - return this._currentElementsSelected; - }, - set: function(newVal) { - this._currentElementsSelected = newVal; - this.cacheTimeline(); - } + get: function() { + return this._currentElementsSelected; + }, + set: function(newVal) { + this._currentElementsSelected = newVal; + this.cacheTimeline(); + } }, _currentLayersSelected:{ @@ -344,31 +344,31 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _easingMenu: { - value: null + value: null }, easingMenu: { - serializable: true, - get: function() { - return this._easingMenu; - }, - set: function(newVal) { - this._easingMenu = newVal; - } + serializable: true, + get: function() { + return this._easingMenu; + }, + set: function(newVal) { + this._easingMenu = newVal; + } }, // The index of the last layer that was clicked on // (used for shift-click multiselect) _lastLayerClicked : { - value: 0 + value: 0 }, lastLayerClicked: { - serializable: true, - get: function() { - return this._lastLayerClicked; - }, - set: function(newVal) { - this._lastLayerClicked = newVal - } + serializable: true, + get: function() { + return this._lastLayerClicked; + }, + set: function(newVal) { + this._lastLayerClicked = newVal + } }, _millisecondsOffset:{ @@ -400,7 +400,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { set:function (val) { this._masterDuration = val; var intDur = Math.round(val/12), - strWidth = intDur + "px"; + strWidth = intDur + "px"; this.timebar.style.width = strWidth; } }, @@ -479,137 +479,137 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Drag and Drop properties _dragAndDropHelper : { - value: false + value: false }, _dragAndDropHelperCoords: { - value: false + value: false }, _dragAndDropHelperOffset : { - value: false + value: false }, _dragLayerID : { - value: null + value: null }, _draggingType: { - value: false + value: false }, draggingType: { - get: function() { - return this._draggingType; - }, - set: function(newVal) { - this._draggingType = newVal; - } + get: function() { + return this._draggingType; + }, + set: function(newVal) { + this._draggingType = newVal; + } }, _elementsDragged: { - value: [] + value: [] }, elementsDragged: { - get: function() { - return this._elementsDragged; - }, - set: function(newVal) { - this._elementsDragged = newVal; - } + get: function() { + return this._elementsDragged; + }, + set: function(newVal) { + this._elementsDragged = newVal; + } }, dragLayerID : { - get: function() { - return this._dragLayerID; - }, - set: function(newVal) { - if (newVal !== this._dragLayerID) { - this._dragLayerID = newVal; - } - } + get: function() { + return this._dragLayerID; + }, + set: function(newVal) { + if (newVal !== this._dragLayerID) { + this._dragLayerID = newVal; + } + } }, _dropLayerID : { - value: null + value: null }, dropLayerID : { - get: function() { - return this._dropLayerID; - }, - set: function(newVal) { - if (newVal !== this._dropLayerID) { - this._dropLayerID = newVal; - - var dropLayerIndex = this.getLayerIndexByID(newVal), - i = 0, - dragLayerIndexesLength = this.currentLayersSelected.length, - dragAndDropDirection = 0, - targetIndex; - - if (dragLayerIndexesLength === 0) { - // Nothing was dragged, so do nothing. - return; - } - - // Is this a move up or down? - if (this.currentLayersSelected[0] > dropLayerIndex) { - dragAndDropDirection = -1; - } - targetIndex = dropLayerIndex + dragAndDropDirection; - - // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? - - // Get the target DOM element. - if (typeof(this.arrLayers[targetIndex]) !== "undefined") { - this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement; - } else { - this._layerDroppedInPlace = null; - } - - // Splice - for (i = 0; i < dragLayerIndexesLength; i++) { - var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]]; - // Splice arrLayers - this.arrLayers.splice(this.currentLayersSelected[i], 1); - this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); - } - this.elementsDragged = this.currentElementsSelected; - - // Cache the new info - this.cacheTimeline(); - - // Clear drag and drop variables for future re-use - this._dropLayerID = null; - this.lastLayerClicked = 0; - - // Sometimes, just to be fun, the drop and dragend events don't fire. - // So just in case, set the draw routine to delete the helper. - this._deleteHelper = true; - this._needsDOMManipulation = true; - this.needsDraw = true; - } - } + get: function() { + return this._dropLayerID; + }, + set: function(newVal) { + if (newVal !== this._dropLayerID) { + this._dropLayerID = newVal; + + var dropLayerIndex = this.getLayerIndexByID(newVal), + i = 0, + dragLayerIndexesLength = this.currentLayersSelected.length, + dragAndDropDirection = 0, + targetIndex; + + if (dragLayerIndexesLength === 0) { + // Nothing was dragged, so do nothing. + return; + } + + // Is this a move up or down? + if (this.currentLayersSelected[0] > dropLayerIndex) { + dragAndDropDirection = -1; + } + targetIndex = dropLayerIndex + dragAndDropDirection; + + // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? + + // Get the target DOM element. + if (typeof(this.arrLayers[targetIndex]) !== "undefined") { + this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement; + } else { + this._layerDroppedInPlace = null; + } + + // Splice + for (i = 0; i < dragLayerIndexesLength; i++) { + var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]]; + // Splice arrLayers + this.arrLayers.splice(this.currentLayersSelected[i], 1); + this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); + } + this.elementsDragged = this.currentElementsSelected; + + // Cache the new info + this.cacheTimeline(); + + // Clear drag and drop variables for future re-use + this._dropLayerID = null; + this.lastLayerClicked = 0; + + // Sometimes, just to be fun, the drop and dragend events don't fire. + // So just in case, set the draw routine to delete the helper. + this._deleteHelper = true; + this._needsDOMManipulation = true; + this.needsDraw = true; + } + } }, _needsDOMManipulation: { - value: false + value: false }, _appendHelper: { - value: false + value: false }, _deleteHelper: { - value: false + value: false }, _scrollTracks: { - value: false + value: false }, // Keyframe drag and drop properties _draggingTrackId: { - value: false + value: false }, draggingTrackId: { - get: function() { - return this._draggingTrackId; - }, - set: function(newVal) { - this._draggingTrackId = newVal; - } + get: function() { + return this._draggingTrackId; + }, + set: function(newVal) { + this._draggingTrackId = newVal; + } }, @@ -617,20 +617,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:true }, _currentDocumentUuid: { - value: false + value: false }, _ignoreSelectionChanges: { - value: false + value: false + }, + // is the control key currently being pressed (used for multiselect) + _isControlPressed: { + value: false }, - // is the control key currently being pressed (used for multiselect) - _isControlPressed: { - value: false - }, - // is the shift key currently being pressed (used for multiselect) - _isShiftPressed: { - value: false - }, + // is the shift key currently being pressed (used for multiselect) + _isShiftPressed: { + value: false + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -641,89 +641,89 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, draw:{ - value: function() { - - // Drag and Drop: - if (this.draggingType === "layer") { - - // Do we have a helper to append? - if (this._appendHelper === true) { - this.container_layers.appendChild(this._dragAndDropHelper); - this._appendHelper = false; - } - // Do we need to move the helper? - if (this._dragAndDropHelperCoords !== false) { - if (this._dragAndDropHelper !== null) { - this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; - } - this._dragAndDropHelperCoords = false; - } - // Do we need to scroll the tracks? - if (this._scrollTracks !== false) { - this.layout_tracks.scrollTop = this._scrollTracks; - this._scrollTracks = 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.container_layers.querySelector(".timeline-dnd-helper"); - if (myHelper != null) { - this._dragAndDropHelper = myHelper; - } - } - if (this._dragAndDropHelper !== null) { - // We need to delete the helper. Can we delete it from container_layers? - if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; - this._deleteHelper = false; - } - } - - - } - } else if (this.draggingType === "keyframe") { - // Do we need to scroll the tracks? - if (this._scrollTracks !== false) { - this.layout_tracks.scrollLeft = this._scrollTracks; - this._scrollTracks = false; - } - } - - // Do we need to scroll the layers? - if (this._areTracksScrolling) { - this._areTracksScrolling = false; - this.user_layers.scrollTop = this.layout_tracks.scrollTop; - this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; - this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px"; - } - - // Do we need to manipulate the DOM? - if (this._needsDOMManipulation === true) { - this.application.ninja.elementMediator.reArrangeDOM(this.elementsDragged , this._layerDroppedInPlace); - this.elementsDragged =[]; - } - } + value: function() { + + // Drag and Drop: + if (this.draggingType === "layer") { + + // Do we have a helper to append? + if (this._appendHelper === true) { + this.container_layers.appendChild(this._dragAndDropHelper); + this._appendHelper = false; + } + // Do we need to move the helper? + if (this._dragAndDropHelperCoords !== false) { + if (this._dragAndDropHelper !== null) { + this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; + } + this._dragAndDropHelperCoords = false; + } + // Do we need to scroll the tracks? + if (this._scrollTracks !== false) { + this.layout_tracks.scrollTop = this._scrollTracks; + this._scrollTracks = 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.container_layers.querySelector(".timeline-dnd-helper"); + if (myHelper != null) { + this._dragAndDropHelper = myHelper; + } + } + if (this._dragAndDropHelper !== null) { + // We need to delete the helper. Can we delete it from container_layers? + if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { + this.container_layers.removeChild(this._dragAndDropHelper); + this._dragAndDropHelper = null; + this._deleteHelper = false; + } + } + + + } + } else if (this.draggingType === "keyframe") { + // Do we need to scroll the tracks? + if (this._scrollTracks !== false) { + this.layout_tracks.scrollLeft = this._scrollTracks; + this._scrollTracks = false; + } + } + + // Do we need to scroll the layers? + if (this._areTracksScrolling) { + this._areTracksScrolling = false; + this.user_layers.scrollTop = this.layout_tracks.scrollTop; + this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; + this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px"; + } + + // Do we need to manipulate the DOM? + if (this._needsDOMManipulation === true) { + this.application.ninja.elementMediator.reArrangeDOM(this.elementsDragged , this._layerDroppedInPlace); + this.elementsDragged =[]; + } + } }, didDraw: { - value: function() { - if (this._needsDOMManipulation === true) { - this._needsDOMManipulation = false; - // We have shuffled layers, so we need to update this.selectedLayers. - this.selectLayers([]) - } - - // Do we need to scroll the layers? - if (this._areTracksCollapsing !== false) { - //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); - //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\ - this.layout_tracks.scrollTop = this._areTracksCollapsing; - this._areTracksCollapsing = false; - } - } + value: function() { + if (this._needsDOMManipulation === true) { + this._needsDOMManipulation = false; + // We have shuffled layers, so we need to update this.selectedLayers. + this.selectLayers([]) + } + + // Do we need to scroll the layers? + if (this._areTracksCollapsing !== false) { + //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); + //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\ + this.layout_tracks.scrollTop = this._areTracksCollapsing; + this._areTracksCollapsing = false; + } + } }, /* === END: Draw cycle === */ @@ -767,113 +767,113 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // cache Timeline data in currentDocument. cacheTimeline: { - value: function() { - if (typeof(this.application.ninja) === "undefined") { - return; - } - // Store the timeline data in currentDocument... - if (this._boolCacheArrays) { - // ... but only if we're supposed to. + value: function() { + if (typeof(this.application.ninja) === "undefined") { + return; + } + // Store the timeline data in currentDocument... + if (this._boolCacheArrays) { + // ... but only if we're supposed to. if(this.currentDocument) { - var i = 0, - hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length, - boolHash = false; - - this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; - this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; - this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; - this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; - for (i = 0; i < hashLength; i++ ) { - if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { - this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers; - boolHash = true; - } - } - if (boolHash === false) { - var newHash = {}; - newHash.containerUuid = this.currentDocument.model.domContainer.uuid; - newHash.arrLayers = this.arrLayers; - this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash); - } + var i = 0, + hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length, + boolHash = false; + + this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; + this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; + this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; + this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; + this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; + for (i = 0; i < hashLength; i++ ) { + if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { + this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers; + boolHash = true; + } + } + if (boolHash === false) { + var newHash = {}; + newHash.containerUuid = this.currentDocument.model.domContainer.uuid; + newHash.arrLayers = this.arrLayers; + this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash); + } } - this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected; - } - } + this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected; + } + } }, // Initialize Timeline cache in currentDocument. initTimelineCache: { - value: function() { - // Initialize the currentDocument for a new set of timeline data. - this.application.ninja.currentDocument.isTimelineInitialized = true; - this.application.ninja.currentDocument.tlArrLayers = []; - this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; - this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; - this.application.ninja.currentDocument.tlCurrentLayerSelected = false; - this.application.ninja.currentDocument.tlCurrentLayersSelected = false; - this.application.ninja.currentDocument.tlCurrentElementsSelected = []; + value: function() { + // Initialize the currentDocument for a new set of timeline data. + this.application.ninja.currentDocument.isTimelineInitialized = true; + this.application.ninja.currentDocument.tlArrLayers = []; + this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; + this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; + this.application.ninja.currentDocument.tlCurrentLayerSelected = false; + this.application.ninja.currentDocument.tlCurrentLayersSelected = false; + this.application.ninja.currentDocument.tlCurrentElementsSelected = []; this.application.ninja.currentDocument.lockedElements = []; - this.application.ninja.currentDocument.tlBreadcrumbHash = []; - } + this.application.ninja.currentDocument.tlBreadcrumbHash = []; + } }, // Create an array of style objects for an element, for use // in creating a new layer createLayerStyles : { - value: function(ptrElement) { - // TODO: Create logic to loop through - // CSS properties on element and build - // array of layer styles for return. - // Right now this method just returns an array of one bogus style. - - var returnArray = [], - newStyle = {}, - styleID = "1@0"; // format: layerID + "@" + style counter - - /* Example new style + value: function(ptrElement) { + // TODO: Create logic to loop through + // CSS properties on element and build + // array of layer styles for return. + // Right now this method just returns an array of one bogus style. + + var returnArray = [], + newStyle = {}, + styleID = "1@0"; // format: layerID + "@" + style counter + + /* Example new style newStyle.styleID = styleID; - newStyle.whichView = "propval"; // Which view do we want to show, usually property/value view (see Style) - newStyle.editorProperty = "top"; // the style property - newStyle.editorValue = 0; // The current value - newStyle.ruleTweener = false; - newStyle.isSelected = false; - - returnArray.push(newStyle); - */ - - return returnArray; - - } + newStyle.whichView = "propval"; // Which view do we want to show, usually property/value view (see Style) + newStyle.editorProperty = "top"; // the style property + newStyle.editorValue = 0; // The current value + newStyle.ruleTweener = false; + newStyle.isSelected = false; + + returnArray.push(newStyle); + */ + + return returnArray; + + } }, // Create an array of style track objects for an element, for use // in creating a new layer createStyleTracks : { - value: function(ptrElement) { - // TODO: Create logic to loop through - // CSS properties on element and build - // array of layer styles for return. - // Right now this method just returns an array of one bogus style. - - var returnArray = []; - - return returnArray; - - } + value: function(ptrElement) { + // TODO: Create logic to loop through + // CSS properties on element and build + // array of layer styles for return. + // Right now this method just returns an array of one bogus style. + + var returnArray = []; + + return returnArray; + + } }, // Bind all document-specific events (pass in true to unbind) _bindDocumentEvents : { value: function(boolUnbind) { - /* - var arrEvents = [ "stageElement", + /* + var arrEvents = [ "stageElement", "deleteLayer", "elementAdded", "elementsRemoved", "elementReplaced", "selectionChange"], - */ - var arrEvents = ["elementAdded", + */ + var arrEvents = ["elementAdded", "elementsRemoved", "selectionChange"], i, @@ -894,8 +894,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Initialize the timeline, runs only once when the timeline component is first loaded initTimeline:{ value:function () { - - // Get some selectors + + // Get some selectors this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); @@ -932,14 +932,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false); document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false); this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); - this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); + this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false); this.addPropertyChangeListener("currentDocument.model.domContainer", this); - // Start the panel out in disabled mode by default - // (Will be switched on later, if appropriate). + // Start the panel out in disabled mode by default + // (Will be switched on later, if appropriate). this.enablePanel(false); // Create the easing menu for future use. @@ -961,15 +961,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // console.log("TimelinePanel.initTimelineForDocument"); if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { - // console.log('TimelinePanel.initTimelineForDocument: new Document'); + // console.log('TimelinePanel.initTimelineForDocument: new Document'); // No, we have no information stored. // This could mean we are creating a new file, OR are opening an existing file. // First, initialize the caches. - this.initTimelineCache(); + this.initTimelineCache(); this.temparrLayers = []; - // That's all we need to do for a brand new file. + // That's all we need to do for a brand new file. // But what if we're opening an existing document? if (!this.application.ninja.documentController.creatingNewFile && this.application.ninja.currentDocument.currentView !== "code") { // Opening an existing document. If it has DOM elements we need to restore their timeline info @@ -988,34 +988,34 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._ignoreNextContainerChange = true; this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; - } else if (this.application.ninja.currentDocument.setLevel) { + } else if (this.application.ninja.currentDocument.setLevel) { // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); - // Information stored, but we're moving up or down in the breadcrumb. - - var i = 0, - hash = this.application.ninja.currentDocument.tlBreadcrumbHash, - hashLength = hash.length, - boolHashed = false, - parentNode = this.currentDocument.model.domContainer, - storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; - this.temparrLayers = []; - - // It's possible there is something stored in the breadcrumb hash in currentdocument, so check there first. - for (i = 0; i < hashLength; i++ ) { - if (hash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { - this.temparrLayers = hash[i].arrLayers - boolHashed = true; - } - } - - // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method. - if (boolHashed === false) { - for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { - this._openDoc = true; - this.restoreLayer(parentNode.children[myIndex]); - } - } - + // Information stored, but we're moving up or down in the breadcrumb. + + var i = 0, + hash = this.application.ninja.currentDocument.tlBreadcrumbHash, + hashLength = hash.length, + boolHashed = false, + parentNode = this.currentDocument.model.domContainer, + storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; + this.temparrLayers = []; + + // It's possible there is something stored in the breadcrumb hash in currentdocument, so check there first. + for (i = 0; i < hashLength; i++ ) { + if (hash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { + this.temparrLayers = hash[i].arrLayers + boolHashed = true; + } + } + + // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method. + if (boolHashed === false) { + for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { + this._openDoc = true; + this.restoreLayer(parentNode.children[myIndex]); + } + } + // Draw the repetition. this.arrLayers = this.temparrLayers; this.currentLayerNumber = storedCurrentLayerNumber; @@ -1023,21 +1023,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.resetMasterDuration(); } else { - // console.log('TimelinePanel.initTimelineForDocument: else fallback'); + // console.log('TimelinePanel.initTimelineForDocument: else fallback'); // we do have information stored. Use it. var i = 0, - tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length; + tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length; this._ignoreNextContainerChange = true; // We're reading from the cache, not writing to it. - this._boolCacheArrays = false; - - // We are about to redraw the layers and tracks for the first time, so they need to go through their - // respective firstDraw routines. + this._boolCacheArrays = false; + + // We are about to redraw the layers and tracks for the first time, so they need to go through their + // respective firstDraw routines. for (i = 0; i < tlArrLayersLength; i++) { - this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; + this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; } this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; @@ -1047,24 +1047,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { //debugger; if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { -// this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer; +// this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer; } this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected; this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; // Are we only showing animated layers? - if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { - // Fake a click. - var evt = document.createEvent("MouseEvents"); - evt.initMouseEvent("click"); - this.checkable_animated.dispatchEvent(evt); - } + if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { + // Fake a click. + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("click"); + this.checkable_animated.dispatchEvent(evt); + } - // Ok, done reading from the cache. - this._boolCacheArrays = true; - - // Reset master duration - this.resetMasterDuration(); + // Ok, done reading from the cache. + this._boolCacheArrays = true; + + // Reset master duration + this.resetMasterDuration(); } } }, @@ -1084,7 +1084,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.timeline.playheadmarker.style.left = "0px"; this.application.ninja.timeline.updateTimeText(0.00); this.timebar.style.width = "0px"; - this.checkable_animated.classList.remove("checked"); + this.checkable_animated.classList.remove("checked"); this.currentLayerNumber = 0; this.currentLayerSelected = false; this.currentLayersSelected = false; @@ -1132,34 +1132,34 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { tempEv.actionType = action; if (this.currentLayersSelected === false) { - // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently. - return; + // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently. + return; } // Okay. We need to get the correct layer(s). For each currentElementSelected, // loop through trackRepetition.childComponents and compare to stageElement. // If they match, that's one of the components that needs the event. var i = 0, - j = 0, - currentElementsSelectedLength = this.currentElementsSelected.length, - trackRepLength = this.trackRepetition.childComponents.length, - arrTargetIndexes = [], - arrTargetIndexesLength = 0; - + j = 0, + currentElementsSelectedLength = this.currentElementsSelected.length, + trackRepLength = this.trackRepetition.childComponents.length, + arrTargetIndexes = [], + arrTargetIndexesLength = 0; + for (i = 0; i < trackRepLength; i++) { - var currentElement = this.trackRepetition.childComponents[i].stageElement; - for (j = 0; j < currentElementsSelectedLength; j++) { - if (currentElement === this.currentElementsSelected[j]) { - arrTargetIndexes.push(i); - } - } + var currentElement = this.trackRepetition.childComponents[i].stageElement; + for (j = 0; j < currentElementsSelectedLength; j++) { + if (currentElement === this.currentElementsSelected[j]) { + arrTargetIndexes.push(i); + } + } } arrTargetIndexesLength = arrTargetIndexes.length; - // Now we have an array of things that need to handle the event. + // Now we have an array of things that need to handle the event. for (i = 0; i < arrTargetIndexesLength; i++) { - this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv); + this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv); } } }, @@ -1177,23 +1177,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, synchScrollbars: { - value: function(intScrollBy) { - //this.updateLayerScroll(); - //this.user_layers.scrollTop = 0; - //this.layout_tracks.scrollTop = this.user_layers.scrollTop; - //console.log("synch: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); - this._areTracksCollapsing = this.layout_tracks.scrollTop - intScrollBy; - this.needsDraw = true; + value: function(intScrollBy) { + //this.updateLayerScroll(); + //this.user_layers.scrollTop = 0; + //this.layout_tracks.scrollTop = this.user_layers.scrollTop; + //console.log("synch: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); + this._areTracksCollapsing = this.layout_tracks.scrollTop - intScrollBy; + this.needsDraw = true; - } + } }, updateLayerScroll:{ value:function () { - //console.log("TimelinePanel.updateLayerScroll") - this._areTracksScrolling = true; - this.needsDraw = true; - + //console.log("TimelinePanel.updateLayerScroll") + this._areTracksScrolling = true; + this.needsDraw = true; + } }, @@ -1219,42 +1219,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.updateTimeText(currentMillisec); } }, - - // Event handler for changes in stage selection. + + // Event handler for changes in stage selection. handleSelectionChange: { value:function (event) { - this.updateLayerSelection(); + this.updateLayerSelection(); } }, - // Select the layers whose indexes are passed in as arrSelectedIndexes. - // Pass in an empty array to clear all selections. + // Select the layers whose indexes are passed in as arrSelectedIndexes. + // Pass in an empty array to clear all selections. selectLayers:{ value:function (arrSelectedIndexes) { - var i = 0, - j = 0, - arrLayersLength = this.arrLayers.length, - arrSelectedIndexesLength = arrSelectedIndexes.length, - currentLayersSelectedLength = this.currentLayersSelected.length, - boolContinue = false, - arrSelectedLayers = false, - arrCurrentElementsSelected = []; + var i = 0, + j = 0, + arrLayersLength = this.arrLayers.length, + arrSelectedIndexesLength = arrSelectedIndexes.length, + currentLayersSelectedLength = this.currentLayersSelected.length, + boolContinue = false, + arrSelectedLayers = false, + arrCurrentElementsSelected = []; var matchedValues = 0; - /* + /* if (arrSelectedIndexesLength !== 0) { - for(i=0;i