aboutsummaryrefslogtreecommitdiff
path: root/js/stage/binding-view.reel/binding-hud.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css66
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html52
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js89
3 files changed, 207 insertions, 0 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
new file mode 100755
index 00000000..aa204be7
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -0,0 +1,66 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7.bindingHud {
8 position: absolute;
9 background: rgba(0, 0, 0, 0.8);
10 padding: 0px;
11 color: #FFF;
12 font-size: 11px;
13 box-shadow: 2px 2px 3px black;
14 border-radius: 3px;
15 padding: 3px;
16 padding-top:0px;
17 border:1px solid #000;
18 text-shadow: 1px 1px 0px #000;
19}
20
21.bindingHud .bindingTitle {
22 font-weight:bold;
23 background: url('/images/panels/horizontal-resize.png') no-repeat;
24 padding-left: 10px;
25 line-height: 20px;
26 background-position: left center;
27 padding-top: 2px;
28}
29
30.bindingHud .hudRepetition {
31 background: rgba(0, 0, 0, 0.3);
32 line-height:16px;
33 box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;
34 min-width: 80px;
35}
36
37.bindingHud .hudOption {
38 position:relative;
39 border-bottom:1px solid #505050;
40 line-height:16px;
41 padding:1px 9px;
42}
43.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble {
44 background: #5e9eff;
45 display:block;
46}
47
48.bindingHud .hudOption:last-child {
49 border-bottom: 0px;
50}
51
52.bindingHud .hudOption .connectorBubble {
53 position: absolute;
54 right: -10px;
55 top: 1px;
56 background: rgba(0, 0, 0, 0.3);
57 border-radius: 50%;
58 width: 16px;
59 height: 16px;
60 border-left: 0px;
61 display: none;
62 /*border-bottom-right-radius: 50%;
63 border-top-right-radius: 50%;*/
64
65
66} \ No newline at end of file
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
new file mode 100755
index 00000000..afa4cd47
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -0,0 +1,52 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="binding-hud.css">
11
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "prototype": "js/stage/binding-view.reel/binding-hud.reel",
16 "properties": {
17 "element": {"#": "bindingHud"},
18 "titleElement": {"#": "title"}
19 }
20 },
21 "repeater": {
22 "prototype": "montage/ui/repetition.reel",
23 "properties": {
24 "element": {"#": "hudRepetition"}
25 },
26 "bindings": {
27 "objects": {"<-": "@owner.properties"}
28 }
29 },
30 "hudOption": {
31 "prototype": "js/stage/binding-view.reel/binding-hud-option.reel",
32 "properties": {
33 "element": {"#" : "hudOption"}
34 },
35 "bindings": {
36 "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"}
37 }
38 }
39 }
40 </script>
41
42</head>
43<body>
44 <section data-montage-id="bindingHud" class="bindingHud">
45 <div data-montage-id="title" class="bindingTitle"></div>
46 <div data-montage-id="hudRepetition" class="hudRepetition">
47 <div data-montage-id="hudOption" class="hudOption"></div>
48 </div>
49 </section>
50
51</body>
52</html>
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
new file mode 100755
index 00000000..acd072f9
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -0,0 +1,89 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7/**
8@requires montage/core/core
9@requires montage/ui/component
10*/
11var Montage = require("montage/core/core").Montage,
12 Component = require("montage/ui/component").Component;
13
14exports.BindingHud = Montage.create(Component, {
15 _bindingArgs: {
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 if (typeof(val) !== "undefined") {
29 this._bindingArgs = val;
30 this.title = this.bindingArgs.component.identifier;
31 this.x = this._bindingArgs.component.element.offsetLeft;
32 this.y = this._bindingArgs.component.element.offsetTop;
33 this.properties = this._bindingArgs.properties;
34 this.needsDraw = true;
35 console.log("Binding Args Set", val);
36 } else {
37 this.properties = [];
38 }
39 }
40 },
41
42 properties: {
43 value: [
44 ]
45 },
46
47 x: {
48 value: 20
49 },
50
51 y: {
52 value: 100
53 },
54
55 _title: {
56 value: "default"
57 },
58
59 title: {
60 get: function() {
61 return this._title;
62 },
63 set: function(val) {
64 this._title = val;
65 }
66 },
67
68 prepareForDraw: {
69 value: function() {
70// var arrProperties = this.application.ninja.objectsController.getEnumerableProperties(this._bindingArgs.sourceObject, true);
71// arrProperties.forEach(function(obj) {
72// var objBound = false;
73// if(this._bindingArgs._boundObjectPropertyPath === obj) {
74// objBound = true;
75// }
76// this.properties.push({"title":obj, "bound": objBound});
77// }.bind(this));
78 }
79 },
80
81 draw: {
82 value: function() {
83 this.titleElement.innerHTML = this.title;
84 this.element.style.top = this.y + "px";
85 this.element.style.left = this.x + "px";
86 console.log("hud",this);
87 }
88 }
89}); \ No newline at end of file