diff options
author | Pushkar Joshi | 2012-02-24 12:08:49 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-02-24 12:08:49 -0800 |
commit | 03ca7a5ed13c25faaa9100bb666e062fd15335e6 (patch) | |
tree | c51112223ceb9121cd595a60335eb2795215590f /js/panels/Timeline | |
parent | fcb12cc09eb3cd3b42bd215877ba18f449275b75 (diff) | |
parent | 053fc63a2950c7a5ee4ebf98033b64d474a3c46e (diff) | |
download | ninja-03ca7a5ed13c25faaa9100bb666e062fd15335e6.tar.gz |
Merge branch 'pentool' into brushtool
Conflicts:
imports/codemirror/mode/scheme/scheme.js
js/tools/BrushTool.js
Diffstat (limited to 'js/panels/Timeline')
59 files changed, 5960 insertions, 239 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js new file mode 100644 index 00000000..5de884a9 --- /dev/null +++ b/js/panels/Timeline/Collapser.js | |||
@@ -0,0 +1,326 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | /* | ||
8 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. | ||
9 | * Required properties: | ||
10 | * clicker: The element that will be clicked on. | ||
11 | * content: The element that will expand or collapse as the clicker is clicked on. | ||
12 | * Optional properties: | ||
13 | * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state. | ||
14 | * Can be manually set as well. | ||
15 | * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed". | ||
16 | * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false). | ||
17 | * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the | ||
18 | * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions. | ||
19 | * Defaults to "collapsible-transition". | ||
20 | * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content | ||
21 | * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded | ||
22 | * the transition will not work. Subsequent collapses (and expansions) will transition as expected. | ||
23 | * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to | ||
24 | * false for collapsers that will only be operated remotely. | ||
25 | * toggle(): Manually toggle the expand/collapse of the content. | ||
26 | * | ||
27 | */ | ||
28 | var Montage = require("montage/core/core").Montage, | ||
29 | Component = require("montage/ui/component").Component, | ||
30 | Collapser = exports.Collapser = Montage.create(Component, { | ||
31 | |||
32 | // This component has no template. | ||
33 | hasTemplate:{ | ||
34 | value: false | ||
35 | }, | ||
36 | |||
37 | /* === BEGIN: Models === */ | ||
38 | |||
39 | // contentHeight: Stores the height of the content just before collapse. | ||
40 | _contentHeight: { | ||
41 | value: 0 | ||
42 | }, | ||
43 | contentHeight: { | ||
44 | get: function() { | ||
45 | return this._contentHeight; | ||
46 | }, | ||
47 | set: function(newVal) { | ||
48 | this._contentHeight = newVal; | ||
49 | } | ||
50 | }, | ||
51 | |||
52 | // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. | ||
53 | _isCollapsing: { | ||
54 | value: false | ||
55 | }, | ||
56 | |||
57 | // isAnimated: boolean to apply transition to expand/collapse | ||
58 | _isAnimated : { | ||
59 | value: false | ||
60 | }, | ||
61 | isAnimated: { | ||
62 | get: function() { | ||
63 | return this._isAnimated; | ||
64 | }, | ||
65 | set: function(newVal) { | ||
66 | this._isAnimated = newVal; | ||
67 | } | ||
68 | }, | ||
69 | |||
70 | _bypassAnimation : { | ||
71 | value: false | ||
72 | }, | ||
73 | bypassAnimation: { | ||
74 | get: function() { | ||
75 | return this._bypassAnimation; | ||
76 | }, | ||
77 | set: function(newVal) { | ||
78 | this._bypassAnimation= newVal; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. | ||
83 | // Note that this CSS class must be defined in your style sheet with the desired transitions. | ||
84 | _transitionClass : { | ||
85 | value: "collapsible-transition" | ||
86 | }, | ||
87 | transitionClass: { | ||
88 | get: function() { | ||
89 | return this._transitionClass; | ||
90 | }, | ||
91 | set: function(newVal) { | ||
92 | this._transitionClass = newVal; | ||
93 | } | ||
94 | }, | ||
95 | |||
96 | // isCollapsed: is the content actually collapsed at this moment | ||
97 | _isCollapsed: { | ||
98 | value: "" | ||
99 | }, | ||
100 | isCollapsed : { | ||
101 | get: function() { | ||
102 | return this._isCollapsed; | ||
103 | }, | ||
104 | set: function(newVal) { | ||
105 | if (newVal !== this._isCollapsed) { | ||
106 | this._isCollapsed = newVal; | ||
107 | this.needsDraw = true; | ||
108 | } | ||
109 | |||
110 | } | ||
111 | }, | ||
112 | |||
113 | // collapsedClass: the class to apply to the clicker and content when the content is collapsed. | ||
114 | _collapsedClass : { | ||
115 | value: "collapsible-collapsed" | ||
116 | }, | ||
117 | collapsedClass: { | ||
118 | get: function() { | ||
119 | return this._collapsedClass; | ||
120 | }, | ||
121 | set: function(newVal) { | ||
122 | this._collapsedClass = newVal; | ||
123 | } | ||
124 | }, | ||
125 | |||
126 | // _origOverflowValue: Stores the original overflow value of the collapsible element. | ||
127 | // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden. | ||
128 | // But when the collapsible element is open, we will need overflow to return to its original value. | ||
129 | _origOverflowValue : { | ||
130 | value: false | ||
131 | }, |