diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel')
3 files changed, 64 insertions, 27 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 34f14a5a..aa204be7 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 | |||
@@ -6,7 +6,7 @@ | |||
6 | 6 | ||
7 | .bindingHud { | 7 | .bindingHud { |
8 | position: absolute; | 8 | position: absolute; |
9 | background: #282828; | 9 | background: rgba(0, 0, 0, 0.8); |
10 | padding: 0px; | 10 | padding: 0px; |
11 | color: #FFF; | 11 | color: #FFF; |
12 | font-size: 11px; | 12 | font-size: 11px; |
@@ -15,6 +15,7 @@ | |||
15 | padding: 3px; | 15 | padding: 3px; |
16 | padding-top:0px; | 16 | padding-top:0px; |
17 | border:1px solid #000; | 17 | border:1px solid #000; |
18 | text-shadow: 1px 1px 0px #000; | ||
18 | } | 19 | } |
19 | 20 | ||
20 | .bindingHud .bindingTitle { | 21 | .bindingHud .bindingTitle { |
@@ -27,9 +28,8 @@ | |||
27 | } | 28 | } |
28 | 29 | ||
29 | .bindingHud .hudRepetition { | 30 | .bindingHud .hudRepetition { |
30 | background: #555; | 31 | background: rgba(0, 0, 0, 0.3); |
31 | line-height:16px; | 32 | line-height:16px; |
32 | border:1px solid #000; | ||
33 | box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; | 33 | box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; |
34 | min-width: 80px; | 34 | min-width: 80px; |
35 | } | 35 | } |
@@ -41,7 +41,8 @@ | |||
41 | padding:1px 9px; | 41 | padding:1px 9px; |
42 | } | 42 | } |
43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { | 43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { |
44 | background-color:#44F; | 44 | background: #5e9eff; |
45 | display:block; | ||
45 | } | 46 | } |
46 | 47 | ||
47 | .bindingHud .hudOption:last-child { | 48 | .bindingHud .hudOption:last-child { |
@@ -50,14 +51,14 @@ | |||
50 | 51 | ||
51 | .bindingHud .hudOption .connectorBubble { | 52 | .bindingHud .hudOption .connectorBubble { |
52 | position: absolute; | 53 | position: absolute; |
53 | right: -11px; | 54 | right: -10px; |
54 | top: 2px; | 55 | top: 1px; |
55 | background: #555; | 56 | background: rgba(0, 0, 0, 0.3); |
56 | border: 1px solid black; | 57 | border-radius: 50%; |
57 | border-radius: 0px; | 58 | width: 16px; |
58 | width: 12px; | 59 | height: 16px; |
59 | height: 12px; | ||
60 | border-left: 0px; | 60 | border-left: 0px; |
61 | display: none; | ||
61 | /*border-bottom-right-radius: 50%; | 62 | /*border-bottom-right-radius: 50%; |
62 | border-top-right-radius: 50%;*/ | 63 | border-top-right-radius: 50%;*/ |
63 | 64 | ||
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 5e37cfc9..afa4cd47 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 | |||
@@ -14,7 +14,8 @@ | |||
14 | "owner": { | 14 | "owner": { |
15 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", | 15 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", |
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "bindingHud"} | 17 | "element": {"#": "bindingHud"}, |
18 | "titleElement": {"#": "title"} | ||
18 | } | 19 | } |
19 | }, | 20 | }, |
20 | "repeater": { | 21 | "repeater": { |
@@ -32,17 +33,7 @@ | |||
32 | "element": {"#" : "hudOption"} | 33 | "element": {"#" : "hudOption"} |
33 | }, | 34 | }, |
34 | "bindings": { | 35 | "bindings": { |
35 | "title": {"<-": "@repeater.objectAtCurrentIteration.title"}, | 36 | "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} |
36 | "bindings": {"<-": "@repeater.objectAtCurrentIteration.bindings"} | ||
37 | } | ||
38 | }, | ||
39 | "Title": { | ||
40 | "prototype": "montage/ui/dynamic-text.reel", | ||
41 | "properties": { | ||
42 | "element": {"#": "title"} | ||
43 | }, | ||
44 | "bindings": { | ||
45 | "value": {"<-": "@owner.title"} | ||
46 | } | 37 | } |
47 | } | 38 | } |
48 | } | 39 | } |
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 029a1a39..14347a32 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 | |||
@@ -12,13 +12,30 @@ var Montage = require("montage/core/core").Montage, | |||
12 | Component = require("montage/ui/component").Component; | 12 | Component = require("montage/ui/component").Component; |
13 | 13 | ||
14 | exports.BindingHud = Montage.create(Component, { | 14 | exports.BindingHud = Montage.create(Component, { |
15 | title: { | 15 | _bindingArgs: { |
16 | value: "default" | 16 | value: null |
17 | }, | ||
18 | |||
19 | titleElement: { | ||
20 | value: null | ||
21 | }, | ||
22 | |||
23 | bindingArgs: { | ||
24 | get: function() { | ||
25 | return this._bindingArgs; | ||
26 | }, | ||
27 | set: function(val) { | ||
28 | this._bindingArgs = val; | ||
29 | this.title = this.bindingArgs.sourceObject.identifier; | ||
30 | this.x = this._bindingArgs.sourceObject.element.offsetLeft; | ||
31 | this.y = this._bindingArgs.sourceObject.element.offsetTop; | ||
32 | this.needsDraw = true; | ||
33 | console.log("Binding Args Set", val); | ||
34 | } | ||
17 | }, | 35 | }, |
36 | |||
18 | properties: { | 37 | properties: { |
19 | value: [ | 38 | value: [ |
20 | {"title": "myProperty1"}, | ||
21 | {"title":"myproperty2"} | ||
22 | ] | 39 | ] |
23 | }, | 40 | }, |
24 | 41 | ||
@@ -30,10 +47,38 @@ exports.BindingHud = Montage.create(Component, { | |||
30 | value: 100 | 47 | value: 100 |
31 | }, | 48 | }, |
32 | 49 | ||
50 | _title: { | ||
51 | value: "default" | ||
52 | }, | ||
53 | |||
54 | title: { | ||
55 | get: function() { | ||
56 | return this._title; | ||
57 | }, | ||
58 | set: function(val) { | ||
59 | this._title = val; | ||
60 | } | ||
61 | }, | ||
62 | |||
63 | prepareForDraw: { | ||
64 | value: function() { | ||
65 | var arrProperties = this.application.ninja.objectsController.getEnumerableProperties(this._bindingArgs.sourceObject, true); | ||
66 | arrProperties.forEach(function(obj) { | ||
67 | var objBound = false; | ||
68 | if(this._bindingArgs._boundObjectPropertyPath === obj) { | ||
69 | objBound = true; | ||
70 | } | ||
71 | this.properties.push({"title":obj, "bound": objBound}); | ||
72 | }.bind(this)); | ||
73 | } | ||
74 | }, | ||
75 | |||
33 | draw: { | 76 | draw: { |
34 | value: function() { | 77 | value: function() { |
78 | this.titleElement.innerHTML = this.title; | ||
35 | this.element.style.top = this.y + "px"; | 79 | this.element.style.top = this.y + "px"; |
36 | this.element.style.left = this.x + "px"; | 80 | this.element.style.left = this.x + "px"; |
81 | console.log("hud",this); | ||
37 | } | 82 | } |
38 | } | 83 | } |
39 | }); \ No newline at end of file | 84 | }); \ No newline at end of file |