From f277cbad9bbfc077fc37546758b85408419951f2 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Sun, 27 May 2012 17:19:07 -0700 Subject: CSS Panel - Prevent Animation on New Style --- .../css-panel/style-declaration.reel/style-declaration.css | 3 +++ .../css-panel/style-declaration.reel/style-declaration.js | 10 +++++++++- js/panels/css-panel/styles-view-delegate.js | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css index 6be8d33c..d4755b04 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.css +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css @@ -10,4 +10,7 @@ } .drag-over { /*background-color: red;*/ +} +.css-animation-prevent * { + -webkit-transition-duration: 0 !important; } \ No newline at end of file diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js index 57cbdb63..6187989b 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.js +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js @@ -216,7 +216,15 @@ exports.StyleDeclaration = Montage.create(Component, { }, addNewStyle : { - value: function() { + value: function(preventAnimation) { + if(preventAnimation) { + this.element.classList.add('css-animation-prevent'); + + setTimeout(function() { + this.element.classList.remove('css-animation-prevent'); + }.bind(this), 1000); + } + this.addStyle('property', 'value', { isEmpty : true }); diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 5229b92e..d607a0ba 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -145,7 +145,7 @@ exports.StylesViewDelegate = Montage.create(Component, { if(nextFocus) { nextFocus.propertyField.start(); } else if(style.dirty) { - style.parentComponent.parentComponent.addNewStyle(); + style.parentComponent.parentComponent.addNewStyle(true); style.editingNewStyle = false; setTimeout(function() { style.getSiblingStyle('next').propertyField.start(); -- cgit v1.2.3 From 4c3aac5eabd93052b1554a03d78235215bb49db4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 29 May 2012 00:34:40 -0700 Subject: document bindings phase 1 - using array controller to bind the current document to all ninja components - removed open document event - removed references to the document controller Signed-off-by: Valerio Virgillito --- .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 29 +++++-- js/panels/Panel.reel/Panel.js | 24 ++++++ js/panels/PanelContainer.reel/PanelContainer.html | 21 +++++ js/panels/PanelContainer.reel/PanelContainer.js | 29 ++++--- js/panels/Timeline/Layer.reel/Layer.js | 4 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +- .../style-sheets-view.reel/style-sheets-view.js | 8 +- js/panels/properties.reel/properties.js | 40 ++++++---- .../sections/three-d-view.reel/three-d-view.js | 91 ++++++++++------------ 10 files changed, 159 insertions(+), 92 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index b4a803b2..b496ce4a 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -57,11 +57,6 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this.eventManager.addEventListener("selectionChange", this, true); this.eventManager.addEventListener("elementChange", this, true); - this.eventManager.addEventListener("openDocument", this, true); - - if(this.application.ninja.currentDocument) { - this.captureOpenDocument(); - } this.addEventListener('webkitTransitionEnd', this, false); ['sheets', 'styles'].forEach(function(section) { @@ -73,11 +68,29 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this._setUpToolbars(); } }, - captureOpenDocument : { - value : function(e) { - this.populateStyleSheetList(); + + _currentDocument: { + value : null, + enumerable : false + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(this._currentDocument.currentView === "design") { + this.populateStyleSheetList(); + } } }, + handleWebkitTransitionEnd : { value: function(e) { //console.log('transition end at panel base'); diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 613bef4b..14b25c36 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -100,6 +100,30 @@ exports.Panel = Montage.create(Component, { } }, + _currentDocument: { + value : null, + enumerable : false + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(typeof this.panelContent.content[0].controller._currentDocument !== "undefined") { + this.panelContent.content[0].controller.currentDocument = this._currentDocument; + } + + this.disabled = this._currentDocument.currentView !== "design"; + } + }, + handleBtnCollapseAction: { value: function() { this.collapsed = !this.collapsed; diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index 1c144bf4..b22b3609 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -17,6 +17,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_0"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -24,6 +27,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_1"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -31,6 +37,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_2"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -38,6 +47,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_3"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -45,6 +57,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_4"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -52,6 +67,9 @@ "prototype": "js/panels/Panel.reel", "properties": { "element": {"#": "panel_5"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, @@ -60,6 +78,9 @@ "name": "Panel", "properties": { "element": {"#": "panel_6"} + }, + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} } }, diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 8d1d6a5e..dc501a99 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -16,7 +16,24 @@ exports.PanelContainer = Montage.create(Component, { value: null }, - // This will hold the current loaded panels. + _currentDocument: { + value : null, + enumerable : false + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + } + }, + panels: { value: [] }, @@ -65,8 +82,6 @@ exports.PanelContainer = Montage.create(Component, { this.application.localStorage.setItem("panels", this.currentPanelState); - - this.eventManager.addEventListener( "onOpenDocument", this, false); this.eventManager.addEventListener( "closeDocument", this, false); } }, @@ -89,14 +104,6 @@ exports.PanelContainer = Montage.create(Component, { } }, - handleOnOpenDocument: { - value: function(){ - this.panels.forEach(function(obj) { - obj.disabled = false; - }); - } - }, - handleCloseDocument: { value: function(){ if(!this.application.ninja.documentController.activeDocument) { diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e8619d02..16fb0303 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -717,7 +717,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = this._layerEditable.value; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value; this.needsDraw = true; - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, handleAddStyleClick: { @@ -745,7 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = newVal; this.layerName = newVal; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal; - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; this.needsDraw = true; } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c55e5a24..b1fc97e4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -335,7 +335,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { this.initTimeline(); // 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); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index ff684446..126e6a61 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -564,7 +564,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe += 1; } - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, @@ -683,7 +683,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += " }"; // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js index 5081a124..9e3b4a49 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -63,10 +63,10 @@ exports.StyleSheetsView = Montage.create(Component, { if(this.styleSheetList) { sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)]; if(sheetComponent) { - sheetComponent.default = true; + sheetComponent['default'] = true; if(this._defaultStyleSheet) { oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)]; - oldDefaultSheet.default = false; + oldDefaultSheet['default'] = false; } } } @@ -115,12 +115,12 @@ exports.StyleSheetsView = Montage.create(Component, { handleStyleSheetsReady : { value: function(e) { - this.documentName = this.stylesController.activeDocument.name; + this.documentName = this.stylesController.currentDocument.name; this.styleSheets = this.stylesController.userStyleSheets; Object.defineBinding(this, 'activeDocument', { 'boundObject': this.stylesController, - 'boundObjectPropertyPath': 'activeDocument', + 'boundObjectPropertyPath': 'currentDocument', 'oneway': true }); diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 84b0d589..e99f58e9 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -13,6 +13,32 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.Properties = Montage.create(Component, { + _currentDocument: { + value : null, + enumerable : false + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(this._currentDocument.currentView === "design") { + // Save a reference of the pi inside the document view to be able to clear + this._currentDocument.model.views.design.propertiesPanel = this; + + // Display the default document root PI + this.displayElementProperties(this._currentDocument.model.documentRoot); + } + } + }, + elementName: { value: null }, @@ -46,7 +72,7 @@ exports.Properties = Montage.create(Component, { prepareForDraw: { value : function() { - this.eventManager.addEventListener("openDocument", this, false); + this.eventManager.addEventListener("elementChange", this, false); this.eventManager.addEventListener("selectionChange", this, false); this.eventManager.addEventListener("closeDocument", this, false); @@ -65,18 +91,6 @@ exports.Properties = Montage.create(Component, { } }, - handleOpenDocument: { - value: function() { - this.eventManager.addEventListener( "elementChange", this, false); - - // Save a reference of the pi inside the document view to be able to clear - this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; - - // Display the default document root PI - this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot); - } - }, - handleCloseDocument: { value: function(){ this.clear(); diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index e16e3509..0320c327 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -26,8 +26,7 @@ exports.ThreeD = Montage.create(Component, { set: function(value) { this._axisMode = value; - if(value === 0) - { + if(value === 0) { this.inGlobalMode = false; this.x3D = 0; this.y3D = 0; @@ -36,13 +35,10 @@ exports.ThreeD = Montage.create(Component, { this.xAngle = 0; this.yAngle = 0; this.zAngle = 0; - } - else - { + } else { this.inGlobalMode = true; var item = this.item; - if(item) - { + if(item) { this.x3D = item.elementModel.props3D.x3D; this.y3D = item.elementModel.props3D.y3D; this.z3D = item.elementModel.props3D.z3D; @@ -114,8 +110,7 @@ exports.ThreeD = Montage.create(Component, { handleAction: { value: function(event) { if(event.currentTarget.identifier === "flatten") { - this.application.ninja.elementMediator.setProperty([this.item], - "-webkit-transform-style", + this.application.ninja.elementMediator.setProperty([this.item], "-webkit-transform-style", event.currentTarget.checked ? ["flat"] : ["preserve-3d"]); } } @@ -127,11 +122,7 @@ exports.ThreeD = Montage.create(Component, { return; } - this.apply3DProperties(event.currentTarget.identifier, - event.currentTarget, - this.item, - this.inGlobalMode, - false); + this.apply3DProperties(event.currentTarget.identifier, event.currentTarget, this.item, this.inGlobalMode, false); this._curMat = null; this._curProp = null; @@ -144,28 +135,24 @@ exports.ThreeD = Montage.create(Component, { return; } - this.apply3DProperties(event.currentTarget.identifier, - event.currentTarget, - this.item, - this.inGlobalMode, - true); + this.apply3DProperties(event.currentTarget.identifier, event.currentTarget, this.item, this.inGlobalMode, true); } }, apply3DProperties : { value : function(prop, value, item, inGlobalMode, isChanging){ - if(!this._curMat) - { + if(!this._curMat) { this._curMat = this.application.ninja.elementMediator.getMatrix(item); } + var curMat = this._curMat; var delta = value.value; - if(inGlobalMode) - { - if(!this._curProp) - { + if(inGlobalMode) { + + if(!this._curProp) { this._curProp = this.application.ninja.elementMediator.get3DProperty(item, prop); } + delta -= this._curProp; } @@ -193,31 +180,47 @@ exports.ThreeD = Montage.create(Component, { } var mat = []; - if(inGlobalMode) - { + if(inGlobalMode) { glmat4.multiply(xFormMat, curMat, mat); - } - else - { + } else { glmat4.multiply(curMat, xFormMat, mat); } - if(isChanging) - { + if(isChanging) { this.application.ninja.elementMediator.setMatrix(item, mat, true); - } - else - { + } else { this.application.ninja.elementMediator.setMatrix(item, mat, false); - if(!inGlobalMode) - { + if(!inGlobalMode) { value.value = 0; } } } }, + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(this._currentDocument.currentView === "design") { + // Save a reference of the pi inside the document view to be able to clear + Object.defineBinding(this, "item", { + boundObject: this, + boundObjectPropertyPath: "application.ninja.selectedElements", + boundValueMutator: this._getSelectedItem, + oneway: true + }); + } + } + }, + templateDidLoad : { value: function() { Object.defineBinding(this, "axisMode", { @@ -225,20 +228,6 @@ exports.ThreeD = Montage.create(Component, { boundObjectPropertyPath: "selectedIndex", oneway: false }); - - this.eventManager.addEventListener("openDocument", this, false); - } - }, - - handleOpenDocument: { - value: function() { - - Object.defineBinding(this, "item", { - boundObject: this, - boundObjectPropertyPath: "application.ninja.selectedElements", - boundValueMutator: this._getSelectedItem, - oneway: true - }); } }, -- cgit v1.2.3 From 17acb39a717e5fb965dd494c10c77586ef71b827 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 29 May 2012 15:06:54 -0700 Subject: CSS Panel - Find correct previously-rendered rule list after selection. --- .../css-panel/rule-list-container.reel/rule-list-container.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) (limited to 'js/panels') diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js index e2e269ba..c7766d08 100644 --- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js @@ -45,7 +45,7 @@ exports.RuleListContainer = Montage.create(Component, { for(i = 0; i 1) { + if(selection.length === list.selection.length) { matchesAll = selection.every(function(element, index, array) { return list.selection.indexOf(element) !== -1; }); @@ -53,12 +53,6 @@ exports.RuleListContainer = Montage.create(Component, { if(matchesAll) { break; } - } else { - ///// Selection (single element or stylesheet) is the same, - ///// Use the existing rule list - if(list.selection[0] === selection[0]) { - break; - } } list = null; -- cgit v1.2.3 From 1fda3cea5f8dced1e14533969722e30b8ea1e6fa Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 29 May 2012 15:28:39 -0700 Subject: CSS Panel - Handle focus after editing selector --- .../rule-components/css-style-rule.reel/css-style-rule.js | 9 +++++++++ js/panels/css-panel/styles-view-delegate.js | 7 +++++++ 2 files changed, 16 insertions(+) (limited to 'js/panels') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index e0ffb1a8..54181bf3 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -88,6 +88,14 @@ exports.CssStyleRule = Montage.create(Component, { } } }, + handleStop : { + value: function(e) { + if(this.focusDelegate) { + e._event.detail.preventDefault(); + this.focusDelegate.handleSelectorStop(this.rule, this.selectorField.value, this); + } + } + }, handleMouseover: { value: function(e) { if(this.focusDelegate) { @@ -125,6 +133,7 @@ exports.CssStyleRule = Montage.create(Component, { this.declarationComponent.type = 'inline'; } else { this.selectorField.addEventListener('change', this, false); + this.selectorField.addEventListener('stop', this, false); this.selectorField.element.addEventListener('mouseover', this, false); this.selectorField.element.addEventListener('mouseout', this, false); } diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index d607a0ba..68497747 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -75,6 +75,13 @@ exports.StylesViewDelegate = Montage.create(Component, { this._dispatchChange(); } }, + + handleSelectorStop : { + value: function(rule, newSelector, ruleComponent) { + ruleComponent.declarationComponent.repetition.childComponents[0].propertyField.start() + } + }, + _getClassNameFromSelector : { value: function(selectorText) { var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText); -- cgit v1.2.3 From 31b094ee21102f99a4021d505bc3a28527c9e23d Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 30 May 2012 01:33:20 -0700 Subject: Fixing the close document. Signed-off-by: Valerio Virgillito --- js/panels/Panel.reel/Panel.js | 7 ++++- js/panels/PanelContainer.reel/PanelContainer.js | 12 --------- js/panels/css-panel/css-panel.reel/css-panel.html | 3 +++ js/panels/css-panel/css-panel.reel/css-panel.js | 18 +++++++++++++ .../styles-view-container.js | 31 ++++++++++++++++------ js/panels/properties.reel/properties.js | 11 +++----- 6 files changed, 53 insertions(+), 29 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 14b25c36..0c5f0b4b 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -120,7 +120,12 @@ exports.Panel = Montage.create(Component, { this.panelContent.content[0].controller.currentDocument = this._currentDocument; } - this.disabled = this._currentDocument.currentView !== "design"; + if(!value) { + this.disabled = true; + } else { + this.disabled = this._currentDocument.currentView !== "design"; + } + } }, diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index dc501a99..7cb03255 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -81,8 +81,6 @@ exports.PanelContainer = Montage.create(Component, { } this.application.localStorage.setItem("panels", this.currentPanelState); - - this.eventManager.addEventListener( "closeDocument", this, false); } }, @@ -104,16 +102,6 @@ exports.PanelContainer = Montage.create(Component, { } }, - handleCloseDocument: { - value: function(){ - if(!this.application.ninja.documentController.activeDocument) { - this.panels.forEach(function(obj) { - obj.disabled = true; - }); - } - } - }, - handleDropped: { value: function(e) { var draggedIndex, droppedIndex = 0, len = this.panels.length; diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index 42dca8a2..789635a0 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -31,6 +31,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "properties": { "element": {"#": "styles-view-container" }, "selectionName": {"@": "selectionName" } + }, + "bindings": { + "currentDocument" : {"<-": "@owner.currentDocument" } } }, "selectionName" : { diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js index a117787e..96d94b36 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.js +++ b/js/panels/css-panel/css-panel.reel/css-panel.js @@ -8,6 +8,24 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CssPanel = Montage.create(Component, { + + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + } + }, + prepareForDraw : { value: function() { } diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js index 4a391421..157d99de 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js @@ -8,6 +8,29 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.StylesViewContainer = Montage.create(Component, { + + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(!value) { + this.hasStyles = false; + this.needsDraw = true; + } + } + }, + contentController : { value: null }, @@ -74,7 +97,6 @@ exports.StylesViewContainer = Montage.create(Component, { value: function() { this.eventManager.addEventListener('styleSheetsReady', this, false); this.eventManager.addEventListener('elementChange', this, false); - this.eventManager.addEventListener("closeDocument", this, false); } }, handleStyleSheetsReady: { @@ -150,13 +172,6 @@ exports.StylesViewContainer = Montage.create(Component, { } }, - handleCloseDocument: { - value: function(e) { - this.hasStyles = false; - this.needsDraw = true; - } - }, - draw : { value: function() { if(this.hasStyles) { diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index e99f58e9..4b663220 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -29,7 +29,9 @@ exports.Properties = Montage.create(Component, { this._currentDocument = value; - if(this._currentDocument.currentView === "design") { + if(!value) { + this.clear(); + } else if(this._currentDocument.currentView === "design") { // Save a reference of the pi inside the document view to be able to clear this._currentDocument.model.views.design.propertiesPanel = this; @@ -74,7 +76,6 @@ exports.Properties = Montage.create(Component, { value : function() { this.eventManager.addEventListener("elementChange", this, false); this.eventManager.addEventListener("selectionChange", this, false); - this.eventManager.addEventListener("closeDocument", this, false); // This will be a toggle option if(this.application.ninja.appData.PILiveUpdate) { @@ -91,12 +92,6 @@ exports.Properties = Montage.create(Component, { } }, - handleCloseDocument: { - value: function(){ - this.clear(); - } - }, - /** * Blur and Key up to handle change in the Element ID field. */ -- cgit v1.2.3 From 752f76fa464e2c9e48b4a0e5429a5b8062c00b39 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 30 May 2012 13:38:39 -0700 Subject: PI's 3d section was not binding correctly to the current document. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/properties.html | 5 ++++- js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html index ac0dab5a..b9aa206b 100755 --- a/js/panels/properties.reel/properties.html +++ b/js/panels/properties.reel/properties.html @@ -56,7 +56,10 @@ } }, "threeDProperties": { - "prototype": "js/panels/properties.reel/sections/three-d-view.reel[ThreeD]" + "prototype": "js/panels/properties.reel/sections/three-d-view.reel[ThreeD]", + "bindings": { + "currentDocument": {"<-": "@owner.currentDocument"} + } }, "CustomSections": { diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 0320c327..49907c9d 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -198,6 +198,10 @@ exports.ThreeD = Montage.create(Component, { } }, + _currentDocument: { + value : null + }, + currentDocument : { get : function() { return this._currentDocument; -- cgit v1.2.3 From 501221d0bbf776ce71bc7ae0f482c931f6651659 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 30 May 2012 14:51:25 -0700 Subject: fixing the timeline current document bindings Signed-off-by: Valerio Virgillito --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 88 +++++++++++----------- js/panels/properties.reel/properties.js | 3 +- 2 files changed, 47 insertions(+), 44 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index b1fc97e4..6e9513f2 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -15,6 +15,41 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === BEGIN: Models === */ + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + if(!this._currentDocument && value.currentView === "design") { + this.enablePanel(true); + } + + this._currentDocument = value; + + if(!value) { + this.enablePanel(false); + } else if(this._currentDocument.currentView === "design") { + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + + // Rebind the document events for the new document context + this._bindDocumentEvents(); + + // TODO: Fix the init function so that it can be called here instead of when container changes + // this.initTimelineForDocument(); + } + } + }, + _arrLayers:{ value:[] }, @@ -144,8 +179,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return this._currentSelectedContainer; }, set: function(newVal) { - this._currentSelectedContainer = newVal; - this.handleDocumentChange(); + if(this._currentSelectedContainer !== newVal) { + this._currentSelectedContainer = newVal; + + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + + // TODO: Fix the function so that we can remove this call here. + this.initTimelineForDocument(); + } } }, @@ -233,7 +276,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { set:function (value) { if (this._breadCrumbContainer !== value) { this._breadCrumbContainer = value; - //this.LayerBinding(); } } }, @@ -334,11 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { prepareForDraw:{ value:function () { this.initTimeline(); - // Bind the event handler for the document change 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); this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); @@ -710,44 +748,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDocumentChange:{ value:function () { - if (this.application.ninja.currentDocument == null) { - // On app initialization, the binding is triggered before - // there is a currentDocument. We don't do anything at that time. - return; - } - // this.application.ninja.currentDocument.setLevel = true; - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // Reinitialize the timeline...but only if there are open documents. - if (this.application.ninja.documentController._documents.length > 0) { - this.enablePanel(true); - this.initTimelineForDocument(); - - } else { - this.enablePanel(false); - } - } - }, - - LayerBinding:{ - value:function (node) { - var i = 0; - if(this._firstTimeLoaded){ - this._firstTimeLoaded = false; - return; - } - - this.handleDocumentChange(node); } }, - updateTrackContainerWidth:{ value:function () { this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 4b663220..d05fb058 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -14,8 +14,7 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.Properties = Montage.create(Component, { _currentDocument: { - value : null, - enumerable : false + value : null }, currentDocument : { -- cgit v1.2.3 From 66632a6e0de0998ff6d36abdaa8c3a546eada0f5 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 30 May 2012 23:02:46 -0700 Subject: fixing the closing of documents Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 49907c9d..104d474d 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -213,7 +213,7 @@ exports.ThreeD = Montage.create(Component, { this._currentDocument = value; - if(this._currentDocument.currentView === "design") { + if(this._currentDocument && this._currentDocument.currentView === "design") { // Save a reference of the pi inside the document view to be able to clear Object.defineBinding(this, "item", { boundObject: this, -- cgit v1.2.3 From e1fe603a7c002073f8ac13623f8cc8dc43efb59d Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 31 May 2012 10:27:46 -0700 Subject: fixing selection when switching documents Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index d05fb058..934a3851 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -28,15 +28,17 @@ exports.Properties = Montage.create(Component, { this._currentDocument = value; - if(!value) { +// if(!value) { this.clear(); - } else if(this._currentDocument.currentView === "design") { - // Save a reference of the pi inside the document view to be able to clear - this._currentDocument.model.views.design.propertiesPanel = this; +// } + /* + else if(this._currentDocument.currentView === "design") { // Display the default document root PI - this.displayElementProperties(this._currentDocument.model.documentRoot); + //this.displayElementProperties(this._currentDocument.model.documentRoot); +// this.displaySelection(this._currentDocument.model.selection); } + */ } }, @@ -181,6 +183,20 @@ exports.Properties = Montage.create(Component, { } }, + displaySelection: { + value: function(selection) { + if(selection.length === 0) { + this.displayElementProperties(this._currentDocument.model.documentRoot); + } else { + if(selection.length === 1) { + this.displayElementProperties(this.application.ninja.selectedElements[0]); + } else { + this.displayGroupProperties(this.application.ninja.selectedElements); + } + } + } + }, + clear: { value: function() { this.elementName.value = ""; -- cgit v1.2.3 From 266460e52831c5b3a3473be420756fd88bb8aced Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 1 Jun 2012 16:24:14 -0700 Subject: fix for the css panel Signed-off-by: Valerio Virgillito --- js/panels/css-panel/styles-view-delegate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 078bd521..87686826 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -30,7 +30,7 @@ exports.StylesViewDelegate = Montage.create(Component, { value: function(selector, direction) { if(!selector) { return false; } - var elements = this.stylesController._activeDocument.model.views.design.document.querySelectorAll(selector), + var elements = this.stylesController.currentDocument.model.views.design.document.querySelectorAll(selector), method = (direction === "out") ? "remove" : "add"; Array.prototype.slice.call(elements).forEach(function(el) { -- cgit v1.2.3 From ac24875103799c7198b1b1cb01d15b415d118354 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 1 Jun 2012 17:12:37 -0700 Subject: removing the search bar component Signed-off-by: Valerio Virgillito --- js/panels/components-panel.reel/components-panel.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'js/panels') diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js index 3ad1763d..5a9d2ca5 100755 --- a/js/panels/components-panel.reel/components-panel.js +++ b/js/panels/components-panel.reel/components-panel.js @@ -39,11 +39,6 @@ exports.ComponentsPanel = Montage.create(Component, { "dataFile" : "node_modules/components-data/picasa-carousel.json", "component": "picasa-carousel" }, - { - "text": "Search Bar", - "dataFile" : "node_modules/components-data/searchfield.json", - "component": "searchfield" - }, { "text": "Youtube Channel", "dataFile" : "node_modules/components-data/youtube-channel.json", @@ -351,7 +346,6 @@ exports.ComponentsPanel = Montage.create(Component, { el.setAttribute("type", "range"); break; case "textfield": - case "searchfield": el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Textfield"); el.setAttribute("type", "text"); -- cgit v1.2.3 From e48195d69ac08974984c8bae85b7f41a77a67adf Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 4 Jun 2012 16:37:18 -0700 Subject: Timeline: Fixes to timeline to handle document switching & breadcrumb interactions under new DOM Architecture. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 3055 ++++++++++---------- 1 file changed, 1535 insertions(+), 1520 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 6e9513f2..a5737334 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1,1521 +1,1536 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; -var nj = require("js/lib/NJUtils").NJUtils; - -var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - - hasTemplate:{ - value:true - }, - - /* === BEGIN: Models === */ - _currentDocument: { - value : null - }, - - currentDocument : { - get : function() { - return this._currentDocument; - }, - set : function(value) { - if (value === this._currentDocument) { - return; - } - - if(!this._currentDocument && value.currentView === "design") { - this.enablePanel(true); - } - - this._currentDocument = value; - - if(!value) { - this.enablePanel(false); - } else if(this._currentDocument.currentView === "design") { - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // TODO: Fix the init function so that it can be called here instead of when container changes - // this.initTimelineForDocument(); - } - } - }, - - _arrLayers:{ - value:[] - }, - - arrLayers:{ - serializable:true, - get:function () { - return this._arrLayers; - }, - set:function (newVal) { - this._arrLayers = newVal; - this.needsDraw = true; - this.cacheTimeline(); - } - }, - - _temparrLayers:{ - value:[] - }, - - temparrLayers:{ - get:function () { - return this._temparrLayers; - }, - set:function (newVal) { - this._temparrLayers = newVal; - } - }, - - - _layerRepetition:{ - value:null - }, - - layerRepetition:{ - get:function () { - return this._layerRepetition; - }, - set:function (newVal) { - this._layerRepetition = newVal; - } - }, - - // Set to false to skip array caching array sets in current document - _boolCacheArrays:{ - value:true - }, - - _currentLayerNumber:{ - value:0 - }, - - currentLayerNumber:{ - get:function () { - return this._currentLayerNumber; - }, - set:function (newVal) { - if (newVal !== this._currentLayerNumber) { - this._currentLayerNumber = newVal; - this.cacheTimeline(); - } - } - }, - - _currentLayerSelected:{ - value: false - }, - currentLayerSelected:{ - get:function () { - return this._currentLayerSelected; - }, - set:function (newVal) { - this._currentLayerSelected = newVal; - this.cacheTimeline(); - } - }, - - _selectedLayerID:{ - value:false - }, - selectedLayerID:{ - get:function () { - return this._selectedLayerID; - }, - set:function (newVal) { - if (newVal === false) { - // We are clearing the timeline, so just set the value and return. - this._selectedLayerID = newVal; - return; - } - if (newVal !== this._selectedLayerID) { - var selectIndex = this.getLayerIndexByID(newVal); - this._selectedLayerID = newVal; - this._captureSelection = true; - if (this.currentLayerSelected !== false) { - this.selectLayer(selectIndex, false); - } - if (this.currentLayersSelected !== false) { - this.selectLayers(this.currentLayersSelected); - } - if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) { - this.selectLayers([]); - } - - } - } - }, - - _currentLayersSelected:{ - value:[] - }, - currentLayersSelected:{ - get:function () { - return this._currentLayersSelected; - }, - set:function (newVal) { - this._currentLayersSelected = newVal; - this.cacheTimeline(); - } - }, - - _currentSelectedContainer: { - value: null - }, - currentSelectedContainer: { - get: function() { - return this._currentSelectedContainer; - }, - set: function(newVal) { - if(this._currentSelectedContainer !== newVal) { - this._currentSelectedContainer = newVal; - - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // TODO: Fix the function so that we can remove this call here. - this.initTimelineForDocument(); - } - } - }, - - _millisecondsOffset:{ - value:1000 - }, - - millisecondsOffset:{ - get:function () { - return this._millisecondsOffset; - }, - set:function (newVal) { - if (newVal !== this._millisecondsOffset) { - this._millisecondsOffset= newVal; - this.drawTimeMarkers(); - NJevent('tlZoomSlider',this); - } - } - }, - - _masterDuration:{ - value:0 - }, - - masterDuration:{ - serializable:true, - get:function () { - return this._masterDuration; - }, - set:function (val) { - this._masterDuration = val; - this.timebar.style.width = (this._masterDuration / 12) + "px"; - } - }, - - _trackRepetition:{ - value:null - }, - - trackRepetition:{ - get:function () { - return this._trackRepetition; - }, - set:function (newVal) { - this._trackRepetition = newVal; - } - }, - - _selectedKeyframes:{ - value:[] - }, - - selectedKeyframes:{ - serializable:true, - get:function () { - return this._selectedKeyframes; - }, - set:function (newVal) { - this._selectedKeyframes = newVal; - } - }, - - _selectedTweens:{ - value:[] - }, - - selectedTweens:{ - serializable:true, - get:function () { - return this._selectedTweens; - }, - set:function (newVal) { - this._selectedTweens = newVal; - } - }, - - _breadCrumbContainer:{ - value:null - }, - - breadCrumbContainer:{ - get:function () { - return this._breadCrumbContainer; - }, - set:function (value) { - if (this._breadCrumbContainer !== value) { - this._breadCrumbContainer = value; - } - } - }, - - _isLayer:{ - value:false - }, - - _firstTimeLoaded:{ - value:true - }, - - _captureSelection:{ - value:false - }, - - _openDoc:{ - value:false - }, - - timeMarkerHolder:{ - value:null - }, - _dragAndDropHelper : { - value: false - }, - _dragAndDropHelperCoords: { - value: false - }, - _dragAndDropHelperOffset : { - value: false - }, - _dragLayerID : { - value: null - }, - - layersDragged:{ - value:[], - writable:true - }, - - dragLayerID : { - get: function() { - return this._dragLayerID; - }, - set: function(newVal) { - if (newVal !== this._dragLayerID) { - this._dragLayerID = newVal; - } - } - }, - _dropLayerID : { - value: null - }, - dropLayerID : { - get: function() { - return this._dropLayerID; - }, - set: function(newVal) { - if (newVal !== this._dropLayerID) { - this._dropLayerID = newVal; - - var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), - dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), - dragLayer = this.arrLayers[dragLayerIndex]; - this.layersDragged.push(dragLayer); - this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; - - this.arrLayers.splice(dragLayerIndex, 1); - this.arrLayers.splice(dropLayerIndex, 0, dragLayer); - this.cacheTimeline(); - - // Clear for future DnD - this._dropLayerID = null; - this._dragLayerID = null; - - // Sometimes, just to be fun, the drop and dragend events don't fire. - // So just in case, set the draw routine to delete the helper. - this._deleteHelper = true; - this.needsDraw = true; - } - } - }, - _appendHelper: { - value: false - }, - _deleteHelper: { - value: false - }, - _scrollTracks: { - value: false - }, - useAbsolutePosition:{ - value:true - }, - /* === END: Models === */ - /* === BEGIN: Draw cycle === */ - prepareForDraw:{ - value:function () { - this.initTimeline(); - - // 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); - this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); - this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); - - // Bind the handlers for the config menu - this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); - this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); - this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); - this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); - document.addEventListener("click", this.handleDocumentClick.bind(this), false); - - } - }, - - willDraw:{ - value:function () { - if (this._isLayer) { - this._isLayer = false; - } - } - }, - - draw: { - value: function() { - // Drag and Drop: - // Do we have a helper to append? - if (this._appendHelper === true) { - this.container_layers.appendChild(this._dragAndDropHelper); - this._appendHelper = false; - } - // Do we need to move the helper? - if (this._dragAndDropHelperCoords !== false) { - if (this._dragAndDropHelper !== null) { - this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; - } - this._dragAndDropHelperCoords = false; - } - // Do we need to scroll the tracks? - if (this._scrollTracks !== false) { - this.layout_tracks.scrollTop = this._scrollTracks; - this._scrollTracks = false; - } - // Do we have a helper to delete? - if (this._deleteHelper === true) { - if (this._dragAndDropHelper === null) { - // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. - // Try and recover the helper so we can delete it. - var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); - if (myHelper != null) { - this._dragAndDropHelper = myHelper; - } - } - if (this._dragAndDropHelper !== null) { - // We need to delete the helper. Can we delete it from container_layers? - if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; - this._deleteHelper = false; - } - } - this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); - this.layersDragged =[]; - } - } - }, - /* === END: Draw cycle === */ - /* === BEGIN: Controllers === */ - // Create an empty layer template object with minimal defaults and return it for use - createLayerTemplate:{ - value:function () { - var returnObj = {}; - - returnObj.layerData = {}; - returnObj.layerData.layerName = null; - returnObj.layerData.layerID = null; - returnObj.layerData.isMainCollapsed = true; - returnObj.layerData.isPositionCollapsed = true; - returnObj.layerData.isTransformCollapsed = true; - returnObj.layerData.isStyleCollapsed = true; - returnObj.layerData.arrLayerStyles = []; - returnObj.layerData.arrLayerStyles = []; - returnObj.layerData.elementsList = []; - returnObj.layerData.deleted = false; - returnObj.layerData.isSelected = false; - returnObj.layerData.layerPosition = null; - returnObj.layerData.created = false; - returnObj.layerData.isTrackAnimated = false; - returnObj.layerData.currentKeyframeRule = null; - returnObj.layerData.trackPosition = 0; - returnObj.layerData.arrStyleTracks = []; - returnObj.layerData.tweens = []; - returnObj.layerData.layerTag = ""; - returnObj.layerData.isVisible = true; - returnObj.layerData.docUUID = this.application.ninja.currentDocument._uuid; - returnObj.layerData.isTrackAnimated = false; - returnObj.layerData.triggerBinding = false; - returnObj.parentElementUUID = null; - returnObj.parentElement = null; - - return returnObj; - } - }, - - // cache Timeline data in currentDocument. - cacheTimeline: { - value: function() { - // Store the timeline data in currentDocument... - if (this._boolCacheArrays) { - // ... but only if we're supposed to. - this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer; - this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; - this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; - this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; - } - } - }, - // In