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.js612
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 */
52var Montage = require("montage/core/core").Montage, 52var 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
<