diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/DragDrop.js | 136 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 8 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 147 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 42 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1102 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 11 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 132 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 76 |
9 files changed, 969 insertions, 687 deletions
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> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No 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 | |||
7 | var Montage = require("montage/core/core").Montage; | ||
8 | var Composer = require("montage/ui/composer/composer").Composer; | ||
9 | |||
10 | exports.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; | ||
120 | dropEvent.droppedComponent = this.component; | ||
121 | this.component.dispatchEvent(dropEvent); | ||
122 | } | ||
123 | } | ||
124 | this.component.application.ninja.componentBeingDragged = null; | ||
125 | } | ||
126 | |||
127 | } | ||
128 | }, | ||
129 | |||
130 | captureDragend: { | ||
131 | value:function(e) { | ||
132 | this.component.element.classList.remove("dragging"); | ||
133 | } | ||
134 | } | ||
135 | |||
136 | }); \ No newline at end of file | ||
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 79b522ee..454c2742 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -22,7 +22,9 @@ | |||
22 | "positionCollapser" : {"@" : "positionCollapser"}, | 22 | "positionCollapser" : {"@" : "positionCollapser"}, |
23 | "transformCollapser" : {"@" : "transformCollapser"}, | 23 | "transformCollapser" : {"@" : "transformCollapser"}, |
24 | "styleCollapser" : {"@" : "styleCollapser"}, | 24 | "styleCollapser" : {"@" : "styleCollapser"}, |
25 | "clickerMain" : {"#" : "clicker-main"} | 25 | "clickerMain" : {"#" : "clicker-main"}, |
26 | "myLabel" : {"#" : "myLabel"}, | ||
27 | "dragDrop" : {"@" : "DragDrop"} | ||
26 | } | 28 | } |
27 | }, | 29 | }, |
28 | "dtext1" : { | 30 | "dtext1" : { |
@@ -301,7 +303,7 @@ | |||
301 | "properties" : { | 303 | "properties" : { |
302 | "element" : {"#" : "content-style"}, | 304 | "element" : {"#" : "content-style"}, |
303 | "myContent" : {"#":"content-style"}, | 305 | "myContent" : {"#":"content-style"}, |
304 | "contentHeight" : 60, | 306 | "contentHeight" : 0, |
305 | "isLabelClickable" : true, | 307 | "isLabelClickable" : true, |
306 | "clicker" : {"#" : "clicker-style"}, | 308 | "clicker" : {"#" : "clicker-style"}, |
307 | "isCollapsed" : true, | 309 | "isCollapsed" : true, |
@@ -323,7 +325,7 @@ | |||
323 | <body> | 325 | <body> |
324 | 326 | ||
325 | <div data-montage-id="layer" class="container-layer"> | 327 | <div data-montage-id="layer" class="container-layer"> |
326 | <div class="label-layer"> | 328 | <div class="label-layer" data-montage-id="myLabel"> |
327 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> | 329 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> |
328 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> | 330 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> |
329 | <div class="cssbutton button-lock"></div> | 331 | <div class="cssbutton button-lock"></div> |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 5206ae16..c69f28b0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -102,6 +102,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
102 | }, | 102 | }, |
103 | set:function(value){ | 103 | set:function(value){ |
104 | this._layerID = value; | 104 | this._layerID = value; |
105 | this.layerData.layerID = value; | ||
105 | } | 106 | } |
106 | }, | 107 | }, |
107 | 108 | ||
@@ -119,7 +120,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
119 | set:function(value){ | 120 | set:function(value){ |
120 | if (this._dtextPositionX !== value) { | 121 | if (this._dtextPositionX !== value) { |
121 | this._dtextPositionX = value; | 122 | this._dtextPositionX = value; |
122 | //this.needsDraw = true; | 123 | this.layerData.dtextPositionX = value; |
123 | } | 124 | } |
124 | 125 | ||
125 | } | 126 | } |
@@ -138,7 +139,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
138 | set:function(value){ | 139 | set:function(value){ |
139 | if (this._dtextPositionY !== value) { | 140 | if (this._dtextPositionY !== value) { |
140 | this._dtextPositionY = value; | 141 | this._dtextPositionY = value; |
141 | //this.needsDraw = true; | 142 | this.layerData.dtextPositionY = value; |
142 | } | 143 | } |
143 | 144 | ||
144 | } | 145 | } |
@@ -157,7 +158,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
157 | set:function(value){ |