aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js35
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css23
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html15
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js53
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.css11
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html9
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js103
7 files changed, 169 insertions, 80 deletions
diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
index 07cbff11..78189415 100755
--- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
+++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
@@ -12,30 +12,53 @@ var Montage = require("montage/core/core").Montage,
12 Component = require("montage/ui/component").Component; 12 Component = require("montage/ui/component").Component;
13 13
14exports.BindingHudOption = Montage.create(Component, { 14exports.BindingHudOption = Montage.create(Component, {
15 _title: {
16 value: null
17 },
18
15 title: { 19 title: {
16 value: "value" 20 get: function() {
21 return this._title;
22 },
23 set: function(val) {
24 this._title = val;
25 this.needsDraw = true;
26 }
17 }, 27 },
18 _bindings: { 28
29 bound: {
30 value: false
31 },
32
33 _hudOptions: {
19 value: [] 34 value: []
20 }, 35 },
21 36
22 bindings: { 37 hudOptions: {
23 get: function() { 38 get: function() {
24 return this._bindings; 39 return this._hudOptions;
25 }, 40 },
26 set: function(val) { 41 set: function(val) {
27 this._bindings = val; 42 this._hudOptions = val;
43 this.title = val.title;
44 this.bound = val.bound;
28 this.needsDraw = true; 45 this.needsDraw = true;
29 } 46 }
30 }, 47 },
31 48
32 draw: { 49 draw: {
33 value:function() { 50 value:function() {
34 if(this.bindings.length > 0) { 51 if(this.bound) {
52 console.log(this.title);
35 this.element.classList.add("bound"); 53 this.element.classList.add("bound");
36 } else { 54 } else {
37 this.element.classList.remove("bound"); 55 this.element.classList.remove("bound");
38 } 56 }
57// if(this.bindings.length > 0) {
58// this.element.classList.add("bound");
59// } else {
60// this.element.classList.remove("bound");
61// }
39 } 62 }
40 } 63 }
41}); \ No newline at end of file 64}); \ No newline at end of file
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
14exports.BindingHud = Montage.create(Component, { 14exports.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;