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.html12
-rw-r--r--js/panels/Timeline/Span.reel/Span.js20
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss64
3 files changed, 10 insertions, 86 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index a1f3afeb..6e643daa 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -15,8 +15,7 @@
15 "properties": { 15 "properties": {
16 "element": {"#": "spanspace"}, 16 "element": {"#": "spanspace"},
17 "container_easing" : {"#" : "container_easing"}, 17 "container_easing" : {"#" : "container_easing"},
18 "easing_choice" : {"#": "easing_choice"}, 18 "easing_choice" : {"#": "easing_choice"}
19 "easing_choices" : {"#" : "easing_choices"}
20 } 19 }
21 } 20 }
22 21
@@ -27,17 +26,10 @@
27 26
28 <div data-montage-id="spanspace" class="tween_span"> 27 <div data-montage-id="spanspace" class="tween_span">
29 <div class="tween_span_bar"></div> 28 <div class="tween_span_bar"></div>
30 <div data-montage-id="container_easing" class="container-easing"> 29 <div data-montage-id="container_easing" class="container-easing-choice">
31 <div data-montage-id="easing_choice" class="easing-choice"> 30 <div data-montage-id="easing_choice" class="easing-choice">
32 ease-out 31 ease-out
33 </div> 32 </div>
34 <ul data-montage-id="easing_choices" class="easing-choices">
35 <li data-ninja-ease="ease">ease</li>
36 <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
37 <li data-ninja-ease="ease-in">ease-in</li>
38 <li data-ninja-ease="ease-in-out">ease-in-out</li>
39 <li data-ninja-ease="linear">linear</li>
40 </ul>
41 </div> 33 </div>
42 </div> 34 </div>
43 35
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 8d4c25ae..bb8fdf03 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
@@ -112,12 +112,14 @@ var Span = exports.Span = Montage.create(Component, {
112 this.element.classList.remove("spanHighlight"); 112 this.element.classList.remove("spanHighlight");
113 } 113 }
114 114
115 /*
115 // Hide or show the choices menu? 116 // Hide or show the choices menu?
116 if (this.areChoicesVisible === true) { 117 if (this.areChoicesVisible === true) {
117 this.easing_choices.style.display = "block"; 118 this.easing_choices.style.display = "block";
118 } else { 119 } else {
119 this.easing_choices.style.display = "none"; 120 this.easing_choices.style.display = "none";
120 } 121 }
122 */
121 123
122 // Change easing? 124 // Change easing?
123 if (this.easing_choice.innerText !== this.easing) { 125 if (this.easing_choice.innerText !== this.easing) {
@@ -131,7 +133,7 @@ var Span = exports.Span = Montage.create(Component, {
131 init: { 133 init: {
132 value: function() { 134 value: function() {
133 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); 135 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
134 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); 136 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
135 137
136 } 138 }
137 }, 139 },
@@ -147,15 +149,9 @@ var Span = exports.Span = Montage.create(Component, {
147 handleEasingChoiceClick: { 149 handleEasingChoiceClick: {
148 value: function(event) { 150 value: function(event) {
149 event.stopPropagation(); 151 event.stopPropagation();
150 this.areChoicesVisible = true; 152 //this.areChoicesVisible = true;
151 153 this.application.ninja.timeline.easingMenu.show();
152 // Possibly another menu is already open. If so, we need to close it. 154
153 if (this.application.ninja.timeline.currentOpenSpanMenu !== false) {
154 this.application.ninja.timeline.currentOpenSpanMenu.hideEasingMenu();
155 }
156
157 // Now store a pointer to ourselves for possible future use.
158 this.application.ninja.timeline.currentOpenSpanMenu = this;
159 } 155 }
160 }, 156 },
161 handleEasingChoicesClick: { 157 handleEasingChoicesClick: {
diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss
index b3aff4d2..6afb4780 100644
--- a/js/panels/Timeline/Span.reel/scss/Span.scss
+++ b/js/panels/Timeline/Span.reel/scss/Span.scss
@@ -35,67 +35,3 @@
35 opacity: 0.4; 35 opacity: 0.4;
36} 36}
37 37
38/*
39 * Easing picker
40 */
41
42.container-easing {
43 position: absolute;
44 top: 2px;
45 right: 8px;
46 font-size: 10px;
47 line-height: 8px;
48 border: 1px solid $color-menu-border;
49 color: $color-menu-text;
50 background-color: $color-menu-bg;
51}
52.container-easing,
53.container-easing .easing-choice,
54.container-easing .easing-choices {
55 width: 70px;
56 white-space: nowrap;
57}
58.container-easing,
59.container-easing .easing-choice {
60 height: 10px;
61}
62.container-easing .easing-choice {
63 position: absolute;
64 top: 0px;
65 left: 3px;
66 width: 67px;
67 cursor: pointer;
68}
69.container-easing .easing-choices {
70 position: absolute;
71 display: none;
72 bottom: -1px;
73 left: -1px;
74 z-index: 100;
75 height: auto;
76 border: 1px solid $color-menu-border;
77 color: $color-menu-text;
78 background-color: $color-menu-bg;
79 overflow: hidden;
80 list-style-type: none;
81 margin: 0px;
82 padding: 0px;
83}
84.container-easing .easing-choices li {
85 list-style-type: none;
86 margin: 0px;
87 padding: 0px;
88 padding-top: 2px;
89 padding-bottom: 2px;
90 padding-left: 3px;
91 cursor: pointer;
92}
93
94.container-easing .easing-choices li:hover,
95.container-easing .easing-choices li.easing-selected {
96 color: $color-menu-hilite-text;
97 background-color: $color-menu-hilite-bg;
98}
99.container-easing .easing-choices li.easing-selected {
100 cursor: default;
101}