From 04343eda8c2f870b0da55cfdc8003c99fe1cc4de Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:53:10 -0700 Subject: Remove trailing spaces --- js/panels/Timeline/Collapser.js | 94 +++--- js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 32 +- js/panels/Timeline/Keyframe.reel/Keyframe.js | 8 +- js/panels/Timeline/Layer.reel/Layer.js | 140 ++++----- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 2 +- js/panels/Timeline/Span.reel/Span.js | 36 +-- js/panels/Timeline/Style.reel/Style.js | 60 ++-- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 336 ++++++++++----------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 72 ++--- js/panels/Timeline/Track.reel/Track.js | 4 +- js/panels/Timeline/Tween.reel/Tween.js | 12 +- 11 files changed, 398 insertions(+), 398 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index d793ac88..e3d425ad 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -38,16 +38,16 @@ POSSIBILITY OF SUCH DAMAGE. * Can be manually set as well. * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed". * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false). - * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the + * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions. * Defaults to "collapsible-transition". - * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content - * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded + * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content + * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded * the transition will not work. Subsequent collapses (and expansions) will transition as expected. - * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to + * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to * false for collapsers that will only be operated remotely. * isToggling: Set this anually toggle the expand/collapse of the content. - * + * */ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, @@ -57,9 +57,9 @@ var Montage = require("montage/core/core").Montage, hasTemplate:{ value: false }, - + /* === BEGIN: Models === */ - + // contentHeight: Stores the height of the content just before collapse. _contentHeight: { value: 0 @@ -73,13 +73,13 @@ var Montage = require("montage/core/core").Montage, this._contentHeight = newVal; } }, - + // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. _isCollapsing: { value: false }, - - // isAnimated: boolean to apply transition to expand/collapse + + // isAnimated: boolean to apply transition to expand/collapse _isAnimated : { value: false }, @@ -92,7 +92,7 @@ var Montage = require("montage/core/core").Montage, this._isAnimated = newVal; } }, - + _bypassAnimation : { value: true }, @@ -109,7 +109,7 @@ var Montage = require("montage/core/core").Montage, _oldAnimated : { value: false }, - + // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. // Note that this CSS class must be defined in your style sheet with the desired transitions. _transitionClass : { @@ -123,7 +123,7 @@ var Montage = require("montage/core/core").Montage, this._transitionClass = newVal; } }, - + // isCollapsed: is the content actually collapsed at this moment _isCollapsed: { value: "" @@ -140,7 +140,7 @@ var Montage = require("montage/core/core").Montage, } } }, - + // collapsedClass: the class to apply to the clicker and content when the content is collapsed. _collapsedClass : { value: "collapsible-collapsed" @@ -153,14 +153,14 @@ var Montage = require("montage/core/core").Montage, this._collapsedClass = newVal; } }, - + // _origOverflowValue: Stores the original overflow value of the collapsible element. // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden. // But when the collapsible element is open, we will need overflow to return to its original value. _origOverflowValue : { value: false }, - + // isLabelClickable: Boolean for whether or not the label is clickable. If set to false, // the label click listener is never applied. For collapsibles that will only be operated remotely. // Defaults to true. @@ -217,7 +217,7 @@ var Montage = require("montage/core/core").Montage, set: function(newVal) { if (newVal !== this._isToggling) { this._isToggling = newVal; - + if (this.bypassAnimation === true) { this._oldAnimated = this.isAnimated; this.isAnimated = false; @@ -227,11 +227,11 @@ var Montage = require("montage/core/core").Montage, } } }, - + /* === END: Models === */ - + /* === BEGIN: Draw cycle === */ - + prepareForDraw: { value: function() { // Get the original value of the overflow property: @@ -239,7 +239,7 @@ var Montage = require("montage/core/core").Montage, if (this.isCollapsed === false) { this.myContent.style.height = "auto"; } - + // If the content area is supposed to start out collapsed: if (this.isCollapsed) { @@ -259,19 +259,19 @@ var Montage = require("montage/core/core").Montage, }, draw: { value: function() { - // Is the content area expanding/collapsing? - this.myContent.classList.remove(this.transitionClass); + // Is the content area expanding/collapsing? + this.myContent.classList.remove(this.transitionClass); if (this._isCollapsing) { - + if (this.isAnimated) { // Apply the transition class to the content. this.myContent.classList.add(this.transitionClass); - + // Add a handler for the end of the transition, so we can tidy things up after // the transition completes this.myContent.identifier = "myContent"; - this.myContent.addEventListener("webkitTransitionEnd", this, false); - + this.myContent.addEventListener("webkitTransitionEnd", this, false); + this.myContent.style.overflow = "hidden"; } @@ -280,24 +280,24 @@ var Montage = require("montage/core/core").Montage, // It's already collapsed so we are expanding this.myContent.style.height = this.contentHeight + "px"; this.isCollapsed = false; - + } else { // It's expanded so we are collapsing this.myContent.style.height = "0px"; this.isCollapsed = true; - + // Set the overflow to hidden if it isn't already if (this._origOverflowValue !== "hidden") { this.myContent.style.overflow = "hidden"; } } - + // Toggle the CSS class and deactivate the collapsing flag because we are now done. this.myContent.classList.toggle(this.collapsedClass); this.clicker.classList.toggle(this.collapsedClass); this._isCollapsing = false; - - // Special cases: If transition does not happen (in the case of a contentHeight of 0 + + // Special cases: If transition does not happen (in the case of a contentHeight of 0 // or isAnimated = false) we need to manually fire it here to do the cleanup. if ((this.contentHeight < 3) || (!this.isAnimated)) { this.handleMyContentWebkitTransitionEnd(); @@ -305,11 +305,11 @@ var Montage = require("montage/core/core").Montage, } } }, - + /* === END: Draw cycle === */ - + /* === BEGIN: Event handlers === */ - + // Handle a click on the label handleCollapserLabelClick: { value: function() { @@ -322,40 +322,40 @@ var Montage = require("montage/core/core").Montage, this.contentHeight = this.myContent.offsetHeight; // Set the current height of the content to a pixel height instead of "auto" // so that the transition can happen. - // (This doesn't actually change the appearance of the element, + // (This doesn't actually change the appearance of the element, // so it's okay to do here, outside the draw cycle.) this.myContent.style.height = this.contentHeight + "px"; - + this.isCollapsed = true; } else { this.isCollapsed = false; } - - // Set the collapsing flag so when the draw cycle begins + + // Set the collapsing flag so when the draw cycle begins // it will know to expand/collapse. this._isCollapsing = true; - + // Set the component to run its draw cycle. this.needsDraw = true; } }, - + // This handler is bound to the transitionEnd event. If transitions // are disabled, it is called manually. handleMyContentWebkitTransitionEnd: { value: function(event) { - + // Are we animating the transitions? if (this.isAnimated) { // Yes, transitions are animated. // Remove the event listener so it won't fire again. this.myContent.removeEventListener("webkitTransitionEnd", this, false); - + // remove the CSS class that supplies the transition this.myContent.classList.remove(this.transitionClass); } - + // Set the height of the content area to auto; this way it can expand/collapse as interactions // happen within. if (!this.myContent.classList.contains(this.collapsedClass)) { @@ -364,9 +364,9 @@ var Montage = require("montage/core/core").Montage, if (this._origOverflowValue !== "hidden") { this.myContent.style.overflow = this._origOverflowValue; } - + } - + if (this.bypassAnimation === true) { this.isAnimated = this._oldAnimated; } else { @@ -374,6 +374,6 @@ var Montage = require("montage/core/core").Montage, } } } - + /* === END: Event handlers === */ }); diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index 0c105d0a..84e1efb1 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -39,7 +39,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { }, /* Begin: Models */ - + // popup: the initialized component. _popup: { value: null @@ -52,7 +52,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this._popup = newVal } }, - + // callingComponent: pointer to the span that called for the menu _callingComponent: { value: null @@ -65,7 +65,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this._callingComponent = newVal; } }, - + // anchor: pointer to the anchoring element _anchor: { value: null @@ -78,8 +78,8 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this._anchor = newVal; } }, - - + + _top: { value: null }, @@ -102,7 +102,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this._left = newVal; } }, - + // currentChoice: The data attribute of the current choice _currentChoice: { value: "none" @@ -115,13 +115,13 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this._currentChoice = newVal; } }, - + _isShown: { value: false }, - + /* End: Models */ - + /* Begin: Draw Cycle */ willDraw: { value: function() { @@ -129,7 +129,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false); } }, - + draw: { value: function() { // Update the selection classes. @@ -148,7 +148,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { } }, /* End Draw Cycle */ - + /* Begin: Controllers */ show: { value: function() { @@ -158,7 +158,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this.popup.modal = false; this.popup.content = EasingMenu.create(); } - + // Show the popup this.popup.anchor = this.anchor; var position = {}; @@ -182,10 +182,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { easingSelected.classList.remove("easing-selected"); } event.target.classList.add("easing-selected"); - + // Set the easing in the span that called us this.callingComponent.easing = event.target.dataset.ninjaEase; - + // Hide the menu. this.popup.hide(); this._isShow = false; @@ -198,7 +198,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { } } } - + /* End: Controllers */ - + }); diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 1d79efc3..201b912c 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -70,7 +70,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); - + // Drag and drop event handlers this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); @@ -124,7 +124,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { ev.stopPropagation(); } }, - + handleMouseover: { value: function(event) { this.element.draggable = true; @@ -139,7 +139,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value: function(event) { //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Keyframe'); - + // Get my index in my track's tween array var i = 0, tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, @@ -158,5 +158,5 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.parentComponent.isDragging = false; } } - + }); diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 77588f47..48596703 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -69,9 +69,9 @@ var Layer = exports.Layer = Montage.create(Component, { value: null, serializable: true }, - + /* Begin: Models */ - + /* Main collapser model: the main collapser for the layer */ _mainCollapser : { value: false @@ -85,7 +85,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, serializable: true }, - + /* Style models: the array of styles, and the repetition that uses them */ _arrLayerStyles : { value: [] @@ -148,7 +148,7 @@ var Layer = exports.Layer = Montage.create(Component, { _layerName:{ value: "" }, - + layerName:{ serializable: true, get:function(){ @@ -190,7 +190,7 @@ var Layer = exports.Layer = Montage.create(Component, { _layerTag:{ value: "tag" }, - + layerTag:{ serializable: true, get:function(){ @@ -213,11 +213,11 @@ var Layer = exports.Layer = Montage.create(Component, { this._docUUID = newVal; } }, - + _stageElement: { value: null }, - + stageElement: { get: function() { return this._stageElement; @@ -227,8 +227,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.stageElement = newVal; } }, - - + + _elementsList : { value: [] }, @@ -241,7 +241,7 @@ var Layer = exports.Layer = Montage.create(Component, { this._elementsList = newVal; } }, - + /* Position and Size hottext values */ _dtextPositionX : { value:null @@ -259,7 +259,7 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - + _dtextPositionY : { value:null }, @@ -274,10 +274,10 @@ var Layer = exports.Layer = Montage.create(Component, { this._dtextPositionY = value; this.layerData.dtextPositionY = value; } - + } }, - + _dtextScaleX : { value:null }, @@ -292,10 +292,10 @@ var Layer = exports.Layer = Montage.create(Component, { this._dtextScaleX = value; this.layerData.dtextScaleX = value; } - + } }, - + _dtextScaleY : { value:null }, @@ -310,10 +310,10 @@ var Layer = exports.Layer = Montage.create(Component, { this._dtextScaleY = value; this.layerData.dtextScaleY = value; } - + } }, - + /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false @@ -338,10 +338,10 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.isSelected = value; this.needsDraw = true; } - + } }, - + /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with * TimelinePanel. */ @@ -358,8 +358,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.isActive = newVal; } }, - - + + _isAnimated:{ value: false }, @@ -428,7 +428,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - + _justAdded: { value: false }, @@ -448,7 +448,7 @@ var Layer = exports.Layer = Montage.create(Component, { this._dynamicLayerName = newVal; } }, - + // Are the various collapsers collapsed or not _isMainCollapsed : { value: true @@ -464,7 +464,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - + _isPositionCollapsed : { value: true }, @@ -478,7 +478,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.isPositionCollapsed = newVal; } }, - + _isStyleCollapsed : { value: true }, @@ -503,11 +503,11 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (typeof(this.layerData) !== "undefined") { this._bypassAnimation = newVal; - this.layerData.bypassAnimation = newVal; + this.layerData.bypassAnimation = newVal; } } }, - + // Is this the first draw? _isFirstDraw : { value: true @@ -534,16 +534,16 @@ var Layer = exports.Layer = Montage.create(Component, { value:function(boolNeedsDraw){ if (typeof(this._layerData) === "undefined") { return; - } - + } + if (typeof(this._layerData.layerName) === "undefined") { return; } - + if (typeof(boolNeedsDraw) === "undefined") { boolNeedsDraw = false; } - + this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.stageElement = this.layerData.stageElement @@ -572,7 +572,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.isHidden = this.layerData.isHidden; } }, - + /* Data binding point and outgoing binding trigger method */ _bindingPoint : { value : {} @@ -588,7 +588,7 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - + triggerOutgoingBinding : { value: function() { this.layerData.triggerBinding = !this.layerData.triggerBinding; @@ -599,10 +599,10 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Draw cycle */ prepareForDraw: { value: function() { - + // Initialize myself this.init(); - + // Make it editable! this._layerEditable = Hintable.create(); this._layerEditable.element = this.titleSelector; @@ -612,7 +612,7 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false); this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; - + // Collapser event handlers. this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); @@ -623,11 +623,11 @@ var Layer = exports.Layer = Montage.create(Component, { // Add event listeners to add and delete style buttons this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false); - + // Add mousedown listener to set isActive this.element.addEventListener("mousedown", this, false); this.element.addEventListener("click", this, false); - + // Drag and drop event handlers this.myLabel.addEventListener("mouseover", this.handleMouseover.bind(this), false); this.myLabel.addEventListener("mouseout", this.handleMouseout.bind(this), false); @@ -668,7 +668,7 @@ var Layer = exports.Layer = Montage.create(Component, { if (this.isSelected && !boolHasClass) { //console.log('Layer.draw, adding selection for layer ', this.layerName) this.element.classList.add("layerSelected"); - + } if (!this.isSelected && boolHasClass) { //console.log('Layer.draw, removing selection for layer ', this.layerName) @@ -683,7 +683,7 @@ var Layer = exports.Layer = Montage.create(Component, { } else { this.buttonDeleteStyle.classList.add("disabled"); } - + // Update layer name? if (this.layerName !== this.layer_label_text.innerText) { this.layer_label_text.innerText = this.layerName; @@ -696,7 +696,7 @@ var Layer = exports.Layer = Montage.create(Component, { if (this._isFirstDraw === true) { this._isFirstDraw = false; this.layerData._isFirstDraw = false; - + if (this.isMainCollapsed === false) { this.mainCollapser.myContent.style.height = "auto"; this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); @@ -712,14 +712,14 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass); this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass); } - + } } }, /* End: Draw cycle */ - + /* Begin: Controllers */ - + // Initialize a just-created layer init: { value: function() { @@ -732,10 +732,10 @@ var Layer = exports.Layer = Montage.create(Component, { }, addStyle : { value: function(styleProperty, existingRule) { - // Add a new style rule. It should be added above the currently selected rule, + // Add a new style rule. It should be added above the currently selected rule, // Or at the end, if no rule is selected. - var newLength = 0, + var newLength = 0, // mySelection = 0, // newStyle = LayerStyle.create(), newStyle = {}, @@ -745,14 +745,14 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.isStyleCollapsed = false; this.triggerOutgoingBinding(); */ - + newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; newEvent.styleIndex = this.styleCounter; newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed? - + newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; newStyle.editorProperty = ""; @@ -775,28 +775,28 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCounter += 1; // newEvent.styleSelection = mySelection; //defaultEventManager.dispatchEvent(newEvent); - + // Dispatch the event to the TimelineTrack component associated with this Layer. var myIndex = false, - i = 0, + i = 0, arrLayersLength = this.parentComponent.parentComponent.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) { myIndex = i; } } - + if (myIndex !== false) { arrTracks[myIndex].dispatchEvent(newEvent); - } + } } }, deleteStyle : { value: function() { - + // Only delete a style if we have one or more styles, and one of them is selected if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) { var newEvent = document.createEvent("CustomEvent"); @@ -812,20 +812,20 @@ var Layer = exports.Layer = Montage.create(Component, { // Dispatch the event to the TimelineTrack component associated with this Layer. var myIndex = this.application.ninja.timeline.getActiveLayerIndex(), arrTracks = document.querySelectorAll('[data-montage-id="track"]'); - + if (myIndex !== false) { arrTracks[myIndex].dispatchEvent(newEvent); } - + // Delete the style from the view this.arrLayerStyles.splice(this.selectedStyleIndex, 1); - + // Set selection to none this.selectedStyleIndex = false; - + // Disable the delete style button, because now nothing is selected this.buttonDeleteStyle.classList.add("disabled"); - } + } } }, selectStyle : { @@ -834,7 +834,7 @@ var Layer = exports.Layer = Montage.create(Component, { // use layerIndex = false to deselect all styles. var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; - + if (styleIndex === false) { if (arrLayerStylesLength === 0) { // No styles selected, so do nothing. @@ -858,9 +858,9 @@ var Layer = exports.Layer = Montage.create(Component, { this.selectedStyleIndex = styleIndex; this._storedStyleIndex = styleIndex; } - - - + + + /* // Next, update this.styleRepetition.selectedIndexes. if (styleIndex !== false) { @@ -873,17 +873,17 @@ var Layer = exports.Layer = Montage.create(Component, { } } */ - + } }, getActiveStyleIndex : { value: function() { // Searches through the styles and looks for one that has // set its isActive flag to true. - var i = 0, + var i = 0, returnVal = false, arrLayerStylesLength = this.arrLayerStyles.length; - + for (i = 0; i < arrLayerStylesLength; i++) { if (this.arrLayerStyles[i].isActive === true) { returnVal = i; @@ -895,11 +895,11 @@ var Layer = exports.Layer = Montage.create(Component, { } }, /* End: Controllers */ - + /* Begin: Event handlers */ handleLayerNameChange: { value: function(event) { - + if (this._layerEditable.value !== this.layerName) { this.layerName = this._layerEditable.value; this.application.ninja.currentDocument.model.needsSave = true; @@ -1053,7 +1053,7 @@ var Layer = exports.Layer = Montage.create(Component, { return false; } }, - + handleDrop : { value: function(event) { if (this.parentComponent.parentComponent.draggingType !== "layer") { @@ -1374,7 +1374,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* End: Event handlers */ - + /* Begin: Logging routines */ _boolDebug: { enumerable: false, diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 85ceeb4b..43ff34f9 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -238,7 +238,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - + getCurrentSelectedStyleIndex: { value: function(layerIndex) { var returnVal = false, diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 0b4ab8fc..7c959fad 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -51,7 +51,7 @@ var Span = exports.Span = Montage.create(Component, { this.needsDraw = true; } }, - + _isHighlighted: { value: false }, @@ -66,7 +66,7 @@ var Span = exports.Span = Montage.create(Component, { } } }, - + _areChoicesVisible: { value: false }, @@ -81,7 +81,7 @@ var Span = exports.Span = Montage.create(Component, { } } }, - + _easing: { value: "none" }, @@ -102,14 +102,14 @@ var Span = exports.Span = Montage.create(Component, { } } }, - + // BEGIN: draw cycle prepareForDraw: { value: function() { this.init(); } }, - + draw:{ value: function(){ this.element.style.width = this.spanWidth + "px"; @@ -132,14 +132,14 @@ var Span = exports.Span = Montage.create(Component, { this.container_easing.setAttribute("style", ""); this.easing_choice.setAttribute("style", ""); } - + // Highlight the span? if (this.isHighlighted === true) { this.element.classList.add("spanHighlight"); } else { this.element.classList.remove("spanHighlight"); } - + /* // Hide or show the choices menu? if (this.areChoicesVisible === true) { @@ -148,12 +148,12 @@ var Span = exports.Span = Montage.create(Component, { this.easing_choices.style.display = "none"; } */ - + // Change easing? if (this.easing_choice.innerText !== this.easing) { this.easing_choice.innerText = this.easing; } - + } }, @@ -165,7 +165,7 @@ var Span = exports.Span = Montage.create(Component, { } }, - + highlightSpan:{ value: function(){ // Class add/remove should only be done in draw cycle. @@ -173,7 +173,7 @@ var Span = exports.Span = Montage.create(Component, { this.isHighlighted = true; } }, - + handleEasingChoiceClick: { value: function(event) { event.stopPropagation(); @@ -191,7 +191,7 @@ var Span = exports.Span = Montage.create(Component, { do { objReturn.left += obj.offsetLeft; objReturn.top += obj.offsetTop; - + } while (obj = obj.offsetParent); } return objReturn; @@ -209,21 +209,21 @@ var Span = exports.Span = Montage.create(Component, { // Remove the pointer to ourselves //this.application.ninja.timeline.currentOpenSpanMenu = false; - + // Un-highlight the old choice and highlight the new choice this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); event.target.classList.add("easing-selected"); - - // Set the easing + + // Set the easing this.easing = event.target.dataset.ninjaEase; this.parentComponent.easing = this.easing; this.parentComponent.tweenData.easing = this.easing; - + // Unbind the event handler this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); - + // Hide the menu. - this.hideEasingMenu(); + this.hideEasingMenu(); } }, hideEasingMenu: { diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index db4593a2..82c2d8ab 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -32,11 +32,11 @@ POSSIBILITY OF SUCH DAMAGE. * Style component: Edits and manages a single style rule for a Layer in the Timeline. * Public Properties: * editorProperty: The CSS property for the style. - * editorValue: The value for the editorProperty. + * editorValue: The value for the editorProperty. * whichView: Which view to show, the hintable view (where a new property can be typed in) * or the propval view (where the property's value can be set with the tweener). * Valid values are "hintable" and "propval", defaults to "hintable". - * + * */ var Montage = require("montage/core/core").Montage; @@ -89,7 +89,7 @@ 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. */ @@ -104,7 +104,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._isActive = newVal; } }, - + // Property for this editor _editorProperty: { value: "" @@ -119,7 +119,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - + // Value for the property for this editor. _editorValue: { value: "" @@ -134,8 +134,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - - // The tweener used to change the value for this property. + + // The tweener used to change the value for this property. _ruleTweener: { value: false }, @@ -149,7 +149,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - + // The hintable we use to change the Property _myHintable: { value: "" @@ -174,12 +174,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._myHintableValue = newVal; } }, - + // swapViews: Is a view swap happening? _swapViews : { value: true }, - + // whichView: which view should we show: hintable or propval _whichView : { value: "hintable" @@ -201,7 +201,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, - + // styleID: the id for this style; // Used to publish events _styleID : { @@ -259,9 +259,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.isActive = true; } }, - + /* === END: Models === */ - + /* === BEGIN : Draw cycle === */ prepareForDraw: { value: function() { @@ -270,7 +270,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, draw: { value: function() { - + if (this._swapViews === true) { // Show the right thing this._showView(); @@ -293,16 +293,16 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, /* === END: Draw cycle === */ - + /* === BEGIN: controllers === */ - + // handleStylePropertyDblClick: What happens when the user double-clicks on the style property handleStylePropertyDblclick: { value: function(event) { this.whichView = "hintable"; } }, - + // handleHintableStop: What happens when the hintable issues its stop event handleHintableStop: { value: function(event) { @@ -312,14 +312,14 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.whichView = "propval"; } }, - + // Init: Initialize the component with some useful selectors and other defaults. init : { value: function() { var arrHints = [], i = 0; - + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) @@ -328,15 +328,15 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // Set useful information for the hintable this.myHintable.editingClass = "editable2"; this.myHintable.hints = arrHints; - + // Bind a handler to the Hintable's change event this.myHintable.identifier = "hintable"; this.myHintable.addEventListener("stop", this, false); - + // Add the click handler to the styleProperty: When the user double-clicks on it, we want to start the editor. this.styleProperty.identifier = "styleProperty"; this.styleProperty.addEventListener("dblclick", this, false); - + // Get some selectors that we'll be using this.editorHottextContainer = this.element.querySelector(".editor-hottext"); this.editorInputContainer = this.element.querySelector(".editor-input"); @@ -344,12 +344,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.containerHintable = this.element.querySelector(".row-hintable"); this.containerPropvals = this.element.querySelector(".container-propvals"); this.valueEditorInput = this.element.querySelector(".editor-input input"); - - // mousedown listener to handle + + // mousedown listener to handle this.element.addEventListener("mousedown", this, false); } }, - + // showView: Show the appropriate view _showView : { value: function() { @@ -364,7 +364,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, - + // showTweener: show the appropriate tweener _showTweener : { value: function() { @@ -378,7 +378,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } else { this.ruleTweener = true; } - + tweenable.tweener = "input"; for (i = 0; i < this._myTweenables.length; i++) { @@ -441,9 +441,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, - + /* === END: Controllers === */ - + _myTweenables: { value: [ { @@ -786,7 +786,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - + /* Begin: Logging routines */ _boolDebug: { enumerable: false, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index da6f8595..c2dcd5ff 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -142,11 +142,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return; } this._currentDocument = value; - + var boolDoc = false, boolView = false; - - // Should we enable the panel? + + // 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") { @@ -155,7 +155,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } if (typeof(this._currentDocument) !== "undefined") { - // We have a document, or at least we have initialized the panel. + // We have a document, or at least we have initialized the panel. boolDoc = true; } @@ -169,10 +169,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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); @@ -188,7 +188,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - + _currentSelectedContainer: { value: null }, @@ -204,15 +204,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return; } this.application.ninja.currentDocument.setLevel = true; - + if(this._currentDocument.currentView === "design") { 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(); } @@ -262,15 +262,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._layerRepetition = newVal; } }, - + _areTracksScrolling: { value: false }, - + _areTracksCollapsing: { value: false }, - + _currentOpenSpanMenu: { value: false }, @@ -342,7 +342,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.cacheTimeline(); } }, - + _easingMenu: { value: null }, @@ -355,12 +355,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._easingMenu = newVal; } }, - + // The index of the last layer that was clicked on // (used for shift-click multiselect) _lastLayerClicked : { value: 0 - }, + }, lastLayerClicked: { serializable: true, get: function() { @@ -476,7 +476,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { timeMarkerHolder:{ value:null }, - + // Drag and Drop properties _dragAndDropHelper : { value: false @@ -501,7 +501,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._draggingType = newVal; } }, - + _elementsDragged: { value: [] }, @@ -535,33 +535,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { set: function(newVal) { if (newVal !== this._dropLayerID) { this._dropLayerID = newVal; - + var dropLayerIndex = this.getLayerIndexByID(newVal), - i = 0, + 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]]; @@ -570,10 +570,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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; @@ -598,7 +598,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _scrollTracks: { value: false }, - + // Keyframe drag and drop properties _draggingTrackId: { value: false @@ -611,8 +611,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._draggingTrackId = newVal; } }, - - + + useAbsolutePosition:{ value:true }, @@ -627,25 +627,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: false }, - // is the shift key currently being pressed (used for multiselect) + // is the shift key currently being pressed (used for multiselect) _isShiftPressed: { value: false }, /* === END: Models === */ - + /* === BEGIN: Draw cycle === */ prepareForDraw:{ value:function () { this.initTimeline(); } }, - + 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); @@ -681,7 +681,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._deleteHelper = false; } } - + } } else if (this.draggingType === "keyframe") { @@ -691,7 +691,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._scrollTracks = false; } } - + // Do we need to scroll the layers? if (this._areTracksScrolling) { this._areTracksScrolling = false; @@ -699,7 +699,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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); @@ -707,7 +707,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - + didDraw: { value: function() { if (this._needsDOMManipulation === true) { @@ -732,7 +732,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { createLayerTemplate:{ value:function () { var returnObj = {}; - + returnObj.layerData = {}; returnObj.layerData.layerName = null; returnObj.layerData.layerID = null; @@ -760,11 +760,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.triggerBinding = false; returnObj.parentElementUUID = null; returnObj.parentElement = null; - + return returnObj; } }, - + // cache Timeline data in currentDocument. cacheTimeline: { value: function() { @@ -775,10 +775,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this._boolCacheArrays) { // ... but only if we're supposed to. if(this.currentDocument) { - var i = 0, + 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; @@ -816,49 +816,49 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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 + // 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 = {}, + newStyle = {}, styleID = "1@0"; // format: layerID + "@" + style counter - - /* Example new style + + /* 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.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 + // 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; - + } }, @@ -894,18 +894,18 @@ 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 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); 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); this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); @@ -913,12 +913,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); - + // Bind the handlers for the config menu this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); 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); @@ -935,9 +935,9 @@ 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 // (Will be switched on later, if appropriate). this.enablePanel(false); @@ -964,12 +964,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // 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.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 @@ -981,17 +981,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } } - + // Draw the repetition. this.arrLayers = this.temparrLayers; this.currentLayerNumber = this.arrLayers.length; this._ignoreNextContainerChange = true; 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, @@ -1007,7 +1007,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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++) { @@ -1015,7 +1015,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.restoreLayer(parentNode.children[myIndex]); } } - + // Draw the repetition. this.arrLayers = this.temparrLayers; this.currentLayerNumber = storedCurrentLayerNumber; @@ -1025,16 +1025,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // console.log('TimelinePanel.initTimelineForDocument: else fallback'); // we do have information stored. Use it. - var i = 0, + var i = 0, 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 + + // 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; @@ -1051,7 +1051,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } 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. @@ -1062,7 +1062,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Ok, done reading from the cache. this._boolCacheArrays = true; - + // Reset master duration this.resetMasterDuration(); } @@ -1135,18 +1135,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // 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.