diff options
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 154 |
1 files changed, 0 insertions, 154 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js deleted file mode 100644 index c82a9086..00000000 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ /dev/null | |||
@@ -1,154 +0,0 @@ | |||
1 | var Montage = require("montage/core/core").Montage; | ||
2 | var Component = require("montage/ui/component").Component; | ||
3 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
4 | |||
5 | var Keyframe = exports.Keyframe = Montage.create(Component, { | ||
6 | |||
7 | hasTemplate:{ | ||
8 | value: true | ||
9 | }, | ||
10 | |||
11 | _position:{ | ||
12 | value:0 | ||
13 | }, | ||
14 | |||
15 | position:{ | ||
16 | serializable:true, | ||
17 | get:function(){ | ||
18 | return this._position; | ||
19 | }, | ||
20 | set:function(value){ | ||
21 | this._position = value; | ||
22 | } | ||
23 | }, | ||
24 | |||
25 | _id:{ | ||
26 | value:0 | ||
27 | }, | ||
28 | |||
29 | id:{ | ||
30 | serializable:true, | ||
31 | get:function () { | ||
32 | return this._id; | ||
33 | }, | ||
34 | set:function (value) { | ||
35 | this._id = value; | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | _timelinePosition:{ | ||
40 | value:0 | ||
41 | }, | ||
42 | |||
43 | timelinePosition:{ | ||
44 | serializable:true, | ||
45 | get:function () { | ||
46 | return this._timelinePosition; | ||
47 | }, | ||
48 | set:function (value) { | ||
49 | this._timelinePosition = value; | ||
50 | } | ||
51 | }, | ||
52 | |||
53 | _containingTrack:{ | ||
54 | value:{} | ||
55 | }, | ||
56 | |||
57 | containingTrack:{ | ||
58 | serializable:true, | ||
59 | get:function () { | ||
60 | return this._containingTrack; | ||
61 | }, | ||
62 | set:function (value) { | ||
63 | this._containingTrack = value; | ||
64 | } | ||
65 | }, | ||
66 | |||
67 | _animatedProperties:{ | ||
68 | value:[] | ||
69 | }, | ||
70 | |||
71 | animatedProperties:{ | ||
72 | serializable:true, | ||
73 | get:function () { | ||
74 | return this._animatedProperties; | ||
75 | }, | ||
76 | set:function (value) { | ||
77 | this._animatedProperties = value; | ||
78 | } | ||
79 | }, | ||
80 | |||
81 | containingSpan:{ | ||
82 | value: null | ||
83 | }, | ||
84 | |||
85 | prepareForDraw:{ | ||
86 | value:function(){ | ||
87 | this.tweenkeyframe.addEventListener("click", this, false); | ||
88 | this.animatedProperties = new Array(); | ||
89 | this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; | ||
90 | this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | draw:{ | ||
95 | value:function(){ | ||
96 | this.tweenkeyframe.style.left = (this.position - 3) + "px"; | ||
97 | } | ||
98 | }, | ||
99 | |||
100 | handleElementChange:{ | ||
101 | value:function (event) { | ||
102 | if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){ | ||
103 | alert("Wrong element selected for this keyframe track"); | ||
104 | return; | ||
105 | } | ||
106 | |||
107 | if(event.detail.source && event.detail.source !== "keyframe") { | ||
108 | this.containingSpan.highlightSpan(); | ||
109 | if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){ | ||
110 | this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; | ||
111 | this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; | ||
112 | this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; | ||
113 | this.containingTrack.updateKeyframeRule(); | ||
114 | } | ||
115 | } | ||
116 | } | ||
117 | }, | ||
118 | |||
119 | deselect:{ | ||
120 | value:function(){ | ||
121 | this.tweenkeyframe.classList.remove("keyframeSelected"); | ||
122 | this.eventManager.removeEventListener("elementChange", this, false); | ||
123 | } | ||
124 | }, | ||
125 | |||
126 | select:{ | ||
127 | value:function(){ | ||
128 | this.application.ninja.timeline.deselectKeyframes(); | ||
129 | this.tweenkeyframe.classList.add("keyframeSelected"); | ||
130 | this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px"; | ||
131 | this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px"; | ||
132 | this.application.ninja.timeline.selectedKeyframes.push(this); | ||
133 | |||
134 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
135 | var currentMillisec = currentMillisecPerPixel * this.timelinePosition; | ||
136 | this.application.ninja.timeline.updateTimeText(currentMillisec); | ||
137 | |||
138 | var currentTop = this.animatedProperties["top"] + "px"; | ||
139 | var currentLeft = this.animatedProperties["left"] + "px"; | ||
140 | |||
141 | ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe"); | ||
142 | ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe"); | ||
143 | |||
144 | // turn on element change event listener | ||
145 | this.eventManager.addEventListener("elementChange", this, false); | ||
146 | } | ||
147 | }, | ||
148 | |||
149 | handleClick:{ | ||
150 | value:function(ev){ | ||
151 | this.select(); | ||
152 | } | ||
153 | } | ||
154 | }); | ||