From 04ef4ffcfde762a0aead4a7b702f3c019fdbeb69 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 31 May 2012 21:57:22 -0700
Subject: Binding Panel - Developed panel components.
---
.../binding/binding-item.reel/binding-item.css | 13 ++++++++
.../binding/binding-item.reel/binding-item.html | 37 ++++++++++++++++++++++
.../binding/binding-item.reel/binding-item.js | 26 +++++++++++++++
3 files changed, 76 insertions(+)
create mode 100644 js/panels/binding/binding-item.reel/binding-item.css
create mode 100644 js/panels/binding/binding-item.reel/binding-item.html
create mode 100644 js/panels/binding/binding-item.reel/binding-item.js
(limited to 'js/panels/binding')
diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css
new file mode 100644
index 00000000..dc90f162
--- /dev/null
+++ b/js/panels/binding/binding-item.reel/binding-item.css
@@ -0,0 +1,13 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ </copyright> */
+
+.binding-item {
+ color: #FFF;
+ margin: 0 8px;
+ padding: 3px;
+ border-bottom: 1px solid #FFF;
+ list-style-type: none;
+}
\ No newline at end of file
diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html
new file mode 100644
index 00000000..23182345
--- /dev/null
+++ b/js/panels/binding/binding-item.reel/binding-item.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <link rel="stylesheet" href="binding-item.css" type="text/css">
+ <script type="text/montage-serialization">
+ {
+ "owner": {
+ "prototype": "js/panels/binding/binding-item.reel",
+ "properties": {
+ "element": {"#": "binding-item"}
+ }
+ },
+ "label": {
+ "prototype": "montage/ui/dynamic-text.reel",
+ "properties": {
+ "element": {"#": "label"}
+ },
+ "bindings": {
+ "value": {"<-": "@owner.sourceObjectPropertyPath"}
+ }
+ }
+
+ }
+ </script>
+</head>
+<body>
+<li data-montage-id="binding-item" class="binding-item">
+ <span data-montage-id="label"></span>
+</li>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js
new file mode 100644
index 00000000..9365da65
--- /dev/null
+++ b/js/panels/binding/binding-item.reel/binding-item.js
@@ -0,0 +1,26 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+
+
+exports.BindingItem = Montage.create(Component, {
+
+ sourceObjectPropertyPath : { value: null },
+
+ templateDidLoad : {
+ value: function() {
+ console.log("loaded binding item");
+ }
+ },
+
+ prepareForDraw: {
+ value: function() {
+ console.log("preparing to draw binding item");
+ }
+ }
+});
\ No newline at end of file
--
cgit v1.2.3
From 0f59ef2a4b78fbcee402255857e8355a67fa7e66 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 1 Jun 2012 12:53:24 -0700
Subject: Bindings Panel - Update binding panel components
---
.../binding/binding-item.reel/binding-item.css | 34 +++++++++++-
.../binding/binding-item.reel/binding-item.html | 54 +++++++++++++++++-
.../binding/binding-item.reel/binding-item.js | 64 +++++++++++++++++++++-
3 files changed, 147 insertions(+), 5 deletions(-)
(limited to 'js/panels/binding')
diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css
index dc90f162..0f4416b9 100644
--- a/js/panels/binding/binding-item.reel/binding-item.css
+++ b/js/panels/binding/binding-item.reel/binding-item.css
@@ -8,6 +8,38 @@
color: #FFF;
margin: 0 8px;
padding: 3px;
- border-bottom: 1px solid #FFF;
+ border-bottom: 1px solid #505050;
list-style-type: none;
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+}
+.binding-item > * {
+ -webkit-box-flex: 1;
+}
+.source-object, .bound-object {
+ padding: 5px 0 3px;
+}
+.source-object {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVFRkE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGMEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUVEQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUVFQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2B50zlPwAAAttJREFUeNqMls9rE0EUx2fz24RKsoluUAkIHhWFXtVCJRAhFBRB8D8I1GMF%2FwJFjwr9DzwVipKDUBvQg4KgeJOe1OSS2PxYMUnzO77vsm%2BcSbJpB76dLvve5719M%2FMmxnQ6FV4jn89fo%2BkBaY2UJmVIZVKV9J70ivTNy99YBCdolqZCv9%2B%2F0%2Bl0BM0CdqPRSAQCAWEYhgiHwyIWi2HeJdtt0t6xcAI%2FGw6HW61Wy4H6fD4pHpPJRApBEomECAaDz%2BnVI084gV90u93NRqPhwJCl3%2B%2BXYGTM9gCPx2Pna%2FB%2FMpkU0Wj0Jb16yLyAAn4CcL1eRxYSrMLVASB%2FEQLAL5VKbVKANr1%2BLDMn8AaV4nWtVnNggGNGADgjY4gHfCAEABhfQP7ObFkW%2FO%2BS2S5nXmg2mw6AM1ZLYlDi5u1fInLJlgHaX86K1gdLKxcEDgUoOHBsN1q43GAwEKFQSANDACdyPzVw56sl%2Fn48R%2B%2Bnc4sMDvGytNCrKOZ9qrWToVpjzngenBbtTxdkqdhW9QWPxj2UZX12yzmOnuDzshQ8q0GgXq%2BHV1lknsFCqDvCF5ivsQrW9vLMYoMDHo2LIJqolWo4HZOG%2BvbzhcYLwaofP7s8E4QmZ80rjmHvZ8TR96QEnbp8KE6vlTU427IfP7u8Jv6WsRCcvTSmxz%2BljOgd6AFWblbmAqinHBzwaPwAvIT%2BoPYLmQkFsN%2FpAaJXfouV6xUtWz5QrEgkAtM9wHfoyMpeAWlB3ABHB%2Bb%2FAFcpwI2KBlV9wQOXj%2F9%2BtVpdxwscfT7%2B8oQuOf4MxfGHYJ9Op0tkdou3xDa6GvcK7hezUmGq2Ie7o9vfhQMvFos7lO1T0zRlBiwOxAD1edYW%2FuCgJEv7OZfluH7OWtTPF95E1Hy2bNs%2B8U0Uj8fR9JbfREqAnHuHbvAdyjXnJqXcoW%2FcGr890QWtBFlF10Rzc2%2F%2BM6RD9xdAya3tZy%2F%2FfwIMAMwfSVrTb5e6AAAAAElFTkSuQmCC);
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 30px;
+}
+.bound-object {
+ padding-left: 12px;
+}
+.so-object-identifier, .bo-object-identifier {
+ float: right;
+ color: #999;
+}
+.binding-item .binding-edit-button {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkI4QzVEMTc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkI4QzVEMjc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCQjhDNUNGNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCQjhDNUQwNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bs3B0RQAAAd9JREFUeNockbGL2nAUx%2FNLorHaJXKjJ6YcDkVcHByUQwQDbl26FqEu3dykLjoIXXTwDygKFcrRP%2BC8Q0HwQDlwOaRCKFiuCmo0d0Jr1ZjY923ghZfv9%2FN%2B7%2F1eOJ%2FPx%2BEpl8uKZVk3p9PpRlXV81QqdY4cGjww%2F9l2u81Fo1EuFotdbrdbzbbtX%2FP5%2FAqBHBo8MGB5RVF8yWTSv9%2FvXYIgsNVq9XcwGLxCIBdFkcEDA5YZhnFNJwXcbjc3Go32mUzmlsaYYAQ6QGk0GmooFJKoE8fz%2FE9%2BsVjIHo%2FHpes6y2azX8PhsNbtdtMI5NDggQHL0wW%2FdDodfTqdPm02m4dqtfqmXq9LCOTQ4IEBy3u93gdq9YfCplHM2Wz2gsZ7ptggJ%2B0ADwxYRuI1zfqaLvY7l8t9mkwmcqVSeWeapl0oFJqBQOCpVqt9lCTpJWnfWb%2Ffv6fKM2xot9s9FovFz71ez6ST7UQiIZVKpffUzU%2Ffp%2FV6vWLBYPDD8Xi8oJ%2FkarVaKhVatLlHxhgny7KfPCGdTt%2FS945W%2FEPUNO2KNihGIpH44XBI0Tak8Xh8hoJ4PC7RGCZN0BkOh3fEHUV6Gdi50%2BnUqaWxXC6FfD7%2FDQXNZvMtXdZyOBw6IUtw%2FwQYACT6GJDDh744AAAAAElFTkSuQmCC);
+ background-repeat: no-repeat;
+ background-position: right center;
+ border: 0 none;
+ cursor: pointer;
+ padding-top: 6px;
+ width: 12px;
+ height: 100%;
+ margin-left: 10px;
}
\ No newline at end of file
diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html
index 23182345..a569b8b4 100644
--- a/js/panels/binding/binding-item.reel/binding-item.html
+++ b/js/panels/binding/binding-item.reel/binding-item.html
@@ -16,14 +16,54 @@
"element": {"#": "binding-item"}
}
},
- "label": {
+ "soProperty": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
- "element": {"#": "label"}
+ "element": {"#": "so-property"}
},
"bindings": {
"value": {"<-": "@owner.sourceObjectPropertyPath"}
}
+ },
+ "soObject": {
+ "prototype": "montage/ui/dynamic-text.reel",
+ "properties": {
+ "element": {"#": "so-object"}
+ },
+ "bindings": {
+ "value": {"<-": "@owner.sourceObjectLabel"}
+ }
+ },
+ "boProperty" : {
+ "prototype": "montage/ui/dynamic-text.reel",
+ "properties": {
+ "element": {"#": "bo-property"}
+ },
+ "bindings": {
+ "value": {"<-": "@owner.boundObjectPropertyPath"}
+ }
+ },
+ "boObject": {
+ "prototype": "montage/ui/dynamic-text.reel",
+ "properties": {
+ "element": {"#": "bo-object"}
+ },
+ "bindings": {
+ "value": {"<-": "@owner.boundObjectLabel"}
+ }
+ },
+ "editButton": {
+ "prototype": "montage/ui/button.reel",
+ "properties": {
+ "element": {"#": "edit-button"},
+ "identifier": "editButton",
+ "label": " "
+ },
+ "listeners": [{
+ "type": "action",
+ "listener": {"@": "owner"}
+ }]
+
}
}
@@ -31,7 +71,15 @@
</head>
<body>
<li data-montage-id="binding-item" class="binding-item">
- <span data-montage-id="label"></span>
+ <div data-montage-id="sourceObject" class="source-object">
+ <span data-montage-id="so-property" class="so-property"></span>
+ <span data-montage-id="so-object" class="so-object-identifier"></span>
+ </div>
+ <div data-montage-id="boundObject" class="bound-object">
+ <span data-montage-id="bo-property" class="bo-property"></span>
+ <span data-montage-id="bo-object" class="bo-object-identifier"></span>
+ </div>
+ <button data-montage-id="edit-button" class="binding-edit-button"></button>
</li>
</body>
</html>
\ No newline at end of file
diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js
index 9365da65..bda62ef3 100644
--- a/js/panels/binding/binding-item.reel/binding-item.js
+++ b/js/panels/binding/binding-item.reel/binding-item.js
@@ -9,8 +9,70 @@ var Montage = require("montage/core/core").Montage,
exports.BindingItem = Montage.create(Component, {
+ sourceObjectLabel : { value: null },
+ boundObjectLabel : { value: null },
- sourceObjectPropertyPath : { value: null },
+ _sourceObject : { value: null },
+ sourceObject : {
+ get: function() {
+ return this._sourceObject;
+ },
+ set: function(value) {
+ if(value === this._sourceObject) { return; }
+
+ this.sourceObjectLabel = value.identifier;
+
+ this._sourceObject = value;
+ }
+ },
+ _boundObject : { value: null },
+ boundObject : {
+ get: function() {
+ return this._boundObject;
+ },
+ set: function(value) {
+ if(value === this._boundObject) { return; }
+
+ this.boundObjectLabel = value.identifier;
+
+ this._boundObject = value;
+ }
+ },
+
+ _sourceObjectPropertyPath : { value: null },
+ sourceObjectPropertyPath : {
+ get: function() {
+ return this._sourceObjectPropertyPath;
+ },
+ set: function(value) {
+ if(value === this._sourceObjectPropertyPath) { return; }
+ this._sourceObjectPropertyPath = value;
+ this.needsDraw = true;
+ }
+ },
+ _boundObjectPropertyPath : { value: null },
+ boundObjectPropertyPath : {
+ get: function() {
+ return this._boundObjectPropertyPath;
+ },
+ set: function(value) {
+ if(value === this._boundObjectPropertyPath) { return; }
+ this._boundObjectPropertyPath = value;
+ this.needsDraw = true;
+ }
+ },
+
+ _oneway : { value: null },
+ oneway : {
+ get: function() {
+ return this._oneway;
+ },
+ set: function(value) {
+ if(value === this._oneway) { return; }
+ this._oneway = value;
+ this.needsDraw = true;
+ }
+ },
templateDidLoad : {
value: function() {
--
cgit v1.2.3