diff options
Diffstat (limited to 'js/panels')
56 files changed, 5395 insertions, 255 deletions
diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js index 69efd6ac..3afe5d5b 100644 --- a/js/panels/Resizer.js +++ b/js/panels/Resizer.js | |||
@@ -92,7 +92,7 @@ exports.Resizer = Montage.create(Component, { | |||
92 | 92 | ||
93 | handleDblclick: { | 93 | handleDblclick: { |
94 | value : function() { | 94 | value : function() { |
95 | this.panel.addEventListener("webkitTransitionEnd", this, true); | 95 | this.panel.addEventListener("webkitTransitionEnd", this, false); |
96 | if (this.isVertical) { | 96 | if (this.isVertical) { |
97 | this.panel.style.height = ""; | 97 | this.panel.style.height = ""; |
98 | } else { | 98 | } else { |
@@ -102,7 +102,7 @@ exports.Resizer = Montage.create(Component, { | |||
102 | } | 102 | } |
103 | }, | 103 | }, |
104 | 104 | ||
105 | captureWebkitTransitionEnd: { | 105 | handleWebkitTransitionEnd: { |
106 | value: function() { | 106 | value: function() { |
107 | if(this.redrawStage) { | 107 | if(this.redrawStage) { |
108 | this.application.ninja.stage.resizeCanvases = true; | 108 | this.application.ninja.stage.resizeCanvases = true; |
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js new file mode 100644 index 00000000..d286d84c --- /dev/null +++ b/js/panels/Timeline/Collapser.js | |||
@@ -0,0 +1,320 @@ | |||
1 | /* | ||
2 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. | ||
3 | * Required properties: | ||
4 | * clicker: The element that will be clicked on. | ||
5 | * content: The element that will expand or collapse as the clicker is clicked on. | ||
6 | * Optional properties: | ||
7 | * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state. | ||
8 | * Can be manually set as well. | ||
9 | * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed". | ||
10 | * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false). | ||
11 | * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the | ||
12 | * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions. | ||
13 | * Defaults to "collapsible-transition". | ||
14 | * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content | ||
15 | * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded | ||
16 | * the transition will not work. Subsequent collapses (and expansions) will transition as expected. | ||
17 | * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to | ||
18 | * false for collapsers that will only be operated remotely. | ||
19 | * toggle(): Manually toggle the expand/collapse of the content. | ||
20 | * | ||
21 | */ | ||
22 | var Montage = require("montage/core/core").Montage, | ||
23 | Component = require("montage/ui/component").Component, | ||
24 | Collapser = exports.Collapser = Montage.create(Component, { | ||
25 | |||
26 | // This component has no template. | ||
27 | hasTemplate:{ | ||
28 | value: false | ||
29 | }, | ||
30 | |||
31 | /* === BEGIN: Models === */ | ||
32 | |||
33 | // contentHeight: Stores the height of the content just before collapse. | ||
34 | _contentHeight: { | ||
35 | value: 0 | ||
36 | }, | ||
37 | contentHeight: { | ||
38 | get: function() { | ||
39 | return this._contentHeight; | ||
40 | }, | ||
41 | set: function(newVal) { | ||
42 | this._contentHeight = newVal; | ||
43 | } | ||
44 | }, | ||
45 | |||
46 | // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. | ||
47 | _isCollapsing: { | ||
48 | value: false | ||
49 | }, | ||
50 | |||
51 | // isAnimated: boolean to apply transition to expand/collapse | ||
52 | _isAnimated : { | ||
53 | value: false | ||
54 | }, | ||
55 | isAnimated: { | ||
56 | get: function() { | ||
57 | return this._isAnimated; | ||
58 | }, | ||
59 | set: function(newVal) { | ||
60 | this._isAnimated = newVal; | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | _bypassAnimation : { | ||
65 | value: false | ||
66 | }, | ||
67 | bypassAnimation: { | ||
68 | get: function() { | ||
69 | return this._bypassAnimation; | ||
70 | }, | ||
71 | set: function(newVal) { | ||
72 | this._bypassAnimation= newVal; | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. | ||
77 | // Note that this CSS class must be defined in your style sheet with the desired transitions. | ||
78 | _transitionClass : { | ||
79 | value: "collapsible-transition" | ||
80 | }, | ||
81 | transitionClass: { | ||
82 | get: function() { | ||
83 | return this._transitionClass; | ||
84 | }, | ||
85 | set: function(newVal) { | ||
86 | this._transitionClass = newVal; | ||
87 | } | ||
88 | }, | ||
89 | |||
90 | // isCollapsed: is the content actually collapsed at this moment | ||
91 | _isCollapsed: { | ||
92 | value: "" | ||
93 | }, | ||
94 | isCollapsed : { | ||
95 | get: function() { | ||
96 | return this._isCollapsed; | ||
97 | }, | ||
98 | set: function(newVal) { | ||
99 | if (newVal !== this._isCollapsed) { | ||
100 | this._isCollapsed = newVal; | ||
101 | this.needsDraw = true; | ||
102 | } | ||
103 | |||
104 | } | ||
105 | }, | ||
106 | |||
107 | // collapsedClass: the class to apply to the clicker and content when the content is collapsed. | ||
108 | _collapsedClass : { | ||
109 | value: "collapsible-collapsed" | ||
110 | }, | ||
111 | collapsedClass: { | ||
112 | get: function() { | ||
113 | return this._collapsedClass; | ||
114 | }, | ||
115 | set: fu |