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.css71
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html73
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js167
3 files changed, 311 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..1c75b03a
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -0,0 +1,71 @@
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 20px 1px 10px;
42}
43
44.bindingHud .hudOption .connectorBubble:hover {
45 box-shadow: inset 0px 0px 6px #5e9eff;
46 cursor: pointer;
47}
48
49.hudOption.bound, .bindingHud .hudOption.bound {
50 background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
51}
52
53.bindingHud .hudOption:last-child {
54 border-bottom: 0px;
55}
56
57.bindingHud .hudOption .connectorBubble {
58 position: absolute;
59 right: 3px;
60 top: 3px;
61 border-radius: 50%;
62 width: 12px;
63 height: 12px;
64 border-left: 0px;
65 display: block;
66 box-shadow: inset 0px 0px 6px #AAA;
67 /*border-bottom-right-radius: 50%;
68 border-top-right-radius: 50%;*/
69
70
71} \ 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..b8410f9b
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -0,0 +1,73 @@
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 "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 ]
59 }
60 }
61 </script>
62
63</head>
64<body>
65 <section data-montage-id="bindingHud" class="bindingHud">
66 <div data-montage-id="title" class="bindingTitle"></div>
67 <div data-montage-id="hudRepetition" class="hudRepetition">
68 <div data-montage-id="hudOption"></div>
69 </div>
70 </section>
71
72</body>
73</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..a8c3ae68
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -0,0 +1,167 @@
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 _userComponent: { value: null },
24 userComponent: {
25 get: function() {
26 return this._userComponent;
27 },
28 set: function(val) {
29 this._userComponent = val;
30 }
31 },
32
33
34 bindingArgs: {
35 get: function() {
36 return this._bindingArgs;
37 },
38 set: function(val) {
39 if (typeof(val) !== "undefined") {
40 this._bindingArgs = val;
41 this.userComponent = this.bindingArgs.component;
42 this.title = this.bindingArgs.component.identifier;
43 this.x = this._bindingArgs.component.element.offsetLeft;
44 this.y = this._bindingArgs.component.element.offsetTop;
45 this.properties = this._bindingArgs.properties;
46 this.needsDraw = true;
47 } else {
48 this.properties = [];
49 }
50 }
51 },
52
53 properties: {
54 value: [
55 ]
56 },
57
58 _isResizing: {
59 value: null
60 },
61
62 _resizedX : {
63 value: 0
64 },