diff options
author | Armen Kesablyan | 2012-06-13 11:36:01 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-13 11:36:01 -0700 |
commit | cfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 (patch) | |
tree | 611f4ad5bd536d6b3d0364798c145f4ee7f88df4 /js/stage/binding-view.reel/binding-hud.reel | |
parent | 337efc667372326ae2f9984d89a47bb151016774 (diff) | |
download | ninja-cfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5.tar.gz |
Binding-View: Translate huds
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel')
3 files changed, 92 insertions, 5 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index aa204be7..e177963f 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | |||
@@ -40,7 +40,7 @@ | |||
40 | line-height:16px; | 40 | line-height:16px; |
41 | padding:1px 9px; | 41 | padding:1px 9px; |
42 | } | 42 | } |
43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { | 43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { |
44 | background: #5e9eff; | 44 | background: #5e9eff; |
45 | display:block; | 45 | display:block; |
46 | } | 46 | } |
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index afa4cd47..38d2a2ec 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html | |||
@@ -35,6 +35,27 @@ | |||
35 | "bindings": { | 35 | "bindings": { |
36 | "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} | 36 | "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} |
37 | } | 37 | } |
38 | }, | ||
39 | "resizer1": { | ||
40 | "prototype": "js/panels/resize-composer", | ||
41 | "properties": { | ||
42 | "element": {"#": "title"}, | ||
43 | "component": {"@": "owner"} | ||
44 | }, | ||
45 | "listeners": [ | ||
46 | { | ||
47 | "type": "resizeStart", | ||
48 | "listener": {"@": "owner"} | ||
49 | }, | ||
50 | { | ||
51 | "type": "resizeMove", | ||
52 | "listener": {"@": "owner"} | ||
53 | }, | ||
54 | { | ||
55 | "type": "resizeEnd", | ||
56 | "listener": {"@": "owner"} | ||
57 | } | ||
58 | ] | ||
38 | } | 59 | } |
39 | } | 60 | } |
40 | </script> | 61 | </script> |
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index acd072f9..5053d3bb 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | |||
@@ -44,14 +44,75 @@ exports.BindingHud = Montage.create(Component, { | |||
44 | ] | 44 | ] |
45 | }, | 45 | }, |
46 | 46 | ||
47 | x: { | 47 | _isResizing: { |
48 | value: null | ||
49 | }, | ||
50 | |||
51 | _resizedX : { | ||
52 | value: 0 | ||
53 | }, | ||
54 | |||
55 | _resizedY: { | ||
56 | value: 0 | ||
57 | }, | ||
58 | |||
59 | handleResizeStart: { | ||
60 | value:function(e) { | ||
61 | this.isResizing = true; | ||
62 | this.x = parseInt(this.x); | ||
63 | this.y = parseInt(this.y); | ||
64 | this.needsDraw = true; | ||
65 | } | ||
66 | }, | ||
67 | |||
68 | handleResizeMove: { | ||
69 | value:function(e) { | ||
70 | this._resizedY = e._event.dY; | ||
71 | this._resizedX = e._event.dX; | ||
72 | this.needsDraw = true; | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | handleResizeEnd: { | ||
77 | value: function(e) { | ||
78 | this.x += this._resizedX; | ||
79 | this.y += this._resizedY; | ||
80 | this._resizedX = 0; | ||
81 | this._resizedY = 0; | ||
82 | this.isResizing = false; | ||
83 | this.needsDraw = true; | ||
84 | } | ||
85 | }, | ||
86 | |||
87 | _x: { | ||
48 | value: 20 | 88 | value: 20 |
49 | }, | 89 | }, |
50 | 90 | ||
51 | y: { | 91 | _y: { |
52 | value: 100 | 92 | value: 100 |
53 | }, | 93 | }, |
54 | 94 | ||
95 | x: { | ||
96 | get: function() { | ||
97 | return this._x; | ||
98 | }, | ||
99 | set: function(val) { | ||
100 | this._x = val; | ||
101 | console.log(this._x); | ||
102 | this.needsDraw = true; | ||
103 | } | ||
104 | }, | ||
105 | |||
106 | y: { | ||
107 | get: function() { | ||
108 | return this._y; | ||
109 | }, | ||
110 | set: function(val) { | ||
111 | this._y = val; | ||
112 | this.needsDraw = true; | ||
113 | } | ||
114 | }, | ||
115 | |||
55 | _title: { | 116 | _title: { |
56 | value: "default" | 117 | value: "default" |
57 | }, | 118 | }, |
@@ -81,8 +142,13 @@ exports.BindingHud = Montage.create(Component, { | |||
81 | draw: { | 142 | draw: { |
82 | value: function() { | 143 | value: function() { |
83 | this.titleElement.innerHTML = this.title; | 144 | this.titleElement.innerHTML = this.title; |
84 | this.element.style.top = this.y + "px"; | 145 | |
85 | this.element.style.left = this.x + "px"; | 146 | // if(this.isResizing) { |
147 | // this.timelineSplitter.collapsed = this.height - this._resizedHeight < 46; | ||
148 | // this.panelSplitter.collapsed = this.width - this._resizedWidth < 30; | ||
149 | // } | ||
150 | this.element.style.top = (this.y + this._resizedY) + "px"; | ||
151 | this.element.style.left = (this.x + this._resizedX) + "px"; | ||
86 | console.log("hud",this); | 152 | console.log("hud",this); |
87 | } | 153 | } |
88 | } | 154 | } |