diff options
Diffstat (limited to 'js/panels/Timeline')
36 files changed, 1403 insertions, 484 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index d286d84c..5de884a9 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -1,3 +1,9 @@ | |||
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 | |||
1 | /* | 7 | /* |
2 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. | 8 | * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. |
3 | * Required properties: | 9 | * Required properties: |
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html index bf21994b..7e917b5a 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.html +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html | |||
@@ -1,4 +1,9 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <!-- <copyright> | ||
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/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
2 | <html lang="en"> | 7 | <html lang="en"> |
3 | <head> | 8 | <head> |
4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | 9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
@@ -9,8 +14,7 @@ | |||
9 | "module": "js/panels/Timeline/Keyframe.reel", | 14 | "module": "js/panels/Timeline/Keyframe.reel", |
10 | "name": "Keyframe", | 15 | "name": "Keyframe", |
11 | "properties": { | 16 | "properties": { |
12 | "element": {"#": "keyframespace"}, | 17 | "element": {"#": "keyframespace"} |
13 | "tweenkeyframe": {"#": "tweenkeyframe"} | ||
14 | } | 18 | } |
15 | } | 19 | } |
16 | 20 | ||
@@ -19,8 +23,7 @@ | |||
19 | </head> | 23 | </head> |
20 | <body> | 24 | <body> |
21 | 25 | ||
22 | <div id="keyframespace"> | 26 | <div id="keyframespace" class="tween_keyframe"> |
23 | <div id="tweenkeyframe" class="tween_keyframe"></div> | ||
24 | </div> | 27 | </div> |
25 | 28 | ||
26 | </body> | 29 | </body> |
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index c82a9086..859cdfb1 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -1,6 +1,11 @@ | |||
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 | |||
1 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
2 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
3 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
4 | 9 | ||
5 | var Keyframe = exports.Keyframe = Montage.create(Component, { | 10 | var Keyframe = exports.Keyframe = Montage.create(Component, { |
6 | 11 | ||
@@ -19,136 +24,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
19 | }, | 24 | }, |
20 | set:function(value){ | 25 | set:function(value){ |
21 | this._position = value; | 26 | this._position = value; |
27 | this.needsDraw = true; | ||
22 | } | 28 | } |
23 | }, | 29 | }, |
24 | 30 | ||
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:{ | 31 | prepareForDraw:{ |
86 | value:function(){ | 32 | value:function(){ |
87 | this.tweenkeyframe.addEventListener("click", this, false); | 33 | this.element.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 | } | 34 | } |
92 | }, | 35 | }, |
93 | 36 | ||
94 | draw:{ | 37 | draw:{ |
95 | value:function(){ | 38 | value:function(){ |
96 | this.tweenkeyframe.style.left = (this.position - 3) + "px"; | 39 | this.element.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 |