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.js635
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>
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
@@ -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 */
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,
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