From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- js/panels/Timeline/Layer.reel/Layer.html | 498 +++++------ js/panels/Timeline/Layer.reel/Layer.js | 1192 ++++++++++++------------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 192 ++-- 3 files changed, 941 insertions(+), 941 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 3c471952..83b73e76 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -29,24 +29,24 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. --> - - - - - - + + -
-
- - Label - +
+
+ + Label +
-
-
-
- Position and Size - -
-
-
-
-
Left
-
-
-
-
Top
-
-
+
+
+
+ Position and Size + +
+
+
+
+
Left
+
+
+
+
Top
+
+
Width
@@ -314,21 +314,21 @@ POSSIBILITY OF SUCH DAMAGE.
Height
-
-
-
- Style - -
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Style + +
+
+
+
+
+
+
+
+
+
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 3be766c4..77588f47 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -72,47 +72,47 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Models */ - /* Main collapser model: the main collapser for the layer */ + /* Main collapser model: the main collapser for the layer */ _mainCollapser : { - value: false + value: false }, mainCollapser: { - get: function() { - return this._mainCollapser; - }, - set: function(newVal) { - this._mainCollapser = newVal; - }, + get: function() { + return this._mainCollapser; + }, + set: function(newVal) { + this._mainCollapser = newVal; + }, serializable: true }, /* Style models: the array of styles, and the repetition that uses them */ _arrLayerStyles : { - value: [] + value: [] }, arrLayerStyles : { - serializable: true, - get: function() { - return this._arrLayerStyles; - }, - set: function(newVal) { - this._arrLayerStyles = newVal; - } + serializable: true, + get: function() { + return this._arrLayerStyles; + }, + set: function(newVal) { + this._arrLayerStyles = newVal; + } }, _styleRepetition : { - value: false + value: false }, styleRepetition : { serializable: true, - get: function() { - return this._styleRepetition; - }, - set: function(newVal) { - this._styleRepetition = newVal; - } + get: function() { + return this._styleRepetition; + }, + set: function(newVal) { + this._styleRepetition = newVal; + } }, _styleCounter : { - value: 0 + value: 0 }, styleCounter:{ serializable:true, @@ -124,21 +124,21 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _selectedStyleIndex: { - value: false + value: false }, selectedStyleIndex: { - get: function() { - return this._selectedStyleIndex; - }, - set: function(newVal) { - if (typeof(newVal) === "undefined") { - return; - } - if (newVal !== this._selectedStyleIndex) { - this._selectedStyleIndex = newVal; - this.layerData.selectedStyleIndex = newVal; - } - } + get: function() { + return this._selectedStyleIndex; + }, + set: function(newVal) { + if (typeof(newVal) === "undefined") { + return; + } + if (newVal !== this._selectedStyleIndex) { + this._selectedStyleIndex = newVal; + this.layerData.selectedStyleIndex = newVal; + } + } }, _storedStyleIndex : { value: false @@ -146,39 +146,39 @@ var Layer = exports.Layer = Montage.create(Component, { /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ - value: "" + value: "" }, layerName:{ - serializable: true, + serializable: true, get:function(){ return this._layerName; }, set:function(newVal){ - if (this._layerEditable.value !== newVal) { - this._layerEditable.value = newVal; - } - if (this._layerName !== newVal) { - this._layerName = newVal; - } - if (this.layerData.layerName !== newVal) { - this.layerData.layerName = newVal; - } - - if (typeof(this.dynamicLayerName) !== "undefined") { - if (this.dynamicLayerName.value !== newVal) { - this.dynamicLayerName.value = newVal; - } - } - this.needsDraw = true; + if (this._layerEditable.value !== newVal) { + this._layerEditable.value = newVal; + } + if (this._layerName !== newVal) { + this._layerName = newVal; + } + if (this.layerData.layerName !== newVal) { + this.layerData.layerName = newVal; + } + + if (typeof(this.dynamicLayerName) !== "undefined") { + if (this.dynamicLayerName.value !== newVal) { + this.dynamicLayerName.value = newVal; + } + } + this.needsDraw = true; } }, _layerID:{ - value: "Default Layer ID" + value: "Default Layer ID" }, layerID:{ - serializable: true, + serializable: true, get:function(){ return this._layerID; }, @@ -188,58 +188,58 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _layerTag:{ - value: "tag" + value: "tag" }, layerTag:{ - serializable: true, + serializable: true, get:function(){ return this._layerTag; }, set:function(newVal){ - this._layerTag = newVal; - this.layerData.layerTag = newVal; + this._layerTag = newVal; + this.layerData.layerTag = newVal; } }, _docUUID : { - value: null + value: null }, docUUID : { - serializable: true, - get: function() { - return this._docUUID; - }, - set: function(newVal) { - this._docUUID = newVal; - } + serializable: true, + get: function() { + return this._docUUID; + }, + set: function(newVal) { + this._docUUID = newVal; + } }, _stageElement: { - value: null + value: null }, stageElement: { - get: function() { - return this._stageElement; - }, - set: function(newVal) { - this._stageElement = newVal; - this.layerData.stageElement = newVal; - } + get: function() { + return this._stageElement; + }, + set: function(newVal) { + this._stageElement = newVal; + this.layerData.stageElement = newVal; + } }, _elementsList : { - value: [] + value: [] }, elementsList : { - serializable: true, - get: function() { - return this._elementsList; - }, - set: function(newVal) { - this._elementsList = newVal; - } + serializable: true, + get: function() { + return this._elementsList; + }, + set: function(newVal) { + this._elementsList = newVal; + } }, /* Position and Size hottext values */ @@ -248,15 +248,15 @@ var Layer = exports.Layer = Montage.create(Component, { }, dtextPositionX:{ - serializable: true, + serializable: true, get:function(){ return this._dtextPositionX; }, set:function(value){ - if (this._dtextPositionX !== value) { - this._dtextPositionX = value; - this.layerData.dtextPositionX = value; - } + if (this._dtextPositionX !== value) { + this._dtextPositionX = value; + this.layerData.dtextPositionX = value; + } } }, @@ -265,15 +265,15 @@ var Layer = exports.Layer = Montage.create(Component, { }, dtextPositionY:{ - serializable: true, + serializable: true, get:function(){ return this._dtextPositionY; }, set:function(value){ - if (this._dtextPositionY !== value) { - this._dtextPositionY = value; - this.layerData.dtextPositionY = value; - } + if (this._dtextPositionY !== value) { + this._dtextPositionY = value; + this.layerData.dtextPositionY = value; + } } }, @@ -283,15 +283,15 @@ var Layer = exports.Layer = Montage.create(Component, { }, dtextScaleX:{ - serializable: true, + serializable: true, get:function(){ return this._dtextScaleX; }, set:function(value){ - if (this._dtextScaleX !== value) { - this._dtextScaleX = value; - this.layerData.dtextScaleX = value; - } + if (this._dtextScaleX !== value) { + this._dtextScaleX = value; + this.layerData.dtextScaleX = value; + } } }, @@ -301,15 +301,15 @@ var Layer = exports.Layer = Montage.create(Component, { }, dtextScaleY:{ - serializable: true, + serializable: true, get:function(){ return this._dtextScaleY; }, set:function(value){ - if (this._dtextScaleY !== value) { - this._dtextScaleY = value; - this.layerData.dtextScaleY = value; - } + if (this._dtextScaleY !== value) { + this._dtextScaleY = value; + this.layerData.dtextScaleY = value; + } } }, @@ -324,20 +324,20 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isSelected; }, set:function(value){ - if (value !== this._isSelected) { - // Only concerned about different values - if (value === false) { - // If changing from true to false, we need to deselect any associated styles - this.selectStyle(false); - } else { - if (this._storedStyleIndex !== false) { - this.selectStyle(this._storedStyleIndex); - } - } - this._isSelected = value; - this.layerData.isSelected = value; - this.needsDraw = true; - } + if (value !== this._isSelected) { + // Only concerned about different values + if (value === false) { + // If changing from true to false, we need to deselect any associated styles + this.selectStyle(false); + } else { + if (this._storedStyleIndex !== false) { + this.selectStyle(this._storedStyleIndex); + } + } + this._isSelected = value; + this.layerData.isSelected = value; + this.needsDraw = true; + } } }, @@ -346,17 +346,17 @@ var Layer = exports.Layer = Montage.create(Component, { * TimelinePanel. */ _isActive: { - value: false + value: false }, isActive: { serializable:true, - get: function() { - return this._isActive; - }, - set: function(newVal) { - this._isActive = newVal; - this.layerData.isActive = newVal; - } + get: function() { + return this._isActive; + }, + set: function(newVal) { + this._isActive = newVal; + this.layerData.isActive = newVal; + } }, @@ -382,15 +382,15 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isVisible; }, set:function(value){ - if (this._isVisible !== value) { - this._isVisible = value; - if (value === true) { - this.element.classList.remove("layer-hidden"); - } else { - this.element.classList.add("layer-hidden"); - } - } - this.layerData.isVisible = value; + if (this._isVisible !== value) { + this._isVisible = value; + if (value === true) { + this.element.classList.remove("layer-hidden"); + } else { + this.element.classList.add("layer-hidden"); + } + } + this.layerData.isVisible = value; } }, @@ -430,10 +430,10 @@ var Layer = exports.Layer = Montage.create(Component, { _justAdded: { - value: false + value: false }, _layerEditable : { - value: false + value: false }, _dynamicLayerName:{ @@ -451,66 +451,66 @@ var Layer = exports.Layer = Montage.create(Component, { // Are the various collapsers collapsed or not _isMainCollapsed : { - value: true + value: true }, isMainCollapsed : { - serializable: true, - get: function() { - return this._isMainCollapsed; - }, - set: function(newVal) { - this._isMainCollapsed = newVal; - this.layerData.isMainCollapsed = newVal; + serializable: true, + get: function() { + return this._isMainCollapsed; + }, + set: function(newVal) { + this._isMainCollapsed = newVal; + this.layerData.isMainCollapsed = newVal; - } + } }, _isPositionCollapsed : { - value: true + value: true }, isPositionCollapsed : { - serializable: true, - get: function() { - return this._isPositionCollapsed; - }, - set: function(newVal) { - this._isPositionCollapsed = newVal; - this.layerData.isPositionCollapsed = newVal; - } + serializable: true, + get: function() { + return this._isPositionCollapsed; + }, + set: function(newVal) { + this._isPositionCollapsed = newVal; + this.layerData.isPositionCollapsed = newVal; + } }, _isStyleCollapsed : { - value: true + value: true }, isStyleCollapsed : { - serializable: true, - get: function() { - return this._isStyleCollapsed; - }, - set: function(newVal) { - this._isStyleCollapsed = newVal; - this.layerData.isStyleCollapsed = newVal; - } + serializable: true, + get: function() { + return this._isStyleCollapsed; + }, + set: function(newVal) { + this._isStyleCollapsed = newVal; + this.layerData.isStyleCollapsed = newVal; + } }, _bypassAnimation : { - value: false + value: false }, bypassAnimation : { - serializable: true, - get: function() { - return this._bypassAnimation; - }, - set: function(newVal) { - if (typeof(this.layerData) !== "undefined") { - this._bypassAnimation = newVal; - this.layerData.bypassAnimation = newVal; - } - } + serializable: true, + get: function() { + return this._bypassAnimation; + }, + set: function(newVal) { + if (typeof(this.layerData) !== "undefined") { + this._bypassAnimation = newVal; + this.layerData.bypassAnimation = newVal; + } + } }, // Is this the first draw? _isFirstDraw : { - value: true + value: true }, _layerData:{ @@ -518,7 +518,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, layerData:{ - serializable: true, + serializable: true, get:function(){ return this._layerData; }, @@ -532,18 +532,18 @@ var Layer = exports.Layer = Montage.create(Component, { setData:{ value:function(boolNeedsDraw){ - if (typeof(this._layerData) === "undefined") { - return; - } - - if (typeof(this._layerData.layerName) === "undefined") { - return; - } - - if (typeof(boolNeedsDraw) === "undefined") { - boolNeedsDraw = false; - } - + 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 @@ -575,45 +575,45 @@ var Layer = exports.Layer = Montage.create(Component, { /* Data binding point and outgoing binding trigger method */ _bindingPoint : { - value : {} + value : {} }, bindingPoint: { - get: function() { - return this._bindingPoint; - }, - set: function(newVal) { - if (newVal !== this._bindingPoint) { - this._bindingPoint = newVal; - this.setData(true); - } - } + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(true); + } + } }, triggerOutgoingBinding : { - value: function() { + value: function() { this.layerData.triggerBinding = !this.layerData.triggerBinding; - } + } }, - /* END: Models */ + /* END: Models */ - /* Begin: Draw cycle */ + /* Begin: Draw cycle */ prepareForDraw: { value: function() { - - // Initialize myself - this.init(); - - // Make it editable! - this._layerEditable = Hintable.create(); - this._layerEditable.element = this.titleSelector; - this.titleSelector.identifier = "selectorEditable"; - this.titleSelector.addEventListener("click", this, false); - this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); - this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false); - this._layerEditable.editingClass = "editable2"; - this._layerEditable.value = this.layerName; - - // Collapser event handlers. + + // Initialize myself + this.init(); + + // Make it editable! + this._layerEditable = Hintable.create(); + this._layerEditable.element = this.titleSelector; + this.titleSelector.identifier = "selectorEditable"; + this.titleSelector.addEventListener("click", this, false); + this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); + 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); this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); @@ -628,13 +628,13 @@ var Layer = exports.Layer = Montage.create(Component, { 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); - this.element.addEventListener("dragover", this.handleDragover.bind(this), false); - this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); - this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); - this.element.addEventListener("drop", this.handleDrop.bind(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); + this.element.addEventListener("dragover", this.handleDragover.bind(this), false); + this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); + this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); + this.element.addEventListener("drop", this.handleDrop.bind(this), false); this.eventManager.addEventListener("elementChange",this,false); @@ -663,98 +663,98 @@ var Layer = exports.Layer = Montage.create(Component, { }, draw: { - value: function() { - var boolHasClass = this.element.classList.contains("layerSelected"); + value: function() { + var boolHasClass = this.element.classList.contains("layerSelected"); if (this.isSelected && !boolHasClass) { - //console.log('Layer.draw, adding selection for layer ', this.layerName) - this.element.classList.add("layerSelected"); - + //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) - this.element.classList.remove("layerSelected"); + if (!this.isSelected && boolHasClass) { + //console.log('Layer.draw, removing selection for layer ', this.layerName) + this.element.classList.remove("layerSelected"); } // Enable or disable the delete style button as appropriate if (this.isSelected) { - if (this.selectedStyleIndex !== false) { - this.selectStyle(this.selectedStyleIndex); - this.buttonDeleteStyle.classList.remove("disabled"); - } + if (this.selectedStyleIndex !== false) { + this.selectStyle(this.selectedStyleIndex); + this.buttonDeleteStyle.classList.remove("disabled"); + } } else { - this.buttonDeleteStyle.classList.add("disabled"); + this.buttonDeleteStyle.classList.add("disabled"); } // Update layer name? if (this.layerName !== this.layer_label_text.innerText) { - this.layer_label_text.innerText = this.layerName; + this.layer_label_text.innerText = this.layerName; } - } + } }, didDraw: { - value: function() { - // console.log("Layer.didDraw: Layer "+ this.layerID ); - 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); - this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); - } - if (this.isPositionCollapsed === false) { - this.positionCollapser.myContent.style.height = "auto"; - this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); - this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); - } - if (this.isStyleCollapsed === false) { - this.styleCollapser.myContent.style.height = "auto"; - 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() { - // Get some selectors. - this.label = this.element.querySelector(".label-layer"); - this.titleSelector = this.label.querySelector(".collapsible-label"); - this.buttonAddStyle = this.element.querySelector(".button-add"); - this.buttonDeleteStyle = this.element.querySelector(".button-delete"); - } - }, - addStyle : { - value: function(styleProperty, existingRule) { - // 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, - // mySelection = 0, - // newStyle = LayerStyle.create(), - newStyle = {}, - newEvent = document.createEvent("CustomEvent"); - /* - this.isStyleCollapsed = false; - this.layerData.isStyleCollapsed = false; - this.triggerOutgoingBinding(); - */ - - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "styles"; - newEvent.layerEventType = "newStyle"; - newEvent.layerID = this.layerID; + value: function() { + // console.log("Layer.didDraw: Layer "+ this.layerID ); + 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); + this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); + } + if (this.isPositionCollapsed === false) { + this.positionCollapser.myContent.style.height = "auto"; + this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); + this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this.styleCollapser.myContent.style.height = "auto"; + 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() { + // Get some selectors. + this.label = this.element.querySelector(".label-layer"); + this.titleSelector = this.label.querySelector(".collapsible-label"); + this.buttonAddStyle = this.element.querySelector(".button-add"); + this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + } + }, + addStyle : { + value: function(styleProperty, existingRule) { + // 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, + // mySelection = 0, + // newStyle = LayerStyle.create(), + newStyle = {}, + newEvent = document.createEvent("CustomEvent"); + /* + this.isStyleCollapsed = false; + 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"; + newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed? + + newStyle.styleID = newEvent.styleID; + newStyle.whichView = "hintable"; newStyle.editorProperty = ""; if(styleProperty){ newStyle.editorProperty = styleProperty; @@ -764,77 +764,77 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.existingRule = existingRule; } } - newStyle.editorValue = ""; - newStyle.ruleTweener = false; - newStyle.isSelected = false; + newStyle.editorValue = ""; + newStyle.ruleTweener = false; + newStyle.isSelected = false; newStyle.colorelement = ""; this.arrLayerStyles.push(newStyle); this.selectStyle(this.arrLayerStyles.length -1); - // Set up the event info and dispatch the event + // Set up the event info and dispatch the event 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, - 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"); - - // Set up the event info and dispatch the event - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "styles"; - newEvent.layerEventType = "deleteStyle"; - newEvent.layerID = this.layerID; - newEvent.styleID = this.selectedStyleIndex; - newEvent.selectedStyleIndex = this.selectedStyleIndex; - - // 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 : { - value: function(styleIndex) { - // Select a style based on its index. - // use layerIndex = false to deselect all styles. - var i = 0, - arrLayerStylesLength = this.arrLayerStyles.length; - + // newEvent.styleSelection = mySelection; + //defaultEventManager.dispatchEvent(newEvent); + + // Dispatch the event to the TimelineTrack component associated with this Layer. + var myIndex = false, + 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"); + + // Set up the event info and dispatch the event + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "styles"; + newEvent.layerEventType = "deleteStyle"; + newEvent.layerID = this.layerID; + newEvent.styleID = this.selectedStyleIndex; + newEvent.selectedStyleIndex = this.selectedStyleIndex; + + // 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 : { + value: function(styleIndex) { + // Select a style based on its index. + // 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. @@ -861,212 +861,212 @@ var Layer = exports.Layer = Montage.create(Component, { - /* - // Next, update this.styleRepetition.selectedIndexes. - if (styleIndex !== false) { - //this.styleRepetition.selectedIndexes = [styleIndex]; - this.buttonDeleteStyle.classList.remove("disabled"); - } else { - //this.styleRepetition.selectedIndexes = null; - if (typeof(this.buttonDeleteStyle) !== "undefined") { - this.buttonDeleteStyle.classList.add("disabled"); - } - } - */ - - } - }, + /* + // Next, update this.styleRepetition.selectedIndexes. + if (styleIndex !== false) { + //this.styleRepetition.selectedIndexes = [styleIndex]; + this.buttonDeleteStyle.classList.remove("disabled"); + } else { + //this.styleRepetition.selectedIndexes = null; + if (typeof(this.buttonDeleteStyle) !== "undefined") { + this.buttonDeleteStyle.classList.add("disabled"); + } + } + */ + + } + }, getActiveStyleIndex : { - value: function() { - // Searches through the styles and looks for one that has - // set its isActive flag to true. - var i = 0, - returnVal = false, - arrLayerStylesLength = this.arrLayerStyles.length; - - for (i = 0; i < arrLayerStylesLength; i++) { - if (this.arrLayerStyles[i].isActive === true) { - returnVal = i; - this.arrLayerStyles[i].isActive = false; - } - } - //console.log("Layer.getActiveStyleIndex, returnVal ", returnVal) - return returnVal; - } - }, - /* End: Controllers */ + value: function() { + // Searches through the styles and looks for one that has + // set its isActive flag to true. + var i = 0, + returnVal = false, + arrLayerStylesLength = this.arrLayerStyles.length; + + for (i = 0; i < arrLayerStylesLength; i++) { + if (this.arrLayerStyles[i].isActive === true) { + returnVal = i; + this.arrLayerStyles[i].isActive = false; + } + } + //console.log("Layer.getActiveStyleIndex, returnVal ", returnVal) + return returnVal; + } + }, + /* 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; - this.layerData.stageElement.setAttribute("id",this._layerEditable.value); - } - } - }, - handleAddStyleClick: { - value: function(event) { - - this.isStyleCollapsed = false; - this.layerData.isStyleCollapsed = false; - this.triggerOutgoingBinding(); - - this.addStyle(); - - } - }, - handleDeleteStyleClick: { - value: function(event) { - if (event.target.classList.contains("disabled")) { - return; - } - this.deleteStyle(); - } - }, - handleSelectorEditableBlur : { - value: function(event) { - this.titleSelector.scrollLeft = 0; - this.handleSelectorEditableChange(event); - } - }, - handleSelectorEditableChange: { - value: function(event) { - var newVal = this._layerEditable.enteredValue; - if (this._layerEditable.enteredValue.length === 0) { - newVal = this._layerEditable._preEditValue; - } - this.layerName = newVal; - if (newVal !== this.layerName) { - this.layerName = newVal; - this.application.ninja.currentDocument.model.needsSave = true; - this.layerData.stageElement.setAttribute("id", newVal); - } - } - }, - handleMousedown: { - value: function(event) { - if (event.target.classList.contains("button-delete")) { - return; - } - this.layerData.isActive = true; - var ptrParent = nj.queryParentSelector(event.target, ".content-style"), - activeStyleIndex = this.getActiveStyleIndex(); - this.selectedStyleIndex = activeStyleIndex; - if (ptrParent !== false) { - this.selectStyle(this.selectedStyleIndex); - } - } - }, - handleLayerClick : { - value: function(event) { - var ptrParent = nj.queryParentSelector(event.target, ".content-style"); - if (ptrParent !== false) { - var myIndex = this.getActiveStyleIndex(); - this.selectStyle(myIndex); - } - } - }, - handleMainCollapserClick : { - value: function(event) { - this.mainCollapser.bypassAnimation = false; - this.bypassAnimation = false; - this.layerData.bypassAnimation = false; - if (this.isMainCollapsed) { - this.isMainCollapsed = false; - } else { - this.isMainCollapsed = true; - this.application.ninja.timeline.synchScrollbars(43); - } - this.triggerOutgoingBinding(); - } - }, - handlePositionCollapserClick : { - value: function(event) { - var myHeight = this.positionCollapser.element.offsetHeight; - this.positionCollapser.bypassAnimation = false; - this.bypassAnimation = false; - this.layerData.bypassAnimation = false; - if (this.isPositionCollapsed) { - this.isPositionCollapsed = false; - } else { - this.isPositionCollapsed = true; - this.application.ninja.timeline.synchScrollbars(myHeight); - } - this.triggerOutgoingBinding(); - } - }, - handleStyleCollapserClick : { - value: function(event) { - var myHeight = this.styleCollapser.element.offsetHeight; - this.styleCollapser.bypassAnimation = false; - this.bypassAnimation = false; - this.layerData.bypassAnimation = false; - if (this.isStyleCollapsed) { - this.isStyleCollapsed = false; - } else { - this.isStyleCollapsed = true; - this.application.ninja.timeline.synchScrollbars(myHeight); - } - this.triggerOutgoingBinding(); - } - }, - handleMouseover: { - value: function(event) { - this.element.draggable = true; - } - }, - handleMouseout: { - value: function(event) { - this.element.draggable = false; - } - }, - handleDragenter: { - value: function(event) { - } - }, - handleDragleave: { - value: function(event) { - if (this.parentComponent.parentComponent.draggingType !== "la