aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js148
1 files changed, 48 insertions, 100 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 4828839b..33241d42 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -31,7 +31,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
31 "component": "button" 31 "component": "button"
32 }, 32 },
33 { 33 {
34 "text": "Text Field", 34 "text": "Textfield",
35 "dataFile" : "node_modules/components-data/textfield.json", 35 "dataFile" : "node_modules/components-data/textfield.json",
36 "component": "textfield" 36 "component": "textfield"
37 } 37 }
@@ -53,20 +53,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
53 value: 0 53 value: 0
54 }, 54 },
55 55
56 centerStage: {
57 value: null
58 },
59
56 didCreate: { 60 didCreate: {
57 value: function() { 61 value: function() {
58 // Loop through the component and load the JSON data for them 62 // Loop through the component and load the JSON data for them
59 this._loadComponents(); 63 this._loadComponents();
60
61 } 64 }
62 }, 65 },
63 66
67 // Load all the data files for each component
68 // TODO: Implement the error case
64 _loadComponents: { 69 _loadComponents: {
65 value: function() { 70 value: function() {
66 71
67 this.componentsToLoad = this.components.children[0].children.length; 72 this.componentsToLoad = this.components.children[0].children.length;
68 73
69 // Build the PI objects for each component
70 for(var i = 0, component; component = this.components.children[0].children[i]; i++) { 74 for(var i = 0, component; component = this.components.children[0].children[i]; i++) {
71 var req = new XMLHttpRequest(); 75 var req = new XMLHttpRequest();
72 //req.identifier = "searchRequest"; 76 //req.identifier = "searchRequest";
@@ -74,25 +78,22 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
74 req.addEventListener("load", this, false); 78 req.addEventListener("load", this, false);
75 req.addEventListener("error", this, false); 79 req.addEventListener("error", this, false);
76 req.send(); 80 req.send();
77
78 } 81 }
79
80
81 } 82 }
82 }, 83 },
83 84
84 handleLoad: { 85 handleLoad: {
85 value: function(evt) { 86 value: function(evt) {
86 var componentData = JSON.parse(evt.target.responseText); 87 var componentData, component, piID, piObj, section;
87
88 //var component = response.component.capitalizeFirstChar();
89 var component = componentData.name;
90 88
91 var piIdentifier = component + "Pi"; 89 componentData = JSON.parse(evt.target.responseText);
92 var piObj = [];
93 var section = {};
94 90
91 component = componentData.name;
95 92
93 // Build the PI data and create a new object for Ninja PI
94 piID = component + "Pi";
95 piObj = [];
96 section = {};
96 section.label = component + " Properties"; 97 section.label = component + " Properties";
97 section.Section = []; 98 section.Section = [];
98 99
@@ -107,21 +108,23 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
107 section.Section.push([row]); 108 section.Section.push([row]);
108 } 109 }
109 110
110 PIData[piIdentifier] = []; 111 PIData[piID] = [];
111 PIData[piIdentifier].push(section); 112 PIData[piID].push(section);
112 113
113 // Setup the componentsData 114 // Setup the component hash object to store references to each component data
114 this.componentsData[componentData.component] = componentData; 115 this.componentsData[componentData.component] = componentData;
115 116
116 this.componentsLoaded++; 117 this.componentsLoaded++;
117 118
118 if(this.componentsLoaded === this.componentsToLoad) { 119 if(this.componentsLoaded === this.componentsToLoad) {
119 console.log("all loaded"); 120 // console.log("all loaded");
121 // Here we need to stop some sort of loading animation
120 } 122 }
121 123
122 } 124 }
123 }, 125 },
124 126
127 // PI conversion method. This will convert the property type into a Ninja component
125 getControlType: { 128 getControlType: {
126 value: function(type) { 129 value: function(type) {
127 switch(type) { 130 switch(type) {
@@ -137,27 +140,15 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
137 140
138 applySelection: { 141 applySelection: {
139 value: function(selection) { 142 value: function(selection) {
140 console.log(selection); 143 //console.log(selection);
141 console.log(this.componentsData[selection.component]); 144 //console.log(this.componentsData[selection.component]);
142 this._stash.dropx = 200; 145 this.addComponentToStage(this.componentsData[selection.component]);
143 this._stash.dropy = 200;
144 this.addComponentToStage(this.componentsData[selection.component]);// evt.detail.dropX, evt.detail.dropY);
145
146 } 146 }
147 }, 147 },
148 148
149 _stash: { 149 // This method will be used once we handle drag and drop
150 value: {}
151 },
152
153 handleExecuteAddComponent: { 150 handleExecuteAddComponent: {
154 value: function(evt) { 151 value: function(evt) {
155 //var component = evt.detail.component;
156 // Get the data from the event detail component
157 var component = this._testButtonJson;
158 this._stash.dropx = evt.detail.dropX;
159 this._stash.dropy = evt.detail.dropY;
160 this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
161 } 152 }
162 }, 153 },
163 154
@@ -168,17 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
168 value: function(component) { 159 value: function(component) {
169 var that = this; 160 var that = this;
170 var element = this.makeComponent(component.component); 161 var element = this.makeComponent(component.component);
162
171 this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) { 163 this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) {
172 164
165 var pos = that.getStageCenter();
166
173 var styles = { 167 var styles = {
174 'position': 'absolute', 168 'position': 'absolute',
175 'top' : that._stash.dropy + 'px', 169 'left' : pos[0] + 'px',
176 'left' : that._stash.dropx + 'px', 170 'top' : pos[1] + 'px',
177 '-webkit-transform-style' : 'preserve-3d', 171 '-webkit-transform-style' : 'preserve-3d',
178 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' 172 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
179 }; 173 };
180 174
181
182 that.application.ninja.currentDocument.setComponentInstance(instance, element); 175 that.application.ninja.currentDocument.setComponentInstance(instance, element);
183 176
184 NJevent("elementAdding", {"el": element, "data":styles}); 177 NJevent("elementAdding", {"el": element, "data":styles});
@@ -186,25 +179,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
186 } 179 }
187 }, 180 },
188 181
189 callback: {
190 value: function(instance, element) {
191 console.log(instance);
192
193 var styles = {
194 'position': 'absolute',
195 'top' : this._stash.dropx + 'px',
196 'left' : this._stash.dropy + 'px',
197 '-webkit-transform-style' : 'preserve-3d',
198 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'