aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Collapser.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-07-09 14:35:44 -0700
committerValerio Virgillito2012-07-09 14:35:44 -0700
commit84b3327bd92faafab7954b5eb64c7abe24a3fe13 (patch)
tree3f56cbed2f08c5a81ea79eaf0bcb9bd031d8a627 /js/panels/Timeline/Collapser.js
parentc0a42c56f768a873ba637f5b86d5f6a84d4a3312 (diff)
parent40c6eb2c06b34f65a74d59ef9687251952858bab (diff)
downloadninja-84b3327bd92faafab7954b5eb64c7abe24a3fe13.tar.gz
Merge branch 'normalize' of https://github.com/kriskowal/ninja-internal
Conflicts: js/components/gradientpicker.reel/gradientpicker.js js/components/tools-properties/text-properties.reel/text-properties.js js/document/views/base.js js/document/views/design.js js/helper-classes/3D/StageLine.js js/helper-classes/3D/draw-utils.js js/lib/drawing/world.js js/lib/geom/circle.js js/lib/geom/line.js js/lib/geom/rectangle.js js/lib/geom/shape-primitive.js js/lib/rdge/materials/bump-metal-material.js js/lib/rdge/materials/flag-material.js js/lib/rdge/materials/fly-material.js js/lib/rdge/materials/julia-material.js js/lib/rdge/materials/keleidoscope-material.js js/lib/rdge/materials/mandel-material.js js/lib/rdge/materials/material.js js/lib/rdge/materials/plasma-material.js js/lib/rdge/materials/pulse-material.js js/lib/rdge/materials/radial-gradient-material.js js/lib/rdge/materials/taper-material.js js/lib/rdge/materials/twist-vert-material.js js/lib/rdge/materials/water-material.js js/panels/Materials/materials-library-panel.reel/materials-library-panel.html js/panels/Materials/materials-library-panel.reel/materials-library-panel.js js/panels/Materials/materials-popup.reel/materials-popup.html js/panels/Materials/materials-popup.reel/materials-popup.js js/tools/LineTool.js Signed-off-by: Valerio Virgillito <valerio@motorola.com>
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 },