aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-05 12:55:44 -0700
committerArmen Kesablyan2012-06-05 12:55:44 -0700
commit5ecbbe908a5527dc42d461c8ddfd33b4c7e0ba4f (patch)
tree76d796ac65f603746a5618849fd891f835677ad5 /js/panels
parentcd089f6692934a68bda7c303928a7c78dd13ac07 (diff)
parent9db979373f80162d463e23d400e97f37c75267d1 (diff)
downloadninja-5ecbbe908a5527dc42d461c8ddfd33b4c7e0ba4f.tar.gz
Merge branch 'binding' of https://github.com/dhg637/ninja-internal into binding
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/binding-panel.reel/binding-panel.css4
-rw-r--r--js/panels/binding-panel.reel/binding-panel.html12
-rw-r--r--js/panels/binding-panel.reel/binding-panel.js44
-rw-r--r--js/panels/binding/binding-item.reel/binding-item.html1
-rw-r--r--js/panels/binding/binding-item.reel/binding-item.js16
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css36
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html103
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js21
8 files changed, 229 insertions, 8 deletions
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css
index f29b66c1..e3dcf140 100644
--- a/js/panels/binding-panel.reel/binding-panel.css
+++ b/js/panels/binding-panel.reel/binding-panel.css
@@ -4,6 +4,10 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7.binding-panel {
8 position: relative;
9 height: 100%;
10}
7 11
8.bindings-list { 12.bindings-list {
9 padding: 0; 13 padding: 0;
diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html
index 2850b67c..a926da8d 100644
--- a/js/panels/binding-panel.reel/binding-panel.html
+++ b/js/panels/binding-panel.reel/binding-panel.html
@@ -13,7 +13,8 @@
13 "owner": { 13 "owner": {
14 "prototype": "js/panels/binding-panel.reel", 14 "prototype": "js/panels/binding-panel.reel",
15 "properties": { 15 "properties": {
16 "element": {"#": "binding"} 16 "element": {"#": "binding"},
17 "editView": {"@": "editBinding"}
17 } 18 }
18 }, 19 },
19 "arrayController": { 20 "arrayController": {
@@ -41,16 +42,23 @@
41 "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"}, 42 "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"},
42 "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"} 43 "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"}
43 } 44 }
45 },
46 "editBinding": {
47 "prototype": "js/panels/binding/edit-binding-view.reel",
48 "properties": {
49 "element": {"#": "edit-binding-view" }
50 }
44 } 51 }
45 52
46 } 53 }
47 </script> 54 </script>
48 </head> 55 </head>
49<body> 56<body>
50 <div data-montage-id="binding"> 57 <div data-montage-id="binding" class="binding-panel">
51 <ul data-montage-id="bindings-list" class="bindings-list"> 58 <ul data-montage-id="bindings-list" class="bindings-list">
52 <li data-montage-id="binding-item" class="binding-item"></li> 59 <li data-montage-id="binding-item" class="binding-item"></li>
53 </ul> 60 </ul>
61 <div data-montage-id="edit-binding-view" class="edit-binding-view"></div>
54 </div> 62 </div>
55</body> 63</body>
56</html> \ No newline at end of file 64</html> \ No newline at end of file
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
index 9fdec416..c2ce556c 100644
--- a/js/panels/binding-panel.reel/binding-panel.js
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -4,10 +4,34 @@ var Montage = require("montage/core/core").Montage,
4 4
5exports.BindingPanel = Montage.create(Component, { 5exports.BindingPanel = Montage.create(Component, {
6 6
7 bindings : { 7 bindings : { value: null },
8 editView : { value: null },
9 editingClass : { value: 'editing-binding' },
10 _editing: { value: null },
11 editing: {
12 get: function() {
13 return this._editing;
14 },
15 set: function(value) {
16 if(value === this._editing) { return; }
17 this._editing = value;
18 this.needsDraw = true;
19 }
20 },
21 _translateDistance : {
8 value: null 22 value: null
9 }, 23 },
10 24
25 displayEditView : {
26 value: function(bindingArgs) {
27 this.editing = true;
28 }
29 },
30
31 /* -------------------------
32 Draw Cycle
33 ------------------------- */
34
11 templateDidLoad : { 35 templateDidLoad : {
12 value: function() { 36 value: function() {
13 Object.defineBinding(this, 'bindings', { 37 Object.defineBinding(this, 'bindings', {
@@ -18,9 +42,23 @@ exports.BindingPanel = Montage.create(Component, {
18 } 42 }
19 }, 43 },
20 44
21 prepareForDraw: { 45 willDraw: {
22 value: function() { 46 value: function() {
23 console.log("test- objects"); 47 if(this.editing) {
48 this._translateDistance = this.element.offsetWidth;
49 }
50 }
51 },
52
53 draw : {
54 value: function() {
55 var transStr = '-webkit-transform';
56
57 if(this.editing) {
58 this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
59 } else {
60 this.editView.element.style.removeProperty(transStr);
61 }
24 } 62 }
25 } 63 }
26}); \ No newline at end of file 64}); \ 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 79644a7a..95a349f8 100644
--- a/js/panels/binding/binding-item.reel/binding-item.html
+++ b/js/panels/binding/binding-item.reel/binding-item.html
@@ -14,6 +14,7 @@
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 "editButton": {"@": "editButton" },
17 "directionToggleButton": {"@": "directionToggleButton" } 18 "directionToggleButton": {"@": "directionToggleButton" }
18 } 19 }
19 }, 20 },
diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js
index 0fc06ea8..55230fc3 100644
--- a/js/panels/binding/binding-item.reel/binding-item.js
+++ b/js/panels/binding/binding-item.reel/binding-item.js
@@ -20,8 +20,10 @@ exports.BindingItem = Montage.create(Component, {
20 set: function(value) { 20 set: function(value) {
21 if(value === this._sourceObject) { return; } 21 if(value === this._sourceObject) { return; }
22 22
23 this.sourceObjectLabel = value.identifier; 23 if(value && value.identifier) {
24 24 this.sourceObjectLabel = value.identifier;
25 }
26
25 this._sourceObject = value; 27 this._sourceObject = value;
26 } 28 }
27 }, 29 },
@@ -33,7 +35,9 @@ exports.BindingItem = Montage.create(Component, {
33 set: function(value) { 35 set: function(value) {
34 if(value === this._boundObject) { return; } 36 if(value === this._boundObject) { return; }
35 37
36 this.boundObjectLabel = value.identifier; 38 if(value && value.identifier) {
39 this.boundObjectLabel = value.identifier;
40 }
37 41
38 this._boundObject = value; 42 this._boundObject = value;
39 } 43 }
@@ -82,6 +86,12 @@ exports.BindingItem = Montage.create(Component, {
82 } 86 }
83 }, 87 },
84 88
89 handleEditButtonAction : {
90 value: function(e) {
91 this.parentComponent.parentComponent.displayEditView();
92 }
93 },
94
85 /* -------------- Component Draw Cycle -------------- */ 95 /* -------------- Component Draw Cycle -------------- */
86 96
87 templateDidLoad : { 97 templateDidLoad : {
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
new file mode 100644
index 00000000..b0249c6c
--- /dev/null
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
@@ -0,0 +1,36 @@
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.edit-binding-view {
8 background: #474747;
9 color: #FFF;
10 font-size: 11px;
11 height: 100%;
12 /*left: 100%;*/
13 /*position: absolute;*/
14 /*top: 0;*/