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.html28
-rw-r--r--js/panels/Timeline/Span.reel/Span.js270
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss10
3 files changed, 154 insertions, 154 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index d328fcdb..00e901e7 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!doctype html>
2<!-- <copyright> 2<!-- <copyright>
3Copyright (c) 2012, Motorola Mobility, Inc 3Copyright (c) 2012, Motorola Mobility, Inc
4All Rights Reserved. 4All Rights Reserved.
@@ -29,9 +29,9 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29POSSIBILITY OF SUCH DAMAGE. 29POSSIBILITY OF SUCH DAMAGE.
30</copyright> --> 30</copyright> -->
31<html lang="en"> 31<html lang="en">
32 <head> 32 <head>
33 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 33 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
34 <link rel="stylesheet" type="text/css" href="css/Span.css"> 34 <link rel="stylesheet" type="text/css" href="css/Span.css">
35 <script type="text/montage-serialization"> 35 <script type="text/montage-serialization">
36 { 36 {
37 "owner": { 37 "owner": {
@@ -45,17 +45,17 @@ POSSIBILITY OF SUCH DAMAGE.
45 45
46 } 46 }
47 </script> 47 </script>
48 </head> 48 </head>
49 <body> 49 <body>
50 50
51 <div data-montage-id="spanspace" class="tween_span"> 51 <div data-montage-id="spanspace" class="tween_span">
52 <div class="tween_span_bar"></div> 52 <div class="tween_span_bar"></div>
53 <div data-montage-id="container_easing" class="container-easing-choice"> 53 <div data-montage-id="container_easing" class="container-easing-choice">
54 <div data-montage-id="easing_choice" class="easing-choice"> 54 <div data-montage-id="easing_choice" class="easing-choice">
55 ease-out 55 ease-out
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 59
60 </body> 60 </body>
61</html> 61</html>
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