diff options
Diffstat (limited to 'js/panels/Timeline')
9 files changed, 200 insertions, 30 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html new file mode 100644 index 00000000..7781af11 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html | |||
@@ -0,0 +1,24 @@ | |||
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/PropertyTrack.css"> | ||
6 | <script type="text/montage-serialization"> | ||
7 | { | ||
8 | "owner": { | ||
9 | "module": "js/panels/Timeline/PropertyTrack.reel", | ||
10 | "name": "PropertyTrack", | ||
11 | "properties": { | ||
12 | "element": {"#": "property-track"} | ||
13 | } | ||
14 | } | ||
15 | |||
16 | } | ||
17 | </script> | ||
18 | </head> | ||
19 | <body> | ||
20 | |||
21 | <div id="property-track" class="timeline-track"></div> | ||
22 | |||
23 | </body> | ||
24 | </html> \ No newline at end of file | ||
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js new file mode 100644 index 00000000..1b0035cd --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -0,0 +1,15 @@ | |||
1 | var Montage = require("montage/core/core").Montage; | ||
2 | var Component = require("montage/ui/component").Component; | ||
3 | |||
4 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | ||
5 | |||
6 | hasTemplate:{ | ||
7 | value: true | ||
8 | }, | ||
9 | |||
10 | prepareForDraw:{ | ||
11 | value:function(){ | ||
12 | |||
13 | } | ||
14 | } | ||
15 | }); | ||
diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css new file mode 100644 index 00000000..9c27e705 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css | |||
@@ -0,0 +1,13 @@ | |||
1 | /* PropertyTrack.scss | ||
2 | * Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css. | ||
3 | */ | ||
4 | /* line 13, ../scss/PropertyTrack.scss */ | ||
5 | .content-main .collapsible-content .timeline-track { | ||
6 | height: 20px; | ||
7 | border-bottom: 1px solid #505050; | ||
8 | } | ||
9 | |||
10 | /* line 19, ../scss/PropertyTrack.scss */ | ||
11 | .timeline-track .content-main { | ||
12 | background-color: #474747; | ||
13 | } | ||
diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss new file mode 100644 index 00000000..ef8e1ec2 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss | |||
@@ -0,0 +1,21 @@ | |||
1 | /* PropertyTrack.scss | ||
2 | * Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css. | ||
3 | */ | ||
4 | |||
5 | // Import theme settings | ||
6 | @import "../../../../../scss/imports/themes/default/colors"; | ||
7 | @import "../../../../../scss/imports/themes/default/mixins"; | ||
8 | |||
9 | // Import generic mixins and styles | ||
10 | @import "../../../../../scss/imports/scss/mixins"; | ||
11 | |||
12 | |||
13 | .content-main .collapsible-content .timeline-track { | ||
14 | height: 20px; | ||
15 | border-bottom: 1px solid $color-menu-divider; | ||
16 | } | ||
17 | |||
18 | |||
19 | .timeline-track .content-main { | ||
20 | background-color: $color-menu-bg; | ||
21 | } | ||
diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/config.rb b/js/panels/Timeline/PropertyTrack.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/scss/config.rb | |||
@@ -0,0 +1,9 @@ | |||
1 | # Require any additional compass plugins here. | ||
2 | # Set this to the root of your project when deployed: | ||
3 | http_path = "/" | ||
4 | css_dir = "../css" | ||
5 | sass_dir = "" | ||
6 | images_dir = "../images/" | ||
7 | javascripts_dir = "../js" | ||
8 | # To enable relative paths to assets via compass helper functions. Uncomment: | ||
9 | # relative_assets = true | ||
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 4808e4d8..cabd92c0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -91,7 +91,51 @@ | |||
91 | "oneway": false | 91 | "oneway": false |
92 | } | 92 | } |
93 | } | 93 | } |
94 | } | 94 | }, |
95 | "positionTracksRepetition": { | ||
96 | "module": "montage/ui/repetition.reel", | ||
97 | "name": "Repetition", | ||
98 | "properties": { | ||
99 | "element": {"#": "content-position-tracks"}, | ||
100 | "isSelectionEnabled" : false | ||
101 | }, | ||
102 | "bindings": { | ||
103 | "objects": { | ||
104 | "boundObject": {"@": "owner"}, | ||
105 | "boundObjectPropertyPath": "arrPositionTracks", | ||
106 | "oneway": false | ||
107 | } | ||
108 | } | ||
109 | }, | ||
110 | "positionPropertyTrack" : { | ||
111 | "module" : "js/panels/Timeline/PropertyTrack.reel", | ||
112 | "name" : "PropertyTrack", | ||
113 | "properties" : { | ||
114 | "element":{"#": "position-track-base"} | ||
115 | } | ||
116 | }, | ||
117 | "transformTracksRepetition": { | ||
118 | "module": "montage/ui/repetition.reel", | ||
119 | "name": "Repetition", | ||
120 | "properties": { | ||
121 | "element": {"#": "content-transform-tracks"}, | ||
122 | "isSelectionEnabled" : false | ||
123 | }, | ||
124 | "bindings": { | ||
125 | "objects": { | ||
126 | "boundObject": {"@": "owner"}, | ||
127 | "boundObjectPropertyPath": "arrTransformTracks", | ||
128 | "oneway": false | ||
129 | } | ||
130 | } | ||
131 | }, | ||
132 | "transformPropertyTrack" : { | ||
133 | "module" : "js/panels/Timeline/PropertyTrack.reel", | ||
134 | "name" : "PropertyTrack", | ||
135 | "properties" : { | ||
136 | "element":{"#": "transform-track-base"} | ||
137 | } | ||
138 | } | ||
95 | 139 | ||
96 | 140 | ||
97 | } | 141 | } |
@@ -108,20 +152,14 @@ | |||
108 | <div class="label-position collapsible-label collapsible-collapsed"> | 152 | <div class="label-position collapsible-label collapsible-collapsed"> |
109 | 153 | ||
110 | </div> | 154 | </div> |
111 | <div class="content-position collapsible-content collapsible-collapsed"> | 155 | <div class="content-position collapsible-content collapsible-collapsed" id="content-position-tracks"> |
112 | <div class="timeline-track"></div> | 156 | <div id="position-track-base"></div> |
113 | <div class="timeline-track"></div> | ||
114 | <div class="timeline-track"></div> | ||
115 | </div> | 157 | </div> |
116 | <div class="label-transform collapsible-label collapsible-collapsed"> | 158 | <div class="label-transform collapsible-label collapsible-collapsed"> |
117 | 159 | ||
118 | </div> | 160 | </div> |
119 | <div class="content-transform collapsible-content collapsible-collapsed"> | 161 | <div class="content-transform collapsible-content collapsible-collapsed" id="content-transform-tracks"> |
120 | <div class="timeline-track"></div> | 162 | <div id="transform-track-base"></div> |
121 | <div class="timeline-track"></div> | ||
122 | <div class="timeline-track"></div> | ||
123 | <div class="timeline-track"></div> | ||
124 | <div class="timeline-track"></div> | ||
125 | </div> | 163 | </div> |
126 | <div class="label-styles collapsible-label collapsible-collapsed"> | 164 | <div class="label-styles collapsible-label collapsible-collapsed"> |
127 | 165 | ||
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 1c33a040..de2c75c7 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -114,6 +114,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
114 | this.needsDraw = true; | 114 | this.needsDraw = true; |
115 | } | 115 | } |
116 | }, | 116 | }, |
117 | |||
118 | /* Position Property Tracks */ | ||
119 | _arrPositionTracks : { | ||
120 | serializable:true, | ||
121 | enumerable:true, | ||
122 | value: [] | ||
123 | }, | ||
124 | arrPositionTracks: { | ||
125 | serializable:true, | ||