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.css27
-rw-r--r--js/panels/binding-panel.reel/binding-panel.html80
-rw-r--r--js/panels/binding-panel.reel/binding-panel.js126
3 files changed, 233 insertions, 0 deletions
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css
new file mode 100644
index 00000000..787cf114
--- /dev/null
+++ b/js/panels/binding-panel.reel/binding-panel.css
@@ -0,0 +1,27 @@
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.binding-panel {
8 position: relative;
9 height: 100%;
10 display: -webkit-box;
11 overflow: hidden;
12 -webkit-box-orient: vertical;
13}
14
15.bindings-list {
16 -webkit-box-flex: 1;
17 padding: 0;
18 margin: 0;
19}
20.binding-panel-toolbar-container {
21 -webkit-box-flex: 0;
22}
23
24.binding-panel .edit-view-docked {
25 left: 0;
26 -webkit-transition-duration: 0;
27} \ No newline at end of file
diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html
new file mode 100644
index 00000000..fc80cd6e
--- /dev/null
+++ b/js/panels/binding-panel.reel/binding-panel.html
@@ -0,0 +1,80 @@
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<html lang="en">
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" href="binding-panel.css" type="text/css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "prototype": "js/panels/binding-panel.reel",
15 "properties": {
16 "element": {"#": "binding"},
17 "editView": {"@": "editBinding"}
18 }
19 },
20 "arrayController": {
21 "prototype": "montage/ui/controller/array-controller",
22 "bindings": {
23 "content" : {"<-": "@owner.bindings" }
24 }
25 },
26 "repetition": {
27 "prototype": "montage/ui/repetition.reel",
28 "properties": {
29 "element": {"#": "bindings-list"},
30 "contentController": {"@": "arrayController"}
31 }
32 },
33 "bindingItem": {
34 "prototype": "js/panels/binding/binding-item.reel",
35 "properties": {
36 "element": {"#": "binding-item"}
37 },
38 "bindings": {
39 "bindingArgs": {"<-": "@repetition.objectAtCurrentIteration"},
40 "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"},
41 "sourceObject": {"<-": "@repetition.objectAtCurrentIteration.sourceObject"},
42 "boundObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.boundObjectPropertyPath"},
43 "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"},
44 "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"}
45 }
46 },
47 "editBinding": {
48 "prototype": "js/panels/binding/edit-binding-view.reel",
49 "properties": {
50 "element": {"#": "edit-binding-view" }
51 }
52 },
53 "toolbar": {
54 "prototype": "js/components/toolbar.reel",
55 "properties": {
56 "element": {"#": "binding-panel-toolbar"},
57 "delegate": {"@": "owner" },
58 "buttons": [
59 {
60 "title": "Add",
61 "identifier": "add"
62 }
63 ]
64 }
65 }
66 }
67 </script>
68 </head>
69<body>
70 <div data-montage-id="binding" class="binding-panel">
71 <ul data-montage-id="bindings-list" class="bindings-list">
72 <li data-montage-id="binding-item" class="binding-item"></li>
73 </ul>
74 <div data-montage-id="binding-panel-toolbar-container" class="binding-panel-toolbar-container">
75 <div data-montage-id="binding-panel-toolbar"></div>
76 </div>
77 <div data-montage-id="edit-binding-view"></div>
78 </div>
79</body>
80</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
new file mode 100644
index 00000000..c040c009
--- /dev/null
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -0,0 +1,126 @@
1var Montage = require("montage/core/core").Montage,
2 Component = require("montage/ui/component").Component;
3
4
5exports.BindingPanel = Montage.create(Component, {
6
7 bindings : { value: null },
8 editView : { value: null },
9
10 _dockEditView : { value: null },
11 dockEditView : {
12 get : function() { return this._dockEditView; },
13 set : function(value) {
14 if(value === this._dockEditView) { return; }
15
16 this._dockEditView = value;
17
18 this.needsDraw = true;
19 }
20 },
21
22 _editing: { value: null },
23 editing: {
24 get: function() {
25 return this._editing;
26 },
27 set: function(value) {
28 if(value === this._editing) { return; }
29 this._editing = value;
30
31 if(!value) {
32 this.dockEditView = false;
33 }
34
35 this.needsDraw = true;
36 }
37 },
38 _translateDistance : {
39 value: null
40 },
41
42 displayEditView : {
43 value: function(bindingArgs) {
44 this.editView.bindingArgs = bindingArgs;
45 this.editing = true;
46 }
47 },
48
49 /* -------------------------
50 Event handlers
51 ------------------------- */
52
53 handleWebkitTransitionEnd : {
54 value: function(e) {
55 console.log("trans end");
56
57 this.dockEditView = this.editing;
58 }
59 },
60
61 /* -------------------------
62 Toolbar Button Actions
63 ------------------------- */
64
65 handleAddAction : {
66 value: function(e) {
67 var sourceObject = this.application.ninja.objectsController.currentObject;
68
69 if(sourceObject) {
70 this.displayEditView({
71 sourceObject: sourceObject
72 });
73 } else {
74 this.displayEditView();
75 }
76 }
77 },
78
79
80
81 templateDidLoad : {
82 value: function() {
83 Object.defineBinding(this, 'bindings', {
84 boundObject: this.application.ninja.objectsController,
85 boundObjectPropertyPath: "currentObjectBindings",
86 oneway: true
87 });
88 }
89 },
90
91 prepareForDraw : {
92 value: function() {
93
94 }
95 },
96
97 willDraw: {
98 value: function() {
99 this.editView.element.addEventListener('webkitTransitionEnd', this, false);
100
101 if(this.editing) {
102 this._translateDistance = this.element.offsetWidth;
103 }
104 }
105 },
106
107 draw : {
108 value: function() {
109 var transStr = '-webkit-transform',
110 editViewEl = this.editView.element;
111
112 if(this.dockEditView) {
113 editViewEl.classList.add('edit-view-docked');
114 editViewEl.style.removeProperty(transStr);