aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Collapser.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r--js/panels/Timeline/Collapser.js117
1 files changed, 59 insertions, 58 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 41aa8f39..8db1b17f 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -1,24 +1,25 @@
1/* <copyright> 1/* <copyright>
2Copyright (c) 2012, Motorola Mobility, Inc 2Copyright (c) 2012, Motorola Mobility LLC.
3All Rights Reserved. 3All Rights Reserved.
4BSD License.
5 4
6Redistribution and use in source and binary forms, with or without 5Redistribution and use in source and binary forms, with or without
7modification, are permitted provided that the following conditions are met: 6modification, are permitted provided that the following conditions are met:
8 7
9 - Redistributions of source code must retain the above copyright notice, 8* Redistributions of source code must retain the above copyright notice,
10 this list of conditions and the following disclaimer. 9 this list of conditions and the following disclaimer.
11 - Redistributions in binary form must reproduce the above copyright 10
12 notice, this list of conditions and the following disclaimer in the 11* Redistributions in binary form must reproduce the above copyright notice,
13 documentation and/or other materials provided with the distribution. 12 this list of conditions and the following disclaimer in the documentation
14 - Neither the name of Motorola Mobility nor the names of its contributors 13 and/or other materials provided with the distribution.
15 may be used to endorse or promote products derived from this software 14
16 without specific prior written permission. 15* Neither the name of Motorola Mobility LLC nor the names of its
16 contributors may be used to endorse or promote products derived from this
17 software without specific prior written permission.
17 18
18THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
19AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
20IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 21IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
21ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE 22ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
22LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 23LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
23CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 24CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
24SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 25SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
@@ -38,16 +39,16 @@ POSSIBILITY OF SUCH DAMAGE.
38 * Can be manually set as well. 39 * Can be manually set as well.
39 * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed". 40 * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed".
40 * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false). 41 * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
41 * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the 42 * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the
42 * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions. 43 * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions.
43 * Defaults to "collapsible-transition". 44 * Defaults to "collapsible-transition".
44 * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content 45 * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content
45 * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded 46 * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded
46 * the transition will not work. Subsequent collapses (and expansions) will transition as expected. 47 * the transition will not work. Subsequent collapses (and expansions) will transition as expected.
47 * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to 48 * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to
48 * false for collapsers that will only be operated remotely. 49 * false for collapsers that will only be operated remotely.
49 * isToggling: Set this anually toggle the expand/collapse of the content. 50 * isToggling: Set this anually toggle the expand/collapse of the content.
50 * 51 *
51 */ 52 */
52var Montage = require("montage/core/core").Montage, 53var Montage = require("montage/core/core").Montage,
53 Component = require("montage/ui/component").Component, 54 Component = require("montage/ui/component").Component,
@@ -57,9 +58,9 @@ var Montage = require("montage/core/core").Montage,
57 hasTemplate:{ 58 hasTemplate:{
58 value: false 59 value: false
59 }, 60 },
60 61
61 /* === BEGIN: Models === */ 62 /* === BEGIN: Models === */
62 63
63 // contentHeight: Stores the height of the content just before collapse. 64 // contentHeight: Stores the height of the content just before collapse.
64 _contentHeight: { 65 _contentHeight: {
65 value: 0 66 value: 0
@@ -73,13 +74,13 @@ var Montage = require("montage/core/core").Montage,
73 this._contentHeight = newVal; 74 this._contentHeight = newVal;
74 } 75 }
75 }, 76 },
76 77
77 // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. 78 // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle.
78 _isCollapsing: { 79 _isCollapsing: {
79 value: false 80 value: false
80 }, 81 },
81 82
82 // isAnimated: boolean to apply transition to expand/collapse 83 // isAnimated: boolean to apply transition to expand/collapse
83 _isAnimated : { 84 _isAnimated : {
84 value: false 85 value: false
85 }, 86 },
@@ -92,7 +93,7 @@ var Montage = require("montage/core/core").Montage,
92 this._isAnimated = newVal; 93 this._isAnimated = newVal;
93 } 94 }
94 }, 95 },
95 96
96 _bypassAnimation : { 97 _bypassAnimation : {
97 value: true 98 value: true
98 }, 99 },
@@ -109,7 +110,7 @@ var Montage = require("montage/core/core").Montage,
109 _oldAnimated : { 110 _oldAnimated : {
110 value: false 111 value: false
111 }, 112 },
112 113
113 // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. 114 // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
114 // Note that this CSS class must be defined in your style sheet with the desired transitions. 115 // Note that this CSS class must be defined in your style sheet with the desired transitions.
115 _transitionClass : { 116 _transitionClass : {
@@ -123,7 +124,7 @@ var Montage = require("montage/core/core").Montage,
123 this._transitionClass = newVal; 124 this._transitionClass = newVal;
124 } 125 }
125 }, 126 },
126 127
127 // isCollapsed: is the content actually collapsed at this moment 128 // isCollapsed: is the content actually collapsed at this moment
128 _isCollapsed: { 129 _isCollapsed: {
129 value: "" 130 value: ""
@@ -140,7 +141,7 @@ var Montage = require("montage/core/core").Montage,
140 } 141 }
141 } 142 }
142 }, 143 },
143 144
144 // collapsedClass: the class to apply to the clicker and content when the content is collapsed. 145 // collapsedClass: the class to apply to the clicker and content when the content is collapsed.
145 _collapsedClass : { 146 _collapsedClass : {
146 value: "collapsible-collapsed" 147 value: "collapsible-collapsed"
@@ -153,14 +154,14 @@ var Montage = require("montage/core/core").Montage,
153 this._collapsedClass = newVal; 154 this._collapsedClass = newVal;
154 } 155 }
155 }, 156 },
156 157
157 // _origOverflowValue: Stores the original overflow value of the collapsible element. 158 // _origOverflowValue: Stores the original overflow value of the collapsible element.
158 // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden. 159 // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden.
159 // But when the collapsible element is open, we will need overflow to return to its original value. 160 // But when the collapsible element is open, we will need overflow to return to its original value.
160 _origOverflowValue : { 161 _origOverflowValue : {
161 value: false 162 value: false
162 }, 163 },
163 164
164 // isLabelClickable: Boolean for whether or not the label is clickable. If set to false, 165 // isLabelClickable: Boolean for whether or not the label is clickable. If set to false,
165 // the label click listener is never applied. For collapsibles that will only be operated remotely. 166 // the label click listener is never applied. For collapsibles that will only be operated remotely.
166 // Defaults to true. 167 // Defaults to true.
@@ -217,7 +218,7 @@ var Montage = require("montage/core/core").Montage,
217 set: function(newVal) { 218 set: function(newVal) {
218 if (newVal !== this._isToggling) { 219 if (newVal !== this._isToggling) {
219 this._isToggling = newVal; 220 this._isToggling = newVal;
220 221
221 if (this.bypassAnimation === true) { 222 if (this.bypassAnimation === true) {
222 this._oldAnimated = this.isAnimated; 223 this._oldAnimated = this.isAnimated;
223 this.isAnimated = false; 224 this.isAnimated = false;
@@ -227,11 +228,11 @@ var Montage = require("montage/core/core").Montage,
227 } 228 }
228 } 229 }
229 }, 230 },
230 231
231 /* === END: Models === */ 232 /* === END: Models === */
232 233
233 /* === BEGIN: Draw cycle === */ 234 /* === BEGIN: Draw cycle === */
234 235
235 prepareForDraw: { 236 prepareForDraw: {
236 value: function() { 237 value: function() {
237 // Get the original value of the overflow property: 238 // Get the original value of the overflow property:
@@ -239,7 +240,7 @@ var Montage = require("montage/core/core").Montage,
239 if (this.isCollapsed === false) { 240 if (this.isCollapsed === false) {
240 this.myContent.style.height = "auto"; 241 this.myContent.style.height = "auto";
241 } 242 }
242 243
243 244
244 // If the content area is supposed to start out collapsed: 245 // If the content area is supposed to start out collapsed:
245 if (this.isCollapsed) { 246 if (this.isCollapsed) {
@@ -259,19 +260,19 @@ var Montage = require("montage/core/core").Montage,
259 }, 260 },
260 draw: { 261 draw: {
261 value: function() { 262 value: function() {
262 // Is the content area expanding/collapsing? 263 // Is the content area expanding/collapsing?
263 this.myContent.classList.remove(this.transitionClass); 264 this.myContent.classList.remove(this.transitionClass);
264 if (this._isCollapsing) { 265 if (this._isCollapsing) {
265 266
266 if (this.isAnimated) { 267 if (this.isAnimated) {
267 // Apply the transition class to the content. 268 // Apply the transition class to the content.
268 this.myContent.classList.add(this.transitionClass); 269 this.myContent.classList.add(this.transitionClass);
269