diff options
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 718 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 124 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 2 |
3 files changed, 408 insertions, 436 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index bfa6f930..1d72199a 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -1,25 +1,24 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility LLC. | 2 | Copyright (c) 2012, Motorola Mobility, Inc |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
4 | 5 | ||
5 | Redistribution and use in source and binary forms, with or without | 6 | Redistribution and use in source and binary forms, with or without |
6 | modification, are permitted provided that the following conditions are met: | 7 | modification, are permitted provided that the following conditions are met: |
7 | 8 | ||
8 | * Redistributions of source code must retain the above copyright notice, | 9 | - Redistributions of source code must retain the above copyright notice, |
9 | this list of conditions and the following disclaimer. | 10 | this list of conditions and the following disclaimer. |
10 | 11 | - Redistributions in binary form must reproduce the above copyright | |
11 | * Redistributions in binary form must reproduce the above copyright notice, | 12 | notice, this list of conditions and the following disclaimer in the |
12 | this list of conditions and the following disclaimer in the documentation | 13 | documentation and/or other materials provided with the distribution. |
13 | and/or other materials provided with the distribution. | 14 | - Neither the name of Motorola Mobility nor the names of its contributors |
14 | 15 | may be used to endorse or promote products derived from this software | |
15 | * Neither the name of Motorola Mobility LLC nor the names of its | 16 | without specific prior written permission. |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
18 | 17 | ||
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE | 21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE |
23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -32,200 +31,240 @@ POSSIBILITY OF SUCH DAMAGE. | |||
32 | /* | 31 | /* |
33 | * Style component: Edits and manages a single style rule for a Layer in the Timeline. | 32 | * Style component: Edits and manages a single style rule for a Layer in the Timeline. |
34 | * Public Properties: | 33 | * Public Properties: |
35 | * editorProperty: The CSS property for the style. | 34 | * editorProperty: The CSS property for the style. |
36 | * editorValue: The value for the editorProperty. | 35 | * editorValue: The value for the editorProperty. |
37 | * whichView: Which view to show, the hintable view (where a new property can be typed in) | 36 | * whichView: Which view to show, the hintable view (where a new property can be typed in) |
38 | * or the propval view (where the property's value can be set with the tweener). | 37 | * or the propval view (where the property's value can be set with the tweener). |
39 | * Valid values are "hintable" and "propval", defaults to "hintable". | 38 | * Valid values are "hintable" and "propval", defaults to "hintable". |
40 | * | 39 | * |
41 | */ | 40 | */ |
42 | 41 | ||
43 | var Montage = require("montage/core/core").Montage; | 42 | var Montage = require("montage/core/core").Montage; |
44 | var Component = require("montage/ui/component").Component; | 43 | var Component = require("montage/ui/component").Component; |
45 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator | 44 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator |
46 | 45 | ||
47 | 46 | ||
48 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | 47 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { |
49 | |||
50 | styleContainer: { | ||
51 | value: null, | ||
52 | serializable: true | ||
53 | }, | ||
54 | |||
55 | styleHintable: { | ||
56 | value: null, | ||
57 | serializable: true | ||
58 | }, | ||
59 | |||
60 | styleProperty: { | ||
61 | value: null, | ||
62 | serializable: true | ||
63 | }, | ||
64 | |||
65 | valueEditorHottext: { | ||
66 | value: null, | ||
67 | serializable: true | ||
68 | }, | ||
69 | |||
70 | dtextProperty: { | ||
71 | value: null, | ||
72 | serializable: true | ||
73 | }, | ||
74 | |||
75 | /* === BEGIN: Models === */ | 48 | /* === BEGIN: Models === */ |
76 | // isSelected: whether or not the style is selected | 49 | _parentLayerComponent: { |
77 | _isSelected: { | 50 | value: null |
78 | value: false | 51 | }, |
79 | }, | 52 | |
80 | isSelected: { | 53 | _styleContainer: { |
54 | value: null | ||
55 | }, | ||
56 | styleContainer: { | ||
81 | serializable: true, | 57 | serializable: true, |
82 | get: function() { | 58 | get: function() { |
83 | return this._isSelected; | 59 | return this._styleContainer; |
84 | }, | 60 | }, |
85 | set: function(newVal) { | 61 | set: function(newVal) { |
86 | 62 | this._styleContainer = newVal; | |
87 | if (newVal !== this._isSelected) { | ||
88 | this._isSelected = newVal; | ||
89 | this.needsDraw = true; | ||
90 | } | ||
91 | } | 63 | } |
92 | }, | 64 | }, |
93 | 65 | ||
94 | /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with | 66 | _styleHintable: { |
95 | * parent Layer. | 67 | value: null |
96 | */ | 68 | }, |
97 | _isActive: { | 69 | styleHintable: { |
98 | value: false | 70 | serializable: true, |
99 | }, | ||
100 | isActive: { | ||
101 | get: function() { | 71 | get: function() { |
102 | return this._isActive; | 72 | return this._styleHintable; |
103 | }, | 73 | }, |
104 | set: function(newVal) { | 74 | set: function(newVal) { |
105 | this._isActive = newVal; | 75 | this._styleHintable = newVal; |
106 | } | 76 | } |
107 | }, | 77 | }, |
108 | 78 | ||
109 | // Property for this editor | 79 | _styleProperty: { |
110 | _editorProperty: { | 80 | value: null |
111 | value: "" | 81 | }, |
112 | }, | 82 | styleProperty: { |
113 | editorProperty: { | ||
114 | serializable: true, | 83 | serializable: true, |
115 | get: function() { | 84 | get: function() { |
116 | return this._editorProperty; | 85 | return this._styleProperty; |
117 | }, | 86 | }, |
118 | set: function(newVal) { | 87 | set: function(newVal) { |
119 | this._editorProperty = newVal; | 88 | this._styleProperty = newVal; |
120 | this.needsDraw = true; | ||
121 | } | 89 | } |
122 | }, | 90 | }, |
123 | 91 | ||
124 | // Value for the property for this editor. | 92 | _valueEditorHottext: { |
125 | _editorValue: { | 93 | value: null |
126 | value: "" | 94 | }, |
127 | }, | 95 | valueEditorHottext: { |
128 | editorValue: { | ||
129 | serializable: true, | 96 | serializable: true, |
130 | get: function() { | 97 | get: function() { |
131 | return this._editorValue; | 98 | return this._valueEditorHottext; |
132 | }, | 99 | }, |
133 | set: function(newVal) { | 100 | set: function(newVal) { |
134 | this._editorValue = newVal; | 101 | this._valueEditorHottext = newVal; |
135 | this.needsDraw = true; | ||
136 | } | 102 | } |
137 | }, | 103 | }, |
138 | 104 | ||
139 | // The tweener used to change the value for this property. | 105 | _dtextProperty: { |
140 | _ruleTweener: { | 106 | value: null |
141 | value: false | 107 | }, |
142 | }, | 108 | dtextProperty: { |
143 | ruleTweener: { | ||
144 | serializable: true, | 109 | serializable: true, |
145 | get: function() { | 110 | get: function() { |
146 | return this._ruleTweener; | 111 | return this._dtextProperty; |
147 | }, | 112 | }, |
148 | set: function(newVal) { | 113 | set: function(newVal) { |
149 | this._ruleTweener = newVal; | 114 | this._dtextProperty = newVal; |
150 | this.needsDraw = true; | ||
151 | } | 115 | } |
152 | }, | 116 | }, |
153 | 117 | ||
118 | _isSelected: { | ||
119 | value: false | ||
120 | }, | ||
121 | isSelected: { | ||
122 | serializable: true, | ||
123 | get: function() { | ||
124 | return this._isSelected; | ||
125 | }, | ||
126 | set: function(newVal) { | ||
127 | |||
128 | if (newVal !== this._isSelected) { | ||
129 | this._isSelected = newVal; | ||
130 | this.needsDraw = true; | ||
131 | } | ||