From 7e997cac27b4fcb1a30ab53ab5d2114eacfb9222 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 12:14:34 -0700 Subject: Timeline: Code refactor for Style.js --- js/panels/Timeline/Style.reel/Style.js | 195 +++++++++++++++++---------------- 1 file changed, 103 insertions(+), 92 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index c8d323a9..78bc2db3 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -17,38 +17,80 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator var LayerStyle = exports.LayerStyle = Montage.create(Component, { - + /* === BEGIN: Models === */ + _parentLayerComponent: { + value: null + }, + + _styleContainer: { + value: null + }, styleContainer: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleContainer; + }, + set: function(newVal) { + this._styleContainer = newVal; + } }, + _styleHintable: { + value: null + }, styleHintable: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleHintable; + }, + set: function(newVal) { + this._styleHintable = newVal; + } }, + _styleProperty: { + value: null + }, styleProperty: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleProperty; + }, + set: function(newVal) { + this._styleProperty = newVal; + } }, + _valueEditorHottext: { + value: null + }, valueEditorHottext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._valueEditorHottext; + }, + set: function(newVal) { + this._valueEditorHottext = newVal; + } }, + _dtextProperty: { + value: null + }, dtextProperty: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._dtextProperty; + }, + set: function(newVal) { + this._dtextProperty = newVal; + } }, - /* === BEGIN: Models === */ - // isSelected: whether or not the style is selected _isSelected: { value: false }, @@ -66,9 +108,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with - * parent Layer. - */ _isActive: { value: false }, @@ -139,6 +178,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, serializable: true }, + _myHintableValue : { value: null }, @@ -194,13 +234,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - addedColorChips: - { value: false }, + addedColorChips: { + value: false + }, _colorelement: { writable:true }, - colorelement: { enumerable: true, get: function () { @@ -246,11 +286,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, draw: { value: function() { - + // Show the right view if (this._swapViews === true) { - // Show the right thing this._showView(); } + + // Is this style selected? if (this.isSelected) { this.element.classList.add("style-selected"); } else { @@ -260,6 +301,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, + didDraw: { value: function() { if (this._swapViews === true) { @@ -288,6 +330,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.whichView = "propval"; } }, + + handleFillColorChange: { + value: function (event) { + if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ + var fillColorObject={}; + fillColorObject.color=event._event.color; + fillColorObject.mode=event._event.colorMode; + ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) + } + } + }, + + handleHottextChange:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); + } + } + }, + + handleHottextChanging:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); + } + } + }, + + handleBlur:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); + } + } + }, // Init: Initialize the component with some useful selectors and other defaults. init : { @@ -296,6 +373,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var arrHints = [], i = 0; + this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) @@ -372,7 +451,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.valueEditorHottext.minValue = tweenable.min; this.valueEditorHottext.maxValue = tweenable.max; this.valueEditorHottext.identifier="hottext"; - el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; + el = this._parentLayerComponent.layerData.stageElement; this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); this.valueEditorHottext.value = this.editorValue this.valueEditorHottext.addEventListener("change",this,false); @@ -397,7 +476,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); this.colorelement = this._fillColorCtrl; - var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) + var currentValue = ElementsMediator.getColor(this._parentLayerComponent.layerData.stageElement,this._isFill,this._borderSide) this.application.ninja.timeline.selectedStyle = this.editorProperty; this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); if(currentValue){ @@ -725,73 +804,5 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } ] - }, - - handleFillColorChange: { - value: function (event) { - if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ - var fillColorObject={}; - fillColorObject.color=event._event.color; - fillColorObject.mode=event._event.colorMode; - ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) - } - } - }, - - handleHottextChange:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); - } - } - }, - - handleHottextChanging:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); - } - } - }, - - handleBlur:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); - } - } - }, - - - /* Begin: Logging routines */ - _boolDebug: { - 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; - } - }, - log: { - 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]; - } - } } - /* End: Logging routines */ - }); \ No newline at end of file -- cgit v1.2.3 From 539f430f95812e726ad14012965ece942a010bca Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 14:42:03 -0700 Subject: Timeline: Refactor style and layer to use pointers to parent components. --- js/panels/Timeline/Layer.reel/Layer.js | 31 +++++++++++++++++++++---------- js/panels/Timeline/Style.reel/Style.js | 11 ++++++++--- 2 files changed, 29 insertions(+), 13 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f7b66a39..f53d54aa 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -13,7 +13,10 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Layer = exports.Layer = Montage.create(Component, { /* Begin: Models */ - + _timelinePanel: { + value: null + }, + _dynamicLayerTag: { value: null }, @@ -664,6 +667,14 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width")); } }, + + willDraw: { + value: function() { + if (this._timelinePanel === null) { + this._timelinePanel = this.parentComponent.parentComponent; + } + } + }, draw: { value: function() { @@ -770,11 +781,11 @@ var Layer = exports.Layer = Montage.create(Component, { // Dispatch the event to the TimelineTrack component associated with this Layer. var myIndex = false, i = 0, - arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, + arrLayersLength = this._timelinePanel.arrLayers.length, arrTracks = document.querySelectorAll('[data-montage-id="track"]'); for (i = 0; i < arrLayersLength; i++) { - if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) { + if (this.stageElement == this._timelinePanel.arrLayers[i].layerData.stageElement) { myIndex = i; } } @@ -1005,7 +1016,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragleave: { value: function(event) { - if (this.parentComponent.parentComponent.draggingType !== "layer") { + if (this._timelinePanel.draggingType !== "layer") { return; } this.element.classList.remove("dragOver"); @@ -1013,14 +1024,14 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragstart: { value: function(event) { - //this.parentComponent.parentComponent.dragLayerID = this.layerID; + //this._timelinePanel.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Layer'); - this.parentComponent.parentComponent.draggingType = "layer"; + this._timelinePanel.draggingType = "layer"; } }, handleDragover: { value: function(event) { - if (this.parentComponent.parentComponent.draggingType !== "layer") { + if (this._timelinePanel.draggingType !== "layer") { return; } event.preventDefault(); @@ -1032,13 +1043,13 @@ var Layer = exports.Layer = Montage.create(Component, { handleDrop : { value: function(event) { - if (this.parentComponent.parentComponent.draggingType !== "layer") { + if (this._timelinePanel.draggingType !== "layer") { return; } event.stopPropagation(); this.element.classList.remove("dragOver"); - if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { - this.parentComponent.parentComponent.dropLayerID = this.layerID; + if (this._timelinePanel.dragLayerID !== this.layerID) { + this._timelinePanel.dropLayerID = this.layerID; } return false; } diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 78bc2db3..802c6311 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -284,6 +284,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.init(); } }, + willDraw: { + value: function() { + if (this._parentLayerComponent === null) { + this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; + } + } + }, draw: { value: function() { // Show the right view @@ -372,9 +379,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var arrHints = [], i = 0; - - this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; - + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) -- cgit v1.2.3 From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 15:47:50 -0700 Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes propagated to PropertyTrack, TimelineTrack, and Tween classes. --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 4 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1198 ++++++++++---------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +- js/panels/Timeline/Tween.reel/Tween.js | 4 +- 4 files changed, 603 insertions(+), 610 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index c4571e9d..5c674c27 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -244,7 +244,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + // this.application.ninja.timeline.selectLayer(selectedIndex, true); // Deprecated. + this.application.ninja.timeline.selectLayers([selectedIndex]); + this.application.ninja.timeline.updateStageSelection(); var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1df37636..17372935 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -11,103 +11,244 @@ var Montage = require("montage/core/core").Montage, var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { + /* === BEGIN: Models === */ + _user_layers: { + value: null + }, user_layers: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._user_layers; + }, + set: function(newVal) { + this._user_layers = newVal; + } }, + _track_container: { + value: null + }, track_container: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._track_container; + }, + set: function(newVal) { + this._track_container = newVal; + } }, + _timeline_leftpane: { + value: null + }, timeline_leftpane: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timeline_leftpane; + }, + set: function(newVal) { + this._timeline_leftpane = newVal; + } }, + _layer_tracks: { + value: null + }, layer_tracks: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._layer_tracks; + }, + set: function(newVal) { + this._layer_tracks = newVal; + } }, + _master_track: { + value: null + }, master_track: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._master_track; + }, + set: function(newVal) { + this._master_track = newVal; + } }, + _time_markers: { + value: null + }, time_markers: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._time_markers; + }, + set: function(newVal) { + this._time_markers = newVal; + } }, + _playhead: { + value: null + }, playhead: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._playhead; + }, + set: function(newVal) { + this._playhead = newVal; + } }, + _playheadmarker: { + value: null + }, playheadmarker: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._playheadmarker; + }, + set: function(newVal) { + this._playheadmarker = newVal; + } }, + _timetext: { + value: null + }, timetext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timetext; + }, + set: function(newVal) { + this._timetext = newVal; + } }, + _timebar: { + value: null + }, timebar: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timebar; + }, + set: function(newVal) { + this._timebar = newVal; + } }, + _container_tracks: { + value: null + }, container_tracks: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._container_tracks; + }, + set: function(newVal) { + this._container_tracks = newVal; + } }, + _end_hottext: { + value: null + }, end_hottext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._end_hottext; + }, + set: function(newVal) { + this._end_hottext = newVal; + } }, + _container_layers: { + value: null + }, container_layers: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._container_layers; + }, + set: function(newVal) { + this._container_layers = newVal; + } }, + _timeline_disabler: { + value: null + }, timeline_disabler: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timeline_disabler; + }, + set: function(newVal) { + this._timeline_disabler = newVal; + } }, + _checkable_relative: { + value: null + }, checkable_relative: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._checkable_relative; + }, + set: function(newVal) { + this._checkable_relative = newVal; + } }, + _checkable_absolute: { + value: null + }, checkable_absolute: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._checkable_absolute; + }, + set: function(newVal) { + this._checkable_absolute = newVal; + } }, + _checkable_animated: { + value: null + }, checkable_animated: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._checkable_animated; + }, + set: function(newVal) { + this._checkable_animated = newVal; + } }, + _tl_configbutton: { + value: null + }, tl_configbutton: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._tl_configbutton; + }, + set: function(newVal) { + this._tl_configbutton = newVal; + } }, - - - /* === BEGIN: Models === */ _currentDocument: { value : null }, - currentDocument : { get : function() { return this._currentDocument; @@ -157,14 +298,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleChange: { - value: function() { - if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { - this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer"); - } - } - }, - _currentSelectedContainer: { value: null }, @@ -199,7 +332,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _arrLayers:{ value:[] }, - arrLayers:{ serializable:true, get:function () { @@ -215,7 +347,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _temparrLayers:{ value:[] }, - temparrLayers:{ get:function () { return this._temparrLayers; @@ -229,7 +360,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _layerRepetition:{ value:null }, - layerRepetition:{ get:function () { return this._layerRepetition; @@ -280,7 +410,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _currentLayerNumber:{ value:0 }, - currentLayerNumber:{ get:function () { return this._currentLayerNumber; @@ -293,18 +422,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - _currentLayerSelected:{ - value: false - }, - currentLayerSelected:{ - get:function () { - return this._currentLayerSelected; - }, - set:function (newVal) { - this._currentLayerSelected = newVal; - this.cacheTimeline(); - } - }, _currentElementsSelected: { value: [] }, @@ -362,7 +479,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _millisecondsOffset:{ value:1000 }, - millisecondsOffset:{ get:function () { return this._millisecondsOffset; @@ -379,7 +495,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _masterDuration:{ value:0 }, - masterDuration:{ serializable:true, get:function () { @@ -396,7 +511,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _trackRepetition:{ value:null }, - trackRepetition:{ get:function () { return this._trackRepetition; @@ -409,7 +523,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _selectedKeyframes:{ value:[] }, - selectedKeyframes:{ serializable:true, get:function () { @@ -423,7 +536,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _selectedTweens:{ value:[] }, - selectedTweens:{ serializable:true, get:function () { @@ -437,7 +549,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _breadCrumbContainer:{ value:null }, - breadCrumbContainer:{ get:function () { return this._breadCrumbContainer; @@ -469,15 +580,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _dragAndDropHelper : { value: false }, + _dragAndDropHelperCoords: { value: false }, + _dragAndDropHelperOffset : { value: false }, - _dragLayerID : { - value: null - }, + _draggingType: { value: false }, @@ -502,6 +613,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _dragLayerID : { + value: null + }, dragLayerID : { get: function() { return this._dragLayerID; @@ -540,8 +654,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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") { @@ -553,7 +665,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // 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); } @@ -574,15 +685,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + _needsDOMManipulation: { value: false }, + _appendHelper: { value: false }, + _deleteHelper: { value: false }, + _scrollTracks: { value: false }, @@ -600,16 +715,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - useAbsolutePosition:{ value:true }, + _currentDocumentUuid: { value: false }, + _ignoreSelectionChanges: { value: false }, + // is the control key currently being pressed (used for multiselect) _isControlPressed: { value: false @@ -619,6 +736,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _isShiftPressed: { value: false }, + + // Hack to ignore extra container change event during document switching. + _ignoreNextContainerChange: { + value: true + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -706,8 +828,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // 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; } @@ -715,6 +835,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === END: Draw cycle === */ + /* === BEGIN: Controllers === */ // Create an empty layer template object with minimal defaults and return it for use createLayerTemplate:{ @@ -770,7 +891,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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) { @@ -789,6 +909,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + // Initialize Timeline cache in currentDocument. initTimelineCache: { value: function() { @@ -805,62 +926,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - // 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 - 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; - - } - }, - - // 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; - - } - }, - // Bind all document-specific events (pass in true to unbind) _bindDocumentEvents : { value: function(boolUnbind) { - /* - var arrEvents = [ "stageElement", - "deleteLayer", - "elementAdded", - "elementsRemoved", - "elementReplaced", - "selectionChange"], - */ var arrEvents = ["elementAdded", "elementsRemoved", "selectionChange"], @@ -887,12 +955,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); - - // Bind the event handler for the document change events - //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); + // Bind the event handler for the document close events this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); - //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); - //this.eventManager.addEventListener("breadCrumbBinding",this,false); // Bind drag and drop event handlers this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); @@ -908,12 +972,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { document.addEventListener("click", this.handleDocumentClick.bind(this), false); // Add some event handlers - this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false); - //this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false); - //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); - this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); - this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); - this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); + this.timeline_leftpane.addEventListener("click", this.handleTimelineLeftPanelClick.bind(this), false); + this.layout_tracks.addEventListener("scroll", this.handleLayerScroll.bind(this), false); + this.user_layers.addEventListener("scroll", this.handleLayerScroll.bind(this), false); + this.end_hottext.addEventListener("changing", this.handleTrackContainerWidthChange.bind(this), false); this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); @@ -923,7 +985,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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 @@ -937,19 +998,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Initialize the timeline for a document. // Called when a document is opened (new or existing), or when documents are switched. - _ignoreNextContainerChange: { - value: true - }, initTimelineForDocument:{ value:function () { var myIndex; this.drawTimeMarkers(); + // Document switching // Check to see if we have saved timeline information in the currentDocument. - // console.log("TimelinePanel.initTimelineForDocument"); - if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { - // 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. @@ -977,9 +1033,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; } 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, @@ -996,7 +1050,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method. + // Possibly nothing was in the hash, fall back to old restoreLayer method. if (boolHashed === false) { for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { this._openDoc = true; @@ -1011,12 +1065,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.resetMasterDuration(); } else { - // console.log('TimelinePanel.initTimelineForDocument: else fallback'); // we do have information stored. Use it. var i = 0, tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length; - + // Hack to ignore next container change event this._ignoreNextContainerChange = true; // We're reading from the cache, not writing to it. @@ -1029,14 +1082,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; - this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected; - - - //debugger; - if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { -// this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer; - } this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected; this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; @@ -1067,14 +1113,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.deselectTweens(); // Reset visual appearance - // TODO: Maybe playhead position should be stored per document, so we can persist between document switch? this.application.ninja.timeline.playhead.style.left = "-2px"; 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.currentLayerNumber = 0; - this.currentLayerSelected = false; this.currentLayersSelected = false; this.currentElementsSelected = []; this.selectedKeyframes = []; @@ -1082,7 +1126,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._captureSelection = false; this._openDoc = false; this.end_hottext.value = 25; - this.updateTrackContainerWidth(); + this.handleTrackContainerWidthChange(); + // Clear the repetitions if (this.arrLayers.length > 0) { this.arrLayers = []; @@ -1091,130 +1136,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.resetMasterDuration(); } }, - - handleDocumentChange:{ - value:function () { - - } - }, - - handlePlayButtonClick:{ - value:function(ev){ - this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; - - if (this.application.ninja.appModel.livePreview) { - this.play_button.classList.remove("playbutton"); - this.play_button.classList.add("pausebutton"); - - } else { - this.play_button.classList.remove("pausebutton"); - this.play_button.classList.add("playbutton"); - } - } - }, - - handleKeyframeShortcut:{ - value:function(action){ - var tempEv = {}; - tempEv.offsetX = this.playheadmarker.offsetLeft; - 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; - } - - // 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; - - - 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); - } - } - } - arrTargetIndexesLength = arrTargetIndexes.length; - - // 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); - } - } - }, - - updateTrackContainerWidth:{ - value:function () { - this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; - this.master_track.style.width = (this.end_hottext.value * 80) + "px"; - this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; - if (this.timeMarkerHolder) { - this.time_markers.removeChild(this.timeMarkerHolder); - } - this.drawTimeMarkers(); - } - }, 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; - } }, - updateLayerScroll:{ - value:function () { - //console.log("TimelinePanel.updateLayerScroll") - this._areTracksScrolling = true; - this.needsDraw = true; - - } - }, - - startPlayheadTracking:{ - value:function () { - this.time_markers.onmousemove = this.updatePlayhead.bind(this); - } - }, - - stopPlayheadTracking:{ - value:function () { - this.time_markers.onmousemove = null; - } - }, - - updatePlayhead:{ - value:function (event) { - var clickedPosition = event.target.offsetLeft + event.offsetX; - this.playhead.style.left = (clickedPosition - 2) + "px"; - this.playheadmarker.style.left = clickedPosition + "px"; - var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * clickedPosition; - this.updateTimeText(currentMillisec); - } - }, - - // Event handler for changes in stage selection. - handleSelectionChange: { - value:function (event) { - this.updateLayerSelection(); - } - }, - // Select the layers whose indexes are passed in as arrSelectedIndexes. // Pass in an empty array to clear all selections. selectLayers:{ @@ -1372,152 +1301,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - timelineLeftPanelMousedown: { - value:function (event) { - var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), - i = 0, - arrLayers = document.querySelectorAll(".container-layer"), - arrLayersLength = arrLayers.length, - targetIndex = 0, - isAlreadySelected = false, - indexAlreadySelected = -5, - indexLastClicked = 0, - ua = navigator.userAgent.toLowerCase(), - boolCommandControlKeyIsPressed = false; - - // Check to see if either the Command key (macs) or Control key (windows) is being pressed - if (ua.indexOf("mac") > -1) { - if (event.metaKey === true) { - boolCommandControlKeyIsPressed = true; - } - } else { - if (this._isControlPressed === true) { - boolCommandControlKeyIsPressed = true; - } - } - - - // Did the mousedown event originate within a layer? - if (ptrParent === false) { - // No it did not. Do nothing. - return; - } - - // Get the targetIndex, the index in the arrLayers of the - // layer that was just clicked on - for (i = 0; i < arrLayersLength; i++) { - if (arrLayers[i] == ptrParent) { - targetIndex = i; - } - } - - // Did we just click on a layer that's already selected? - if (this.currentLayersSelected !== false) { - for (i = 0; i < this.currentLayersSelected.length; i++) { - if (this.currentLayersSelected[i] === targetIndex) { - indexAlreadySelected = i; - } - } - } - if (indexAlreadySelected > -1) { - isAlreadySelected = true; - } - - // Now, do the selection based on all of that information. - if (this.currentLayersSelected.length === 0) { - // Nothing selected yet, so just push the new index into the array. - this.currentLayersSelected.push(targetIndex); - } else { - // Something is already selected. What do do depends on whether - // or not other keys are pressed. - if (boolCommandControlKeyIsPressed === true) { - // Control or Command key is being pressed, so we need to - // either add the current layer to selectedLayers - // or remove it if it's already there. - if (this.currentLayersSelected === false) { - this.currentLayersSelected = []; - } - if (isAlreadySelected === false) { - this.currentLayersSelected.push(targetIndex); - } else { - this.currentLayersSelected.splice(indexAlreadySelected, 1); - } - this.lastLayerClicked = targetIndex; - } else if (this._isShiftPressed === true) { - // The shift key is being pressed. - // Start by selecting the lastLayerClicked - if (this.currentLayersSelected === false) { - this.currentLayersSelected = []; - //this.currentLayerSelected = false; - } - this.currentLayersSelected = [this.lastLayerClicked]; - // Add all the layers between lastLayerClicked and targetIndex - if (targetIndex > this.lastLayerClicked) { - for (i = this.lastLayerClicked+1; i <= targetIndex; i++) { - this.currentLayersSelected.push(i); - } - } else if (targetIndex < this.lastLayerClicked) { - for (i = targetIndex; i < this.lastLayerClicked; i++) { - this.currentLayersSelected.push(i); - } - } - } else { - // No key is pressed, so just select the element - // and update lastLayerClicked - this.currentLayersSelected = [targetIndex]; - this.lastLayerClicked = targetIndex; - } - } - this.selectLayers(this.currentLayersSelected); - this.updateStageSelection(); - } - }, - - timelineLeftPaneKeydown: { - value: function(event) { - var ua = navigator.userAgent.toLowerCase(), - boolIsMac = false; - if (ua.indexOf("mac") > -1) { - boolIsMac = true; - } - if (event.keyCode === 16) { - // Shift key has been pressed - this._isShiftPressed = true; - } - if ((event.keyCode === 17) && !boolIsMac) { - // Control key has been pressed - this._isControlPressed = true; - } - /* - if (event.metaKey === true) { - this._isControlPressed = true; - } - */ - } - }, - - timelineLeftPaneKeyup: { - value: function(event) { - var ua = navigator.userAgent.toLowerCase(), - boolIsMac = false; - if (ua.indexOf("mac") > -1) { - boolIsMac = true; - } - if (event.keyCode === 16) { - // Shift key has been released - this._isShiftPressed = false; - } - if ((event.keyCode === 17) && !boolIsMac) { - // Control key has been released - this._isControlPressed = false; - } - if (event.metaKey === false) { - this._isControlPressed = false; - } - } - }, - - createStageElementsAt: { value:function (isPaste, arrElements) { @@ -1561,14 +1344,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } - //arrNewLayers.push(thingToPush); this.arrLayers.splice(targetIndex, 0, thingToPush); } - //console.log(arrNewLayers); - //console.log(thingToPush); - - //this.arrLayers.splice(targetIndex, 0, arrNewLayers); - } }, @@ -1578,11 +1355,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush = this.createLayerTemplate(); this.currentLayerNumber = this.currentLayerNumber + 1; -// stageElementName = "Layer " + this.currentLayerNumber; -// if(ele.dataset.storedLayerName){ -// stageElementName = ele.dataset.storedLayerName; -// } if(ele.id){ thingToPush.layerData.layerName = ele.id; } @@ -1590,16 +1363,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; thingToPush.parentElement = this.currentDocument.model.domContainer; if (this._openDoc) { - //thingToPush.layerData.elementsList.push(ele); thingToPush.layerData.stageElement = ele; } if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } - // Are there styles to add? - thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); - thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); + // Initialize arrays for styles and their associated tracks; + // These will be filled (if necessary) in TimelineTrack. + thingToPush.layerData.arrLayerStyles = []; + thingToPush.layerData.arrStyleTracks = []; // Add the layer to the repetition this.temparrLayers.splice(0, 0, thingToPush); @@ -1607,7 +1380,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; this._openDoc = false; - } }, @@ -1652,39 +1424,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleElementAdded:{ - value:function(event) { - var i = 0, - targetIndex = 0; - // One or more elements have been added to the stage. - // We need to add them to the timeline. - if (typeof(event.detail.length) === "undefined") { - // This is a standard element creation event. - this.createStageElementsAt(false, [event.detail]); - } else { - // This is a paste action, because event.detail has more than one item in it. - this.createStageElementsAt(true, event.detail); - } - } - }, - - handleElementsRemoved:{ - value:function (event) { - this.deleteLayers(event.detail); - } - }, - - handleElementReplaced:{ - value:function(event){ - // TODO: this needs to be updated. Not sure when an elementReplaced event will be fired? - /* - this.currentLayerSelected.layerData.elementsList.pop(); - this.currentLayerSelected.layerData.elementsList.push(event.detail.data.newChild); - this.currentLayerSelected.layerData.animatedElement = event.detail.data.newChild; - */ - } - }, - drawTimeMarkers:{ value:function () { this.timeMarkerHolder = document.createElement("div"); @@ -1746,16 +1485,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - selectLayer:{ - value:function (layerIndex, userSelection) { - //console.log("=----> Please update this component to use TimelinePanel.selectLayers. See this message for syntax. <----="); - this.selectLayers([layerIndex]); - if (userSelection === true) { - this.updateStageSelection(); - } - } - }, - // Get the index where a layer should be inserted based on selection. // If nothing is selected, returns false. // Used by ElementController.addElement. @@ -1819,46 +1548,380 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - handleConfigButtonClick: { - value: function(event) { - event.stopPropagation(); - this.handleCheckableClick(event); - - } - }, - handleDocumentClick: { - value: function(event) { - if (this.tl_configbutton.classList.contains("checked")) { - this.tl_configbutton.classList.remove("checked"); - } - // - if (this.currentOpenSpanMenu !== false) { - this.currentOpenSpanMenu.hideEasingMenu(); - this.currentOpenSpanMenu = false; + + buildDragHelper: { + value: function() { + var myContainer = document.createElement("div"), + i = 0, + currentLayersSelectedLength = this.currentLayersSelected.length; + + for (i = 0; i < currentLayersSelectedLength; i++) { + var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true); + currentClone.classList.add("layerSelected"); + myContainer.appendChild(currentClone); } + + this._dragAndDropHelper = myContainer; + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "0px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + + this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); + this._dragAndDropHelper.classList.add("timeline-dnd-helper"); } }, - - handleAnimatedClick: { - value: function(event) { - if (typeof(this.application.ninja.currentDocument) === "undefined") { - return; - } - if (this.application.ninja.currentDocument == null) { - return; - } - this.handleCheckableClick(event); - this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); - var boolHide = false, - i = 0, - arrLayersLength = this.arrLayers.length; - if (event.currentTarget.classList.contains("checked")) { - // Hide layers with isAnimated = false; - boolHide = true; - } - - for (i = 0; i < arrLayersLength; i++) { - if (boolHide) { + + // Trigger the layer/track data binding + triggerLayerBinding : { + value: function(intIndex) { + this.arrLayers[intIndex].layerData.triggerBinding = !this.arrLayers[intIndex].layerData.triggerBinding; + } + }, + + getActiveLayerIndex: { + value: function() { + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerData.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, + /* === END: Controllers === */ + + /* === BEGIN: Event Handlers === */ + handleChange: { + value: function() { + if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { + this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer"); + } + } + }, + + handleDocumentChange:{ + value:function () { + + } + }, + + handlePlayButtonClick:{ + value:function(ev){ + this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; + + if (this.application.ninja.appModel.livePreview) { + this.play_button.classList.remove("playbutton"); + this.play_button.classList.add("pausebutton"); + + } else { + this.play_button.classList.remove("pausebutton"); + this.play_button.classList.add("playbutton"); + } + } + }, + + handleKeyframeShortcut:{ + value:function(action){ + var tempEv = {}; + tempEv.offsetX = this.playheadmarker.offsetLeft; + tempEv.actionType = action; + + if (this.currentLayersSelected === false) { + // we do not have a layer selected. We should growl at the user. For now, this will fail silently. + return; + } + + // 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; + + + 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); + } + } + } + arrTargetIndexesLength = arrTargetIndexes.length; + + // 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); + } + } + }, + + handleTrackContainerWidthChange:{ + value:function () { + this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; + this.master_track.style.width = (this.end_hottext.value * 80) + "px"; + this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; + if (this.timeMarkerHolder) { + this.time_markers.removeChild(this.timeMarkerHolder); + } + this.drawTimeMarkers(); + } + }, + + handleLayerScroll: { + value:function () { + this._areTracksScrolling = true; + this.needsDraw = true; + + } + }, + + startPlayheadTracking:{ + value:function () { + this.time_markers.onmousemove = this.updatePlayhead.bind(this); + } + }, + + stopPlayheadTracking:{ + value:function () { + this.time_markers.onmousemove = null; + } + }, + + updatePlayhead:{ + value:function (event) { + var clickedPosition = event.target.offsetLeft + event.offsetX; + this.playhead.style.left = (clickedPosition - 2) + "px"; + this.playheadmarker.style.left = clickedPosition + "px"; + var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * clickedPosition; + this.updateTimeText(currentMillisec); + } + }, + + // Event handler for changes in stage selection. + handleSelectionChange: { + value:function (event) { + this.updateLayerSelection(); + } + }, + + handleTimelineLeftPanelClick: { + value:function (event) { + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), + i = 0, + arrLayers = document.querySelectorAll(".container-layer"), + arrLayersLength = arrLayers.length, + targetIndex = 0, + isAlreadySelected = false, + indexAlreadySelected = -5, + indexLastClicked = 0, + ua = navigator.userAgent.toLowerCase(), + boolCommandControlKeyIsPressed = false; + + // Check to see if either the Command key (macs) or Control key (windows) is being pressed + if (ua.indexOf("mac") > -1) { + if (event.metaKey === true) { + boolCommandControlKeyIsPressed = true; + } + } else { + if (this._isControlPressed === true) { + boolCommandControlKeyIsPressed = true; + } + } + + + // Did the mousedown event originate within a layer? + if (ptrParent === false) { + // No it did not. Do nothing. + return; + } + + // Get the targetIndex, the index in the arrLayers of the + // layer that was just clicked on + for (i = 0; i < arrLayersLength; i++) { + if (arrLayers[i] == ptrParent) { + targetIndex = i; + } + } + + // Did we just click on a layer that's already selected? + if (this.currentLayersSelected !== false) { + for (i = 0; i < this.currentLayersSelected.length; i++) { + if (this.currentLayersSelected[i