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.js648
-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, 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">[&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..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
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 // 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;
124 }
125 },
126
127