diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js | 48 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | 28 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.html | 14 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 53 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.css | 14 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.html | 11 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 136 | ||||
-rw-r--r-- | js/tools/bindingTool.js | 27 |
8 files changed, 263 insertions, 68 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 58f4175e..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,7 +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 | ||
14 | exports.BindingHudOption = Montage.create(Component, { | 14 | exports.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 | } | ||
27 | }, | ||
28 | |||
29 | bound: { | ||
30 | value: false | ||
31 | }, | ||
32 | |||
33 | _hudOptions: { | ||
34 | value: [] | ||
35 | }, | ||
36 | |||
37 | hudOptions: { | ||
38 | get: function() { | ||
39 | return this._hudOptions; | ||
40 | }, | ||
41 | set: function(val) { | ||
42 | this._hudOptions = val; | ||
43 | this.title = val.title; | ||
44 | this.bound = val.bound; | ||
45 | this.needsDraw = true; | ||
46 | } | ||
47 | }, | ||
48 | |||
49 | draw: { | ||
50 | value:function() { | ||
51 | if(this.bound) { | ||
52 | console.log(this.title); | ||
53 | this.element.classList.add("bound"); | ||
54 | } else { | ||
55 | this.element.classList.remove("bound"); | ||
56 | } | ||
57 | // if(this.bindings.length > 0) { | ||
58 | // this.element.classList.add("bound"); | ||
59 | // } else { | ||
60 | // this.element.classList.remove("bound"); | ||
61 | // } | ||
62 | } | ||
17 | } | 63 | } |
18 | }); \ 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 626706ed..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,18 +28,21 @@ | |||
27 | } | 28 | } |
28 | 29 | ||
29 | .bindingHud .hudRepetition { | 30 | .bindingHud .hudRepetition { |
30 | background: #555; | 31 | background: rgba(0, 0, 0, 0.3); |
31 | padding:1px 9px; | ||
32 | line-height:16px; | 32 | line-height:16px; |
33 | border:1px solid #000; | ||
34 | box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; | 33 | box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; |
35 | min-width: 65px; | 34 | min-width: 80px; |
36 | } | 35 | } |
37 | 36 | ||
38 | .bindingHud .hudOption { | 37 | .bindingHud .hudOption { |
39 | position:relative; | 38 | position:relative; |
40 | border-bottom:1px solid #505050; | 39 | border-bottom:1px solid #505050; |
41 | line-height:16px; | 40 | line-height:16px; |
41 | padding:1px 9px; | ||
42 | } | ||
43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { | ||
44 | background: #5e9eff; | ||
45 | display:block; | ||
42 | } | 46 | } |
43 | 47 | ||
44 | .bindingHud .hudOption:last-child { | 48 | .bindingHud .hudOption:last-child { |
@@ -47,14 +51,14 @@ | |||
47 | 51 | ||
48 | .bindingHud .hudOption .connectorBubble { | 52 | .bindingHud .hudOption .connectorBubble { |
49 | position: absolute; | 53 | position: absolute; |
50 | right: -20px; | 54 | right: -10px; |
51 | top: 2px; | 55 | top: 1px; |
52 | background: #555; | 56 | background: rgba(0, 0, 0, 0.3); |
53 | border: 1px solid black; | 57 | border-radius: 50%; |
54 | border-radius: 0px; | 58 | width: 16px; |
55 | width: 12px; | 59 | height: 16px; |
56 | height: 12px; | ||
57 | border-left: 0px; | 60 | border-left: 0px; |
61 | display: none; | ||
58 | /*border-bottom-right-radius: 50%; | 62 | /*border-bottom-right-radius: 50%; |
59 | border-top-right-radius: 50%;*/ | 63 | border-top-right-radius: 50%;*/ |
60 | 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 1f3b181c..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,16 +33,7 @@ | |||
32 | "element": {"#" : "hudOption"} | 33 | "element": {"#" : "hudOption"} |
33 | }, | 34 | }, |
34 | "bindings": { | 35 | "bindings": { |
35 | "title": {"<-": "@repeater.objectAtCurrentIteration.title"} | 36 | "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} |
36 | } | ||
37 | }, | ||
38 | "Title": { | ||
39 | "prototype": "montage/ui/dynamic-text.reel", | ||
40 | "properties": { | ||
41 | "element": {"#": "title"} | ||
42 | }, | ||
43 | "bindings": { | ||
44 | "value": {"<-": "@owner.title"} | ||
45 | } | 37 | } |
46 | } | 38 | } |
47 | } | 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 | }, |