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 this.traverseDOMTree(function(s) { ret+=s; }, dom, 1);
29 alert("IPC:SAVEHTML:" + dom);
34 traverseDOMTree : function(cb, currentElement, depth) {
35 if (!currentElement) {
39 console.log(currentElement);
40 if (currentElement.class_name.match(/roo-dynamic/)) {
44 //Roo.log(currentElement);
46 var nodeName = currentElement.node_name;
47 var tagName = currentElement.tag_name;
49 if (nodeName == '#text') {
50 cb(currentElement.node_value);
61 if (nodeName != 'BODY') {
66 // Prints the node tagName, such as <A>, <IMG>, etc
69 for(i = 0; i < currentElement.attributes.length;i++) {
70 var aname = currentElement.attributes.item(i).name;
75 if (currentElement.attributes.item(i).value == 'builderel') {
78 attr.push(aname + '="' + currentElement.attributes.item(i).value + '"' );
82 cb("<"+currentElement.tag_name+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">");
92 var currentElementChild = currentElement.child_nodes.item(i);
94 while (currentElementChild) {
95 // Formatting code (indent the tree so it looks nice on the screen)
97 if (currentElementChild.node_name == '#text') {
98 cb(currentElementChild.node_value);
100 currentElementChild=currentElement.child_nodes.item(i);
105 for (j = 0; j < depth; j++) {
106 // ¦ is just a vertical line
111 // Recursively traverse the tree structure of the child node
112 this.traverseDOMTree(cb, currentElementChild, depth+1);
114 currentElementChild=currentElement.child_nodes.item(i);
117 // The remaining code is mostly for formatting the tree
119 for (j = 0; j < depth - 1; j++) {
124 cb("</"+tagName+">");
130 // this lot is to deal with draging // selecting? - not used at present
134 findNode : function(ftg , method) {
138 // console.log(ftg.id);
139 if (ftg.id && typeof(ftg.id) == 'string' && ftg.id.match(/builder-/)) {
140 var nid = ftg.id.replace('builder-', '').replace('x-form-el-', '');
145 if (ftg.dom.className.match(/[0-9]+/)) {
146 //console.log(ftg.dom.className);
147 var cmat = ftg.dom.className.match(/x-grid-hd-builder-(form-gen-[0-9:]+)/);
149 this[method]( cmat[1] );
160 overPos: function(x,y)
163 var el = document.elementFromPoint(x,y);
164 // //console.log(el.id);
165 // console.log(document.body.innerHTML);
167 getTarget : function () {
170 stopEvent : function() {
177 onclick: function(e) {
178 var tg = Roo.get(e.getTarget());
180 //console.log('no target');
184 if (this.findNode(tg,'logClick')) {
187 var dp = Roo.get(tg.up(''));
188 if (dp && this.findNode(dp,'logClick')) {
192 var ns = Roo.get(tg.getNextSibling());
193 if (ns && this.findNode(ns,'logClick')) {
197 if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logClick') ) {
201 for(var i =0; i < 5; i++) {
202 tg = Roo.get(tg.up(''));
204 //console.log('no parent' + i);
207 if (tg && this.findNode(tg,'logClick')) {
211 //console.log('no target in parents');
214 logClick : function(id)
216 var bid = id.length ? 'builder-' + id : '';
217 console.log('{ "id" : "' + bid + '"}');
221 hover : function(e) {
224 var tg = Roo.get(e.getTarget());
226 //console.log('no target');
231 if (this.findNode(tg,'logMove')) {
235 var dp = Roo.get(tg.up(''));
236 if (dp && this.findNode(dp,'logMove')) {
241 var ns = Roo.get(tg.getNextSibling());
242 if (ns && this.findNode(ns,'logMove')) {
246 if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logMove' )) {
251 for(var i =0; i < 5; i++) {
252 tg = Roo.get(tg.up(''));
254 //console.log('no parent' + i);
258 if (tg && this.findNode(tg,'logMove')) {
263 //console.log('no target in parents');
266 logMove : function (id) {
267 //console.log("LOGMOVE: " + id);
269 if (this.lastID === id) {
273 var bid = id.length ? 'builder-' + id : '';
274 console.log('{ "hover-node" : "' + bid + '"}');
277 clearBootstrap : function()
279 // if the page is not bootstrap
281 if ( typeof(BuilderUseBootstrap) != 'undefined' ) {
282 Roo.log("it's boostrap - BuilderUseBootstrap is defined ");
283 // it's bootstrap - probably remove roo's css..
286 Roo.log("remove css = BuilderUseBootstrap is not defined");
288 var ar = document.getElementsByTagName('link');
289 for (var i = 0; i < ar.length;i++) {
291 Roo.log(l.getAttribute('href'));
292 if (l.getAttribute('href').match(/bootstrap/)) {
299 Roo.each(rem, function(l) { l.parentNode.removeChild(l);});
302 applyFlexy: function(tree)
304 if (typeof(tree['flexy:foreach']) != 'undefined') {
305 //Roo.log("add flexy:foreach");
306 tree.el.attr('flexy:foreach', tree['flexy:foreach']);
308 if (typeof(tree['flexy:if']) != 'undefined') {
309 //Roo.log("add flexy:if");
310 tree.el.attr('flexy:if', tree['flexy:if']);
312 if (typeof(tree['xtype-bootstrap']) != 'undefined') {
313 //Roo.log("add flexy:if");
314 tree.el.attr('xtype', tree['xtype-bootstrap']);
318 if (!tree.items || !tree.items.length) { return; }
320 for (var i = 0; i < tree.items.length; i++){
321 this.applyFlexy(tree.items[i]);
328 Roo.onReady(function() { Builder.clearBootstrap(); });
329 Roo.XComponent.on('buildcomplete', function() {
330 Roo.log("xcomponent built!");
332 Builder.applyFlexy(Roo.XComponent.modules[0].el);