aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/DragDrop.js136
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.html5
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html116
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js338
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css99
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss50
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html5
-rw-r--r--js/panels/Timeline/Span.reel/Span.html5
-rw-r--r--js/panels/Timeline/Style.reel/Style.html14
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html83
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1590
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css424
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.pngbin0 -> 1083 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-gear.pngbin0 -> 1397 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss373
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/config.rb10
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html40
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js236
-rw-r--r--js/panels/Timeline/Track.reel/Track.html11
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html5
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html11
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js78
22 files changed, 2352 insertions, 1277 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>
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;
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/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index 7e917b5a..6f9a6d05 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright> 2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/> 3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -11,8 +11,7 @@
11 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
12 { 12 {
13 "owner": { 13 "owner": {
14 "module": "js/panels/Timeline/Keyframe.reel", 14 "prototype": "js/panels/Timeline/Keyframe.reel",
15 "name": "Keyframe",
16 "properties": { 15 "properties": {
17 "element": {"#": "keyframespace"} 16 "element": {"#": "keyframespace"}
18 } 17 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 79b522ee..10334b31 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright> 2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/> 3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -11,23 +11,24 @@
11 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
12 { 12 {
13 "owner": { 13 "owner": {
14 "module": "js/panels/Timeline/Layer.reel", 14 "prototype": "js/panels/Timeline/Layer.reel",
15 "name": "Layer",
16 "properties": { 15 "properties": {
17 "element": {"#": "layer"}, 16 "element": {"#": "layer"},
18 "styleRepetition" : {"@":"repetition1"}, 17 "styleRepetition" : {"@":"repetition1"},
19 "dynamicLayerName" : {"@":"dtext1"}, 18 "dynamicLayerName" : {"@":"dtext1"},
19 "dynamicLayerTag" : {"@": "dtext2"},
20 "slotStyle" : {"@":"slot1"}, 20 "slotStyle" : {"@":"slot1"},
21 "mainCollapser" : {"@" : "mainCollapser"}, 21 "mainCollapser" : {"@" : "mainCollapser"},
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 },