aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/Layer.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js511
1 files changed, 511 insertions, 0 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
new file mode 100644
index 00000000..29171272
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,511 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3var Collapser = require("js/panels/Timeline/Collapser").Collapser;
4var Hintable = require("js/components/hintable.reel").Hintable;
5var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
6var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
7var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
8
9var Layer = exports.Layer = Montage.create(Component, {
10
11 hasTemplate:{
12 value: true
13 },
14
15 /* Begin: Models */
16
17 /* Main collapser model: the main collapser for the layer */
18 _mainCollapser : {
19 value: false
20 },
21 mainCollapser: {
22 get: function() {
23 return this._mainCollapser;
24 },
25 set: function(newVal) {
26 this._mainCollapser = newVal;
27 }
28 },
29
30 /* Style models: the array of styles, and the repetition that uses them */
31 _arrLayerStyles : {
32 serializable: true,
33 enumerable: true,
34 serializable: true,
35 value: []
36 },
37 arrLayerStyles : {
38 serializable: true,
39 enumerable: true,
40 serializable: true,
41 get: function() {
42 return this._arrLayerStyles;
43 },
44 set: function(newVal) {
45 this._arrLayerStyles = newVal;
46 }
47 },
48 _styleRepetition : {
49 value: false
50 },
51 styleRepetition : {
52 get: function() {
53 return this._styleRepetition;
54 },
55 set: function(newVal) {
56 this._styleRepetition = newVal;
57 }
58 },
59 _styleCounter : {
60 value: 0
61 },
62
63 /* Layer models: the name, ID, and selected and animation booleans for the layer */
64 _layerName:{
65 serializable: true,
66 value:null,
67 writable:true,
68 enumerable:true
69 },
70
71 layerName:{
72 serializable: true,
73 get:function(){
74 return this._layerName;
75 },
76 set:function(newVal){
77 if (newVal !== this._layerName) {
78 this._layerEditable.value = newVal;
79 this._layerName = newVal;
80 this._layerEditable.needsDraw = true;
81 this.needsDraw = true;
82
83 }
84
85 }
86 },
87 _layerID:{
88 value:null,
89 writable:true,
90 serializable: true,
91 enumerable:true
92 },
93
94 layerID:{
95 serializable: true,
96 get:function(){
97 return this._layerID;
98 },
99 set:function(value){
100 this._layerID = value;
101 }
102 },
103 _isSelected:{
104 value: false,
105 writable: true,
106 enumerable: false
107 },
108
109 isSelected:{
110 get:function(){
111 return this._isSelected;
112 },
113 set:function(value){
114 this._isSelected = value;
115 }
116 },
117 _isAnimated:{
118 value: false,
119 writable: true,
120 enumerable: false
121 },
122
123 isAnimated:{
124 get:function(){
125 return this._isAnimated;
126 },
127 set:function(value){
128 this._isAnimated = value;
129 }
130 },
131 _justAdded: {
132 value: false
133 },
134 _layerEditable : {
135 value: false
136 },
137
138 // Are the various collapsers collapsed or not
139 _isMainCollapsed : {
140 value: ""
141 },
142 isMainCollapsed : {
143 get: function() {
144 return this._isMainCollapsed;
145 },
146 set: function(newVal) {
147 if (newVal !== this._isMainCollapsed) {
148 this._isMainCollapsed = newVal;
149 this.needsDraw = true;
150 }
151 }
152 },
153
154 _isTransformCollapsed : {
155 value: true
156 },
157 isTransformCollapsed : {
158 get: function() {
159 return this._isTransformCollapsed;
160 },
161 set: function(newVal) {
162 if (newVal !== this._isTransformCollapsed) {
163 this._isTransformCollapsed = newVal;
164 this.needsDraw = true;
165 }
166 }
167 },
168
169 _isPositionCollapsed : {
170 value: true
171 },
172 isPositionCollapsed : {
173 get: function() {
174 return this._isPositionCollapsed;
175 },
176 set: function(newVal) {
177 if (newVal !== this._isPositionCollapsed) {
178 this._isPositionCollapsed = newVal;
179 this.needsDraw = true;
180 }
181 }
182 },
183
184 _isStyleCollapsed : {
185 value: true
186 },
187 isStyleCollapsed : {
188 get: function() {
189 return this._isStyleCollapsed;
190 },
191 set: function(newVal) {
192 if (newVal !== this._isStyleCollapsed) {
193 this._isStyleCollapsed = newVal;
194 this.needsDraw = true;
195 }
196 }
197 },
198
199
200 /* END: Models */
201
202 /* Begin: Draw cycle */
203 prepareForDraw: {
204 value: function() {
205
206 // Initialize myself
207 this.init();
208
209 var that = this;
210
211 this.positionCollapser = Collapser.create();
212 this.transformCollapser = Collapser.create();
213 this.styleCollapser = Collapser.create();
214
215 // Make it editable!
216 this._layerEditable = Hintable.create();
217 this._layerEditable.element = this.titleSelector;
218 this.titleSelector.identifier = "selectorEditable";
219 this.titleSelector.addEventListener("click", this, false);
220 this._layerEditable.addEventListener("blur", function(event) {
221 that.handleSelectorEditableBlur(event);
222 }, false);
223 this._layerEditable.addEventListener("change", function(event) {
224 that.dynamicLayerName.value = that._layerEditable.value;
225 that.needsDraw = true;
226 }, false);
227 this._layerEditable.editingClass = "editable2";
228 this._layerEditable.value = this.layerName;
229 this._layerEditable.needsDraw = true;
230
231 // Change the markup into collapsible sections using the nifty Collapser component!
232 this.mainCollapser = Collapser.create();
233 this.mainCollapser.clicker = this.clicker;
234 this.mainCollapser.myContent = this.myContent;
235 this.mainCollapser.contentHeight = 60;