aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel/Span.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Span.reel/Span.js')
-rw-r--r--js/panels/Timeline/Span.reel/Span.js270
1 files changed, 135 insertions, 135 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 0d013fe5..7c959fad 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -29,7 +29,7 @@ POSSIBILITY OF SUCH DAMAGE.
29</copyright> */ 29</copyright> */
30 30
31var Montage = require("montage/core/core").Montage, 31var Montage = require("montage/core/core").Montage,
32 Component = require("montage/ui/component").Component; 32 Component = require("montage/ui/component").Component;
33 33
34var Span = exports.Span = Montage.create(Component, { 34var Span = exports.Span = Montage.create(Component, {
35 35
@@ -37,7 +37,7 @@ var Span = exports.Span = Montage.create(Component, {
37 value: true 37 value: true
38 }, 38 },
39 39
40 // BEGIN: Models 40 // BEGIN: Models
41 _spanWidth:{ 41 _spanWidth:{
42 value:0 42 value:0
43 }, 43 },
@@ -51,185 +51,185 @@ var Span = exports.Span = Montage.create(Component, {
51 this.needsDraw = true; 51 this.needsDraw = true;
52 } 52 }
53 }, 53 },
54 54
55 _isHighlighted: { 55 _isHighlighted: {
56 value: false 56 value: false
57 }, 57 },
58 isHighlighted: { 58 isHighlighted: {
59 get: function() { 59 get: function() {
60 return this._isHighlighted; 60 return this._isHighlighted;
61 }, 61 },
62 set: function(newVal) { 62 set: function(newVal) {
63 if (newVal !== this._isHighlighted) { 63 if (newVal !== this._isHighlighted) {
64 this._isHighlighted = newVal; 64 this._isHighlighted = newVal;
65 this.needsDraw = true; 65 this.needsDraw = true;
66 } 66 }
67 } 67 }
68 }, 68 },
69 69
70 _areChoicesVisible: { 70 _areChoicesVisible: {
71 value: false 71 value: false
72 }, 72 },
73 areChoicesVisible: { 73 areChoicesVisible: {
74 get: function() { 74 get: function() {
75 return this._areChoicesVisible; 75 return this._areChoicesVisible;
76 }, 76 },
77 set: function(newVal) { 77 set: function(newVal) {
78 if (newVal !== this._areChoicesVisible) { 78 if (newVal !== this._areChoicesVisible) {
79 this._areChoicesVisible = newVal; 79 this._areChoicesVisible = newVal;
80 this.needsDraw = true; 80 this.needsDraw = true;
81 } 81 }
82 } 82 }
83 }, 83 },
84 84
85 _easing: { 85 _easing: {
86 value: "none" 86 value: "none"
87 }, 87 },
88 easing: { 88 easing: {
89 get: function() { 89 get: function() {
90 return this._easing; 90 return this._easing;
91 }, 91 },
92 set: function(newVal) { 92 set: function(newVal) {
93 if (newVal !== this._easing) { 93 if (newVal !== this._easing) {
94 if (typeof(newVal) === "undefined") { 94 if (typeof(newVal) === "undefined") {
95 newVal = "none"; 95 newVal = "none";
96 } 96 }
97 this._easing = newVal; 97 this._easing = newVal;
98 this.parentComponent.easing = this.easing; 98 this.parentComponent.easing = this.easing;
99 this.parentComponent.tweenData.easing = this.easing; 99 this.parentComponent.tweenData.easing = this.easing;
100 this.parentComponent.setKeyframeEase(newVal); 100 this.parentComponent.setKeyframeEase(newVal);
101 this.needsDraw = true; 101 this.needsDraw = true;
102 } 102 }
103 } 103 }
104 },
105
106 // BEGIN: draw cycle
107 prepareForDraw: {
108 value: function() {
109 this.init();
110 }
104 }, 111 },
105 112
106 // BEGIN: draw cycle
107 prepareForDraw: {
108 value: function() {
109 this.init();
110 }
111 },
112
113 draw:{ 113 draw:{
114 value: function(){ 114 value: function(){
115 this.element.style.width = this.spanWidth + "px"; 115 this.element.style.width = this.spanWidth + "px";
116 116
117 if ((this.spanWidth <= 70) && (this.spanWidth >0)) { 117 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
118 var containerWidth = this.spanWidth -18, 118 var containerWidth = this.spanWidth -18,
119 choiceWidth; 119 choiceWidth;
120 if (containerWidth < 0) { 120 if (containerWidth < 0) {
121 containerWidth = 0; 121 containerWidth = 0;
122 } 122 }
123 choiceWidth = containerWidth -3; 123 choiceWidth = containerWidth -3;
124 if (choiceWidth < 0) { 124 if (choiceWidth < 0) {
125 choiceWidth = 0; 125 choiceWidth = 0;
126 } 126 }
127 this.container_easing.style.width = containerWidth + "px"; 127 this.container_easing.style.width = containerWidth + "px";
128 this.easing_choice.style.width = choiceWidth + "px"; 128 this.easing_choice.style.width = choiceWidth + "px";
129 this.easing_choice.style.overflow = "hidden"; 129 this.easing_choice.style.overflow = "hidden";
130 } 130 }
131 if (this.spanWidth > 70) { 131 if (this.spanWidth > 70) {
132 this.container_easing.setAttribute("style", ""); 132 this.container_easing.setAttribute("style", "");
133 this.easing_choice.setAttribute("style", ""); 133 this.easing_choice.setAttribute("style", "");
134 } 134 }
135 135
136 // Highlight the span? 136 // Highlight the span?
137 if (this.isHighlighted === true) { 137 if (this.isHighlighted === true) {
138 this.element.classList.add("spanHighlight"); 138 this.element.classList.add("spanHighlight");
139 } else { 139 } else {
140 this.element.classList.remove("spanHighlight"); 140 this.element.classList.remove("spanHighlight");
141 } 141 }
142 142
143 /* 143 /*
144 // Hide or show the choices menu? 144 // Hide or show the choices menu?
145 if (this.areChoicesVisible === true) { 145 if (this.areChoicesVisible === true) {
146 this.easing_choices.style.display = "block"; 146 this.easing_choices.style.display = "block";
147 } else { 147 } else {
148 this.easing_choices.style.display = "none"; 148 this.easing_choices.style.display = "none";
149 } 149 }
150 */ 150 */
151 151
152 // Change easing? 152 // Change easing?
153 if (this.easing_choice.innerText !== this.easing) { 153 if (this.easing_choice.innerText !== this.easing) {
154 this.easing_choice.innerText = this.easing; 154 this.easing_choice.innerText = this.easing;
155 } 155 }
156 156
157 } 157 }
158 }, 158 },
159 159
160 // BEGIN: Controllers 160 // BEGIN: Controllers
161 init: { 161 init: {
162 value: function() { 162 value: function() {
163 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); 163 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
164 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); 164 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
165
166 }
167 },
165 168
166 }
167 },
168
169 highlightSpan:{ 169 highlightSpan:{
170 value: function(){ 170 value: function(){
171 // Class add/remove should only be done in draw cycle. 171 // Class add/remove should only be done in draw cycle.
172 // this.element.classList.add("spanHighlight"); 172 // this.element.classList.add("spanHighlight");
173 this.isHighlighted = true; 173 this.isHighlighted = true;
174 } 174 }
175 }, 175 },
176 176
177 handleEasingChoiceClick: { 177 handleEasingChoiceClick: {
178 value: function(event) { 178 value: function(event) {
179 event.stopPropagation(); 179 event.stopPropagation();
180 //this.areChoicesVisible = true; 180 //this.areChoicesVisible = true;
181 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; 181 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
182 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;