From 205d869d94005cb214fd838879d4f5e81d763311 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 18:01:08 -0800 Subject: Timeline: Merge arrlayers and arrtracks into one object. Redefine collapser to use property binding instead of events. --- js/panels/Timeline/Layer.reel/Layer.js | 138 +++++++++++++++++++++++++++++---- 1 file changed, 124 insertions(+), 14 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 94d1f7e9..f9bba499 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, { // Are the various collapsers collapsed or not _isMainCollapsed : { - value: "" + serializable: true, + value: true }, isMainCollapsed : { + serializable: true, get: function() { return this._isMainCollapsed; }, set: function(newVal) { + this.log('layer.js: isMainCollapsed: ' + newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; - this.needsDraw = true; } } }, _isTransformCollapsed : { + serializable: true, value: true }, isTransformCollapsed : { + serializable: true, get: function() { return this._isTransformCollapsed; }, @@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isPositionCollapsed : { + serializable: true, value: true }, isPositionCollapsed : { + serializable: true, get: function() { return this._isPositionCollapsed; }, @@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isStyleCollapsed : { + serializable: true, value: true }, isStyleCollapsed : { + serializable: true, get: function() { return this._isStyleCollapsed; }, @@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, + _animateCollapser : { + serializable: true, + value: false + }, + animateCollapser : { + serializable: true, + get: function() { + return this._animateCollapser; + }, + set: function(newVal) { + this._animateCollapser = newVal; + } + }, /* END: Models */ @@ -404,10 +425,19 @@ var Layer = exports.Layer = Montage.create(Component, { this.mainCollapser.contentHeight = 60; this.myContent.style.height = "0px"; this.mainCollapser.element = this.myContent; - //this.mainCollapser.isCollapsedAtStart = true; this.mainCollapser.isCollapsed = this.isMainCollapsed; this.mainCollapser.isAnimated = true; this.element.setAttribute("data-layerid", this.layerID); + // Bind the collapser's isToggling property to the isMainCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.mainCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isMainCollapsed", + oneway: false + }); + this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); + + /* this.mainCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isMainCollapsed = that.mainCollapser.isCollapsed; } + */ //this.mainCollapser.needsDraw = true; this.positionCollapser.clicker = this.clickerPosition; this.positionCollapser.myContent = this.contentPosition; this.positionCollapser.element = this.contentPosition; this.positionCollapser.contentHeight = 40; - // this.positionCollapser.isCollapsedAtStart = true; this.positionCollapser.isCollapsed = this.isPositionCollapsed; - this.positionCollapser.isAnimated = true; + this.positionCollapser.isAnimated = false; + // Bind the collapser's isToggling property to the isPositionCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.positionCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isPositionCollapsed", + oneway: false + }); + this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); + + /* this.positionCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -437,15 +477,26 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isPositionCollapsed = that.positionCollapser.isCollapsed; } + */ //this.positionCollapser.needsDraw = true; this.transformCollapser.clicker = this.clickerTransform; this.transformCollapser.myContent = this.contentTransform; this.transformCollapser.element = this.contentTransform; this.transformCollapser.contentHeight = 100; - // this.transformCollapser.isCollapsedAtStart = true; this.transformCollapser.isCollapsed = this.isTransformCollapsed; - this.transformCollapser.isAnimated = true; + this.transformCollapser.isAnimated = false; + // Bind the collapser's isToggling property to the isTransformCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.transformCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isTransformCollapsed", + oneway: false + }); + this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); + + + /* this.transformCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -456,6 +507,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isTransformCollapsed = that.transformCollapser.isCollapsed; } + */ //this.transformCollapser.needsDraw = true; this.styleCollapser.clicker = this.clickerStyle; @@ -463,7 +515,18 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.element = this.contentStyle; this.styleCollapser.isCollapsed = this.isStyleCollapsed; this.styleCollapser.contentHeight = 0; - this.styleCollapser.isAnimated = true; + this.styleCollapser.isAnimated = false; + // Bind the collapser's isToggling property to the isStyleCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.styleCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isStyleCollapsed", + oneway: false + }); + this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); + + + /* this.styleCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -474,6 +537,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isStyleCollapsed = that.styleCollapser.isCollapsed; } + */ //this.styleCollapser.needsDraw = true; // Add event listeners to add and delete style buttons @@ -493,20 +557,22 @@ var Layer = exports.Layer = Montage.create(Component, { value: function() { // Coordinate the collapsers + this.log('layer.js draw') if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { - this.mainCollapser.bypassAnimation = true; + this.log('layer.js draw: this.animateCollapser ' + this.animateCollapser) + this.mainCollapser.bypassAnimation = this.animateCollapser; this.mainCollapser.toggle(); } if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) { - this.positionCollapser.bypassAnimation = true; + this.positionCollapser.bypassAnimation = this.animateCollapser; this.positionCollapser.toggle(); } if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) { - this.transformCollapser.bypassAnimation = true; + this.transformCollapser.bypassAnimation = this.animateCollapser; this.transformCollapser.toggle(); } if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) { - this.styleCollapser.bypassAnimation = true; + this.styleCollapser.bypassAnimation = this.animateCollapser; this.styleCollapser.toggle(); } if (this.isSelected) { @@ -597,7 +663,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Set up the event info and dispatch the event newEvent.styleSelection = mySelection; - defaultEventManager.dispatchEvent(newEvent); + //defaultEventManager.dispatchEvent(newEvent); } }, @@ -617,7 +683,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerID = this.layerID; newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; newEvent.styleSelection = selectedIndex; - defaultEventManager.dispatchEvent(newEvent); + //defaultEventManager.dispatchEvent(newEvent); // Delete the style from the view this.arrLayerStyles.splice(selectedIndex, 1); @@ -724,6 +790,50 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, + handleMainCollapserClick : { + value: function(event) { + this.mainCollapser.bypassAnimation = false; + this.animateCollapser = true; + if (this.isMainCollapsed) { + this.isMainCollapsed = false; + } else { + this.isMainCollapsed = true; + } + } + }, + handlePositionCollapserClick : { + value: function(event) { + this.positionCollapser.bypassAnimation = false; + //this.animateCollapser = true; + if (this.isPositionCollapsed) { + this.isPositionCollapsed = false; + } else { + this.isPositionCollapsed = true; + } + } + }, + handleTransformCollapserClick : { + value: function(event) { + this.transformCollapser.bypassAnimation = false; + //this.animateCollapser = true; + if (this.isTransformCollapsed) { + this.isTransformCollapsed = false; + } else { + this.isTransformCollapsed = true; + } + } + }, + handleStyleCollapserClick : { + value: function(event) { + this.styleCollapser.bypassAnimation = false; + //this.animateCollapser = true; + if (this.isStyleCollapsed) { + this.isStyleCollapsed = false; + } else { + this.isStyleCollapsed = true; + } + } + }, /* End: Event handlers */ /* Begin: Logging routines */ -- cgit v1.2.3 From 5689e3e2deda1b1f7ba32f6007ddab20f6c1fe64 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 2 Mar 2012 18:17:14 -0800 Subject: Timeline: Serialization of all Collapser components --- js/panels/Timeline/Layer.reel/Layer.html | 129 ++++++++++++++++++++++++++----- js/panels/Timeline/Layer.reel/Layer.js | 44 +++++++---- 2 files changed, 136 insertions(+), 37 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 14315f8d..79b522ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,7 +17,12 @@ "element": {"#": "layer"}, "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, - "slotStyle" : {"@":"slot1"} + "slotStyle" : {"@":"slot1"}, + "mainCollapser" : {"@" : "mainCollapser"}, + "positionCollapser" : {"@" : "positionCollapser"}, + "transformCollapser" : {"@" : "transformCollapser"}, + "styleCollapser" : {"@" : "styleCollapser"}, + "clickerMain" : {"#" : "clicker-main"} } }, "dtext1" : { @@ -225,6 +230,90 @@ "oneway": false } } + }, + + "mainCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-main"}, + "myContent" : {"#" : "content-main"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-main"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isMainCollapsed", + "oneway" : false + } + } + }, + + "positionCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-position"}, + "myContent" : {"#":"content-position"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-position"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isPositionCollapsed", + "oneway" : false + } + } + }, + + "transformCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-transform"}, + "myContent" : {"#":"content-transform"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-transform"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isTransformCollapsed", + "oneway" : false + } + } + }, + + "styleCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-style"}, + "myContent" : {"#":"content-style"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-style"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isStyleCollapsed", + "oneway" : false + } + } } @@ -233,68 +322,68 @@ -
+
- Label - + Label +
-
+
Position - +
-
+
X
-
+
Y
-
+
Transform - +
-
+
Scale X
-
+
Scale Y
-
+
Skew X
-
+
Skew Y
-
+
Rotation
-
+
Style - +
-
-
-
+
+
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2980842f..158eac00 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -372,17 +372,18 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - _animateCollapser : { + _bypassAnimation : { serializable: true, value: false }, - animateCollapser : { + bypassAnimation : { serializable: true, get: function() { - return this._animateCollapser; + return this._bypassAnimation; }, set: function(newVal) { - this._animateCollapser = newVal; + //console.log("layer.js _bypassAnimation setter " + newVal) + this._bypassAnimation = newVal; } }, @@ -398,9 +399,9 @@ var Layer = exports.Layer = Montage.create(Component, { var that = this; - this.positionCollapser = Collapser.create(); - this.transformCollapser = Collapser.create(); - this.styleCollapser = Collapser.create(); + //this.positionCollapser = Collapser.create(); + //this.transformCollapser = Collapser.create(); + //this.styleCollapser = Collapser.create(); // Make it editable! this._layerEditable = Hintable.create(); @@ -419,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerEditable.needsDraw = true; // Change the markup into collapsible sections using the nifty Collapser component! + /* this.mainCollapser = Collapser.create(); this.mainCollapser.clicker = this.clicker; this.mainCollapser.myContent = this.myContent; @@ -435,6 +437,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isMainCollapsed", oneway: false }); + */ this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); /* @@ -450,7 +453,7 @@ var Layer = exports.Layer = Montage.create(Component, { } */ //this.mainCollapser.needsDraw = true; - +/* this.positionCollapser.clicker = this.clickerPosition; this.positionCollapser.myContent = this.contentPosition; this.positionCollapser.element = this.contentPosition; @@ -464,6 +467,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isPositionCollapsed", oneway: false }); + */ this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); /* @@ -479,7 +483,7 @@ var Layer = exports.Layer = Montage.create(Component, { } */ //this.positionCollapser.needsDraw = true; - + /* this.transformCollapser.clicker = this.clickerTransform; this.transformCollapser.myContent = this.contentTransform; this.transformCollapser.element = this.contentTransform; @@ -493,6 +497,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isTransformCollapsed", oneway: false }); + */ this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); @@ -509,7 +514,7 @@ var Layer = exports.Layer = Montage.create(Component, { } */ //this.transformCollapser.needsDraw = true; - + /* this.styleCollapser.clicker = this.clickerStyle; this.styleCollapser.myContent = this.contentStyle; this.styleCollapser.element = this.contentStyle; @@ -523,6 +528,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isStyleCollapsed", oneway: false }); + */ this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); @@ -555,7 +561,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, draw: { value: function() { - +/* // Coordinate the collapsers this.log('layer.js draw') if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { @@ -575,6 +581,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.bypassAnimation = this.animateCollapser; this.styleCollapser.toggle(); } + */ if (this.isSelected) { this.element.classList.add("selected"); } else { @@ -595,6 +602,10 @@ var Layer = exports.Layer = Montage.create(Component, { // 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"); + + /* this.clicker = this.element.querySelector(".collapsible-clicker"); this.myContent = this.element.querySelector(".content-layer"); this.clickerPosition = this.element.querySelector(".clicker-position"); @@ -603,8 +614,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.contentTransform = this.element.querySelector(".content-transform"); this.clickerStyle = this.element.querySelector(".clicker-style"); this.contentStyle = this.element.querySelector(".content-style"); - this.buttonAddStyle = this.element.querySelector(".button-add"); - this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + */ } }, selectLayer:{ @@ -793,7 +803,7 @@ var Layer = exports.Layer = Montage.create(Component, { handleMainCollapserClick : { value: function(event) { this.mainCollapser.bypassAnimation = false; - this.animateCollapser = true; + this.bypassAnimation = false; if (this.isMainCollapsed) { this.isMainCollapsed = false; } else { @@ -804,7 +814,7 @@ var Layer = exports.Layer = Montage.create(Component, { handlePositionCollapserClick : { value: function(event) { this.positionCollapser.bypassAnimation = false; - //this.animateCollapser = true; + this.bypassAnimation = false; if (this.isPositionCollapsed) { this.isPositionCollapsed = false; } else { @@ -815,7 +825,7 @@ var Layer = exports.Layer = Montage.create(Component, { handleTransformCollapserClick : { value: function(event) { this.transformCollapser.bypassAnimation = false; - //this.animateCollapser = true; + this.bypassAnimation = false; if (this.isTransformCollapsed) { this.isTransformCollapsed = false; } else { @@ -826,7 +836,7 @@ var Layer = exports.Layer = Montage.create(Component, { handleStyleCollapserClick : { value: function(event) { this.styleCollapser.bypassAnimation = false; - //this.animateCollapser = true; + this.bypassAnimation = false; if (this.isStyleCollapsed) { this.isStyleCollapsed = false; } else { -- cgit v1.2.3 From bcfb704b04587f95a13c474cf0598ba90ec3b371 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 6 Mar 2012 18:06:40 -0800 Subject: Timeline: Code cleanup. Fix bug with unfound property in serialization. --- js/panels/Timeline/Layer.reel/Layer.js | 164 +-------------------------------- 1 file changed, 4 insertions(+), 160 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 158eac00..81bd1867 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -398,11 +398,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.init(); var that = this; - - //this.positionCollapser = Collapser.create(); - //this.transformCollapser = Collapser.create(); - //this.styleCollapser = Collapser.create(); - + // Make it editable! this._layerEditable = Hintable.create(); this._layerEditable.element = this.titleSelector; @@ -418,133 +414,12 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; this._layerEditable.needsDraw = true; - - // Change the markup into collapsible sections using the nifty Collapser component! - /* - this.mainCollapser = Collapser.create(); - this.mainCollapser.clicker = this.clicker; - this.mainCollapser.myContent = this.myContent; - this.mainCollapser.contentHeight = 60; - this.myContent.style.height = "0px"; - this.mainCollapser.element = this.myContent; - this.mainCollapser.isCollapsed = this.isMainCollapsed; - this.mainCollapser.isAnimated = true; - this.element.setAttribute("data-layerid", this.layerID); - // Bind the collapser's isToggling property to the isMainCollapsed property, - // so a change in one will affect the other. - Object.defineBinding(this.mainCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isMainCollapsed", - oneway: false - }); - */ + this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); - - /* - this.mainCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-main"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isMainCollapsed = that.mainCollapser.isCollapsed; - } - */ - //this.mainCollapser.needsDraw = true; -/* - this.positionCollapser.clicker = this.clickerPosition; - this.positionCollapser.myContent = this.contentPosition; - this.positionCollapser.element = this.contentPosition; - this.positionCollapser.contentHeight = 40; - this.positionCollapser.isCollapsed = this.isPositionCollapsed; - this.positionCollapser.isAnimated = false; - // Bind the collapser's isToggling property to the isPositionCollapsed property, - // so a change in one will affect the other. - Object.defineBinding(this.positionCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isPositionCollapsed", - oneway: false - }); - */ this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); - - /* - this.positionCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-position"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isPositionCollapsed = that.positionCollapser.isCollapsed; - } - */ - //this.positionCollapser.needsDraw = true; - /* - this.transformCollapser.clicker = this.clickerTransform; - this.transformCollapser.myContent = this.contentTransform; - this.transformCollapser.element = this.contentTransform; - this.transformCollapser.contentHeight = 100; - this.transformCollapser.isCollapsed = this.isTransformCollapsed; - this.transformCollapser.isAnimated = false; - // Bind the collapser's isToggling property to the isTransformCollapsed property, - // so a change in one will affect the other. - Object.defineBinding(this.transformCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isTransformCollapsed", - oneway: false - }); - */ this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); - - - /* - this.transformCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-transform"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isTransformCollapsed = that.transformCollapser.isCollapsed; - } - */ - //this.transformCollapser.needsDraw = true; - /* - this.styleCollapser.clicker = this.clickerStyle; - this.styleCollapser.myContent = this.contentStyle; - this.styleCollapser.element = this.contentStyle; - this.styleCollapser.isCollapsed = this.isStyleCollapsed; - this.styleCollapser.contentHeight = 0; - this.styleCollapser.isAnimated = false; - // Bind the collapser's isToggling property to the isStyleCollapsed property, - // so a change in one will affect the other. - Object.defineBinding(this.styleCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isStyleCollapsed", - oneway: false - }); - */ this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); - - - /* - this.styleCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-style"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isStyleCollapsed = that.styleCollapser.isCollapsed; - } - */ - //this.styleCollapser.needsDraw = true; + // Add event listeners to add and delete style buttons this.buttonAddStyle.identifier = "addStyle"; @@ -561,27 +436,6 @@ var Layer = exports.Layer = Montage.create(Component, { }, draw: { value: function() { -/* - // Coordinate the collapsers - this.log('layer.js draw') - if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { - this.log('layer.js draw: this.animateCollapser ' + this.animateCollapser) - this.mainCollapser.bypassAnimation = this.animateCollapser; - this.mainCollapser.toggle(); - } - if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) { - this.positionCollapser.bypassAnimation = this.animateCollapser; - this.positionCollapser.toggle(); - } - if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) { - this.transformCollapser.bypassAnimation = this.animateCollapser; - this.transformCollapser.toggle(); - } - if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) { - this.styleCollapser.bypassAnimation = this.animateCollapser; - this.styleCollapser.toggle(); - } - */ if (this.isSelected) { this.element.classList.add("selected"); } else { @@ -604,17 +458,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.titleSelector = this.label.querySelector(".collapsible-label"); this.buttonAddStyle = this.element.querySelector(".button-add"); this.buttonDeleteStyle = this.element.querySelector(".button-delete"); - - /* - this.clicker = this.element.querySelector(".collapsible-clicker"); - this.myContent = this.element.querySelector(".content-layer"); - this.clickerPosition = this.element.querySelector(".clicker-position"); - this.contentPosition = this.element.querySelector(".content-position"); - this.clickerTransform = this.element.querySelector(".clicker-transform"); - this.contentTransform = this.element.querySelector(".content-transform"); - this.clickerStyle = this.element.querySelector(".clicker-style"); - this.contentStyle = this.element.querySelector(".content-style"); - */ + } }, selectLayer:{ -- cgit v1.2.3