aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-06-04 16:37:09 -0700
committerEric Guzman2012-06-04 16:37:09 -0700
commita5387d3cc74350dd06ecab2c8524d63d7540e57f (patch)
tree49759da04d0bc4065275c3776ae94d14d11ecae3
parentcd5be45e6787929905daafbda79bdb258dca5473 (diff)
downloadninja-a5387d3cc74350dd06ecab2c8524d63d7540e57f.tar.gz
Binding Panel - Add edit view
Diffstat
-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.js6
-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, 222 insertions, 5 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..294e8d35 100644
--- a/js/panels/binding/binding-item.reel/binding-item.js
+++ b/js/panels/binding/binding-item.reel/binding-item.js
@@ -82,6 +82,12 @@ exports.BindingItem = Montage.create(Component, {
82 } 82 }
83 }, 83 },
84 84
85 handleEditButtonAction : {
86 value: function(e) {
87 this.parentComponent.parentComponent.displayEditView();
88 }
89 },
90
85 /* -------------- Component Draw Cycle -------------- */ 91 /* -------------- Component Draw Cycle -------------- */
86 92
87 templateDidLoad : { 93 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;*/
15 width: 100%;
16 -webkit-transition: -webkit-transform 140ms ease-in;
17}
18
19.edit-binding-view ul {
20 padding: 0;
21 margin: 0;
22}
23
24.edit-binding-view li {
25 padding: 3px;
26 list-style-type: none;
27}
28
29/* hintable fields */
30
31.so-pp, .bo-pp {
32 border: 1px solid #313131;
33 padding: 1px 4px;
34 background-color: #444;
35 margin-left: 5px;
36} \ No newline at end of file
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
new file mode 100644
index 00000000..1d502a3e
--- /dev/null
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
@@ -0,0 +1,103 @@
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