aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/components/editable.reel/editable.js8
-rw-r--r--js/components/hintable.reel/hintable.js12
-rw-r--r--js/panels/Timeline/DragDrop.js136
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html36
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js68
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js24
9 files changed, 265 insertions, 45 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index 9c8946c4..7a31e7fd 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -120,7 +120,7 @@ exports.Editable = Montage.create(Component, {
120 } 120 }
121 121
122 if(this.stopOnBlur) { 122 if(this.stopOnBlur) {
123 console.log('adding mousedown event listener'); 123 //console.log('adding mousedown event listener');
124 ///// Simulate blur on editable node by listening to the doc 124 ///// Simulate blur on editable node by listening to the doc
125 document.addEventListener('mouseup', this, false); 125 document.addEventListener('mouseup', this, false);
126 } 126 }
@@ -189,7 +189,7 @@ exports.Editable = Montage.create(Component, {
189 handleKeydown : { 189 handleKeydown : {
190 value : function(e) { 190 value : function(e) {
191 var k = e.keyCode; 191 var k = e.keyCode;
192 console.log('keyCode: ' + k); 192 //console.log('keyCode: ' + k);
193 } 193 }
194 }, 194 },
195 ///// Text input has changed values 195 ///// Text input has changed values
@@ -204,7 +204,7 @@ exports.Editable = Montage.create(Component, {
204 }, 204 },
205 handleMouseup : { 205 handleMouseup : {
206 value : function(e) { 206 value : function(e) {
207 console.log('handle mouse down'); 207 //console.log('handle mouse down');
208 ///// Listen for simulated blur event 208 ///// Listen for simulated blur event
209 if(this.stopOnBlur && e._event.target !== this._element) { 209 if(this.stopOnBlur && e._event.target !== this._element) {
210 this.blur(); 210 this.blur();
@@ -213,7 +213,7 @@ exports.Editable = Montage.create(Component, {
213 }, 213 },
214 handleEvent : { 214 handleEvent : {
215 value : function(e) { 215 value : function(e) {
216 console.log("event type : " + e._event.type); 216 //console.log("event type : " + e._event.type);
217 ///// If configured, start on specified event 217 ///// If configured, start on specified event
218 if(e._event.type === this.startOnEvent) { 218 if(e._event.type === this.startOnEvent) {
219 this.start(); 219 this.start();
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 5ed46b3c..cbfe2d9b 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -90,10 +90,10 @@ exports.Hintable = Montage.create(Editable, {
90 hintNext : { 90 hintNext : {
91 value : function(e) { 91 value : function(e) {
92 if(e) { e.preventDefault(); } 92 if(e) { e.preventDefault(); }
93 console.log('next1'); 93 //console.log('next1');
94 94
95 if(this._matchIndex < this.matches.length - 1) { 95 if(this._matchIndex < this.matches.length - 1) {
96 console.log('next'); 96 //console.log('next');
97 ++this._matchIndex; 97 ++this._matchIndex;
98 this.hint = this._getHintDifference(); 98 this.hint = this._getHintDifference();
99 } 99 }
@@ -102,9 +102,9 @@ exports.Hintable = Montage.create(Editable, {
102 hintPrev : { 102 hintPrev : {
103 value : function(e) { 103 value : function(e) {
104 if(e) { e.preventDefault(); } 104 if(e) { e.preventDefault(); }
105 console.log('prev1'); 105 //console.log('prev1');
106 if(this._matchIndex !== 0) { 106 if(this._matchIndex !== 0) {
107 console.log('prev'); 107 //console.log('prev');
108 --this._matchIndex; 108 --this._matchIndex;
109 this.hint = this._getHintDifference(); 109 this.hint = this._getHintDifference();
110 } 110 }
@@ -135,7 +135,7 @@ exports.Hintable = Montage.create(Editable, {
135 /// revert to old value 135 /// revert to old value
136 this.value = (this._preEditValue); 136 this.value = (this._preEditValue);
137 this._sendEvent('revert'); 137 this._sendEvent('revert');
138 console.log('reverting'); 138 //console.log('reverting');
139 139
140 } 140 }
141 } 141 }
@@ -180,7 +180,7 @@ exports.Hintable = Montage.create(Editable, {
180 180
181 var val = this.value, 181 var val = this.value,
182 matches, hint; 182 matches, hint;
183 console.log('val = "' + val + '"'); 183 //console.log('val = "' + val + '"');
184 //// Handle auto-suggest if configured 184 //// Handle auto-suggest if configured
185 if(this.hints instanceof Array) { 185 if(this.hints instanceof Array) {
186 186
diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js
new file mode 100644
index 00000000..55ee3ab4
--- /dev/null
+++ b/js/panels/Timeline/DragDrop.js
@@ -0,0 +1,136 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage;
8var Composer = require("montage/ui/composer/composer").Composer;
9
10exports.DragDropComposer = Montage.create(Composer, {
11
12 draggable: {
13 value: true
14 },
15
16 droppable: {
17 value: true
18 },
19
20 identifier: {
21 value: "generic"
22 },
23
24 _dragover: {
25 value: false
26 },
27
28 load: {
29 value: function() {
30 //TODO: to make this work even better check to see if this is a component or not
31 //right now it does not support data-montage id's
32 this.element.addEventListener("mouseover", this, true);
33 this.element.addEventListener("mouseout", this, true);
34 this.component.element.addEventListener("dragenter", this, true);
35 this.component.element.addEventListener("dragleave", this, true);
36 this.component.element.addEventListener("dragend", this, true);
37 this.component.element.addEventListener("drop", this, true);
38 this.component.element.addEventListener("dragover", this, true);
39 this.component.element.addEventListener("dragstart", this, true);
40 }
41 },
42
43 unload: {
44 value: function() {
45 this.element.removeEventListener("mouseover", this, true);
46 this.element.removeEventListener("mouseout", this, true);
47 this.component.element.removeEventListener("dragenter", this, true);
48 this.component.element.removeEventListener("dragleave", this, true);
49 this.component.element.removeEventListener("dragend", this, true);
50 this.component.element.removeEventListener("drop", this, true);
51 this.component.element.removeEventListener("dragover", this, true);
52 this.component.element.removeEventListener("dragstart", this, true);
53 }
54 },
55
56 captureMouseover: {
57 value: function(e) {
58 if(this.draggable) {
59 this.component.element.draggable = true;
60 }
61 }
62 },
63
64 captureMouseout: {
65 value: function(e) {
66 this.component.element.draggable = false;
67 }
68 },
69
70 /* ------ Drag Drop Events ------- */
71
72 // This Function will determine what is being moved
73 captureDragstart: {
74 value:function(e) {
75 e.dataTransfer.effectAllowed = 'move';
76 e.dataTransfer.setData('Text', this.identifier);
77 this.component.element.classList.add("dragging");
78 this.component.application.ninja.componentBeingDragged = this.component;
79 }
80 },
81
82 captureDragenter: {
83 value: function(e) {
84
85 }
86 },
87
88 captureDragover: {
89 value:function(e) {
90 e.preventDefault();
91 e.stopImmediatePropagation();
92 if (!this._dragover) {
93 this._dragover = true;
94 this.component.element.classList.add("dragOver");
95 }
96 }
97 },
98
99 captureDragleave: {
100 value: function(e) {
101 if (this._dragover) {
102 this._dragover = false;
103 this.component.element.classList.remove("dragOver");
104 }
105 }
106 },
107
108 captureDrop: {
109 value:function(e) {
110 e.stopPropagation(); // Stops some browsers from redirecting.
111 e.preventDefault();
112 if (this._dragover) {
113 this._dragover = false;
114 this.component.element.classList.remove("dragOver");
115 if (this.identifier === e.dataTransfer.getData("Text")) {
116 if(this.component.application.ninja.componentBeingDragged !== this.component) {
117 dropEvent = document.createEvent("CustomEvent");
118 dropEvent.initCustomEvent("dropped", true, false, null);
119 dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged;