aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/element-controller.js22
-rwxr-xr-xjs/mediators/element-mediator.js4
-rw-r--r--js/panels/Timeline/Collapser.js2
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js45
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css8
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html114
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js206
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css78
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss8
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html40
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js352
-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/TimelinePanel.reel/TimelinePanel.html4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1139
-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.js409
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css16
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js114
-rwxr-xr-xjs/panels/properties.reel/properties.js7
23 files changed, 1790 insertions, 882 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..675176e9 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,13 +11,32 @@ exports.ElementController = Montage.create(Component, {
11 11
12 addElement: { 12 addElement: {
13 value: function(el, styles) { 13 value: function(el, styles) {
14 // Updated to use new methods in TimelinePanel. JR.
15 var insertionIndex = this.application.ninja.timeline.getInsertionIndex();
16 if (insertionIndex === false) {
17 this.application.ninja.currentSelectedContainer.appendChild(el);
18 } else {
19 if (insertionIndex === 0) {
20 this.application.ninja.currentSelectedContainer.appendChild(el);
21 } else {
22 var element = this.application.ninja.timeline.arrLayers[insertionIndex].layerData.stageElement;
23 element.parentNode.insertBefore(el, element.nextSibling);
24 }
25 }
26
27 if(styles) {
28 this.application.ninja.stylesController.setElementStyles(el, styles);
29 }
30
31 /*
32 // Old methods. Kept for reference. Delete if not needed. JR.
14 if(this.application.ninja.timeline.currentLayerSelected) { 33 if(this.application.ninja.timeline.currentLayerSelected) {
15 var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); 34 var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID);
16 35
17 if(selectedLayerIndex === 0) { 36 if(selectedLayerIndex === 0) {
18 this.application.ninja.currentSelectedContainer.appendChild(el); 37 this.application.ninja.currentSelectedContainer.appendChild(el);
19 } else { 38 } else {
20 var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0]; 39 var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.stageElement;
21 element.parentNode.insertBefore(el, element.nextSibling); 40 element.parentNode.insertBefore(el, element.nextSibling);
22 } 41 }
23 } else { 42 } else {
@@ -27,6 +46,7 @@ exports.ElementController = Montage.create(Component, {
27 if(styles) { 46 if(styles) {
28 this.application.ninja.stylesController.setElementStyles(el, styles); 47 this.application.ninja.stylesController.setElementStyles(el, styles);
29 } 48 }
49 */
30 } 50 }
31 }, 51 },
32 52
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 06514076..9c8a9ac4 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -524,9 +524,9 @@ exports.ElementMediator = Montage.create(Component, {
524 length = layersDraggedArray.length; 524 length = layersDraggedArray.length;
525 525
526 for(var i=0; documentRoot.children[i]; i++) { 526 for(var i=0; documentRoot.children[i]; i++) {
527 if(documentRoot.children[i] === layerDroppedAfter.layerData.elementsList[0]) { 527 if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) {
528 if(length >0){ 528 if(length >0){
529 documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0], documentRoot.children[i]); 529 documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]);
530 } 530 }
531 531
532 /* Will require for Multiple Drag n Drop */ 532 /* Will require for Multiple Drag n Drop */
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..52302319 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,12 +31,18 @@ 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 - 6) + "px";
40 } 46 }
41 }, 47 },
42 48
@@ -56,6 +62,41 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
56 handleClick:{ 62 handleClick:{
57 value:function(ev){ 63 value:function(ev){
58 this.selectKeyframe(); 64 this.selectKeyframe();
65 ev.stopPropagation();
59 } 66 }
60 } 67 },
68
69 handleMouseover: {
70 value: function(event) {
71 this.element.draggable = true;
72 }
73 },
74 handleMouseout: {
75 value: function(event) {
76 this.element.draggable = false;
77 }
78 },
79 handleDragstart: {
80 value: function(event) {
81 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
82 event.dataTransfer.setData('Text', 'Keyframe');
83
84 // Get my index in my track's tween array
85 var i = 0,
86 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
87 myIndex = null;
88 for (i = 0; i < tweenRepetitionLength; i++) {
89 if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
90 myIndex = i;
91 }
92 }
93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
94 }
95 },
96 handleDragend: {
97 value: function(event) {
98 this.parentComponent.isDragging = false;
99 }
100 }
101
61}); 102});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index ff5dae7a..36166c1c 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,11 +6,13 @@
6 6
7.tween_keyframe{ 7.tween_keyframe{
8 position: absolute; 8 position: absolute;
9 height: 16px; 9 height: 10px;
10 width: 5px; 10 width: 10px;
11 top: 3px;
11 background-color: white; 12 background-color: white;
12 z-index: 23; 13 z-index: 23;
13 border-radius: 3px; 14 border-radius: 2px;