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/Collapser.js | 15 +- js/panels/Timeline/Layer.reel/Layer.js | 164 +-------------------- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 5 - .../Timeline/TimelineTrack.reel/TimelineTrack.js | 108 -------------- 4 files changed, 6 insertions(+), 286 deletions(-) diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 32733b0a..88314c8b 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -179,24 +179,14 @@ var Montage = require("montage/core/core").Montage, prepareForDraw: { value: function() { - // Add a click listener to the label for expand/collapse - /* - if (this.isLabelClickable) { - this.clicker.identifier = "collapserLabel"; - this.clicker.addEventListener("click", this, false); - } - */ + // Get the original value of the overflow property: this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); - console.log("collapser: this.isCollapsed " + this.isCollapsed) if (this.isCollapsed === false) { this.myContent.style.height = "auto"; } - /* - * Removed because of expense. This disables the feature of having the - * component dynamically expand/collapse the content on init based on properties; - * Now default state of component must be set in CSS. + // If the content area is supposed to start out collapsed: if (this.isCollapsed) { this.myContent.style.height = "0px"; @@ -211,7 +201,6 @@ var Montage = require("montage/core/core").Montage, this.myContent.classList.remove(this.collapsedClass); this.clicker.classList.remove(this.collapsedClass); } - */ } }, draw: { 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:{ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index a6b7f9f1..ae1bcddf 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -101,11 +101,6 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", "oneway" : false }, - "animateCollapser" : { - "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.animateCollapser", - "oneway" : false - }, "isSelected" : { "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 92714c07..669dabef 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -582,114 +582,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrPositionTracks = [0, 1]; this.arrTransformTracks = [0, 1, 2, 3, 4]; - /* - this.label = this.element.querySelector(".label-main"); - this.myContent = this.element.querySelector(".content-main"); - this.labelPosition = this.element.querySelector(".label-position"); - this.contentPosition = this.element.querySelector(".content-position"); - this.labelTransform = this.element.querySelector(".label-transform"); - this.contentTransform = this.element.querySelector(".content-transform"); - this.labelStyles = this.element.querySelector(".label-styles"); - this.contentStyles = this.element.querySelector(".content-styles"); - - this._mainCollapser = Collapser.create(); - this._mainCollapser.clicker = this.label; - this._mainCollapser.myContent = this.myContent; - this._mainCollapser.contentHeight = 60; - this._mainCollapser.isLabelClickable = false; - this._mainCollapser.element = this.myContent; - this._mainCollapser.isCollapsed = this.isMainCollapsed; - this._mainCollapser.isAnimated = true; - Object.defineBinding(this._mainCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isMainCollapsed", - oneway: false - }); - - - Object.defineBinding(this._mainCollapser, "bypassAnimation", { - boundObject: this, - boundObjectPropertyPath: "animateCollapser", - oneway: false, - boundValueMutator: function(value) { - console.log('mutating') - return !value - } - }); - */ - /* - this._mainCollapser.labelClickEvent = function () { - that.isMainCollapsed = that._mainCollapser.isCollapsed; - }; - */ - //this._mainCollapser.needsDraw = true; -/* - this._positionCollapser = Collapser.create(); - this._positionCollapser.clicker = this.labelPosition; - this._positionCollapser.myContent = this.contentPosition; - this._positionCollapser.contentHeight = 40; - this._positionCollapser.isLabelClickable = true; - this._positionCollapser.element = this.contentPosition; - this._positionCollapser.isCollapsed = this.isPositionCollapsed; - this._positionCollapser.isAnimated = true; - Object.defineBinding(this._positionCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isPositionCollapsed", - oneway: false - }); - */ - - /* - this._positionCollapser.labelClickEvent = function () { - that.isPositionCollapsed = that._positionCollapser.isCollapsed; - }; - */ - //this._positionCollapser.needsDraw = true; -/* - this._transformCollapser = Collapser.create(); - this._transformCollapser.clicker = this.labelTransform; - this._transformCollapser.myContent = this.contentTransform; - this._transformCollapser.contentHeight = 100; - this._transformCollapser.isLabelClickable = false; - this._transformCollapser.element = this.contentTransform; - this._transformCollapser.isCollapsed = this.isTransformCollapsed; - this._transformCollapser.isAnimated = true; - Object.defineBinding(this._transformCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isTransformCollapsed", - oneway: false - }); - */ - - /* - this._transformCollapser.labelClickEvent = function () { - that.isTransformCollapsed = that._transformCollapser.isCollapsed; - }; - */ - //this._transformCollapser.needsDraw = true; - -/* - this._styleCollapser = Collapser.create(); - this._styleCollapser.clicker = this.labelStyles; - this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 0; - this._styleCollapser.isLabelClickable = false; - this._styleCollapser.element = this.contentStyles; - this._styleCollapser.isCollapsed = this.isStyleCollapsed; - this._styleCollapser.isAnimated = true; - Object.defineBinding(this._styleCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isStyleCollapsed", - oneway: false - }); - - */ - /* - this._styleCollapser.labelClickEvent = function () { - that.isStyleCollapsed = that._styleCollapser.isCollapsed; - }; - */ - //this._styleCollapser.needsDraw = true; // Register event handler for layer events. //defaultEventManager.addEventListener("layerEvent", this, false); -- cgit v1.2.3