1 //<script type="text/javascript">
4 // IPC: - via alert("IPC:{method}:{data}
7 var MODULE = { isBuilder : true };
20 saveHTML : function( )
22 //print("TRAVERSE DOM?");
24 var dom = document.body;
27 //Roo.select('body > div',true).each(function(el) {
28 // if the tree is not ready yet?
31 this.traverseDOMTree(function(s) { ret+=s; }, dom, 1);
32 alert("IPC:SAVEHTML:" + ret);
37 traverseDOMTree : function(cb, currentElement, depth) {
38 if (!currentElement ) {
42 //console.log(currentElement);
43 if (currentElement.className && currentElement.className.match(/roo-dynamic/)) {
47 //Roo.log(currentElement);
49 var nodeName = currentElement.nodeName;
50 var tagName = currentElement.tagName;
52 if (nodeName == '#text') {
53 cb(currentElement.nodeValue);
57 if (nodeName.match(/^#/)) { // comments?
67 if (nodeName != 'BODY') {
68 //Roo.log(currentElement);
69 if (currentElement.hasAttribute('flexy:include')) {
72 cb( '<flexy:include src="'+currentElement.getAttribute('flexy:include')+'"></flexy:include>');
77 // Prints the node tagName, such as <A>, <IMG>, etc
80 for(i = 0; i < currentElement.attributes.length;i++) {
81 var attre = currentElement.attributes.item(i);
82 var aname = attre.name;
83 var aval = attre.value || '';
84 if (aname=='id' && aval.match(/^roo\-/)) { // only roo -elements hide..
87 // skip -- component created by the builder?
88 if (aval == 'builderel') {
91 attr.push(aname + '="' + aval + '"' ); //?? escaping attributes?
95 cb("<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">");
107 var currentElementChild = currentElement.childNodes.item(i);
109 while (currentElementChild) {
110 // Formatting code (indent the tree so it looks nice on the screen)
112 if (currentElementChild.nodeName == '#text') {
113 cb(currentElementChild.nodeValue);
115 currentElementChild=currentElement.childNodes.item(i);
120 for (j = 0; j < depth; j++) {
121 // ¦ is just a vertical line
126 // Recursively traverse the tree structure of the child node
127 this.traverseDOMTree(cb, currentElementChild, depth+1);
129 currentElementChild=currentElement.childNodes.item(i);
132 // The remaining code is mostly for formatting the tree
134 for (j = 0; j < depth - 1; j++) {
139 cb("</"+tagName+">");
145 // this lot is to deal with draging // selecting? - not used at present
149 findNode : function(ftg , method) {
153 // console.log(ftg.id);
154 if (ftg.id && typeof(ftg.id) == 'string' && ftg.id.match(/builder-/)) {
155 var nid = ftg.id.replace('builder-', '').replace('x-form-el-', '');
160 if (ftg.dom.className.match(/[0-9]+/)) {
161 //console.log(ftg.dom.className);
162 var cmat = ftg.dom.className.match(/x-grid-hd-builder-(form-gen-[0-9:]+)/);
164 this[method]( cmat[1] );
175 overPos: function(x,y)
178 var el = document.elementFromPoint(x,y);
179 // //console.log(el.id);
180 // console.log(document.body.innerHTML);
182 getTarget : function () {
185 stopEvent : function() {
192 onclick: function(e) {
193 var tg = Roo.get(e.getTarget());
195 //console.log('no target');
199 if (this.findNode(tg,'logClick')) {
202 var dp = Roo.get(tg.up(''));
203 if (dp && this.findNode(dp,'logClick')) {
207 var ns = Roo.get(tg.getNextSibling());
208 if (ns && this.findNode(ns,'logClick')) {
212 if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logClick') ) {
216 for(var i =0; i < 5; i++) {
217 tg = Roo.get(tg.up(''));
219 //console.log('no parent' + i);
222 if (tg && this.findNode(tg,'logClick')) {
226 //console.log('no target in parents');
229 logClick : function(id)
231 var bid = id.length ? 'builder-' + id : '';
232 console.log('{ "id" : "' + bid + '"}');
236 hover : function(e) {
239 var tg = Roo.get(e.getTarget());
241 //console.log('no target');
246 if (this.findNode(tg,'logMove')) {
250 var dp = Roo.get(tg.up(''));
251 if (dp && this.findNode(dp,'logMove')) {
256 var ns = Roo.get(tg.getNextSibling());
257 if (ns && this.findNode(ns,'logMove')) {
261 if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logMove' )) {
266 for(var i =0; i < 5; i++) {
267 tg = Roo.get(tg.up(''));
269 //console.log('no parent' + i);
273 if (tg && this.findNode(tg,'logMove')) {
278 //console.log('no target in parents');
281 logMove : function (id) {
282 //console.log("LOGMOVE: " + id);
284 if (this.lastID === id) {
288 var bid = id.length ? 'builder-' + id : '';
289 //console.log('{ "hover-node" : "' + bid + '"}');
292 clearBootstrap : function()
294 // if the page is not bootstrap
296 if ( typeof(BuilderUseBootstrap) != 'undefined' ) {
297 Roo.log("it's boostrap - BuilderUseBootstrap is defined ");
298 // it's bootstrap - probably remove roo's css..
301 Roo.log("remove css = BuilderUseBootstrap is not defined");
303 var ar = document.getElementsByTagName('link');
304 for (var i = 0; i < ar.length;i++) {
306 Roo.log(l.getAttribute('href'));
307 if (l.getAttribute('href').match(/bootstrap/)) {
314 Roo.each(rem, function(l) { l.parentNode.removeChild(l);});
317 applyFlexy: function(tree)
322 if (typeof(tree['flexy:foreach']) != 'undefined') {
323 //Roo.log("add flexy:foreach");
324 tree.el.attr('flexy:foreach', tree['flexy:foreach']);
326 if (typeof(tree['flexy:if']) != 'undefined') {
327 //Roo.log("add flexy:if");
328 tree.el.attr('flexy:if', tree['flexy:if']);
330 if (typeof(tree['xtype-bootstrap']) != 'undefined') {
331 //Roo.log("add flexy:if");
332 tree.el.attr('xtype', tree['xtype-bootstrap']);
335 if (typeof(tree['flexy:include']) != 'undefined') {
336 //Roo.log("add flexy:if");
337 tree.el.attr('flexy:include', tree['flexy:include']);
340 if (typeof(tree['flexy:ignore']) != 'undefined') {
341 //Roo.log("add flexy:if");
342 tree.el.attr('flexy:ignore', tree['flexy:ignore']);
345 tree.el.attr('xtype', tree['|xns'] + '.' + tree['xtype']);
347 //Roo.log("Add xtype")
351 if (tree.items && tree.items.length > 0) {
353 for (var i = 0; i < tree.items.length; i++){
354 this.applyFlexy(tree.items[i]);
357 if (typeof(tree.menu) == 'object') {
358 this.applyFlexy(tree.menu);
366 Roo.onReady(function() { Builder.clearBootstrap(); });
367 Roo.XComponent.on('buildcomplete', function() {
368 Roo.log("xcomponent built!");
369 var m = Roo.XComponent.modules;
370 Builder.applyFlexy(m[m.length-1].el);
372 Builder.saveHTML.defer(100, Builder);