aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js1
-rw-r--r--js/panels/Timeline/Span.reel/Span.html18
-rw-r--r--js/panels/Timeline/Span.reel/Span.js127
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css107
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss101
-rw-r--r--js/panels/Timeline/Span.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss2
10 files changed, 355 insertions, 16 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 52302319..41eb6ef1 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -91,6 +91,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
91 } 91 }
92 } 92 }
93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; 93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
94 this.selectKeyframe();
94 } 95 }
95 }, 96 },
96 handleDragend: { 97 handleDragend: {
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index 8baa141a..a1f3afeb 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,10 @@
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"},
19 "easing_choices" : {"#" : "easing_choices"}
17 } 20 }
18 } 21 }
19 22
@@ -23,6 +26,19 @@
23 <body> 26 <body>
24 27
25 <div data-montage-id="spanspace" class="tween_span"> 28 <div data-montage-id="spanspace" class="tween_span">
29 <div class="tween_span_bar"></div>
30 <div data-montage-id="container_easing" class="container-easing">
31 <div data-montage-id="easing_choice" class="easing-choice">
32 ease-out
33 </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>
26 </div> 42 </div>
27 43
28 </body> 44 </body>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..1ab3455c 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -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,137 @@ 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 // Hide or show the choices menu?
116 if (this.areChoicesVisible === true) {
117 this.easing_choices.style.display = "block";
118 } else {
119 this.easing_choices.style.display = "none";
120 }
121
122 // Change easing?
123 if (this.easing_choice.innerText !== this.easing) {
124 this.easing_choice.innerText = this.easing;
125 }
126
34 } 127 }
35 }, 128 },
36 129
130 // BEGIN: Controllers
131 init: {
132 value: function() {
133 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
134 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
135
136 }
137 },
138
37 highlightSpan:{ 139 highlightSpan:{
38 value: function(){ 140 value: function(){
39 this.element.classList.add("spanHighlight"); 141 // Class add/remove should only be done in draw cycle.
142 // this.element.classList.add("spanHighlight");
143 this.isHighlighted = true;
40 } 144 }
145 },
146
147 handleEasingChoiceClick: {
148 value: function(event) {
149 this.areChoicesVisible = true;
150 }
151 },
152 handleEasingChoicesClick: {
153 value: function(event) {
154
155 this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected");
156 event.target.classList.add("easing-selected");
157 this.easing = event.target.dataset.ninjaEase;
158
159 // Which element was just
160 this.areChoicesVisible = false;
161 }
41 } 162 }
42}); 163});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 198d71f3..e5cb4263 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -1,17 +1,106 @@
1@charset "UTF-8";
1