Binding Panel - Add edit view

author: Eric Guzman 2012-06-04 16:37:09 -0700
committer: Eric Guzman 2012-06-04 16:37:09 -0700
commit: a5387d3cc74350dd06ecab2c8524d63d7540e57f (patch)
tree: 49759da04d0bc4065275c3776ae94d14d11ecae3 /js/panels/binding-panel.reel
parent: cd5be45e6787929905daafbda79bdb258dca5473 (diff)
download: ninja-a5387d3cc74350dd06ecab2c8524d63d7540e57f.tar.gz
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 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
+.binding-panel {
+    position: relative;
+    height: 100%;
+}
 .bindings-list {
    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 @@
            "owner": {
                "prototype": "js/panels/binding-panel.reel",
                "properties": {
-                    "element": {"#": "binding"}
+                    "element": {"#": "binding"},
+                    "editView": {"@": "editBinding"}
                }
            },
            "arrayController": {
@@ -41,16 +42,23 @@
                    "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"},
                    "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"}
                }
+            },
+            "editBinding": {
+                "prototype": "js/panels/binding/edit-binding-view.reel",
+                "properties": {
+                    "element": {"#": "edit-binding-view" }
+                }
            }
        }
                </script>
        </head>
 <body>
-    <div data-montage-id="binding">
+    <div data-montage-id="binding" class="binding-panel">
        <ul data-montage-id="bindings-list" class="bindings-list">
            <li data-montage-id="binding-item" class="binding-item"></li>
        </ul>
+        <div data-montage-id="edit-binding-view" class="edit-binding-view"></div>
    </div>
 </body>
 </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,
 exports.BindingPanel = Montage.create(Component, {
-    bindings : {
+    bindings : { value: null },
+    editView : { value: null },
+    editingClass : { value: 'editing-binding' },
+    _editing: { value: null },
+    editing: {
+        get: function() {
+            return this._editing;
+        },
+        set: function(value) {
+            if(value === this._editing) { return; }
+            this._editing = value;
+            this.needsDraw = true;
+        }
+    },
+    _translateDistance : {
        value: null
    },
+    displayEditView : {
+        value: function(bindingArgs) {
+            this.editing = true;
+        }
+    },
+    /* -------------------------
+        Draw Cycle
+     ------------------------- */
    templateDidLoad : {
        value: function() {
            Object.defineBinding(this, 'bindings', {
@@ -18,9 +42,23 @@ exports.BindingPanel = Montage.create(Component, {
        }
    },
-    prepareForDraw: {
+    willDraw: {
        value: function() {
-            console.log("test- objects");
+            if(this.editing) {
+                this._translateDistance = this.element.offsetWidth;
+            }
+        }
+    },
+    draw : {
+        value: function() {
+            var transStr = '-webkit-transform';
+            if(this.editing) {
+                this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
+            } else {
+                this.editView.element.style.removeProperty(transStr);
+            }
        }
    }
 });
 \ No newline at end of file
author	Eric Guzman	2012-06-04 16:37:09 -0700
committer	Eric Guzman	2012-06-04 16:37:09 -0700
commit	a5387d3cc74350dd06ecab2c8524d63d7540e57f (patch)
tree	49759da04d0bc4065275c3776ae94d14d11ecae3 /js/panels/binding-panel.reel
parent	cd5be45e6787929905daafbda79bdb258dca5473 (diff)
download	ninja-a5387d3cc74350dd06ecab2c8524d63d7540e57f.tar.gz

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
5	exports.BindingPanel = Montage.create(Component, {	5	exports.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