1 //<script type="text/javascript">
4 // IPC: - via alert("IPC:{method}:{data}
7 Roo.XComponent.on("buildcomplete", function() { Builder.saveHTML(); } );
9 var MODULE = { isBuilder : true };
22 saveHTML : function( )
24 //print("TRAVERSE DOM?");
26 var dom = document.body;
29 //Roo.select('body > div',true).each(function(el) {
30 // if the tree is not ready yet?
33 this.traverseDOMTree(function(s) { ret+=s; }, dom, 1);
34 alert("IPC:SAVEHTML:" + ret);
39 traverseDOMTree : function(cb, currentElement, depth) {
40 if (!currentElement) {
44 console.log(currentElement);
45 if (currentElement.className.match(/roo-dynamic/)) {
49 //Roo.log(currentElement);
51 var nodeName = currentElement.nodeName;
52 var tagName = currentElement.tagName;
54 if (nodeName == '#text') {
55 cb(currentElement.nodeValue);
66 if (nodeName != 'BODY') {
71 // Prints the node tagName, such as <A>, <IMG>, etc
74 for(i = 0; i < currentElement.attributes.length;i++) {
75 var aname = currentElement.attributes.item(i).name;
80 if (currentElement.attributes.item(i).value == 'builderel') {
83 attr.push(aname + '="' + currentElement.attributes.item(i).value + '"' );
87 cb("<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">");
97 var currentElementChild = currentElement.childNodes.item(i);
99 while (currentElementChild) {
100 // Formatting code (indent the tree so it looks nice on the screen)
102 if (currentElementChild.nodeName == '#text') {
103 cb(currentElementChild.nodeValue);
105 currentElementChild=currentElement.childNodes.item(i);
110 for (j = 0; j < depth; j++) {
111 // ¦ is just a vertical line
116 // Recursively traverse the tree structure of the child node
117 this.traverseDOMTree(cb, currentElementChild, depth+1);
119 currentElementChild=currentElement.childNodes.item(i);
122 // The remaining code is mostly for formatting the tree
124 for (j = 0; j < depth - 1; j++) {
129 cb("</"+tagName+">");
135 // this lot is to deal with draging // selecting? - not used at present
139 findNode : function(ftg , method) {
143 // console.log(ftg.id);
144 if (ftg.id && typeof(ftg.id) == 'string' && ftg.id.match(/builder-/)) {
145 var nid = ftg.id.replace('builder-', '').replace('x-form-el-', '');
150 if (ftg.dom.className.match(/[0-9]+/)) {
151 //console.log(ftg.dom.className);
152 var cmat = ftg.dom.className.match(/x-grid-hd-builder-(form-gen-[0-9:]+)/);
154 this[method]( cmat[1] );
165 overPos: function(x,y)
168 var el = document.elementFromPoint(x,y);
169 // //console.log(el.id);
170 // console.log(document.body.innerHTML);
172 getTarget : function () {
175 stopEvent : function() {
182 onclick: function(e) {
183 var tg = Roo.get(e.getTarget());
185 //console.log('no target');
189 if (this.findNode(tg,'logClick')) {
192 var dp = Roo.get(tg.up(''));
193 if (dp && this.findNode(dp,'logClick')) {
197 var ns = Roo.get(tg.getNextSibling());
198 if (ns && this.findNode(ns,'logClick')) {
202 if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logClick') ) {
206 for(var i =0; i < 5; i++) {
207 tg = Roo.get(tg.up(''));
209 //console.log('no parent' + i);
212 if (tg && this.findNode(tg,'logClick')) {
216 //console.log('no target in parents');
219 logClick : function(id)
221 var bid = id.length ? 'builder-' + id : '';
222 console.log('{ "id" : "' + bid + '"}');
226 hover : function(e) {
229 var tg = Roo.get(e.getTarget());
231 //console.log('no target');
236 if (this.findNode(tg,'logMove')) {
240 var dp = Roo.get(tg.up(''));
241 if (dp && this.findNode(dp,'logMove')) {
246 var ns = Roo.get(tg.getNextSibling());
247 if (ns && this.findNode(ns,'logMove')) {
251 if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logMove' )) {
256 for(var i =0; i < 5; i++) {
257 tg = Roo.get(tg.up(''));
259 //console.log('no parent' + i);
263 if (tg && this.findNode(tg,'logMove')) {
268 //console.log('no target in parents');
271 logMove : function (id) {
272 //console.log("LOGMOVE: " + id);
274 if (this.lastID === id) {
278 var bid = id.length ? 'builder-' + id : '';
279 console.log('{ "hover-node" : "' + bid + '"}');
282 clearBootstrap : function()
284 // if the page is not bootstrap
286 if ( typeof(BuilderUseBootstrap) != 'undefined' ) {
287 Roo.log("it's boostrap - BuilderUseBootstrap is defined ");
288 // it's bootstrap - probably remove roo's css..
291 Roo.log("remove css = BuilderUseBootstrap is not defined");
293 var ar = document.getElementsByTagName('link');
294 for (var i = 0; i < ar.length;i++) {
296 Roo.log(l.getAttribute('href'));
297 if (l.getAttribute('href').match(/bootstrap/)) {
304 Roo.each(rem, function(l) { l.parentNode.removeChild(l);});
307 applyFlexy: function(tree)
309 if (typeof(tree['flexy:foreach']) != 'undefined') {
310 //Roo.log("add flexy:foreach");
311 tree.el.attr('flexy:foreach', tree['flexy:foreach']);
313 if (typeof(tree['flexy:if']) != 'undefined') {
314 //Roo.log("add flexy:if");
315 tree.el.attr('flexy:if', tree['flexy:if']);
317 if (typeof(tree['xtype-bootstrap']) != 'undefined') {
318 //Roo.log("add flexy:if");
319 tree.el.attr('xtype', tree['xtype-bootstrap']);
322 if (typeof(tree['flexy:include']) != 'undefined') {
323 //Roo.log("add flexy:if");
324 tree.el.attr('flexy:include', tree['flexy:include']);
327 if (!tree.items || !tree.items.length) { return; }
329 for (var i = 0; i < tree.items.length; i++){
330 this.applyFlexy(tree.items[i]);
337 Roo.onReady(function() { Builder.clearBootstrap(); });
338 Roo.XComponent.on('buildcomplete', function() {
339 Roo.log("xcomponent built!");
341 Builder.applyFlexy(Roo.XComponent.modules[0].el);