aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Style.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r--js/panels/Timeline/Style.reel/Style.html91
-rw-r--r--js/panels/Timeline/Style.reel/Style.js603
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css133
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss70
-rw-r--r--js/panels/Timeline/Style.reel/scss/config.rb9
5 files changed, 906 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">[&nbsp;]</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..796385d0
--- /dev/null
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -0,0 +1,603 @@
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
12var Montage = require("montage/core/core").Montage;
13var Component = require("montage/ui/component").Component;
14
15var LayerStyle = exports.LayerStyle = Montage.create(Component, {
16
17 hasTemplate:{
18 value: true
19 },
20
21 /* === BEGIN: Models === */
22
23 // Property for this editor
24 _editorProperty: {
25 serializable: true,
26 value: ""
27 },
28 editorProperty: {
29 serializable: true,
30 get: function() {
31 return this._editorProperty;
32 },
33 set: function(newVal) {
34 this._editorProperty = newVal;
35 this.needsDraw = true;
36 }
37 },
38
39 // Value for the property for this editor.
40 _editorValue: {
41 serializable: true,
42 value: ""
43 },
44 editorValue: {
45 serializable: true,
46 get: function() {
47 return this._editorValue;
48 },
49 set: function(newVal) {
50 this._editorValue = newVal;
51 this.needsDraw = true;
52 }
53 },
54
55 // The tweener used to change the value for this property.
56 _ruleTweener: {
57 serializable: true,
58 value: false
59 },
60 ruleTweener: {
61 serializable: true,
62 get: function() {
63 return this._ruleTweener;
64 },
65 set: function(newVal) {
66 this._ruleTweener = newVal;
67 this.needsDraw = true;
68 }
69 },
70
71 // The hintable we use to change the Property
72 _myHintable: {
73 value: ""
74 },
75 myHintable: {
76 get: function() {
77 return this._myHintable;
78 },
79 set: function(newVal) {
80 this._myHintable = newVal;
81 }
82 },
83 _myHintableValue : {
84 value: null
85 },
86 myHintableValue: {
87 get: function() {
88 return this._myHintableValue;
89 },
90 set: function(newVal) {
91 this._myHintableValue = newVal;
92 }
93 },
94
95 // swapViews: Is a view swap happening?
96 _swapViews : {
97 value: true
98 },
99
100 // whichView: which view should we show: hintable or propval
101 _whichView : {
102 serializable: true,
103 value: "hintable"
104 },
105 whichView: {
106 serializable: true,
107 get: function() {
108 return this._whichView;
109 },
110 set: function(newVal) {
111 if (this._whichView !== newVal) {
112 if ((newVal !== "hintable") && (newVal !== "propval")) {
113 this.log("Error: Unknown view -"+newVal+"- requested for style.js.");
114 return;
115 }
116 this._whichView = newVal;
117 this._swapViews = true;
118 this.needsDraw = true;
119 }
120 }
121 },
122
123 // styleID: the id for this style;
124 // Used to publish events
125 _styleID : {
126 serializable: true,