aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorEric Guzman2012-06-01 19:04:38 -0700
committerEric Guzman2012-06-01 19:04:38 -0700
commit9b238646d7c9d8ed1fde010cde5597f8787a8806 (patch)
treedab40b0a23cd839c50cca56338c6c9d24bf92a2f /js/panels
parent012b2af27a399fd12b58d5be86bd9509c422010d (diff)
downloadninja-9b238646d7c9d8ed1fde010cde5597f8787a8806.tar.gz
Binding Panel - Item css and toggle button action handler
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/binding/binding-item.reel/binding-item.css56
-rw-r--r--js/panels/binding/binding-item.reel/binding-item.html17
-rw-r--r--js/panels/binding/binding-item.reel/binding-item.js20
3 files changed, 74 insertions, 19 deletions
diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css
index eb4ecfe0..3dc1294c 100644
--- a/js/panels/binding/binding-item.reel/binding-item.css
+++ b/js/panels/binding/binding-item.reel/binding-item.css
@@ -10,39 +10,59 @@
10 padding: 3px; 10 padding: 3px;
11 border-bottom: 1px solid #505050; 11 border-bottom: 1px solid #505050;
12 list-style-type: none; 12 list-style-type: none;
13 /*display: -webkit-box;*/ 13 display: -webkit-box;
14 /*-webkit-box-orient: horizontal;*/ 14 -webkit-box-orient: horizontal;
15}
16.binding-item > * {
17 /*-webkit-box-flex: 1;*/
18 display: inline-block;
19} 15}
20.source-object, .bound-object { 16.source-object, .bound-object {
21 padding: 5px 0 3px; 17 padding: 5px 0 3px;
18 -webkit-box-flex: 1;
19 overflow: hidden;
20 position: relative;
22} 21}
23.source-object { 22.source-object > span, .bound-object > span {
24 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); 23 position: absolute;
25 background-position: right center;
26 background-repeat: no-repeat;
27 padding-right: 30px;
28 width: 41%;
29} 24}
30.bound-object { 25.bound-object {
31 padding-left: 12px; 26 padding-left: 12px;
32 width: 41%; 27}
28.so-property {
29 left: 3px;
30}
31.bo-property {
32 left: 6px;
33} 33}
34.so-object-identifier, .bo-object-identifier { 34.so-object-identifier, .bo-object-identifier {
35 float: right; 35 right: 3px;
36 color: #999; 36 color: #999;
37} 37}
38.binding-item .binding-edit-button { 38
39 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); 39/* -------------
40 background-repeat: no-repeat; 40 Buttons
41 ---------------- */
42
43.direction-toggle-button, .binding-edit-button {
44 background-color: transparent;
41 background-position: right center; 45 background-position: right center;
46 background-repeat: no-repeat;
42 border: 0 none; 47 border: 0 none;
43 cursor: pointer; 48 cursor: pointer;
49 width: 23px;
50 height: 100%;
51 -webkit-box-flex: 0;
52}
53.direction-toggle-button {
54 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);
55 border-radius: 50%;
56 height: 23px;
57 width: 23px;
58}
59.direction-toggle-button.two-way {
60 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVGM0E0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGNEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUYxQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUYyQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BbFXFCAAAA8FJREFUeNqMlt9rHFUUx78zszO7mxWz6a62KUlsSBrwwboixRfR0ppWMAZKadX%2BAdKC4ouV%2BhdU1DeFPiSoT%2BJDQZA8CIUWX0sCbSEVTUGaNr%2Fo7uxmZ3azu7M%2FPN%2FbvZNZmrS58N27O%2Becz71z7r3nrtHpdLBbm5qaykl3XvSu6IBoRLQsWhf9JfpVdHu3eGMnuEAnpbtYr9dPVyoVSA%2F6NZtNxGIxGIaBeDyOVCrF%2FnfxvSq6%2Fly4gL8NguBSsVhUUNM0Q%2BnWbrdDcZCBgQHYtv2dmL7aFS7gH6rV6meFQkHBOEvLskIwZ6z9CW61Wupt%2BD2TyaCvr%2B9HMX2ueWYEfIXgfD6voI7jcDbbcuKovpzrfSaiH%2F0Zx3hBXemBC3haUnHZdd0wiAG6N2M2Vg9%2FgpXx83CH31NvE7XrGMaTI8jT0ZlfpIGvrVMRpkTAa%2BMfYyv7OuJ2DMXhk3CHTiib9tNi%2Bsghjx%2FW%2FPx8Thbu%2B3K53DMTDV4fO4fG%2FpwCp737MFJZ1NLj6LRbSFWWw%2FXiWlCNRgOJRGJMOHPWxMTEF57nvc2F0fBe8BtIxh30%2B%2FeRXfwZic4WOv3D8NOvyoI20ec%2F6BmAi8uWTCZdpuX4U1vOtLA6ehY1WcCEY6PfW0L67uyToLVb6C%2FcUc83XzmF%2FOAxlc5ofK1Wo%2Bsk4SPcUuE%2BNkysHDoDL3MEljxL1tbxwu2Z7c3baSHx4CYy%2F%2F6m7PmhSRngndBMDnnSRkncp1%2BFM2jG0%2FBfHJPv4igfyY2Fp491UIHtPVJ2%2BpUGjsjqOSpenwFyCXf1rJmzWM3F6NIvMAXQlt9bg28hGD0OOKntE7pvHO7RL5XdqW4of7Qa4QHr8lTOl7mAevZs8eo6Rv75Cah72HKy8Mc%2BlAFOSFRMgTdzF9AQd8tfU35W4PeUBvKk%2FUf4DdaHaL3gDDjA4L1ZBJUSqvUAm5kcaoNHUXjtU1QD8Ss9xEGxE6x3iZZsRcKvE35NakJYKyjt5MgA%2BxdnUPeLKLcT2Bj%2BAF69iWbxIQ4szkrq%2FNA3Gkseuebc3NyCzPwG97h2iMqurD0ZQN7Ab8iz0iMBz8BoeDv7C4c8gS%2Fo43%2BVVY2j8jBRPQH%2BKob%2BnoXtLqneqJd77DpGV8dufd8uud2qeJnVLXpSn1dyNVwKFrLZLFPyjZi%2FfmY91%2BC9wKmd6vmON5EUn0ulUmnPN1E6nWZdf%2FZNFBng%2Fe4dOq3vUL0TOAjfJnKH%2FtHN8Z97uqAjg7wp3Ucsbt2b%2FyXR4%2B4%2FAO6Ia6Jbu8X%2FL8AAPIZc5jSqbNgAAAAASUVORK5CYII%3D);
61}
62.binding-item .binding-edit-button {
63 background-image: 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);
44 padding-top: 6px; 64 padding-top: 6px;
45 width: 12px; 65 width: 12px;
46 height: 100%;
47 margin-left: 10px; 66 margin-left: 10px;
67
48} \ No newline at end of file 68} \ 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 a569b8b4..79644a7a 100644
--- a/js/panels/binding/binding-item.reel/binding-item.html
+++ b/js/panels/binding/binding-item.reel/binding-item.html
@@ -13,7 +13,8 @@
13 "owner": { 13 "owner": {
14 "prototype": "js/panels/binding/binding-item.reel", 14 "prototype": "js/panels/binding/binding-item.reel",
15 "properties": { 15 "properties": {
16 "element": {"#": "binding-item"} 16 "element": {"#": "binding-item"},
17 "directionToggleButton": {"@": "directionToggleButton" }
17 } 18 }
18 }, 19 },
19 "soProperty": { 20 "soProperty": {
@@ -64,6 +65,19 @@
64 "listener": {"@": "owner"} 65 "listener": {"@": "owner"}
65 }] 66 }]
66 67
68 },
69 "directionToggleButton": {
70 "prototype": "montage/ui/button.reel",
71 "properties": {
72 "element": {"#": "direction-toggle-button"},
73 "identifier": "directionToggleButton",
74 "label": " "
75 },
76 "listeners": [{
77 "type": "action",
78 "listener": {"@": "owner"}
79 }]
80
67 } 81 }
68 82
69 } 83 }
@@ -75,6 +89,7 @@
75 <span data-montage-id="so-property" class="so-property"></span> 89 <span data-montage-id="so-property" class="so-property"></span>
76 <span data-montage-id="so-object" class="so-object-identifier"></span> 90 <span data-montage-id="so-object" class="so-object-identifier"></span>
77 </div> 91 </div>
92 <button data-montage-id="direction-toggle-button" class="direction-toggle-button"></button>
78 <div data-montage-id="boundObject" class="bound-object"> 93 <div data-montage-id="boundObject" class="bound-object">
79 <span data-montage-id="bo-property" class="bo-property"></span> 94 <span data-montage-id="bo-property" class="bo-property"></span>
80 <span data-montage-id="bo-object" class="bo-object-identifier"></span> 95 <span data-montage-id="bo-object" class="bo-object-identifier"></span>
diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js
index bda62ef3..0fc06ea8 100644
--- a/js/panels/binding/binding-item.reel/binding-item.js
+++ b/js/panels/binding/binding-item.reel/binding-item.js
@@ -74,6 +74,16 @@ exports.BindingItem = Montage.create(Component, {
74 } 74 }
75 }, 75 },
76 76
77 /* -------------- Events -------------- */
78
79 handleDirectionToggleButtonAction : {
80 value: function(e) {
81 this.oneway = !this.oneway;
82 }
83 },
84
85 /* -------------- Component Draw Cycle -------------- */
86
77 templateDidLoad : { 87 templateDidLoad : {
78 value: function() { 88 value: function() {
79 console.log("loaded binding item"); 89 console.log("loaded binding item");
@@ -84,5 +94,15 @@ exports.BindingItem = Montage.create(Component, {
84 value: function() { 94 value: function() {
85 console.log("preparing to draw binding item"); 95 console.log("preparing to draw binding item");
86 } 96 }
97 },
98
99 draw : {
100 value: function() {
101 if(this.oneway) {
102 this.directionToggleButton.element.classList.remove('two-way');
103 } else {
104 this.directionToggleButton.element.classList.add('two-way');
105 }
106 }
87 } 107 }
88}); \ No newline at end of file 108}); \ No newline at end of file