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.js175
-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, 309 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..59cd13ed 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,181 @@ 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 if (typeof(newVal) === "undefined") {
71 newVal = "ease-in";
72 }
73 this._easing = newVal;
74 this.parentComponent.setKeyframeEase(newVal);
75 this.needsDraw = true;
76 }
77 }
78 },
79
80 // BEGIN: draw cycle
81 prepareForDraw: {
82 value: function() {
83 this.init();
84 }
85 },
86
31 draw:{ 87 draw:{
32 value: function(){ 88 value: function(){
33 this.element.style.width = this.spanWidth + "px"; 89 this.element.style.width = this.spanWidth + "px";
90
91 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
92 var containerWidth = this.spanWidth -18,
93 choiceWidth;
94 if (containerWidth < 0) {
95 containerWidth = 0;
96 }
97 choiceWidth = containerWidth -3;
98 if (choiceWidth < 0) {
99 choiceWidth = 0;
100 }
101 this.container_easing.style.width = containerWidth + "px";
102 this.easing_choice.style.width = choiceWidth + "px";
103 this.easing_choice.style.overflow = "hidden";
104 }
105 if (this.spanWidth > 70) {
106 this.container_easing.setAttribute("style", "");
107 this.easing_choice.setAttribute("style", "");
108 }
109
110 // Highlight the span?
111 if (this.isHighlighted === true) {
112 this.element.classList.add("spanHighlight");
113 } else {
114 this.element.classList.remove("spanHighlight");
115 }
116
117 /*
118 // Hide or show the choices menu?
119 if (this.areChoicesVisible === true) {
120 this.easing_choices.style.display = "block";
121 } else {
122 this.easing_choices.style.display = "none";
123 }
124 */
125
126 // Change easing?
127 if (this.easing_choice.innerText !== this.easing) {
128 this.easing_choice.innerText = this.easing;
129 }
130
34 } 131 }
35 }, 132 },
36 133
134 // BEGIN: Controllers
135 init: {
136 value: function() {
137 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
138 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
139
140 }
141 },
142
37 highlightSpan:{ 143 highlightSpan:{
38 value: function(){ 144 value: function(){
39 this.element.classList.add("spanHighlight"); 145 // Class add/remove should only be done in draw cycle.
146 // this.element.classList.add("spanHighlight");
147 this.isHighlighted = true;
40 } 148 }
149 },
150
151 handleEasingChoiceClick: {
152 value: function(event) {
153 event.stopPropagation();
154 //this.areChoicesVisible = true;
155 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
156 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
157
158 function findPos(obj) {
159 var objReturn = {};
160 objReturn.top = 0;
161 objReturn.left = 0;
162
163 if (obj.offsetParent) {
164
165 do {
166 objReturn.left += obj.offsetLeft;
167 objReturn.top += obj.offsetTop;
168
169 } while (obj = obj.offsetParent);
170 }
171 return objReturn;
172 }
173 var objPos = findPos(event.target);
174 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
175 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
176 this.application.ninja.timeline.easingMenu.show();
177 this.application.ninja.timeline.easingMenu.callingComponent = this;
178 }
179 },
180 handleEasingChoicesClick: {
181 value: function(event) {