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/Collapser.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Collapser.js') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index ad490c2e..d161cdd7 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage, }, _bypassAnimation : { - value: false + value: true }, bypassAnimation: { get: function() { @@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage, } }, + _isToggling: { + serializable: true, + value: true + }, + isToggling: { + serializable: true, + get: function() { + return this._isToggling; + }, + set: function(newVal) { + if (newVal !== this._isToggling) { + this._isToggling = newVal; + + if (this.bypassAnimation) { + this.isAnimated = false; + } + this.myContent.classList.remove(this.transitionClass); + this.handleCollapserLabelClick(); + } + } + }, + /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -321,7 +343,7 @@ var Montage = require("montage/core/core").Montage, } if (this.bypassAnimation) { - this.bypassAnimation = false; + this.bypassAnimation = true; this.isAnimated = true; } } -- 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/Collapser.js | 55 ++++++++++++++--------------------------- 1 file changed, 19 insertions(+), 36 deletions(-) (limited to 'js/panels/Timeline/Collapser.js') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index d161cdd7..32733b0a 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -22,7 +22,7 @@ * the transition will not work. Subsequent collapses (and expansions) will transition as expected. * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to * false for collapsers that will only be operated remotely. - * toggle(): Manually toggle the expand/collapse of the content. + * isToggling: Set this anually toggle the expand/collapse of the content. * */ var Montage = require("montage/core/core").Montage, @@ -76,8 +76,12 @@ var Montage = require("montage/core/core").Montage, }, set: function(newVal) { this._bypassAnimation= newVal; + //console.log('bypassAnimation setter ' + newVal) } }, + _oldAnimated : { + value: false + }, // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. // Note that this CSS class must be defined in your style sheet with the desired transitions. @@ -104,7 +108,7 @@ var Montage = require("montage/core/core").Montage, set: function(newVal) { if (newVal !== this._isCollapsed) { this._isCollapsed = newVal; - this.needsDraw = true; + //this.needsDraw = true; } } @@ -144,31 +148,8 @@ var Montage = require("montage/core/core").Montage, this._isLabelClickable = newVal; } }, - - // labelClickEvent: an event to fire when the label is clicked. - _labelClickEvent: { - value: false - }, - labelClickEvent: { - get: function() { - return this._labelClickEvent; - }, - set: function(newVal) { - this._labelClickEvent = newVal; - } - }, - - // toggle: manually toggle the collapser. - toggle: { - value: function() { - if (this.bypassAnimation) { - this.isAnimated = false; - } - this.myContent.classList.remove(this.transitionClass); - this.handleCollapserLabelClick(); - } - }, - + + // isToggling: Bindable property. Set this (to anything) to trigger a toggle. _isToggling: { serializable: true, value: true @@ -182,7 +163,8 @@ var Montage = require("montage/core/core").Montage, if (newVal !== this._isToggling) { this._isToggling = newVal; - if (this.bypassAnimation) { + if (this.bypassAnimation === true) { + this._oldAnimated = this.isAnimated; this.isAnimated = false; } this.myContent.classList.remove(this.transitionClass); @@ -198,13 +180,18 @@ 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 @@ -307,11 +294,6 @@ var Montage = require("montage/core/core").Montage, // Set the component to run its draw cycle. this.needsDraw = true; - - // Dispatch my labelClick event - if (this.labelClickEvent) { - this.labelClickEvent(this.bypassAnimation); - } } }, @@ -342,9 +324,10 @@ var Montage = require("montage/core/core").Montage, } - if (this.bypassAnimation) { + if (this.bypassAnimation === true) { + this.isAnimated = this._oldAnimated; + } else { this.bypassAnimation = true; - this.isAnimated = true; } } } -- 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/Collapser.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/Collapser.js') 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: { -- cgit v1.2.3