aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Components/ComponentsPanelBase.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel')
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html11
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js159
2 files changed, 138 insertions, 32 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..1e040e35 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,6 +11,17 @@
11 11
12 <script type="text/montage-serialization"> 12 <script type="text/montage-serialization">
13 { 13 {
14 "componentController": {
15 "module": "montage/ui/controller/array-controller",
16 "name": "ArrayController",
17 "bindings": {
18 "content": {
19 "boundObject": {"@": "owner"},
20 "boundObjectPropertyPath": "components"
21 }
22 }
23 },
24
14 "owner": { 25 "owner": {
15 "module": "js/panels/Components/ComponentsPanelBase.reel", 26 "module": "js/panels/Components/ComponentsPanelBase.reel",
16 "name": "ComponentsPanelBase", 27 "name": "ComponentsPanelBase",
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..8c81b3ab 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -11,10 +11,43 @@ var Montage = require("montage/core/core").Montage,
11var treeControlModule = require("js/components/tree.reel"); 11var treeControlModule = require("js/components/tree.reel");
12 12
13var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { 13var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
14 _hasFocus: { 14
15 enumerable: false, 15 components: {
16 value: false 16 value: null
17 },
18
19 _testButtonJson: {
20 value: {
21 "component": "button",
22
23 "module": "montage/ui/button.reel",
24
25 "name": "Button",
26
27 "properties": [
28 {
29 "name": "label",
30 "type": "string",
31 "default": "Button"
32 }
33 ]
34 }
17 }, 35 },
36
37 didCreate: {
38 value: function() {
39 this._loadComponents();
40 }
41 },
42
43 _loadComponents: {
44 value: function() {
45 this.components = [
46 {component: "Button", data: "montage/ui/button.reel/button.json"}
47 ];
48 }
49 },
50
18 prepareForDraw: { 51 prepareForDraw: {
19 enumerable: false, 52 enumerable: false,
20 value: function() { 53 value: function() {
@@ -27,18 +60,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
27 this.eventManager.addEventListener( "executeAddComponent", this, false); 60 this.eventManager.addEventListener( "executeAddComponent", this, false);
28 } 61 }
29 }, 62 },
30 willDraw: {
31 enumerable: false,
32 value: function() {
33
34 }
35 },
36 draw: {
37 enumerable: false,
38 value: function() {
39
40 }
41 },
42 63
43 _loadXMLDoc: { 64 _loadXMLDoc: {
44 value:function(dname) { 65 value:function(dname) {
@@ -51,23 +72,90 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
51 } 72 }
52 }, 73 },
53 74
75 _stash: {
76 value: {}
77 },
78
54 handleExecuteAddComponent: { 79 handleExecuteAddComponent: {
55 value: function(evt) { 80 value: function(evt) {
56 this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY) 81 //var component = evt.detail.component;
82 // Get the data from the event detail component
83 var component = this._testButtonJson;
84 this._stash.dropx = evt.detail.dropX;
85 this._stash.dropy = evt.detail.dropY;
86 this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
57 } 87 }
58 }, 88 },
59 89
60 addComponentToStage:{ 90 /**
61 value:function(componentType, dropX, dropY){ 91 * Send a request to add a component to the user document and waits for a callback to continue
62 var compW = 100, 92 */
63 compH = 100, 93 addComponentToStage: {
64 elementType = "div", 94 value: function(component) {
65 componentContainer, 95 var that = this;
66 componentElement; 96 var element = this.makeComponent(component.component);
97 this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
98
99 var styles = {
100 'position': 'absolute',
101 'top' : that._stash.dropy + 'px',
102 'left' : that._stash.dropx + 'px',
103 '-webkit-transform-style' : 'preserve-3d',
104 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
105 };
106
107
108 that.application.ninja.currentDocument.setComponentInstance(instance, element);
109
110 NJevent("elementAdding", {"el": element, "data":styles});
111 });
112 }
113 },
114
115 callback: {
116 value: function(instance, element) {
117 console.log(instance);
118
119 var styles = {
120 'position': 'absolute',
121 'top' : this._stash.dropx + 'px',
122 'left' : this._stash.dropy + 'px',
123 '-webkit-transform-style' : 'preserve-3d',
124 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
125 };
126
127 this.application.ninja.currentDocument.setComponentInstance(instance, element);
128
129 NJevent("elementAdding", {"el": element, "data":styles});
130
131 }
132 },
133
134 makeComponent: {
135 value: function(name) {
136 var el;
137 el = NJUtils.makeNJElement(name, "Button", "component");
138 //el.elementModel.pi = "buttonPi";
139 el.setAttribute("type", "button");
140 return el;
141 }
142 },
143
144 ___addComponentToStage:{
145 value:function(component, dropX, dropY){
146// var compW = 100,
147// compH = 100,
148//
149 var componentEl, componentInstance;
67 150
68 if(componentType == "Button"){ 151 if(componentType == "Button"){
69 compW = 118; 152 componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
70 compH = 52; 153 componentEl.setAttribute("type", "button");
154 //componentEl.innerHTML = "Button";
155
156 componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}, this.callback);
157
158
71 }else if(componentType == "Checkbox"){ 159 }else if(componentType == "Checkbox"){
72 compW = 53; 160 compW = 53;
73 compH = 53; 161 compH = 53;
@@ -117,28 +205,35 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
117 compH = 25; 205 compH = 25;
118 } 206 }