aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Span.reel/Span.html17
-rw-r--r--js/panels/Timeline/Span.reel/Span.js78
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css90
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss87
-rw-r--r--js/panels/Timeline/Span.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss2
7 files changed, 270 insertions, 15 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index 8baa141a..d6c359ad 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,10 @@
13 "owner": { 13 "owner": {
14 "prototype": "js/panels/Timeline/Span.reel", 14 "prototype": "js/panels/Timeline/Span.reel",
15 "properties": { 15 "properties": {
16 "element": {"#": "spanspace"} 16 "element": {"#": "spanspace"},
17 "container_easing" : {"#" : "container_easing"},
18 "easing_choice" : {"#": "easing_choice"},
19 "easing_choices" : {"#" : "easing_choices"}
17 } 20 }
18 } 21 }
19 22
@@ -23,6 +26,18 @@
23 <body> 26 <body>
24 27
25 <div data-montage-id="spanspace" class="tween_span"> 28 <div data-montage-id="spanspace" class="tween_span">
29 <div class="tween_span_bar"></div>
30 <div data-montage-id="container_easing" class="container-easing">
31 <div data-montage-id="easing_choice" class="easing-choice">
32 ease-in-out
33 </div>
34 <ul data-montage-id="easing_choices" class="easing-choices">
35 <li>choice 1</li>
36 <li>choice 2</li>
37 <li>choice 3</li>
38 <li>choice 4</li>
39 </ul>
40 </div>
26 </div> 41 </div>
27 42
28 </body> 43 </body>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..e5894500 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
13 value: true 13 value: true
14 }, 14 },
15 15
16 // BEGIN: Models
16 _spanWidth:{ 17 _spanWidth:{
17 value:0 18 value:0
18 }, 19 },
19
20 spanWidth:{ 20 spanWidth:{
21 serializable:true, 21 serializable:true,
22 get:function () { 22 get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
27 this.needsDraw = true; 27 this.needsDraw = true;
28 } 28 }
29 }, 29 },
30 30
31 _isHighlighted: {
32 value: false
33 },
34 isHighlighted: {
35 get: function() {
36 return this._isHighlighted;
37 },
38 set: function(newVal) {
39 if (newVal !== this._isHighlighted) {
40 this._isHighlighted = newVal;
41 this.needsDraw = true;
42 }
43 }
44 },
45
46 _areChoicesVisible: {
47 value: false
48 },
49 areChoicesVisible: {
50 get: function() {
51 return this._areChoicesVisible;
52 },
53 set: function(newVal) {
54 if (newVal !== this._areChoicesVisible) {
55 this._areChoicesVisible = newVal;
56 this.needsDraw = true;
57 }
58 }
59 },
60
61 // BEGIN: draw cycle
62 prepareForDraw: {
63 value: function() {
64 this.init();
65 }
66 },
67
31 draw:{ 68 draw:{
32 value: function(){ 69 value: function(){
33 this.element.style.width = this.spanWidth + "px"; 70 this.element.style.width = this.spanWidth + "px";
71
72 // Highlight the span?
73 if (this.isHighlighted === true) {
74 this.element.classList.add("spanHighlight");
75 } else {
76 this.element.classList.remove("spanHighlight");
77 }
78
79 // Hide or show the choices menu?
80 if (this.areChoicesVisible === true) {
81 this.easing_choices.style.display = "block";
82 } else {
83 this.easing_choices.style.display = "none";
84 }
34 } 85 }
35 }, 86 },
36 87
88 // BEGIN: Controllers
89 init: {
90 value: function() {
91 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
92 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
93 }
94 },
95
37 highlightSpan:{ 96 highlightSpan:{
38 value: function(){ 97 value: function(){
39 this.element.classList.add("spanHighlight"); 98 // Class add/remove should only be done in draw cycle.
99 // this.element.classList.add("spanHighlight");
100 this.isHighlighted = true;
40 } 101 }
102 },
103
104 handleEasingChoiceClick: {
105 value: function(event) {
106 this.areChoicesVisible = true;
107 }
108 },
109 handleEasingChoicesClick: {
110 value: function(event) {
111 this.areChoicesVisible = false;
112 }
41 } 113 }
42}); 114});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 198d71f3..16f931b2 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -1,17 +1,89 @@
1@charset "UTF-8";
1/* <copyright> 2/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/> 3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 6 </copyright> */
7/* Span.scss
8 * Main SCSS file for Span component, compiled by SASS into the file css/Span.css.
9 */
10/* line 22, ../scss/Span.scss */
11.tween_span {
12 position: absolute;
13 height: 16px;
14}
15
16/* line 26, ../scss/Span.scss */
17.tween_span .tween_span_bar {
18 width: 100%;
19 height: 100%;
20 background-color: #fff;
21 opacity: 0.15;
22}
23
24/* line 33, ../scss/Span.scss */
25.tween_span.spanHighlight .tween_span_bar {
26 background-color: #a0c8ff;
27 opacity: 0.4;
28}
29
30/*
31 * Easing picker
32 */
33/* line 42, ../scss/Span.scss */
34.container-easing {
35 position: absolute;
36 top: 2px;
37 right: 6px;
38 font-size: 10px;
39 line-height: 8px;
40 border: 1px solid black;
41 color: white;
42 background-color: #474747;
43}
6 44
7.tween_span{ 45/* line 54, ../scss/Span.scss */
8 position: absolute; 46.container-easing,
9 height: 16px; 47.container-easing .easing-choice,
10 opacity: 0.15; 48.container-easing .easing-choices {
11 background-color: white; 49 width: 70px;
12} 50}
13 51
14.tween_span.spanHighlight{ 52/* line 58, ../scss/Span.scss */
15 background-color: #a0c8ff; 53.container-easing,
16 opacity: 0.4; 54.container-easing .easing-choice {
17} \ No newline at end of file 55 height: 10px;
56}
57
58/* line 61, ../