diff options
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 635 |
1 files changed, 318 insertions, 317 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 41aa8f39..8433589c 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 |
@@ -31,151 +32,151 @@ POSSIBILITY OF SUCH DAMAGE. | |||
31 | /* | 32 | /* |
32 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. | 33 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. |
33 | * Required properties: | 34 | * Required properties: |
34 | * clicker: The element that will be clicked on. | 35 | * clicker: The element that will be clicked on. |
35 | * content: The element that will expand or collapse as the clicker is clicked on. | 36 | * content: The element that will expand or collapse as the clicker is clicked on. |
36 | * Optional properties: | 37 | * Optional properties: |
37 | * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state. | 38 | * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state. |
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, |
54 | Collapser = exports.Collapser = Montage.create(Component, { | 55 | Collapser = exports.Collapser = Montage.create(Component, { |
55 | 56 | ||
56 | // This component has no template. | 57 | // This component has no template. |
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 |
66 | }, | 67 | }, |
67 | contentHeight: { | 68 | contentHeight: { |
68 | serializable: true, | 69 | serializable: true, |
69 | get: function() { | 70 | get: function() { |
70 | return this._contentHeight; | 71 | return this._contentHeight; |
71 | }, | 72 | }, |
72 | set: function(newVal) { | 73 | set: function(newVal) { |
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 | }, |
86 | isAnimated: { | 87 | isAnimated: { |
87 | serializable: true, | 88 | serializable: true, |
88 | get: function() { | 89 | get: function() { |
89 | return this._isAnimated; | 90 | return this._isAnimated; |
90 | }, | 91 | }, |
91 | set: function(newVal) { | 92 | set: function(newVal) { |
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 | }, |
99 | bypassAnimation: { | 100 | bypassAnimation: { |
100 | serializable: true, | 101 | serializable: true, |
101 | get: function() { | 102 | get: function() { |
102 | return this._bypassAnimation; | 103 | return this._bypassAnimation; |
103 | }, | 104 | }, |
104 | set: function(newVal) { | 105 | set: function(newVal) { |
105 | this._bypassAnimation= newVal; | 106 | this._bypassAnimation= newVal; |
106 | //console.log('bypassAnimation setter ' + newVal) | 107 | //console.log('bypassAnimation setter ' + newVal) |
107 | } | 108 | } |
108 | }, | 109 | }, |
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 : { |
116 | value: "collapsible-transition" | 117 | value: "collapsible-transition" |
117 | }, | 118 | }, |
118 | transitionClass: { | 119 | transitionClass: { |
119 | get: function() { | 120 | get: function() { |
120 | return this._transitionClass; | 121 | return this._transitionClass; |
121 | }, | 122 | }, |
122 | set: function(newVal) { | 123 | set: function(newVal) { |
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: "" |
130 | }, | 131 | }, |
131 | isCollapsed : { | 132 | isCollapsed : { |
132 | serializable: true, | 133 | serializable: true, |
133 | get: function() { | 134 | get: function() { |
134 | return this._isCollapsed; | 135 | return this._isCollapsed; |
135 | }, | 136 | }, |
136 | set: function(newVal) { | 137 | set: function(newVal) { |
137 | if (newVal !== this._isCollapsed) { | 138 | if (newVal !== this._isCollapsed) { |
138 | this._isCollapsed = newVal; | 139 | this._isCollapsed = newVal; |
139 | //this.needsDraw = true; | 140 | //this.needsDraw = true; |
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 |