diff options
author | Jose Antonio Marquez | 2012-02-10 15:33:20 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-02-10 15:33:20 -0800 |
commit | f7f445e8ced728d04de4bf1c5711f6756488a71e (patch) | |
tree | b09f00c28ff7123354af40509283ddec846f438d /js/panels/Timeline/Style.reel | |
parent | 632a5daca17acb774b9344ccc0e9107f1643924c (diff) | |
parent | 48977780443d97b9e97b047066639c9056788041 (diff) | |
download | ninja-f7f445e8ced728d04de4bf1c5711f6756488a71e.tar.gz |
Merge branch 'refs/heads/NinjaInternal' into FileIO
Conflicts:
js/ninja.reel/ninja.html
js/stage/stage.reel/stage.html
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.html | 91 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 648 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 133 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 70 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/config.rb | 9 |
5 files changed, 951 insertions, 0 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html new file mode 100644 index 00000000..c6f29626 --- /dev/null +++ b/js/panels/Timeline/Style.reel/Style.html | |||
@@ -0,0 +1,91 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
5 | <link rel="stylesheet" type="text/css" href="css/Style.css"> | ||
6 | <script type="text/montage-serialization"> | ||
7 | { | ||
8 | "owner": { | ||
9 | "module": "js/panels/Timeline/Style.reel", | ||
10 | "name": "Style", | ||
11 | "properties": { | ||
12 | "element": {"#": "style-container"}, | ||
13 | "styleContainer" : {"#" : "style-container"}, | ||
14 | "styleHintable" : {"#" : "style-hintable"}, | ||
15 | "styleProperty" : {"#": "container-property"}, | ||
16 | "valueEditorHottext" : {"@":"hottextunit"}, | ||
17 | "dtextProperty" : {"@":"dtext1"}, | ||
18 | "myHintable" : {"@" :"hintable"} | ||
19 | } | ||
20 | }, | ||
21 | "dtext1" : { | ||
22 | "module" : "montage/ui/dynamic-text.reel", | ||
23 | "name" : "DynamicText", | ||
24 | "properties" : { | ||
25 | "element" : {"#" : "container-property"} | ||
26 | }, | ||
27 | "bindings" : { | ||
28 | "value" : { | ||
29 | "boundObject" : {"@" : "owner"}, | ||
30 | "boundObjectPropertyPath" : "editorProperty", | ||
31 | "oneway" : false | ||
32 | } | ||
33 | } | ||
34 | }, | ||
35 | "hottextunit" : { | ||
36 | "module" : "js/components/hottextunit.reel", | ||
37 | "name" : "HotTextUnit", | ||
38 | "properties" : { | ||
39 | "element" : {"#":"value-editor-hottext"} | ||
40 | }, | ||
41 | "bindings" : { | ||
42 | "value" : { | ||
43 | "boundObject" : {"@" : "owner"}, | ||
44 | "boundObjectPropertyPath" : "editorValue", | ||
45 | "oneway" : false | ||
46 | } | ||
47 | } | ||
48 | }, | ||
49 | "hintable" : { | ||
50 | "module" : "js/components/hintable.reel", | ||
51 | "name" : "Hintable", | ||
52 | "properties" : { | ||
53 | "element" : {"#":"style-hintable"} | ||
54 | }, | ||
55 | "bindings" : { | ||
56 | "value" : { | ||
57 | "boundObject" : {"@" : "owner"}, | ||
58 | "boundObjectPropertyPath" : "editorProperty", | ||
59 | "oneway" : false | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | </script> | ||
65 | </head> | ||
66 | <body> | ||
67 | <div id="style-container"> | ||
68 | <div class="style-padding"> | ||
69 | <div class="row-hintable hidden"> | ||
70 | <div id="style-hintable"></div> | ||
71 | </div> | ||
72 | <div class="container-propvals hidden"> | ||
73 | <div class="cell-property"> | ||
74 | <div id="container-property">property</div> | ||
75 | </div> | ||
76 | <div class="cell-value value-editor editor-hottext hidden"> | ||
77 | <div id="value-editor-hottext"></div> | ||
78 | </div> | ||
79 | <div class="cell-value value-editor editor-color hidden"> | ||
80 | <div id="value-editor-color">[ ]</div> | ||
81 | </div> | ||
82 | <div class="cell-value value-editor editor-input hidden"> | ||
83 | <!-- <div id="value-editor-input"></div> --> | ||
84 | <input type="text" class="nj-skinned" value="" /> | ||
85 | </div> | ||
86 | </div> | ||
87 | |||
88 | </div> | ||
89 | </div> | ||
90 | </body> | ||
91 | </html> \ No newline at end of file | ||
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js new file mode 100644 index 00000000..e6e03901 --- /dev/null +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -0,0 +1,648 @@ | |||
1 | /* | ||
2 | * Style component: Edits and manages a single style rule for a Layer in the Timeline. | ||
3 | * Public Properties: | ||
4 | * editorProperty: The CSS property for the style. | ||
5 | * editorValue: The value for the editorProperty. | ||
6 | * whichView: Which view to show, the hintable view (where a new property can be typed in) | ||
7 | * or the propval view (where the property's value can be set with the tweener). | ||
8 | * Valid values are "hintable" and "propval", defaults to "hintable". | ||
9 | * | ||
10 | */ | ||
11 | |||
12 | var Montage = require("montage/core/core").Montage; | ||
13 | var Component = require("montage/ui/component").Component; | ||
14 | |||
15 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | ||
16 | |||
17 | hasTemplate:{ | ||
18 | value: true | ||
19 | }, | ||
20 | |||
21 | /* === BEGIN: Models === */ | ||
22 | // isSelected: whether or not the style is selected | ||
23 | _isSelected: { | ||
24 | serializable: true, | ||
25 | value: false | ||
26 | }, | ||
27 | isSelected: { | ||
28 | serializable: true, | ||
29 | get: function() { | ||
30 | return this._isSelected; | ||
31 | }, | ||
32 | set: function(newVal) { | ||
33 | if (newVal !== this._isSelected) { | ||
34 | this._isSelected = newVal; | ||
35 | this.needsDraw = true; | ||
36 | } | ||
37 | } | ||
38 | }, | ||
39 | |||
40 | /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with | ||
41 | * parent Layer. | ||
42 | */ | ||
43 | _isActive: { | ||
44 | value: false | ||
45 | }, | ||
46 | isActive: { | ||
47 | get: function() { | ||
48 | return this._isActive; | ||
49 | }, | ||
50 | set: function(newVal) { | ||
51 | this._isActive = newVal; | ||
52 | } | ||
53 | }, | ||
54 | |||
55 | // Property for this editor | ||
56 | _editorProperty: { | ||
57 | serializable: true, | ||
58 | value: "" | ||
59 | }, | ||
60 | editorProperty: { | ||
61 | serializable: true, | ||
62 | get: function() { | ||
63 | return this._editorProperty; | ||
64 | }, | ||
65 | set: function(newVal) { | ||
66 | this._editorProperty = newVal; | ||
67 | this.needsDraw = true; | ||
68 | } | ||
69 | }, | ||
70 | |||
71 | // Value for the property for this editor. | ||
72 | _editorValue: { | ||
73 | serializable: true, | ||
74 | value: "" | ||
75 | }, | ||
76 | editorValue: { | ||
77 | serializable: true, | ||
78 | get: function() { | ||
79 | return this._editorValue; | ||
80 | }, | ||
81 | set: function(newVal) { | ||
82 | this._editorValue = newVal; | ||
83 | this.needsDraw = true; | ||
84 | } | ||
85 | }, | ||
86 | |||
87 | // The tweener used to change the value for this property. | ||
88 | _ruleTweener: { | ||
89 | serializable: true, | ||
90 | value: false | ||
91 | }, | ||
92 | ruleTweener: { | ||
93 | serializable: true, | ||
94 | get: function() { | ||
95 | return this._ruleTweener; | ||
96 | }, | ||
97 | set: function(newVal) { | ||
98 | this._ruleTweener = newVal; | ||
99 | this.needsDraw = true; | ||
100 | } | ||
101 | }, | ||
102 | |||
103 | // The hintable we use to change the Property | ||
104 | _myHintable: { | ||
105 | value: "" | ||
106 | }, | ||
107 | myHintable: { | ||
108 | get: function() { | ||
109 | return this._myHintable; | ||
110 | }, | ||
111 | set: function(newVal) { | ||
112 | this._myHintable = newVal; | ||
113 | } | ||
114 | }, | ||
115 | _myHintableValue : { | ||
116 | value: null | ||
117 | }, | ||
118 | myHintableValue: { | ||
119 | get: function() { | ||
120 | return this._myHintableValue; | ||
121 | }, | ||
122 | set: function(newVal) { | ||
123 | this._myHintableValue = newVal; | ||