diff options
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 612 |
1 files changed, 306 insertions, 306 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 41aa8f39..e3d425ad 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -31,151 +31,151 @@ POSSIBILITY OF SUCH DAMAGE. | |||
31 | /* | 31 | /* |
32 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. | 32 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. |
33 | * Required properties: | 33 | * Required properties: |
34 | * clicker: The element that will be clicked on. | 34 | * clicker: The element that will be clicked on. |
35 | * content: The element that will expand or collapse as the clicker is clicked on. | 35 | * content: The element that will expand or collapse as the clicker is clicked on. |
36 | * Optional properties: | 36 | * Optional properties: |
37 | * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state. | 37 | * 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. | 38 | * 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". | 39 | * 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). | 40 | * 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 | 41 | * 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. | 42 | * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions. |
43 | * Defaults to "collapsible-transition". | 43 | * Defaults to "collapsible-transition". |
44 | * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content | 44 | * 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 | 45 | * (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. | 46 | * 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 | 47 | * 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. | 48 | * false for collapsers that will only be operated remotely. |
49 | * isToggling: Set this anually toggle the expand/collapse of the content. | 49 | * isToggling: Set this anually toggle the expand/collapse of the content. |
50 | * | 50 | * |
51 | */ | 51 | */ |
52 | var Montage = require("montage/core/core").Montage, | 52 | var Montage = require("montage/core/core").Montage, |
53 | Component = require("montage/ui/component").Component, | 53 | Component = require("montage/ui/component").Component, |
54 | Collapser = exports.Collapser = Montage.create(Component, { | 54 | Collapser = exports.Collapser = Montage.create(Component, { |
55 | 55 | ||
56 | // This component has no template. | 56 | // This component has no template. |
57 | hasTemplate:{ | 57 | hasTemplate:{ |
58 | value: false | 58 | value: false |
59 | }, | 59 | }, |
60 | 60 | ||
61 | /* === BEGIN: Models === */ | 61 | /* === BEGIN: Models === */ |
62 | 62 | ||
63 | // contentHeight: Stores the height of the content just before collapse. | 63 | // contentHeight: Stores the height of the content just before collapse. |
64 | _contentHeight: { | 64 | _contentHeight: { |
65 | value: 0 | 65 | value: 0 |
66 | }, | 66 | }, |
67 | contentHeight: { | 67 | contentHeight: { |
68 | serializable: true, | 68 | serializable: true, |
69 | get: function() { | 69 | get: function() { |
70 | return this._contentHeight; | 70 | return this._contentHeight; |
71 | }, | 71 | }, |
72 | set: function(newVal) { | 72 | set: function(newVal) { |
73 | this._contentHeight = newVal; | 73 | this._contentHeight = newVal; |
74 | } | 74 | } |
75 | }, | 75 | }, |
76 | 76 | ||
77 | // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. | 77 | // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. |
78 | _isCollapsing: { | 78 | _isCollapsing: { |
79 | value: false | 79 | value: false |
80 | }, | 80 | }, |
81 | 81 | ||
82 | // isAnimated: boolean to apply transition to expand/collapse | 82 | // isAnimated: boolean to apply transition to expand/collapse |
83 | _isAnimated : { | 83 | _isAnimated : { |
84 | value: false | 84 | value: false |
85 | }, | 85 | }, |
86 | isAnimated: { | 86 | isAnimated: { |
87 | serializable: true, | 87 | serializable: true, |
88 | get: function() { | 88 | get: function() { |
89 | return this._isAnimated; | 89 | return this._isAnimated; |
90 | }, | 90 | }, |
91 | set: function(newVal) { | 91 | set: function(newVal) { |
92 | this._isAnimated = newVal; | 92 | this._isAnimated = newVal; |
93 | } | 93 | } |
94 | }, | 94 | }, |
95 | 95 | ||
96 | _bypassAnimation : { | 96 | _bypassAnimation : { |
97 | value: true | 97 | value: true |
98 | }, | 98 | }, |
99 | bypassAnimation: { | 99 | bypassAnimation: { |
100 | serializable: true, | 100 | serializable: true, |
101 | get: function() { | 101 | get: function() { |
102 | return this._bypassAnimation; | 102 | return this._bypassAnimation; |
103 | }, | 103 | }, |
104 | set: function(newVal) { | 104 | set: function(newVal) { |
105 | this._bypassAnimation= newVal; | 105 | this._bypassAnimation= newVal; |
106 | //console.log('bypassAnimation setter ' + newVal) | 106 | //console.log('bypassAnimation setter ' + newVal) |
107 | } | 107 | } |
108 | }, | 108 | }, |
109 | _oldAnimated : { | 109 | _oldAnimated : { |
110 | value: false | 110 | value: false |
111 | }, | 111 | }, |
112 | 112 | ||
113 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. | 113 | // 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. | 114 | // Note that this CSS class must be defined in your style sheet with the desired transitions. |
115 | _transitionClass : { | 115 | _transitionClass : { |
116 | value: "collapsible-transition" | 116 | value: "collapsible-transition" |
117 | }, | 117 | }, |
118 | transitionClass: { | 118 | transitionClass: { |
119 | get: function() { | 119 | get: function() { |
120 | return this._transitionClass; | 120 | return this._transitionClass; |
121 | }, | 121 | }, |
122 | set: function(newVal) { | 122 | set: function(newVal) { |
123 | this._transitionClass = newVal; | 123 | this._transitionClass = newVal; |
124 | } | 124 | } |
125 | }, | 125 | }, |
126 | 126 | ||
127 | // isCollapsed: is the content actually collapsed at this moment | 127 | // isCollapsed: is the content actually collapsed at this moment |
128 | _isCollapsed: { | 128 | _isCollapsed: { |
129 | value: "" | 129 | value: "" |
130 | }, | 130 | }, |
131 | isCollapsed : { | 131 | isCollapsed : { |
132 | serializable: true, | 132 | serializable: true, |
133 | get: function() { | 133 | get: function() { |
134 | return this._isCollapsed; | 134 | return this._isCollapsed; |
135 | }, | 135 | }, |
136 | set: function(newVal) { | 136 | set: function(newVal) { |
137 | if (newVal !== this._isCollapsed) { | 137 | if (newVal !== this._isCollapsed) { |
138 | this._isCollapsed = newVal; | 138 | this._isCollapsed = newVal; |
139 | //this.needsDraw = true; | 139 | //this.needsDraw = true; |
140 | } | 140 | } |
141 | } | 141 | } |
142 | }, | 142 | }, |
143 | 143 | ||
144 | // collapsedClass: the class to apply to the clicker and content when the content is collapsed. | 144 | // collapsedClass: the class to apply to the clicker and content when the content is collapsed. |
145 | _collapsedClass : { | 145 | _collapsedClass : { |
146 | value: "collapsible-collapsed" | 146 | value: "collapsible-collapsed" |
147 | }, | 147 | }, |
148 | collapsedClass: { | 148 | collapsedClass: { |
149 | get: function() { | 149 | get: function() { |
150 | return this._collapsedClass; | 150 | return this._collapsedClass; |
151 | }, | 151 | }, |
152 | set: function(newVal) { | 152 | set: function(newVal) { |
153 | this._collapsedClass = newVal; | 153 | this._collapsedClass = newVal; |
154 | } | 154 | } |
155 | }, | 155 | }, |
156 | 156 | ||
157 | // _origOverflowValue: Stores the original overflow value of the collapsible element. | 157 | // _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. | 158 | // 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. | 159 | // But when the collapsible element is open, we will need overflow to return to its original value. |
160 | _origOverflowValue : { | 160 | _origOverflowValue : { |
161 | value: false | 161 | value: false |
162 | }, | 162 | }, |
163 | 163 | ||
164 | // isLabelClickable: Boolean for whether or not the label is clickable. If set to false, | 164 | // 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. | 165 | // the label click listener is never applied. For collapsibles that will only be operated remotely. |
166 | // Defaults to true. | 166 | // Defaults to true. |
167 | _isLabelClickable : { | 167 | _isLabelClickable : { |
168 | value: true | 168 | value: true |
169 | }, | 169 | }, |
170 | isLabelClickable : { | 170 |