aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r--js/panels/Timeline/Span.reel/Span.html10
-rw-r--r--js/panels/Timeline/Span.reel/Span.js173
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css65
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss65
-rw-r--r--js/panels/Timeline/Span.reel/scss/config.rb9
5 files changed, 307 insertions, 15 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index 8baa141a..6e643daa 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,9 @@
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"}
17 } 19 }
18 } 20 }
19 21
@@ -23,6 +25,12 @@
23 <body> 25 <body>
24 26
25 <div data-montage-id="spanspace" class="tween_span"> 27 <div data-montage-id="spanspace" class="tween_span">
28 <div class="tween_span_bar"></div>
29 <div data-montage-id="container_easing" class="container-easing-choice">
30 <div data-montage-id="easing_choice" class="easing-choice">
31 ease-out
32 </div>
33 </div>
26 </div> 34 </div>
27 35
28 </body> 36 </body>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..7347ef51 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage,
8var Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10var Span = exports.Span = Montage.create(Component, { 10var Span = exports.Span = Montage.create(Component, {
11 11
@@ -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,179 @@ 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 _easing: {
62 value: "ease-in"
63 },
64 easing: {
65 get: function() {
66 return this._easing;
67 },
68 set: function(newVal) {
69 if (newVal !== this._easing) {
70 this._easing = newVal;
71 this.parentComponent.setKeyframeEase(newVal);
72 this.needsDraw = true;
73 }
74 }
75 },
76
77 // BEGIN: draw cycle
78 prepareForDraw: {
79 value: function() {
80 this.init();
81 }
82 },
83
31 draw:{ 84 draw:{
32 value: function(){ 85 value: function(){
86
33 this.element.style.width = this.spanWidth + "px"; 87 this.element.style.width = this.spanWidth + "px";
88
89 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
90 var containerWidth = this.spanWidth -18,
91 choiceWidth;
92 if (containerWidth < 0) {
93 containerWidth = 0;
94 }
95 choiceWidth = containerWidth -3;
96 if (choiceWidth < 0) {
97 choiceWidth = 0;
98 }
99 this.container_easing.style.width = containerWidth + "px";
100 this.easing_choice.style.width = choiceWidth + "px";
101 this.easing_choice.style.overflow = "hidden";
102 }
103 if (this.spanWidth > 70) {
104 this.container_easing.setAttribute("style", "");
105 this.easing_choice.setAttribute("style", "");
106 }
107
108 // Highlight the span?
109 if (this.isHighlighted === true) {
110 this.element.classList.add("spanHighlight");
111 } else {
112 this.element.classList.remove("spanHighlight");
113 }
114
115 /*
116 // Hide or show the choices menu?
117 if (this.areChoicesVisible === true) {
118 this.easing_choices.style.display = "block";
119 } else {
120 this.easing_choices.style.display = "none";
121 }
122 */
123
124 // Change easing?
125 if (this.easing_choice.innerText !== this.easing) {
126 this.easing_choice.innerText = this.easing;
127 }
128
34 } 129 }
35 }, 130 },
36 131
132 // BEGIN: Controllers
133 init: {
134 value: function() {
135 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
136 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
137
138 }
139 },
140
37 highlightSpan:{ 141 highlightSpan:{
38 value: function(){ 142 value: function(){
39 this.element.classList.add("spanHighlight"); 143 // Class add/remove should only be done in draw cycle.
144 // this.element.classList.add("spanHighlight");
145 this.isHighlighted = true;
40 } 146 }
147 },
148
149 handleEasingChoiceClick: {
150 value: function(event) {
151 event.stopPropagation();
152 //this.areChoicesVisible = true;
153 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
154 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
155
156 function findPos(obj) {
157 var objReturn = {};
158 objReturn.top = 0;
159 objReturn.left = 0;
160
161 if (obj.offsetParent) {
162
163 do {
164 objReturn.left += obj.offsetLeft;
165 objReturn.top += obj.offsetTop;
166
167 } while (obj = obj.offsetParent);
168 }
169 return objReturn;
170 }
171 var objPos = findPos(event.target);
172 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
173 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
174 this.application.ninja.timeline.easingMenu.show();
175 this.application.ninja.timeline.easingMenu.callingComponent = this;
176 }
177 },
178 handleEasingChoicesClick: {
179 value: function(event) {
180 event.stopPropagation();
181
182 // Remove the pointer to ourselves