aboutsummaryrefslogtreecommitdiff
path: root/js/panels/binding-panel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/binding-panel.reel')
-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
3 files changed, 55 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