aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Keyframe.reel
diff options
context:
space:
mode:
authorValerio Virgillito2012-06-20 21:56:18 -0700
committerValerio Virgillito2012-06-20 21:56:18 -0700
commitc8fc6d15e1570e89243abe527cd149e354f7e11f (patch)
treef648fa7842f3dc6011da08aaab0bedb445d43b58 /js/panels/Timeline/Keyframe.reel
parent392a559e90357d48c910a07617261483b2b45476 (diff)
parent58bca4771ab1e043cd5c11239c1936a022080096 (diff)
downloadninja-c8fc6d15e1570e89243abe527cd149e354f7e11f.tar.gz
Merge pull request #316 from imix23ways/Timeline-merge-candidate
Timeline merge candidate
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js74
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css11
2 files changed, 78 insertions, 7 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..ba6952aa 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -28,27 +28,57 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
28 } 28 }
29 }, 29 },
30 30
31 _isSelected:{
32 value:false
33 },
34
35 isSelected:{
36 serializable:true,
37 get:function(){
38 return this._isSelected;
39 },
40 set:function(value){
41 this._isSelected = value;
42 this.needsDraw = true;
43 }
44 },
45
31 prepareForDraw:{ 46 prepareForDraw:{
32 value:function(){ 47 value:function(){
33 this.element.addEventListener("click", this, false); 48 this.element.addEventListener("click", this, false);
49
50 // Drag and drop event handlers
51 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
52 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
53 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
54 this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
34 } 55 }
35 }, 56 },
36 57
37 draw:{ 58 draw:{
38 value:function(){ 59 value:function(){
39 this.element.style.left = (this.position - 3) + "px"; 60 if(this.isSelected){
61 this.element.classList.add("keyframeSelected");
62 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
63 }else{
64 this.element.classList.remove("keyframeSelected");
65 }
66 this.element.style.left = (this.position - 5) + "px";
40 } 67 }
41 }, 68 },
42 69
43 deselectKeyframe:{ 70 deselectKeyframe:{
44 value:function(){ 71 value:function(){
45 this.element.classList.remove("keyframeSelected"); 72 this.isSelected=false;
73 this.element.style.left = (this.position - 5) + "px";
46 } 74 }
47 }, 75 },
48 76
49 selectKeyframe:{ 77 selectKeyframe:{
50 value:function(){ 78 value:function(){
51 this.element.classList.add("keyframeSelected"); 79 this.isSelected=true;
80 this.element.style.left = (this.position - 6) + "px";
81 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
52 this.parentComponent.selectTween(); 82 this.parentComponent.selectTween();
53 } 83 }
54 }, 84 },
@@ -56,6 +86,42 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
56 handleClick:{ 86 handleClick:{
57 value:function(ev){ 87 value:function(ev){
58 this.selectKeyframe(); 88 this.selectKeyframe();
89 ev.stopPropagation();
59 } 90 }
60 } 91 },
92
93 handleMouseover: {
94 value: function(event) {
95 this.element.draggable = true;
96 }
97 },
98 handleMouseout: {
99 value: function(event) {
100 this.element.draggable = false;
101 }
102 },
103 handleDragstart: {
104 value: function(event) {
105 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
106 event.dataTransfer.setData('Text', 'Keyframe');
107
108 // Get my index in my track's tween array
109 var i = 0,
110 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
111 myIndex = null;
112 for (i = 0; i < tweenRepetitionLength; i++) {
113 if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
114 myIndex = i;
115 }
116 }
117 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
118 this.selectKeyframe();
119 }
120 },
121 handleDragend: {
122 value: function(event) {
123 this.parentComponent.isDragging = false;
124 }
125 }
126
61}); 127});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index ff5dae7a..5ea236e9 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,14 +6,19 @@
6 6
7.tween_keyframe{ 7.tween_keyframe{
8 position: absolute; 8 position: absolute;
9 height: 16px; 9 height: 8px;
10 width: 5px; 10 width: 8px;
11 top: 4px;
11 background-color: white; 12 background-color: white;
12 z-index: 23; 13 z-index: 23;
13 border-radius: 3px; 14 border-radius: 2px;
15 -webkit-transform: rotate(45deg);
14} 16}
15 17
16.tween_keyframe.keyframeSelected{ 18.tween_keyframe.keyframeSelected{
19 height: 10px;
20 width: 10px;
21 top: 3px;
17 background-color: #570e19; 22 background-color: #570e19;
18 border-style: solid; 23 border-style: solid;
19 border-width: thin; 24 border-width: thin;