diff options
Diffstat (limited to 'js')
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 |