diff options
Diffstat (limited to 'js/panels')
20 files changed, 1214 insertions, 432 deletions
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..a4f957cf 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
| @@ -31,6 +31,12 @@ 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 | ||
| @@ -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/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 9288d718..c7e7b575 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
| @@ -19,7 +19,6 @@ | |||
| 19 | "dynamicLayerTag" : {"@": "dtext2"}, | 19 | "dynamicLayerTag" : {"@": "dtext2"}, |
| 20 | "mainCollapser" : {"@" : "mainCollapser"}, | 20 | "mainCollapser" : {"@" : "mainCollapser"}, |
| 21 | "positionCollapser" : {"@" : "positionCollapser"}, | 21 | "positionCollapser" : {"@" : "positionCollapser"}, |
| 22 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
| 23 | "styleCollapser" : {"@" : "styleCollapser"}, | 22 | "styleCollapser" : {"@" : "styleCollapser"}, |
| 24 | "clickerMain" : {"#" : "clicker-main"}, | 23 | "clickerMain" : {"#" : "clicker-main"}, |
| 25 | "myLabel" : {"#" : "myLabel"} | 24 | "myLabel" : {"#" : "myLabel"} |
| @@ -180,60 +179,6 @@ | |||
| 180 | } | 179 | } |
| 181 | } | 180 | } |
| 182 | }, | 181 | }, |
| 183 | "dtext_skew_x" : { | ||
| 184 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
| 185 | "properties": { | ||
| 186 | "element": {"#": "skew-x"}, | ||
| 187 | "maxValue" : 100, | ||
| 188 | "minValue" : 0, | ||
| 189 | "acceptableUnits" : "%", | ||
| 190 | "units" : "%", | ||
| 191 | "value" : 0 | ||
| 192 | }, | ||
| 193 | "bindings": { | ||
| 194 | "value": { | ||
| 195 | "boundObject": {"@": "owner"}, | ||
| 196 | "boundObjectPropertyPath": "dtextSkewX", | ||
| 197 | "oneway": false | ||
| 198 | } | ||
| 199 | } | ||
| 200 | }, | ||
| 201 | "dtext_skew_y" : { | ||
| 202 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
| 203 | "properties": { | ||
| 204 | "element": {"#": "skew-y"}, | ||
| 205 | "maxValue" : 100, | ||
| 206 | "minValue" : 0, | ||
| 207 | "acceptableUnits" : "%", | ||
| 208 | "units" : "%", | ||
| 209 | "value" : 0 | ||
| 210 | }, | ||
| 211 | "bindings": { | ||
| 212 | "value": { | ||
| 213 | "boundObject": {"@": "owner"}, | ||
| 214 | "boundObjectPropertyPath": "dtextSkewY", | ||
| 215 | "oneway": false | ||
| 216 | } | ||
| 217 | } | ||
| 218 | }, | ||
| 219 | "dtext_rotate" : { | ||
| 220 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
| 221 | "properties": { | ||
| 222 | "element": {"#": "rotation"}, | ||
| 223 | "maxValue" : 360, | ||
| 224 | "minValue" : -360, | ||
| 225 | "acceptableUnits" : "degrees", | ||
| 226 | "units" : "degrees", | ||
| 227 | "value" : 0 | ||
| 228 | }, | ||
| 229 | "bindings": { | ||
| 230 | "value": { | ||
| 231 | "boundObject": {"@": "owner"}, | ||
| 232 | "boundObjectPropertyPath": "dtextRotate", | ||
| 233 | "oneway": false | ||
| 234 | } | ||
| 235 | } | ||
| 236 | }, | ||
| 237 | 182 | ||
| 238 | "mainCollapser" : { | 183 | "mainCollapser" : { |
| 239 | "prototype" : "js/panels/timeline/Collapser", | 184 | "prototype" : "js/panels/timeline/Collapser", |
| @@ -275,26 +220,6 @@ | |||
| 275 | } | 220 | } |
| 276 | }, | 221 | }, |
| 277 | 222 | ||
| 278 | "transformCollapser" : { | ||
| 279 | "prototype" : "js/panels/timeline/Collapser", | ||
| 280 | "properties" : { | ||
| 281 | "element" : {"#" : "content-transform"}, | ||
| 282 | "myContent" : {"#":"content-transform"}, | ||
| 283 | "contentHeight" : 60, | ||
| 284 | "isLabelClickable" : true, | ||
| 285 | "clicker" : {"#" : "clicker-transform"}, | ||
| 286 | "isCollapsed" : true, | ||
| 287 | "isAnimated" : true | ||
| 288 | }, | ||
| 289 | "bindings" : { | ||
| 290 | "isToggling" : { | ||
| 291 | "boundObject" : {"@" : "owner" }, | ||
| 292 | "boundObjectPropertyPath" : "isTransformCollapsed", | ||