diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.html | 17 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 78 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 90 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/Span.scss | 87 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/config.rb | 9 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss | 2 |
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 |