diff options
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 117 |
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> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, 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 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE 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 | */ |
52 | var Montage = require("montage/core/core").Montage, | 53 | var 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 |