aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js2
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js48
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css11
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html117
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js388
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css78
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss14
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html40
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js361
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css11
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scsscbin0 -> 5151 bytes
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss8
-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/Style.reel/Style.js5
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css91
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss11
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1128
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html81
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js449
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css18
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss2
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js122
29 files changed, 2353 insertions, 1002 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 88314c8b..9c8d4434 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage,
151 151
152 // isToggling: Bindable property. Set this (to anything) to trigger a toggle. 152 // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
153 _isToggling: { 153 _isToggling: {
154 serializable: true,
155 value: true 154 value: true
156 }, 155 },
157 isToggling: { 156 isToggling: {
@@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage,
179 178
180 prepareForDraw: { 179 prepareForDraw: {
181 value: function() { 180 value: function() {
182
183 // Get the original value of the overflow property: 181 // Get the original value of the overflow property:
184 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); 182 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
185 if (this.isCollapsed === false) { 183 if (this.isCollapsed === false) {
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..b91027b6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,24 +31,32 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
31 prepareForDraw:{ 31 prepareForDraw:{
32 value:function(){ 32 value:function(){
33 this.element.addEventListener("click", this, false); 33 this.element.addEventListener("click", this, false);
34
35 // Drag and drop event handlers
36 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
37 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
38 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
39 this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
34 } 40 }
35 }, 41 },
36 42
37 draw:{ 43 draw:{
38 value:function(){ 44 value:function(){
39 this.element.style.left = (this.position - 3) + "px"; 45 this.element.style.left = (this.position - 5) + "px";
40 } 46 }
41 }, 47 },
42 48
43 deselectKeyframe:{ 49 deselectKeyframe:{
44 value:function(){ 50 value:function(){
45 this.element.classList.remove("keyframeSelected"); 51 this.element.classList.remove("keyframeSelected");
52 this.element.style.left = (this.position - 5) + "px";
46 } 53 }
47 }, 54 },
48 55
49 selectKeyframe:{ 56 selectKeyframe:{
50 value:function(){ 57 value:function(){
51 this.element.classList.add("keyframeSelected"); 58 this.element.classList.add("keyframeSelected");
59 this.element.style.left = (this.position - 6) + "px";
52 this.parentComponent.selectTween(); 60 this.parentComponent.selectTween();
53 } 61 }
54 }, 62 },
@@ -56,6 +64,42 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
56 handleClick:{ 64 handleClick:{
57 value:function(ev){ 65 value:function(ev){
58 this.selectKeyframe(); 66 this.selectKeyframe();
67 ev.stopPropagation();
59 } 68 }
60 } 69 },
70
71 handleMouseover: {
72 value: function(event) {
73 this.element.draggable = true;
74 }
75 },
76 handleMouseout: {
77 value: function(event) {
78 this.element.draggable = false;
79 }
80 },
81 handleDragstart: {
82 value: function(event) {
83 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
84 event.dataTransfer.setData('Text', 'Keyframe');
85
86 // Get my index in my track's tween array
87 var i = 0,
88 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
89 myIndex = null;
90 for (i = 0; i < tweenRepetitionLength; i++) {
91 if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
92 myIndex = i;
93 }
94 }
95 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
96 this.selectKeyframe();
97 }
98 },
99 handleDragend: {
100 value: function(event) {
101 this.parentComponent.isDragging = false;
102 }
103 }
104
61}); 105});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index ff5dae7a..5ea236e9 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,14 +6,19 @@
6 6
7.tween_keyframe{ 7.tween_keyframe{
8 position: absolute; 8 position: absolute;
9 height: 16px; 9 height: 8px;
10 width: 5px; 10 width: 8px;
11 top: 4px;
11 background-color: white; 12 background-color: white;
12 z-index: 23; 13 z-index: 23;
13 border-radius: 3px; 14 border-radius: 2px;
15 -webkit-transform: rotate(45deg);
14} 16}
15 17
16.tween_keyframe.keyframeSelected{ 18.tween_keyframe.keyframeSelected{
19 height: 10px;
20 width: 10px;
21 top: 3px;
17 background-color: #570e19; 22 background-color: #570e19;
18 border-style: solid; 23 border-style: solid;
19 border-width: thin; 24 border-width: thin;
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 9288d718..44022211 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,9 +17,9 @@
17 "styleRepetition" : {"@":"repetition1"}, 17 "styleRepetition" : {"@":"repetition1"},
18 "dynamicLayerName" : {"@":"dtext1"}, 18 "dynamicLayerName" : {"@":"dtext1"},
19 "dynamicLayerTag" : {"@": "dtext2"}, 19 "dynamicLayerTag" : {"@": "dtext2"},
20 "layer_label_text" : {"#": "layer-label-text"},
20 "mainCollapser" : {"@" : "mainCollapser"}, 21 "mainCollapser" : {"@" : "mainCollapser"},
21 "positionCollapser" : {"@" : "positionCollapser"}, 22 "positionCollapser" : {"@" : "positionCollapser"},
22 "transformCollapser" : {"@" : "transformCollapser"},
23 "styleCollapser" : {"@" : "styleCollapser"}, 23 "styleCollapser" : {"@" : "styleCollapser"},
24 "clickerMain" : {"#" : "clicker-main"}, 24 "clickerMain" : {"#" : "clicker-main"},
25 "myLabel" : {"#" : "myLabel"} 25 "myLabel" : {"#" : "myLabel"}
@@ -34,7 +34,7 @@
34 "value" : { 34 "value" : {
35 "boundObject" : {"@": "owner"}, 35 "boundObject" : {"@": "owner"},
36 "boundObjectPropertyPath" : "layerName", 36 "boundObjectPropertyPath" : "layerName",