Changed Roo/form/HtmlEditor/ToolbarContext.js
[roojs1] / roojs-bootstrap-debug.js
1 Roo.bootstrap = {};/**
2  * set the version of bootstrap based on the stylesheet...
3  *
4  */
5
6 Roo.bootstrap.version = ( function() {
7     var ret=3;
8     Roo.each(document.styleSheets, function(s) {
9         if ( s.href  && s.href.match(/css-bootstrap4/)) {
10             ret=4;
11         }
12     });
13     if (ret > 3) {
14          Roo.Element.prototype.visibilityMode = Roo.Element.DISPLAY;
15     }
16     return ret;
17 })(); Roo.bootstrap.menu = Roo.bootstrap.menu || {};
18 Roo.bootstrap.nav = {};
19
20 Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};/*
21  * Based on:
22  * Ext JS Library 1.1.1
23  * Copyright(c) 2006-2007, Ext JS, LLC.
24  *
25  * Originally Released Under LGPL - original licence link has changed is not relivant.
26  *
27  * Fork - LGPL
28  * <script type="text/javascript">
29  */
30
31
32 /**
33  * @class Roo.Shadow
34  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
35  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
36  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
37  * @constructor
38  * Create a new Shadow
39  * @param {Object} config The config object
40  */
41 Roo.Shadow = function(config){
42     Roo.apply(this, config);
43     if(typeof this.mode != "string"){
44         this.mode = this.defaultMode;
45     }
46     var o = this.offset, a = {h: 0};
47     var rad = Math.floor(this.offset/2);
48     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
49         case "drop":
50             a.w = 0;
51             a.l = a.t = o;
52             a.t -= 1;
53             if(Roo.isIE){
54                 a.l -= this.offset + rad;
55                 a.t -= this.offset + rad;
56                 a.w -= rad;
57                 a.h -= rad;
58                 a.t += 1;
59             }
60         break;
61         case "sides":
62             a.w = (o*2);
63             a.l = -o;
64             a.t = o-1;
65             if(Roo.isIE){
66                 a.l -= (this.offset - rad);
67                 a.t -= this.offset + rad;
68                 a.l += 1;
69                 a.w -= (this.offset - rad)*2;
70                 a.w -= rad + 1;
71                 a.h -= 1;
72             }
73         break;
74         case "frame":
75             a.w = a.h = (o*2);
76             a.l = a.t = -o;
77             a.t += 1;
78             a.h -= 2;
79             if(Roo.isIE){
80                 a.l -= (this.offset - rad);
81                 a.t -= (this.offset - rad);
82                 a.l += 1;
83                 a.w -= (this.offset + rad + 1);
84                 a.h -= (this.offset + rad);
85                 a.h += 1;
86             }
87         break;
88     };
89
90     this.adjusts = a;
91 };
92
93 Roo.Shadow.prototype = {
94     /**
95      * @cfg {String} mode
96      * The shadow display mode.  Supports the following options:<br />
97      * sides: Shadow displays on both sides and bottom only<br />
98      * frame: Shadow displays equally on all four sides<br />
99      * drop: Traditional bottom-right drop shadow (default)
100      */
101     mode: false,
102     /**
103      * @cfg {String} offset
104      * The number of pixels to offset the shadow from the element (defaults to 4)
105      */
106     offset: 4,
107
108     // private
109     defaultMode: "drop",
110
111     /**
112      * Displays the shadow under the target element
113      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
114      */
115     show : function(target){
116         target = Roo.get(target);
117         if(!this.el){
118             this.el = Roo.Shadow.Pool.pull();
119             if(this.el.dom.nextSibling != target.dom){
120                 this.el.insertBefore(target);
121             }
122         }
123         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
124         if(Roo.isIE){
125             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
126         }
127         this.realign(
128             target.getLeft(true),
129             target.getTop(true),
130             target.getWidth(),
131             target.getHeight()
132         );
133         this.el.dom.style.display = "block";
134     },
135
136     /**
137      * Returns true if the shadow is visible, else false
138      */
139     isVisible : function(){
140         return this.el ? true : false;  
141     },
142
143     /**
144      * Direct alignment when values are already available. Show must be called at least once before
145      * calling this method to ensure it is initialized.
146      * @param {Number} left The target element left position
147      * @param {Number} top The target element top position
148      * @param {Number} width The target element width
149      * @param {Number} height The target element height
150      */
151     realign : function(l, t, w, h){
152         if(!this.el){
153             return;
154         }
155         var a = this.adjusts, d = this.el.dom, s = d.style;
156         var iea = 0;
157         s.left = (l+a.l)+"px";
158         s.top = (t+a.t)+"px";
159         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
160  
161         if(s.width != sws || s.height != shs){
162             s.width = sws;
163             s.height = shs;
164             if(!Roo.isIE){
165                 var cn = d.childNodes;
166                 var sww = Math.max(0, (sw-12))+"px";
167                 cn[0].childNodes[1].style.width = sww;
168                 cn[1].childNodes[1].style.width = sww;
169                 cn[2].childNodes[1].style.width = sww;
170                 cn[1].style.height = Math.max(0, (sh-12))+"px";
171             }
172         }
173     },
174
175     /**
176      * Hides this shadow
177      */
178     hide : function(){
179         if(this.el){
180             this.el.dom.style.display = "none";
181             Roo.Shadow.Pool.push(this.el);
182             delete this.el;
183         }
184     },
185
186     /**
187      * Adjust the z-index of this shadow
188      * @param {Number} zindex The new z-index
189      */
190     setZIndex : function(z){
191         this.zIndex = z;
192         if(this.el){
193             this.el.setStyle("z-index", z);
194         }
195     }
196 };
197
198 // Private utility class that manages the internal Shadow cache
199 Roo.Shadow.Pool = function(){
200     var p = [];
201     var markup = Roo.isIE ?
202                  '<div class="x-ie-shadow"></div>' :
203                  '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
204     return {
205         pull : function(){
206             var sh = p.shift();
207             if(!sh){
208                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
209                 sh.autoBoxAdjust = false;
210             }
211             return sh;
212         },
213
214         push : function(sh){
215             p.push(sh);
216         }
217     };
218 }();/*
219  * - LGPL
220  *
221  * base class for bootstrap elements.
222  * 
223  */
224
225 Roo.bootstrap = Roo.bootstrap || {};
226 /**
227  * @class Roo.bootstrap.Component
228  * @extends Roo.Component
229  * @abstract
230  * @children Roo.bootstrap.Component
231  * Bootstrap Component base class
232  * @cfg {String} cls css class
233  * @cfg {String} style any extra css
234  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
235  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
236  * @cfg {string} dataId cutomer id
237  * @cfg {string} name Specifies name attribute
238  * @cfg {string} tooltip  Text for the tooltip
239  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
240  * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
241  
242  * @constructor
243  * Do not use directly - it does not do anything..
244  * @param {Object} config The config object
245  */
246
247
248
249 Roo.bootstrap.Component = function(config){
250     Roo.bootstrap.Component.superclass.constructor.call(this, config);
251        
252     this.addEvents({
253         /**
254          * @event childrenrendered
255          * Fires when the children have been rendered..
256          * @param {Roo.bootstrap.Component} this
257          */
258         "childrenrendered" : true
259         
260         
261         
262     });
263     
264     
265 };
266
267 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
268     
269     
270     allowDomMove : false, // to stop relocations in parent onRender...
271     
272     cls : false,
273     
274     style : false,
275     
276     autoCreate : false,
277     
278     tooltip : null,
279     /**
280      * Initialize Events for the element
281      */
282     initEvents : function() { },
283     
284     xattr : false,
285     
286     parentId : false,
287     
288     can_build_overlaid : true,
289     
290     container_method : false,
291     
292     dataId : false,
293     
294     name : false,
295     
296     parent: function() {
297         // returns the parent component..
298         return Roo.ComponentMgr.get(this.parentId)
299         
300         
301     },
302     
303     // private
304     onRender : function(ct, position)
305     {
306        // Roo.log("Call onRender: " + this.xtype);
307         
308         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
309         
310         if(this.el){
311             if (this.el.attr('xtype')) {
312                 this.el.attr('xtypex', this.el.attr('xtype'));
313                 this.el.dom.removeAttribute('xtype');
314                 
315                 this.initEvents();
316             }
317             
318             return;
319         }
320         
321          
322         
323         var cfg = Roo.apply({},  this.getAutoCreate());
324         
325         cfg.id = this.id || Roo.id();
326         
327         // fill in the extra attributes 
328         if (this.xattr && typeof(this.xattr) =='object') {
329             for (var i in this.xattr) {
330                 cfg[i] = this.xattr[i];
331             }
332         }
333         
334         if(this.dataId){
335             cfg.dataId = this.dataId;
336         }
337         
338         if (this.cls) {
339             cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
340         }
341         
342         if (this.style) { // fixme needs to support more complex style data.
343             cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
344         }
345         
346         if(this.name){
347             cfg.name = this.name;
348         }
349         
350         this.el = ct.createChild(cfg, position);
351         
352         if (this.tooltip) {
353             this.tooltipEl().attr('tooltip', this.tooltip);
354         }
355         
356         if(this.tabIndex !== undefined){
357             this.el.dom.setAttribute('tabIndex', this.tabIndex);
358         }
359         
360         this.initEvents();
361         
362     },
363     /**
364      * Fetch the element to add children to
365      * @return {Roo.Element} defaults to this.el
366      */
367     getChildContainer : function()
368     {
369         return this.el;
370     },
371     getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
372     {
373         return Roo.get(document.body);
374     },
375     
376     /**
377      * Fetch the element to display the tooltip on.
378      * @return {Roo.Element} defaults to this.el
379      */
380     tooltipEl : function()
381     {
382         return this.el;
383     },
384         
385     addxtype  : function(tree,cntr)
386     {
387         var cn = this;
388         
389         cn = Roo.factory(tree);
390         //Roo.log(['addxtype', cn]);
391            
392         cn.parentType = this.xtype; //??
393         cn.parentId = this.id;
394         
395         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
396         if (typeof(cn.container_method) == 'string') {
397             cntr = cn.container_method;
398         }
399         
400         
401         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
402         
403         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
404         
405         var build_from_html =  Roo.XComponent.build_from_html;
406           
407         var is_body  = (tree.xtype == 'Body') ;
408           
409         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
410           
411         var self_cntr_el = Roo.get(this[cntr](false));
412         
413         // do not try and build conditional elements 
414         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
415             return false;
416         }
417         
418         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
419             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
420                 return this.addxtypeChild(tree,cntr, is_body);
421             }
422             
423             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
424                 
425             if(echild){
426                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
427             }
428             
429             Roo.log('skipping render');
430             return cn;
431             
432         }
433         
434         var ret = false;
435         if (!build_from_html) {
436             return false;
437         }
438         
439         // this i think handles overlaying multiple children of the same type
440         // with the sam eelement.. - which might be buggy..
441         while (true) {
442             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
443             
444             if (!echild) {
445                 break;
446             }
447             
448             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
449                 break;
450             }
451             
452             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
453         }
454        
455         return ret;
456     },
457     
458     
459     addxtypeChild : function (tree, cntr, is_body)
460     {
461         Roo.debug && Roo.log('addxtypeChild:' + cntr);
462         var cn = this;
463         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
464         
465         
466         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
467                     (typeof(tree['flexy:foreach']) != 'undefined');
468           
469     
470         
471         skip_children = false;
472         // render the element if it's not BODY.
473         if (!is_body) {
474             
475             // if parent was disabled, then do not try and create the children..
476             if(!this[cntr](true)){
477                 tree.items = [];
478                 return tree;
479             }
480            
481             cn = Roo.factory(tree);
482            
483             cn.parentType = this.xtype; //??
484             cn.parentId = this.id;
485             
486             var build_from_html =  Roo.XComponent.build_from_html;
487             
488             
489             // does the container contain child eleemnts with 'xtype' attributes.
490             // that match this xtype..
491             // note - when we render we create these as well..
492             // so we should check to see if body has xtype set.
493             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
494                
495                 var self_cntr_el = Roo.get(this[cntr](false));
496                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
497                 if (echild) { 
498                     //Roo.log(Roo.XComponent.build_from_html);
499                     //Roo.log("got echild:");
500                     //Roo.log(echild);
501                 }
502                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
503                 // and are not displayed -this causes this to use up the wrong element when matching.
504                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
505                 
506                 
507                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
508                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
509                   
510                   
511                   
512                     cn.el = echild;
513                   //  Roo.log("GOT");
514                     //echild.dom.removeAttribute('xtype');
515                 } else {
516                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
517                     Roo.debug && Roo.log(self_cntr_el);
518                     Roo.debug && Roo.log(echild);
519                     Roo.debug && Roo.log(cn);
520                 }
521             }
522            
523             
524            
525             // if object has flexy:if - then it may or may not be rendered.
526             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
527                 // skip a flexy if element.
528                 Roo.debug && Roo.log('skipping render');
529                 Roo.debug && Roo.log(tree);
530                 if (!cn.el) {
531                     Roo.debug && Roo.log('skipping all children');
532                     skip_children = true;
533                 }
534                 
535              } else {
536                  
537                 // actually if flexy:foreach is found, we really want to create 
538                 // multiple copies here...
539                 //Roo.log('render');
540                 //Roo.log(this[cntr]());
541                 // some elements do not have render methods.. like the layouts...
542                 /*
543                 if(this[cntr](true) === false){
544                     cn.items = [];
545                     return cn;
546                 }
547                 */
548                 cn.render && cn.render(this[cntr](true));
549                 
550              }
551             // then add the element..
552         }
553          
554         // handle the kids..
555         
556         var nitems = [];
557         /*
558         if (typeof (tree.menu) != 'undefined') {
559             tree.menu.parentType = cn.xtype;
560             tree.menu.triggerEl = cn.el;
561             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
562             
563         }
564         */
565         if (!tree.items || !tree.items.length) {
566             cn.items = nitems;
567             //Roo.log(["no children", this]);
568             
569             return cn;
570         }
571          
572         var items = tree.items;
573         delete tree.items;
574         
575         //Roo.log(items.length);
576             // add the items..
577         if (!skip_children) {    
578             for(var i =0;i < items.length;i++) {
579               //  Roo.log(['add child', items[i]]);
580                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
581             }
582         }
583         
584         cn.items = nitems;
585         
586         //Roo.log("fire childrenrendered");
587         
588         cn.fireEvent('childrenrendered', this);
589         
590         return cn;
591     },
592     
593     /**
594      * Set the element that will be used to show or hide
595      */
596     setVisibilityEl : function(el)
597     {
598         this.visibilityEl = el;
599     },
600     
601      /**
602      * Get the element that will be used to show or hide
603      */
604     getVisibilityEl : function()
605     {
606         if (typeof(this.visibilityEl) == 'object') {
607             return this.visibilityEl;
608         }
609         
610         if (typeof(this.visibilityEl) == 'string') {
611             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
612         }
613         
614         return this.getEl();
615     },
616     
617     /**
618      * Show a component - removes 'hidden' class
619      */
620     show : function()
621     {
622         if(!this.getVisibilityEl()){
623             return;
624         }
625          
626         this.getVisibilityEl().removeClass(['hidden','d-none']);
627         
628         this.fireEvent('show', this);
629         
630         
631     },
632     /**
633      * Hide a component - adds 'hidden' class
634      */
635     hide: function()
636     {
637         if(!this.getVisibilityEl()){
638             return;
639         }
640         
641         this.getVisibilityEl().addClass(['hidden','d-none']);
642         
643         this.fireEvent('hide', this);
644         
645     }
646 });
647
648  /*
649  * - LGPL
650  *
651  * element
652  * 
653  */
654
655 /**
656  * @class Roo.bootstrap.Element
657  * @extends Roo.bootstrap.Component
658  * @children Roo.bootstrap.Component
659  * Bootstrap Element class (basically a DIV used to make random stuff )
660  * 
661  * @cfg {String} html contents of the element
662  * @cfg {String} tag tag of the element
663  * @cfg {String} cls class of the element
664  * @cfg {Boolean} preventDefault (true|false) default false
665  * @cfg {Boolean} clickable (true|false) default false
666  * @cfg {String} role default blank - set to button to force cursor pointer
667  
668  * 
669  * @constructor
670  * Create a new Element
671  * @param {Object} config The config object
672  */
673
674 Roo.bootstrap.Element = function(config){
675     Roo.bootstrap.Element.superclass.constructor.call(this, config);
676     
677     this.addEvents({
678         // raw events
679         /**
680          * @event click
681          * When a element is chick
682          * @param {Roo.bootstrap.Element} this
683          * @param {Roo.EventObject} e
684          */
685         "click" : true 
686         
687       
688     });
689 };
690
691 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
692     
693     tag: 'div',
694     cls: '',
695     html: '',
696     preventDefault: false, 
697     clickable: false,
698     tapedTwice : false,
699     role : false,
700     
701     getAutoCreate : function(){
702         
703         var cfg = {
704             tag: this.tag,
705             // cls: this.cls, double assign in parent class Component.js :: onRender
706             html: this.html
707         };
708         if (this.role !== false) {
709             cfg.role = this.role;
710         }
711         
712         return cfg;
713     },
714     
715     initEvents: function() 
716     {
717         Roo.bootstrap.Element.superclass.initEvents.call(this);
718         
719         if(this.clickable){
720             this.el.on('click', this.onClick, this);
721         }
722         
723         
724     },
725     
726     onClick : function(e)
727     {
728         if(this.preventDefault){
729             e.preventDefault();
730         }
731         
732         this.fireEvent('click', this, e); // why was this double click before?
733     },
734     
735     
736     
737
738     
739     
740     getValue : function()
741     {
742         return this.el.dom.innerHTML;
743     },
744     
745     setValue : function(value)
746     {
747         this.el.dom.innerHTML = value;
748     }
749    
750 });
751
752  
753
754  /*
755  * - LGPL
756  *
757  * dropable area
758  * 
759  */
760
761 /**
762  * @class Roo.bootstrap.DropTarget
763  * @extends Roo.bootstrap.Element
764  * Bootstrap DropTarget class
765  
766  * @cfg {string} name dropable name
767  * 
768  * @constructor
769  * Create a new Dropable Area
770  * @param {Object} config The config object
771  */
772
773 Roo.bootstrap.DropTarget = function(config){
774     Roo.bootstrap.DropTarget.superclass.constructor.call(this, config);
775     
776     this.addEvents({
777         // raw events
778         /**
779          * @event click
780          * When a element is chick
781          * @param {Roo.bootstrap.Element} this
782          * @param {Roo.EventObject} e
783          */
784         "drop" : true
785     });
786 };
787
788 Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element,  {
789     
790     
791     getAutoCreate : function(){
792         
793          
794     },
795     
796     initEvents: function() 
797     {
798         Roo.bootstrap.DropTarget.superclass.initEvents.call(this);
799         this.dropZone = new Roo.dd.DropTarget(this.getEl(), {
800             ddGroup: this.name,
801             listeners : {
802                 drop : this.dragDrop.createDelegate(this),
803                 enter : this.dragEnter.createDelegate(this),
804                 out : this.dragOut.createDelegate(this),
805                 over : this.dragOver.createDelegate(this)
806             }
807             
808         });
809         this.dropZone.DDM.useCache = false // so data gets refreshed when we resize stuff
810     },
811     
812     dragDrop : function(source,e,data)
813     {
814         // user has to decide how to impliment this.
815         Roo.log('drop');
816         Roo.log(this);
817         //this.fireEvent('drop', this, source, e ,data);
818         return false;
819     },
820     
821     dragEnter : function(n, dd, e, data)
822     {
823         // probably want to resize the element to match the dropped element..
824         Roo.log("enter");
825         this.originalSize = this.el.getSize();
826         this.el.setSize( n.el.getSize());
827         this.dropZone.DDM.refreshCache(this.name);
828         Roo.log([n, dd, e, data]);
829     },
830     
831     dragOut : function(value)
832     {
833         // resize back to normal
834         Roo.log("out");
835         this.el.setSize(this.originalSize);
836         this.dropZone.resetConstraints();
837     },
838     
839     dragOver : function()
840     {
841         // ??? do nothing?
842     }
843    
844 });
845
846  
847
848  /*
849  * - LGPL
850  *
851  * Body
852  *
853  */
854
855 /**
856  * @class Roo.bootstrap.Body
857  * @extends Roo.bootstrap.Component
858  * @children Roo.bootstrap.Component 
859  * @parent none builder
860  * Bootstrap Body class
861  *
862  * @constructor
863  * Create a new body
864  * @param {Object} config The config object
865  */
866
867 Roo.bootstrap.Body = function(config){
868
869     config = config || {};
870
871     Roo.bootstrap.Body.superclass.constructor.call(this, config);
872     this.el = Roo.get(config.el ? config.el : document.body );
873     if (this.cls && this.cls.length) {
874         Roo.get(document.body).addClass(this.cls);
875     }
876 };
877
878 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component,  {
879
880     is_body : true,// just to make sure it's constructed?
881
882         autoCreate : {
883         cls: 'container'
884     },
885     onRender : function(ct, position)
886     {
887        /* Roo.log("Roo.bootstrap.Body - onRender");
888         if (this.cls && this.cls.length) {
889             Roo.get(document.body).addClass(this.cls);
890         }
891         // style??? xttr???
892         */
893     }
894
895
896
897
898 });
899 /*
900  * - LGPL
901  *
902  * button group
903  * 
904  */
905
906
907 /**
908  * @class Roo.bootstrap.ButtonGroup
909  * @extends Roo.bootstrap.Component
910  * Bootstrap ButtonGroup class
911  * @children Roo.bootstrap.Button Roo.bootstrap.form.Form
912  * 
913  * @cfg {String} size lg | sm | xs (default empty normal)
914  * @cfg {String} align vertical | justified  (default none)
915  * @cfg {String} direction up | down (default down)
916  * @cfg {Boolean} toolbar false | true
917  * @cfg {Boolean} btn true | false
918  * 
919  * 
920  * @constructor
921  * Create a new Input
922  * @param {Object} config The config object
923  */
924
925 Roo.bootstrap.ButtonGroup = function(config){
926     Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
927 };
928
929 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
930     
931     size: '',
932     align: '',
933     direction: '',
934     toolbar: false,
935     btn: true,
936
937     getAutoCreate : function(){
938         var cfg = {
939             cls: 'btn-group',
940             html : null
941         };
942         
943         cfg.html = this.html || cfg.html;
944         
945         if (this.toolbar) {
946             cfg = {
947                 cls: 'btn-toolbar',
948                 html: null
949             };
950             
951             return cfg;
952         }
953         
954         if (['vertical','justified'].indexOf(this.align)!==-1) {
955             cfg.cls = 'btn-group-' + this.align;
956             
957             if (this.align == 'justified') {
958                 console.log(this.items);
959             }
960         }
961         
962         if (['lg','sm','xs'].indexOf(this.size)!==-1) {
963             cfg.cls += ' btn-group-' + this.size;
964         }
965         
966         if (this.direction == 'up') {
967             cfg.cls += ' dropup' ;
968         }
969         
970         return cfg;
971     },
972     /**
973      * Add a button to the group (similar to NavItem API.)
974      */
975     addItem : function(cfg)
976     {
977         var cn = new Roo.bootstrap.Button(cfg);
978         //this.register(cn);
979         cn.parentId = this.id;
980         cn.onRender(this.el, null);
981         return cn;
982     }
983    
984 });
985
986  /*
987  * - LGPL
988  *
989  * button
990  * 
991  */
992
993 /**
994  * @class Roo.bootstrap.Button
995  * @extends Roo.bootstrap.Component
996  * Bootstrap Button class
997  * @cfg {String} html The button content
998  * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default
999  * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default (same as button)
1000  * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
1001  * @cfg {String} size (lg|sm|xs)
1002  * @cfg {String} tag (a|input|submit)
1003  * @cfg {String} href empty or href
1004  * @cfg {Boolean} disabled default false;
1005  * @cfg {Boolean} isClose default false;
1006  * @cfg {String} glyphicon depricated - use fa
1007  * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
1008  * @cfg {String} badge text for badge
1009  * @cfg {String} theme (default|glow)  
1010  * @cfg {Boolean} inverse dark themed version
1011  * @cfg {Boolean} toggle is it a slidy toggle button
1012  * @cfg {Boolean} pressed   default null - if the button ahs active state
1013  * @cfg {String} ontext text for on slidy toggle state
1014  * @cfg {String} offtext text for off slidy toggle state
1015  * @cfg {Boolean} preventDefault  default true (stop click event triggering the URL if it's a link.)
1016  * @cfg {Boolean} removeClass remove the standard class..
1017  * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href. 
1018  * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
1019  * @cfg {Roo.bootstrap.menu.Menu} menu a Menu 
1020
1021  * @constructor
1022  * Create a new button
1023  * @param {Object} config The config object
1024  */
1025
1026
1027 Roo.bootstrap.Button = function(config){
1028     Roo.bootstrap.Button.superclass.constructor.call(this, config);
1029     
1030     this.addEvents({
1031         // raw events
1032         /**
1033          * @event click
1034          * When a button is pressed
1035          * @param {Roo.bootstrap.Button} btn
1036          * @param {Roo.EventObject} e
1037          */
1038         "click" : true,
1039         /**
1040          * @event dblclick
1041          * When a button is double clicked
1042          * @param {Roo.bootstrap.Button} btn
1043          * @param {Roo.EventObject} e
1044          */
1045         "dblclick" : true,
1046          /**
1047          * @event toggle
1048          * After the button has been toggles
1049          * @param {Roo.bootstrap.Button} btn
1050          * @param {Roo.EventObject} e
1051          * @param {boolean} pressed (also available as button.pressed)
1052          */
1053         "toggle" : true
1054     });
1055 };
1056
1057 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
1058     html: false,
1059     active: false,
1060     weight: '',
1061     badge_weight: '',
1062     outline : false,
1063     size: '',
1064     tag: 'button',
1065     href: '',
1066     disabled: false,
1067     isClose: false,
1068     glyphicon: '',
1069     fa: '',
1070     badge: '',
1071     theme: 'default',
1072     inverse: false,
1073     
1074     toggle: false,
1075     ontext: 'ON',
1076     offtext: 'OFF',
1077     defaulton: true,
1078     preventDefault: true,
1079     removeClass: false,
1080     name: false,
1081     target: false,
1082     group : false,
1083      
1084     pressed : null,
1085      
1086     
1087     getAutoCreate : function(){
1088         
1089         var cfg = {
1090             tag : 'button',
1091             cls : 'roo-button',
1092             html: ''
1093         };
1094         
1095         if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
1096             throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
1097             this.tag = 'button';
1098         } else {
1099             cfg.tag = this.tag;
1100         }
1101         cfg.html = '<span class="roo-button-text">' + (this.html || cfg.html) + '</span>';
1102         
1103         if (this.toggle == true) {
1104             cfg={
1105                 tag: 'div',
1106                 cls: 'slider-frame roo-button',
1107                 cn: [
1108                     {
1109                         tag: 'span',
1110                         'data-on-text':'ON',
1111                         'data-off-text':'OFF',
1112                         cls: 'slider-button',
1113                         html: this.offtext
1114                     }
1115                 ]
1116             };
1117             // why are we validating the weights?
1118             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1119                 cfg.cls +=  ' ' + this.weight;
1120             }
1121             
1122             return cfg;
1123         }
1124         
1125         if (this.isClose) {
1126             cfg.cls += ' close';
1127             
1128             cfg["aria-hidden"] = true;
1129             
1130             cfg.html = "&times;";
1131             
1132             return cfg;
1133         }
1134              
1135         
1136         if (this.theme==='default') {
1137             cfg.cls = 'btn roo-button';
1138             
1139             //if (this.parentType != 'Navbar') {
1140             this.weight = this.weight.length ?  this.weight : 'default';
1141             //}
1142             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1143                 
1144                 var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
1145                 var weight = this.weight == 'default' ? 'secondary' : this.weight;
1146                 cfg.cls += ' btn-' + outline + weight;
1147                 if (this.weight == 'default') {
1148                     // BC
1149                     cfg.cls += ' btn-' + this.weight;
1150                 }
1151             }
1152         } else if (this.theme==='glow') {
1153             
1154             cfg.tag = 'a';
1155             cfg.cls = 'btn-glow roo-button';
1156             
1157             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1158                 
1159                 cfg.cls += ' ' + this.weight;
1160             }
1161         }
1162    
1163         
1164         if (this.inverse) {
1165             this.cls += ' inverse';
1166         }
1167         
1168         
1169         if (this.active || this.pressed === true) {
1170             cfg.cls += ' active';
1171         }
1172         
1173         if (this.disabled) {
1174             cfg.disabled = 'disabled';
1175         }
1176         
1177         if (this.items) {
1178             Roo.log('changing to ul' );
1179             cfg.tag = 'ul';
1180             this.glyphicon = 'caret';
1181             if (Roo.bootstrap.version == 4) {
1182                 this.fa = 'caret-down';
1183             }
1184             
1185         }
1186         
1187         cfg.cls += this.size.length ? (' btn-' + this.size) : '';
1188          
1189         //gsRoo.log(this.parentType);
1190         if (this.parentType === 'Navbar' && !this.parent().bar) {
1191             Roo.log('changing to li?');
1192             
1193             cfg.tag = 'li';
1194             
1195             cfg.cls = '';
1196             cfg.cn =  [{
1197                 tag : 'a',
1198                 cls : 'roo-button',
1199                 html : this.html,
1200                 href : this.href || '#'
1201             }];
1202             if (this.menu) {
1203                 cfg.cn[0].html = this.html  + ' <span class="caret"></span>';
1204                 cfg.cls += ' dropdown';
1205             }   
1206             
1207             delete cfg.html;
1208             
1209         }
1210         
1211        cfg.cls += this.parentType === 'Navbar' ?  ' navbar-btn' : '';
1212         
1213         if (this.glyphicon) {
1214             cfg.html = ' ' + cfg.html;
1215             
1216             cfg.cn = [
1217                 {
1218                     tag: 'span',
1219                     cls: 'glyphicon glyphicon-' + this.glyphicon
1220                 }
1221             ];
1222         }
1223         if (this.fa) {
1224             cfg.html = ' ' + cfg.html;
1225             
1226             cfg.cn = [
1227                 {
1228                     tag: 'i',
1229                     cls: 'fa fas fa-' + this.fa
1230                 }
1231             ];
1232         }
1233         
1234         if (this.badge) {
1235             cfg.html += ' ';
1236             
1237             cfg.tag = 'a';
1238             
1239 //            cfg.cls='btn roo-button';
1240             
1241             cfg.href=this.href;
1242             
1243             var value = cfg.html;
1244             
1245             if(this.glyphicon){
1246                 value = {
1247                     tag: 'span',
1248                     cls: 'glyphicon glyphicon-' + this.glyphicon,
1249                     html: this.html
1250                 };
1251             }
1252             if(this.fa){
1253                 value = {
1254                     tag: 'i',
1255                     cls: 'fa fas fa-' + this.fa,
1256                     html: this.html
1257                 };
1258             }
1259             
1260             var bw = this.badge_weight.length ? this.badge_weight :
1261                 (this.weight.length ? this.weight : 'secondary');
1262             bw = bw == 'default' ? 'secondary' : bw;
1263             
1264             cfg.cn = [
1265                 value,
1266                 {
1267                     tag: 'span',
1268                     cls: 'badge badge-' + bw,
1269                     html: this.badge
1270                 }
1271             ];
1272             
1273             cfg.html='';
1274         }
1275         
1276         if (this.menu) {
1277             cfg.cls += ' dropdown';
1278             cfg.html = typeof(cfg.html) != 'undefined' ?
1279                     cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
1280         }
1281         
1282         if (cfg.tag !== 'a' && this.href !== '') {
1283             throw "Tag must be a to set href.";
1284         } else if (this.href.length > 0) {
1285             cfg.href = this.href;
1286         }
1287         
1288         if(this.removeClass){
1289             cfg.cls = '';
1290         }
1291         
1292         if(this.target){
1293             cfg.target = this.target;
1294         }
1295         
1296         return cfg;
1297     },
1298     initEvents: function() {
1299        // Roo.log('init events?');
1300 //        Roo.log(this.el.dom);
1301         // add the menu...
1302         
1303         if (typeof (this.menu) != 'undefined') {
1304             this.menu.parentType = this.xtype;
1305             this.menu.triggerEl = this.el;
1306             this.addxtype(Roo.apply({}, this.menu));
1307         }
1308
1309
1310         if (this.el.hasClass('roo-button')) {
1311              this.el.on('click', this.onClick, this);
1312              this.el.on('dblclick', this.onDblClick, this);
1313         } else {
1314              this.el.select('.roo-button').on('click', this.onClick, this);
1315              this.el.select('.roo-button').on('dblclick', this.onDblClick, this);
1316              
1317         }
1318         // why?
1319         if(this.removeClass){
1320             this.el.on('click', this.onClick, this);
1321         }
1322         
1323         if (this.group === true) {
1324              if (this.pressed === false || this.pressed === true) {
1325                 // nothing
1326             } else {
1327                 this.pressed = false;
1328                 this.setActive(this.pressed);
1329             }
1330             
1331         }
1332         
1333         this.el.enableDisplayMode();
1334         
1335     },
1336     onClick : function(e)
1337     {
1338         if (this.disabled) {
1339             return;
1340         }
1341         
1342         Roo.log('button on click ');
1343         if(this.href === '' || this.preventDefault){
1344             e.preventDefault();
1345         }
1346         
1347         if (this.group) {
1348             if (this.pressed) {
1349                 // do nothing -
1350                 return;
1351             }
1352             this.setActive(true);
1353             var pi = this.parent().items;
1354             for (var i = 0;i < pi.length;i++) {
1355                 if (this == pi[i]) {
1356                     continue;
1357                 }
1358                 if (pi[i].el.hasClass('roo-button')) {
1359                     pi[i].setActive(false);
1360                 }
1361             }
1362             this.fireEvent('click', this, e);            
1363             return;
1364         }
1365         
1366         if (this.pressed === true || this.pressed === false) {
1367             this.toggleActive(e);
1368         }
1369         
1370         
1371         this.fireEvent('click', this, e);
1372     },
1373     onDblClick: function(e)
1374     {
1375         if (this.disabled) {
1376             return;
1377         }
1378         if(this.preventDefault){
1379             e.preventDefault();
1380         }
1381         this.fireEvent('dblclick', this, e);
1382     },
1383     /**
1384      * Enables this button
1385      */
1386     enable : function()
1387     {
1388         this.disabled = false;
1389         this.el.removeClass('disabled');
1390         this.el.dom.removeAttribute("disabled");
1391     },
1392     
1393     /**
1394      * Disable this button
1395      */
1396     disable : function()
1397     {
1398         this.disabled = true;
1399         this.el.addClass('disabled');
1400         this.el.attr("disabled", "disabled")
1401     },
1402      /**
1403      * sets the active state on/off, 
1404      * @param {Boolean} state (optional) Force a particular state
1405      */
1406     setActive : function(v) {
1407         
1408         this.el[v ? 'addClass' : 'removeClass']('active');
1409         this.pressed = v;
1410     },
1411      /**
1412      * toggles the current active state 
1413      */
1414     toggleActive : function(e)
1415     {
1416         this.setActive(!this.pressed); // this modifies pressed...
1417         this.fireEvent('toggle', this, e, this.pressed);
1418     },
1419      /**
1420      * get the current active state
1421      * @return {boolean} true if it's active
1422      */
1423     isActive : function()
1424     {
1425         return this.el.hasClass('active');
1426     },
1427     /**
1428      * set the text of the first selected button
1429      */
1430     setText : function(str)
1431     {
1432         this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
1433     },
1434     /**
1435      * get the text of the first selected button
1436      */
1437     getText : function()
1438     {
1439         return this.el.select('.roo-button-text',true).first().dom.innerHTML;
1440     },
1441     
1442     setWeight : function(str)
1443     {
1444         this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) );
1445         this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) );
1446         this.weight = str;
1447         var outline = this.outline ? 'outline-' : '';
1448         if (str == 'default') {
1449             this.el.addClass('btn-default btn-outline-secondary');        
1450             return;
1451         }
1452         this.el.addClass('btn-' + outline + str);        
1453     }
1454     
1455     
1456 });
1457 // fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes.
1458
1459 Roo.bootstrap.Button.weights = [
1460     'default',
1461     'secondary' ,
1462     'primary',
1463     'success',
1464     'info',
1465     'warning',
1466     'danger',
1467     'link',
1468     'light',
1469     'dark'              
1470    
1471 ];/*
1472  * - LGPL
1473  *
1474  * column
1475  * 
1476  */
1477
1478 /**
1479  * @class Roo.bootstrap.Column
1480  * @extends Roo.bootstrap.Component
1481  * @children Roo.bootstrap.Component
1482  * Bootstrap Column class
1483  * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
1484  * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
1485  * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
1486  * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
1487  * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
1488  * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
1489  * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
1490  * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
1491  *
1492  * 
1493  * @cfg {Boolean} hidden (true|false) hide the element
1494  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1495  * @cfg {String} fa (ban|check|...) font awesome icon
1496  * @cfg {Number} fasize (1|2|....) font awsome size
1497
1498  * @cfg {String} icon (info-sign|check|...) glyphicon name
1499
1500  * @cfg {String} html content of column.
1501  * 
1502  * @constructor
1503  * Create a new Column
1504  * @param {Object} config The config object
1505  */
1506
1507 Roo.bootstrap.Column = function(config){
1508     Roo.bootstrap.Column.superclass.constructor.call(this, config);
1509 };
1510
1511 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
1512     
1513     xs: false,
1514     sm: false,
1515     md: false,
1516     lg: false,
1517     xsoff: false,
1518     smoff: false,
1519     mdoff: false,
1520     lgoff: false,
1521     html: '',
1522     offset: 0,
1523     alert: false,
1524     fa: false,
1525     icon : false,
1526     hidden : false,
1527     fasize : 1,
1528     
1529     getAutoCreate : function(){
1530         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
1531         
1532         cfg = {
1533             tag: 'div',
1534             cls: 'column'
1535         };
1536         
1537         var settings=this;
1538         var sizes =   ['xs','sm','md','lg'];
1539         sizes.map(function(size ,ix){
1540             //Roo.log( size + ':' + settings[size]);
1541             
1542             if (settings[size+'off'] !== false) {
1543                 cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
1544             }
1545             
1546             if (settings[size] === false) {
1547                 return;
1548             }
1549             
1550             if (!settings[size]) { // 0 = hidden
1551                 cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
1552                 // bootsrap4
1553                 for (var i = ix; i > -1; i--) {
1554                     cfg.cls +=  ' d-' + sizes[i] + '-none'; 
1555                 }
1556                 
1557                 
1558                 return;
1559             }
1560             cfg.cls += ' col-' + size + '-' + settings[size] + (
1561                 size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
1562             );
1563             
1564         });
1565         
1566         if (this.hidden) {
1567             cfg.cls += ' hidden';
1568         }
1569         
1570         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1571             cfg.cls +=' alert alert-' + this.alert;
1572         }
1573         
1574         
1575         if (this.html.length) {
1576             cfg.html = this.html;
1577         }
1578         if (this.fa) {
1579             var fasize = '';
1580             if (this.fasize > 1) {
1581                 fasize = ' fa-' + this.fasize + 'x';
1582             }
1583             cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
1584             
1585             
1586         }
1587         if (this.icon) {
1588             cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' +  (cfg.html || '');
1589         }
1590         
1591         return cfg;
1592     }
1593    
1594 });
1595
1596  
1597
1598  /*
1599  * - LGPL
1600  *
1601  * page container.
1602  * 
1603  */
1604
1605
1606 /**
1607  * @class Roo.bootstrap.Container
1608  * @extends Roo.bootstrap.Component
1609  * @children Roo.bootstrap.Component
1610  * @parent builder
1611  * Bootstrap Container class
1612  * @cfg {Boolean} jumbotron is it a jumbotron element
1613  * @cfg {String} html content of element
1614  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
1615  * @cfg {String} panel (default|primary|success|info|warning|danger) render as panel  - type - primary/success.....
1616  * @cfg {String} header content of header (for panel)
1617  * @cfg {String} footer content of footer (for panel)
1618  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
1619  * @cfg {String} tag (header|aside|section) type of HTML tag.
1620  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1621  * @cfg {String} fa font awesome icon
1622  * @cfg {String} icon (info-sign|check|...) glyphicon name
1623  * @cfg {Boolean} hidden (true|false) hide the element
1624  * @cfg {Boolean} expandable (true|false) default false
1625  * @cfg {Boolean} expanded (true|false) default true
1626  * @cfg {String} rheader contet on the right of header
1627  * @cfg {Boolean} clickable (true|false) default false
1628
1629  *     
1630  * @constructor
1631  * Create a new Container
1632  * @param {Object} config The config object
1633  */
1634
1635 Roo.bootstrap.Container = function(config){
1636     Roo.bootstrap.Container.superclass.constructor.call(this, config);
1637     
1638     this.addEvents({
1639         // raw events
1640          /**
1641          * @event expand
1642          * After the panel has been expand
1643          * 
1644          * @param {Roo.bootstrap.Container} this
1645          */
1646         "expand" : true,
1647         /**
1648          * @event collapse
1649          * After the panel has been collapsed
1650          * 
1651          * @param {Roo.bootstrap.Container} this
1652          */
1653         "collapse" : true,
1654         /**
1655          * @event click
1656          * When a element is chick
1657          * @param {Roo.bootstrap.Container} this
1658          * @param {Roo.EventObject} e
1659          */
1660         "click" : true
1661     });
1662 };
1663
1664 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
1665     
1666     jumbotron : false,
1667     well: '',
1668     panel : '',
1669     header: '',
1670     footer : '',
1671     sticky: '',
1672     tag : false,
1673     alert : false,
1674     fa: false,
1675     icon : false,
1676     expandable : false,
1677     rheader : '',
1678     expanded : true,
1679     clickable: false,
1680   
1681      
1682     getChildContainer : function() {
1683         
1684         if(!this.el){
1685             return false;
1686         }
1687         
1688         if (this.panel.length) {
1689             return this.el.select('.panel-body',true).first();
1690         }
1691         
1692         return this.el;
1693     },
1694     
1695     
1696     getAutoCreate : function(){
1697         
1698         var cfg = {
1699             tag : this.tag || 'div',
1700             html : '',
1701             cls : ''
1702         };
1703         if (this.jumbotron) {
1704             cfg.cls = 'jumbotron';
1705         }
1706         
1707         
1708         
1709         // - this is applied by the parent..
1710         //if (this.cls) {
1711         //    cfg.cls = this.cls + '';
1712         //}
1713         
1714         if (this.sticky.length) {
1715             
1716             var bd = Roo.get(document.body);
1717             if (!bd.hasClass('bootstrap-sticky')) {
1718                 bd.addClass('bootstrap-sticky');
1719                 Roo.select('html',true).setStyle('height', '100%');
1720             }
1721              
1722             cfg.cls += 'bootstrap-sticky-' + this.sticky;
1723         }
1724         
1725         
1726         if (this.well.length) {
1727             switch (this.well) {
1728                 case 'lg':
1729                 case 'sm':
1730                     cfg.cls +=' well well-' +this.well;
1731                     break;
1732                 default:
1733                     cfg.cls +=' well';
1734                     break;
1735             }
1736         }
1737         
1738         if (this.hidden) {
1739             cfg.cls += ' hidden';
1740         }
1741         
1742         
1743         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1744             cfg.cls +=' alert alert-' + this.alert;
1745         }
1746         
1747         var body = cfg;
1748         
1749         if (this.panel.length) {
1750             cfg.cls += ' panel panel-' + this.panel;
1751             cfg.cn = [];
1752             if (this.header.length) {
1753                 
1754                 var h = [];
1755                 
1756                 if(this.expandable){
1757                     
1758                     cfg.cls = cfg.cls + ' expandable';
1759                     
1760                     h.push({
1761                         tag: 'i',
1762                         cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus') 
1763                     });
1764                     
1765                 }
1766                 
1767                 h.push(
1768                     {
1769                         tag: 'span',
1770                         cls : 'panel-title',
1771                         html : (this.expandable ? '&nbsp;' : '') + this.header
1772                     },
1773                     {
1774                         tag: 'span',
1775                         cls: 'panel-header-right',
1776                         html: this.rheader
1777                     }
1778                 );
1779                 
1780                 cfg.cn.push({
1781                     cls : 'panel-heading',
1782                     style : this.expandable ? 'cursor: pointer' : '',
1783                     cn : h
1784                 });
1785                 
1786             }
1787             
1788             body = false;
1789             cfg.cn.push({
1790                 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
1791                 html : this.html
1792             });
1793             
1794             
1795             if (this.footer.length) {
1796                 cfg.cn.push({
1797                     cls : 'panel-footer',
1798                     html : this.footer
1799                     
1800                 });
1801             }
1802             
1803         }
1804         
1805         if (body) {
1806             body.html = this.html || cfg.html;
1807             // prefix with the icons..
1808             if (this.fa) {
1809                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
1810             }
1811             if (this.icon) {
1812                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
1813             }
1814             
1815             
1816         }
1817         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
1818             cfg.cls =  'container';
1819         }
1820         
1821         return cfg;
1822     },
1823     
1824     initEvents: function() 
1825     {
1826         if(this.expandable){
1827             var headerEl = this.headerEl();
1828         
1829             if(headerEl){
1830                 headerEl.on('click', this.onToggleClick, this);
1831             }
1832         }
1833         
1834         if(this.clickable){
1835             this.el.on('click', this.onClick, this);
1836         }
1837         
1838     },
1839     
1840     onToggleClick : function()
1841     {
1842         var headerEl = this.headerEl();
1843         
1844         if(!headerEl){
1845             return;
1846         }
1847         
1848         if(this.expanded){
1849             this.collapse();
1850             return;
1851         }
1852         
1853         this.expand();
1854     },
1855     
1856     expand : function()
1857     {
1858         if(this.fireEvent('expand', this)) {
1859             
1860             this.expanded = true;
1861             
1862             //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
1863             
1864             this.el.select('.panel-body',true).first().removeClass('hide');
1865             
1866             var toggleEl = this.toggleEl();
1867
1868             if(!toggleEl){
1869                 return;
1870             }
1871
1872             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-minus']);
1873         }
1874         
1875     },
1876     
1877     collapse : function()
1878     {
1879         if(this.fireEvent('collapse', this)) {
1880             
1881             this.expanded = false;
1882             
1883             //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
1884             this.el.select('.panel-body',true).first().addClass('hide');
1885         
1886             var toggleEl = this.toggleEl();
1887
1888             if(!toggleEl){
1889                 return;
1890             }
1891
1892             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-plus']);
1893         }
1894     },
1895     
1896     toggleEl : function()
1897     {
1898         if(!this.el || !this.panel.length || !this.header.length || !this.expandable){
1899             return;
1900         }
1901         
1902         return this.el.select('.panel-heading .fa',true).first();
1903     },
1904     
1905     headerEl : function()
1906     {
1907         if(!this.el || !this.panel.length || !this.header.length){
1908             return;
1909         }
1910         
1911         return this.el.select('.panel-heading',true).first()
1912     },
1913     
1914     bodyEl : function()
1915     {
1916         if(!this.el || !this.panel.length){
1917             return;
1918         }
1919         
1920         return this.el.select('.panel-body',true).first()
1921     },
1922     
1923     titleEl : function()
1924     {
1925         if(!this.el || !this.panel.length || !this.header.length){
1926             return;
1927         }
1928         
1929         return this.el.select('.panel-title',true).first();
1930     },
1931     
1932     setTitle : function(v)
1933     {
1934         var titleEl = this.titleEl();
1935         
1936         if(!titleEl){
1937             return;
1938         }
1939         
1940         titleEl.dom.innerHTML = v;
1941     },
1942     
1943     getTitle : function()
1944     {
1945         
1946         var titleEl = this.titleEl();
1947         
1948         if(!titleEl){
1949             return '';
1950         }
1951         
1952         return titleEl.dom.innerHTML;
1953     },
1954     
1955     setRightTitle : function(v)
1956     {
1957         var t = this.el.select('.panel-header-right',true).first();
1958         
1959         if(!t){
1960             return;
1961         }
1962         
1963         t.dom.innerHTML = v;
1964     },
1965     
1966     onClick : function(e)
1967     {
1968         e.preventDefault();
1969         
1970         this.fireEvent('click', this, e);
1971     }
1972 });
1973
1974  /**
1975  * @class Roo.bootstrap.Card
1976  * @extends Roo.bootstrap.Component
1977  * @children Roo.bootstrap.Component
1978  * @licence LGPL
1979  * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
1980  *
1981  *
1982  * possible... may not be implemented..
1983  * @cfg {String} header_image  src url of image.
1984  * @cfg {String|Object} header
1985  * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
1986  * @cfg {Number} header_weight  (primary|secondary|success|info|warning|danger|light|dark)
1987  * 
1988  * @cfg {String} title
1989  * @cfg {String} subtitle
1990  * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
1991  * @cfg {String} footer
1992  
1993  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
1994  * 
1995  * @cfg {String} margin (0|1|2|3|4|5|auto)
1996  * @cfg {String} margin_top (0|1|2|3|4|5|auto)
1997  * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
1998  * @cfg {String} margin_left (0|1|2|3|4|5|auto)
1999  * @cfg {String} margin_right (0|1|2|3|4|5|auto)
2000  * @cfg {String} margin_x (0|1|2|3|4|5|auto)
2001  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
2002  *
2003  * @cfg {String} padding (0|1|2|3|4|5)
2004  * @cfg {String} padding_top (0|1|2|3|4|5)next_to_card
2005  * @cfg {String} padding_bottom (0|1|2|3|4|5)
2006  * @cfg {String} padding_left (0|1|2|3|4|5)
2007  * @cfg {String} padding_right (0|1|2|3|4|5)
2008  * @cfg {String} padding_x (0|1|2|3|4|5)
2009  * @cfg {String} padding_y (0|1|2|3|4|5)
2010  *
2011  * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2012  * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2013  * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2014  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2015  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2016  
2017  * @config {Boolean} dragable  if this card can be dragged.
2018  * @config {String} drag_group  group for drag
2019  * @config {Boolean} dropable  if this card can recieve other cards being dropped onto it..
2020  * @config {String} drop_group  group for drag
2021  * 
2022  * @config {Boolean} collapsable can the body be collapsed.
2023  * @config {Boolean} collapsed is the body collapsed when rendered...
2024  * @config {Boolean} rotateable can the body be rotated by clicking on it..
2025  * @config {Boolean} rotated is the body rotated when rendered...
2026  * 
2027  * @constructor
2028  * Create a new Container
2029  * @param {Object} config The config object
2030  */
2031
2032 Roo.bootstrap.Card = function(config){
2033     Roo.bootstrap.Card.superclass.constructor.call(this, config);
2034     
2035     this.addEvents({
2036          // raw events
2037         /**
2038          * @event drop
2039          * When a element a card is dropped
2040          * @param {Roo.bootstrap.Card} this
2041          *
2042          * 
2043          * @param {Roo.bootstrap.Card} move_card the card being dropped?
2044          * @param {String} position 'above' or 'below'
2045          * @param {Roo.bootstrap.Card} next_to_card What card position is relative to of 'false' for empty list.
2046         
2047          */
2048         'drop' : true,
2049          /**
2050          * @event rotate
2051          * When a element a card is rotate
2052          * @param {Roo.bootstrap.Card} this
2053          * @param {Roo.Element} n the node being dropped?
2054          * @param {Boolean} rotate status
2055          */
2056         'rotate' : true,
2057         /**
2058          * @event cardover
2059          * When a card element is dragged over ready to drop (return false to block dropable)
2060          * @param {Roo.bootstrap.Card} this
2061          * @param {Object} data from dragdrop 
2062          */
2063          'cardover' : true
2064          
2065     });
2066 };
2067
2068
2069 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
2070     
2071     
2072     weight : '',
2073     
2074     margin: '', /// may be better in component?
2075     margin_top: '', 
2076     margin_bottom: '', 
2077     margin_left: '',
2078     margin_right: '',
2079     margin_x: '',
2080     margin_y: '',
2081     
2082     padding : '',
2083     padding_top: '', 
2084     padding_bottom: '', 
2085     padding_left: '',
2086     padding_right: '',
2087     padding_x: '',
2088     padding_y: '',
2089     
2090     display: '', 
2091     display_xs: '', 
2092     display_sm: '', 
2093     display_lg: '',
2094     display_xl: '',
2095  
2096     header_image  : '',
2097     header : '',
2098     header_size : 0,
2099     title : '',
2100     subtitle : '',
2101     html : '',
2102     footer: '',
2103
2104     collapsable : false,
2105     collapsed : false,
2106     rotateable : false,
2107     rotated : false,
2108     
2109     dragable : false,
2110     drag_group : false,
2111     dropable : false,
2112     drop_group : false,
2113     childContainer : false,
2114     dropEl : false, /// the dom placeholde element that indicates drop location.
2115     containerEl: false, // body container
2116     bodyEl: false, // card-body
2117     headerContainerEl : false, //
2118     headerEl : false,
2119     header_imageEl : false,
2120     
2121     
2122     layoutCls : function()
2123     {
2124         var cls = '';
2125         var t = this;
2126         Roo.log(this.margin_bottom.length);
2127         ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
2128             // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
2129             
2130             if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
2131                 cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
2132             }
2133             if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
2134                 cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
2135             }
2136         });
2137         
2138         ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
2139             if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
2140                 cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
2141             }
2142         });
2143         
2144         // more generic support?
2145         if (this.hidden) {
2146             cls += ' d-none';
2147         }
2148         
2149         return cls;
2150     },
2151  
2152        // Roo.log("Call onRender: " + this.xtype);
2153         /*  We are looking at something like this.
2154 <div class="card">
2155     <img src="..." class="card-img-top" alt="...">
2156     <div class="card-body">
2157         <h5 class="card-title">Card title</h5>
2158          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
2159
2160         >> this bit is really the body...
2161         <div> << we will ad dthis in hopefully it will not break shit.
2162         
2163         ** card text does not actually have any styling...
2164         
2165             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
2166         
2167         </div> <<
2168           <a href="#" class="card-link">Card link</a>
2169           
2170     </div>
2171     <div class="card-footer">
2172         <small class="text-muted">Last updated 3 mins ago</small>
2173     </div>
2174 </div>
2175          */
2176     getAutoCreate : function(){
2177         
2178         var cfg = {
2179             tag : 'div',
2180             cls : 'card',
2181             cn : [ ]
2182         };
2183         
2184         if (this.weight.length && this.weight != 'light') {
2185             cfg.cls += ' text-white';
2186         } else {
2187             cfg.cls += ' text-dark'; // need as it's nested..
2188         }
2189         if (this.weight.length) {
2190             cfg.cls += ' bg-' + this.weight;
2191         }
2192         
2193         cfg.cls += ' ' + this.layoutCls(); 
2194         
2195         var hdr = false;
2196         var hdr_ctr = false;
2197         if (this.header.length) {
2198             hdr = {
2199                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
2200                 cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2201                 cn : []
2202             };
2203             cfg.cn.push(hdr);
2204             hdr_ctr = hdr;
2205         } else {
2206             hdr = {
2207                 tag : 'div',
2208                 cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2209                 cn : []
2210             };
2211             cfg.cn.push(hdr);
2212             hdr_ctr = hdr;
2213         }
2214         if (this.collapsable) {
2215             hdr_ctr = {
2216             tag : 'a',
2217             cls : 'd-block user-select-none',
2218             cn: [
2219                     {
2220                         tag: 'i',
2221                         cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '')
2222                     }
2223                    
2224                 ]
2225             };
2226             hdr.cn.push(hdr_ctr);
2227         }
2228         
2229         hdr_ctr.cn.push(        {
2230             tag: 'span',
2231             cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
2232             html : this.header
2233         });
2234         
2235         
2236         if (this.header_image.length) {
2237             cfg.cn.push({
2238                 tag : 'img',
2239                 cls : 'card-img-top',
2240                 src: this.header_image // escape?
2241             });
2242         } else {
2243             cfg.cn.push({
2244                     tag : 'div',
2245                     cls : 'card-img-top d-none' 
2246                 });
2247         }
2248             
2249         var body = {
2250             tag : 'div',
2251             cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
2252             cn : []
2253         };
2254         var obody = body;
2255         if (this.collapsable || this.rotateable) {
2256             obody = {
2257                 tag: 'div',
2258                 cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
2259                 cn : [  body ]
2260             };
2261         }
2262         
2263         cfg.cn.push(obody);
2264         
2265         if (this.title.length) {
2266             body.cn.push({
2267                 tag : 'div',
2268                 cls : 'card-title',
2269                 src: this.title // escape?
2270             });
2271         }  
2272         
2273         if (this.subtitle.length) {
2274             body.cn.push({
2275                 tag : 'div',
2276                 cls : 'card-title',
2277                 src: this.subtitle // escape?
2278             });
2279         }
2280         
2281         body.cn.push({
2282             tag : 'div',
2283             cls : 'roo-card-body-ctr'
2284         });
2285         
2286         if (this.html.length) {
2287             body.cn.push({
2288                 tag: 'div',
2289                 html : this.html
2290             });
2291         }
2292         // fixme ? handle objects?
2293         
2294         if (this.footer.length) {
2295            
2296             cfg.cn.push({
2297                 cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
2298                 html : this.footer
2299             });
2300             
2301         } else {
2302             cfg.cn.push({cls : 'card-footer d-none'});
2303         }
2304         
2305         // footer...
2306         
2307         return cfg;
2308     },
2309     
2310     
2311     getCardHeader : function()
2312     {
2313         var  ret = this.el.select('.card-header',true).first();
2314         if (ret.hasClass('d-none')) {
2315             ret.removeClass('d-none');
2316         }
2317         
2318         return ret;
2319     },
2320     getCardFooter : function()
2321     {
2322         var  ret = this.el.select('.card-footer',true).first();
2323         if (ret.hasClass('d-none')) {
2324             ret.removeClass('d-none');
2325         }
2326         
2327         return ret;
2328     },
2329     getCardImageTop : function()
2330     {
2331         var  ret = this.header_imageEl;
2332         if (ret.hasClass('d-none')) {
2333             ret.removeClass('d-none');
2334         }
2335             
2336         return ret;
2337     },
2338     
2339     getChildContainer : function()
2340     {
2341         
2342         if(!this.el){
2343             return false;
2344         }
2345         return this.el.select('.roo-card-body-ctr',true).first();    
2346     },
2347     
2348     initEvents: function() 
2349     {
2350         this.bodyEl = this.el.select('.card-body',true).first(); 
2351         this.containerEl = this.getChildContainer();
2352         if(this.dragable){
2353             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
2354                     containerScroll: true,
2355                     ddGroup: this.drag_group || 'default_card_drag_group'
2356             });
2357             this.dragZone.getDragData = this.getDragData.createDelegate(this);
2358         }
2359         if (this.dropable) {
2360             this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
2361                 containerScroll: true,
2362                 ddGroup: this.drop_group || 'default_card_drag_group'
2363             });
2364             this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
2365             this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
2366             this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
2367             this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
2368             this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
2369         }
2370         
2371         if (this.collapsable) {
2372             this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
2373         }
2374         if (this.rotateable) {
2375             this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
2376         }
2377         this.collapsableEl = this.el.select('.roo-collapsable',true).first();
2378          
2379         this.footerEl = this.el.select('.card-footer',true).first();
2380         this.collapsableToggleEl = this.el.select('.roo-collapse-toggle',true).first();
2381         this.headerContainerEl = this.el.select('.roo-card-header-ctr',true).first();
2382         this.headerEl = this.el.select('.card-header',true).first();
2383         
2384         if (this.rotated) {
2385             this.el.addClass('roo-card-rotated');
2386             this.fireEvent('rotate', this, true);
2387         }
2388         this.header_imageEl = this.el.select('.card-img-top',true).first(); 
2389         this.header_imageEl.on('load', this.onHeaderImageLoad, this );
2390         
2391     },
2392     getDragData : function(e)
2393     {
2394         var target = this.getEl();
2395         if (target) {
2396             //this.handleSelection(e);
2397             
2398             var dragData = {
2399                 source: this,
2400                 copy: false,
2401                 nodes: this.getEl(),
2402                 records: []
2403             };
2404             
2405             
2406             dragData.ddel = target.dom ;    // the div element
2407             Roo.log(target.getWidth( ));
2408             dragData.ddel.style.width = target.getWidth() + 'px';
2409             
2410             return dragData;
2411         }
2412         return false;
2413     },
2414     /**
2415     *    Part of the Roo.dd.DropZone interface. If no target node is found, the
2416     *    whole Element becomes the target, and this causes the drop gesture to append.
2417     *
2418     *    Returns an object:
2419     *     {
2420            
2421            position : 'below' or 'above'
2422            card  : relateive to card OBJECT (or true for no cards listed)
2423            items_n : relative to nth item in list
2424            card_n : relative to  nth card in list
2425     }
2426     *
2427     *    
2428     */
2429     getTargetFromEvent : function(e, dragged_card_el)
2430     {
2431         var target = e.getTarget();
2432         while ((target !== null) && (target.parentNode != this.containerEl.dom)) {
2433             target = target.parentNode;
2434         }
2435         
2436         var ret = {
2437             position: '',
2438             cards : [],
2439             card_n : -1,
2440             items_n : -1,
2441             card : false 
2442         };
2443         
2444         //Roo.log([ 'target' , target ? target.id : '--nothing--']);
2445         // see if target is one of the 'cards'...
2446         
2447         
2448         //Roo.log(this.items.length);
2449         var pos = false;
2450         
2451         var last_card_n = 0;
2452         var cards_len  = 0;
2453         for (var i = 0;i< this.items.length;i++) {
2454             
2455             if (!this.items[i].el.hasClass('card')) {
2456                  continue;
2457             }
2458             pos = this.getDropPoint(e, this.items[i].el.dom);
2459             
2460             cards_len = ret.cards.length;
2461             //Roo.log(this.items[i].el.dom.id);
2462             ret.cards.push(this.items[i]);
2463             last_card_n  = i;
2464             if (ret.card_n < 0 && pos == 'above') {
2465                 ret.position = cards_len > 0 ? 'below' : pos;
2466                 ret.items_n = i > 0 ? i - 1 : 0;
2467                 ret.card_n  = cards_len  > 0 ? cards_len - 1 : 0;
2468                 ret.card = ret.cards[ret.card_n];
2469             }
2470         }
2471         if (!ret.cards.length) {
2472             ret.card = true;
2473             ret.position = 'below';
2474             ret.items_n;
2475             return ret;
2476         }
2477         // could not find a card.. stick it at the end..
2478         if (ret.card_n < 0) {
2479             ret.card_n = last_card_n;
2480             ret.card = ret.cards[last_card_n];
2481             ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
2482             ret.position = 'below';
2483         }
2484         
2485         if (this.items[ret.items_n].el == dragged_card_el) {
2486             return false;
2487         }
2488         
2489         if (ret.position == 'below') {
2490             var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1];
2491             
2492             if (card_after  && card_after.el == dragged_card_el) {
2493                 return false;
2494             }
2495             return ret;
2496         }
2497         
2498         // its's after ..
2499         var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false;
2500         
2501         if (card_before  && card_before.el == dragged_card_el) {
2502             return false;
2503         }
2504         
2505         return ret;
2506     },
2507     
2508     onNodeEnter : function(n, dd, e, data){
2509         return false;
2510     },
2511     onNodeOver : function(n, dd, e, data)
2512     {
2513        
2514         var target_info = this.getTargetFromEvent(e,data.source.el);
2515         if (target_info === false) {
2516             this.dropPlaceHolder('hide');
2517             return false;
2518         }
2519         Roo.log(['getTargetFromEvent', target_info ]);
2520         
2521         
2522         if (this.fireEvent('cardover', this, [ data ]) === false) {
2523             return false;
2524         }
2525         
2526         this.dropPlaceHolder('show', target_info,data);
2527         
2528         return false; 
2529     },
2530     onNodeOut : function(n, dd, e, data){
2531         this.dropPlaceHolder('hide');
2532      
2533     },
2534     onNodeDrop : function(n, dd, e, data)
2535     {
2536         
2537         // call drop - return false if
2538         
2539         // this could actually fail - if the Network drops..
2540         // we will ignore this at present..- client should probably reload
2541         // the whole set of cards if stuff like that fails.
2542         
2543         
2544         var info = this.getTargetFromEvent(e,data.source.el);
2545         if (info === false) {
2546             return false;
2547         }
2548         this.dropPlaceHolder('hide');
2549   
2550           
2551     
2552         this.acceptCard(data.source, info.position, info.card, info.items_n);
2553         return true;
2554          
2555     },
2556     firstChildCard : function()
2557     {
2558         for (var i = 0;i< this.items.length;i++) {
2559             
2560             if (!this.items[i].el.hasClass('card')) {
2561                  continue;
2562             }
2563             return this.items[i];
2564         }
2565         return this.items.length ? this.items[this.items.length-1] : false; // don't try and put stuff after the cards...
2566     },
2567     /**
2568      * accept card
2569      *
2570      * -        card.acceptCard(move_card, info.position, info.card, info.items_n);
2571      */
2572     acceptCard : function(move_card,  position, next_to_card )
2573     {
2574         if (this.fireEvent("drop", this, move_card, position, next_to_card) === false) {
2575             return false;
2576         }
2577         
2578         var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
2579         
2580         move_card.parent().removeCard(move_card);
2581         
2582         
2583         var dom = move_card.el.dom;
2584         dom.style.width = ''; // clear with - which is set by drag.
2585         
2586         if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
2587             var cardel = next_to_card.el.dom;
2588             
2589             if (position == 'above' ) {
2590                 cardel.parentNode.insertBefore(dom, cardel);
2591             } else if (cardel.nextSibling) {
2592                 cardel.parentNode.insertBefore(dom,cardel.nextSibling);
2593             } else {
2594                 cardel.parentNode.append(dom);
2595             }
2596         } else {
2597             // card container???
2598             this.containerEl.dom.append(dom);
2599         }
2600         
2601         //FIXME HANDLE card = true 
2602         
2603         // add this to the correct place in items.
2604         
2605         // remove Card from items.
2606         
2607        
2608         if (this.items.length) {
2609             var nitems = [];
2610             //Roo.log([info.items_n, info.position, this.items.length]);
2611             for (var i =0; i < this.items.length; i++) {
2612                 if (i == to_items_n && position == 'above') {
2613                     nitems.push(move_card);
2614                 }
2615                 nitems.push(this.items[i]);
2616                 if (i == to_items_n && position == 'below') {
2617                     nitems.push(move_card);
2618                 }
2619             }
2620             this.items = nitems;
2621             Roo.log(this.items);
2622         } else {
2623             this.items.push(move_card);
2624         }
2625         
2626         move_card.parentId = this.id;
2627         
2628         return true;
2629         
2630         
2631     },
2632     removeCard : function(c)
2633     {
2634         this.items = this.items.filter(function(e) { return e != c });
2635  
2636         var dom = c.el.dom;
2637         dom.parentNode.removeChild(dom);
2638         dom.style.width = ''; // clear with - which is set by drag.
2639         c.parentId = false;
2640         
2641     },
2642     
2643     /**    Decide whether to drop above or below a View node. */
2644     getDropPoint : function(e, n, dd)
2645     {
2646         if (dd) {
2647              return false;
2648         }
2649         if (n == this.containerEl.dom) {
2650             return "above";
2651         }
2652         var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
2653         var c = t + (b - t) / 2;
2654         var y = Roo.lib.Event.getPageY(e);
2655         if(y <= c) {
2656             return "above";
2657         }else{
2658             return "below";
2659         }
2660     },
2661     onToggleCollapse : function(e)
2662         {
2663         if (this.collapsed) {
2664             this.el.select('.roo-collapse-toggle').removeClass('collapsed');
2665             this.collapsableEl.addClass('show');
2666             this.collapsed = false;
2667             return;
2668         }
2669         this.el.select('.roo-collapse-toggle').addClass('collapsed');
2670         this.collapsableEl.removeClass('show');
2671         this.collapsed = true;
2672         
2673     
2674     },
2675     
2676     onToggleRotate : function(e)
2677     {
2678         this.collapsableEl.removeClass('show');
2679         this.footerEl.removeClass('d-none');
2680         this.el.removeClass('roo-card-rotated');
2681         this.el.removeClass('d-none');
2682         if (this.rotated) {
2683             
2684             this.collapsableEl.addClass('show');
2685             this.rotated = false;
2686             this.fireEvent('rotate', this, this.rotated);
2687             return;
2688         }
2689         this.el.addClass('roo-card-rotated');
2690         this.footerEl.addClass('d-none');
2691         this.el.select('.roo-collapsable').removeClass('show');
2692         
2693         this.rotated = true;
2694         this.fireEvent('rotate', this, this.rotated);
2695     
2696     },
2697     
2698     dropPlaceHolder: function (action, info, data)
2699     {
2700         if (this.dropEl === false) {
2701             this.dropEl = Roo.DomHelper.append(this.containerEl, {
2702             cls : 'd-none'
2703             },true);
2704         }
2705         this.dropEl.removeClass(['d-none', 'd-block']);        
2706         if (action == 'hide') {
2707             
2708             this.dropEl.addClass('d-none');
2709             return;
2710         }
2711         // FIXME - info.card == true!!!
2712         this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
2713         
2714         if (info.card !== true) {
2715             var cardel = info.card.el.dom;
2716             
2717             if (info.position == 'above') {
2718                 cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
2719             } else if (cardel.nextSibling) {
2720                 cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
2721             } else {
2722                 cardel.parentNode.append(this.dropEl.dom);
2723             }
2724         } else {
2725             // card container???
2726             this.containerEl.dom.append(this.dropEl.dom);
2727         }
2728         
2729         this.dropEl.addClass('d-block roo-card-dropzone');
2730         
2731         this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );
2732         
2733         
2734     
2735     
2736     
2737     },
2738     setHeaderText: function(html)
2739     {
2740         this.header = html;
2741         if (this.headerContainerEl) {
2742             this.headerContainerEl.dom.innerHTML = html;
2743         }
2744     },
2745     onHeaderImageLoad : function(ev, he)
2746     {
2747         if (!this.header_image_fit_square) {
2748             return;
2749         }
2750         
2751         var hw = he.naturalHeight / he.naturalWidth;
2752         // wide image = < 0
2753         // tall image = > 1
2754         //var w = he.dom.naturalWidth;
2755         var ww = he.width;
2756         he.style.left =  0;
2757         he.style.position =  'relative';
2758         if (hw > 1) {
2759             var nw = (ww * (1/hw));
2760             Roo.get(he).setSize( ww * (1/hw),  ww);
2761             he.style.left =  ((ww - nw)/ 2) + 'px';
2762             he.style.position =  'relative';
2763         }
2764
2765     }
2766
2767     
2768 });
2769
2770 /*
2771  * - LGPL
2772  *
2773  * Card header - holder for the card header elements.
2774  * 
2775  */
2776
2777 /**
2778  * @class Roo.bootstrap.CardHeader
2779  * @extends Roo.bootstrap.Element
2780  * @parent Roo.bootstrap.Card
2781  * @children Roo.bootstrap.Component
2782  * Bootstrap CardHeader class
2783  * @constructor
2784  * Create a new Card Header - that you can embed children into
2785  * @param {Object} config The config object
2786  */
2787
2788 Roo.bootstrap.CardHeader = function(config){
2789     Roo.bootstrap.CardHeader.superclass.constructor.call(this, config);
2790 };
2791
2792 Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element,  {
2793     
2794     
2795     container_method : 'getCardHeader' 
2796     
2797      
2798     
2799     
2800    
2801 });
2802
2803  
2804
2805  /*
2806  * - LGPL
2807  *
2808  * Card footer - holder for the card footer elements.
2809  * 
2810  */
2811
2812 /**
2813  * @class Roo.bootstrap.CardFooter
2814  * @extends Roo.bootstrap.Element
2815  * @parent Roo.bootstrap.Card
2816  * @children Roo.bootstrap.Component
2817  * Bootstrap CardFooter class
2818  * 
2819  * @constructor
2820  * Create a new Card Footer - that you can embed children into
2821  * @param {Object} config The config object
2822  */
2823
2824 Roo.bootstrap.CardFooter = function(config){
2825     Roo.bootstrap.CardFooter.superclass.constructor.call(this, config);
2826 };
2827
2828 Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element,  {
2829     
2830     
2831     container_method : 'getCardFooter' 
2832     
2833      
2834     
2835     
2836    
2837 });
2838
2839  
2840
2841  /*
2842  * - LGPL
2843  *
2844  * Card header - holder for the card header elements.
2845  * 
2846  */
2847
2848 /**
2849  * @class Roo.bootstrap.CardImageTop
2850  * @extends Roo.bootstrap.Element
2851  * @parent Roo.bootstrap.Card
2852  * @children Roo.bootstrap.Component
2853  * Bootstrap CardImageTop class
2854  * 
2855  * @constructor
2856  * Create a new Card Image Top container
2857  * @param {Object} config The config object
2858  */
2859
2860 Roo.bootstrap.CardImageTop = function(config){
2861     Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
2862 };
2863
2864 Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
2865     
2866    
2867     container_method : 'getCardImageTop' 
2868     
2869      
2870     
2871    
2872 });
2873
2874  
2875
2876  
2877 /*
2878 * Licence: LGPL
2879 */
2880
2881 /**
2882  * @class Roo.bootstrap.ButtonUploader
2883  * @extends Roo.bootstrap.Button
2884  * Bootstrap Button Uploader class - it's a button which when you add files to it
2885  *
2886  * 
2887  * @cfg {Number} errorTimeout default 3000
2888  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
2889  * @cfg {Array}  html The button text.
2890  * @cfg {Boolean}  multiple (default true) Should the upload allow multiple files to be uploaded.
2891  *
2892  * @constructor
2893  * Create a new CardUploader
2894  * @param {Object} config The config object
2895  */
2896
2897 Roo.bootstrap.ButtonUploader = function(config){
2898     
2899  
2900     
2901     Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
2902     
2903      
2904      this.addEvents({
2905          // raw events
2906         /**
2907          * @event beforeselect
2908          * When button is pressed, before show upload files dialog is shown
2909          * @param {Roo.bootstrap.UploaderButton} this
2910          *
2911          */
2912         'beforeselect' : true,
2913          /**
2914          * @event fired when files have been selected, 
2915          * When a the download link is clicked
2916          * @param {Roo.bootstrap.UploaderButton} this
2917          * @param {Array} Array of files that have been uploaded
2918          */
2919         'uploaded' : true
2920         
2921     });
2922 };
2923  
2924 Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button,  {
2925     
2926      
2927     errorTimeout : 3000,
2928      
2929     images : false,
2930    
2931     fileCollection : false,
2932     allowBlank : true,
2933     
2934     multiple : true,
2935     
2936     getAutoCreate : function()
2937     {
2938        
2939         
2940         return  {
2941             cls :'div' ,
2942             cn : [
2943                 Roo.bootstrap.Button.prototype.getAutoCreate.call(this) 
2944             ]
2945         };
2946            
2947          
2948     },
2949      
2950    
2951     initEvents : function()
2952     {
2953         
2954         Roo.bootstrap.Button.prototype.initEvents.call(this);
2955         
2956         
2957         
2958         
2959         
2960         this.urlAPI = (window.createObjectURL && window) || 
2961                                 (window.URL && URL.revokeObjectURL && URL) || 
2962                                 (window.webkitURL && webkitURL);
2963                         
2964         var im = {
2965             tag: 'input',
2966             type : 'file',
2967             cls : 'd-none  roo-card-upload-selector' 
2968           
2969         };
2970         if (this.multiple) {
2971             im.multiple = 'multiple';
2972         }
2973         this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem.
2974        
2975         //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
2976         
2977         this.selectorEl.on('change', this.onFileSelected, this);
2978          
2979          
2980        
2981     },
2982     
2983    
2984     onClick : function(e)
2985     {
2986         e.preventDefault();
2987         
2988         if ( this.fireEvent('beforeselect', this) === false) {
2989             return;
2990         }
2991          
2992         this.selectorEl.dom.click();
2993          
2994     },
2995     
2996     onFileSelected : function(e)
2997     {
2998         e.preventDefault();
2999         
3000         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
3001             return;
3002         }
3003         var files = Array.prototype.slice.call(this.selectorEl.dom.files);
3004         this.selectorEl.dom.value  = '';// hopefully reset..
3005         
3006         this.fireEvent('uploaded', this,  files );
3007         
3008     },
3009     
3010        
3011    
3012     
3013     /**
3014      * addCard - add an Attachment to the uploader
3015      * @param data - the data about the image to upload
3016      *
3017      * {
3018           id : 123
3019           title : "Title of file",
3020           is_uploaded : false,
3021           src : "http://.....",
3022           srcfile : { the File upload object },
3023           mimetype : file.type,
3024           preview : false,
3025           is_deleted : 0
3026           .. any other data...
3027         }
3028      *
3029      * 
3030     */
3031      
3032     reset: function()
3033     {
3034          
3035          this.selectorEl
3036     } 
3037     
3038     
3039     
3040     
3041 });
3042  /*
3043  * - LGPL
3044  *
3045  * image
3046  * 
3047  */
3048
3049
3050 /**
3051  * @class Roo.bootstrap.Img
3052  * @extends Roo.bootstrap.Component
3053  * Bootstrap Img class
3054  * @cfg {Boolean} imgResponsive false | true
3055  * @cfg {String} border rounded | circle | thumbnail
3056  * @cfg {String} src image source
3057  * @cfg {String} alt image alternative text
3058  * @cfg {String} href a tag href
3059  * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
3060  * @cfg {String} xsUrl xs image source
3061  * @cfg {String} smUrl sm image source
3062  * @cfg {String} mdUrl md image source
3063  * @cfg {String} lgUrl lg image source
3064  * @cfg {Boolean} backgroundContain (use style background and contain image in content)
3065  * 
3066  * @constructor
3067  * Create a new Input
3068  * @param {Object} config The config object
3069  */
3070
3071 Roo.bootstrap.Img = function(config){
3072     Roo.bootstrap.Img.superclass.constructor.call(this, config);
3073     
3074     this.addEvents({
3075         // img events
3076         /**
3077          * @event click
3078          * The img click event for the img.
3079          * @param {Roo.EventObject} e
3080          */
3081         "click" : true,
3082         /**
3083          * @event load
3084          * The when any image loads
3085          * @param {Roo.EventObject} e
3086          */
3087         "load" : true
3088     });
3089 };
3090
3091 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
3092     
3093     imgResponsive: true,
3094     border: '',
3095     src: 'about:blank',
3096     href: false,
3097     target: false,
3098     xsUrl: '',
3099     smUrl: '',
3100     mdUrl: '',
3101     lgUrl: '',
3102     backgroundContain : false,
3103
3104     getAutoCreate : function()
3105     {   
3106         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3107             return this.createSingleImg();
3108         }
3109         
3110         var cfg = {
3111             tag: 'div',
3112             cls: 'roo-image-responsive-group',
3113             cn: []
3114         };
3115         var _this = this;
3116         
3117         Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
3118             
3119             if(!_this[size + 'Url']){
3120                 return;
3121             }
3122             
3123             var img = {
3124                 tag: 'img',
3125                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
3126                 html: _this.html || cfg.html,
3127                 src: _this[size + 'Url']
3128             };
3129             
3130             img.cls += ' roo-image-responsive-' + size;
3131             
3132             var s = ['xs', 'sm', 'md', 'lg'];
3133             
3134             s.splice(s.indexOf(size), 1);
3135             
3136             Roo.each(s, function(ss){
3137                 img.cls += ' hidden-' + ss;
3138             });
3139             
3140             if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
3141                 cfg.cls += ' img-' + _this.border;
3142             }
3143             
3144             if(_this.alt){
3145                 cfg.alt = _this.alt;
3146             }
3147             
3148             if(_this.href){
3149                 var a = {
3150                     tag: 'a',
3151                     href: _this.href,
3152                     cn: [
3153                         img
3154                     ]
3155                 };
3156
3157                 if(this.target){
3158                     a.target = _this.target;
3159                 }
3160             }
3161             
3162             cfg.cn.push((_this.href) ? a : img);
3163             
3164         });
3165         
3166         return cfg;
3167     },
3168     
3169     createSingleImg : function()
3170     {
3171         var cfg = {
3172             tag: 'img',
3173             cls: (this.imgResponsive) ? 'img-responsive' : '',
3174             html : null,
3175             src : Roo.BLANK_IMAGE_URL  // just incase src get's set to undefined?!?
3176         };
3177         
3178         if (this.backgroundContain) {
3179             cfg.cls += ' background-contain';
3180         }
3181         
3182         cfg.html = this.html || cfg.html;
3183         
3184         if (this.backgroundContain) {
3185             cfg.style="background-image: url(" + this.src + ')';
3186         } else {
3187             cfg.src = this.src || cfg.src;
3188         }
3189         
3190         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
3191             cfg.cls += ' img-' + this.border;
3192         }
3193         
3194         if(this.alt){
3195             cfg.alt = this.alt;
3196         }
3197         
3198         if(this.href){
3199             var a = {
3200                 tag: 'a',
3201                 href: this.href,
3202                 cn: [
3203                     cfg
3204                 ]
3205             };
3206             
3207             if(this.target){
3208                 a.target = this.target;
3209             }
3210             
3211         }
3212         
3213         return (this.href) ? a : cfg;
3214     },
3215     
3216     initEvents: function() 
3217     {
3218         if(!this.href){
3219             this.el.on('click', this.onClick, this);
3220         }
3221         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3222             this.el.on('load', this.onImageLoad, this);
3223         } else {
3224             // not sure if this works.. not tested
3225             this.el.select('img', true).on('load', this.onImageLoad, this);
3226         }
3227         
3228     },
3229     
3230     onClick : function(e)
3231     {
3232         Roo.log('img onclick');
3233         this.fireEvent('click', this, e);
3234     },
3235     onImageLoad: function(e)
3236     {
3237         Roo.log('img load');
3238         this.fireEvent('load', this, e);
3239     },
3240     
3241     /**
3242      * Sets the url of the image - used to update it
3243      * @param {String} url the url of the image
3244      */
3245     
3246     setSrc : function(url)
3247     {
3248         this.src =  url;
3249         
3250         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3251             if (this.backgroundContain) {
3252                 this.el.dom.style.backgroundImage =  'url(' + url + ')';
3253             } else {
3254                 this.el.dom.src =  url;
3255             }
3256             return;
3257         }
3258         
3259         this.el.select('img', true).first().dom.src =  url;
3260     }
3261     
3262     
3263    
3264 });
3265
3266  /*
3267  * - LGPL
3268  *
3269  * image
3270  * 
3271  */
3272
3273
3274 /**
3275  * @class Roo.bootstrap.Link
3276  * @extends Roo.bootstrap.Component
3277  * @children Roo.bootstrap.Component
3278  * Bootstrap Link Class (eg. '<a href>')
3279  
3280  * @cfg {String} alt image alternative text
3281  * @cfg {String} href a tag href
3282  * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
3283  * @cfg {String} html the content of the link.
3284  * @cfg {String} anchor name for the anchor link
3285  * @cfg {String} fa - favicon
3286
3287  * @cfg {Boolean} preventDefault (true | false) default false
3288
3289  * 
3290  * @constructor
3291  * Create a new Input
3292  * @param {Object} config The config object
3293  */
3294
3295 Roo.bootstrap.Link = function(config){
3296     Roo.bootstrap.Link.superclass.constructor.call(this, config);
3297     
3298     this.addEvents({
3299         // img events
3300         /**
3301          * @event click
3302          * The img click event for the img.
3303          * @param {Roo.EventObject} e
3304          */
3305         "click" : true
3306     });
3307 };
3308
3309 Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component,  {
3310     
3311     href: false,
3312     target: false,
3313     preventDefault: false,
3314     anchor : false,
3315     alt : false,
3316     fa: false,
3317
3318
3319     getAutoCreate : function()
3320     {
3321         var html = this.html || '';
3322         
3323         if (this.fa !== false) {
3324             html = '<i class="fa fa-' + this.fa + '"></i>';
3325         }
3326         var cfg = {
3327             tag: 'a'
3328         };
3329         // anchor's do not require html/href...
3330         if (this.anchor === false) {
3331             cfg.html = html;
3332             cfg.href = this.href || '#';
3333         } else {
3334             cfg.name = this.anchor;
3335             if (this.html !== false || this.fa !== false) {
3336                 cfg.html = html;
3337             }
3338             if (this.href !== false) {
3339                 cfg.href = this.href;
3340             }
3341         }
3342         
3343         if(this.alt !== false){
3344             cfg.alt = this.alt;
3345         }
3346         
3347         
3348         if(this.target !== false) {
3349             cfg.target = this.target;
3350         }
3351         
3352         return cfg;
3353     },
3354     
3355     initEvents: function() {
3356         
3357         if(!this.href || this.preventDefault){
3358             this.el.on('click', this.onClick, this);
3359         }
3360     },
3361     
3362     onClick : function(e)
3363     {
3364         if(this.preventDefault){
3365             e.preventDefault();
3366         }
3367         //Roo.log('img onclick');
3368         this.fireEvent('click', this, e);
3369     }
3370    
3371 });
3372
3373  /*
3374  * - LGPL
3375  *
3376  * header
3377  * 
3378  */
3379
3380 /**
3381  * @class Roo.bootstrap.Header
3382  * @extends Roo.bootstrap.Component
3383  * @children Roo.bootstrap.Component
3384  * Bootstrap Header class
3385  *
3386  * 
3387  * @cfg {String} html content of header
3388  * @cfg {Number} level (1|2|3|4|5|6) default 1
3389  * 
3390  * @constructor
3391  * Create a new Header
3392  * @param {Object} config The config object
3393  */
3394
3395
3396 Roo.bootstrap.Header  = function(config){
3397     Roo.bootstrap.Header.superclass.constructor.call(this, config);
3398 };
3399
3400 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
3401     
3402     //href : false,
3403     html : false,
3404     level : 1,
3405     
3406     
3407     
3408     getAutoCreate : function(){
3409         
3410         
3411         
3412         var cfg = {
3413             tag: 'h' + (1 *this.level),
3414             html: this.html || ''
3415         } ;
3416         
3417         return cfg;
3418     }
3419    
3420 });
3421
3422  
3423
3424  /**
3425  * @class Roo.bootstrap.MenuMgr
3426  * @licence LGPL
3427  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
3428  * @static
3429  */
3430 Roo.bootstrap.menu.Manager = function(){
3431    var menus, active, groups = {}, attached = false, lastShow = new Date();
3432
3433    // private - called when first menu is created
3434    function init(){
3435        menus = {};
3436        active = new Roo.util.MixedCollection();
3437        Roo.get(document).addKeyListener(27, function(){
3438            if(active.length > 0){
3439                hideAll();
3440            }
3441        });
3442    }
3443
3444    // private
3445    function hideAll(){
3446        if(active && active.length > 0){
3447            var c = active.clone();
3448            c.each(function(m){
3449                m.hide();
3450            });
3451        }
3452    }
3453
3454    // private
3455    function onHide(m){
3456        active.remove(m);
3457        if(active.length < 1){
3458            Roo.get(document).un("mouseup", onMouseDown);
3459             
3460            attached = false;
3461        }
3462    }
3463
3464    // private
3465    function onShow(m){
3466        var last = active.last();
3467        lastShow = new Date();
3468        active.add(m);
3469        if(!attached){
3470           Roo.get(document).on("mouseup", onMouseDown);
3471            
3472            attached = true;
3473        }
3474        if(m.parentMenu){
3475           //m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
3476           m.parentMenu.activeChild = m;
3477        }else if(last && last.isVisible()){
3478           //m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
3479        }
3480    }
3481
3482    // private
3483    function onBeforeHide(m){
3484        if(m.activeChild){
3485            m.activeChild.hide();
3486        }
3487        if(m.autoHideTimer){
3488            clearTimeout(m.autoHideTimer);
3489            delete m.autoHideTimer;
3490        }
3491    }
3492
3493    // private
3494    function onBeforeShow(m){
3495        var pm = m.parentMenu;
3496        if(!pm && !m.allowOtherMenus){
3497            hideAll();
3498        }else if(pm && pm.activeChild && active != m){
3499            pm.activeChild.hide();
3500        }
3501    }
3502
3503    // private this should really trigger on mouseup..
3504    function onMouseDown(e){
3505         Roo.log("on Mouse Up");
3506         
3507         if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".dropdown-menu") && !e.getTarget('.user-menu')){
3508             Roo.log("MenuManager hideAll");
3509             hideAll();
3510             e.stopEvent();
3511         }
3512         
3513         
3514    }
3515
3516    // private
3517    function onBeforeCheck(mi, state){
3518        if(state){
3519            var g = groups[mi.group];
3520            for(var i = 0, l = g.length; i < l; i++){
3521                if(g[i] != mi){
3522                    g[i].setChecked(false);
3523                }
3524            }
3525        }
3526    }
3527
3528    return {
3529
3530        /**
3531         * Hides all menus that are currently visible
3532         */
3533        hideAll : function(){
3534             hideAll();  
3535        },
3536
3537        // private
3538        register : function(menu){
3539            if(!menus){
3540                init();
3541            }
3542            menus[menu.id] = menu;
3543            menu.on("beforehide", onBeforeHide);
3544            menu.on("hide", onHide);
3545            menu.on("beforeshow", onBeforeShow);
3546            menu.on("show", onShow);
3547            var g = menu.group;
3548            if(g && menu.events["checkchange"]){
3549                if(!groups[g]){
3550                    groups[g] = [];
3551                }
3552                groups[g].push(menu);
3553                menu.on("checkchange", onCheck);
3554            }
3555        },
3556
3557         /**
3558          * Returns a {@link Roo.menu.Menu} object
3559          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
3560          * be used to generate and return a new Menu instance.
3561          */
3562        get : function(menu){
3563            if(typeof menu == "string"){ // menu id
3564                return menus[menu];
3565            }else if(menu.events){  // menu instance
3566                return menu;
3567            }
3568            /*else if(typeof menu.length == 'number'){ // array of menu items?
3569                return new Roo.bootstrap.Menu({items:menu});
3570            }else{ // otherwise, must be a config
3571                return new Roo.bootstrap.Menu(menu);
3572            }
3573            */
3574            return false;
3575        },
3576
3577        // private
3578        unregister : function(menu){
3579            delete menus[menu.id];
3580            menu.un("beforehide", onBeforeHide);
3581            menu.un("hide", onHide);
3582            menu.un("beforeshow", onBeforeShow);
3583            menu.un("show", onShow);
3584            var g = menu.group;
3585            if(g && menu.events["checkchange"]){
3586                groups[g].remove(menu);
3587                menu.un("checkchange", onCheck);
3588            }
3589        },
3590
3591        // private
3592        registerCheckable : function(menuItem){
3593            var g = menuItem.group;
3594            if(g){
3595                if(!groups[g]){
3596                    groups[g] = [];
3597                }
3598                groups[g].push(menuItem);
3599                menuItem.on("beforecheckchange", onBeforeCheck);
3600            }
3601        },
3602
3603        // private
3604        unregisterCheckable : function(menuItem){
3605            var g = menuItem.group;
3606            if(g){
3607                groups[g].remove(menuItem);
3608                menuItem.un("beforecheckchange", onBeforeCheck);
3609            }
3610        }
3611    };
3612 }(); 
3613 /**
3614  * @class Roo.bootstrap.menu.Menu
3615  * @extends Roo.bootstrap.Component
3616  * @licence LGPL
3617  * @children Roo.bootstrap.menu.Item Roo.bootstrap.menu.Separator
3618  * @parent none
3619  * Bootstrap Menu class - container for MenuItems - normally has to be added to a object that supports the menu property
3620  * 
3621  * @cfg {String} type (dropdown|treeview|submenu) type of menu
3622  * @cfg {bool} hidden  if the menu should be hidden when rendered.
3623  * @cfg {bool} stopEvent (true|false)  Stop event after trigger press (default true)
3624  * @cfg {bool} isLink (true|false)  the menu has link disable auto expand and collaspe (default false)
3625 * @cfg {bool} hideTrigger (true|false)  default false - hide the carret for trigger.
3626 * @cfg {String} align  default tl-bl? == below  - how the menu should be aligned. 
3627  
3628  * @constructor
3629  * Create a new Menu
3630  * @param {Object} config The config objectQ
3631  */
3632
3633
3634 Roo.bootstrap.menu.Menu = function(config){
3635     
3636     if (config.type == 'treeview') {
3637         // normally menu's are drawn attached to the document to handle layering etc..
3638         // however treeview (used by the docs menu is drawn into the parent element)
3639         this.container_method = 'getChildContainer'; 
3640     }
3641     
3642     Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
3643     if (this.registerMenu && this.type != 'treeview')  {
3644         Roo.bootstrap.menu.Manager.register(this);
3645     }
3646     
3647     
3648     this.addEvents({
3649         /**
3650          * @event beforeshow
3651          * Fires before this menu is displayed (return false to block)
3652          * @param {Roo.menu.Menu} this
3653          */
3654         beforeshow : true,
3655         /**
3656          * @event beforehide
3657          * Fires before this menu is hidden (return false to block)
3658          * @param {Roo.menu.Menu} this
3659          */
3660         beforehide : true,
3661         /**
3662          * @event show
3663          * Fires after this menu is displayed
3664          * @param {Roo.menu.Menu} this
3665          */
3666         show : true,
3667         /**
3668          * @event hide
3669          * Fires after this menu is hidden
3670          * @param {Roo.menu.Menu} this
3671          */
3672         hide : true,
3673         /**
3674          * @event click
3675          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
3676          * @param {Roo.menu.Menu} this
3677          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3678          * @param {Roo.EventObject} e
3679          */
3680         click : true,
3681         /**
3682          * @event mouseover
3683          * Fires when the mouse is hovering over this menu
3684          * @param {Roo.menu.Menu} this
3685          * @param {Roo.EventObject} e
3686          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3687          */
3688         mouseover : true,
3689         /**
3690          * @event mouseout
3691          * Fires when the mouse exits this menu
3692          * @param {Roo.menu.Menu} this
3693          * @param {Roo.EventObject} e
3694          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3695          */
3696         mouseout : true,
3697         /**
3698          * @event itemclick
3699          * Fires when a menu item contained in this menu is clicked
3700          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
3701          * @param {Roo.EventObject} e
3702          */
3703         itemclick: true
3704     });
3705     this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
3706 };
3707
3708 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
3709     
3710    /// html : false,
3711    
3712     triggerEl : false,  // is this set by component builder? -- it should really be fetched from parent()???
3713     type: false,
3714     /**
3715      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
3716      */
3717     registerMenu : true,
3718     
3719     menuItems :false, // stores the menu items..
3720     
3721     hidden:true,
3722         
3723     parentMenu : false,
3724     
3725     stopEvent : true,
3726     
3727     isLink : false,
3728     
3729     container_method : 'getDocumentBody', // so the menu is rendered on the body and zIndex works.
3730     
3731     hideTrigger : false,
3732     
3733     align : 'tl-bl?',
3734     
3735     
3736     getChildContainer : function() {
3737         return this.el;  
3738     },
3739     
3740     getAutoCreate : function(){
3741          
3742         //if (['right'].indexOf(this.align)!==-1) {
3743         //    cfg.cn[1].cls += ' pull-right'
3744         //}
3745          
3746         var cfg = {
3747             tag : 'ul',
3748             cls : 'dropdown-menu shadow' ,
3749             style : 'z-index:1000'
3750             
3751         };
3752         
3753         if (this.type === 'submenu') {
3754             cfg.cls = 'submenu active';
3755         }
3756         if (this.type === 'treeview') {
3757             cfg.cls = 'treeview-menu';
3758         }
3759         
3760         return cfg;
3761     },
3762     initEvents : function() {
3763         
3764        // Roo.log("ADD event");
3765        // Roo.log(this.triggerEl.dom);
3766         if (this.triggerEl) {
3767             
3768             this.triggerEl.on('click', this.onTriggerClick, this);
3769             
3770             this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
3771             
3772             if (!this.hideTrigger) {
3773                 if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
3774                     // dropdown toggle on the 'a' in BS4?
3775                     this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
3776                 } else {
3777                     this.triggerEl.addClass('dropdown-toggle');
3778                 }
3779             }
3780         }
3781         
3782         if (Roo.isTouch) {
3783             this.el.on('touchstart'  , this.onTouch, this);
3784         }
3785         this.el.on('click' , this.onClick, this);
3786
3787         this.el.on("mouseover", this.onMouseOver, this);
3788         this.el.on("mouseout", this.onMouseOut, this);
3789         
3790     },
3791     
3792     findTargetItem : function(e)
3793     {
3794         var t = e.getTarget(".dropdown-menu-item", this.el,  true);
3795         if(!t){
3796             return false;
3797         }
3798         //Roo.log(t);         Roo.log(t.id);
3799         if(t && t.id){
3800             //Roo.log(this.menuitems);
3801             return this.menuitems.get(t.id);
3802             
3803             //return this.items.get(t.menuItemId);
3804         }
3805         
3806         return false;
3807     },
3808     
3809     onTouch : function(e) 
3810     {
3811         Roo.log("menu.onTouch");
3812         //e.stopEvent(); this make the user popdown broken
3813         this.onClick(e);
3814     },
3815     
3816     onClick : function(e)
3817     {
3818         Roo.log("menu.onClick");
3819         
3820         var t = this.findTargetItem(e);
3821         if(!t || t.isContainer){
3822             return;
3823         }
3824         Roo.log(e);
3825         /*
3826         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
3827             if(t == this.activeItem && t.shouldDeactivate(e)){
3828                 this.activeItem.deactivate();
3829                 delete this.activeItem;
3830                 return;
3831             }
3832             if(t.canActivate){
3833                 this.setActiveItem(t, true);
3834             }
3835             return;
3836             
3837             
3838         }
3839         */
3840        
3841         Roo.log('pass click event');
3842         
3843         t.onClick(e);
3844         
3845         this.fireEvent("click", this, t, e);
3846         
3847         var _this = this;
3848         
3849         if(!t.href.length || t.href == '#'){
3850             (function() { _this.hide(); }).defer(100);
3851         }
3852         
3853     },
3854     
3855     onMouseOver : function(e){
3856         var t  = this.findTargetItem(e);
3857         //Roo.log(t);
3858         //if(t){
3859         //    if(t.canActivate && !t.disabled){
3860         //        this.setActiveItem(t, true);
3861         //    }
3862         //}
3863         
3864         this.fireEvent("mouseover", this, e, t);
3865     },
3866     isVisible : function(){
3867         return !this.hidden;
3868     },
3869     onMouseOut : function(e){
3870         var t  = this.findTargetItem(e);
3871         
3872         //if(t ){
3873         //    if(t == this.activeItem && t.shouldDeactivate(e)){
3874         //        this.activeItem.deactivate();
3875         //        delete this.activeItem;
3876         //    }
3877         //}
3878         this.fireEvent("mouseout", this, e, t);
3879     },
3880     
3881     
3882     /**
3883      * Displays this menu relative to another element
3884      * @param {String/HTMLElement/Roo.Element} element The element to align to
3885      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
3886      * the element (defaults to this.defaultAlign)
3887      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3888      */
3889     show : function(el, pos, parentMenu)
3890     {
3891         if (false === this.fireEvent("beforeshow", this)) {
3892             Roo.log("show canceled");
3893             return;
3894         }
3895         this.parentMenu = parentMenu;
3896         if(!this.el){
3897             this.render();
3898         }
3899         this.el.addClass('show'); // show otherwise we do not know how big we are..
3900          
3901         var xy = this.el.getAlignToXY(el, pos);
3902         
3903         // bl-tl << left align  below
3904         // tl-bl << left align 
3905         
3906         if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
3907             // if it goes to far to the right.. -> align left.
3908             xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r'))
3909         }
3910         if(xy[0] < 0){
3911             // was left align - go right?
3912             xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l'))
3913         }
3914         
3915         // goes down the bottom
3916         if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() ||
3917            xy[1]  < 0 ){
3918             var a = this.align.replace('?', '').split('-');
3919             xy = this.el.getAlignToXY(el, a[1]  + '-' + a[0] + '?')
3920             
3921         }
3922         
3923         this.showAt(  xy , parentMenu, false);
3924     },
3925      /**
3926      * Displays this menu at a specific xy position
3927      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
3928      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3929      */
3930     showAt : function(xy, parentMenu, /* private: */_e){
3931         this.parentMenu = parentMenu;
3932         if(!this.el){
3933             this.render();
3934         }
3935         if(_e !== false){
3936             this.fireEvent("beforeshow", this);
3937             //xy = this.el.adjustForConstraints(xy);
3938         }
3939         
3940         //this.el.show();
3941         this.hideMenuItems();
3942         this.hidden = false;
3943         if (this.triggerEl) {
3944             this.triggerEl.addClass('open');
3945         }
3946         
3947         this.el.addClass('show');
3948         
3949         
3950         
3951         // reassign x when hitting right
3952         
3953         // reassign y when hitting bottom
3954         
3955         // but the list may align on trigger left or trigger top... should it be a properity?
3956         
3957         if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
3958             this.el.setXY(xy);
3959         }
3960         
3961         this.focus();
3962         this.fireEvent("show", this);
3963     },
3964     
3965     focus : function(){
3966         return;
3967         if(!this.hidden){
3968             this.doFocus.defer(50, this);
3969         }
3970     },
3971
3972     doFocus : function(){
3973         if(!this.hidden){
3974             this.focusEl.focus();
3975         }
3976     },
3977
3978     /**
3979      * Hides this menu and optionally all parent menus
3980      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
3981      */
3982     hide : function(deep)
3983     {
3984         if (false === this.fireEvent("beforehide", this)) {
3985             Roo.log("hide canceled");
3986             return;
3987         }
3988         this.hideMenuItems();
3989         if(this.el && this.isVisible()){
3990            
3991             if(this.activeItem){
3992                 this.activeItem.deactivate();
3993                 this.activeItem = null;
3994             }
3995             if (this.triggerEl) {
3996                 this.triggerEl.removeClass('open');
3997             }
3998             
3999             this.el.removeClass('show');
4000             this.hidden = true;
4001             this.fireEvent("hide", this);
4002         }
4003         if(deep === true && this.parentMenu){
4004             this.parentMenu.hide(true);
4005         }
4006     },
4007     
4008     onTriggerClick : function(e)
4009     {
4010         Roo.log('trigger click');
4011         
4012         var target = e.getTarget();
4013         
4014         Roo.log(target.nodeName.toLowerCase());
4015         
4016         if(target.nodeName.toLowerCase() === 'i'){
4017             e.preventDefault();
4018         }
4019         
4020     },
4021     
4022     onTriggerPress  : function(e)
4023     {
4024         Roo.log('trigger press');
4025         //Roo.log(e.getTarget());
4026        // Roo.log(this.triggerEl.dom);
4027        
4028         // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
4029         var pel = Roo.get(e.getTarget());
4030         if (pel.findParent('.dropdown-menu') || pel.findParent('.treeview-menu') ) {
4031             Roo.log('is treeview or dropdown?');
4032             return;
4033         }
4034         
4035         if(e.getTarget().nodeName.toLowerCase() !== 'i' && this.isLink){
4036             return;
4037         }
4038         
4039         if (this.isVisible()) {
4040             Roo.log('hide');
4041             this.hide();
4042         } else {
4043             Roo.log('show');
4044             
4045             this.show(this.triggerEl, this.align, false);
4046         }
4047         
4048         if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
4049             e.stopEvent();
4050         }
4051         
4052     },
4053        
4054     
4055     hideMenuItems : function()
4056     {
4057         Roo.log("hide Menu Items");
4058         if (!this.el) { 
4059             return;
4060         }
4061         
4062         this.el.select('.open',true).each(function(aa) {
4063             
4064             aa.removeClass('open');
4065          
4066         });
4067     },
4068     addxtypeChild : function (tree, cntr) {
4069         var comp= Roo.bootstrap.menu.Menu.superclass.addxtypeChild.call(this, tree, cntr);
4070           
4071         this.menuitems.add(comp);
4072         return comp;
4073
4074     },
4075     getEl : function()
4076     {
4077         Roo.log(this.el);
4078         return this.el;
4079     },
4080     
4081     clear : function()
4082     {
4083         this.getEl().dom.innerHTML = '';
4084         this.menuitems.clear();
4085     }
4086 });
4087
4088  
4089  /**
4090  * @class Roo.bootstrap.menu.Item
4091  * @extends Roo.bootstrap.Component
4092  * @children  Roo.bootstrap.Button Roo.bootstrap.ButtonUploader Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Container
4093  * @parent Roo.bootstrap.menu.Menu
4094  * @licence LGPL
4095  * Bootstrap MenuItem class
4096  * 
4097  * @cfg {String} html the menu label
4098  * @cfg {String} href the link
4099  * @cfg {Boolean} preventDefault do not trigger A href on clicks (default false).
4100  * @cfg {Boolean} isContainer is it a container - just returns a drop down item..
4101  * @cfg {Boolean} active  used on sidebars to highlight active itesm
4102  * @cfg {String} fa favicon to show on left of menu item.
4103  * @cfg {Roo.bootsrap.Menu} menu the child menu.
4104  * 
4105  * 
4106  * @constructor
4107  * Create a new MenuItem
4108  * @param {Object} config The config object
4109  */
4110
4111
4112 Roo.bootstrap.menu.Item = function(config){
4113     Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
4114     this.addEvents({
4115         // raw events
4116         /**
4117          * @event click
4118          * The raw click event for the entire grid.
4119          * @param {Roo.bootstrap.menu.Item} this
4120          * @param {Roo.EventObject} e
4121          */
4122         "click" : true
4123     });
4124 };
4125
4126 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
4127     
4128     href : false,
4129     html : false,
4130     preventDefault: false,
4131     isContainer : false,
4132     active : false,
4133     fa: false,
4134     
4135     getAutoCreate : function(){
4136         
4137         if(this.isContainer){
4138             return {
4139                 tag: 'li',
4140                 cls: 'dropdown-menu-item '
4141             };
4142         }
4143         var ctag = {
4144             tag: 'span',
4145             html: 'Link'
4146         };
4147         
4148         var anc = {
4149             tag : 'a',
4150             cls : 'dropdown-item',
4151             href : '#',
4152             cn : [  ]
4153         };
4154         
4155         if (this.fa !== false) {
4156             anc.cn.push({
4157                 tag : 'i',
4158                 cls : 'fa fa-' + this.fa
4159             });
4160         }
4161         
4162         anc.cn.push(ctag);
4163         
4164         
4165         var cfg= {
4166             tag: 'li',
4167             cls: 'dropdown-menu-item',
4168             cn: [ anc ]
4169         };
4170         if (this.parent().type == 'treeview') {
4171             cfg.cls = 'treeview-menu';
4172         }
4173         if (this.active) {
4174             cfg.cls += ' active';
4175         }
4176         
4177         
4178         
4179         anc.href = this.href || cfg.cn[0].href ;
4180         ctag.html = this.html || cfg.cn[0].html ;
4181         return cfg;
4182     },
4183     
4184     initEvents: function()
4185     {
4186         if (this.parent().type == 'treeview') {
4187             this.el.select('a').on('click', this.onClick, this);
4188         }
4189         
4190         if (this.menu) {
4191             this.menu.parentType = this.xtype;
4192             this.menu.triggerEl = this.el;
4193             this.menu = this.addxtype(Roo.apply({}, this.menu));
4194         }
4195         
4196     },
4197     onClick : function(e)
4198     {
4199         //Roo.log('item on click ');
4200         
4201         if(this.href === false || this.preventDefault){
4202             e.preventDefault();
4203         }
4204         //this.parent().hideMenuItems();
4205         
4206         this.fireEvent('click', this, e);
4207     },
4208     getEl : function()
4209     {
4210         return this.el;
4211     } 
4212 });
4213
4214  
4215
4216  
4217
4218   
4219 /**
4220  * @class Roo.bootstrap.menu.Separator
4221  * @extends Roo.bootstrap.Component
4222  * @licence LGPL
4223  * @parent Roo.bootstrap.menu.Menu
4224  * Bootstrap Separator class
4225  * 
4226  * @constructor
4227  * Create a new Separator
4228  * @param {Object} config The config object
4229  */
4230
4231
4232 Roo.bootstrap.menu.Separator = function(config){
4233     Roo.bootstrap.menu.Separator.superclass.constructor.call(this, config);
4234 };
4235
4236 Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component,  {
4237     
4238     getAutoCreate : function(){
4239         var cfg = {
4240             tag : 'li',
4241             cls: 'dropdown-divider divider'
4242         };
4243         
4244         return cfg;
4245     }
4246    
4247 });
4248
4249  
4250
4251  
4252 /*
4253 * Licence: LGPL
4254 */
4255
4256 /**
4257  * @class Roo.bootstrap.Modal
4258  * @extends Roo.bootstrap.Component
4259  * @parent none builder
4260  * @children Roo.bootstrap.Component
4261  * Bootstrap Modal class
4262  * @cfg {String} title Title of dialog
4263  * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
4264  * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn
4265  * @cfg {Boolean} specificTitle default false
4266  * @cfg {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
4267  * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
4268  * @cfg {Boolean} animate default true
4269  * @cfg {Boolean} allow_close default true
4270  * @cfg {Boolean} fitwindow default false
4271  * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false
4272  * @cfg {Number} width fixed width - usefull for chrome extension only really.
4273  * @cfg {Number} height fixed height - usefull for chrome extension only really.
4274  * @cfg {String} size (sm|lg|xl) default empty
4275  * @cfg {Number} max_width set the max width of modal
4276  * @cfg {Boolean} editableTitle can the title be edited
4277
4278  *
4279  *
4280  * @constructor
4281  * Create a new Modal Dialog
4282  * @param {Object} config The config object
4283  */
4284
4285 Roo.bootstrap.Modal = function(config){
4286     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
4287     this.addEvents({
4288         // raw events
4289         /**
4290          * @event btnclick
4291          * The raw btnclick event for the button
4292          * @param {Roo.EventObject} e
4293          */
4294         "btnclick" : true,
4295         /**
4296          * @event resize
4297          * Fire when dialog resize
4298          * @param {Roo.bootstrap.Modal} this
4299          * @param {Roo.EventObject} e
4300          */
4301         "resize" : true,
4302         /**
4303          * @event titlechanged
4304          * Fire when the editable title has been changed
4305          * @param {Roo.bootstrap.Modal} this
4306          * @param {Roo.EventObject} value
4307          */
4308         "titlechanged" : true 
4309         
4310     });
4311     this.buttons = this.buttons || [];
4312
4313     if (this.tmpl) {
4314         this.tmpl = Roo.factory(this.tmpl);
4315     }
4316
4317 };
4318
4319 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
4320
4321     title : 'test dialog',
4322
4323     buttons : false,
4324
4325     // set on load...
4326
4327     html: false,
4328
4329     tmp: false,
4330
4331     specificTitle: false,
4332
4333     buttonPosition: 'right',
4334
4335     allow_close : true,
4336
4337     animate : true,
4338
4339     fitwindow: false,
4340     
4341      // private
4342     dialogEl: false,
4343     bodyEl:  false,
4344     footerEl:  false,
4345     titleEl:  false,
4346     closeEl:  false,
4347
4348     size: '',
4349     
4350     max_width: 0,
4351     
4352     max_height: 0,
4353     
4354     fit_content: false,
4355     editableTitle  : false,
4356
4357     onRender : function(ct, position)
4358     {
4359         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
4360
4361         if(!this.el){
4362             var cfg = Roo.apply({},  this.getAutoCreate());
4363             cfg.id = Roo.id();
4364             //if(!cfg.name){
4365             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
4366             //}
4367             //if (!cfg.name.length) {
4368             //    delete cfg.name;
4369            // }
4370             if (this.cls) {
4371                 cfg.cls += ' ' + this.cls;
4372             }
4373             if (this.style) {
4374                 cfg.style = this.style;
4375             }
4376             this.el = Roo.get(document.body).createChild(cfg, position);
4377         }
4378         //var type = this.el.dom.type;
4379
4380
4381         if(this.tabIndex !== undefined){
4382             this.el.dom.setAttribute('tabIndex', this.tabIndex);
4383         }
4384
4385         this.dialogEl = this.el.select('.modal-dialog',true).first();
4386         this.bodyEl = this.el.select('.modal-body',true).first();
4387         this.closeEl = this.el.select('.modal-header .close', true).first();
4388         this.headerEl = this.el.select('.modal-header',true).first();
4389         this.titleEl = this.el.select('.modal-title',true).first();
4390         this.footerEl = this.el.select('.modal-footer',true).first();
4391
4392         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
4393         
4394         //this.el.addClass("x-dlg-modal");
4395
4396         if (this.buttons.length) {
4397             Roo.each(this.buttons, function(bb) {
4398                 var b = Roo.apply({}, bb);
4399                 b.xns = b.xns || Roo.bootstrap;
4400                 b.xtype = b.xtype || 'Button';
4401                 if (typeof(b.listeners) == 'undefined') {
4402                     b.listeners = { click : this.onButtonClick.createDelegate(this)  };
4403                 }
4404
4405                 var btn = Roo.factory(b);
4406
4407                 btn.render(this.getButtonContainer());
4408
4409             },this);
4410         }
4411         // render the children.
4412         var nitems = [];
4413
4414         if(typeof(this.items) != 'undefined'){
4415             var items = this.items;
4416             delete this.items;
4417
4418             for(var i =0;i < items.length;i++) {
4419                 // we force children not to montor widnow resize  - as we do that for them.
4420                 items[i].monitorWindowResize = false;
4421                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
4422             }
4423         }
4424
4425         this.items = nitems;
4426
4427         // where are these used - they used to be body/close/footer
4428
4429
4430         this.initEvents();
4431         //this.el.addClass([this.fieldClass, this.cls]);
4432
4433     },
4434
4435     getAutoCreate : function()
4436     {
4437         // we will default to modal-body-overflow - might need to remove or make optional later.
4438         var bdy = {
4439                 cls : 'modal-body ' + (this.bodyOverflow ? 'overflow-auto' : ''), 
4440                 html : this.html || ''
4441         };
4442
4443         var title = {
4444             tag: 'h5',
4445             cls : 'modal-title',
4446             html : this.title
4447         };
4448
4449         if(this.specificTitle){ // WTF is this?
4450             title = this.title;
4451         }
4452
4453         var header = [];
4454         if (this.allow_close && Roo.bootstrap.version == 3) {
4455             header.push({
4456                 tag: 'button',
4457                 cls : 'close',
4458                 html : '&times'
4459             });
4460         }
4461
4462         header.push(title);
4463
4464         if (this.editableTitle) {
4465             header.push({
4466                 cls: 'form-control roo-editable-title d-none',
4467                 tag: 'input',
4468                 type: 'text'
4469             });
4470         }
4471         
4472         if (this.allow_close && Roo.bootstrap.version == 4) {
4473             header.push({
4474                 tag: 'button',
4475                 cls : 'close',
4476                 html : '&times'
4477             });
4478         }
4479         
4480         var size = '';
4481
4482         if(this.size.length){
4483             size = 'modal-' + this.size;
4484         }
4485         
4486         var footer = Roo.bootstrap.version == 3 ?
4487             {
4488                 cls : 'modal-footer',
4489                 cn : [
4490                     {
4491                         tag: 'div',
4492                         cls: 'btn-' + this.buttonPosition
4493                     }
4494                 ]
4495
4496             } :
4497             {  // BS4 uses mr-auto on left buttons....
4498                 cls : 'modal-footer'
4499             };
4500
4501             
4502
4503         
4504         
4505         var modal = {
4506             cls: "modal",
4507              cn : [
4508                 {
4509                     cls: "modal-dialog " + size,
4510                     cn : [
4511                         {
4512                             cls : "modal-content",
4513                             cn : [
4514                                 {
4515                                     cls : 'modal-header',
4516                                     cn : header
4517                                 },
4518                                 bdy,
4519                                 footer
4520                             ]
4521
4522                         }
4523                     ]
4524
4525                 }
4526             ]
4527         };
4528
4529         if(this.animate){
4530             modal.cls += ' fade';
4531         }
4532
4533         return modal;
4534
4535     },
4536     getChildContainer : function() {
4537
4538          return this.bodyEl;
4539
4540     },
4541     getButtonContainer : function() {
4542         
4543          return Roo.bootstrap.version == 4 ?
4544             this.el.select('.modal-footer',true).first()
4545             : this.el.select('.modal-footer div',true).first();
4546
4547     },
4548     initEvents : function()
4549     {
4550         if (this.allow_close) {
4551             this.closeEl.on('click', this.hide, this);
4552         }
4553         Roo.EventManager.onWindowResize(this.resize, this, true);
4554         if (this.editableTitle) {
4555             this.headerEditEl =  this.headerEl.select('.form-control',true).first();
4556             this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
4557             this.headerEditEl.on('keyup', function(e) {
4558                     if([  e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
4559                         this.toggleHeaderInput(false)
4560                     }
4561                 }, this);
4562             this.headerEditEl.on('blur', function(e) {
4563                 this.toggleHeaderInput(false)
4564             },this);
4565         }
4566
4567     },
4568   
4569
4570     resize : function()
4571     {
4572         this.maskEl.setSize(
4573             Roo.lib.Dom.getViewWidth(true),
4574             Roo.lib.Dom.getViewHeight(true)
4575         );
4576         
4577         if (this.fitwindow) {
4578             
4579            this.dialogEl.setStyle( { 'max-width' : '100%' });
4580             this.setSize(
4581                 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
4582                 this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
4583             );
4584             return;
4585         }
4586         
4587         if(this.max_width !== 0) {
4588             
4589             var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
4590             
4591             if(this.height) {
4592                 this.setSize(w, this.height);
4593                 return;
4594             }
4595             
4596             if(this.max_height) {
4597                 this.setSize(w,Math.min(
4598                     this.max_height,
4599                     Roo.lib.Dom.getViewportHeight(true) - 60
4600                 ));
4601                 
4602                 return;
4603             }
4604             
4605             if(!this.fit_content) {
4606                 this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60);
4607                 return;
4608             }
4609             
4610             this.setSize(w, Math.min(
4611                 60 +
4612                 this.headerEl.getHeight() + 
4613                 this.footerEl.getHeight() + 
4614                 this.getChildHeight(this.bodyEl.dom.childNodes),
4615                 Roo.lib.Dom.getViewportHeight(true) - 60)
4616             );
4617         }
4618         
4619     },
4620
4621     setSize : function(w,h)
4622     {
4623         if (!w && !h) {
4624             return;
4625         }
4626         
4627         this.resizeTo(w,h);
4628         // any layout/border etc.. resize..
4629         (function () {
4630             this.items.forEach( function(e) {
4631                 e.layout ? e.layout() : false;
4632
4633             });
4634         }).defer(100,this);
4635         
4636     },
4637
4638     show : function() {
4639
4640         if (!this.rendered) {
4641             this.render();
4642         }
4643         this.toggleHeaderInput(false);
4644         //this.el.setStyle('display', 'block');
4645         this.el.removeClass('hideing');
4646         this.el.dom.style.display='block';
4647         
4648         Roo.get(document.body).addClass('modal-open');
4649  
4650         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
4651             
4652             (function(){
4653                 this.el.addClass('show');
4654                 this.el.addClass('in');
4655             }).defer(50, this);
4656         }else{
4657             this.el.addClass('show');
4658             this.el.addClass('in');
4659         }
4660
4661         // not sure how we can show data in here..
4662         //if (this.tmpl) {
4663         //    this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
4664         //}
4665
4666         Roo.get(document.body).addClass("x-body-masked");
4667         
4668         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
4669         this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4670         this.maskEl.dom.style.display = 'block';
4671         this.maskEl.addClass('show');
4672         
4673         
4674         this.resize();
4675         
4676         this.fireEvent('show', this);
4677
4678         // set zindex here - otherwise it appears to be ignored...
4679         this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4680         
4681         
4682         // this is for children that are... layout.Border 
4683         (function () {
4684             this.items.forEach( function(e) {
4685                 e.layout ? e.layout() : false;
4686
4687             });
4688         }).defer(100,this);
4689
4690     },
4691     hide : function()
4692     {
4693         if(this.fireEvent("beforehide", this) !== false){
4694             
4695             this.maskEl.removeClass('show');
4696             
4697             this.maskEl.dom.style.display = '';
4698             Roo.get(document.body).removeClass("x-body-masked");
4699             this.el.removeClass('in');
4700             this.el.select('.modal-dialog', true).first().setStyle('transform','');
4701
4702             if(this.animate){ // why
4703                 this.el.addClass('hideing');
4704                 this.el.removeClass('show');
4705                 (function(){
4706                     if (!this.el.hasClass('hideing')) {
4707                         return; // it's been shown again...
4708                     }
4709                     
4710                     this.el.dom.style.display='';
4711
4712                     Roo.get(document.body).removeClass('modal-open');
4713                     this.el.removeClass('hideing');
4714                 }).defer(150,this);
4715                 
4716             }else{
4717                 this.el.removeClass('show');
4718                 this.el.dom.style.display='';
4719                 Roo.get(document.body).removeClass('modal-open');
4720
4721             }
4722             this.fireEvent('hide', this);
4723         }
4724     },
4725     isVisible : function()
4726     {
4727         
4728         return this.el.hasClass('show') && !this.el.hasClass('hideing');
4729         
4730     },
4731
4732     addButton : function(str, cb)
4733     {
4734
4735
4736         var b = Roo.apply({}, { html : str } );
4737         b.xns = b.xns || Roo.bootstrap;
4738         b.xtype = b.xtype || 'Button';
4739         if (typeof(b.listeners) == 'undefined') {
4740             b.listeners = { click : cb.createDelegate(this)  };
4741         }
4742
4743         var btn = Roo.factory(b);
4744
4745         btn.render(this.getButtonContainer());
4746
4747         return btn;
4748
4749     },
4750
4751     setDefaultButton : function(btn)
4752     {
4753         //this.el.select('.modal-footer').()
4754     },
4755
4756     resizeTo: function(w,h)
4757     {
4758         this.dialogEl.setWidth(w);
4759         
4760         var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30  
4761
4762         this.bodyEl.setHeight(h - diff);
4763         
4764         this.fireEvent('resize', this);
4765     },
4766     
4767     setContentSize  : function(w, h)
4768     {
4769
4770     },
4771     onButtonClick: function(btn,e)
4772     {
4773         //Roo.log([a,b,c]);
4774         this.fireEvent('btnclick', btn.name, e);
4775     },
4776      /**
4777      * Set the title of the Dialog
4778      * @param {String} str new Title
4779      */
4780     setTitle: function(str) {
4781         this.titleEl.dom.innerHTML = str;
4782         this.title = str;
4783     },
4784     /**
4785      * Set the body of the Dialog
4786      * @param {String} str new Title
4787      */
4788     setBody: function(str) {
4789         this.bodyEl.dom.innerHTML = str;
4790     },
4791     /**
4792      * Set the body of the Dialog using the template
4793      * @param {Obj} data - apply this data to the template and replace the body contents.
4794      */
4795     applyBody: function(obj)
4796     {
4797         if (!this.tmpl) {
4798             Roo.log("Error - using apply Body without a template");
4799             //code
4800         }
4801         this.tmpl.overwrite(this.bodyEl, obj);
4802     },
4803     
4804     getChildHeight : function(child_nodes)
4805     {
4806         if(
4807             !child_nodes ||
4808             child_nodes.length == 0
4809         ) {
4810             return 0;
4811         }
4812         
4813         var child_height = 0;
4814         
4815         for(var i = 0; i < child_nodes.length; i++) {
4816             
4817             /*
4818             * for modal with tabs...
4819             if(child_nodes[i].classList.contains('roo-layout-panel')) {
4820                 
4821                 var layout_childs = child_nodes[i].childNodes;
4822                 
4823                 for(var j = 0; j < layout_childs.length; j++) {
4824                     
4825                     if(layout_childs[j].classList.contains('roo-layout-panel-body')) {
4826                         
4827                         var layout_body_childs = layout_childs[j].childNodes;
4828                         
4829                         for(var k = 0; k < layout_body_childs.length; k++) {
4830                             
4831                             if(layout_body_childs[k].classList.contains('navbar')) {
4832                                 child_height += layout_body_childs[k].offsetHeight;
4833                                 continue;
4834                             }
4835                             
4836                             if(layout_body_childs[k].classList.contains('roo-layout-tabs-body')) {
4837                                 
4838                                 var layout_body_tab_childs = layout_body_childs[k].childNodes;
4839                                 
4840                                 for(var m = 0; m < layout_body_tab_childs.length; m++) {
4841                                     
4842                                     if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) {
4843                                         child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes);
4844                                         continue;
4845                                     }
4846                                     
4847                                 }
4848                                 
4849                             }
4850                             
4851                         }
4852                     }
4853                 }
4854                 continue;
4855             }
4856             */
4857             
4858             child_height += child_nodes[i].offsetHeight;
4859             // Roo.log(child_nodes[i].offsetHeight);
4860         }
4861         
4862         return child_height;
4863     },
4864     toggleHeaderInput : function(is_edit)
4865     {
4866         if (!this.editableTitle) {
4867             return; // not editable.
4868         }
4869         if (is_edit && this.is_header_editing) {
4870             return; // already editing..
4871         }
4872         if (is_edit) {
4873     
4874             this.headerEditEl.dom.value = this.title;
4875             this.headerEditEl.removeClass('d-none');
4876             this.headerEditEl.dom.focus();
4877             this.titleEl.addClass('d-none');
4878             
4879             this.is_header_editing = true;
4880             return
4881         }
4882         // flip back to not editing.
4883         this.title = this.headerEditEl.dom.value;
4884         this.headerEditEl.addClass('d-none');
4885         this.titleEl.removeClass('d-none');
4886         this.titleEl.dom.innerHTML = String.format('{0}', this.title);
4887         this.is_header_editing = false;
4888         this.fireEvent('titlechanged', this, this.title);
4889     
4890             
4891         
4892     }
4893
4894 });
4895
4896
4897 Roo.apply(Roo.bootstrap.Modal,  {
4898     /**
4899          * Button config that displays a single OK button
4900          * @type Object
4901          */
4902         OK :  [{
4903             name : 'ok',
4904             weight : 'primary',
4905             html : 'OK'
4906         }],
4907         /**
4908          * Button config that displays Yes and No buttons
4909          * @type Object
4910          */
4911         YESNO : [
4912             {
4913                 name  : 'no',
4914                 html : 'No'
4915             },
4916             {
4917                 name  :'yes',
4918                 weight : 'primary',
4919                 html : 'Yes'
4920             }
4921         ],
4922
4923         /**
4924          * Button config that displays OK and Cancel buttons
4925          * @type Object
4926          */
4927         OKCANCEL : [
4928             {
4929                name : 'cancel',
4930                 html : 'Cancel'
4931             },
4932             {
4933                 name : 'ok',
4934                 weight : 'primary',
4935                 html : 'OK'
4936             }
4937         ],
4938         /**
4939          * Button config that displays Yes, No and Cancel buttons
4940          * @type Object
4941          */
4942         YESNOCANCEL : [
4943             {
4944                 name : 'yes',
4945                 weight : 'primary',
4946                 html : 'Yes'
4947             },
4948             {
4949                 name : 'no',
4950                 html : 'No'
4951             },
4952             {
4953                 name : 'cancel',
4954                 html : 'Cancel'
4955             }
4956         ],
4957         
4958         zIndex : 10001
4959 });
4960
4961 /*
4962  * - LGPL
4963  *
4964  * messagebox - can be used as a replace
4965  * 
4966  */
4967 /**
4968  * @class Roo.MessageBox
4969  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
4970  * Example usage:
4971  *<pre><code>
4972 // Basic alert:
4973 Roo.Msg.alert('Status', 'Changes saved successfully.');
4974
4975 // Prompt for user data:
4976 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
4977     if (btn == 'ok'){
4978         // process text value...
4979     }
4980 });
4981
4982 // Show a dialog using config options:
4983 Roo.Msg.show({
4984    title:'Save Changes?',
4985    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
4986    buttons: Roo.Msg.YESNOCANCEL,
4987    fn: processResult,
4988    animEl: 'elId'
4989 });
4990 </code></pre>
4991  * @static
4992  */
4993 Roo.bootstrap.MessageBox = function(){
4994     var dlg, opt, mask, waitTimer;
4995     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
4996     var buttons, activeTextEl, bwidth;
4997
4998     
4999     // private
5000     var handleButton = function(button){
5001         dlg.hide();
5002         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
5003     };
5004
5005     // private
5006     var handleHide = function(){
5007         if(opt && opt.cls){
5008             dlg.el.removeClass(opt.cls);
5009         }
5010         //if(waitTimer){
5011         //    Roo.TaskMgr.stop(waitTimer);
5012         //    waitTimer = null;
5013         //}
5014     };
5015
5016     // private
5017     var updateButtons = function(b){
5018         var width = 0;
5019         if(!b){
5020             buttons["ok"].hide();
5021             buttons["cancel"].hide();
5022             buttons["yes"].hide();
5023             buttons["no"].hide();
5024             dlg.footerEl.hide();
5025             
5026             return width;
5027         }
5028         dlg.footerEl.show();
5029         for(var k in buttons){
5030             if(typeof buttons[k] != "function"){
5031                 if(b[k]){
5032                     buttons[k].show();
5033                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.bootstrap.MessageBox.buttonText[k]);
5034                     width += buttons[k].el.getWidth()+15;
5035                 }else{
5036                     buttons[k].hide();
5037                 }
5038             }
5039         }
5040         return width;
5041     };
5042
5043     // private
5044     var handleEsc = function(d, k, e){
5045         if(opt && opt.closable !== false){
5046             dlg.hide();
5047         }
5048         if(e){
5049             e.stopEvent();
5050         }
5051     };
5052
5053     return {
5054         /**
5055          * Returns a reference to the underlying {@link Roo.BasicDialog} element
5056          * @return {Roo.BasicDialog} The BasicDialog element
5057          */
5058         getDialog : function(){
5059            if(!dlg){
5060                 dlg = new Roo.bootstrap.Modal( {
5061                     //draggable: true,
5062                     //resizable:false,
5063                     //constraintoviewport:false,
5064                     //fixedcenter:true,
5065                     //collapsible : false,
5066                     //shim:true,
5067                     //modal: true,
5068                 //    width: 'auto',
5069                   //  height:100,
5070                     //buttonAlign:"center",
5071                     closeClick : function(){
5072                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
5073                             handleButton("no");
5074                         }else{
5075                             handleButton("cancel");
5076                         }
5077                     }
5078                 });
5079                 dlg.render();
5080                 dlg.on("hide", handleHide);
5081                 mask = dlg.mask;
5082                 //dlg.addKeyListener(27, handleEsc);
5083                 buttons = {};
5084                 this.buttons = buttons;
5085                 var bt = this.buttonText;
5086                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
5087                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
5088                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
5089                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
5090                 //Roo.log(buttons);
5091                 bodyEl = dlg.bodyEl.createChild({
5092
5093                     html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
5094                         '<textarea class="roo-mb-textarea"></textarea>' +
5095                         '<div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar">&#160;</div></div></div>'
5096                 });
5097                 msgEl = bodyEl.dom.firstChild;
5098                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
5099                 textboxEl.enableDisplayMode();
5100                 textboxEl.addKeyListener([10,13], function(){
5101                     if(dlg.isVisible() && opt && opt.buttons){
5102                         if(opt.buttons.ok){
5103                             handleButton("ok");
5104                         }else if(opt.buttons.yes){
5105                             handleButton("yes");
5106                         }
5107                     }
5108                 });
5109                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
5110                 textareaEl.enableDisplayMode();
5111                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
5112                 progressEl.enableDisplayMode();
5113                 
5114                 // This is supposed to be the progessElement.. but I think it's controlling the height of everything..
5115                 var pf = progressEl.dom.firstChild;
5116                 if (pf) {
5117                     pp = Roo.get(pf.firstChild);
5118                     pp.setHeight(pf.offsetHeight);
5119                 }
5120                 
5121             }
5122             return dlg;
5123         },
5124
5125         /**
5126          * Updates the message box body text
5127          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
5128          * the XHTML-compliant non-breaking space character '&amp;#160;')
5129          * @return {Roo.MessageBox} This message box
5130          */
5131         updateText : function(text)
5132         {
5133             if(!dlg.isVisible() && !opt.width){
5134                 dlg.dialogEl.setStyle({ 'max-width' : this.maxWidth});
5135                 // dlg.resizeTo(this.maxWidth, 100); // forcing the height breaks long alerts()
5136             }
5137             msgEl.innerHTML = text || '&#160;';
5138       
5139             var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
5140             //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
5141             var w = Math.max(
5142                     Math.min(opt.width || cw , this.maxWidth), 
5143                     Math.max(opt.minWidth || this.minWidth, bwidth)
5144             );
5145             if(opt.prompt){
5146                 activeTextEl.setWidth(w);
5147             }
5148             if(dlg.isVisible()){
5149                 dlg.fixedcenter = false;
5150             }
5151             // to big, make it scroll. = But as usual stupid IE does not support
5152             // !important..
5153             
5154             if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
5155                 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
5156                 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
5157             } else {
5158                 bodyEl.dom.style.height = '';
5159                 bodyEl.dom.style.overflowY = '';
5160             }
5161             if (cw > w) {
5162                 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
5163             } else {
5164                 bodyEl.dom.style.overflowX = '';
5165             }
5166             
5167             dlg.setContentSize(w, bodyEl.getHeight());
5168             if(dlg.isVisible()){
5169                 dlg.fixedcenter = true;
5170             }
5171             return this;
5172         },
5173
5174         /**
5175          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
5176          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
5177          * @param {Number} value Any number between 0 and 1 (e.g., .5)
5178          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
5179          * @return {Roo.MessageBox} This message box
5180          */
5181         updateProgress : function(value, text){
5182             if(text){
5183                 this.updateText(text);
5184             }
5185             
5186             if (pp) { // weird bug on my firefox - for some reason this is not defined
5187                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
5188                 pp.setHeight(Math.floor(progressEl.dom.firstChild.offsetHeight));
5189             }
5190             return this;
5191         },        
5192
5193         /**
5194          * Returns true if the message box is currently displayed
5195          * @return {Boolean} True if the message box is visible, else false
5196          */
5197         isVisible : function(){
5198             return dlg && dlg.isVisible();  
5199         },
5200
5201         /**
5202          * Hides the message box if it is displayed
5203          */
5204         hide : function(){
5205             if(this.isVisible()){
5206                 dlg.hide();
5207             }  
5208         },
5209
5210         /**
5211          * Displays a new message box, or reinitializes an existing message box, based on the config options
5212          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
5213          * The following config object properties are supported:
5214          * <pre>
5215 Property    Type             Description
5216 ----------  ---------------  ------------------------------------------------------------------------------------
5217 animEl            String/Element   An id or Element from which the message box should animate as it opens and
5218                                    closes (defaults to undefined)
5219 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
5220                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
5221 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
5222                                    progress and wait dialogs will ignore this property and always hide the
5223                                    close button as they can only be closed programmatically.
5224 cls               String           A custom CSS class to apply to the message box element
5225 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
5226                                    displayed (defaults to 75)
5227 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
5228                                    function will be btn (the name of the button that was clicked, if applicable,
5229                                    e.g. "ok"), and text (the value of the active text field, if applicable).
5230                                    Progress and wait dialogs will ignore this option since they do not respond to
5231                                    user actions and can only be closed programmatically, so any required function
5232                                    should be called by the same code after it closes the dialog.
5233 icon              String           A CSS class that provides a background image to be used as an icon for
5234                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
5235 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
5236 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
5237 modal             Boolean          False to allow user interaction with the page while the message box is
5238                                    displayed (defaults to true)
5239 msg               String           A string that will replace the existing message box body text (defaults
5240                                    to the XHTML-compliant non-breaking space character '&#160;')
5241 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
5242 progress          Boolean          True to display a progress bar (defaults to false)
5243 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
5244 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
5245 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
5246 title             String           The title text
5247 value             String           The string value to set into the active textbox element if displayed
5248 wait              Boolean          True to display a progress bar (defaults to false)
5249 width             Number           The width of the dialog in pixels
5250 </pre>
5251          *
5252          * Example usage:
5253          * <pre><code>
5254 Roo.Msg.show({
5255    title: 'Address',
5256    msg: 'Please enter your address:',
5257    width: 300,
5258    buttons: Roo.MessageBox.OKCANCEL,
5259    multiline: true,
5260    fn: saveAddress,
5261    animEl: 'addAddressBtn'
5262 });
5263 </code></pre>
5264          * @param {Object} config Configuration options
5265          * @return {Roo.MessageBox} This message box
5266          */
5267         show : function(options)
5268         {
5269             
5270             // this causes nightmares if you show one dialog after another
5271             // especially on callbacks..
5272              
5273             if(this.isVisible()){
5274                 
5275                 this.hide();
5276                 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
5277                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
5278                 Roo.log("New Dialog Message:" +  options.msg )
5279                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
5280                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
5281                 
5282             }
5283             var d = this.getDialog();
5284             opt = options;
5285             d.setTitle(opt.title || "&#160;");
5286             d.closeEl.setDisplayed(opt.closable !== false);
5287             activeTextEl = textboxEl;
5288             opt.prompt = opt.prompt || (opt.multiline ? true : false);
5289             if(opt.prompt){
5290                 if(opt.multiline){
5291                     textboxEl.hide();
5292                     textareaEl.show();
5293                     textareaEl.setHeight(typeof opt.multiline == "number" ?
5294                         opt.multiline : this.defaultTextHeight);
5295                     activeTextEl = textareaEl;
5296                 }else{
5297                     textboxEl.show();
5298                     textareaEl.hide();
5299                 }
5300             }else{
5301                 textboxEl.hide();
5302                 textareaEl.hide();
5303             }
5304             progressEl.setDisplayed(opt.progress === true);
5305             if (opt.progress) {
5306                 d.animate = false; // do not animate progress, as it may not have finished animating before we close it..
5307             }
5308             this.updateProgress(0);
5309             activeTextEl.dom.value = opt.value || "";
5310             if(opt.prompt){
5311                 dlg.setDefaultButton(activeTextEl);
5312             }else{
5313                 var bs = opt.buttons;
5314                 var db = null;
5315                 if(bs && bs.ok){
5316                     db = buttons["ok"];
5317                 }else if(bs && bs.yes){
5318                     db = buttons["yes"];
5319                 }
5320                 dlg.setDefaultButton(db);
5321             }
5322             bwidth = updateButtons(opt.buttons);
5323             this.updateText(opt.msg);
5324             if(opt.cls){
5325                 d.el.addClass(opt.cls);
5326             }
5327             d.proxyDrag = opt.proxyDrag === true;
5328             d.modal = opt.modal !== false;
5329             d.mask = opt.modal !== false ? mask : false;
5330             if(!d.isVisible()){
5331                 // force it to the end of the z-index stack so it gets a cursor in FF
5332                 document.body.appendChild(dlg.el.dom);
5333                 d.animateTarget = null;
5334                 d.show(options.animEl);
5335             }
5336             return this;
5337         },
5338
5339         /**
5340          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
5341          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
5342          * and closing the message box when the process is complete.
5343          * @param {String} title The title bar text
5344          * @param {String} msg The message box body text
5345          * @return {Roo.MessageBox} This message box
5346          */
5347         progress : function(title, msg){
5348             this.show({
5349                 title : title,
5350                 msg : msg,
5351                 buttons: false,
5352                 progress:true,
5353                 closable:false,
5354                 minWidth: this.minProgressWidth,
5355                 modal : true
5356             });
5357             return this;
5358         },
5359
5360         /**
5361          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
5362          * If a callback function is passed it will be called after the user clicks the button, and the
5363          * id of the button that was clicked will be passed as the only parameter to the callback
5364          * (could also be the top-right close button).
5365          * @param {String} title The title bar text
5366          * @param {String} msg The message box body text
5367          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5368          * @param {Object} scope (optional) The scope of the callback function
5369          * @return {Roo.MessageBox} This message box
5370          */
5371         alert : function(title, msg, fn, scope)
5372         {
5373             this.show({
5374                 title : title,
5375                 msg : msg,
5376                 buttons: this.OK,
5377                 fn: fn,
5378                 closable : false,
5379                 scope : scope,
5380                 modal : true
5381             });
5382             return this;
5383         },
5384
5385         /**
5386          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
5387          * interaction while waiting for a long-running process to complete that does not have defined intervals.
5388          * You are responsible for closing the message box when the process is complete.
5389          * @param {String} msg The message box body text
5390          * @param {String} title (optional) The title bar text
5391          * @return {Roo.MessageBox} This message box
5392          */
5393         wait : function(msg, title){
5394             this.show({
5395                 title : title,
5396                 msg : msg,
5397                 buttons: false,
5398                 closable:false,
5399                 progress:true,
5400                 modal:true,
5401                 width:300,
5402                 wait:true
5403             });
5404             waitTimer = Roo.TaskMgr.start({
5405                 run: function(i){
5406                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
5407                 },
5408                 interval: 1000
5409             });
5410             return this;
5411         },
5412
5413         /**
5414          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
5415          * If a callback function is passed it will be called after the user clicks either button, and the id of the
5416          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
5417          * @param {String} title The title bar text
5418          * @param {String} msg The message box body text
5419          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5420          * @param {Object} scope (optional) The scope of the callback function
5421          * @return {Roo.MessageBox} This message box
5422          */
5423         confirm : function(title, msg, fn, scope){
5424             this.show({
5425                 title : title,
5426                 msg : msg,
5427                 buttons: this.YESNO,
5428                 fn: fn,
5429                 scope : scope,
5430                 modal : true
5431             });
5432             return this;
5433         },
5434
5435         /**
5436          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
5437          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
5438          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
5439          * (could also be the top-right close button) and the text that was entered will be passed as the two
5440          * parameters to the callback.
5441          * @param {String} title The title bar text
5442          * @param {String} msg The message box body text
5443          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5444          * @param {Object} scope (optional) The scope of the callback function
5445          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
5446          * property, or the height in pixels to create the textbox (defaults to false / single-line)
5447          * @return {Roo.MessageBox} This message box
5448          */
5449         prompt : function(title, msg, fn, scope, multiline){
5450             this.show({
5451                 title : title,
5452                 msg : msg,
5453                 buttons: this.OKCANCEL,
5454                 fn: fn,
5455                 minWidth:250,
5456                 scope : scope,
5457                 prompt:true,
5458                 multiline: multiline,
5459                 modal : true
5460             });
5461             return this;
5462         },
5463
5464         /**
5465          * Button config that displays a single OK button
5466          * @type Object
5467          */
5468         OK : {ok:true},
5469         /**
5470          * Button config that displays Yes and No buttons
5471          * @type Object
5472          */
5473         YESNO : {yes:true, no:true},
5474         /**
5475          * Button config that displays OK and Cancel buttons
5476          * @type Object
5477          */
5478         OKCANCEL : {ok:true, cancel:true},
5479         /**
5480          * Button config that displays Yes, No and Cancel buttons
5481          * @type Object
5482          */
5483         YESNOCANCEL : {yes:true, no:true, cancel:true},
5484
5485         /**
5486          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
5487          * @type Number
5488          */
5489         defaultTextHeight : 75,
5490         /**
5491          * The maximum width in pixels of the message box (defaults to 600)
5492          * @type Number
5493          */
5494         maxWidth : 600,
5495         /**
5496          * The minimum width in pixels of the message box (defaults to 100)
5497          * @type Number
5498          */
5499         minWidth : 100,
5500         /**
5501          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
5502          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
5503          * @type Number
5504          */
5505         minProgressWidth : 250,
5506         /**
5507          * An object containing the default button text strings that can be overriden for localized language support.
5508          * Supported properties are: ok, cancel, yes and no.
5509          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
5510          * @type Object
5511          */
5512         buttonText : {
5513             ok : "OK",
5514             cancel : "Cancel",
5515             yes : "Yes",
5516             no : "No"
5517         }
5518     };
5519 }();
5520
5521 /**
5522  * Shorthand for {@link Roo.MessageBox}
5523  */
5524 Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
5525 Roo.Msg = Roo.Msg || Roo.MessageBox;
5526 /*
5527  * - LGPL
5528  *
5529  * navbar
5530  * 
5531  */
5532
5533 /**
5534  * @class Roo.bootstrap.nav.Bar
5535  * @extends Roo.bootstrap.Component
5536  * @abstract
5537  * Bootstrap Navbar class
5538
5539  * @constructor
5540  * Create a new Navbar
5541  * @param {Object} config The config object
5542  */
5543
5544
5545 Roo.bootstrap.nav.Bar = function(config){
5546     Roo.bootstrap.nav.Bar.superclass.constructor.call(this, config);
5547     this.addEvents({
5548         // raw events
5549         /**
5550          * @event beforetoggle
5551          * Fire before toggle the menu
5552          * @param {Roo.EventObject} e
5553          */
5554         "beforetoggle" : true
5555     });
5556 };
5557
5558 Roo.extend(Roo.bootstrap.nav.Bar, Roo.bootstrap.Component,  {
5559     
5560     
5561    
5562     // private
5563     navItems : false,
5564     loadMask : false,
5565     
5566     
5567     getAutoCreate : function(){
5568         
5569         
5570         throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
5571         
5572     },
5573     
5574     initEvents :function ()
5575     {
5576         //Roo.log(this.el.select('.navbar-toggle',true));
5577         this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
5578         
5579         var mark = {
5580             tag: "div",
5581             cls:"x-dlg-mask"
5582         };
5583         
5584         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
5585         
5586         var size = this.el.getSize();
5587         this.maskEl.setSize(size.width, size.height);
5588         this.maskEl.enableDisplayMode("block");
5589         this.maskEl.hide();
5590         
5591         if(this.loadMask){
5592             this.maskEl.show();
5593         }
5594     },
5595     
5596     
5597     getChildContainer : function()
5598     {
5599         if (this.el && this.el.select('.collapse').getCount()) {
5600             return this.el.select('.collapse',true).first();
5601         }
5602         
5603         return this.el;
5604     },
5605     
5606     mask : function()
5607     {
5608         this.maskEl.show();
5609     },
5610     
5611     unmask : function()
5612     {
5613         this.maskEl.hide();
5614     },
5615     onToggle : function()
5616     {
5617         
5618         if(this.fireEvent('beforetoggle', this) === false){
5619             return;
5620         }
5621         var ce = this.el.select('.navbar-collapse',true).first();
5622       
5623         if (!ce.hasClass('show')) {
5624            this.expand();
5625         } else {
5626             this.collapse();
5627         }
5628         
5629         
5630     
5631     },
5632     /**
5633      * Expand the navbar pulldown 
5634      */
5635     expand : function ()
5636     {
5637        
5638         var ce = this.el.select('.navbar-collapse',true).first();
5639         if (ce.hasClass('collapsing')) {
5640             return;
5641         }
5642         ce.dom.style.height = '';
5643                // show it...
5644         ce.addClass('in'); // old...
5645         ce.removeClass('collapse');
5646         ce.addClass('show');
5647         var h = ce.getHeight();
5648         Roo.log(h);
5649         ce.removeClass('show');
5650         // at this point we should be able to see it..
5651         ce.addClass('collapsing');
5652         
5653         ce.setHeight(0); // resize it ...
5654         ce.on('transitionend', function() {
5655             //Roo.log('done transition');
5656             ce.removeClass('collapsing');
5657             ce.addClass('show');
5658             ce.removeClass('collapse');
5659
5660             ce.dom.style.height = '';
5661         }, this, { single: true} );
5662         ce.setHeight(h);
5663         ce.dom.scrollTop = 0;
5664     },
5665     /**
5666      * Collapse the navbar pulldown 
5667      */
5668     collapse : function()
5669     {
5670          var ce = this.el.select('.navbar-collapse',true).first();
5671        
5672         if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
5673             // it's collapsed or collapsing..
5674             return;
5675         }
5676         ce.removeClass('in'); // old...
5677         ce.setHeight(ce.getHeight());
5678         ce.removeClass('show');
5679         ce.addClass('collapsing');
5680         
5681         ce.on('transitionend', function() {
5682             ce.dom.style.height = '';
5683             ce.removeClass('collapsing');
5684             ce.addClass('collapse');
5685         }, this, { single: true} );
5686         ce.setHeight(0);
5687     }
5688     
5689     
5690     
5691 });
5692
5693
5694
5695  
5696
5697  /*
5698  * - LGPL
5699  *
5700  * navbar
5701  * 
5702  */
5703
5704 /**
5705  * @class Roo.bootstrap.nav.Simplebar
5706  * @extends Roo.bootstrap.nav.Bar
5707  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
5708  * Bootstrap Sidebar class
5709  *
5710  * @cfg {Boolean} inverse is inverted color
5711  * 
5712  * @cfg {String} type (nav | pills | tabs)
5713  * @cfg {Boolean} arrangement stacked | justified
5714  * @cfg {String} align (left | right) alignment
5715  * 
5716  * @cfg {Boolean} main (true|false) main nav bar? default false
5717  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
5718  * 
5719  * @cfg {String} tag (header|footer|nav|div) default is nav 
5720
5721  * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light.
5722  * 
5723  * 
5724  * @constructor
5725  * Create a new Sidebar
5726  * @param {Object} config The config object
5727  */
5728
5729
5730 Roo.bootstrap.nav.Simplebar = function(config){
5731     Roo.bootstrap.nav.Simplebar.superclass.constructor.call(this, config);
5732 };
5733
5734 Roo.extend(Roo.bootstrap.nav.Simplebar, Roo.bootstrap.nav.Bar,  {
5735     
5736     inverse: false,
5737     
5738     type: false,
5739     arrangement: '',
5740     align : false,
5741     
5742     weight : 'light',
5743     
5744     main : false,
5745     
5746     
5747     tag : false,
5748     
5749     
5750     getAutoCreate : function(){
5751         
5752         
5753         var cfg = {
5754             tag : this.tag || 'div',
5755             cls : 'navbar roo-navbar-simple' //navbar-expand-lg ??
5756         };
5757         if (['light','white'].indexOf(this.weight) > -1) {
5758             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5759         }
5760         cfg.cls += ' bg-' + this.weight;
5761         
5762         if (this.inverse) {
5763             cfg.cls += ' navbar-inverse';
5764             
5765         }
5766         
5767         // i'm not actually sure these are really used - normally we add a navGroup to a navbar
5768         
5769         if (Roo.bootstrap.version == 4 && this.xtype == 'NavSimplebar') {
5770             return cfg;
5771         }
5772         
5773         
5774     
5775         
5776         cfg.cn = [
5777             {
5778                 cls: 'nav nav-' + this.xtype,
5779                 tag : 'ul'
5780             }
5781         ];
5782         
5783          
5784         this.type = this.type || 'nav';
5785         if (['tabs','pills'].indexOf(this.type) != -1) {
5786             cfg.cn[0].cls += ' nav-' + this.type
5787         
5788         
5789         } else {
5790             if (this.type!=='nav') {
5791                 Roo.log('nav type must be nav/tabs/pills')
5792             }
5793             cfg.cn[0].cls += ' navbar-nav'
5794         }
5795         
5796         
5797         
5798         
5799         if (['stacked','justified'].indexOf(this.arrangement) != -1) {
5800             cfg.cn[0].cls += ' nav-' + this.arrangement;
5801         }
5802         
5803         
5804         if (this.align === 'right') {
5805             cfg.cn[0].cls += ' navbar-right';
5806         }
5807         
5808         
5809         
5810         
5811         return cfg;
5812     
5813         
5814     }
5815     
5816     
5817     
5818 });
5819
5820
5821
5822  
5823
5824  
5825        /*
5826  * - LGPL
5827  *
5828  * navbar
5829  * navbar-fixed-top
5830  * navbar-expand-md  fixed-top 
5831  */
5832
5833 /**
5834  * @class Roo.bootstrap.nav.Headerbar
5835  * @extends Roo.bootstrap.nav.Simplebar
5836  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
5837  * Bootstrap Sidebar class
5838  *
5839  * @cfg {String} brand what is brand
5840  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
5841  * @cfg {String} brand_href href of the brand
5842  * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button   default true
5843  * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
5844  * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
5845  * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
5846  * 
5847  * @constructor
5848  * Create a new Sidebar
5849  * @param {Object} config The config object
5850  */
5851
5852
5853 Roo.bootstrap.nav.Headerbar = function(config){
5854     Roo.bootstrap.nav.Headerbar.superclass.constructor.call(this, config);
5855       
5856 };
5857
5858 Roo.extend(Roo.bootstrap.nav.Headerbar, Roo.bootstrap.nav.Simplebar,  {
5859     
5860     position: '',
5861     brand: '',
5862     brand_href: false,
5863     srButton : true,
5864     autohide : false,
5865     desktopCenter : false,
5866    
5867     
5868     getAutoCreate : function(){
5869         
5870         var   cfg = {
5871             tag: this.nav || 'nav',
5872             cls: 'navbar navbar-expand-md',
5873             role: 'navigation',
5874             cn: []
5875         };
5876         
5877         var cn = cfg.cn;
5878         if (this.desktopCenter) {
5879             cn.push({cls : 'container', cn : []});
5880             cn = cn[0].cn;
5881         }
5882         
5883         if(this.srButton){
5884             var btn = {
5885                 tag: 'button',
5886                 type: 'button',
5887                 cls: 'navbar-toggle navbar-toggler',
5888                 'data-toggle': 'collapse',
5889                 cn: [
5890                     {
5891                         tag: 'span',
5892                         cls: 'sr-only',
5893                         html: 'Toggle navigation'
5894                     },
5895                     {
5896                         tag: 'span',
5897                         cls: 'icon-bar navbar-toggler-icon'
5898                     },
5899                     {
5900                         tag: 'span',
5901                         cls: 'icon-bar'
5902                     },
5903                     {
5904                         tag: 'span',
5905                         cls: 'icon-bar'
5906                     }
5907                 ]
5908             };
5909             
5910             cn.push( Roo.bootstrap.version == 4 ? btn : {
5911                 tag: 'div',
5912                 cls: 'navbar-header',
5913                 cn: [
5914                     btn
5915                 ]
5916             });
5917         }
5918         
5919         cn.push({
5920             tag: 'div',
5921             cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
5922             cn : []
5923         });
5924         
5925         cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
5926         
5927         if (['light','white'].indexOf(this.weight) > -1) {
5928             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5929         }
5930         cfg.cls += ' bg-' + this.weight;
5931         
5932         
5933         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
5934             cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
5935             
5936             // tag can override this..
5937             
5938             cfg.tag = this.tag || (this.position  == 'fixed-bottom' ? 'footer' : 'header');
5939         }
5940         
5941         if (this.brand !== '') {
5942             var cp =  Roo.bootstrap.version == 4 ? cn : cn[0].cn;
5943             cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
5944                 tag: 'a',
5945                 href: this.brand_href ? this.brand_href : '#',
5946                 cls: 'navbar-brand',
5947                 cn: [
5948                 this.brand
5949                 ]
5950             });
5951         }
5952         
5953         if(this.main){
5954             cfg.cls += ' main-nav';
5955         }
5956         
5957         
5958         return cfg;
5959
5960         
5961     },
5962     getHeaderChildContainer : function()
5963     {
5964         if (this.srButton && this.el.select('.navbar-header').getCount()) {
5965             return this.el.select('.navbar-header',true).first();
5966         }
5967         
5968         return this.getChildContainer();
5969     },
5970     
5971     getChildContainer : function()
5972     {
5973          
5974         return this.el.select('.roo-navbar-collapse',true).first();
5975          
5976         
5977     },
5978     
5979     initEvents : function()
5980     {
5981         Roo.bootstrap.nav.Headerbar.superclass.initEvents.call(this);
5982         
5983         if (this.autohide) {
5984             
5985             var prevScroll = 0;
5986             var ft = this.el;
5987             
5988             Roo.get(document).on('scroll',function(e) {
5989                 var ns = Roo.get(document).getScroll().top;
5990                 var os = prevScroll;
5991                 prevScroll = ns;
5992                 
5993                 if(ns > os){
5994                     ft.removeClass('slideDown');
5995                     ft.addClass('slideUp');
5996                     return;
5997                 }
5998                 ft.removeClass('slideUp');
5999                 ft.addClass('slideDown');
6000                  
6001               
6002           },this);
6003         }
6004     }    
6005     
6006 });
6007
6008
6009
6010  
6011
6012  /*
6013  * - LGPL
6014  *
6015  * navbar
6016  * 
6017  */
6018
6019 /**
6020  * @class Roo.bootstrap.nav.Sidebar
6021  * @extends Roo.bootstrap.nav.Bar
6022  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
6023  * Bootstrap Sidebar class
6024  * 
6025  * @constructor
6026  * Create a new Sidebar
6027  * @param {Object} config The config object
6028  */
6029
6030
6031 Roo.bootstrap.nav.Sidebar = function(config){
6032     Roo.bootstrap.nav.Sidebar.superclass.constructor.call(this, config);
6033 };
6034
6035 Roo.extend(Roo.bootstrap.nav.Sidebar, Roo.bootstrap.nav.Bar,  {
6036     
6037     sidebar : true, // used by Navbar Item and NavbarGroup at present...
6038     
6039     getAutoCreate : function(){
6040         
6041         
6042         return  {
6043             tag: 'div',
6044             cls: 'sidebar sidebar-nav'
6045         };
6046     
6047         
6048     }
6049     
6050     
6051     
6052 });
6053
6054
6055
6056  
6057
6058  /*
6059  * - LGPL
6060  *
6061  * nav group
6062  * 
6063  */
6064
6065 /**
6066  * @class Roo.bootstrap.nav.Group
6067  * @extends Roo.bootstrap.Component
6068  * @children Roo.bootstrap.nav.Item
6069  * Bootstrap NavGroup class
6070  * @cfg {String} align (left|right)
6071  * @cfg {Boolean} inverse
6072  * @cfg {String} type (nav|pills|tab) default nav
6073  * @cfg {String} navId - reference Id for navbar.
6074  * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
6075  * 
6076  * @constructor
6077  * Create a new nav group
6078  * @param {Object} config The config object
6079  */
6080
6081 Roo.bootstrap.nav.Group = function(config){
6082     Roo.bootstrap.nav.Group.superclass.constructor.call(this, config);
6083     this.navItems = [];
6084    
6085     Roo.bootstrap.nav.Group.register(this);
6086      this.addEvents({
6087         /**
6088              * @event changed
6089              * Fires when the active item changes
6090              * @param {Roo.bootstrap.nav.Group} this
6091              * @param {Roo.bootstrap.Navbar.Item} selected The item selected
6092              * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item 
6093          */
6094         'changed': true
6095      });
6096     
6097 };
6098
6099 Roo.extend(Roo.bootstrap.nav.Group, Roo.bootstrap.Component,  {
6100     
6101     align: '',
6102     inverse: false,
6103     form: false,
6104     type: 'nav',
6105     navId : '',
6106     // private
6107     pilltype : true,
6108     
6109     navItems : false, 
6110     
6111     getAutoCreate : function()
6112     {
6113         var cfg = Roo.apply({}, Roo.bootstrap.nav.Group.superclass.getAutoCreate.call(this));
6114         
6115         cfg = {
6116             tag : 'ul',
6117             cls: 'nav' 
6118         };
6119         if (Roo.bootstrap.version == 4) {
6120             if (['tabs','pills'].indexOf(this.type) != -1) {
6121                 cfg.cls += ' nav-' + this.type; 
6122             } else {
6123                 // trying to remove so header bar can right align top?
6124                 if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
6125                     // do not use on header bar... 
6126                     cfg.cls += ' navbar-nav';
6127                 }
6128             }
6129             
6130         } else {
6131             if (['tabs','pills'].indexOf(this.type) != -1) {
6132                 cfg.cls += ' nav-' + this.type
6133             } else {
6134                 if (this.type !== 'nav') {
6135                     Roo.log('nav type must be nav/tabs/pills')
6136                 }
6137                 cfg.cls += ' navbar-nav'
6138             }
6139         }
6140         
6141         if (this.parent() && this.parent().sidebar) {
6142             cfg = {
6143                 tag: 'ul',
6144                 cls: 'dashboard-menu sidebar-menu'
6145             };
6146             
6147             return cfg;
6148         }
6149         
6150         if (this.form === true) {
6151             cfg = {
6152                 tag: 'form',
6153                 cls: 'navbar-form form-inline'
6154             };
6155             //nav navbar-right ml-md-auto
6156             if (this.align === 'right') {
6157                 cfg.cls += ' navbar-right ml-md-auto';
6158             } else {
6159                 cfg.cls += ' navbar-left';
6160             }
6161         }
6162         
6163         if (this.align === 'right') {
6164             cfg.cls += ' navbar-right ml-md-auto';
6165         } else {
6166             cfg.cls += ' mr-auto';
6167         }
6168         
6169         if (this.inverse) {
6170             cfg.cls += ' navbar-inverse';
6171             
6172         }
6173         
6174         
6175         return cfg;
6176     },
6177     /**
6178     * sets the active Navigation item
6179     * @param {Roo.bootstrap.nav.Item} the new current navitem
6180     */
6181     setActiveItem : function(item)
6182     {
6183         var prev = false;
6184         Roo.each(this.navItems, function(v){
6185             if (v == item) {
6186                 return ;
6187             }
6188             if (v.isActive()) {
6189                 v.setActive(false, true);
6190                 prev = v;
6191                 
6192             }
6193             
6194         });
6195
6196         item.setActive(true, true);
6197         this.fireEvent('changed', this, item, prev);
6198         
6199         
6200     },
6201     /**
6202     * gets the active Navigation item
6203     * @return {Roo.bootstrap.nav.Item} the current navitem
6204     */
6205     getActive : function()
6206     {
6207         
6208         var prev = false;
6209         Roo.each(this.navItems, function(v){
6210             
6211             if (v.isActive()) {
6212                 prev = v;
6213                 
6214             }
6215             
6216         });
6217         return prev;
6218     },
6219     
6220     indexOfNav : function()
6221     {
6222         
6223         var prev = false;
6224         Roo.each(this.navItems, function(v,i){
6225             
6226             if (v.isActive()) {
6227                 prev = i;
6228                 
6229             }
6230             
6231         });
6232         return prev;
6233     },
6234     /**
6235     * adds a Navigation item
6236     * @param {Roo.bootstrap.nav.Item} the navitem to add
6237     */
6238     addItem : function(cfg)
6239     {
6240         if (this.form && Roo.bootstrap.version == 4) {
6241             cfg.tag = 'div';
6242         }
6243         var cn = new Roo.bootstrap.nav.Item(cfg);
6244         this.register(cn);
6245         cn.parentId = this.id;
6246         cn.onRender(this.el, null);
6247         return cn;
6248     },
6249     /**
6250     * register a Navigation item
6251     * @param {Roo.bootstrap.nav.Item} the navitem to add
6252     */
6253     register : function(item)
6254     {
6255         this.navItems.push( item);
6256         item.navId = this.navId;
6257     
6258     },
6259     
6260     /**
6261     * clear all the Navigation item
6262     */
6263    
6264     clearAll : function()
6265     {
6266         this.navItems = [];
6267         this.el.dom.innerHTML = '';
6268     },
6269     
6270     getNavItem: function(tabId)
6271     {
6272         var ret = false;
6273         Roo.each(this.navItems, function(e) {
6274             if (e.tabId == tabId) {
6275                ret =  e;
6276                return false;
6277             }
6278             return true;
6279             
6280         });
6281         return ret;
6282     },
6283     
6284     setActiveNext : function()
6285     {
6286         var i = this.indexOfNav(this.getActive());
6287         if (i > this.navItems.length) {
6288             return;
6289         }
6290         this.setActiveItem(this.navItems[i+1]);
6291     },
6292     setActivePrev : function()
6293     {
6294         var i = this.indexOfNav(this.getActive());
6295         if (i  < 1) {
6296             return;
6297         }
6298         this.setActiveItem(this.navItems[i-1]);
6299     },
6300     clearWasActive : function(except) {
6301         Roo.each(this.navItems, function(e) {
6302             if (e.tabId != except.tabId && e.was_active) {
6303                e.was_active = false;
6304                return false;
6305             }
6306             return true;
6307             
6308         });
6309     },
6310     getWasActive : function ()
6311     {
6312         var r = false;
6313         Roo.each(this.navItems, function(e) {
6314             if (e.was_active) {
6315                r = e;
6316                return false;
6317             }
6318             return true;
6319             
6320         });
6321         return r;
6322     }
6323     
6324     
6325 });
6326
6327  
6328 Roo.apply(Roo.bootstrap.nav.Group, {
6329     
6330     groups: {},
6331      /**
6332     * register a Navigation Group
6333     * @param {Roo.bootstrap.nav.Group} the navgroup to add
6334     */
6335     register : function(navgrp)
6336     {
6337         this.groups[navgrp.navId] = navgrp;
6338         
6339     },
6340     /**
6341     * fetch a Navigation Group based on the navigation ID
6342     * @param {string} the navgroup to add
6343     * @returns {Roo.bootstrap.nav.Group} the navgroup 
6344     */
6345     get: function(navId) {
6346         if (typeof(this.groups[navId]) == 'undefined') {
6347             return false;
6348             //this.register(new Roo.bootstrap.nav.Group({ navId : navId }));
6349         }
6350         return this.groups[navId] ;
6351     }
6352     
6353     
6354     
6355 });
6356
6357  /**
6358  * @class Roo.bootstrap.nav.Item
6359  * @extends Roo.bootstrap.Component
6360  * @children Roo.bootstrap.Container Roo.bootstrap.Button
6361  * @parent Roo.bootstrap.nav.Group
6362  * @licence LGPL
6363  * Bootstrap Navbar.NavItem class
6364  * 
6365  * @cfg {String} href  link to
6366  * @cfg {String} button_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default none
6367  * @cfg {Boolean} button_outline show and outlined button
6368  * @cfg {String} html content of button
6369  * @cfg {String} badge text inside badge
6370  * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
6371  * @cfg {String} glyphicon DEPRICATED - use fa
6372  * @cfg {String} icon DEPRICATED - use fa
6373  * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
6374  * @cfg {Boolean} active Is item active
6375  * @cfg {Boolean} disabled Is item disabled
6376  * @cfg {String} linkcls  Link Class
6377  * @cfg {Boolean} preventDefault (true | false) default false
6378  * @cfg {String} tabId the tab that this item activates.
6379  * @cfg {String} tagtype (a|span) render as a href or span?
6380  * @cfg {Boolean} animateRef (true|false) link to element default false  
6381  * @cfg {Roo.bootstrap.menu.Menu} menu a Menu 
6382   
6383  * @constructor
6384  * Create a new Navbar Item
6385  * @param {Object} config The config object
6386  */
6387 Roo.bootstrap.nav.Item = function(config){
6388     Roo.bootstrap.nav.Item.superclass.constructor.call(this, config);
6389     this.addEvents({
6390         // raw events
6391         /**
6392          * @event click
6393          * The raw click event for the entire grid.
6394          * @param {Roo.EventObject} e
6395          */
6396         "click" : true,
6397          /**
6398             * @event changed
6399             * Fires when the active item active state changes
6400             * @param {Roo.bootstrap.nav.Item} this
6401             * @param {boolean} state the new state
6402              
6403          */
6404         'changed': true,
6405         /**
6406             * @event scrollto
6407             * Fires when scroll to element
6408             * @param {Roo.bootstrap.nav.Item} this
6409             * @param {Object} options
6410             * @param {Roo.EventObject} e
6411              
6412          */
6413         'scrollto': true
6414     });
6415    
6416 };
6417
6418 Roo.extend(Roo.bootstrap.nav.Item, Roo.bootstrap.Component,  {
6419     
6420     href: false,
6421     html: '',
6422     badge: '',
6423     icon: false,
6424     fa : false,
6425     glyphicon: false,
6426     active: false,
6427     preventDefault : false,
6428     tabId : false,
6429     tagtype : 'a',
6430     tag: 'li',
6431     disabled : false,
6432     animateRef : false,
6433     was_active : false,
6434     button_weight : '',
6435     button_outline : false,
6436     linkcls : '',
6437     navLink: false,
6438     
6439     getAutoCreate : function(){
6440          
6441         var cfg = {
6442             tag: this.tag,
6443             cls: 'nav-item'
6444         };
6445         
6446         cfg.cls =  typeof(cfg.cls) == 'undefined'  ? '' : cfg.cls;
6447         
6448         if (this.active) {
6449             cfg.cls +=  ' active' ;
6450         }
6451         if (this.disabled) {
6452             cfg.cls += ' disabled';
6453         }
6454         
6455         // BS4 only?
6456         if (this.button_weight.length) {
6457             cfg.tag = this.href ? 'a' : 'button';
6458             cfg.html = this.html || '';
6459             cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
6460             if (this.href) {
6461                 cfg.href = this.href;
6462             }
6463             if (this.fa) {
6464                 cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + this.html + '</span>';
6465             } else {
6466                 cfg.cls += " nav-html";
6467             }
6468             
6469             // menu .. should add dropdown-menu class - so no need for carat..
6470             
6471             if (this.badge !== '') {
6472                  
6473                 cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6474             }
6475             return cfg;
6476         }
6477         
6478         if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
6479             cfg.cn = [
6480                 {
6481                     tag: this.tagtype,
6482                     href : this.href || "#",
6483                     html: this.html || '',
6484                     cls : ''
6485                 }
6486             ];
6487             if (this.tagtype == 'a') {
6488                 cfg.cn[0].cls = 'nav-link' +  (this.active ?  ' active'  : '') + ' ' + this.linkcls;
6489         
6490             }
6491             if (this.icon) {
6492                 cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
6493             } else  if (this.fa) {
6494                 cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
6495             } else if(this.glyphicon) {
6496                 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
6497             } else {
6498                 cfg.cn[0].cls += " nav-html";
6499             }
6500             
6501             if (this.menu) {
6502                 cfg.cn[0].html += " <span class='caret'></span>";
6503              
6504             }
6505             
6506             if (this.badge !== '') {
6507                 cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6508             }
6509         }
6510         
6511         
6512         
6513         return cfg;
6514     },
6515     onRender : function(ct, position)
6516     {
6517        // Roo.log("Call onRender: " + this.xtype);
6518         if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
6519             this.tag = 'div';
6520         }
6521         
6522         var ret = Roo.bootstrap.nav.Item.superclass.onRender.call(this, ct, position);
6523         this.navLink = this.el.select('.nav-link',true).first();
6524         this.htmlEl = this.el.hasClass('nav-html') ? this.el : this.el.select('.nav-html',true).first();
6525         return ret;
6526     },
6527       
6528     
6529     initEvents: function() 
6530     {
6531         if (typeof (this.menu) != 'undefined') {
6532             this.menu.parentType = this.xtype;
6533             this.menu.triggerEl = this.el;
6534             this.menu = this.addxtype(Roo.apply({}, this.menu));
6535         }
6536         
6537         this.el.on('click', this.onClick, this);
6538         
6539         //if(this.tagtype == 'span'){
6540         //    this.el.select('span',true).on('click', this.onClick, this);
6541         //}
6542        
6543         // at this point parent should be available..
6544         this.parent().register(this);
6545     },
6546     
6547     onClick : function(e)
6548     {
6549         if (e.getTarget('.dropdown-menu-item')) {
6550             // did you click on a menu itemm.... - then don't trigger onclick..
6551             return;
6552         }
6553         
6554         if(
6555                 this.preventDefault ||
6556                                 this.href === false ||
6557                 this.href === '#' 
6558         ){
6559             //Roo.log("NavItem - prevent Default?");
6560             e.preventDefault();
6561         }
6562         
6563         if (this.disabled) {
6564             return;
6565         }
6566         
6567         var tg = Roo.bootstrap.TabGroup.get(this.navId);
6568         if (tg && tg.transition) {
6569             Roo.log("waiting for the transitionend");
6570             return;
6571         }
6572         
6573         
6574         
6575         //Roo.log("fire event clicked");
6576         if(this.fireEvent('click', this, e) === false){
6577             return;
6578         };
6579         
6580         if(this.tagtype == 'span'){
6581             return;
6582         }
6583         
6584         //Roo.log(this.href);
6585         var ael = this.el.select('a',true).first();
6586         //Roo.log(ael);
6587         
6588         if(ael && this.animateRef && this.href.indexOf('#') > -1){
6589             //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
6590             if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
6591                 return; // ignore... - it's a 'hash' to another page.
6592             }
6593             Roo.log("NavItem - prevent Default?");
6594             e.preventDefault();
6595             this.scrollToElement(e);
6596         }
6597         
6598         
6599         var p =  this.parent();
6600    
6601         if (['tabs','pills'].indexOf(p.type)!==-1 && p.pilltype) {
6602             if (typeof(p.setActiveItem) !== 'undefined') {
6603                 p.setActiveItem(this);
6604             }
6605         }
6606         
6607         // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
6608         if (p.parentType == 'NavHeaderbar' && !this.menu) {
6609             // remove the collapsed menu expand...
6610             p.parent().el.select('.roo-navbar-collapse',true).removeClass('in');  
6611         }
6612     },
6613     
6614     isActive: function () {
6615         return this.active
6616     },
6617     setActive : function(state, fire, is_was_active)
6618     {
6619         if (this.active && !state && this.navId) {
6620             this.was_active = true;
6621             var nv = Roo.bootstrap.nav.Group.get(this.navId);
6622             if (nv) {
6623                 nv.clearWasActive(this);
6624             }
6625             
6626         }
6627         this.active = state;
6628         
6629         if (!state ) {
6630             this.el.removeClass('active');
6631             this.navLink ? this.navLink.removeClass('active') : false;
6632         } else if (!this.el.hasClass('active')) {
6633             
6634             this.el.addClass('active');
6635             if (Roo.bootstrap.version == 4 && this.navLink ) {
6636                 this.navLink.addClass('active');
6637             }
6638             
6639         }
6640         if (fire) {
6641             this.fireEvent('changed', this, state);
6642         }
6643         
6644         // show a panel if it's registered and related..
6645         
6646         if (!this.navId || !this.tabId || !state || is_was_active) {
6647             return;
6648         }
6649         
6650         var tg = Roo.bootstrap.TabGroup.get(this.navId);
6651         if (!tg) {
6652             return;
6653         }
6654         var pan = tg.getPanelByName(this.tabId);
6655         if (!pan) {
6656             return;
6657         }
6658         // if we can not flip to new panel - go back to old nav highlight..
6659         if (false == tg.showPanel(pan)) {
6660             var nv = Roo.bootstrap.nav.Group.get(this.navId);
6661             if (nv) {
6662                 var onav = nv.getWasActive();
6663                 if (onav) {
6664                     onav.setActive(true, false, true);
6665                 }
6666             }
6667             
6668         }
6669         
6670         
6671         
6672     },
6673      // this should not be here...
6674     setDisabled : function(state)
6675     {
6676         this.disabled = state;
6677         if (!state ) {
6678             this.el.removeClass('disabled');
6679         } else if (!this.el.hasClass('disabled')) {
6680             this.el.addClass('disabled');
6681         }
6682         
6683     },
6684     
6685     /**
6686      * Fetch the element to display the tooltip on.
6687      * @return {Roo.Element} defaults to this.el
6688      */
6689     tooltipEl : function()
6690     {
6691         return this.el; //this.tagtype  == 'a' ? this.el  : this.el.select('' + this.tagtype + '', true).first();
6692     },
6693     
6694     scrollToElement : function(e)
6695     {
6696         var c = document.body;
6697         
6698         /*
6699          * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
6700          */
6701         if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
6702             c = document.documentElement;
6703         }
6704         
6705         var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
6706         
6707         if(!target){
6708             return;
6709         }
6710
6711         var o = target.calcOffsetsTo(c);
6712         
6713         var options = {
6714             target : target,
6715             value : o[1]
6716         };
6717         
6718         this.fireEvent('scrollto', this, options, e);
6719         
6720         Roo.get(c).scrollTo('top', options.value, true);
6721         
6722         return;
6723     },
6724     /**
6725      * Set the HTML (text content) of the item
6726      * @param {string} html  content for the nav item
6727      */
6728     setHtml : function(html)
6729     {
6730         this.html = html;
6731         this.htmlEl.dom.innerHTML = html;
6732         
6733     } 
6734 });
6735  
6736
6737  /*
6738  * - LGPL
6739  *
6740  * sidebar item
6741  *
6742  *  li
6743  *    <span> icon </span>
6744  *    <span> text </span>
6745  *    <span>badge </span>
6746  */
6747
6748 /**
6749  * @class Roo.bootstrap.nav.SidebarItem
6750  * @extends Roo.bootstrap.nav.Item
6751  * Bootstrap Navbar.NavSidebarItem class
6752  * 
6753  * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
6754  * {Boolean} open is the menu open
6755  * {Boolean} buttonView use button as the tigger el rather that a (default false)
6756  * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
6757  * {String} buttonSize (sm|md|lg)the extra classes for the button
6758  * {Boolean} showArrow show arrow next to the text (default true)
6759  * @constructor
6760  * Create a new Navbar Button
6761  * @param {Object} config The config object
6762  */
6763 Roo.bootstrap.nav.SidebarItem = function(config){
6764     Roo.bootstrap.nav.SidebarItem.superclass.constructor.call(this, config);
6765     this.addEvents({
6766         // raw events
6767         /**
6768          * @event click
6769          * The raw click event for the entire grid.
6770          * @param {Roo.EventObject} e
6771          */
6772         "click" : true,
6773          /**
6774             * @event changed
6775             * Fires when the active item active state changes
6776             * @param {Roo.bootstrap.nav.SidebarItem} this
6777             * @param {boolean} state the new state
6778              
6779          */
6780         'changed': true
6781     });
6782    
6783 };
6784
6785 Roo.extend(Roo.bootstrap.nav.SidebarItem, Roo.bootstrap.nav.Item,  {
6786     
6787     badgeWeight : 'default',
6788     
6789     open: false,
6790     
6791     buttonView : false,
6792     
6793     buttonWeight : 'default',
6794     
6795     buttonSize : 'md',
6796     
6797     showArrow : true,
6798     
6799     getAutoCreate : function(){
6800         
6801         
6802         var a = {
6803                 tag: 'a',
6804                 href : this.href || '#',
6805                 cls: '',
6806                 html : '',
6807                 cn : []
6808         };
6809         
6810         if(this.buttonView){
6811             a = {
6812                 tag: 'button',
6813                 href : this.href || '#',
6814                 cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
6815                 html : this.html,
6816                 cn : []
6817             };
6818         }
6819         
6820         var cfg = {
6821             tag: 'li',
6822             cls: '',
6823             cn: [ a ]
6824         };
6825         
6826         if (this.active) {
6827             cfg.cls += ' active';
6828         }
6829         
6830         if (this.disabled) {
6831             cfg.cls += ' disabled';
6832         }
6833         if (this.open) {
6834             cfg.cls += ' open x-open';
6835         }
6836         // left icon..
6837         if (this.glyphicon || this.icon) {
6838             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
6839             a.cn.push({ tag : 'i', cls : c }) ;
6840         }
6841         
6842         if(!this.buttonView){
6843             var span = {
6844                 tag: 'span',
6845                 html : this.html || ''
6846             };
6847
6848             a.cn.push(span);
6849             
6850         }
6851         
6852         if (this.badge !== '') {
6853             a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge }); 
6854         }
6855         
6856         if (this.menu) {
6857             
6858             if(this.showArrow){
6859                 a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
6860             }
6861             
6862             a.cls += ' dropdown-toggle treeview' ;
6863         }
6864         
6865         return cfg;
6866     },
6867     
6868     initEvents : function()
6869     { 
6870         if (typeof (this.menu) != 'undefined') {
6871             this.menu.parentType = this.xtype;
6872             this.menu.triggerEl = this.el;
6873             this.menu = this.addxtype(Roo.apply({}, this.menu));
6874         }
6875         
6876         this.el.on('click', this.onClick, this);
6877         
6878         if(this.badge !== ''){
6879             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
6880         }
6881         
6882     },
6883     
6884     onClick : function(e)
6885     {
6886         if(this.disabled){
6887             e.preventDefault();
6888             return;
6889         }
6890         
6891         if(this.preventDefault){
6892             e.preventDefault();
6893         }
6894         
6895         this.fireEvent('click', this, e);
6896     },
6897     
6898     disable : function()
6899     {
6900         this.setDisabled(true);
6901     },
6902     
6903     enable : function()
6904     {
6905         this.setDisabled(false);
6906     },
6907     
6908     setDisabled : function(state)
6909     {
6910         if(this.disabled == state){
6911             return;
6912         }
6913         
6914         this.disabled = state;
6915         
6916         if (state) {
6917             this.el.addClass('disabled');
6918             return;
6919         }
6920         
6921         this.el.removeClass('disabled');
6922         
6923         return;
6924     },
6925     
6926     setActive : function(state)
6927     {
6928         if(this.active == state){
6929             return;
6930         }
6931         
6932         this.active = state;
6933         
6934         if (state) {
6935             this.el.addClass('active');
6936             return;
6937         }
6938         
6939         this.el.removeClass('active');
6940         
6941         return;
6942     },
6943     
6944     isActive: function () 
6945     {
6946         return this.active;
6947     },
6948     
6949     setBadge : function(str)
6950     {
6951         if(!this.badgeEl){
6952             return;
6953         }
6954         
6955         this.badgeEl.dom.innerHTML = str;
6956     }
6957     
6958    
6959      
6960  
6961 });
6962  
6963
6964  /*
6965  * - LGPL
6966  *
6967  * nav progress bar
6968  * 
6969  */
6970
6971 /**
6972  * @class Roo.bootstrap.nav.ProgressBar
6973  * @extends Roo.bootstrap.Component
6974  * @children Roo.bootstrap.nav.ProgressBarItem
6975  * Bootstrap NavProgressBar class
6976  * 
6977  * @constructor
6978  * Create a new nav progress bar - a bar indicating step along a process
6979  * @param {Object} config The config object
6980  */
6981
6982 Roo.bootstrap.nav.ProgressBar = function(config){
6983     Roo.bootstrap.nav.ProgressBar.superclass.constructor.call(this, config);
6984
6985     this.bullets = this.bullets || [];
6986    
6987 //    Roo.bootstrap.nav.ProgressBar.register(this);
6988      this.addEvents({
6989         /**
6990              * @event changed
6991              * Fires when the active item changes
6992              * @param {Roo.bootstrap.nav.ProgressBar} this
6993              * @param {Roo.bootstrap.nav.ProgressItem} selected The item selected
6994              * @param {Roo.bootstrap.nav.ProgressItem} prev The previously selected item 
6995          */
6996         'changed': true
6997      });
6998     
6999 };
7000
7001 Roo.extend(Roo.bootstrap.nav.ProgressBar, Roo.bootstrap.Component,  {
7002     /**
7003      * @cfg {Roo.bootstrap.nav.ProgressItem} NavProgressBar:bullets[]
7004      * Bullets for the Nav Progress bar for the toolbar
7005      */
7006     bullets : [],
7007     barItems : [],
7008     
7009     getAutoCreate : function()
7010     {
7011         var cfg = Roo.apply({}, Roo.bootstrap.nav.ProgressBar.superclass.getAutoCreate.call(this));
7012         
7013         cfg = {
7014             tag : 'div',
7015             cls : 'roo-navigation-bar-group',
7016             cn : [
7017                 {
7018                     tag : 'div',
7019                     cls : 'roo-navigation-top-bar'
7020                 },
7021                 {
7022                     tag : 'div',
7023                     cls : 'roo-navigation-bullets-bar',
7024                     cn : [
7025                         {
7026                             tag : 'ul',
7027                             cls : 'roo-navigation-bar'
7028                         }
7029                     ]
7030                 },
7031                 
7032                 {
7033                     tag : 'div',
7034                     cls : 'roo-navigation-bottom-bar'
7035                 }
7036             ]
7037             
7038         };
7039         
7040         return cfg;
7041         
7042     },
7043     
7044     initEvents: function() 
7045     {
7046         
7047     },
7048     
7049     onRender : function(ct, position) 
7050     {
7051         Roo.bootstrap.nav.ProgressBar.superclass.onRender.call(this, ct, position);
7052         
7053         if(this.bullets.length){
7054             Roo.each(this.bullets, function(b){
7055                this.addItem(b);
7056             }, this);
7057         }
7058         
7059         this.format();
7060         
7061     },
7062     
7063     addItem : function(cfg)
7064     {
7065         var item = new Roo.bootstrap.nav.ProgressItem(cfg);
7066         
7067         item.parentId = this.id;
7068         item.render(this.el.select('.roo-navigation-bar', true).first(), null);
7069         
7070         if(cfg.html){
7071             var top = new Roo.bootstrap.Element({
7072                 tag : 'div',
7073                 cls : 'roo-navigation-bar-text'
7074             });
7075             
7076             var bottom = new Roo.bootstrap.Element({
7077                 tag : 'div',
7078                 cls : 'roo-navigation-bar-text'
7079             });
7080             
7081             top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
7082             bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
7083             
7084             var topText = new Roo.bootstrap.Element({
7085                 tag : 'span',
7086                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
7087             });
7088             
7089             var bottomText = new Roo.bootstrap.Element({
7090                 tag : 'span',
7091                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
7092             });
7093             
7094             topText.onRender(top.el, null);
7095             bottomText.onRender(bottom.el, null);
7096             
7097             item.topEl = top;
7098             item.bottomEl = bottom;
7099         }
7100         
7101         this.barItems.push(item);
7102         
7103         return item;
7104     },
7105     
7106     getActive : function()
7107     {
7108         var active = false;
7109         
7110         Roo.each(this.barItems, function(v){
7111             
7112             if (!v.isActive()) {
7113                 return;
7114             }
7115             
7116             active = v;
7117             return false;
7118             
7119         });
7120         
7121         return active;
7122     },
7123     
7124     setActiveItem : function(item)
7125     {
7126         var prev = false;
7127         
7128         Roo.each(this.barItems, function(v){
7129             if (v.rid == item.rid) {
7130                 return ;
7131             }
7132             
7133             if (v.isActive()) {
7134                 v.setActive(false);
7135                 prev = v;
7136             }
7137         });
7138
7139         item.setActive(true);
7140         
7141         this.fireEvent('changed', this, item, prev);
7142     },
7143     
7144     getBarItem: function(rid)
7145     {
7146         var ret = false;
7147         
7148         Roo.each(this.barItems, function(e) {
7149             if (e.rid != rid) {
7150                 return;
7151             }
7152             
7153             ret =  e;
7154             return false;
7155         });
7156         
7157         return ret;
7158     },
7159     
7160     indexOfItem : function(item)
7161     {
7162         var index = false;
7163         
7164         Roo.each(this.barItems, function(v, i){
7165             
7166             if (v.rid != item.rid) {
7167                 return;
7168             }
7169             
7170             index = i;
7171             return false
7172         });
7173         
7174         return index;
7175     },
7176     
7177     setActiveNext : function()
7178     {
7179         var i = this.indexOfItem(this.getActive());
7180         
7181         if (i > this.barItems.length) {
7182             return;
7183         }
7184         
7185         this.setActiveItem(this.barItems[i+1]);
7186     },
7187     
7188     setActivePrev : function()
7189     {
7190         var i = this.indexOfItem(this.getActive());
7191         
7192         if (i  < 1) {
7193             return;
7194         }
7195         
7196         this.setActiveItem(this.barItems[i-1]);
7197     },
7198     
7199     format : function()
7200     {
7201         if(!this.barItems.length){
7202             return;
7203         }
7204      
7205         var width = 100 / this.barItems.length;
7206         
7207         Roo.each(this.barItems, function(i){
7208             i.el.setStyle('width', width + '%');
7209             i.topEl.el.setStyle('width', width + '%');
7210             i.bottomEl.el.setStyle('width', width + '%');
7211         }, this);
7212         
7213     }
7214     
7215 });
7216 /*
7217  * - LGPL
7218  *
7219  * Nav Progress Item
7220  * 
7221  */
7222
7223 /**
7224  * @class Roo.bootstrap.nav.ProgressBarItem
7225  * @extends Roo.bootstrap.Component
7226  * Bootstrap NavProgressBarItem class
7227  * @cfg {String} rid the reference id
7228  * @cfg {Boolean} active (true|false) Is item active default false
7229  * @cfg {Boolean} disabled (true|false) Is item active default false
7230  * @cfg {String} html
7231  * @cfg {String} position (top|bottom) text position default bottom
7232  * @cfg {String} icon show icon instead of number
7233  * 
7234  * @constructor
7235  * Create a new NavProgressBarItem
7236  * @param {Object} config The config object
7237  */
7238 Roo.bootstrap.nav.ProgressBarItem = function(config){
7239     Roo.bootstrap.nav.ProgressBarItem.superclass.constructor.call(this, config);
7240     this.addEvents({
7241         // raw events
7242         /**
7243          * @event click
7244          * The raw click event for the entire grid.
7245          * @param {Roo.bootstrap.nav.ProgressBarItem} this
7246          * @param {Roo.EventObject} e
7247          */
7248         "click" : true
7249     });
7250    
7251 };
7252
7253 Roo.extend(Roo.bootstrap.nav.ProgressBarItem, Roo.bootstrap.Component,  {
7254     
7255     rid : '',
7256     active : false,
7257     disabled : false,
7258     html : '',
7259     position : 'bottom',
7260     icon : false,
7261     
7262     getAutoCreate : function()
7263     {
7264         var iconCls = 'roo-navigation-bar-item-icon';
7265         
7266         iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
7267         
7268         var cfg = {
7269             tag: 'li',
7270             cls: 'roo-navigation-bar-item',
7271             cn : [
7272                 {
7273                     tag : 'i',
7274                     cls : iconCls
7275                 }
7276             ]
7277         };
7278         
7279         if(this.active){
7280             cfg.cls += ' active';
7281         }
7282         if(this.disabled){
7283             cfg.cls += ' disabled';
7284         }
7285         
7286         return cfg;
7287     },
7288     
7289     disable : function()
7290     {
7291         this.setDisabled(true);
7292     },
7293     
7294     enable : function()
7295     {
7296         this.setDisabled(false);
7297     },
7298     
7299     initEvents: function() 
7300     {
7301         this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
7302         
7303         this.iconEl.on('click', this.onClick, this);
7304     },
7305     
7306     onClick : function(e)
7307     {
7308         e.preventDefault();
7309         
7310         if(this.disabled){
7311             return;
7312         }
7313         
7314         if(this.fireEvent('click', this, e) === false){
7315             return;
7316         };
7317         
7318         this.parent().setActiveItem(this);
7319     },
7320     
7321     isActive: function () 
7322     {
7323         return this.active;
7324     },
7325     
7326     setActive : function(state)
7327     {
7328         if(this.active == state){
7329             return;
7330         }
7331         
7332         this.active = state;
7333         
7334         if (state) {
7335             this.el.addClass('active');
7336             return;
7337         }
7338         
7339         this.el.removeClass('active');
7340         
7341         return;
7342     },
7343     
7344     setDisabled : function(state)
7345     {
7346         if(this.disabled == state){
7347             return;
7348         }
7349         
7350         this.disabled = state;
7351         
7352         if (state) {
7353             this.el.addClass('disabled');
7354             return;
7355         }
7356         
7357         this.el.removeClass('disabled');
7358     },
7359     
7360     tooltipEl : function()
7361     {
7362         return this.el.select('.roo-navigation-bar-item-icon', true).first();;
7363     }
7364 });
7365  
7366
7367  /*
7368  * - LGPL
7369  *
7370  *  Breadcrumb Nav
7371  * 
7372  */
7373 Roo.namespace('Roo.bootstrap.breadcrumb');
7374
7375
7376 /**
7377  * @class Roo.bootstrap.breadcrumb.Nav
7378  * @extends Roo.bootstrap.Component
7379  * Bootstrap Breadcrumb Nav Class
7380  *  
7381  * @children Roo.bootstrap.breadcrumb.Item
7382  * 
7383  * @constructor
7384  * Create a new breadcrumb.Nav
7385  * @param {Object} config The config object
7386  */
7387
7388
7389 Roo.bootstrap.breadcrumb.Nav = function(config){
7390     Roo.bootstrap.breadcrumb.Nav.superclass.constructor.call(this, config);
7391     
7392     
7393 };
7394
7395 Roo.extend(Roo.bootstrap.breadcrumb.Nav, Roo.bootstrap.Component,  {
7396     
7397     getAutoCreate : function()
7398     {
7399
7400         var cfg = {
7401             tag: 'nav',
7402             cn : [
7403                 {
7404                     tag : 'ol',
7405                     cls : 'breadcrumb'
7406                 }
7407             ]
7408             
7409         };
7410           
7411         return cfg;
7412     },
7413     
7414     initEvents: function()
7415     {
7416         this.olEl = this.el.select('ol',true).first();    
7417     },
7418     getChildContainer : function()
7419     {
7420         return this.olEl;  
7421     }
7422     
7423 });
7424
7425  /*
7426  * - LGPL
7427  *
7428  *  Breadcrumb Item
7429  * 
7430  */
7431
7432
7433 /**
7434  * @class Roo.bootstrap.breadcrumb.Nav
7435  * @extends Roo.bootstrap.Component
7436  * @children Roo.bootstrap.Component
7437  * @parent Roo.bootstrap.breadcrumb.Nav
7438  * Bootstrap Breadcrumb Nav Class
7439  *  
7440  * 
7441  * @cfg {String} html the content of the link.
7442  * @cfg {String} href where it links to if '#' is used the link will be handled by onClick.
7443  * @cfg {Boolean} active is it active
7444
7445  * 
7446  * @constructor
7447  * Create a new breadcrumb.Nav
7448  * @param {Object} config The config object
7449  */
7450
7451 Roo.bootstrap.breadcrumb.Item = function(config){
7452     Roo.bootstrap.breadcrumb.Item.superclass.constructor.call(this, config);
7453     this.addEvents({
7454         // img events
7455         /**
7456          * @event click
7457          * The img click event for the img.
7458          * @param {Roo.EventObject} e
7459          */
7460         "click" : true
7461     });
7462     
7463 };
7464
7465 Roo.extend(Roo.bootstrap.breadcrumb.Item, Roo.bootstrap.Component,  {
7466     
7467     href: false,
7468     html : '',
7469     
7470     getAutoCreate : function()
7471     {
7472
7473         var cfg = {
7474             tag: 'li',
7475             cls : 'breadcrumb-item' + (this.active ? ' active' : '')
7476         };
7477         if (this.href !== false) {
7478             cfg.cn = [{
7479                 tag : 'a',
7480                 href : this.href,
7481                 html : this.html
7482             }];
7483         } else {
7484             cfg.html = this.html;
7485         }
7486         
7487         return cfg;
7488     },
7489     
7490     initEvents: function()
7491     {
7492         if (this.href) {
7493             this.el.select('a', true).first().on('click',this.onClick, this)
7494         }
7495         
7496     },
7497     onClick : function(e)
7498     {
7499         e.preventDefault();
7500         this.fireEvent('click',this,  e);
7501     }
7502     
7503 });
7504
7505  /*
7506  * - LGPL
7507  *
7508  * row
7509  * 
7510  */
7511
7512 /**
7513  * @class Roo.bootstrap.Row
7514  * @extends Roo.bootstrap.Component
7515  * @children Roo.bootstrap.Component
7516  * Bootstrap Row class (contains columns...)
7517  * 
7518  * @constructor
7519  * Create a new Row
7520  * @param {Object} config The config object
7521  */
7522
7523 Roo.bootstrap.Row = function(config){
7524     Roo.bootstrap.Row.superclass.constructor.call(this, config);
7525 };
7526
7527 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
7528     
7529     getAutoCreate : function(){
7530        return {
7531             cls: 'row clearfix'
7532        };
7533     }
7534     
7535     
7536 });
7537
7538  
7539
7540  /*
7541  * - LGPL
7542  *
7543  * pagination
7544  * 
7545  */
7546
7547 /**
7548  * @class Roo.bootstrap.Pagination
7549  * @extends Roo.bootstrap.Component
7550  * @children Roo.bootstrap.Pagination
7551  * Bootstrap Pagination class
7552  * 
7553  * @cfg {String} size (xs|sm|md|lg|xl)
7554  * @cfg {Boolean} inverse 
7555  * 
7556  * @constructor
7557  * Create a new Pagination
7558  * @param {Object} config The config object
7559  */
7560
7561 Roo.bootstrap.Pagination = function(config){
7562     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
7563 };
7564
7565 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
7566     
7567     cls: false,
7568     size: false,
7569     inverse: false,
7570     
7571     getAutoCreate : function(){
7572         var cfg = {
7573             tag: 'ul',
7574                 cls: 'pagination'
7575         };
7576         if (this.inverse) {
7577             cfg.cls += ' inverse';
7578         }
7579         if (this.html) {
7580             cfg.html=this.html;
7581         }
7582         if (this.cls) {
7583             cfg.cls += " " + this.cls;
7584         }
7585         return cfg;
7586     }
7587    
7588 });
7589
7590  
7591
7592  /*
7593  * - LGPL
7594  *
7595  * Pagination item
7596  * 
7597  */
7598
7599
7600 /**
7601  * @class Roo.bootstrap.PaginationItem
7602  * @extends Roo.bootstrap.Component
7603  * Bootstrap PaginationItem class
7604  * @cfg {String} html text
7605  * @cfg {String} href the link
7606  * @cfg {Boolean} preventDefault (true | false) default true
7607  * @cfg {Boolean} active (true | false) default false
7608  * @cfg {Boolean} disabled default false
7609  * 
7610  * 
7611  * @constructor
7612  * Create a new PaginationItem
7613  * @param {Object} config The config object
7614  */
7615
7616
7617 Roo.bootstrap.PaginationItem = function(config){
7618     Roo.bootstrap.PaginationItem.superclass.constructor.call(this, config);
7619     this.addEvents({
7620         // raw events
7621         /**
7622          * @event click
7623          * The raw click event for the entire grid.
7624          * @param {Roo.EventObject} e
7625          */
7626         "click" : true
7627     });
7628 };
7629
7630 Roo.extend(Roo.bootstrap.PaginationItem, Roo.bootstrap.Component,  {
7631     
7632     href : false,
7633     html : false,
7634     preventDefault: true,
7635     active : false,
7636     cls : false,
7637     disabled: false,
7638     
7639     getAutoCreate : function(){
7640         var cfg= {
7641             tag: 'li',
7642             cn: [
7643                 {
7644                     tag : 'a',
7645                     href : this.href ? this.href : '#',
7646                     html : this.html ? this.html : ''
7647                 }
7648             ]
7649         };
7650         
7651         if(this.cls){
7652             cfg.cls = this.cls;
7653         }
7654         
7655         if(this.disabled){
7656             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' disabled' : 'disabled';
7657         }
7658         
7659         if(this.active){
7660             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' active' : 'active';
7661         }
7662         
7663         return cfg;
7664     },
7665     
7666     initEvents: function() {
7667         
7668         this.el.on('click', this.onClick, this);
7669         
7670     },
7671     onClick : function(e)
7672     {
7673         Roo.log('PaginationItem on click ');
7674         if(this.preventDefault){
7675             e.preventDefault();
7676         }
7677         
7678         if(this.disabled){
7679             return;
7680         }
7681         
7682         this.fireEvent('click', this, e);
7683     }
7684    
7685 });
7686
7687  
7688
7689  /*
7690  * - LGPL
7691  *
7692  * slider
7693  * 
7694  */
7695
7696
7697 /**
7698  * @class Roo.bootstrap.Slider
7699  * @extends Roo.bootstrap.Component
7700  * Bootstrap Slider class
7701  *    
7702  * @constructor
7703  * Create a new Slider
7704  * @param {Object} config The config object
7705  */
7706
7707 Roo.bootstrap.Slider = function(config){
7708     Roo.bootstrap.Slider.superclass.constructor.call(this, config);
7709 };
7710
7711 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component,  {
7712     
7713     getAutoCreate : function(){
7714         
7715         var cfg = {
7716             tag: 'div',
7717             cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
7718             cn: [
7719                 {
7720                     tag: 'a',
7721                     cls: 'ui-slider-handle ui-state-default ui-corner-all'
7722                 }
7723             ]
7724         };
7725         
7726         return cfg;
7727     }
7728    
7729 });
7730
7731  /*
7732  * Based on:
7733  * Ext JS Library 1.1.1
7734  * Copyright(c) 2006-2007, Ext JS, LLC.
7735  *
7736  * Originally Released Under LGPL - original licence link has changed is not relivant.
7737  *
7738  * Fork - LGPL
7739  * <script type="text/javascript">
7740  */
7741  /**
7742  * @extends Roo.dd.DDProxy
7743  * @class Roo.grid.SplitDragZone
7744  * Support for Column Header resizing
7745  * @constructor
7746  * @param {Object} config
7747  */
7748 // private
7749 // This is a support class used internally by the Grid components
7750 Roo.grid.SplitDragZone = function(grid, hd, hd2){
7751     this.grid = grid;
7752     this.view = grid.getView();
7753     this.proxy = this.view.resizeProxy;
7754     Roo.grid.SplitDragZone.superclass.constructor.call(
7755         this,
7756         hd, // ID
7757         "gridSplitters" + this.grid.getGridEl().id, // SGROUP
7758         {  // CONFIG
7759             dragElId : Roo.id(this.proxy.dom),
7760             resizeFrame:false
7761         }
7762     );
7763     
7764     this.setHandleElId(Roo.id(hd));
7765     if (hd2 !== false) {
7766         this.setOuterHandleElId(Roo.id(hd2));
7767     }
7768     
7769     this.scroll = false;
7770 };
7771 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
7772     fly: Roo.Element.fly,
7773
7774     b4StartDrag : function(x, y){
7775         this.view.headersDisabled = true;
7776         var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
7777                     this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
7778         );
7779         this.proxy.setHeight(h);
7780         
7781         // for old system colWidth really stored the actual width?
7782         // in bootstrap we tried using xs/ms/etc.. to do % sizing?
7783         // which in reality did not work.. - it worked only for fixed sizes
7784         // for resizable we need to use actual sizes.
7785         var w = this.cm.getColumnWidth(this.cellIndex);
7786         if (!this.view.mainWrap) {
7787             // bootstrap.
7788             w = this.view.getHeaderIndex(this.cellIndex).getWidth();
7789         }
7790         
7791         
7792         
7793         // this was w-this.grid.minColumnWidth;
7794         // doesnt really make sense? - w = thie curren width or the rendered one?
7795         var minw = Math.max(w-this.grid.minColumnWidth, 0);
7796         this.resetConstraints();
7797         this.setXConstraint(minw, 1000);
7798         this.setYConstraint(0, 0);
7799         this.minX = x - minw;
7800         this.maxX = x + 1000;
7801         this.startPos = x;
7802         if (!this.view.mainWrap) { // this is Bootstrap code..
7803             this.getDragEl().style.display='block';
7804         }
7805         
7806         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
7807     },
7808
7809
7810     handleMouseDown : function(e){
7811         ev = Roo.EventObject.setEvent(e);
7812         var t = this.fly(ev.getTarget());
7813         if(t.hasClass("x-grid-split")){
7814             this.cellIndex = this.view.getCellIndex(t.dom);
7815             this.split = t.dom;
7816             this.cm = this.grid.colModel;
7817             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
7818                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
7819             }
7820         }
7821     },
7822
7823     endDrag : function(e){
7824         this.view.headersDisabled = false;
7825         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
7826         var diff = endX - this.startPos;
7827         // 
7828         var w = this.cm.getColumnWidth(this.cellIndex);
7829         if (!this.view.mainWrap) {
7830             w = 0;
7831         }
7832         this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
7833     },
7834
7835     autoOffset : function(){
7836         this.setDelta(0,0);
7837     }
7838 });/*
7839  * Based on:
7840  * Ext JS Library 1.1.1
7841  * Copyright(c) 2006-2007, Ext JS, LLC.
7842  *
7843  * Originally Released Under LGPL - original licence link has changed is not relivant.
7844  *
7845  * Fork - LGPL
7846  * <script type="text/javascript">
7847  */
7848
7849 /**
7850  * @class Roo.grid.AbstractSelectionModel
7851  * @extends Roo.util.Observable
7852  * @abstract
7853  * Abstract base class for grid SelectionModels.  It provides the interface that should be
7854  * implemented by descendant classes.  This class should not be directly instantiated.
7855  * @constructor
7856  */
7857 Roo.grid.AbstractSelectionModel = function(){
7858     this.locked = false;
7859     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
7860 };
7861
7862 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
7863     /** @ignore Called by the grid automatically. Do not call directly. */
7864     init : function(grid){
7865         this.grid = grid;
7866         this.initEvents();
7867     },
7868
7869     /**
7870      * Locks the selections.
7871      */
7872     lock : function(){
7873         this.locked = true;
7874     },
7875
7876     /**
7877      * Unlocks the selections.
7878      */
7879     unlock : function(){
7880         this.locked = false;
7881     },
7882
7883     /**
7884      * Returns true if the selections are locked.
7885      * @return {Boolean}
7886      */
7887     isLocked : function(){
7888         return this.locked;
7889     }
7890 });/*
7891  * Based on:
7892  * Ext JS Library 1.1.1
7893  * Copyright(c) 2006-2007, Ext JS, LLC.
7894  *
7895  * Originally Released Under LGPL - original licence link has changed is not relivant.
7896  *
7897  * Fork - LGPL
7898  * <script type="text/javascript">
7899  */
7900 /**
7901  * @extends Roo.grid.AbstractSelectionModel
7902  * @class Roo.grid.RowSelectionModel
7903  * The default SelectionModel used by {@link Roo.grid.Grid}.
7904  * It supports multiple selections and keyboard selection/navigation. 
7905  * @constructor
7906  * @param {Object} config
7907  */
7908 Roo.grid.RowSelectionModel = function(config){
7909     Roo.apply(this, config);
7910     this.selections = new Roo.util.MixedCollection(false, function(o){
7911         return o.id;
7912     });
7913
7914     this.last = false;
7915     this.lastActive = false;
7916
7917     this.addEvents({
7918         /**
7919         * @event selectionchange
7920         * Fires when the selection changes
7921         * @param {SelectionModel} this
7922         */
7923        "selectionchange" : true,
7924        /**
7925         * @event afterselectionchange
7926         * Fires after the selection changes (eg. by key press or clicking)
7927         * @param {SelectionModel} this
7928         */
7929        "afterselectionchange" : true,
7930        /**
7931         * @event beforerowselect
7932         * Fires when a row is selected being selected, return false to cancel.
7933         * @param {SelectionModel} this
7934         * @param {Number} rowIndex The selected index
7935         * @param {Boolean} keepExisting False if other selections will be cleared
7936         */
7937        "beforerowselect" : true,
7938        /**
7939         * @event rowselect
7940         * Fires when a row is selected.
7941         * @param {SelectionModel} this
7942         * @param {Number} rowIndex The selected index
7943         * @param {Roo.data.Record} r The record
7944         */
7945        "rowselect" : true,
7946        /**
7947         * @event rowdeselect
7948         * Fires when a row is deselected.
7949         * @param {SelectionModel} this
7950         * @param {Number} rowIndex The selected index
7951         */
7952         "rowdeselect" : true
7953     });
7954     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
7955     this.locked = false;
7956 };
7957
7958 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
7959     /**
7960      * @cfg {Boolean} singleSelect
7961      * True to allow selection of only one row at a time (defaults to false)
7962      */
7963     singleSelect : false,
7964
7965     // private
7966     initEvents : function(){
7967
7968         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
7969             this.grid.on("mousedown", this.handleMouseDown, this);
7970         }else{ // allow click to work like normal
7971             this.grid.on("rowclick", this.handleDragableRowClick, this);
7972         }
7973         // bootstrap does not have a view..
7974         var view = this.grid.view ? this.grid.view : this.grid;
7975         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
7976             "up" : function(e){
7977                 if(!e.shiftKey){
7978                     this.selectPrevious(e.shiftKey);
7979                 }else if(this.last !== false && this.lastActive !== false){
7980                     var last = this.last;
7981                     this.selectRange(this.last,  this.lastActive-1);
7982                     view.focusRow(this.lastActive);
7983                     if(last !== false){
7984                         this.last = last;
7985                     }
7986                 }else{
7987                     this.selectFirstRow();
7988                 }
7989                 this.fireEvent("afterselectionchange", this);
7990             },
7991             "down" : function(e){
7992                 if(!e.shiftKey){
7993                     this.selectNext(e.shiftKey);
7994                 }else if(this.last !== false && this.lastActive !== false){
7995                     var last = this.last;
7996                     this.selectRange(this.last,  this.lastActive+1);
7997                     view.focusRow(this.lastActive);
7998                     if(last !== false){
7999                         this.last = last;
8000                     }
8001                 }else{
8002                     this.selectFirstRow();
8003                 }
8004                 this.fireEvent("afterselectionchange", this);
8005             },
8006             scope: this
8007         });
8008
8009          
8010         view.on("refresh", this.onRefresh, this);
8011         view.on("rowupdated", this.onRowUpdated, this);
8012         view.on("rowremoved", this.onRemove, this);
8013     },
8014
8015     // private
8016     onRefresh : function(){
8017         var ds = this.grid.ds, i, v = this.grid.view;
8018         var s = this.selections;
8019         s.each(function(r){
8020             if((i = ds.indexOfId(r.id)) != -1){
8021                 v.onRowSelect(i);
8022                 s.add(ds.getAt(i)); // updating the selection relate data
8023             }else{
8024                 s.remove(r);
8025             }
8026         });
8027     },
8028
8029     // private
8030     onRemove : function(v, index, r){
8031         this.selections.remove(r);
8032     },
8033
8034     // private
8035     onRowUpdated : function(v, index, r){
8036         if(this.isSelected(r)){
8037             v.onRowSelect(index);
8038         }
8039     },
8040
8041     /**
8042      * Select records.
8043      * @param {Array} records The records to select
8044      * @param {Boolean} keepExisting (optional) True to keep existing selections
8045      */
8046     selectRecords : function(records, keepExisting){
8047         if(!keepExisting){
8048             this.clearSelections();
8049         }
8050         var ds = this.grid.ds;
8051         for(var i = 0, len = records.length; i < len; i++){
8052             this.selectRow(ds.indexOf(records[i]), true);
8053         }
8054     },
8055
8056     /**
8057      * Gets the number of selected rows.
8058      * @return {Number}
8059      */
8060     getCount : function(){
8061         return this.selections.length;
8062     },
8063
8064     /**
8065      * Selects the first row in the grid.
8066      */
8067     selectFirstRow : function(){
8068         this.selectRow(0);
8069     },
8070
8071     /**
8072      * Select the last row.
8073      * @param {Boolean} keepExisting (optional) True to keep existing selections
8074      */
8075     selectLastRow : function(keepExisting){
8076         this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
8077     },
8078
8079     /**
8080      * Selects the row immediately following the last selected row.
8081      * @param {Boolean} keepExisting (optional) True to keep existing selections
8082      */
8083     selectNext : function(keepExisting){
8084         if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
8085             this.selectRow(this.last+1, keepExisting);
8086             var view = this.grid.view ? this.grid.view : this.grid;
8087             view.focusRow(this.last);
8088         }
8089     },
8090
8091     /**
8092      * Selects the row that precedes the last selected row.
8093      * @param {Boolean} keepExisting (optional) True to keep existing selections
8094      */
8095     selectPrevious : function(keepExisting){
8096         if(this.last){
8097             this.selectRow(this.last-1, keepExisting);
8098             var view = this.grid.view ? this.grid.view : this.grid;
8099             view.focusRow(this.last);
8100         }
8101     },
8102
8103     /**
8104      * Returns the selected records
8105      * @return {Array} Array of selected records
8106      */
8107     getSelections : function(){
8108         return [].concat(this.selections.items);
8109     },
8110
8111     /**
8112      * Returns the first selected record.
8113      * @return {Record}
8114      */
8115     getSelected : function(){
8116         return this.selections.itemAt(0);
8117     },
8118
8119
8120     /**
8121      * Clears all selections.
8122      */
8123     clearSelections : function(fast){
8124         if(this.locked) {
8125             return;
8126         }
8127         if(fast !== true){
8128             var ds = this.grid.ds;
8129             var s = this.selections;
8130             s.each(function(r){
8131                 this.deselectRow(ds.indexOfId(r.id));
8132             }, this);
8133             s.clear();
8134         }else{
8135             this.selections.clear();
8136         }
8137         this.last = false;
8138     },
8139
8140
8141     /**
8142      * Selects all rows.
8143      */
8144     selectAll : function(){
8145         if(this.locked) {
8146             return;
8147         }
8148         this.selections.clear();
8149         for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
8150             this.selectRow(i, true);
8151         }
8152     },
8153
8154     /**
8155      * Returns True if there is a selection.
8156      * @return {Boolean}
8157      */
8158     hasSelection : function(){
8159         return this.selections.length > 0;
8160     },
8161
8162     /**
8163      * Returns True if the specified row is selected.
8164      * @param {Number/Record} record The record or index of the record to check
8165      * @return {Boolean}
8166      */
8167     isSelected : function(index){
8168         var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
8169         return (r && this.selections.key(r.id) ? true : false);
8170     },
8171
8172     /**
8173      * Returns True if the specified record id is selected.
8174      * @param {String} id The id of record to check
8175      * @return {Boolean}
8176      */
8177     isIdSelected : function(id){
8178         return (this.selections.key(id) ? true : false);
8179     },
8180
8181     // private
8182     handleMouseDown : function(e, t)
8183     {
8184         var view = this.grid.view ? this.grid.view : this.grid;
8185         var rowIndex;
8186         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
8187             return;
8188         };
8189         if(e.shiftKey && this.last !== false){
8190             var last = this.last;
8191             this.selectRange(last, rowIndex, e.ctrlKey);
8192             this.last = last; // reset the last
8193             view.focusRow(rowIndex);
8194         }else{
8195             var isSelected = this.isSelected(rowIndex);
8196             if(e.button !== 0 && isSelected){
8197                 view.focusRow(rowIndex);
8198             }else if(e.ctrlKey && isSelected){
8199                 this.deselectRow(rowIndex);
8200             }else if(!isSelected){
8201                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
8202                 view.focusRow(rowIndex);
8203             }
8204         }
8205         this.fireEvent("afterselectionchange", this);
8206     },
8207     // private
8208     handleDragableRowClick :  function(grid, rowIndex, e) 
8209     {
8210         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
8211             this.selectRow(rowIndex, false);
8212             var view = this.grid.view ? this.grid.view : this.grid;
8213             view.focusRow(rowIndex);
8214              this.fireEvent("afterselectionchange", this);
8215         }
8216     },
8217     
8218     /**
8219      * Selects multiple rows.
8220      * @param {Array} rows Array of the indexes of the row to select
8221      * @param {Boolean} keepExisting (optional) True to keep existing selections
8222      */
8223     selectRows : function(rows, keepExisting){
8224         if(!keepExisting){
8225             this.clearSelections();
8226         }
8227         for(var i = 0, len = rows.length; i < len; i++){
8228             this.selectRow(rows[i], true);
8229         }
8230     },
8231
8232     /**
8233      * Selects a range of rows. All rows in between startRow and endRow are also selected.
8234      * @param {Number} startRow The index of the first row in the range
8235      * @param {Number} endRow The index of the last row in the range
8236      * @param {Boolean} keepExisting (optional) True to retain existing selections
8237      */
8238     selectRange : function(startRow, endRow, keepExisting){
8239         if(this.locked) {
8240             return;
8241         }
8242         if(!keepExisting){
8243             this.clearSelections();
8244         }
8245         if(startRow <= endRow){
8246             for(var i = startRow; i <= endRow; i++){
8247                 this.selectRow(i, true);
8248             }
8249         }else{
8250             for(var i = startRow; i >= endRow; i--){
8251                 this.selectRow(i, true);
8252             }
8253         }
8254     },
8255
8256     /**
8257      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
8258      * @param {Number} startRow The index of the first row in the range
8259      * @param {Number} endRow The index of the last row in the range
8260      */
8261     deselectRange : function(startRow, endRow, preventViewNotify){
8262         if(this.locked) {
8263             return;
8264         }
8265         for(var i = startRow; i <= endRow; i++){
8266             this.deselectRow(i, preventViewNotify);
8267         }
8268     },
8269
8270     /**
8271      * Selects a row.
8272      * @param {Number} row The index of the row to select
8273      * @param {Boolean} keepExisting (optional) True to keep existing selections
8274      */
8275     selectRow : function(index, keepExisting, preventViewNotify){
8276         if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
8277             return;
8278         }
8279         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
8280             if(!keepExisting || this.singleSelect){
8281                 this.clearSelections();
8282             }
8283             var r = this.grid.ds.getAt(index);
8284             this.selections.add(r);
8285             this.last = this.lastActive = index;
8286             if(!preventViewNotify){
8287                 var view = this.grid.view ? this.grid.view : this.grid;
8288                 view.onRowSelect(index);
8289             }
8290             this.fireEvent("rowselect", this, index, r);
8291             this.fireEvent("selectionchange", this);
8292         }
8293     },
8294
8295     /**
8296      * Deselects a row.
8297      * @param {Number} row The index of the row to deselect
8298      */
8299     deselectRow : function(index, preventViewNotify){
8300         if(this.locked) {
8301             return;
8302         }
8303         if(this.last == index){
8304             this.last = false;
8305         }
8306         if(this.lastActive == index){
8307             this.lastActive = false;
8308         }
8309         var r = this.grid.ds.getAt(index);
8310         this.selections.remove(r);
8311         if(!preventViewNotify){
8312             var view = this.grid.view ? this.grid.view : this.grid;
8313             view.onRowDeselect(index);
8314         }
8315         this.fireEvent("rowdeselect", this, index);
8316         this.fireEvent("selectionchange", this);
8317     },
8318
8319     // private
8320     restoreLast : function(){
8321         if(this._last){
8322             this.last = this._last;
8323         }
8324     },
8325
8326     // private
8327     acceptsNav : function(row, col, cm){
8328         return !cm.isHidden(col) && cm.isCellEditable(col, row);
8329     },
8330
8331     // private
8332     onEditorKey : function(field, e){
8333         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
8334         if(k == e.TAB){
8335             e.stopEvent();
8336             ed.completeEdit();
8337             if(e.shiftKey){
8338                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
8339             }else{
8340                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
8341             }
8342         }else if(k == e.ENTER && !e.ctrlKey){
8343             e.stopEvent();
8344             ed.completeEdit();
8345             if(e.shiftKey){
8346                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
8347             }else{
8348                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
8349             }
8350         }else if(k == e.ESC){
8351             ed.cancelEdit();
8352         }
8353         if(newCell){
8354             g.startEditing(newCell[0], newCell[1]);
8355         }
8356     }
8357 });/*
8358  * Based on:
8359  * Ext JS Library 1.1.1
8360  * Copyright(c) 2006-2007, Ext JS, LLC.
8361  *
8362  * Originally Released Under LGPL - original licence link has changed is not relivant.
8363  *
8364  * Fork - LGPL
8365  * <script type="text/javascript">
8366  */
8367  
8368
8369 /**
8370  * @class Roo.grid.ColumnModel
8371  * @extends Roo.util.Observable
8372  * This is the default implementation of a ColumnModel used by the Grid. It defines
8373  * the columns in the grid.
8374  * <br>Usage:<br>
8375  <pre><code>
8376  var colModel = new Roo.grid.ColumnModel([
8377         {header: "Ticker", width: 60, sortable: true, locked: true},
8378         {header: "Company Name", width: 150, sortable: true},
8379         {header: "Market Cap.", width: 100, sortable: true},
8380         {header: "$ Sales", width: 100, sortable: true, renderer: money},
8381         {header: "Employees", width: 100, sortable: true, resizable: false}
8382  ]);
8383  </code></pre>
8384  * <p>
8385  
8386  * The config options listed for this class are options which may appear in each
8387  * individual column definition.
8388  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
8389  * @constructor
8390  * @param {Object} config An Array of column config objects. See this class's
8391  * config objects for details.
8392 */
8393 Roo.grid.ColumnModel = function(config){
8394         /**
8395      * The config passed into the constructor
8396      */
8397     this.config = []; //config;
8398     this.lookup = {};
8399
8400     // if no id, create one
8401     // if the column does not have a dataIndex mapping,
8402     // map it to the order it is in the config
8403     for(var i = 0, len = config.length; i < len; i++){
8404         this.addColumn(config[i]);
8405         
8406     }
8407
8408     /**
8409      * The width of columns which have no width specified (defaults to 100)
8410      * @type Number
8411      */
8412     this.defaultWidth = 100;
8413
8414     /**
8415      * Default sortable of columns which have no sortable specified (defaults to false)
8416      * @type Boolean
8417      */
8418     this.defaultSortable = false;
8419
8420     this.addEvents({
8421         /**
8422              * @event widthchange
8423              * Fires when the width of a column changes.
8424              * @param {ColumnModel} this
8425              * @param {Number} columnIndex The column index
8426              * @param {Number} newWidth The new width
8427              */
8428             "widthchange": true,
8429         /**
8430              * @event headerchange
8431              * Fires when the text of a header changes.
8432              * @param {ColumnModel} this
8433              * @param {Number} columnIndex The column index
8434              * @param {Number} newText The new header text
8435              */
8436             "headerchange": true,
8437         /**
8438              * @event hiddenchange
8439              * Fires when a column is hidden or "unhidden".
8440              * @param {ColumnModel} this
8441              * @param {Number} columnIndex The column index
8442              * @param {Boolean} hidden true if hidden, false otherwise
8443              */
8444             "hiddenchange": true,
8445             /**
8446          * @event columnmoved
8447          * Fires when a column is moved.
8448          * @param {ColumnModel} this
8449          * @param {Number} oldIndex
8450          * @param {Number} newIndex
8451          */
8452         "columnmoved" : true,
8453         /**
8454          * @event columlockchange
8455          * Fires when a column's locked state is changed
8456          * @param {ColumnModel} this
8457          * @param {Number} colIndex
8458          * @param {Boolean} locked true if locked
8459          */
8460         "columnlockchange" : true
8461     });
8462     Roo.grid.ColumnModel.superclass.constructor.call(this);
8463 };
8464 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
8465     /**
8466      * @cfg {String} header [required] The header text to display in the Grid view.
8467      */
8468         /**
8469      * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
8470      */
8471         /**
8472      * @cfg {String} smHeader Header at Bootsrap Small width
8473      */
8474         /**
8475      * @cfg {String} mdHeader Header at Bootsrap Medium width
8476      */
8477         /**
8478      * @cfg {String} lgHeader Header at Bootsrap Large width
8479      */
8480         /**
8481      * @cfg {String} xlHeader Header at Bootsrap extra Large width
8482      */
8483     /**
8484      * @cfg {String} dataIndex  The name of the field in the grid's {@link Roo.data.Store}'s
8485      * {@link Roo.data.Record} definition from which to draw the column's value. If not
8486      * specified, the column's index is used as an index into the Record's data Array.
8487      */
8488     /**
8489      * @cfg {Number} width  The initial width in pixels of the column. Using this
8490      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
8491      */
8492     /**
8493      * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
8494      * Defaults to the value of the {@link #defaultSortable} property.
8495      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
8496      */
8497     /**
8498      * @cfg {Boolean} locked  True to lock the column in place while scrolling the Grid.  Defaults to false.
8499      */
8500     /**
8501      * @cfg {Boolean} fixed  True if the column width cannot be changed.  Defaults to false.
8502      */
8503     /**
8504      * @cfg {Boolean} resizable  False to disable column resizing. Defaults to true.
8505      */
8506     /**
8507      * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
8508      */
8509     /**
8510      * @cfg {Function} renderer A function used to generate HTML markup for a cell
8511      * given the cell's data value. See {@link #setRenderer}. If not specified, the
8512      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
8513      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
8514      */
8515        /**
8516      * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
8517      */
8518     /**
8519      * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
8520      */
8521     /**
8522      * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
8523      */
8524     /**
8525      * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
8526      */
8527     /**
8528      * @cfg {String} tooltip mouse over tooltip text
8529      */
8530     /**
8531      * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
8532      */
8533     /**
8534      * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
8535      */
8536     /**
8537      * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
8538      */
8539     /**
8540      * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
8541      */
8542         /**
8543      * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
8544      */
8545     /**
8546      * Returns the id of the column at the specified index.
8547      * @param {Number} index The column index
8548      * @return {String} the id
8549      */
8550     getColumnId : function(index){
8551         return this.config[index].id;
8552     },
8553
8554     /**
8555      * Returns the column for a specified id.
8556      * @param {String} id The column id
8557      * @return {Object} the column
8558      */
8559     getColumnById : function(id){
8560         return this.lookup[id];
8561     },
8562
8563     
8564     /**
8565      * Returns the column Object for a specified dataIndex.
8566      * @param {String} dataIndex The column dataIndex
8567      * @return {Object|Boolean} the column or false if not found
8568      */
8569     getColumnByDataIndex: function(dataIndex){
8570         var index = this.findColumnIndex(dataIndex);
8571         return index > -1 ? this.config[index] : false;
8572     },
8573     
8574     /**
8575      * Returns the index for a specified column id.
8576      * @param {String} id The column id
8577      * @return {Number} the index, or -1 if not found
8578      */
8579     getIndexById : function(id){
8580         for(var i = 0, len = this.config.length; i < len; i++){
8581             if(this.config[i].id == id){
8582                 return i;
8583             }
8584         }
8585         return -1;
8586     },
8587     
8588     /**
8589      * Returns the index for a specified column dataIndex.
8590      * @param {String} dataIndex The column dataIndex
8591      * @return {Number} the index, or -1 if not found
8592      */
8593     
8594     findColumnIndex : function(dataIndex){
8595         for(var i = 0, len = this.config.length; i < len; i++){
8596             if(this.config[i].dataIndex == dataIndex){
8597                 return i;
8598             }
8599         }
8600         return -1;
8601     },
8602     
8603     
8604     moveColumn : function(oldIndex, newIndex){
8605         var c = this.config[oldIndex];
8606         this.config.splice(oldIndex, 1);
8607         this.config.splice(newIndex, 0, c);
8608         this.dataMap = null;
8609         this.fireEvent("columnmoved", this, oldIndex, newIndex);
8610     },
8611
8612     isLocked : function(colIndex){
8613         return this.config[colIndex].locked === true;
8614     },
8615
8616     setLocked : function(colIndex, value, suppressEvent){
8617         if(this.isLocked(colIndex) == value){
8618             return;
8619         }
8620         this.config[colIndex].locked = value;
8621         if(!suppressEvent){
8622             this.fireEvent("columnlockchange", this, colIndex, value);
8623         }
8624     },
8625
8626     getTotalLockedWidth : function(){
8627         var totalWidth = 0;
8628         for(var i = 0; i < this.config.length; i++){
8629             if(this.isLocked(i) && !this.isHidden(i)){
8630                 this.totalWidth += this.getColumnWidth(i);
8631             }
8632         }
8633         return totalWidth;
8634     },
8635
8636     getLockedCount : function(){
8637         for(var i = 0, len = this.config.length; i < len; i++){
8638             if(!this.isLocked(i)){
8639                 return i;
8640             }
8641         }
8642         
8643         return this.config.length;
8644     },
8645
8646     /**
8647      * Returns the number of columns.
8648      * @return {Number}
8649      */
8650     getColumnCount : function(visibleOnly){
8651         if(visibleOnly === true){
8652             var c = 0;
8653             for(var i = 0, len = this.config.length; i < len; i++){
8654                 if(!this.isHidden(i)){
8655                     c++;
8656                 }
8657             }
8658             return c;
8659         }
8660         return this.config.length;
8661     },
8662
8663     /**
8664      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
8665      * @param {Function} fn
8666      * @param {Object} scope (optional)
8667      * @return {Array} result
8668      */
8669     getColumnsBy : function(fn, scope){
8670         var r = [];
8671         for(var i = 0, len = this.config.length; i < len; i++){
8672             var c = this.config[i];
8673             if(fn.call(scope||this, c, i) === true){
8674                 r[r.length] = c;
8675             }
8676         }
8677         return r;
8678     },
8679
8680     /**
8681      * Returns true if the specified column is sortable.
8682      * @param {Number} col The column index
8683      * @return {Boolean}
8684      */
8685     isSortable : function(col){
8686         if(typeof this.config[col].sortable == "undefined"){
8687             return this.defaultSortable;
8688         }
8689         return this.config[col].sortable;
8690     },
8691
8692     /**
8693      * Returns the rendering (formatting) function defined for the column.
8694      * @param {Number} col The column index.
8695      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
8696      */
8697     getRenderer : function(col){
8698         if(!this.config[col].renderer){
8699             return Roo.grid.ColumnModel.defaultRenderer;
8700         }
8701         return this.config[col].renderer;
8702     },
8703
8704     /**
8705      * Sets the rendering (formatting) function for a column.
8706      * @param {Number} col The column index
8707      * @param {Function} fn The function to use to process the cell's raw data
8708      * to return HTML markup for the grid view. The render function is called with
8709      * the following parameters:<ul>
8710      * <li>Data value.</li>
8711      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
8712      * <li>css A CSS style string to apply to the table cell.</li>
8713      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
8714      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
8715      * <li>Row index</li>
8716      * <li>Column index</li>
8717      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
8718      */
8719     setRenderer : function(col, fn){
8720         this.config[col].renderer = fn;
8721     },
8722
8723     /**
8724      * Returns the width for the specified column.
8725      * @param {Number} col The column index
8726      * @param (optional) {String} gridSize bootstrap width size.
8727      * @return {Number}
8728      */
8729     getColumnWidth : function(col, gridSize)
8730         {
8731                 var cfg = this.config[col];
8732                 
8733                 if (typeof(gridSize) == 'undefined') {
8734                         return cfg.width * 1 || this.defaultWidth;
8735                 }
8736                 if (gridSize === false) { // if we set it..
8737                         return cfg.width || false;
8738                 }
8739                 var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
8740                 
8741                 for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
8742                         if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
8743                                 continue;
8744                         }
8745                         return cfg[ sizes[i] ];
8746                 }
8747                 return 1;
8748                 
8749     },
8750
8751     /**
8752      * Sets the width for a column.
8753      * @param {Number} col The column index
8754      * @param {Number} width The new width
8755      */
8756     setColumnWidth : function(col, width, suppressEvent){
8757         this.config[col].width = width;
8758         this.totalWidth = null;
8759         if(!suppressEvent){
8760              this.fireEvent("widthchange", this, col, width);
8761         }
8762     },
8763
8764     /**
8765      * Returns the total width of all columns.
8766      * @param {Boolean} includeHidden True to include hidden column widths
8767      * @return {Number}
8768      */
8769     getTotalWidth : function(includeHidden){
8770         if(!this.totalWidth){
8771             this.totalWidth = 0;
8772             for(var i = 0, len = this.config.length; i < len; i++){
8773                 if(includeHidden || !this.isHidden(i)){
8774                     this.totalWidth += this.getColumnWidth(i);
8775                 }
8776             }
8777         }
8778         return this.totalWidth;
8779     },
8780
8781     /**
8782      * Returns the header for the specified column.
8783      * @param {Number} col The column index
8784      * @return {String}
8785      */
8786     getColumnHeader : function(col){
8787         return this.config[col].header;
8788     },
8789
8790     /**
8791      * Sets the header for a column.
8792      * @param {Number} col The column index
8793      * @param {String} header The new header
8794      */
8795     setColumnHeader : function(col, header){
8796         this.config[col].header = header;
8797         this.fireEvent("headerchange", this, col, header);
8798     },
8799
8800     /**
8801      * Returns the tooltip for the specified column.
8802      * @param {Number} col The column index
8803      * @return {String}
8804      */
8805     getColumnTooltip : function(col){
8806             return this.config[col].tooltip;
8807     },
8808     /**
8809      * Sets the tooltip for a column.
8810      * @param {Number} col The column index
8811      * @param {String} tooltip The new tooltip
8812      */
8813     setColumnTooltip : function(col, tooltip){
8814             this.config[col].tooltip = tooltip;
8815     },
8816
8817     /**
8818      * Returns the dataIndex for the specified column.
8819      * @param {Number} col The column index
8820      * @return {Number}
8821      */
8822     getDataIndex : function(col){
8823         return this.config[col].dataIndex;
8824     },
8825
8826     /**
8827      * Sets the dataIndex for a column.
8828      * @param {Number} col The column index
8829      * @param {Number} dataIndex The new dataIndex
8830      */
8831     setDataIndex : function(col, dataIndex){
8832         this.config[col].dataIndex = dataIndex;
8833     },
8834
8835     
8836     
8837     /**
8838      * Returns true if the cell is editable.
8839      * @param {Number} colIndex The column index
8840      * @param {Number} rowIndex The row index - this is nto actually used..?
8841      * @return {Boolean}
8842      */
8843     isCellEditable : function(colIndex, rowIndex){
8844         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
8845     },
8846
8847     /**
8848      * Returns the editor defined for the cell/column.
8849      * return false or null to disable editing.
8850      * @param {Number} colIndex The column index
8851      * @param {Number} rowIndex The row index
8852      * @return {Object}
8853      */
8854     getCellEditor : function(colIndex, rowIndex){
8855         return this.config[colIndex].editor;
8856     },
8857
8858     /**
8859      * Sets if a column is editable.
8860      * @param {Number} col The column index
8861      * @param {Boolean} editable True if the column is editable
8862      */
8863     setEditable : function(col, editable){
8864         this.config[col].editable = editable;
8865     },
8866
8867
8868     /**
8869      * Returns true if the column is hidden.
8870      * @param {Number} colIndex The column index
8871      * @return {Boolean}
8872      */
8873     isHidden : function(colIndex){
8874         return this.config[colIndex].hidden;
8875     },
8876
8877
8878     /**
8879      * Returns true if the column width cannot be changed
8880      */
8881     isFixed : function(colIndex){
8882         return this.config[colIndex].fixed;
8883     },
8884
8885     /**
8886      * Returns true if the column can be resized
8887      * @return {Boolean}
8888      */
8889     isResizable : function(colIndex){
8890         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
8891     },
8892     /**
8893      * Sets if a column is hidden.
8894      * @param {Number} colIndex The column index
8895      * @param {Boolean} hidden True if the column is hidden
8896      */
8897     setHidden : function(colIndex, hidden){
8898         this.config[colIndex].hidden = hidden;
8899         this.totalWidth = null;
8900         this.fireEvent("hiddenchange", this, colIndex, hidden);
8901     },
8902
8903     /**
8904      * Sets the editor for a column.
8905      * @param {Number} col The column index
8906      * @param {Object} editor The editor object
8907      */
8908     setEditor : function(col, editor){
8909         this.config[col].editor = editor;
8910     },
8911     /**
8912      * Add a column (experimental...) - defaults to adding to the end..
8913      * @param {Object} config 
8914     */
8915     addColumn : function(c)
8916     {
8917     
8918         var i = this.config.length;
8919         this.config[i] = c;
8920         
8921         if(typeof c.dataIndex == "undefined"){
8922             c.dataIndex = i;
8923         }
8924         if(typeof c.renderer == "string"){
8925             c.renderer = Roo.util.Format[c.renderer];
8926         }
8927         if(typeof c.id == "undefined"){
8928             c.id = Roo.id();
8929         }
8930         if(c.editor && c.editor.xtype){
8931             c.editor  = Roo.factory(c.editor, Roo.grid);
8932         }
8933         if(c.editor && c.editor.isFormField){
8934             c.editor = new Roo.grid.GridEditor(c.editor);
8935         }
8936         this.lookup[c.id] = c;
8937     }
8938     
8939 });
8940
8941 Roo.grid.ColumnModel.defaultRenderer = function(value)
8942 {
8943     if(typeof value == "object") {
8944         return value;
8945     }
8946         if(typeof value == "string" && value.length < 1){
8947             return "&#160;";
8948         }
8949     
8950         return String.format("{0}", value);
8951 };
8952
8953 // Alias for backwards compatibility
8954 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
8955 /*
8956  * Based on:
8957  * Ext JS Library 1.1.1
8958  * Copyright(c) 2006-2007, Ext JS, LLC.
8959  *
8960  * Originally Released Under LGPL - original licence link has changed is not relivant.
8961  *
8962  * Fork - LGPL
8963  * <script type="text/javascript">
8964  */
8965  
8966 /**
8967  * @class Roo.LoadMask
8968  * A simple utility class for generically masking elements while loading data.  If the element being masked has
8969  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
8970  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
8971  * element's UpdateManager load indicator and will be destroyed after the initial load.
8972  * @constructor
8973  * Create a new LoadMask
8974  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
8975  * @param {Object} config The config object
8976  */
8977 Roo.LoadMask = function(el, config){
8978     this.el = Roo.get(el);
8979     Roo.apply(this, config);
8980     if(this.store){
8981         this.store.on('beforeload', this.onBeforeLoad, this);
8982         this.store.on('load', this.onLoad, this);
8983         this.store.on('loadexception', this.onLoadException, this);
8984         this.removeMask = false;
8985     }else{
8986         var um = this.el.getUpdateManager();
8987         um.showLoadIndicator = false; // disable the default indicator
8988         um.on('beforeupdate', this.onBeforeLoad, this);
8989         um.on('update', this.onLoad, this);
8990         um.on('failure', this.onLoad, this);
8991         this.removeMask = true;
8992     }
8993 };
8994
8995 Roo.LoadMask.prototype = {
8996     /**
8997      * @cfg {Boolean} removeMask
8998      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
8999      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
9000      */
9001     removeMask : false,
9002     /**
9003      * @cfg {String} msg
9004      * The text to display in a centered loading message box (defaults to 'Loading...')
9005      */
9006     msg : 'Loading...',
9007     /**
9008      * @cfg {String} msgCls
9009      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
9010      */
9011     msgCls : 'x-mask-loading',
9012
9013     /**
9014      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
9015      * @type Boolean
9016      */
9017     disabled: false,
9018
9019     /**
9020      * Disables the mask to prevent it from being displayed
9021      */
9022     disable : function(){
9023        this.disabled = true;
9024     },
9025
9026     /**
9027      * Enables the mask so that it can be displayed
9028      */
9029     enable : function(){
9030         this.disabled = false;
9031     },
9032     
9033     onLoadException : function()
9034     {
9035         Roo.log(arguments);
9036         
9037         if (typeof(arguments[3]) != 'undefined') {
9038             Roo.MessageBox.alert("Error loading",arguments[3]);
9039         } 
9040         /*
9041         try {
9042             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
9043                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
9044             }   
9045         } catch(e) {
9046             
9047         }
9048         */
9049     
9050         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
9051     },
9052     // private
9053     onLoad : function()
9054     {
9055         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
9056     },
9057
9058     // private
9059     onBeforeLoad : function(){
9060         if(!this.disabled){
9061             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
9062         }
9063     },
9064
9065     // private
9066     destroy : function(){
9067         if(this.store){
9068             this.store.un('beforeload', this.onBeforeLoad, this);
9069             this.store.un('load', this.onLoad, this);
9070             this.store.un('loadexception', this.onLoadException, this);
9071         }else{
9072             var um = this.el.getUpdateManager();
9073             um.un('beforeupdate', this.onBeforeLoad, this);
9074             um.un('update', this.onLoad, this);
9075             um.un('failure', this.onLoad, this);
9076         }
9077     }
9078 };/**
9079  * @class Roo.bootstrap.Table
9080  * @licence LGBL
9081  * @extends Roo.bootstrap.Component
9082  * @children Roo.bootstrap.TableBody
9083  * Bootstrap Table class.  This class represents the primary interface of a component based grid control.
9084  * Similar to Roo.grid.Grid
9085  * <pre><code>
9086  var table = Roo.factory({
9087     xtype : 'Table',
9088     xns : Roo.bootstrap,
9089     autoSizeColumns: true,
9090     
9091     
9092     store : {
9093         xtype : 'Store',
9094         xns : Roo.data,
9095         remoteSort : true,
9096         sortInfo : { direction : 'ASC', field: 'name' },
9097         proxy : {
9098            xtype : 'HttpProxy',
9099            xns : Roo.data,
9100            method : 'GET',
9101            url : 'https://example.com/some.data.url.json'
9102         },
9103         reader : {
9104            xtype : 'JsonReader',
9105            xns : Roo.data,
9106            fields : [ 'id', 'name', whatever' ],
9107            id : 'id',
9108            root : 'data'
9109         }
9110     },
9111     cm : [
9112         {
9113             xtype : 'ColumnModel',
9114             xns : Roo.grid,
9115             align : 'center',
9116             cursor : 'pointer',
9117             dataIndex : 'is_in_group',
9118             header : "Name",
9119             sortable : true,
9120             renderer : function(v, x , r) {  
9121             
9122                 return String.format("{0}", v)
9123             }
9124             width : 3
9125         } // more columns..
9126     ],
9127     selModel : {
9128         xtype : 'RowSelectionModel',
9129         xns : Roo.bootstrap.Table
9130         // you can add listeners to catch selection change here....
9131     }
9132      
9133
9134  });
9135  // set any options
9136  grid.render(Roo.get("some-div"));
9137 </code></pre>
9138
9139 Currently the Table  uses multiple headers to try and handle XL / Medium etc... styling
9140
9141
9142
9143  *
9144  * @cfg {Roo.grid.AbstractSelectionModel} sm The selection model to use (cell selection is not supported yet)
9145  * @cfg {Roo.data.Store} store The data store to use
9146  * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
9147  * 
9148  * @cfg {String} cls table class
9149  *
9150  *
9151  * @cfg {string} empty_results  Text to display for no results 
9152  * @cfg {boolean} striped Should the rows be alternative striped
9153  * @cfg {boolean} bordered Add borders to the table
9154  * @cfg {boolean} hover Add hover highlighting
9155  * @cfg {boolean} condensed Format condensed
9156  * @cfg {boolean} responsive default false - if this is on, columns are rendered with col-xs-4 etc. classes, otherwise columns will be sized by CSS,
9157  *                also adds table-responsive (see bootstrap docs for details)
9158  * @cfg {Boolean} loadMask (true|false) default false
9159  * @cfg {Boolean} footerShow (true|false) generate tfoot, default true
9160  * @cfg {Boolean} headerShow (true|false) generate thead, default true
9161  * @cfg {Boolean} rowSelection (true|false) default false
9162  * @cfg {Boolean} cellSelection (true|false) default false
9163  * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header (with resizable columns)
9164  * @cfg {Roo.bootstrap.PagingToolbar} footer  a paging toolbar
9165  * @cfg {Boolean} lazyLoad  auto load data while scrolling to the end (default false)
9166  * @cfg {Boolean} auto_hide_footer  auto hide footer if only one page (default false)
9167  * @cfg {Boolean} enableColumnResize default true if columns can be resized = needs scrollBody to be set to work (drag/drop)
9168  *
9169  * 
9170  * @cfg {Number} minColumnWidth default 50 pixels minimum column width 
9171  * 
9172  * @constructor
9173  * Create a new Table
9174  * @param {Object} config The config object
9175  */
9176
9177 Roo.bootstrap.Table = function(config)
9178 {
9179     Roo.bootstrap.Table.superclass.constructor.call(this, config);
9180      
9181     // BC...
9182     this.rowSelection = (typeof(config.rowSelection) != 'undefined') ? config.rowSelection : this.rowSelection;
9183     this.cellSelection = (typeof(config.cellSelection) != 'undefined') ? config.cellSelection : this.cellSelection;
9184     this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
9185     this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
9186     
9187     this.view = this; // compat with grid.
9188     
9189     this.sm = this.sm || {xtype: 'RowSelectionModel'};
9190     if (this.sm) {
9191         this.sm.grid = this;
9192         this.selModel = Roo.factory(this.sm, Roo.grid);
9193         this.sm = this.selModel;
9194         this.sm.xmodule = this.xmodule || false;
9195     }
9196     
9197     if (this.cm && typeof(this.cm.config) == 'undefined') {
9198         this.colModel = new Roo.grid.ColumnModel(this.cm);
9199         this.cm = this.colModel;
9200         this.cm.xmodule = this.xmodule || false;
9201     }
9202     if (this.store) {
9203         this.store= Roo.factory(this.store, Roo.data);
9204         this.ds = this.store;
9205         this.ds.xmodule = this.xmodule || false;
9206          
9207     }
9208     if (this.footer && this.store) {
9209         this.footer.dataSource = this.ds;
9210         this.footer = Roo.factory(this.footer);
9211     }
9212     
9213     /** @private */
9214     this.addEvents({
9215         /**
9216          * @event cellclick
9217          * Fires when a cell is clicked
9218          * @param {Roo.bootstrap.Table} this
9219          * @param {Roo.Element} el
9220          * @param {Number} rowIndex
9221          * @param {Number} columnIndex
9222          * @param {Roo.EventObject} e
9223          */
9224         "cellclick" : true,
9225         /**
9226          * @event celldblclick
9227          * Fires when a cell is double clicked
9228          * @param {Roo.bootstrap.Table} this
9229          * @param {Roo.Element} el
9230          * @param {Number} rowIndex
9231          * @param {Number} columnIndex
9232          * @param {Roo.EventObject} e
9233          */
9234         "celldblclick" : true,
9235         /**
9236          * @event rowclick
9237          * Fires when a row is clicked
9238          * @param {Roo.bootstrap.Table} this
9239          * @param {Roo.Element} el
9240          * @param {Number} rowIndex
9241          * @param {Roo.EventObject} e
9242          */
9243         "rowclick" : true,
9244         /**
9245          * @event rowdblclick
9246          * Fires when a row is double clicked
9247          * @param {Roo.bootstrap.Table} this
9248          * @param {Roo.Element} el
9249          * @param {Number} rowIndex
9250          * @param {Roo.EventObject} e
9251          */
9252         "rowdblclick" : true,
9253         /**
9254          * @event mouseover
9255          * Fires when a mouseover occur
9256          * @param {Roo.bootstrap.Table} this
9257          * @param {Roo.Element} el
9258          * @param {Number} rowIndex
9259          * @param {Number} columnIndex
9260          * @param {Roo.EventObject} e
9261          */
9262         "mouseover" : true,
9263         /**
9264          * @event mouseout
9265          * Fires when a mouseout occur
9266          * @param {Roo.bootstrap.Table} this
9267          * @param {Roo.Element} el
9268          * @param {Number} rowIndex
9269          * @param {Number} columnIndex
9270          * @param {Roo.EventObject} e
9271          */
9272         "mouseout" : true,
9273         /**
9274          * @event rowclass
9275          * Fires when a row is rendered, so you can change add a style to it.
9276          * @param {Roo.bootstrap.Table} this
9277          * @param {Object} rowcfg   contains record  rowIndex colIndex and rowClass - set rowClass to add a style.
9278          */
9279         'rowclass' : true,
9280           /**
9281          * @event rowsrendered
9282          * Fires when all the  rows have been rendered
9283          * @param {Roo.bootstrap.Table} this
9284          */
9285         'rowsrendered' : true,
9286         /**
9287          * @event contextmenu
9288          * The raw contextmenu event for the entire grid.
9289          * @param {Roo.EventObject} e
9290          */
9291         "contextmenu" : true,
9292         /**
9293          * @event rowcontextmenu
9294          * Fires when a row is right clicked
9295          * @param {Roo.bootstrap.Table} this
9296          * @param {Number} rowIndex
9297          * @param {Roo.EventObject} e
9298          */
9299         "rowcontextmenu" : true,
9300         /**
9301          * @event cellcontextmenu
9302          * Fires when a cell is right clicked
9303          * @param {Roo.bootstrap.Table} this
9304          * @param {Number} rowIndex
9305          * @param {Number} cellIndex
9306          * @param {Roo.EventObject} e
9307          */
9308          "cellcontextmenu" : true,
9309          /**
9310          * @event headercontextmenu
9311          * Fires when a header is right clicked
9312          * @param {Roo.bootstrap.Table} this
9313          * @param {Number} columnIndex
9314          * @param {Roo.EventObject} e
9315          */
9316         "headercontextmenu" : true,
9317         /**
9318          * @event mousedown
9319          * The raw mousedown event for the entire grid.
9320          * @param {Roo.EventObject} e
9321          */
9322         "mousedown" : true
9323         
9324     });
9325 };
9326
9327 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
9328     
9329     cls: false,
9330     
9331     empty_results : '',
9332     striped : false,
9333     scrollBody : false,
9334     bordered: false,
9335     hover:  false,
9336     condensed : false,
9337     responsive : false,
9338     sm : false,
9339     cm : false,
9340     store : false,
9341     loadMask : false,
9342     footerShow : true,
9343     headerShow : true,
9344     enableColumnResize: true,
9345   
9346     rowSelection : false,
9347     cellSelection : false,
9348     layout : false,
9349
9350     minColumnWidth : 50,
9351     
9352     // Roo.Element - the tbody
9353     bodyEl: false,  // <tbody> Roo.Element - thead element    
9354     headEl: false,  // <thead> Roo.Element - thead element
9355     resizeProxy : false, // proxy element for dragging?
9356
9357
9358     
9359     container: false, // used by gridpanel...
9360     
9361     lazyLoad : false,
9362     
9363     CSS : Roo.util.CSS,
9364     
9365     auto_hide_footer : false,
9366     
9367     view: false, // actually points to this..
9368     
9369     getAutoCreate : function()
9370     {
9371         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
9372         
9373         cfg = {
9374             tag: 'table',
9375             cls : 'table', 
9376             cn : []
9377         };
9378         // this get's auto added by panel.Grid
9379         if (this.scrollBody) {
9380             cfg.cls += ' table-body-fixed';
9381         }    
9382         if (this.striped) {
9383             cfg.cls += ' table-striped';
9384         }
9385         
9386         if (this.hover) {
9387             cfg.cls += ' table-hover';
9388         }
9389         if (this.bordered) {
9390             cfg.cls += ' table-bordered';
9391         }
9392         if (this.condensed) {
9393             cfg.cls += ' table-condensed';
9394         }
9395         
9396         if (this.responsive) {
9397             cfg.cls += ' table-responsive';
9398         }
9399         
9400         if (this.cls) {
9401             cfg.cls+=  ' ' +this.cls;
9402         }
9403         
9404         
9405         
9406         if (this.layout) {
9407             cfg.style = (typeof(cfg.style) == 'undefined') ? ('table-layout:' + this.layout + ';') : (cfg.style + ('table-layout:' + this.layout + ';'));
9408         }
9409         
9410         if(this.store || this.cm){
9411             if(this.headerShow){
9412                 cfg.cn.push(this.renderHeader());
9413             }
9414             
9415             cfg.cn.push(this.renderBody());
9416             
9417             if(this.footerShow){
9418                 cfg.cn.push(this.renderFooter());
9419             }
9420             // where does this come from?
9421             //cfg.cls+=  ' TableGrid';
9422         }
9423         
9424         return { cn : [ cfg ] };
9425     },
9426     
9427     initEvents : function()
9428     {   
9429         if(!this.store || !this.cm){
9430             return;
9431         }
9432         if (this.selModel) {
9433             this.selModel.initEvents();
9434         }
9435         
9436         
9437         //Roo.log('initEvents with ds!!!!');
9438         
9439         this.bodyEl = this.el.select('tbody', true).first();
9440         this.headEl = this.el.select('thead', true).first();
9441         this.mainFoot = this.el.select('tfoot', true).first();
9442         
9443         
9444         
9445         
9446         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
9447             e.on('click', this.sort, this);
9448         }, this);
9449         
9450         
9451         // why is this done????? = it breaks dialogs??
9452         //this.parent().el.setStyle('position', 'relative');
9453         
9454         
9455         if (this.footer) {
9456             this.footer.parentId = this.id;
9457             this.footer.onRender(this.el.select('tfoot tr td').first(), null);
9458             
9459             if(this.lazyLoad){
9460                 this.el.select('tfoot tr td').first().addClass('hide');
9461             }
9462         } 
9463         
9464         if(this.loadMask) {
9465             this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
9466         }
9467         
9468         this.store.on('load', this.onLoad, this);
9469         this.store.on('beforeload', this.onBeforeLoad, this);
9470         this.store.on('update', this.onUpdate, this);
9471         this.store.on('add', this.onAdd, this);
9472         this.store.on("clear", this.clear, this);
9473         
9474         this.el.on("contextmenu", this.onContextMenu, this);
9475         
9476         
9477         this.cm.on("headerchange", this.onHeaderChange, this);
9478         this.cm.on("hiddenchange", this.onHiddenChange, this, arguments);
9479
9480  //?? does bodyEl get replaced on render?
9481         this.bodyEl.on("click", this.onClick, this);
9482         this.bodyEl.on("dblclick", this.onDblClick, this);        
9483         this.bodyEl.on('scroll', this.onBodyScroll, this);
9484
9485         // guessing mainbody will work - this relays usually caught by selmodel at present.
9486         this.relayEvents(this.bodyEl, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
9487   
9488   
9489         this.resizeProxy = Roo.get(document.body).createChild({ cls:"x-grid-resize-proxy", html: '&#160;' });
9490         
9491   
9492         if(this.headEl && this.enableColumnResize !== false && Roo.grid.SplitDragZone){
9493             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
9494         }
9495         
9496         this.initCSS();
9497     },
9498     // Compatibility with grid - we implement all the view features at present.
9499     getView : function()
9500     {
9501         return this;
9502     },
9503     
9504     initCSS : function()
9505     {
9506         
9507         
9508         var cm = this.cm, styles = [];
9509         this.CSS.removeStyleSheet(this.id + '-cssrules');
9510         var headHeight = this.headEl ? this.headEl.dom.clientHeight : 0;
9511         // we can honour xs/sm/md/xl  as widths...
9512         // we first have to decide what widht we are currently at...
9513         var sz = Roo.getGridSize();
9514         
9515         var total = 0;
9516         var last = -1;
9517         var cols = []; // visable cols.
9518         var total_abs = 0;
9519         for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
9520             var w = cm.getColumnWidth(i, false);
9521             if(cm.isHidden(i)){
9522                 cols.push( { rel : false, abs : 0 });
9523                 continue;
9524             }
9525             if (w !== false) {
9526                 cols.push( { rel : false, abs : w });
9527                 total_abs += w;
9528                 last = i; // not really..
9529                 continue;
9530             }
9531             var w = cm.getColumnWidth(i, sz);
9532             if (w > 0) {
9533                 last = i
9534             }
9535             total += w;
9536             cols.push( { rel : w, abs : false });
9537         }
9538         
9539         var avail = this.bodyEl.dom.clientWidth - total_abs;
9540         
9541         var unitWidth = Math.floor(avail / total);
9542         var rem = avail - (unitWidth * total);
9543         
9544         var hidden, width, pos = 0 , splithide , left;
9545         for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
9546             
9547             hidden = 'display:none;';
9548             left = '';
9549             width  = 'width:0px;';
9550             splithide = '';
9551             if(!cm.isHidden(i)){
9552                 hidden = '';
9553                 
9554                 
9555                 // we can honour xs/sm/md/xl ?
9556                 var w = cols[i].rel == false ? cols[i].abs : (cols[i].rel * unitWidth);
9557                 if (w===0) {
9558                     hidden = 'display:none;';
9559                 }
9560                 // width should return a small number...
9561                 if (i == last) {
9562                     w+=rem; // add the remaining with..
9563                 }
9564                 pos += w;
9565                 left = "left:" + (pos -4) + "px;";
9566                 width = "width:" + w+ "px;";
9567                 
9568             }
9569             if (this.responsive) {
9570                 width = '';
9571                 left = '';
9572                 hidden = cm.isHidden(i) ? 'display:none;' : '';
9573                 splithide = 'display: none;';
9574             }
9575             
9576             styles.push( '#' , this.id , ' .x-col-' , i, " {", cm.config[i].css, width, hidden, "}\n" );
9577             if (this.headEl) {
9578                 if (i == last) {
9579                     splithide = 'display:none;';
9580                 }
9581                 
9582                 styles.push('#' , this.id , ' .x-hcol-' , i, " { ", width, hidden," }\n",
9583                             '#' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', (headHeight - 4), "px;}\n",
9584                             // this is the popover version..
9585                             '.popover-inner #' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', 100, "%;}\n"
9586                 );
9587             }
9588             
9589         }
9590         //Roo.log(styles.join(''));
9591         this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules');
9592         
9593     },
9594     
9595     
9596     
9597     onContextMenu : function(e, t)
9598     {
9599         this.processEvent("contextmenu", e);
9600     },
9601     
9602     processEvent : function(name, e)
9603     {
9604         if (name != 'touchstart' ) {
9605             this.fireEvent(name, e);    
9606         }
9607         
9608         var t = e.getTarget();
9609         
9610         var cell = Roo.get(t);
9611         
9612         if(!cell){
9613             return;
9614         }
9615         
9616         if(cell.findParent('tfoot', false, true)){
9617             return;
9618         }
9619         
9620         if(cell.findParent('thead', false, true)){
9621             
9622             if(e.getTarget().nodeName.toLowerCase() != 'th'){
9623                 cell = Roo.get(t).findParent('th', false, true);
9624                 if (!cell) {
9625                     Roo.log("failed to find th in thead?");
9626                     Roo.log(e.getTarget());
9627                     return;
9628                 }
9629             }
9630             
9631             var cellIndex = cell.dom.cellIndex;
9632             
9633             var ename = name == 'touchstart' ? 'click' : name;
9634             this.fireEvent("header" + ename, this, cellIndex, e);
9635             
9636             return;
9637         }
9638         
9639         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9640             cell = Roo.get(t).findParent('td', false, true);
9641             if (!cell) {
9642                 Roo.log("failed to find th in tbody?");
9643                 Roo.log(e.getTarget());
9644                 return;
9645             }
9646         }
9647         
9648         var row = cell.findParent('tr', false, true);
9649         var cellIndex = cell.dom.cellIndex;
9650         var rowIndex = row.dom.rowIndex - 1;
9651         
9652         if(row !== false){
9653             
9654             this.fireEvent("row" + name, this, rowIndex, e);
9655             
9656             if(cell !== false){
9657             
9658                 this.fireEvent("cell" + name, this, rowIndex, cellIndex, e);
9659             }
9660         }
9661         
9662     },
9663     
9664     onMouseover : function(e, el)
9665     {
9666         var cell = Roo.get(el);
9667         
9668         if(!cell){
9669             return;
9670         }
9671         
9672         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9673             cell = cell.findParent('td', false, true);
9674         }
9675         
9676         var row = cell.findParent('tr', false, true);
9677         var cellIndex = cell.dom.cellIndex;
9678         var rowIndex = row.dom.rowIndex - 1; // start from 0
9679         
9680         this.fireEvent('mouseover', this, cell, rowIndex, cellIndex, e);
9681         
9682     },
9683     
9684     onMouseout : function(e, el)
9685     {
9686         var cell = Roo.get(el);
9687         
9688         if(!cell){
9689             return;
9690         }
9691         
9692         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9693             cell = cell.findParent('td', false, true);
9694         }
9695         
9696         var row = cell.findParent('tr', false, true);
9697         var cellIndex = cell.dom.cellIndex;
9698         var rowIndex = row.dom.rowIndex - 1; // start from 0
9699         
9700         this.fireEvent('mouseout', this, cell, rowIndex, cellIndex, e);
9701         
9702     },
9703     
9704     onClick : function(e, el)
9705     {
9706         var cell = Roo.get(el);
9707         
9708         if(!cell || (!this.cellSelection && !this.rowSelection)){
9709             return;
9710         }
9711         
9712         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9713             cell = cell.findParent('td', false, true);
9714         }
9715         
9716         if(!cell || typeof(cell) == 'undefined'){
9717             return;
9718         }
9719         
9720         var row = cell.findParent('tr', false, true);
9721         
9722         if(!row || typeof(row) == 'undefined'){
9723             return;
9724         }
9725         
9726         var cellIndex = cell.dom.cellIndex;
9727         var rowIndex = this.getRowIndex(row);
9728         
9729         // why??? - should these not be based on SelectionModel?
9730         //if(this.cellSelection){
9731             this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
9732         //}
9733         
9734         //if(this.rowSelection){
9735             this.fireEvent('rowclick', this, row, rowIndex, e);
9736         //}
9737          
9738     },
9739         
9740     onDblClick : function(e,el)
9741     {
9742         var cell = Roo.get(el);
9743         
9744         if(!cell || (!this.cellSelection && !this.rowSelection)){
9745             return;
9746         }
9747         
9748         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9749             cell = cell.findParent('td', false, true);
9750         }
9751         
9752         if(!cell || typeof(cell) == 'undefined'){
9753             return;
9754         }
9755         
9756         var row = cell.findParent('tr', false, true);
9757         
9758         if(!row || typeof(row) == 'undefined'){
9759             return;
9760         }
9761         
9762         var cellIndex = cell.dom.cellIndex;
9763         var rowIndex = this.getRowIndex(row);
9764         
9765         if(this.cellSelection){
9766             this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
9767         }
9768         
9769         if(this.rowSelection){
9770             this.fireEvent('rowdblclick', this, row, rowIndex, e);
9771         }
9772     },
9773     findRowIndex : function(el)
9774     {
9775         var cell = Roo.get(el);
9776         if(!cell) {
9777             return false;
9778         }
9779         var row = cell.findParent('tr', false, true);
9780         
9781         if(!row || typeof(row) == 'undefined'){
9782             return false;
9783         }
9784         return this.getRowIndex(row);
9785     },
9786     sort : function(e,el)
9787     {
9788         var col = Roo.get(el);
9789         
9790         if(!col.hasClass('sortable')){
9791             return;
9792         }
9793         
9794         var sort = col.attr('sort');
9795         var dir = 'ASC';
9796         
9797         if(col.select('i', true).first().hasClass('fa-arrow-up')){
9798             dir = 'DESC';
9799         }
9800         
9801         this.store.sortInfo = {field : sort, direction : dir};
9802         
9803         if (this.footer) {
9804             Roo.log("calling footer first");
9805             this.footer.onClick('first');
9806         } else {
9807         
9808             this.store.load({ params : { start : 0 } });
9809         }
9810     },
9811     
9812     renderHeader : function()
9813     {
9814         var header = {
9815             tag: 'thead',
9816             cn : []
9817         };
9818         
9819         var cm = this.cm;
9820         this.totalWidth = 0;
9821         
9822         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
9823             
9824             var config = cm.config[i];
9825             
9826             var c = {
9827                 tag: 'th',
9828                 cls : 'x-hcol-' + i,
9829                 style : '',
9830                 
9831                 html: cm.getColumnHeader(i)
9832             };
9833             
9834             var tooltip = cm.getColumnTooltip(i);
9835             if (tooltip) {
9836                 c.tooltip = tooltip;
9837             }
9838             
9839             
9840             var hh = '';
9841             
9842             if(typeof(config.sortable) != 'undefined' && config.sortable){
9843                 c.cls += ' sortable';
9844                 c.html = '<i class="fa"></i>' + c.html;
9845             }
9846             
9847             // could use BS4 hidden-..-down 
9848             
9849             if(typeof(config.lgHeader) != 'undefined'){
9850                 hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
9851             }
9852             
9853             if(typeof(config.mdHeader) != 'undefined'){
9854                 hh += '<span class="hidden-xs hidden-sm hidden-lg">' + config.mdHeader + '</span>';
9855             }
9856             
9857             if(typeof(config.smHeader) != 'undefined'){
9858                 hh += '<span class="hidden-xs hidden-md hidden-lg">' + config.smHeader + '</span>';
9859             }
9860             
9861             if(typeof(config.xsHeader) != 'undefined'){
9862                 hh += '<span class="hidden-sm hidden-md hidden-lg">' + config.xsHeader + '</span>';
9863             }
9864             
9865             if(hh.length){
9866                 c.html = hh;
9867             }
9868             
9869             if(typeof(config.tooltip) != 'undefined'){
9870                 c.tooltip = config.tooltip;
9871             }
9872             
9873             if(typeof(config.colspan) != 'undefined'){
9874                 c.colspan = config.colspan;
9875             }
9876             
9877             // hidden is handled by CSS now
9878             
9879             if(typeof(config.dataIndex) != 'undefined'){
9880                 c.sort = config.dataIndex;
9881             }
9882             
9883            
9884             
9885             if(typeof(config.align) != 'undefined' && config.align.length){
9886                 c.style += ' text-align:' + config.align + ';';
9887             }
9888             
9889             /* width is done in CSS
9890              *if(typeof(config.width) != 'undefined'){
9891                 c.style += ' width:' + config.width + 'px;';
9892                 this.totalWidth += config.width;
9893             } else {
9894                 this.totalWidth += 100; // assume minimum of 100 per column?
9895             }
9896             */
9897             
9898             if(typeof(config.cls) != 'undefined'){
9899                 c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
9900             }
9901             // this is the bit that doesnt reall work at all...
9902             
9903             if (this.responsive) {
9904                  
9905             
9906                 ['xs','sm','md','lg'].map(function(size){
9907                     
9908                     if(typeof(config[size]) == 'undefined'){
9909                         return;
9910                     }
9911                      
9912                     if (!config[size]) { // 0 = hidden
9913                         // BS 4 '0' is treated as hide that column and below.
9914                         c.cls += ' hidden-' + size + ' hidden' + size + '-down';
9915                         return;
9916                     }
9917                     
9918                     c.cls += ' col-' + size + '-' + config[size] + (
9919                         size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
9920                     );
9921                     
9922                     
9923                 });
9924             }
9925             // at the end?
9926             
9927             c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>';
9928             
9929             
9930             
9931             
9932             header.cn.push(c)
9933         }
9934         
9935         return header;
9936     },
9937     
9938     renderBody : function()
9939     {
9940         var body = {
9941             tag: 'tbody',
9942             cn : [
9943                 {
9944                     tag: 'tr',
9945                     cn : [
9946                         {
9947                             tag : 'td',
9948                             colspan :  this.cm.getColumnCount()
9949                         }
9950                     ]
9951                 }
9952             ]
9953         };
9954         
9955         return body;
9956     },
9957     
9958     renderFooter : function()
9959     {
9960         var footer = {
9961             tag: 'tfoot',
9962             cn : [
9963                 {
9964                     tag: 'tr',
9965                     cn : [
9966                         {
9967                             tag : 'td',
9968                             colspan :  this.cm.getColumnCount()
9969                         }
9970                     ]
9971                 }
9972             ]
9973         };
9974         
9975         return footer;
9976     },
9977     
9978     
9979     
9980     onLoad : function()
9981     {
9982 //        Roo.log('ds onload');
9983         this.clear();
9984         
9985         var _this = this;
9986         var cm = this.cm;
9987         var ds = this.store;
9988         
9989         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
9990             e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
9991             if (_this.store.sortInfo) {
9992                     
9993                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
9994                     e.select('i', true).addClass(['fa-arrow-up']);
9995                 }
9996                 
9997                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
9998                     e.select('i', true).addClass(['fa-arrow-down']);
9999                 }
10000             }
10001         });
10002         
10003         var tbody =  this.bodyEl;
10004               
10005         if(ds.getCount() > 0){
10006             ds.data.each(function(d,rowIndex){
10007                 var row =  this.renderRow(cm, ds, rowIndex);
10008                 
10009                 tbody.createChild(row);
10010                 
10011                 var _this = this;
10012                 
10013                 if(row.cellObjects.length){
10014                     Roo.each(row.cellObjects, function(r){
10015                         _this.renderCellObject(r);
10016                     })
10017                 }
10018                 
10019             }, this);
10020         } else if (this.empty_results.length) {
10021             this.el.mask(this.empty_results, 'no-spinner');
10022         }
10023         
10024         var tfoot = this.el.select('tfoot', true).first();
10025         
10026         if(this.footerShow && this.auto_hide_footer && this.mainFoot){
10027             
10028             this.mainFoot.setVisibilityMode(Roo.Element.DISPLAY).hide();
10029             
10030             var total = this.ds.getTotalCount();
10031             
10032             if(this.footer.pageSize < total){
10033                 this.mainFoot.show();
10034             }
10035         }
10036         
10037         Roo.each(this.el.select('tbody td', true).elements, function(e){
10038             e.on('mouseover', _this.onMouseover, _this);
10039         });
10040         
10041         Roo.each(this.el.select('tbody td', true).elements, function(e){
10042             e.on('mouseout', _this.onMouseout, _this);
10043         });
10044         this.fireEvent('rowsrendered', this);
10045         
10046         this.autoSize();
10047         
10048         this.initCSS(); /// resize cols
10049
10050         
10051     },
10052     
10053     
10054     onUpdate : function(ds,record)
10055     {
10056         this.refreshRow(record);
10057         this.autoSize();
10058     },
10059     
10060     onRemove : function(ds, record, index, isUpdate){
10061         if(isUpdate !== true){
10062             this.fireEvent("beforerowremoved", this, index, record);
10063         }
10064         var bt = this.bodyEl.dom;
10065         
10066         var rows = this.el.select('tbody > tr', true).elements;
10067         
10068         if(typeof(rows[index]) != 'undefined'){
10069             bt.removeChild(rows[index].dom);
10070         }
10071         
10072 //        if(bt.rows[index]){
10073 //            bt.removeChild(bt.rows[index]);
10074 //        }
10075         
10076         if(isUpdate !== true){
10077             //this.stripeRows(index);
10078             //this.syncRowHeights(index, index);
10079             //this.layout();
10080             this.fireEvent("rowremoved", this, index, record);
10081         }
10082     },
10083     
10084     onAdd : function(ds, records, rowIndex)
10085     {
10086         //Roo.log('on Add called');
10087         // - note this does not handle multiple adding very well..
10088         var bt = this.bodyEl.dom;
10089         for (var i =0 ; i < records.length;i++) {
10090             //Roo.log('call insert row Add called on ' + rowIndex + ':' + i);
10091             //Roo.log(records[i]);
10092             //Roo.log(this.store.getAt(rowIndex+i));
10093             this.insertRow(this.store, rowIndex + i, false);
10094             return;
10095         }
10096         
10097     },
10098     
10099     
10100     refreshRow : function(record){
10101         var ds = this.store, index;
10102         if(typeof record == 'number'){
10103             index = record;
10104             record = ds.getAt(index);
10105         }else{
10106             index = ds.indexOf(record);
10107             if (index < 0) {
10108                 return; // should not happen - but seems to 
10109             }
10110         }
10111         this.insertRow(ds, index, true);
10112         this.autoSize();
10113         this.onRemove(ds, record, index+1, true);
10114         this.autoSize();
10115         //this.syncRowHeights(index, index);
10116         //this.layout();
10117         this.fireEvent("rowupdated", this, index, record);
10118     },
10119     // private - called by RowSelection
10120     onRowSelect : function(rowIndex){
10121         var row = this.getRowDom(rowIndex);
10122         row.addClass(['bg-info','info']);
10123     },
10124     // private - called by RowSelection
10125     onRowDeselect : function(rowIndex)
10126     {
10127         if (rowIndex < 0) {
10128             return;
10129         }
10130         var row = this.getRowDom(rowIndex);
10131         row.removeClass(['bg-info','info']);
10132     },
10133       /**
10134      * Focuses the specified row.
10135      * @param {Number} row The row index
10136      */
10137     focusRow : function(row)
10138     {
10139         //Roo.log('GridView.focusRow');
10140         var x = this.bodyEl.dom.scrollLeft;
10141         this.focusCell(row, 0, false);
10142         this.bodyEl.dom.scrollLeft = x;
10143
10144     },
10145      /**
10146      * Focuses the specified cell.
10147      * @param {Number} row The row index
10148      * @param {Number} col The column index
10149      * @param {Boolean} hscroll false to disable horizontal scrolling
10150      */
10151     focusCell : function(row, col, hscroll)
10152     {
10153         //Roo.log('GridView.focusCell');
10154         var el = this.ensureVisible(row, col, hscroll);
10155         // not sure what focusEL achives = it's a <a> pos relative 
10156         //this.focusEl.alignTo(el, "tl-tl");
10157         //if(Roo.isGecko){
10158         //    this.focusEl.focus();
10159         //}else{
10160         //    this.focusEl.focus.defer(1, this.focusEl);
10161         //}
10162     },
10163     
10164      /**
10165      * Scrolls the specified cell into view
10166      * @param {Number} row The row index
10167      * @param {Number} col The column index
10168      * @param {Boolean} hscroll false to disable horizontal scrolling
10169      */
10170     ensureVisible : function(row, col, hscroll)
10171     {
10172         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
10173         //return null; //disable for testing.
10174         if(typeof row != "number"){
10175             row = row.rowIndex;
10176         }
10177         if(row < 0 && row >= this.ds.getCount()){
10178             return  null;
10179         }
10180         col = (col !== undefined ? col : 0);
10181         var cm = this.cm;
10182         while(cm.isHidden(col)){
10183             col++;
10184         }
10185
10186         var el = this.getCellDom(row, col);
10187         if(!el){
10188             return null;
10189         }
10190         var c = this.bodyEl.dom;
10191
10192         var ctop = parseInt(el.offsetTop, 10);
10193         var cleft = parseInt(el.offsetLeft, 10);
10194         var cbot = ctop + el.offsetHeight;
10195         var cright = cleft + el.offsetWidth;
10196
10197         //var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
10198         var ch = 0; //?? header is not withing the area?
10199         var stop = parseInt(c.scrollTop, 10);
10200         var sleft = parseInt(c.scrollLeft, 10);
10201         var sbot = stop + ch;
10202         var sright = sleft + c.clientWidth;
10203         /*
10204         Roo.log('GridView.ensureVisible:' +
10205                 ' ctop:' + ctop +
10206                 ' c.clientHeight:' + c.clientHeight +
10207                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
10208                 ' stop:' + stop +
10209                 ' cbot:' + cbot +
10210                 ' sbot:' + sbot +
10211                 ' ch:' + ch  
10212                 );
10213         */
10214         if(ctop < stop){
10215             c.scrollTop = ctop;
10216             //Roo.log("set scrolltop to ctop DISABLE?");
10217         }else if(cbot > sbot){
10218             //Roo.log("set scrolltop to cbot-ch");
10219             c.scrollTop = cbot-ch;
10220         }
10221
10222         if(hscroll !== false){
10223             if(cleft < sleft){
10224                 c.scrollLeft = cleft;
10225             }else if(cright > sright){
10226                 c.scrollLeft = cright-c.clientWidth;
10227             }
10228         }
10229
10230         return el;
10231     },
10232     
10233     
10234     insertRow : function(dm, rowIndex, isUpdate){
10235         
10236         if(!isUpdate){
10237             this.fireEvent("beforerowsinserted", this, rowIndex);
10238         }
10239             //var s = this.getScrollState();
10240         var row = this.renderRow(this.cm, this.store, rowIndex);
10241         // insert before rowIndex..
10242         var e = this.bodyEl.createChild(row,this.getRowDom(rowIndex));
10243         
10244         var _this = this;
10245                 
10246         if(row.cellObjects.length){
10247             Roo.each(row.cellObjects, function(r){
10248                 _this.renderCellObject(r);
10249             })
10250         }
10251             
10252         if(!isUpdate){
10253             this.fireEvent("rowsinserted", this, rowIndex);
10254             //this.syncRowHeights(firstRow, lastRow);
10255             //this.stripeRows(firstRow);
10256             //this.layout();
10257         }
10258         
10259     },
10260     
10261     
10262     getRowDom : function(rowIndex)
10263     {
10264         var rows = this.el.select('tbody > tr', true).elements;
10265         
10266         return (typeof(rows[rowIndex]) == 'undefined') ? false : rows[rowIndex];
10267         
10268     },
10269     getCellDom : function(rowIndex, colIndex)
10270     {
10271         var row = this.getRowDom(rowIndex);
10272         if (row === false) {
10273             return false;
10274         }
10275         var cols = row.select('td', true).elements;
10276         return (typeof(cols[colIndex]) == 'undefined') ? false : cols[colIndex];
10277         
10278     },
10279     
10280     // returns the object tree for a tr..
10281   
10282     
10283     renderRow : function(cm, ds, rowIndex) 
10284     {
10285         var d = ds.getAt(rowIndex);
10286         
10287         var row = {
10288             tag : 'tr',
10289             cls : 'x-row-' + rowIndex,
10290             cn : []
10291         };
10292             
10293         var cellObjects = [];
10294         
10295         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
10296             var config = cm.config[i];
10297             
10298             var renderer = cm.getRenderer(i);
10299             var value = '';
10300             var id = false;
10301             
10302             if(typeof(renderer) !== 'undefined'){
10303                 value = renderer(d.data[cm.getDataIndex(i)], false, d);
10304             }
10305             // if object are returned, then they are expected to be Roo.bootstrap.Component instances
10306             // and are rendered into the cells after the row is rendered - using the id for the element.
10307             
10308             if(typeof(value) === 'object'){
10309                 id = Roo.id();
10310                 cellObjects.push({
10311                     container : id,
10312                     cfg : value 
10313                 })
10314             }
10315             
10316             var rowcfg = {
10317                 record: d,
10318                 rowIndex : rowIndex,
10319                 colIndex : i,
10320                 rowClass : ''
10321             };
10322
10323             this.fireEvent('rowclass', this, rowcfg);
10324             
10325             var td = {
10326                 tag: 'td',
10327                 // this might end up displaying HTML?
10328                 // this is too messy... - better to only do it on columsn you know are going to be too long
10329                 //tooltip : (typeof(value) === 'object') ? '' : value,
10330                 cls : rowcfg.rowClass + ' x-col-' + i,
10331                 style: '',
10332                 html: (typeof(value) === 'object') ? '' : value
10333             };
10334             
10335             if (id) {
10336                 td.id = id;
10337             }
10338             
10339             if(typeof(config.colspan) != 'undefined'){
10340                 td.colspan = config.colspan;
10341             }
10342             
10343             
10344             
10345             if(typeof(config.align) != 'undefined' && config.align.length){
10346                 td.style += ' text-align:' + config.align + ';';
10347             }
10348             if(typeof(config.valign) != 'undefined' && config.valign.length){
10349                 td.style += ' vertical-align:' + config.valign + ';';
10350             }
10351             /*
10352             if(typeof(config.width) != 'undefined'){
10353                 td.style += ' width:' +  config.width + 'px;';
10354             }
10355             */
10356             
10357             if(typeof(config.cursor) != 'undefined'){
10358                 td.style += ' cursor:' +  config.cursor + ';';
10359             }
10360             
10361             if(typeof(config.cls) != 'undefined'){
10362                 td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
10363             }
10364             if (this.responsive) {
10365                 ['xs','sm','md','lg'].map(function(size){
10366                     
10367                     if(typeof(config[size]) == 'undefined'){
10368                         return;
10369                     }
10370                     
10371                     
10372                       
10373                     if (!config[size]) { // 0 = hidden
10374                         // BS 4 '0' is treated as hide that column and below.
10375                         td.cls += ' hidden-' + size + ' hidden' + size + '-down';
10376                         return;
10377                     }
10378                     
10379                     td.cls += ' col-' + size + '-' + config[size] + (
10380                         size == 'xs' ? (' col-' +   config[size] ) : '' // bs4 col-{num} replaces col-xs
10381                     );
10382                      
10383     
10384                 });
10385             }
10386             row.cn.push(td);
10387            
10388         }
10389         
10390         row.cellObjects = cellObjects;
10391         
10392         return row;
10393           
10394     },
10395     
10396     
10397     
10398     onBeforeLoad : function()
10399     {
10400         this.el.unmask(); // if needed.
10401     },
10402      /**
10403      * Remove all rows
10404      */
10405     clear : function()
10406     {
10407         this.el.select('tbody', true).first().dom.innerHTML = '';
10408     },
10409     /**
10410      * Show or hide a row.
10411      * @param {Number} rowIndex to show or hide
10412      * @param {Boolean} state hide
10413      */
10414     setRowVisibility : function(rowIndex, state)
10415     {
10416         var bt = this.bodyEl.dom;
10417         
10418         var rows = this.el.select('tbody > tr', true).elements;
10419         
10420         if(typeof(rows[rowIndex]) == 'undefined'){
10421             return;
10422         }
10423         rows[rowIndex][ state ? 'removeClass' : 'addClass']('d-none');
10424         
10425     },
10426     
10427     
10428     getSelectionModel : function(){
10429         if(!this.selModel){
10430             this.selModel = new Roo.bootstrap.Table.RowSelectionModel({grid: this});
10431         }
10432         return this.selModel;
10433     },
10434     /*
10435      * Render the Roo.bootstrap object from renderder
10436      */
10437     renderCellObject : function(r)
10438     {
10439         var _this = this;
10440         
10441         r.cfg.parentId = (typeof(r.container) == 'string') ? r.container : r.container.id;
10442         
10443         var t = r.cfg.render(r.container);
10444         
10445         if(r.cfg.cn){
10446             Roo.each(r.cfg.cn, function(c){
10447                 var child = {
10448                     container: t.getChildContainer(),
10449                     cfg: c
10450                 };
10451                 _this.renderCellObject(child);
10452             })
10453         }
10454     },
10455     /**
10456      * get the Row Index from a dom element.
10457      * @param {Roo.Element} row The row to look for
10458      * @returns {Number} the row
10459      */
10460     getRowIndex : function(row)
10461     {
10462         var rowIndex = -1;
10463         
10464         Roo.each(this.el.select('tbody > tr', true).elements, function(el, index){
10465             if(el != row){
10466                 return;
10467             }
10468             
10469             rowIndex = index;
10470         });
10471         
10472         return rowIndex;
10473     },
10474     /**
10475      * get the header TH element for columnIndex
10476      * @param {Number} columnIndex
10477      * @returns {Roo.Element}
10478      */
10479     getHeaderIndex: function(colIndex)
10480     {
10481         var cols = this.headEl.select('th', true).elements;
10482         return cols[colIndex]; 
10483     },
10484     /**
10485      * get the Column Index from a dom element. (using regex on x-hcol-{colid})
10486      * @param {domElement} cell to look for
10487      * @returns {Number} the column
10488      */
10489     getCellIndex : function(cell)
10490     {
10491         var id = String(cell.className).match(Roo.bootstrap.Table.cellRE);
10492         if(id){
10493             return parseInt(id[1], 10);
10494         }
10495         return 0;
10496     },
10497      /**
10498      * Returns the grid's underlying element = used by panel.Grid
10499      * @return {Element} The element
10500      */
10501     getGridEl : function(){
10502         return this.el;
10503     },
10504      /**
10505      * Forces a resize - used by panel.Grid
10506      * @return {Element} The element
10507      */
10508     autoSize : function()
10509     {
10510         //var ctr = Roo.get(this.container.dom.parentElement);
10511         var ctr = Roo.get(this.el.dom);
10512         
10513         var thd = this.getGridEl().select('thead',true).first();
10514         var tbd = this.getGridEl().select('tbody', true).first();
10515         var tfd = this.getGridEl().select('tfoot', true).first();
10516         
10517         var cw = ctr.getWidth();
10518         this.getGridEl().select('tfoot tr, tfoot  td',true).setWidth(cw);
10519         
10520         if (tbd) {
10521             
10522             tbd.setWidth(ctr.getWidth());
10523             // if the body has a max height - and then scrolls - we should perhaps set up the height here
10524             // this needs fixing for various usage - currently only hydra job advers I think..
10525             //tdb.setHeight(
10526             //        ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
10527             //); 
10528             var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
10529             cw -= barsize;
10530         }
10531         cw = Math.max(cw, this.totalWidth);
10532         this.getGridEl().select('tbody tr',true).setWidth(cw);
10533         this.initCSS();
10534         
10535         // resize 'expandable coloumn?
10536         
10537         return; // we doe not have a view in this design..
10538         
10539     },
10540     onBodyScroll: function()
10541     {
10542         //Roo.log("body scrolled');" + this.bodyEl.dom.scrollLeft);
10543         if(this.headEl){
10544             this.headEl.setStyle({
10545                 'position' : 'relative',
10546                 'left': (-1* this.bodyEl.dom.scrollLeft) + 'px'
10547             });
10548         }
10549         
10550         if(this.lazyLoad){
10551             
10552             var scrollHeight = this.bodyEl.dom.scrollHeight;
10553             
10554             var scrollTop = Math.ceil(this.bodyEl.getScroll().top);
10555             
10556             var height = this.bodyEl.getHeight();
10557             
10558             if(scrollHeight - height == scrollTop) {
10559                 
10560                 var total = this.ds.getTotalCount();
10561                 
10562                 if(this.footer.cursor + this.footer.pageSize < total){
10563                     
10564                     this.footer.ds.load({
10565                         params : {
10566                             start : this.footer.cursor + this.footer.pageSize,
10567                             limit : this.footer.pageSize
10568                         },
10569                         add : true
10570                     });
10571                 }
10572             }
10573             
10574         }
10575     },
10576     onColumnSplitterMoved : function(i, diff)
10577     {
10578         this.userResized = true;
10579         
10580         var cm = this.colModel;
10581         
10582         var w = this.getHeaderIndex(i).getWidth() + diff;
10583         
10584         
10585         cm.setColumnWidth(i, w, true);
10586         this.initCSS();
10587         //var cid = cm.getColumnId(i); << not used in this version?
10588        /* Roo.log(['#' + this.id + ' .x-col-' + i, "width", w + "px"]);
10589         
10590         this.CSS.updateRule( '#' + this.id + ' .x-col-' + i, "width", w + "px");
10591         this.CSS.updateRule('#' + this.id + ' .x-hcol-' + i, "width", w + "px");
10592         this.CSS.updateRule('#' + this.id + ' .x-grid-split-' + i, "left", w + "px");
10593 */
10594         //this.updateSplitters();
10595         //this.layout(); << ??
10596         this.fireEvent("columnresize", i, w);
10597     },
10598     onHeaderChange : function()
10599     {
10600         var header = this.renderHeader();
10601         var table = this.el.select('table', true).first();
10602         
10603         this.headEl.remove();
10604         this.headEl = table.createChild(header, this.bodyEl, false);
10605         
10606         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
10607             e.on('click', this.sort, this);
10608         }, this);
10609         
10610         if(this.enableColumnResize !== false && Roo.grid.SplitDragZone){
10611             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
10612         }
10613         
10614     },
10615     
10616     onHiddenChange : function(colModel, colIndex, hidden)
10617     {
10618         /*
10619         this.cm.setHidden()
10620         var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
10621         var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
10622         
10623         this.CSS.updateRule(thSelector, "display", "");
10624         this.CSS.updateRule(tdSelector, "display", "");
10625         
10626         if(hidden){
10627             this.CSS.updateRule(thSelector, "display", "none");
10628             this.CSS.updateRule(tdSelector, "display", "none");
10629         }
10630         */
10631         // onload calls initCSS()
10632         this.onHeaderChange();
10633         this.onLoad();
10634     },
10635     
10636     setColumnWidth: function(col_index, width)
10637     {
10638         // width = "md-2 xs-2..."
10639         if(!this.colModel.config[col_index]) {
10640             return;
10641         }
10642         
10643         var w = width.split(" ");
10644         
10645         var rows = this.el.dom.getElementsByClassName("x-col-"+col_index);
10646         
10647         var h_row = this.el.dom.getElementsByClassName("x-hcol-"+col_index);
10648         
10649         
10650         for(var j = 0; j < w.length; j++) {
10651             
10652             if(!w[j]) {
10653                 continue;
10654             }
10655             
10656             var size_cls = w[j].split("-");
10657             
10658             if(!Number.isInteger(size_cls[1] * 1)) {
10659                 continue;
10660             }
10661             
10662             if(!this.colModel.config[col_index][size_cls[0]]) {
10663                 continue;
10664             }
10665             
10666             if(!h_row[0].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
10667                 continue;
10668             }
10669             
10670             h_row[0].classList.replace(
10671                 "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
10672                 "col-"+size_cls[0]+"-"+size_cls[1]
10673             );
10674             
10675             for(var i = 0; i < rows.length; i++) {
10676                 
10677                 var size_cls = w[j].split("-");
10678                 
10679                 if(!Number.isInteger(size_cls[1] * 1)) {
10680                     continue;
10681                 }
10682                 
10683                 if(!this.colModel.config[col_index][size_cls[0]]) {
10684                     continue;
10685                 }
10686                 
10687                 if(!rows[i].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
10688                     continue;
10689                 }
10690                 
10691                 rows[i].classList.replace(
10692                     "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
10693                     "col-"+size_cls[0]+"-"+size_cls[1]
10694                 );
10695             }
10696             
10697             this.colModel.config[col_index][size_cls[0]] = size_cls[1];
10698         }
10699     }
10700 });
10701
10702 // currently only used to find the split on drag.. 
10703 Roo.bootstrap.Table.cellRE = /(?:.*?)x-grid-(?:hd|cell|split)-([\d]+)(?:.*?)/;
10704
10705 /**
10706  * @depricated
10707 */
10708 Roo.bootstrap.Table.AbstractSelectionModel = Roo.grid.AbstractSelectionModel;
10709 Roo.bootstrap.Table.RowSelectionModel = Roo.grid.RowSelectionModel;
10710 /*
10711  * - LGPL
10712  *
10713  * table cell
10714  * 
10715  */
10716
10717 /**
10718  * @class Roo.bootstrap.TableCell
10719  * @extends Roo.bootstrap.Component
10720  * @children Roo.bootstrap.Component
10721  * @parent Roo.bootstrap.TableRow
10722  * Bootstrap TableCell class
10723  * 
10724  * @cfg {String} html cell contain text
10725  * @cfg {String} cls cell class
10726  * @cfg {String} tag cell tag (td|th) default td
10727  * @cfg {String} abbr Specifies an abbreviated version of the content in a cell
10728  * @cfg {String} align Aligns the content in a cell
10729  * @cfg {String} axis Categorizes cells
10730  * @cfg {String} bgcolor Specifies the background color of a cell
10731  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
10732  * @cfg {Number} colspan Specifies the number of columns a cell should span
10733  * @cfg {String} headers Specifies one or more header cells a cell is related to
10734  * @cfg {Number} height Sets the height of a cell
10735  * @cfg {String} nowrap Specifies that the content inside a cell should not wrap
10736  * @cfg {Number} rowspan Sets the number of rows a cell should span
10737  * @cfg {String} scope Defines a way to associate header cells and data cells in a table
10738  * @cfg {String} valign Vertical aligns the content in a cell
10739  * @cfg {Number} width Specifies the width of a cell
10740  * 
10741  * @constructor
10742  * Create a new TableCell
10743  * @param {Object} config The config object
10744  */
10745
10746 Roo.bootstrap.TableCell = function(config){
10747     Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
10748 };
10749
10750 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component,  {
10751     
10752     html: false,
10753     cls: false,
10754     tag: false,
10755     abbr: false,
10756     align: false,
10757     axis: false,
10758     bgcolor: false,
10759     charoff: false,
10760     colspan: false,
10761     headers: false,
10762     height: false,
10763     nowrap: false,
10764     rowspan: false,
10765     scope: false,
10766     valign: false,
10767     width: false,
10768     
10769     
10770     getAutoCreate : function(){
10771         var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
10772         
10773         cfg = {
10774             tag: 'td'
10775         };
10776         
10777         if(this.tag){
10778             cfg.tag = this.tag;
10779         }
10780         
10781         if (this.html) {
10782             cfg.html=this.html
10783         }
10784         if (this.cls) {
10785             cfg.cls=this.cls
10786         }
10787         if (this.abbr) {
10788             cfg.abbr=this.abbr
10789         }
10790         if (this.align) {
10791             cfg.align=this.align
10792         }
10793         if (this.axis) {
10794             cfg.axis=this.axis
10795         }
10796         if (this.bgcolor) {
10797             cfg.bgcolor=this.bgcolor
10798         }
10799         if (this.charoff) {
10800             cfg.charoff=this.charoff
10801         }
10802         if (this.colspan) {
10803             cfg.colspan=this.colspan
10804         }
10805         if (this.headers) {
10806             cfg.headers=this.headers
10807         }
10808         if (this.height) {
10809             cfg.height=this.height
10810         }
10811         if (this.nowrap) {
10812             cfg.nowrap=this.nowrap
10813         }
10814         if (this.rowspan) {
10815             cfg.rowspan=this.rowspan
10816         }
10817         if (this.scope) {
10818             cfg.scope=this.scope
10819         }
10820         if (this.valign) {
10821             cfg.valign=this.valign
10822         }
10823         if (this.width) {
10824             cfg.width=this.width
10825         }
10826         
10827         
10828         return cfg;
10829     }
10830    
10831 });
10832
10833  
10834
10835  /*
10836  * - LGPL
10837  *
10838  * table row
10839  * 
10840  */
10841
10842 /**
10843  * @class Roo.bootstrap.TableRow
10844  * @extends Roo.bootstrap.Component
10845  * @children Roo.bootstrap.TableCell
10846  * @parent Roo.bootstrap.TableBody
10847  * Bootstrap TableRow class
10848  * @cfg {String} cls row class
10849  * @cfg {String} align Aligns the content in a table row
10850  * @cfg {String} bgcolor Specifies a background color for a table row
10851  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
10852  * @cfg {String} valign Vertical aligns the content in a table row
10853  * 
10854  * @constructor
10855  * Create a new TableRow
10856  * @param {Object} config The config object
10857  */
10858
10859 Roo.bootstrap.TableRow = function(config){
10860     Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
10861 };
10862
10863 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component,  {
10864     
10865     cls: false,
10866     align: false,
10867     bgcolor: false,
10868     charoff: false,
10869     valign: false,
10870     
10871     getAutoCreate : function(){
10872         var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
10873         
10874         cfg = {
10875             tag: 'tr'
10876         };
10877             
10878         if(this.cls){
10879             cfg.cls = this.cls;
10880         }
10881         if(this.align){
10882             cfg.align = this.align;
10883         }
10884         if(this.bgcolor){
10885             cfg.bgcolor = this.bgcolor;
10886         }
10887         if(this.charoff){
10888             cfg.charoff = this.charoff;
10889         }
10890         if(this.valign){
10891             cfg.valign = this.valign;
10892         }
10893         
10894         return cfg;
10895     }
10896    
10897 });
10898
10899  
10900
10901  /*
10902  * - LGPL
10903  *
10904  * table body
10905  * 
10906  */
10907
10908 /**
10909  * @class Roo.bootstrap.TableBody
10910  * @extends Roo.bootstrap.Component
10911  * @children Roo.bootstrap.TableRow
10912  * @parent Roo.bootstrap.Table
10913  * Bootstrap TableBody class
10914  * @cfg {String} cls element class
10915  * @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
10916  * @cfg {String} align Aligns the content inside the element
10917  * @cfg {Number} charoff Sets the number of characters the content inside the element will be aligned from the character specified by the char attribute
10918  * @cfg {String} valign Vertical aligns the content inside the <tbody> element
10919  * 
10920  * @constructor
10921  * Create a new TableBody
10922  * @param {Object} config The config object
10923  */
10924
10925 Roo.bootstrap.TableBody = function(config){
10926     Roo.bootstrap.TableBody.superclass.constructor.call(this, config);
10927 };
10928
10929 Roo.extend(Roo.bootstrap.TableBody, Roo.bootstrap.Component,  {
10930     
10931     cls: false,
10932     tag: false,
10933     align: false,
10934     charoff: false,
10935     valign: false,
10936     
10937     getAutoCreate : function(){
10938         var cfg = Roo.apply({}, Roo.bootstrap.TableBody.superclass.getAutoCreate.call(this));
10939         
10940         cfg = {
10941             tag: 'tbody'
10942         };
10943             
10944         if (this.cls) {
10945             cfg.cls=this.cls
10946         }
10947         if(this.tag){
10948             cfg.tag = this.tag;
10949         }
10950         
10951         if(this.align){
10952             cfg.align = this.align;
10953         }
10954         if(this.charoff){
10955             cfg.charoff = this.charoff;
10956         }
10957         if(this.valign){
10958             cfg.valign = this.valign;
10959         }
10960         
10961         return cfg;
10962     }
10963     
10964     
10965 //    initEvents : function()
10966 //    {
10967 //        
10968 //        if(!this.store){
10969 //            return;
10970 //        }
10971 //        
10972 //        this.store = Roo.factory(this.store, Roo.data);
10973 //        this.store.on('load', this.onLoad, this);
10974 //        
10975 //        this.store.load();
10976 //        
10977 //    },
10978 //    
10979 //    onLoad: function () 
10980 //    {   
10981 //        this.fireEvent('load', this);
10982 //    }
10983 //    
10984 //   
10985 });
10986
10987  
10988
10989  /*
10990  * Based on:
10991  * Ext JS Library 1.1.1
10992  * Copyright(c) 2006-2007, Ext JS, LLC.
10993  *
10994  * Originally Released Under LGPL - original licence link has changed is not relivant.
10995  *
10996  * Fork - LGPL
10997  * <script type="text/javascript">
10998  */
10999
11000 // as we use this in bootstrap.
11001 Roo.namespace('Roo.form');
11002  /**
11003  * @class Roo.form.Action
11004  * Internal Class used to handle form actions
11005  * @constructor
11006  * @param {Roo.form.BasicForm} el The form element or its id
11007  * @param {Object} config Configuration options
11008  */
11009
11010  
11011  
11012 // define the action interface
11013 Roo.form.Action = function(form, options){
11014     this.form = form;
11015     this.options = options || {};
11016 };
11017 /**
11018  * Client Validation Failed
11019  * @const 
11020  */
11021 Roo.form.Action.CLIENT_INVALID = 'client';
11022 /**
11023  * Server Validation Failed
11024  * @const 
11025  */
11026 Roo.form.Action.SERVER_INVALID = 'server';
11027  /**
11028  * Connect to Server Failed
11029  * @const 
11030  */
11031 Roo.form.Action.CONNECT_FAILURE = 'connect';
11032 /**
11033  * Reading Data from Server Failed
11034  * @const 
11035  */
11036 Roo.form.Action.LOAD_FAILURE = 'load';
11037
11038 Roo.form.Action.prototype = {
11039     type : 'default',
11040     failureType : undefined,
11041     response : undefined,
11042     result : undefined,
11043
11044     // interface method
11045     run : function(options){
11046
11047     },
11048
11049     // interface method
11050     success : function(response){
11051
11052     },
11053
11054     // interface method
11055     handleResponse : function(response){
11056
11057     },
11058
11059     // default connection failure
11060     failure : function(response){
11061         
11062         this.response = response;
11063         this.failureType = Roo.form.Action.CONNECT_FAILURE;
11064         this.form.afterAction(this, false);
11065     },
11066
11067     processResponse : function(response){
11068         this.response = response;
11069         if(!response.responseText){
11070             return true;
11071         }
11072         this.result = this.handleResponse(response);
11073         return this.result;
11074     },
11075
11076     // utility functions used internally
11077     getUrl : function(appendParams){
11078         var url = this.options.url || this.form.url || this.form.el.dom.action;
11079         if(appendParams){
11080             var p = this.getParams();
11081             if(p){
11082                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
11083             }
11084         }
11085         return url;
11086     },
11087
11088     getMethod : function(){
11089         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
11090     },
11091
11092     getParams : function(){
11093         var bp = this.form.baseParams;
11094         var p = this.options.params;
11095         if(p){
11096             if(typeof p == "object"){
11097                 p = Roo.urlEncode(Roo.applyIf(p, bp));
11098             }else if(typeof p == 'string' && bp){
11099                 p += '&' + Roo.urlEncode(bp);
11100             }
11101         }else if(bp){
11102             p = Roo.urlEncode(bp);
11103         }
11104         return p;
11105     },
11106
11107     createCallback : function(){
11108         return {
11109             success: this.success,
11110             failure: this.failure,
11111             scope: this,
11112             timeout: (this.form.timeout*1000),
11113             upload: this.form.fileUpload ? this.success : undefined
11114         };
11115     }
11116 };
11117
11118 Roo.form.Action.Submit = function(form, options){
11119     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
11120 };
11121
11122 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
11123     type : 'submit',
11124
11125     haveProgress : false,
11126     uploadComplete : false,
11127     
11128     // uploadProgress indicator.
11129     uploadProgress : function()
11130     {
11131         if (!this.form.progressUrl) {
11132             return;
11133         }
11134         
11135         if (!this.haveProgress) {
11136             Roo.MessageBox.progress("Uploading", "Uploading");
11137         }
11138         if (this.uploadComplete) {
11139            Roo.MessageBox.hide();
11140            return;
11141         }
11142         
11143         this.haveProgress = true;
11144    
11145         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
11146         
11147         var c = new Roo.data.Connection();
11148         c.request({
11149             url : this.form.progressUrl,
11150             params: {
11151                 id : uid
11152             },
11153             method: 'GET',
11154             success : function(req){
11155                //console.log(data);
11156                 var rdata = false;
11157                 var edata;
11158                 try  {
11159                    rdata = Roo.decode(req.responseText)
11160                 } catch (e) {
11161                     Roo.log("Invalid data from server..");
11162                     Roo.log(edata);
11163                     return;
11164                 }
11165                 if (!rdata || !rdata.success) {
11166                     Roo.log(rdata);
11167                     Roo.MessageBox.alert(Roo.encode(rdata));
11168                     return;
11169                 }
11170                 var data = rdata.data;
11171                 
11172                 if (this.uploadComplete) {
11173                    Roo.MessageBox.hide();
11174                    return;
11175                 }
11176                    
11177                 if (data){
11178                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
11179                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
11180                     );
11181                 }
11182                 this.uploadProgress.defer(2000,this);
11183             },
11184        
11185             failure: function(data) {
11186                 Roo.log('progress url failed ');
11187                 Roo.log(data);
11188             },
11189             scope : this
11190         });
11191            
11192     },
11193     
11194     
11195     run : function()
11196     {
11197         // run get Values on the form, so it syncs any secondary forms.
11198         this.form.getValues();
11199         
11200         var o = this.options;
11201         var method = this.getMethod();
11202         var isPost = method == 'POST';
11203         if(o.clientValidation === false || this.form.isValid()){
11204             
11205             if (this.form.progressUrl) {
11206                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
11207                     (new Date() * 1) + '' + Math.random());
11208                     
11209             } 
11210             
11211             
11212             Roo.Ajax.request(Roo.apply(this.createCallback(), {
11213                 form:this.form.el.dom,
11214                 url:this.getUrl(!isPost),
11215                 method: method,
11216                 params:isPost ? this.getParams() : null,
11217                 isUpload: this.form.fileUpload,
11218                 formData : this.form.formData
11219             }));
11220             
11221             this.uploadProgress();
11222
11223         }else if (o.clientValidation !== false){ // client validation failed
11224             this.failureType = Roo.form.Action.CLIENT_INVALID;
11225             this.form.afterAction(this, false);
11226         }
11227     },
11228
11229     success : function(response)
11230     {
11231         this.uploadComplete= true;
11232         if (this.haveProgress) {
11233             Roo.MessageBox.hide();
11234         }
11235         
11236         
11237         var result = this.processResponse(response);
11238         if(result === true || result.success){
11239             this.form.afterAction(this, true);
11240             return;
11241         }
11242         if(result.errors){
11243             this.form.markInvalid(result.errors);
11244             this.failureType = Roo.form.Action.SERVER_INVALID;
11245         }
11246         this.form.afterAction(this, false);
11247     },
11248     failure : function(response)
11249     {
11250         this.uploadComplete= true;
11251         if (this.haveProgress) {
11252             Roo.MessageBox.hide();
11253         }
11254         
11255         this.response = response;
11256         this.failureType = Roo.form.Action.CONNECT_FAILURE;
11257         this.form.afterAction(this, false);
11258     },
11259     
11260     handleResponse : function(response){
11261         if(this.form.errorReader){
11262             var rs = this.form.errorReader.read(response);
11263             var errors = [];
11264             if(rs.records){
11265                 for(var i = 0, len = rs.records.length; i < len; i++) {
11266                     var r = rs.records[i];
11267                     errors[i] = r.data;
11268                 }
11269             }
11270             if(errors.length < 1){
11271                 errors = null;
11272             }
11273             return {
11274                 success : rs.success,
11275                 errors : errors
11276             };
11277         }
11278         var ret = false;
11279         try {
11280             ret = Roo.decode(response.responseText);
11281         } catch (e) {
11282             ret = {
11283                 success: false,
11284                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
11285                 errors : []
11286             };
11287         }
11288         return ret;
11289         
11290     }
11291 });
11292
11293
11294 Roo.form.Action.Load = function(form, options){
11295     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
11296     this.reader = this.form.reader;
11297 };
11298
11299 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
11300     type : 'load',
11301
11302     run : function(){
11303         
11304         Roo.Ajax.request(Roo.apply(
11305                 this.createCallback(), {
11306                     method:this.getMethod(),
11307                     url:this.getUrl(false),
11308                     params:this.getParams()
11309         }));
11310     },
11311
11312     success : function(response){
11313         
11314         var result = this.processResponse(response);
11315         if(result === true || !result.success || !result.data){
11316             this.failureType = Roo.form.Action.LOAD_FAILURE;
11317             this.form.afterAction(this, false);
11318             return;
11319         }
11320         this.form.clearInvalid();
11321         this.form.setValues(result.data);
11322         this.form.afterAction(this, true);
11323     },
11324
11325     handleResponse : function(response){
11326         if(this.form.reader){
11327             var rs = this.form.reader.read(response);
11328             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
11329             return {
11330                 success : rs.success,
11331                 data : data
11332             };
11333         }
11334         return Roo.decode(response.responseText);
11335     }
11336 });
11337
11338 Roo.form.Action.ACTION_TYPES = {
11339     'load' : Roo.form.Action.Load,
11340     'submit' : Roo.form.Action.Submit
11341 };/*
11342  * - LGPL
11343  *
11344  * form
11345  *
11346  */
11347
11348 /**
11349  * @class Roo.bootstrap.form.Form
11350  * @extends Roo.bootstrap.Component
11351  * @children Roo.bootstrap.Component
11352  * Bootstrap Form class
11353  * @cfg {String} method  GET | POST (default POST)
11354  * @cfg {String} labelAlign top | left (default top)
11355  * @cfg {String} align left  | right - for navbars
11356  * @cfg {Boolean} loadMask load mask when submit (default true)
11357
11358  *
11359  * @constructor
11360  * Create a new Form
11361  * @param {Object} config The config object
11362  */
11363
11364
11365 Roo.bootstrap.form.Form = function(config){
11366     
11367     Roo.bootstrap.form.Form.superclass.constructor.call(this, config);
11368     
11369     Roo.bootstrap.form.Form.popover.apply();
11370     
11371     this.addEvents({
11372         /**
11373          * @event clientvalidation
11374          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
11375          * @param {Form} this
11376          * @param {Boolean} valid true if the form has passed client-side validation
11377          */
11378         clientvalidation: true,
11379         /**
11380          * @event beforeaction
11381          * Fires before any action is performed. Return false to cancel the action.
11382          * @param {Form} this
11383          * @param {Action} action The action to be performed
11384          */
11385         beforeaction: true,
11386         /**
11387          * @event actionfailed
11388          * Fires when an action fails.
11389          * @param {Form} this
11390          * @param {Action} action The action that failed
11391          */
11392         actionfailed : true,
11393         /**
11394          * @event actioncomplete
11395          * Fires when an action is completed.
11396          * @param {Form} this
11397          * @param {Action} action The action that completed
11398          */
11399         actioncomplete : true
11400     });
11401 };
11402
11403 Roo.extend(Roo.bootstrap.form.Form, Roo.bootstrap.Component,  {
11404
11405      /**
11406      * @cfg {String} method
11407      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
11408      */
11409     method : 'POST',
11410     /**
11411      * @cfg {String} url
11412      * The URL to use for form actions if one isn't supplied in the action options.
11413      */
11414     /**
11415      * @cfg {Boolean} fileUpload
11416      * Set to true if this form is a file upload.
11417      */
11418
11419     /**
11420      * @cfg {Object} baseParams
11421      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
11422      */
11423
11424     /**
11425      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
11426      */
11427     timeout: 30,
11428     /**
11429      * @cfg {Sting} align (left|right) for navbar forms
11430      */
11431     align : 'left',
11432
11433     // private
11434     activeAction : null,
11435
11436     /**
11437      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
11438      * element by passing it or its id or mask the form itself by passing in true.
11439      * @type Mixed
11440      */
11441     waitMsgTarget : false,
11442
11443     loadMask : true,
11444     
11445     /**
11446      * @cfg {Boolean} errorMask (true|false) default false
11447      */
11448     errorMask : false,
11449     
11450     /**
11451      * @cfg {Number} maskOffset Default 100
11452      */
11453     maskOffset : 100,
11454     
11455     /**
11456      * @cfg {Boolean} maskBody
11457      */
11458     maskBody : false,
11459
11460     getAutoCreate : function(){
11461
11462         var cfg = {
11463             tag: 'form',
11464             method : this.method || 'POST',
11465             id : this.id || Roo.id(),
11466             cls : ''
11467         };
11468         if (this.parent().xtype.match(/^Nav/)) {
11469             cfg.cls = 'navbar-form form-inline navbar-' + this.align;
11470
11471         }
11472
11473         if (this.labelAlign == 'left' ) {
11474             cfg.cls += ' form-horizontal';
11475         }
11476
11477
11478         return cfg;
11479     },
11480     initEvents : function()
11481     {
11482         this.el.on('submit', this.onSubmit, this);
11483         // this was added as random key presses on the form where triggering form submit.
11484         this.el.on('keypress', function(e) {
11485             if (e.getCharCode() != 13) {
11486                 return true;
11487             }
11488             // we might need to allow it for textareas.. and some other items.
11489             // check e.getTarget().
11490
11491             if(e.getTarget().nodeName.toLowerCase() === 'textarea'){
11492                 return true;
11493             }
11494
11495             Roo.log("keypress blocked");
11496
11497             e.preventDefault();
11498             return false;
11499         });
11500         
11501     },
11502     // private
11503     onSubmit : function(e){
11504         e.stopEvent();
11505     },
11506
11507      /**
11508      * Returns true if client-side validation on the form is successful.
11509      * @return Boolean
11510      */
11511     isValid : function(){
11512         var items = this.getItems();
11513         var valid = true;
11514         var target = false;
11515         
11516         items.each(function(f){
11517             
11518             if(f.validate()){
11519                 return;
11520             }
11521             
11522             Roo.log('invalid field: ' + f.name);
11523             
11524             valid = false;
11525
11526             if(!target && f.el.isVisible(true)){
11527                 target = f;
11528             }
11529            
11530         });
11531         
11532         if(this.errorMask && !valid){
11533             Roo.bootstrap.form.Form.popover.mask(this, target);
11534         }
11535         
11536         return valid;
11537     },
11538     
11539     /**
11540      * Returns true if any fields in this form have changed since their original load.
11541      * @return Boolean
11542      */
11543     isDirty : function(){
11544         var dirty = false;
11545         var items = this.getItems();
11546         items.each(function(f){
11547            if(f.isDirty()){
11548                dirty = true;
11549                return false;
11550            }
11551            return true;
11552         });
11553         return dirty;
11554     },
11555      /**
11556      * Performs a predefined action (submit or load) or custom actions you define on this form.
11557      * @param {String} actionName The name of the action type
11558      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
11559      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
11560      * accept other config options):
11561      * <pre>
11562 Property          Type             Description
11563 ----------------  ---------------  ----------------------------------------------------------------------------------
11564 url               String           The url for the action (defaults to the form's url)
11565 method            String           The form method to use (defaults to the form's method, or POST if not defined)
11566 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
11567 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
11568                                    validate the form on the client (defaults to false)
11569      * </pre>
11570      * @return {BasicForm} this
11571      */
11572     doAction : function(action, options){
11573         if(typeof action == 'string'){
11574             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
11575         }
11576         if(this.fireEvent('beforeaction', this, action) !== false){
11577             this.beforeAction(action);
11578             action.run.defer(100, action);
11579         }
11580         return this;
11581     },
11582
11583     // private
11584     beforeAction : function(action){
11585         var o = action.options;
11586         
11587         if(this.loadMask){
11588             
11589             if(this.maskBody){
11590                 Roo.get(document.body).mask(o.waitMsg || "Sending", 'x-mask-loading')
11591             } else {
11592                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
11593             }
11594         }
11595         // not really supported yet.. ??
11596
11597         //if(this.waitMsgTarget === true){
11598         //  this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
11599         //}else if(this.waitMsgTarget){
11600         //    this.waitMsgTarget = Roo.get(this.waitMsgTarget);
11601         //    this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
11602         //}else {
11603         //    Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
11604        // }
11605
11606     },
11607
11608     // private
11609     afterAction : function(action, success){
11610         this.activeAction = null;
11611         var o = action.options;
11612
11613         if(this.loadMask){
11614             
11615             if(this.maskBody){
11616                 Roo.get(document.body).unmask();
11617             } else {
11618                 this.el.unmask();
11619             }
11620         }
11621         
11622         //if(this.waitMsgTarget === true){
11623 //            this.el.unmask();
11624         //}else if(this.waitMsgTarget){
11625         //    this.waitMsgTarget.unmask();
11626         //}else{
11627         //    Roo.MessageBox.updateProgress(1);
11628         //    Roo.MessageBox.hide();
11629        // }
11630         //
11631         if(success){
11632             if(o.reset){
11633                 this.reset();
11634             }
11635             Roo.callback(o.success, o.scope, [this, action]);
11636             this.fireEvent('actioncomplete', this, action);
11637
11638         }else{
11639
11640             // failure condition..
11641             // we have a scenario where updates need confirming.
11642             // eg. if a locking scenario exists..
11643             // we look for { errors : { needs_confirm : true }} in the response.
11644             if (
11645                 (typeof(action.result) != 'undefined')  &&
11646                 (typeof(action.result.errors) != 'undefined')  &&
11647                 (typeof(action.result.errors.needs_confirm) != 'undefined')
11648            ){
11649                 var _t = this;
11650                 Roo.log("not supported yet");
11651                  /*
11652
11653                 Roo.MessageBox.confirm(
11654                     "Change requires confirmation",
11655                     action.result.errorMsg,
11656                     function(r) {
11657                         if (r != 'yes') {
11658                             return;
11659                         }
11660                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
11661                     }
11662
11663                 );
11664                 */
11665
11666
11667                 return;
11668             }
11669
11670             Roo.callback(o.failure, o.scope, [this, action]);
11671             // show an error message if no failed handler is set..
11672             if (!this.hasListener('actionfailed')) {
11673                 Roo.log("need to add dialog support");
11674                 /*
11675                 Roo.MessageBox.alert("Error",
11676                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
11677                         action.result.errorMsg :
11678                         "Saving Failed, please check your entries or try again"
11679                 );
11680                 */
11681             }
11682
11683             this.fireEvent('actionfailed', this, action);
11684         }
11685
11686     },
11687     /**
11688      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
11689      * @param {String} id The value to search for
11690      * @return Field
11691      */
11692     findField : function(id){
11693         var items = this.getItems();
11694         var field = items.get(id);
11695         if(!field){
11696              items.each(function(f){
11697                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
11698                     field = f;
11699                     return false;
11700                 }
11701                 return true;
11702             });
11703         }
11704         return field || null;
11705     },
11706      /**
11707      * Mark fields in this form invalid in bulk.
11708      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
11709      * @return {BasicForm} this
11710      */
11711     markInvalid : function(errors){
11712         if(errors instanceof Array){
11713             for(var i = 0, len = errors.length; i < len; i++){
11714                 var fieldError = errors[i];
11715                 var f = this.findField(fieldError.id);
11716                 if(f){
11717                     f.markInvalid(fieldError.msg);
11718                 }
11719             }
11720         }else{
11721             var field, id;
11722             for(id in errors){
11723                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
11724                     field.markInvalid(errors[id]);
11725                 }
11726             }
11727         }
11728         //Roo.each(this.childForms || [], function (f) {
11729         //    f.markInvalid(errors);
11730         //});
11731
11732         return this;
11733     },
11734
11735     /**
11736      * Set values for fields in this form in bulk.
11737      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
11738      * @return {BasicForm} this
11739      */
11740     setValues : function(values){
11741         if(values instanceof Array){ // array of objects
11742             for(var i = 0, len = values.length; i < len; i++){
11743                 var v = values[i];
11744                 var f = this.findField(v.id);
11745                 if(f){
11746                     f.setValue(v.value);
11747                     if(this.trackResetOnLoad){
11748                         f.originalValue = f.getValue();
11749                     }
11750                 }
11751             }
11752         }else{ // object hash
11753             var field, id;
11754             for(id in values){
11755                 if(typeof values[id] != 'function' && (field = this.findField(id))){
11756
11757                     if (field.setFromData &&
11758                         field.valueField &&
11759                         field.displayField &&
11760                         // combos' with local stores can
11761                         // be queried via setValue()
11762                         // to set their value..
11763                         (field.store && !field.store.isLocal)
11764                         ) {
11765                         // it's a combo
11766                         var sd = { };
11767                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
11768                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
11769                         field.setFromData(sd);
11770
11771                     } else if(field.setFromData && (field.store && !field.store.isLocal)) {
11772                         
11773                         field.setFromData(values);
11774                         
11775                     } else {
11776                         field.setValue(values[id]);
11777                     }
11778
11779
11780                     if(this.trackResetOnLoad){
11781                         field.originalValue = field.getValue();
11782                     }
11783                 }
11784             }
11785         }
11786
11787         //Roo.each(this.childForms || [], function (f) {
11788         //    f.setValues(values);
11789         //});
11790
11791         return this;
11792     },
11793
11794     /**
11795      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
11796      * they are returned as an array.
11797      * @param {Boolean} asString
11798      * @return {Object}
11799      */
11800     getValues : function(asString){
11801         //if (this.childForms) {
11802             // copy values from the child forms
11803         //    Roo.each(this.childForms, function (f) {
11804         //        this.setValues(f.getValues());
11805         //    }, this);
11806         //}
11807
11808
11809
11810         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
11811         if(asString === true){
11812             return fs;
11813         }
11814         return Roo.urlDecode(fs);
11815     },
11816
11817     /**
11818      * Returns the fields in this form as an object with key/value pairs.
11819      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
11820      * @return {Object}
11821      */
11822     getFieldValues : function(with_hidden)
11823     {
11824         var items = this.getItems();
11825         var ret = {};
11826         items.each(function(f){
11827             
11828             if (!f.getName()) {
11829                 return;
11830             }
11831             
11832             var v = f.getValue();
11833             
11834             if (f.inputType =='radio') {
11835                 if (typeof(ret[f.getName()]) == 'undefined') {
11836                     ret[f.getName()] = ''; // empty..
11837                 }
11838
11839                 if (!f.el.dom.checked) {
11840                     return;
11841
11842                 }
11843                 v = f.el.dom.value;
11844
11845             }
11846             
11847             if(f.xtype == 'MoneyField'){
11848                 ret[f.currencyName] = f.getCurrency();
11849             }
11850
11851             // not sure if this supported any more..
11852             if ((typeof(v) == 'object') && f.getRawValue) {
11853                 v = f.getRawValue() ; // dates..
11854             }
11855             // combo boxes where name != hiddenName...
11856             if (f.name !== false && f.name != '' && f.name != f.getName()) {
11857                 ret[f.name] = f.getRawValue();
11858             }
11859             ret[f.getName()] = v;
11860         });
11861
11862         return ret;
11863     },
11864
11865     /**
11866      * Clears all invalid messages in this form.
11867      * @return {BasicForm} this
11868      */
11869     clearInvalid : function(){
11870         var items = this.getItems();
11871
11872         items.each(function(f){
11873            f.clearInvalid();
11874         });
11875
11876         return this;
11877     },
11878
11879     /**
11880      * Resets this form.
11881      * @return {BasicForm} this
11882      */
11883     reset : function(){
11884         var items = this.getItems();
11885         items.each(function(f){
11886             f.reset();
11887         });
11888
11889         Roo.each(this.childForms || [], function (f) {
11890             f.reset();
11891         });
11892
11893
11894         return this;
11895     },
11896     
11897     getItems : function()
11898     {
11899         var r=new Roo.util.MixedCollection(false, function(o){
11900             return o.id || (o.id = Roo.id());
11901         });
11902         var iter = function(el) {
11903             if (el.inputEl) {
11904                 r.add(el);
11905             }
11906             if (!el.items) {
11907                 return;
11908             }
11909             Roo.each(el.items,function(e) {
11910                 iter(e);
11911             });
11912         };
11913
11914         iter(this);
11915         return r;
11916     },
11917     
11918     hideFields : function(items)
11919     {
11920         Roo.each(items, function(i){
11921             
11922             var f = this.findField(i);
11923             
11924             if(!f){
11925                 return;
11926             }
11927             
11928             f.hide();
11929             
11930         }, this);
11931     },
11932     
11933     showFields : function(items)
11934     {
11935         Roo.each(items, function(i){
11936             
11937             var f = this.findField(i);
11938             
11939             if(!f){
11940                 return;
11941             }
11942             
11943             f.show();
11944             
11945         }, this);
11946     }
11947
11948 });
11949
11950 Roo.apply(Roo.bootstrap.form.Form, {
11951     
11952     popover : {
11953         
11954         padding : 5,
11955         
11956         isApplied : false,
11957         
11958         isMasked : false,
11959         
11960         form : false,
11961         
11962         target : false,
11963         
11964         toolTip : false,
11965         
11966         intervalID : false,
11967         
11968         maskEl : false,
11969         
11970         apply : function()
11971         {
11972             if(this.isApplied){
11973                 return;
11974             }
11975             
11976             this.maskEl = {
11977                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
11978                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
11979                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
11980                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
11981             };
11982             
11983             this.maskEl.top.enableDisplayMode("block");
11984             this.maskEl.left.enableDisplayMode("block");
11985             this.maskEl.bottom.enableDisplayMode("block");
11986             this.maskEl.right.enableDisplayMode("block");
11987             
11988             this.toolTip = new Roo.bootstrap.Tooltip({
11989                 cls : 'roo-form-error-popover',
11990                 alignment : {
11991                     'left' : ['r-l', [-2,0], 'right'],
11992                     'right' : ['l-r', [2,0], 'left'],
11993                     'bottom' : ['tl-bl', [0,2], 'top'],
11994                     'top' : [ 'bl-tl', [0,-2], 'bottom']
11995                 }
11996             });
11997             
11998             this.toolTip.render(Roo.get(document.body));
11999
12000             this.toolTip.el.enableDisplayMode("block");
12001             
12002             Roo.get(document.body).on('click', function(){
12003                 this.unmask();
12004             }, this);
12005             
12006             Roo.get(document.body).on('touchstart', function(){
12007                 this.unmask();
12008             }, this);
12009             
12010             this.isApplied = true
12011         },
12012         
12013         mask : function(form, target)
12014         {
12015             this.form = form;
12016             
12017             this.target = target;
12018             
12019             if(!this.form.errorMask || !target.el){
12020                 return;
12021             }
12022             
12023             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
12024             
12025             Roo.log(scrollable);
12026             
12027             var ot = this.target.el.calcOffsetsTo(scrollable);
12028             
12029             var scrollTo = ot[1] - this.form.maskOffset;
12030             
12031             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
12032             
12033             scrollable.scrollTo('top', scrollTo);
12034             
12035             var box = this.target.el.getBox();
12036             Roo.log(box);
12037             var zIndex = Roo.bootstrap.Modal.zIndex++;
12038
12039             
12040             this.maskEl.top.setStyle('position', 'absolute');
12041             this.maskEl.top.setStyle('z-index', zIndex);
12042             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
12043             this.maskEl.top.setLeft(0);
12044             this.maskEl.top.setTop(0);
12045             this.maskEl.top.show();
12046             
12047             this.maskEl.left.setStyle('position', 'absolute');
12048             this.maskEl.left.setStyle('z-index', zIndex);
12049             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
12050             this.maskEl.left.setLeft(0);
12051             this.maskEl.left.setTop(box.y - this.padding);
12052             this.maskEl.left.show();
12053
12054             this.maskEl.bottom.setStyle('position', 'absolute');
12055             this.maskEl.bottom.setStyle('z-index', zIndex);
12056             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
12057             this.maskEl.bottom.setLeft(0);
12058             this.maskEl.bottom.setTop(box.bottom + this.padding);
12059             this.maskEl.bottom.show();
12060
12061             this.maskEl.right.setStyle('position', 'absolute');
12062             this.maskEl.right.setStyle('z-index', zIndex);
12063             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
12064             this.maskEl.right.setLeft(box.right + this.padding);
12065             this.maskEl.right.setTop(box.y - this.padding);
12066             this.maskEl.right.show();
12067
12068             this.toolTip.bindEl = this.target.el;
12069
12070             this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
12071
12072             var tip = this.target.blankText;
12073
12074             if(this.target.getValue() !== '' ) {
12075                 
12076                 if (this.target.invalidText.length) {
12077                     tip = this.target.invalidText;
12078                 } else if (this.target.regexText.length){
12079                     tip = this.target.regexText;
12080                 }
12081             }
12082
12083             this.toolTip.show(tip);
12084
12085             this.intervalID = window.setInterval(function() {
12086                 Roo.bootstrap.form.Form.popover.unmask();
12087             }, 10000);
12088
12089             window.onwheel = function(){ return false;};
12090             
12091             (function(){ this.isMasked = true; }).defer(500, this);
12092             
12093         },
12094         
12095         unmask : function()
12096         {
12097             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
12098                 return;
12099             }
12100             
12101             this.maskEl.top.setStyle('position', 'absolute');
12102             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
12103             this.maskEl.top.hide();
12104
12105             this.maskEl.left.setStyle('position', 'absolute');
12106             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
12107             this.maskEl.left.hide();
12108
12109             this.maskEl.bottom.setStyle('position', 'absolute');
12110             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
12111             this.maskEl.bottom.hide();
12112
12113             this.maskEl.right.setStyle('position', 'absolute');
12114             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
12115             this.maskEl.right.hide();
12116             
12117             this.toolTip.hide();
12118             
12119             this.toolTip.el.hide();
12120             
12121             window.onwheel = function(){ return true;};
12122             
12123             if(this.intervalID){
12124                 window.clearInterval(this.intervalID);
12125                 this.intervalID = false;
12126             }
12127             
12128             this.isMasked = false;
12129             
12130         }
12131         
12132     }
12133     
12134 });
12135
12136 /*
12137  * Based on:
12138  * Ext JS Library 1.1.1
12139  * Copyright(c) 2006-2007, Ext JS, LLC.
12140  *
12141  * Originally Released Under LGPL - original licence link has changed is not relivant.
12142  *
12143  * Fork - LGPL
12144  * <script type="text/javascript">
12145  */
12146 /**
12147  * @class Roo.form.VTypes
12148  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
12149  * @static
12150  */
12151 Roo.form.VTypes = function(){
12152     // closure these in so they are only created once.
12153     var alpha = /^[a-zA-Z_]+$/;
12154     var alphanum = /^[a-zA-Z0-9_]+$/;
12155     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
12156     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
12157
12158     // All these messages and functions are configurable
12159     return {
12160         /**
12161          * The function used to validate email addresses
12162          * @param {String} value The email address
12163          */
12164         'email' : function(v){
12165             return email.test(v);
12166         },
12167         /**
12168          * The error text to display when the email validation function returns false
12169          * @type String
12170          */
12171         'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
12172         /**
12173          * The keystroke filter mask to be applied on email input
12174          * @type RegExp
12175          */
12176         'emailMask' : /[a-z0-9_\.\-@]/i,
12177
12178         /**
12179          * The function used to validate URLs
12180          * @param {String} value The URL
12181          */
12182         'url' : function(v){
12183             return url.test(v);
12184         },
12185         /**
12186          * The error text to display when the url validation function returns false
12187          * @type String
12188          */
12189         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
12190         
12191         /**
12192          * The function used to validate alpha values
12193          * @param {String} value The value
12194          */
12195         'alpha' : function(v){
12196             return alpha.test(v);
12197         },
12198         /**
12199          * The error text to display when the alpha validation function returns false
12200          * @type String
12201          */
12202         'alphaText' : 'This field should only contain letters and _',
12203         /**
12204          * The keystroke filter mask to be applied on alpha input
12205          * @type RegExp
12206          */
12207         'alphaMask' : /[a-z_]/i,
12208
12209         /**
12210          * The function used to validate alphanumeric values
12211          * @param {String} value The value
12212          */
12213         'alphanum' : function(v){
12214             return alphanum.test(v);
12215         },
12216         /**
12217          * The error text to display when the alphanumeric validation function returns false
12218          * @type String
12219          */
12220         'alphanumText' : 'This field should only contain letters, numbers and _',
12221         /**
12222          * The keystroke filter mask to be applied on alphanumeric input
12223          * @type RegExp
12224          */
12225         'alphanumMask' : /[a-z0-9_]/i
12226     };
12227 }();/*
12228  * - LGPL
12229  *
12230  * Input
12231  * 
12232  */
12233
12234 /**
12235  * @class Roo.bootstrap.form.Input
12236  * @extends Roo.bootstrap.Component
12237  * Bootstrap Input class
12238  * @cfg {Boolean} disabled is it disabled
12239  * @cfg {String} inputType (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text)  
12240  * @cfg {String} name name of the input
12241  * @cfg {string} fieldLabel - the label associated
12242  * @cfg {string} placeholder - placeholder to put in text.
12243  * @cfg {string} before - input group add on before
12244  * @cfg {string} after - input group add on after
12245  * @cfg {string} size - (lg|sm) or leave empty..
12246  * @cfg {Number} xs colspan out of 12 for mobile-sized screens
12247  * @cfg {Number} sm colspan out of 12 for tablet-sized screens
12248  * @cfg {Number} md colspan out of 12 for computer-sized screens
12249  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
12250  * @cfg {string} value default value of the input
12251  * @cfg {Number} labelWidth set the width of label 
12252  * @cfg {Number} labellg set the width of label (1-12)
12253  * @cfg {Number} labelmd set the width of label (1-12)
12254  * @cfg {Number} labelsm set the width of label (1-12)
12255  * @cfg {Number} labelxs set the width of label (1-12)
12256  * @cfg {String} labelAlign (top|left)
12257  * @cfg {Boolean} readOnly Specifies that the field should be read-only
12258  * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
12259  * @cfg {String} indicatorpos (left|right) default left
12260  * @cfg {String} capture (user|camera) use for file input only. (default empty)
12261  * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
12262  * @cfg {Boolean} preventMark Do not show tick or cross if error/success
12263  * @cfg {Roo.bootstrap.Button} before Button to show before
12264  * @cfg {Roo.bootstrap.Button} afterButton to show before
12265  * @cfg {String} align (left|center|right) Default left
12266  * @cfg {Boolean} forceFeedback (true|false) Default false
12267  * 
12268  * @constructor
12269  * Create a new Input
12270  * @param {Object} config The config object
12271  */
12272
12273 Roo.bootstrap.form.Input = function(config){
12274     
12275     Roo.bootstrap.form.Input.superclass.constructor.call(this, config);
12276     
12277     this.addEvents({
12278         /**
12279          * @event focus
12280          * Fires when this field receives input focus.
12281          * @param {Roo.form.Field} this
12282          */
12283         focus : true,
12284         /**
12285          * @event blur
12286          * Fires when this field loses input focus.
12287          * @param {Roo.form.Field} this
12288          */
12289         blur : true,
12290         /**
12291          * @event specialkey
12292          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
12293          * {@link Roo.EventObject#getKey} to determine which key was pressed.
12294          * @param {Roo.form.Field} this
12295          * @param {Roo.EventObject} e The event object
12296          */
12297         specialkey : true,
12298         /**
12299          * @event change
12300          * Fires just before the field blurs if the field value has changed.
12301          * @param {Roo.form.Field} this
12302          * @param {Mixed} newValue The new value
12303          * @param {Mixed} oldValue The original value
12304          */
12305         change : true,
12306         /**
12307          * @event invalid
12308          * Fires after the field has been marked as invalid.
12309          * @param {Roo.form.Field} this
12310          * @param {String} msg The validation message
12311          */
12312         invalid : true,
12313         /**
12314          * @event valid
12315          * Fires after the field has been validated with no errors.
12316          * @param {Roo.form.Field} this
12317          */
12318         valid : true,
12319          /**
12320          * @event keyup
12321          * Fires after the key up
12322          * @param {Roo.form.Field} this
12323          * @param {Roo.EventObject}  e The event Object
12324          */
12325         keyup : true,
12326         /**
12327          * @event paste
12328          * Fires after the user pastes into input
12329          * @param {Roo.form.Field} this
12330          * @param {Roo.EventObject}  e The event Object
12331          */
12332         paste : true
12333     });
12334 };
12335
12336 Roo.extend(Roo.bootstrap.form.Input, Roo.bootstrap.Component,  {
12337      /**
12338      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
12339       automatic validation (defaults to "keyup").
12340      */
12341     validationEvent : "keyup",
12342      /**
12343      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
12344      */
12345     validateOnBlur : true,
12346     /**
12347      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
12348      */
12349     validationDelay : 250,
12350      /**
12351      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
12352      */
12353     focusClass : "x-form-focus",  // not needed???
12354     
12355        
12356     /**
12357      * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid
12358      */
12359     invalidClass : "has-warning",
12360     
12361     /**
12362      * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid
12363      */
12364     validClass : "has-success",
12365     
12366     /**
12367      * @cfg {Boolean} hasFeedback (true|false) default true
12368      */
12369     hasFeedback : true,
12370     
12371     /**
12372      * @cfg {String} invalidFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
12373      */
12374     invalidFeedbackClass : "glyphicon-warning-sign",
12375     
12376     /**
12377      * @cfg {String} validFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
12378      */
12379     validFeedbackClass : "glyphicon-ok",
12380     
12381     /**
12382      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
12383      */
12384     selectOnFocus : false,
12385     
12386      /**
12387      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
12388      */
12389     maskRe : null,
12390        /**
12391      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
12392      */
12393     vtype : null,
12394     
12395       /**
12396      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
12397      */
12398     disableKeyFilter : false,
12399     
12400        /**
12401      * @cfg {Boolean} disabled True to disable the field (defaults to false).
12402      */
12403     disabled : false,
12404      /**
12405      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
12406      */
12407     allowBlank : true,
12408     /**
12409      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
12410      */
12411     blankText : "Please complete this mandatory field",
12412     
12413      /**
12414      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
12415      */
12416     minLength : 0,
12417     /**
12418      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
12419      */
12420     maxLength : Number.MAX_VALUE,
12421     /**
12422      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
12423      */
12424     minLengthText : "The minimum length for this field is {0}",
12425     /**
12426      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
12427      */
12428     maxLengthText : "The maximum length for this field is {0}",
12429   
12430     
12431     /**
12432      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
12433      * If available, this function will be called only after the basic validators all return true, and will be passed the
12434      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
12435      */
12436     validator : null,
12437     /**
12438      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
12439      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
12440      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
12441      */
12442     regex : null,
12443     /**
12444      * @cfg {String} regexText -- Depricated - use Invalid Text
12445      */
12446     regexText : "",
12447     
12448     /**
12449      * @cfg {String} invalidText The error text to display if {@link #validator} test fails during validation (defaults to "")
12450      */
12451     invalidText : "",
12452     
12453     
12454     
12455     autocomplete: false,
12456     
12457     
12458     fieldLabel : '',
12459     inputType : 'text',
12460     
12461     name : false,
12462     placeholder: false,
12463     before : false,
12464     after : false,
12465     size : false,
12466     hasFocus : false,
12467     preventMark: false,
12468     isFormField : true,
12469     value : '',
12470     labelWidth : 2,
12471     labelAlign : false,
12472     readOnly : false,
12473     align : false,
12474     formatedValue : false,
12475     forceFeedback : false,
12476     
12477     indicatorpos : 'left',
12478     
12479     labellg : 0,
12480     labelmd : 0,
12481     labelsm : 0,
12482     labelxs : 0,
12483     
12484     capture : '',
12485     accept : '',
12486     
12487     parentLabelAlign : function()
12488     {
12489         var parent = this;
12490         while (parent.parent()) {
12491             parent = parent.parent();
12492             if (typeof(parent.labelAlign) !='undefined') {
12493                 return parent.labelAlign;
12494             }
12495         }
12496         return 'left';
12497         
12498     },
12499     
12500     getAutoCreate : function()
12501     {
12502         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
12503         
12504         var id = Roo.id();
12505         
12506         var cfg = {};
12507         
12508         if(this.inputType != 'hidden'){
12509             cfg.cls = 'form-group' //input-group
12510         }
12511         
12512         var input =  {
12513             tag: 'input',
12514             id : id,
12515             type : this.inputType,
12516             value : this.value,
12517             cls : 'form-control',
12518             placeholder : this.placeholder || '',
12519             autocomplete : this.autocomplete || 'new-password'
12520         };
12521         if (this.inputType == 'file') {
12522             input.style = 'overflow:hidden'; // why not in CSS?
12523         }
12524         
12525         if(this.capture.length){
12526             input.capture = this.capture;
12527         }
12528         
12529         if(this.accept.length){
12530             input.accept = this.accept + "/*";
12531         }
12532         
12533         if(this.align){
12534             input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
12535         }
12536         
12537         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
12538             input.maxLength = this.maxLength;
12539         }
12540         
12541         if (this.disabled) {
12542             input.disabled=true;
12543         }
12544         
12545         if (this.readOnly) {
12546             input.readonly=true;
12547         }
12548         
12549         if (this.name) {
12550             input.name = this.name;
12551         }
12552         
12553         if (this.size) {
12554             input.cls += ' input-' + this.size;
12555         }
12556         
12557         var settings=this;
12558         ['xs','sm','md','lg'].map(function(size){
12559             if (settings[size]) {
12560                 cfg.cls += ' col-' + size + '-' + settings[size];
12561             }
12562         });
12563         
12564         var inputblock = input;
12565         
12566         var feedback = {
12567             tag: 'span',
12568             cls: 'glyphicon form-control-feedback'
12569         };
12570             
12571         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
12572             
12573             inputblock = {
12574                 cls : 'has-feedback',
12575                 cn :  [
12576                     input,
12577                     feedback
12578                 ] 
12579             };  
12580         }
12581         
12582         if (this.before || this.after) {
12583             
12584             inputblock = {
12585                 cls : 'input-group',
12586                 cn :  [] 
12587             };
12588             
12589             if (this.before && typeof(this.before) == 'string') {
12590                 
12591                 inputblock.cn.push({
12592                     tag :'span',
12593                     cls : 'roo-input-before input-group-addon input-group-prepend input-group-text',
12594                     html : this.before
12595                 });
12596             }
12597             if (this.before && typeof(this.before) == 'object') {
12598                 this.before = Roo.factory(this.before);
12599                 
12600                 inputblock.cn.push({
12601                     tag :'span',
12602                     cls : 'roo-input-before input-group-prepend   input-group-' +
12603                         (this.before.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
12604                 });
12605             }
12606             
12607             inputblock.cn.push(input);
12608             
12609             if (this.after && typeof(this.after) == 'string') {
12610                 inputblock.cn.push({
12611                     tag :'span',
12612                     cls : 'roo-input-after input-group-append input-group-text input-group-addon',
12613                     html : this.after
12614                 });
12615             }
12616             if (this.after && typeof(this.after) == 'object') {
12617                 this.after = Roo.factory(this.after);
12618                 
12619                 inputblock.cn.push({
12620                     tag :'span',
12621                     cls : 'roo-input-after input-group-append  input-group-' +
12622                         (this.after.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
12623                 });
12624             }
12625             
12626             if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
12627                 inputblock.cls += ' has-feedback';
12628                 inputblock.cn.push(feedback);
12629             }
12630         };
12631         var indicator = {
12632             tag : 'i',
12633             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
12634             tooltip : 'This field is required'
12635         };
12636         if (this.allowBlank ) {
12637             indicator.style = this.allowBlank ? ' display:none' : '';
12638         }
12639         if (align ==='left' && this.fieldLabel.length) {
12640             
12641             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
12642             
12643             cfg.cn = [
12644                 indicator,
12645                 {
12646                     tag: 'label',
12647                     'for' :  id,
12648                     cls : 'control-label col-form-label',
12649                     html : this.fieldLabel
12650
12651                 },
12652                 {
12653                     cls : "", 
12654                     cn: [
12655                         inputblock
12656                     ]
12657                 }
12658             ];
12659             
12660             var labelCfg = cfg.cn[1];
12661             var contentCfg = cfg.cn[2];
12662             
12663             if(this.indicatorpos == 'right'){
12664                 cfg.cn = [
12665                     {
12666                         tag: 'label',
12667                         'for' :  id,
12668                         cls : 'control-label col-form-label',
12669                         cn : [
12670                             {
12671                                 tag : 'span',
12672                                 html : this.fieldLabel
12673                             },
12674                             indicator
12675                         ]
12676                     },
12677                     {
12678                         cls : "",
12679                         cn: [
12680                             inputblock
12681                         ]
12682                     }
12683
12684                 ];
12685                 
12686                 labelCfg = cfg.cn[0];
12687                 contentCfg = cfg.cn[1];
12688             
12689             }
12690             
12691             if(this.labelWidth > 12){
12692                 labelCfg.style = "width: " + this.labelWidth + 'px';
12693             }
12694             
12695             if(this.labelWidth < 13 && this.labelmd == 0){
12696                 this.labellg = this.labellg > 0 ? this.labellg : this.labelWidth;
12697             }
12698             
12699             if(this.labellg > 0){
12700                 labelCfg.cls += ' col-lg-' + this.labellg;
12701                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
12702             }
12703             
12704             if(this.labelmd > 0){
12705                 labelCfg.cls += ' col-md-' + this.labelmd;
12706                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
12707             }
12708             
12709             if(this.labelsm > 0){
12710                 labelCfg.cls += ' col-sm-' + this.labelsm;
12711                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
12712             }
12713             
12714             if(this.labelxs > 0){
12715                 labelCfg.cls += ' col-xs-' + this.labelxs;
12716                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
12717             }
12718             
12719             
12720         } else if ( this.fieldLabel.length) {
12721                 
12722             
12723             
12724             cfg.cn = [
12725                 {
12726                     tag : 'i',
12727                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
12728                     tooltip : 'This field is required',
12729                     style : this.allowBlank ? ' display:none' : '' 
12730                 },
12731                 {
12732                     tag: 'label',
12733                    //cls : 'input-group-addon',
12734                     html : this.fieldLabel
12735
12736                 },
12737
12738                inputblock
12739
12740            ];
12741            
12742            if(this.indicatorpos == 'right'){
12743        
12744                 cfg.cn = [
12745                     {
12746                         tag: 'label',
12747                        //cls : 'input-group-addon',
12748                         html : this.fieldLabel
12749
12750                     },
12751                     {
12752                         tag : 'i',
12753                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
12754                         tooltip : 'This field is required',
12755                         style : this.allowBlank ? ' display:none' : '' 
12756                     },
12757
12758                    inputblock
12759
12760                ];
12761
12762             }
12763
12764         } else {
12765             
12766             cfg.cn = [
12767
12768                     inputblock
12769
12770             ];
12771                 
12772                 
12773         };
12774         
12775         if (this.parentType === 'Navbar' &&  this.parent().bar) {
12776            cfg.cls += ' navbar-form';
12777         }
12778         
12779         if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) {
12780             // on BS4 we do this only if not form 
12781             cfg.cls += ' navbar-form';
12782             cfg.tag = 'li';
12783         }
12784         
12785         return cfg;
12786         
12787     },
12788     /**
12789      * return the real input element.
12790      */
12791     inputEl: function ()
12792     {
12793         return this.el.select('input.form-control',true).first();
12794     },
12795     
12796     tooltipEl : function()
12797     {
12798         return this.inputEl();
12799     },
12800     
12801     indicatorEl : function()
12802     {
12803         if (Roo.bootstrap.version == 4) {
12804             return false; // not enabled in v4 yet.
12805         }
12806         
12807         var indicator = this.el.select('i.roo-required-indicator',true).first();
12808         
12809         if(!indicator){
12810             return false;
12811         }
12812         
12813         return indicator;
12814         
12815     },
12816     
12817     setDisabled : function(v)
12818     {
12819         var i  = this.inputEl().dom;
12820         if (!v) {
12821             i.removeAttribute('disabled');
12822             return;
12823             
12824         }
12825         i.setAttribute('disabled','true');
12826     },
12827     initEvents : function()
12828     {
12829           
12830         this.inputEl().on("keydown" , this.fireKey,  this);
12831         this.inputEl().on("focus", this.onFocus,  this);
12832         this.inputEl().on("blur", this.onBlur,  this);
12833         
12834         this.inputEl().relayEvent('keyup', this);
12835         this.inputEl().relayEvent('paste', this);
12836         
12837         this.indicator = this.indicatorEl();
12838         
12839         if(this.indicator){
12840             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? - 
12841         }
12842  
12843         // reference to original value for reset
12844         this.originalValue = this.getValue();
12845         //Roo.form.TextField.superclass.initEvents.call(this);
12846         if(this.validationEvent == 'keyup'){
12847             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
12848             this.inputEl().on('keyup', this.filterValidation, this);
12849         }
12850         else if(this.validationEvent !== false){
12851             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
12852         }
12853         
12854         if(this.selectOnFocus){
12855             this.on("focus", this.preFocus, this);
12856             
12857         }
12858         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
12859             this.inputEl().on("keypress", this.filterKeys, this);
12860         } else {
12861             this.inputEl().relayEvent('keypress', this);
12862         }
12863        /* if(this.grow){
12864             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
12865             this.el.on("click", this.autoSize,  this);
12866         }
12867         */
12868         if(this.inputEl().is('input[type=password]') && Roo.isSafari){
12869             this.inputEl().on('keydown', this.SafariOnKeyDown, this);
12870         }
12871         
12872         if (typeof(this.before) == 'object') {
12873             this.before.render(this.el.select('.roo-input-before',true).first());
12874         }
12875         if (typeof(this.after) == 'object') {
12876             this.after.render(this.el.select('.roo-input-after',true).first());
12877         }
12878         
12879         this.inputEl().on('change', this.onChange, this);
12880         
12881     },
12882     filterValidation : function(e){
12883         if(!e.isNavKeyPress()){
12884             this.validationTask.delay(this.validationDelay);
12885         }
12886     },
12887      /**
12888      * Validates the field value
12889      * @return {Boolean} True if the value is valid, else false
12890      */
12891     validate : function(){
12892         //if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
12893         if(this.disabled || this.validateValue(this.getRawValue())){
12894             this.markValid();
12895             return true;
12896         }
12897         
12898         this.markInvalid();
12899         return false;
12900     },
12901     
12902     
12903     /**
12904      * Validates a value according to the field's validation rules and marks the field as invalid
12905      * if the validation fails
12906      * @param {Mixed} value The value to validate
12907      * @return {Boolean} True if the value is valid, else false
12908      */
12909     validateValue : function(value)
12910     {
12911         if(this.getVisibilityEl().hasClass('hidden')){
12912             return true;
12913         }
12914         
12915         if(value.length < 1)  { // if it's blank
12916             if(this.allowBlank){
12917                 return true;
12918             }
12919             return false;
12920         }
12921         
12922         if(value.length < this.minLength){
12923             return false;
12924         }
12925         if(value.length > this.maxLength){
12926             return false;
12927         }
12928         if(this.vtype){
12929             var vt = Roo.form.VTypes;
12930             if(!vt[this.vtype](value, this)){
12931                 return false;
12932             }
12933         }
12934         if(typeof this.validator == "function"){
12935             var msg = this.validator(value);
12936             if(msg !== true){
12937                 return false;
12938             }
12939             if (typeof(msg) == 'string') {
12940                 this.invalidText = msg;
12941             }
12942         }
12943         
12944         if(this.regex && !this.regex.test(value)){
12945             return false;
12946         }
12947         
12948         return true;
12949     },
12950     
12951      // private
12952     fireKey : function(e){
12953         //Roo.log('field ' + e.getKey());
12954         if(e.isNavKeyPress()){
12955             this.fireEvent("specialkey", this, e);
12956         }
12957     },
12958     focus : function (selectText){
12959         if(this.rendered){
12960             this.inputEl().focus();
12961             if(selectText === true){
12962                 this.inputEl().dom.select();
12963             }
12964         }
12965         return this;
12966     } ,
12967     
12968     onFocus : function(){
12969         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
12970            // this.el.addClass(this.focusClass);
12971         }
12972         if(!this.hasFocus){
12973             this.hasFocus = true;
12974             this.startValue = this.getValue();
12975             this.fireEvent("focus", this);
12976         }
12977     },
12978     
12979     beforeBlur : Roo.emptyFn,
12980
12981     
12982     // private
12983     onBlur : function(){
12984         this.beforeBlur();
12985         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
12986             //this.el.removeClass(this.focusClass);
12987         }
12988         this.hasFocus = false;
12989         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
12990             this.validate();
12991         }
12992         var v = this.getValue();
12993         if(String(v) !== String(this.startValue)){
12994             this.fireEvent('change', this, v, this.startValue);
12995         }
12996         this.fireEvent("blur", this);
12997     },
12998     
12999     onChange : function(e)
13000     {
13001         var v = this.getValue();
13002         if(String(v) !== String(this.startValue)){
13003             this.fireEvent('change', this, v, this.startValue);
13004         }
13005         
13006     },
13007     
13008     /**
13009      * Resets the current field value to the originally loaded value and clears any validation messages
13010      */
13011     reset : function(){
13012         this.setValue(this.originalValue);
13013         this.validate();
13014     },
13015      /**
13016      * Returns the name of the field
13017      * @return {Mixed} name The name field
13018      */
13019     getName: function(){
13020         return this.name;
13021     },
13022      /**
13023      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
13024      * @return {Mixed} value The field value
13025      */
13026     getValue : function(){
13027         
13028         var v = this.inputEl().getValue();
13029         
13030         return v;
13031     },
13032     /**
13033      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
13034      * @return {Mixed} value The field value
13035      */
13036     getRawValue : function(){
13037         var v = this.inputEl().getValue();
13038         
13039         return v;
13040     },
13041     
13042     /**
13043      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
13044      * @param {Mixed} value The value to set
13045      */
13046     setRawValue : function(v){
13047         return this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
13048     },
13049     
13050     selectText : function(start, end){
13051         var v = this.getRawValue();
13052         if(v.length > 0){
13053             start = start === undefined ? 0 : start;
13054             end = end === undefined ? v.length : end;
13055             var d = this.inputEl().dom;
13056             if(d.setSelectionRange){
13057                 d.setSelectionRange(start, end);
13058             }else if(d.createTextRange){
13059                 var range = d.createTextRange();
13060                 range.moveStart("character", start);
13061                 range.moveEnd("character", v.length-end);
13062                 range.select();
13063             }
13064         }
13065     },
13066     
13067     /**
13068      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
13069      * @param {Mixed} value The value to set
13070      */
13071     setValue : function(v){
13072         this.value = v;
13073         if(this.rendered){
13074             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
13075             this.validate();
13076         }
13077     },
13078     
13079     /*
13080     processValue : function(value){
13081         if(this.stripCharsRe){
13082             var newValue = value.replace(this.stripCharsRe, '');
13083             if(newValue !== value){
13084                 this.setRawValue(newValue);
13085                 return newValue;
13086             }
13087         }
13088         return value;
13089     },
13090   */
13091     preFocus : function(){
13092         
13093         if(this.selectOnFocus){
13094             this.inputEl().dom.select();
13095         }
13096     },
13097     filterKeys : function(e){
13098         var k = e.getKey();
13099         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
13100             return;
13101         }
13102         var c = e.getCharCode(), cc = String.fromCharCode(c);
13103         if(Roo.isIE && (e.isSpecialKey() || !cc)){
13104             return;
13105         }
13106         if(!this.maskRe.test(cc)){
13107             e.stopEvent();
13108         }
13109     },
13110      /**
13111      * Clear any invalid styles/messages for this field
13112      */
13113     clearInvalid : function(){
13114         
13115         if(!this.el || this.preventMark){ // not rendered
13116             return;
13117         }
13118         
13119         
13120         this.el.removeClass([this.invalidClass, 'is-invalid']);
13121         
13122         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13123             
13124             var feedback = this.el.select('.form-control-feedback', true).first();
13125             
13126             if(feedback){
13127                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
13128             }
13129             
13130         }
13131         
13132         if(this.indicator){
13133             this.indicator.removeClass('visible');
13134             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13135         }
13136         
13137         this.fireEvent('valid', this);
13138     },
13139     
13140      /**
13141      * Mark this field as valid
13142      */
13143     markValid : function()
13144     {
13145         if(!this.el  || this.preventMark){ // not rendered...
13146             return;
13147         }
13148         
13149         this.el.removeClass([this.invalidClass, this.validClass]);
13150         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13151
13152         var feedback = this.el.select('.form-control-feedback', true).first();
13153             
13154         if(feedback){
13155             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13156         }
13157         
13158         if(this.indicator){
13159             this.indicator.removeClass('visible');
13160             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13161         }
13162         
13163         if(this.disabled){
13164             return;
13165         }
13166         
13167            
13168         if(this.allowBlank && !this.getRawValue().length){
13169             return;
13170         }
13171         if (Roo.bootstrap.version == 3) {
13172             this.el.addClass(this.validClass);
13173         } else {
13174             this.inputEl().addClass('is-valid');
13175         }
13176
13177         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
13178             
13179             var feedback = this.el.select('.form-control-feedback', true).first();
13180             
13181             if(feedback){
13182                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13183                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
13184             }
13185             
13186         }
13187         
13188         this.fireEvent('valid', this);
13189     },
13190     
13191      /**
13192      * Mark this field as invalid
13193      * @param {String} msg The validation message
13194      */
13195     markInvalid : function(msg)
13196     {
13197         if(!this.el  || this.preventMark){ // not rendered
13198             return;
13199         }
13200         
13201         this.el.removeClass([this.invalidClass, this.validClass]);
13202         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13203         
13204         var feedback = this.el.select('.form-control-feedback', true).first();
13205             
13206         if(feedback){
13207             this.el.select('.form-control-feedback', true).first().removeClass(
13208                     [this.invalidFeedbackClass, this.validFeedbackClass]);
13209         }
13210
13211         if(this.disabled){
13212             return;
13213         }
13214         
13215         if(this.allowBlank && !this.getRawValue().length){
13216             return;
13217         }
13218         
13219         if(this.indicator){
13220             this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13221             this.indicator.addClass('visible');
13222         }
13223         if (Roo.bootstrap.version == 3) {
13224             this.el.addClass(this.invalidClass);
13225         } else {
13226             this.inputEl().addClass('is-invalid');
13227         }
13228         
13229         
13230         
13231         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13232             
13233             var feedback = this.el.select('.form-control-feedback', true).first();
13234             
13235             if(feedback){
13236                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13237                 
13238                 if(this.getValue().length || this.forceFeedback){
13239                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
13240                 }
13241                 
13242             }
13243             
13244         }
13245         
13246         this.fireEvent('invalid', this, msg);
13247     },
13248     // private
13249     SafariOnKeyDown : function(event)
13250     {
13251         // this is a workaround for a password hang bug on chrome/ webkit.
13252         if (this.inputEl().dom.type != 'password') {
13253             return;
13254         }
13255         
13256         var isSelectAll = false;
13257         
13258         if(this.inputEl().dom.selectionEnd > 0){
13259             isSelectAll = (this.inputEl().dom.selectionEnd - this.inputEl().dom.selectionStart - this.getValue().length == 0) ? true : false;
13260         }
13261         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
13262             event.preventDefault();
13263             this.setValue('');
13264             return;
13265         }
13266         
13267         if(isSelectAll  && event.getCharCode() > 31 && !event.ctrlKey) { // not backspace and delete key (or ctrl-v)
13268             
13269             event.preventDefault();
13270             // this is very hacky as keydown always get's upper case.
13271             //
13272             var cc = String.fromCharCode(event.getCharCode());
13273             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
13274             
13275         }
13276     },
13277     adjustWidth : function(tag, w){
13278         tag = tag.toLowerCase();
13279         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
13280             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
13281                 if(tag == 'input'){
13282                     return w + 2;
13283                 }
13284                 if(tag == 'textarea'){
13285                     return w-2;
13286                 }
13287             }else if(Roo.isOpera){
13288                 if(tag == 'input'){
13289                     return w + 2;
13290                 }
13291                 if(tag == 'textarea'){
13292                     return w-2;
13293                 }
13294             }
13295         }
13296         return w;
13297     },
13298     
13299     setFieldLabel : function(v)
13300     {
13301         if(!this.rendered){
13302             return;
13303         }
13304         
13305         if(this.indicatorEl()){
13306             var ar = this.el.select('label > span',true);
13307             
13308             if (ar.elements.length) {
13309                 this.el.select('label > span',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13310                 this.fieldLabel = v;
13311                 return;
13312             }
13313             
13314             var br = this.el.select('label',true);
13315             
13316             if(br.elements.length) {
13317                 this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13318                 this.fieldLabel = v;
13319                 return;
13320             }
13321             
13322             Roo.log('Cannot Found any of label > span || label in input');
13323             return;
13324         }
13325         
13326         this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13327         this.fieldLabel = v;
13328         
13329         
13330     }
13331 });
13332
13333  
13334 /*
13335  * - LGPL
13336  *
13337  * Input
13338  * 
13339  */
13340
13341 /**
13342  * @class Roo.bootstrap.form.TextArea
13343  * @extends Roo.bootstrap.form.Input
13344  * Bootstrap TextArea class
13345  * @cfg {Number} cols Specifies the visible width of a text area
13346  * @cfg {Number} rows Specifies the visible number of lines in a text area
13347  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
13348  * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
13349  * @cfg {string} html text
13350  * 
13351  * @constructor
13352  * Create a new TextArea
13353  * @param {Object} config The config object
13354  */
13355
13356 Roo.bootstrap.form.TextArea = function(config){
13357     Roo.bootstrap.form.TextArea.superclass.constructor.call(this, config);
13358    
13359 };
13360
13361 Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input,  {
13362      
13363     cols : false,
13364     rows : 5,
13365     readOnly : false,
13366     warp : 'soft',
13367     resize : false,
13368     value: false,
13369     html: false,
13370     
13371     getAutoCreate : function(){
13372         
13373         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
13374         
13375         var id = Roo.id();
13376         
13377         var cfg = {};
13378         
13379         if(this.inputType != 'hidden'){
13380             cfg.cls = 'form-group' //input-group
13381         }
13382         
13383         var input =  {
13384             tag: 'textarea',
13385             id : id,
13386             warp : this.warp,
13387             rows : this.rows,
13388             value : this.value || '',
13389             html: this.html || '',
13390             cls : 'form-control',
13391             placeholder : this.placeholder || '' 
13392             
13393         };
13394         
13395         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
13396             input.maxLength = this.maxLength;
13397         }
13398         
13399         if(this.resize){
13400             input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
13401         }
13402         
13403         if(this.cols){
13404             input.cols = this.cols;
13405         }
13406         
13407         if (this.readOnly) {
13408             input.readonly = true;
13409         }
13410         
13411         if (this.name) {
13412             input.name = this.name;
13413         }
13414         
13415         if (this.size) {
13416             input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
13417         }
13418         
13419         var settings=this;
13420         ['xs','sm','md','lg'].map(function(size){
13421             if (settings[size]) {
13422                 cfg.cls += ' col-' + size + '-' + settings[size];
13423             }
13424         });
13425         
13426         var inputblock = input;
13427         
13428         if(this.hasFeedback && !this.allowBlank){
13429             
13430             var feedback = {
13431                 tag: 'span',
13432                 cls: 'glyphicon form-control-feedback'
13433             };
13434
13435             inputblock = {
13436                 cls : 'has-feedback',
13437                 cn :  [
13438                     input,
13439                     feedback
13440                 ] 
13441             };  
13442         }
13443         
13444         
13445         if (this.before || this.after) {
13446             
13447             inputblock = {
13448                 cls : 'input-group',
13449                 cn :  [] 
13450             };
13451             if (this.before) {
13452                 inputblock.cn.push({
13453                     tag :'span',
13454                     cls : 'input-group-addon',
13455                     html : this.before
13456                 });
13457             }
13458             
13459             inputblock.cn.push(input);
13460             
13461             if(this.hasFeedback && !this.allowBlank){
13462                 inputblock.cls += ' has-feedback';
13463                 inputblock.cn.push(feedback);
13464             }
13465             
13466             if (this.after) {
13467                 inputblock.cn.push({
13468                     tag :'span',
13469                     cls : 'input-group-addon',
13470                     html : this.after
13471                 });
13472             }
13473             
13474         }
13475         
13476         if (align ==='left' && this.fieldLabel.length) {
13477             cfg.cn = [
13478                 {
13479                     tag: 'label',
13480                     'for' :  id,
13481                     cls : 'control-label',
13482                     html : this.fieldLabel
13483                 },
13484                 {
13485                     cls : "",
13486                     cn: [
13487                         inputblock
13488                     ]
13489                 }
13490
13491             ];
13492             
13493             if(this.labelWidth > 12){
13494                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
13495             }
13496
13497             if(this.labelWidth < 13 && this.labelmd == 0){
13498                 this.labelmd = this.labelWidth;
13499             }
13500
13501             if(this.labellg > 0){
13502                 cfg.cn[0].cls += ' col-lg-' + this.labellg;
13503                 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
13504             }
13505
13506             if(this.labelmd > 0){
13507                 cfg.cn[0].cls += ' col-md-' + this.labelmd;
13508                 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
13509             }
13510
13511             if(this.labelsm > 0){
13512                 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
13513                 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
13514             }
13515
13516             if(this.labelxs > 0){
13517                 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
13518                 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
13519             }
13520             
13521         } else if ( this.fieldLabel.length) {
13522             cfg.cn = [
13523
13524                {
13525                    tag: 'label',
13526                    //cls : 'input-group-addon',
13527                    html : this.fieldLabel
13528
13529                },
13530
13531                inputblock
13532
13533            ];
13534
13535         } else {
13536
13537             cfg.cn = [
13538
13539                 inputblock
13540
13541             ];
13542                 
13543         }
13544         
13545         if (this.disabled) {
13546             input.disabled=true;
13547         }
13548         
13549         return cfg;
13550         
13551     },
13552     /**
13553      * return the real textarea element.
13554      */
13555     inputEl: function ()
13556     {
13557         return this.el.select('textarea.form-control',true).first();
13558     },
13559     
13560     /**
13561      * Clear any invalid styles/messages for this field
13562      */
13563     clearInvalid : function()
13564     {
13565         
13566         if(!this.el || this.preventMark){ // not rendered
13567             return;
13568         }
13569         
13570         var label = this.el.select('label', true).first();
13571         var icon = this.el.select('i.fa-star', true).first();
13572         
13573         if(label && icon){
13574             icon.remove();
13575         }
13576         this.el.removeClass( this.validClass);
13577         this.inputEl().removeClass('is-invalid');
13578          
13579         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13580             
13581             var feedback = this.el.select('.form-control-feedback', true).first();
13582             
13583             if(feedback){
13584                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
13585             }
13586             
13587         }
13588         
13589         this.fireEvent('valid', this);
13590     },
13591     
13592      /**
13593      * Mark this field as valid
13594      */
13595     markValid : function()
13596     {
13597         if(!this.el  || this.preventMark){ // not rendered
13598             return;
13599         }
13600         
13601         this.el.removeClass([this.invalidClass, this.validClass]);
13602         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13603         
13604         var feedback = this.el.select('.form-control-feedback', true).first();
13605             
13606         if(feedback){
13607             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13608         }
13609
13610         if(this.disabled || this.allowBlank){
13611             return;
13612         }
13613         
13614         var label = this.el.select('label', true).first();
13615         var icon = this.el.select('i.fa-star', true).first();
13616         
13617         if(label && icon){
13618             icon.remove();
13619         }
13620         if (Roo.bootstrap.version == 3) {
13621             this.el.addClass(this.validClass);
13622         } else {
13623             this.inputEl().addClass('is-valid');
13624         }
13625         
13626         
13627         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
13628             
13629             var feedback = this.el.select('.form-control-feedback', true).first();
13630             
13631             if(feedback){
13632                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13633                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
13634             }
13635             
13636         }
13637         
13638         this.fireEvent('valid', this);
13639     },
13640     
13641      /**
13642      * Mark this field as invalid
13643      * @param {String} msg The validation message
13644      */
13645     markInvalid : function(msg)
13646     {
13647         if(!this.el  || this.preventMark){ // not rendered
13648             return;
13649         }
13650         
13651         this.el.removeClass([this.invalidClass, this.validClass]);
13652         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13653         
13654         var feedback = this.el.select('.form-control-feedback', true).first();
13655             
13656         if(feedback){
13657             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13658         }
13659
13660         if(this.disabled || this.allowBlank){
13661             return;
13662         }
13663         
13664         var label = this.el.select('label', true).first();
13665         var icon = this.el.select('i.fa-star', true).first();
13666         
13667         if(!this.getValue().length && label && !icon){
13668             this.el.createChild({
13669                 tag : 'i',
13670                 cls : 'text-danger fa fa-lg fa-star',
13671                 tooltip : 'This field is required',
13672                 style : 'margin-right:5px;'
13673             }, label, true);
13674         }
13675         
13676         if (Roo.bootstrap.version == 3) {
13677             this.el.addClass(this.invalidClass);
13678         } else {
13679             this.inputEl().addClass('is-invalid');
13680         }
13681         
13682         // fixme ... this may be depricated need to test..
13683         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13684             
13685             var feedback = this.el.select('.form-control-feedback', true).first();
13686             
13687             if(feedback){
13688                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13689                 
13690                 if(this.getValue().length || this.forceFeedback){
13691                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
13692                 }
13693                 
13694             }
13695             
13696         }
13697         
13698         this.fireEvent('invalid', this, msg);
13699     }
13700 });
13701
13702  
13703 /*
13704  * - LGPL
13705  *
13706  * trigger field - base class for combo..
13707  * 
13708  */
13709  
13710 /**
13711  * @class Roo.bootstrap.form.TriggerField
13712  * @extends Roo.bootstrap.form.Input
13713  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
13714  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
13715  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
13716  * for which you can provide a custom implementation.  For example:
13717  * <pre><code>
13718 var trigger = new Roo.bootstrap.form.TriggerField();
13719 trigger.onTriggerClick = myTriggerFn;
13720 trigger.applyTo('my-field');
13721 </code></pre>
13722  *
13723  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
13724  * {@link Roo.bootstrap.form.DateField} and {@link Roo.bootstrap.form.ComboBox} are perfect examples of this.
13725  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
13726  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
13727  * @cfg {String} caret (search|calendar) BS3 only - carat fa name
13728
13729  * @constructor
13730  * Create a new TriggerField.
13731  * @param {Object} config Configuration options (valid {@Roo.bootstrap.form.Input} config options will also be applied
13732  * to the base TextField)
13733  */
13734 Roo.bootstrap.form.TriggerField = function(config){
13735     this.mimicing = false;
13736     Roo.bootstrap.form.TriggerField.superclass.constructor.call(this, config);
13737 };
13738
13739 Roo.extend(Roo.bootstrap.form.TriggerField, Roo.bootstrap.form.Input,  {
13740     /**
13741      * @cfg {String} triggerClass A CSS class to apply to the trigger
13742      */
13743      /**
13744      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
13745      */
13746     hideTrigger:false,
13747
13748     /**
13749      * @cfg {Boolean} removable (true|false) special filter default false
13750      */
13751     removable : false,
13752     
13753     /** @cfg {Boolean} grow @hide */
13754     /** @cfg {Number} growMin @hide */
13755     /** @cfg {Number} growMax @hide */
13756
13757     /**
13758      * @hide 
13759      * @method
13760      */
13761     autoSize: Roo.emptyFn,
13762     // private
13763     monitorTab : true,
13764     // private
13765     deferHeight : true,
13766
13767     
13768     actionMode : 'wrap',
13769     
13770     caret : false,
13771     
13772     
13773     getAutoCreate : function(){
13774        
13775         var align = this.labelAlign || this.parentLabelAlign();
13776         
13777         var id = Roo.id();
13778         
13779         var cfg = {
13780             cls: 'form-group' //input-group
13781         };
13782         
13783         
13784         var input =  {
13785             tag: 'input',
13786             id : id,
13787             type : this.inputType,
13788             cls : 'form-control',
13789             autocomplete: 'new-password',
13790             placeholder : this.placeholder || '' 
13791             
13792         };
13793         if (this.name) {
13794             input.name = this.name;
13795         }
13796         if (this.size) {
13797             input.cls += ' input-' + this.size;
13798         }
13799         
13800         if (this.disabled) {
13801             input.disabled=true;
13802         }
13803         
13804         var inputblock = input;
13805         
13806         if(this.hasFeedback && !this.allowBlank){
13807             
13808             var feedback = {
13809                 tag: 'span',
13810                 cls: 'glyphicon form-control-feedback'
13811             };
13812             
13813             if(this.removable && !this.editable  ){
13814                 inputblock = {
13815                     cls : 'has-feedback',
13816                     cn :  [
13817                         inputblock,
13818                         {
13819                             tag: 'button',
13820                             html : 'x',
13821                             cls : 'roo-combo-removable-btn close'
13822                         },
13823                         feedback
13824                     ] 
13825                 };
13826             } else {
13827                 inputblock = {
13828                     cls : 'has-feedback',
13829                     cn :  [
13830                         inputblock,
13831                         feedback
13832                     ] 
13833                 };
13834             }
13835
13836         } else {
13837             if(this.removable && !this.editable ){
13838                 inputblock = {
13839                     cls : 'roo-removable',
13840                     cn :  [
13841                         inputblock,
13842                         {
13843                             tag: 'button',
13844                             html : 'x',
13845                             cls : 'roo-combo-removable-btn close'
13846                         }
13847                     ] 
13848                 };
13849             }
13850         }
13851         
13852         if (this.before || this.after) {
13853             
13854             inputblock = {
13855                 cls : 'input-group',
13856                 cn :  [] 
13857             };
13858             if (this.before) {
13859                 inputblock.cn.push({
13860                     tag :'span',
13861                     cls : 'input-group-addon input-group-prepend input-group-text',
13862                     html : this.before
13863                 });
13864             }
13865             
13866             inputblock.cn.push(input);
13867             
13868             if(this.hasFeedback && !this.allowBlank){
13869                 inputblock.cls += ' has-feedback';
13870                 inputblock.cn.push(feedback);
13871             }
13872             
13873             if (this.after) {
13874                 inputblock.cn.push({
13875                     tag :'span',
13876                     cls : 'input-group-addon input-group-append input-group-text',
13877                     html : this.after
13878                 });
13879             }
13880             
13881         };
13882         
13883       
13884         
13885         var ibwrap = inputblock;
13886         
13887         if(this.multiple){
13888             ibwrap = {
13889                 tag: 'ul',
13890                 cls: 'roo-select2-choices',
13891                 cn:[
13892                     {
13893                         tag: 'li',
13894                         cls: 'roo-select2-search-field',
13895                         cn: [
13896
13897                             inputblock
13898                         ]
13899                     }
13900                 ]
13901             };
13902                 
13903         }
13904         
13905         var combobox = {
13906             cls: 'roo-select2-container input-group',
13907             cn: [
13908                  {
13909                     tag: 'input',
13910                     type : 'hidden',
13911                     cls: 'form-hidden-field'
13912                 },
13913                 ibwrap
13914             ]
13915         };
13916         
13917         if(!this.multiple && this.showToggleBtn){
13918             
13919             var caret = {
13920                         tag: 'span',
13921                         cls: 'caret'
13922              };
13923             if (this.caret != false) {
13924                 caret = {
13925                      tag: 'i',
13926                      cls: 'fa fa-' + this.caret
13927                 };
13928                 
13929             }
13930             
13931             combobox.cn.push({
13932                 tag :'span',
13933                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
13934                 cn : [
13935                     Roo.bootstrap.version == 3 ? caret : '',
13936                     {
13937                         tag: 'span',
13938                         cls: 'combobox-clear',
13939                         cn  : [
13940                             {
13941                                 tag : 'i',
13942                                 cls: 'icon-remove'
13943                             }
13944                         ]
13945                     }
13946                 ]
13947
13948             })
13949         }
13950         
13951         if(this.multiple){
13952             combobox.cls += ' roo-select2-container-multi';
13953         }
13954          var indicator = {
13955             tag : 'i',
13956             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
13957             tooltip : 'This field is required'
13958         };
13959         if (Roo.bootstrap.version == 4) {
13960             indicator = {
13961                 tag : 'i',
13962                 style : 'display:none'
13963             };
13964         }
13965         
13966         
13967         if (align ==='left' && this.fieldLabel.length) {
13968             
13969             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
13970
13971             cfg.cn = [
13972                 indicator,
13973                 {
13974                     tag: 'label',
13975                     'for' :  id,
13976                     cls : 'control-label',
13977                     html : this.fieldLabel
13978
13979                 },
13980                 {
13981                     cls : "", 
13982                     cn: [
13983                         combobox
13984                     ]
13985                 }
13986
13987             ];
13988             
13989             var labelCfg = cfg.cn[1];
13990             var contentCfg = cfg.cn[2];
13991             
13992             if(this.indicatorpos == 'right'){
13993                 cfg.cn = [
13994                     {
13995                         tag: 'label',
13996                         'for' :  id,
13997                         cls : 'control-label',
13998                         cn : [
13999                             {
14000                                 tag : 'span',
14001                                 html : this.fieldLabel
14002                             },
14003                             indicator
14004                         ]
14005                     },
14006                     {
14007                         cls : "", 
14008                         cn: [
14009                             combobox
14010                         ]
14011                     }
14012
14013                 ];
14014                 
14015                 labelCfg = cfg.cn[0];
14016                 contentCfg = cfg.cn[1];
14017             }
14018             
14019             if(this.labelWidth > 12){
14020                 labelCfg.style = "width: " + this.labelWidth + 'px';
14021             }
14022             
14023             if(this.labelWidth < 13 && this.labelmd == 0){
14024                 this.labelmd = this.labelWidth;
14025             }
14026             
14027             if(this.labellg > 0){
14028                 labelCfg.cls += ' col-lg-' + this.labellg;
14029                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
14030             }
14031             
14032             if(this.labelmd > 0){
14033                 labelCfg.cls += ' col-md-' + this.labelmd;
14034                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
14035             }
14036             
14037             if(this.labelsm > 0){
14038                 labelCfg.cls += ' col-sm-' + this.labelsm;
14039                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
14040             }
14041             
14042             if(this.labelxs > 0){
14043                 labelCfg.cls += ' col-xs-' + this.labelxs;
14044                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
14045             }
14046             
14047         } else if ( this.fieldLabel.length) {
14048 //                Roo.log(" label");
14049             cfg.cn = [
14050                 indicator,
14051                {
14052                    tag: 'label',
14053                    //cls : 'input-group-addon',
14054                    html : this.fieldLabel
14055
14056                },
14057
14058                combobox
14059
14060             ];
14061             
14062             if(this.indicatorpos == 'right'){
14063                 
14064                 cfg.cn = [
14065                     {
14066                        tag: 'label',
14067                        cn : [
14068                            {
14069                                tag : 'span',
14070                                html : this.fieldLabel
14071                            },
14072                            indicator
14073                        ]
14074
14075                     },
14076                     combobox
14077
14078                 ];
14079
14080             }
14081
14082         } else {
14083             
14084 //                Roo.log(" no label && no align");
14085                 cfg = combobox
14086                      
14087                 
14088         }
14089         
14090         var settings=this;
14091         ['xs','sm','md','lg'].map(function(size){
14092             if (settings[size]) {
14093                 cfg.cls += ' col-' + size + '-' + settings[size];
14094             }
14095         });
14096         
14097         return cfg;
14098         
14099     },
14100     
14101     
14102     
14103     // private
14104     onResize : function(w, h){
14105 //        Roo.bootstrap.form.TriggerField.superclass.onResize.apply(this, arguments);
14106 //        if(typeof w == 'number'){
14107 //            var x = w - this.trigger.getWidth();
14108 //            this.inputEl().setWidth(this.adjustWidth('input', x));
14109 //            this.trigger.setStyle('left', x+'px');
14110 //        }
14111     },
14112
14113     // private
14114     adjustSize : Roo.BoxComponent.prototype.adjustSize,
14115
14116     // private
14117     getResizeEl : function(){
14118         return this.inputEl();
14119     },
14120
14121     // private
14122     getPositionEl : function(){
14123         return this.inputEl();
14124     },
14125
14126     // private
14127     alignErrorIcon : function(){
14128         this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
14129     },
14130
14131     // private
14132     initEvents : function(){
14133         
14134         this.createList();
14135         
14136         Roo.bootstrap.form.TriggerField.superclass.initEvents.call(this);
14137         //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
14138         if(!this.multiple && this.showToggleBtn){
14139             this.trigger = this.el.select('span.dropdown-toggle',true).first();
14140             if(this.hideTrigger){
14141                 this.trigger.setDisplayed(false);
14142             }
14143             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
14144         }
14145         
14146         if(this.multiple){
14147             this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
14148         }
14149         
14150         if(this.removable && !this.editable && !this.tickable){
14151             var close = this.closeTriggerEl();
14152             
14153             if(close){
14154                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
14155                 close.on('click', this.removeBtnClick, this, close);
14156             }
14157         }
14158         
14159         //this.trigger.addClassOnOver('x-form-trigger-over');
14160         //this.trigger.addClassOnClick('x-form-trigger-click');
14161         
14162         //if(!this.width){
14163         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
14164         //}
14165     },
14166     
14167     closeTriggerEl : function()
14168     {
14169         var close = this.el.select('.roo-combo-removable-btn', true).first();
14170         return close ? close : false;
14171     },
14172     
14173     removeBtnClick : function(e, h, el)
14174     {
14175         e.preventDefault();
14176         
14177         if(this.fireEvent("remove", this) !== false){
14178             this.reset();
14179             this.fireEvent("afterremove", this)
14180         }
14181     },
14182     
14183     createList : function()
14184     {
14185         this.list = Roo.get(document.body).createChild({
14186             tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
14187             cls: 'typeahead typeahead-long dropdown-menu shadow',
14188             style: 'display:none'
14189         });
14190         
14191         this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
14192         
14193     },
14194
14195     // private
14196     initTrigger : function(){
14197        
14198     },
14199
14200     // private
14201     onDestroy : function(){
14202         if(this.trigger){
14203             this.trigger.removeAllListeners();
14204           //  this.trigger.remove();
14205         }
14206         //if(this.wrap){
14207         //    this.wrap.remove();
14208         //}
14209         Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
14210     },
14211
14212     // private
14213     onFocus : function(){
14214         Roo.bootstrap.form.TriggerField.superclass.onFocus.call(this);
14215         /*
14216         if(!this.mimicing){
14217             this.wrap.addClass('x-trigger-wrap-focus');
14218             this.mimicing = true;
14219             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
14220             if(this.monitorTab){
14221                 this.el.on("keydown", this.checkTab, this);
14222             }
14223         }
14224         */
14225     },
14226
14227     // private
14228     checkTab : function(e){
14229         if(e.getKey() == e.TAB){
14230             this.triggerBlur();
14231         }
14232     },
14233
14234     // private
14235     onBlur : function(){
14236         // do nothing
14237     },
14238
14239     // private
14240     mimicBlur : function(e, t){
14241         /*
14242         if(!this.wrap.contains(t) && this.validateBlur()){
14243             this.triggerBlur();
14244         }
14245         */
14246     },
14247
14248     // private
14249     triggerBlur : function(){
14250         this.mimicing = false;
14251         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
14252         if(this.monitorTab){
14253             this.el.un("keydown", this.checkTab, this);
14254         }
14255         //this.wrap.removeClass('x-trigger-wrap-focus');
14256         Roo.bootstrap.form.TriggerField.superclass.onBlur.call(this);
14257     },
14258
14259     // private
14260     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
14261     validateBlur : function(e, t){
14262         return true;
14263     },
14264
14265     // private
14266     onDisable : function(){
14267         this.inputEl().dom.disabled = true;
14268         //Roo.bootstrap.form.TriggerField.superclass.onDisable.call(this);
14269         //if(this.wrap){
14270         //    this.wrap.addClass('x-item-disabled');
14271         //}
14272     },
14273
14274     // private
14275     onEnable : function(){
14276         this.inputEl().dom.disabled = false;
14277         //Roo.bootstrap.form.TriggerField.superclass.onEnable.call(this);
14278         //if(this.wrap){
14279         //    this.el.removeClass('x-item-disabled');
14280         //}
14281     },
14282
14283     // private
14284     onShow : function(){
14285         var ae = this.getActionEl();
14286         
14287         if(ae){
14288             ae.dom.style.display = '';
14289             ae.dom.style.visibility = 'visible';
14290         }
14291     },
14292
14293     // private
14294     
14295     onHide : function(){
14296         var ae = this.getActionEl();
14297         ae.dom.style.display = 'none';
14298     },
14299
14300     /**
14301      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
14302      * by an implementing function.
14303      * @method
14304      * @param {EventObject} e
14305      */
14306     onTriggerClick : Roo.emptyFn
14307 });
14308  
14309 /*
14310 * Licence: LGPL
14311 */
14312
14313 /**
14314  * @class Roo.bootstrap.form.CardUploader
14315  * @extends Roo.bootstrap.Button
14316  * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
14317  * @cfg {Number} errorTimeout default 3000
14318  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
14319  * @cfg {Array}  html The button text.
14320
14321  *
14322  * @constructor
14323  * Create a new CardUploader
14324  * @param {Object} config The config object
14325  */
14326
14327 Roo.bootstrap.form.CardUploader = function(config){
14328     
14329  
14330     
14331     Roo.bootstrap.form.CardUploader.superclass.constructor.call(this, config);
14332     
14333     
14334     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
14335         return r.data.id
14336      });
14337     
14338      this.addEvents({
14339          // raw events
14340         /**
14341          * @event preview
14342          * When a image is clicked on - and needs to display a slideshow or similar..
14343          * @param {Roo.bootstrap.Card} this
14344          * @param {Object} The image information data 
14345          *
14346          */
14347         'preview' : true,
14348          /**
14349          * @event download
14350          * When a the download link is clicked
14351          * @param {Roo.bootstrap.Card} this
14352          * @param {Object} The image information data  contains 
14353          */
14354         'download' : true
14355         
14356     });
14357 };
14358  
14359 Roo.extend(Roo.bootstrap.form.CardUploader, Roo.bootstrap.form.Input,  {
14360     
14361      
14362     errorTimeout : 3000,
14363      
14364     images : false,
14365    
14366     fileCollection : false,
14367     allowBlank : true,
14368     
14369     getAutoCreate : function()
14370     {
14371         
14372         var cfg =  {
14373             cls :'form-group' ,
14374             cn : [
14375                
14376                 {
14377                     tag: 'label',
14378                    //cls : 'input-group-addon',
14379                     html : this.fieldLabel
14380
14381                 },
14382
14383                 {
14384                     tag: 'input',
14385                     type : 'hidden',
14386                     name : this.name,
14387                     value : this.value,
14388                     cls : 'd-none  form-control'
14389                 },
14390                 
14391                 {
14392                     tag: 'input',
14393                     multiple : 'multiple',
14394                     type : 'file',
14395                     cls : 'd-none  roo-card-upload-selector'
14396                 },
14397                 
14398                 {
14399                     cls : 'roo-card-uploader-button-container w-100 mb-2'
14400                 },
14401                 {
14402                     cls : 'card-columns roo-card-uploader-container'
14403                 }
14404
14405             ]
14406         };
14407            
14408          
14409         return cfg;
14410     },
14411     
14412     getChildContainer : function() /// what children are added to.
14413     {
14414         return this.containerEl;
14415     },
14416    
14417     getButtonContainer : function() /// what children are added to.
14418     {
14419         return this.el.select(".roo-card-uploader-button-container").first();
14420     },
14421    
14422     initEvents : function()
14423     {
14424         
14425         Roo.bootstrap.form.Input.prototype.initEvents.call(this);
14426         
14427         var t = this;
14428         this.addxtype({
14429             xns: Roo.bootstrap,
14430
14431             xtype : 'Button',
14432             container_method : 'getButtonContainer' ,            
14433             html :  this.html, // fix changable?
14434             cls : 'w-100 ',
14435             listeners : {
14436                 'click' : function(btn, e) {
14437                     t.onClick(e);
14438                 }
14439             }
14440         });
14441         
14442         
14443         
14444         
14445         this.urlAPI = (window.createObjectURL && window) || 
14446                                 (window.URL && URL.revokeObjectURL && URL) || 
14447                                 (window.webkitURL && webkitURL);
14448                         
14449          
14450          
14451          
14452         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
14453         
14454         this.selectorEl.on('change', this.onFileSelected, this);
14455         if (this.images) {
14456             var t = this;
14457             this.images.forEach(function(img) {
14458                 t.addCard(img)
14459             });
14460             this.images = false;
14461         }
14462         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
14463          
14464        
14465     },
14466     
14467    
14468     onClick : function(e)
14469     {
14470         e.preventDefault();
14471          
14472         this.selectorEl.dom.click();
14473          
14474     },
14475     
14476     onFileSelected : function(e)
14477     {
14478         e.preventDefault();
14479         
14480         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
14481             return;
14482         }
14483         
14484         Roo.each(this.selectorEl.dom.files, function(file){    
14485             this.addFile(file);
14486         }, this);
14487          
14488     },
14489     
14490       
14491     
14492       
14493     
14494     addFile : function(file)
14495     {
14496            
14497         if(typeof(file) === 'string'){
14498             throw "Add file by name?"; // should not happen
14499             return;
14500         }
14501         
14502         if(!file || !this.urlAPI){
14503             return;
14504         }
14505         
14506         // file;
14507         // file.type;
14508         
14509         var _this = this;
14510         
14511         
14512         var url = _this.urlAPI.createObjectURL( file);
14513            
14514         this.addCard({
14515             id : Roo.bootstrap.form.CardUploader.ID--,
14516             is_uploaded : false,
14517             src : url,
14518             srcfile : file,
14519             title : file.name,
14520             mimetype : file.type,
14521             preview : false,
14522             is_deleted : 0
14523         });
14524         
14525     },
14526     
14527     /**
14528      * addCard - add an Attachment to the uploader
14529      * @param data - the data about the image to upload
14530      *
14531      * {
14532           id : 123
14533           title : "Title of file",
14534           is_uploaded : false,
14535           src : "http://.....",
14536           srcfile : { the File upload object },
14537           mimetype : file.type,
14538           preview : false,
14539           is_deleted : 0
14540           .. any other data...
14541         }
14542      *
14543      * 
14544     */
14545     
14546     addCard : function (data)
14547     {
14548         // hidden input element?
14549         // if the file is not an image...
14550         //then we need to use something other that and header_image
14551         var t = this;
14552         //   remove.....
14553         var footer = [
14554             {
14555                 xns : Roo.bootstrap,
14556                 xtype : 'CardFooter',
14557                  items: [
14558                     {
14559                         xns : Roo.bootstrap,
14560                         xtype : 'Element',
14561                         cls : 'd-flex',
14562                         items : [
14563                             
14564                             {
14565                                 xns : Roo.bootstrap,
14566                                 xtype : 'Button',
14567                                 html : String.format("<small>{0}</small>", data.title),
14568                                 cls : 'col-10 text-left',
14569                                 size: 'sm',
14570                                 weight: 'link',
14571                                 fa : 'download',
14572                                 listeners : {
14573                                     click : function() {
14574                                      
14575                                         t.fireEvent( "download", t, data );
14576                                     }
14577                                 }
14578                             },
14579                           
14580                             {
14581                                 xns : Roo.bootstrap,
14582                                 xtype : 'Button',
14583                                 style: 'max-height: 28px; ',
14584                                 size : 'sm',
14585                                 weight: 'danger',
14586                                 cls : 'col-2',
14587                                 fa : 'times',
14588                                 listeners : {
14589                                     click : function() {
14590                                         t.removeCard(data.id)
14591                                     }
14592                                 }
14593                             }
14594                         ]
14595                     }
14596                     
14597                 ] 
14598             }
14599             
14600         ];
14601         
14602         var cn = this.addxtype(
14603             {
14604                  
14605                 xns : Roo.bootstrap,
14606                 xtype : 'Card',
14607                 closeable : true,
14608                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
14609                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
14610                 header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
14611                 data : data,
14612                 html : false,
14613                  
14614                 items : footer,
14615                 initEvents : function() {
14616                     Roo.bootstrap.Card.prototype.initEvents.call(this);
14617                     var card = this;
14618                     this.imgEl = this.el.select('.card-img-top').first();
14619                     if (this.imgEl) {
14620                         this.imgEl.on('click', function() { t.fireEvent( "preview", t, data ); }, this);
14621                         this.imgEl.set({ 'pointer' : 'cursor' });
14622                                   
14623                     }
14624                     this.getCardFooter().addClass('p-1');
14625                     
14626                   
14627                 }
14628                 
14629             }
14630         );
14631         // dont' really need ot update items.
14632         // this.items.push(cn);
14633         this.fileCollection.add(cn);
14634         
14635         if (!data.srcfile) {
14636             this.updateInput();
14637             return;
14638         }
14639             
14640         var _t = this;
14641         var reader = new FileReader();
14642         reader.addEventListener("load", function() {  
14643             data.srcdata =  reader.result;
14644             _t.updateInput();
14645         });
14646         reader.readAsDataURL(data.srcfile);
14647         
14648         
14649         
14650     },
14651     removeCard : function(id)
14652     {
14653         
14654         var card  = this.fileCollection.get(id);
14655         card.data.is_deleted = 1;
14656         card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
14657         //this.fileCollection.remove(card);
14658         //this.items = this.items.filter(function(e) { return e != card });
14659         // dont' really need ot update items.
14660         card.el.dom.parentNode.removeChild(card.el.dom);
14661         this.updateInput();
14662
14663         
14664     },
14665     reset: function()
14666     {
14667         this.fileCollection.each(function(card) {
14668             if (card.el.dom && card.el.dom.parentNode) {
14669                 card.el.dom.parentNode.removeChild(card.el.dom);
14670             }
14671         });
14672         this.fileCollection.clear();
14673         this.updateInput();
14674     },
14675     
14676     updateInput : function()
14677     {
14678          var data = [];
14679         this.fileCollection.each(function(e) {
14680             data.push(e.data);
14681             
14682         });
14683         this.inputEl().dom.value = JSON.stringify(data);
14684         
14685         
14686         
14687     }
14688     
14689     
14690 });
14691
14692
14693 Roo.bootstrap.form.CardUploader.ID = -1;/*
14694  * Based on:
14695  * Ext JS Library 1.1.1
14696  * Copyright(c) 2006-2007, Ext JS, LLC.
14697  *
14698  * Originally Released Under LGPL - original licence link has changed is not relivant.
14699  *
14700  * Fork - LGPL
14701  * <script type="text/javascript">
14702  */
14703
14704
14705 /**
14706  * @class Roo.data.SortTypes
14707  * @static
14708  * Defines the default sorting (casting?) comparison functions used when sorting data.
14709  */
14710 Roo.data.SortTypes = {
14711     /**
14712      * Default sort that does nothing
14713      * @param {Mixed} s The value being converted
14714      * @return {Mixed} The comparison value
14715      */
14716     none : function(s){
14717         return s;
14718     },
14719     
14720     /**
14721      * The regular expression used to strip tags
14722      * @type {RegExp}
14723      * @property
14724      */
14725     stripTagsRE : /<\/?[^>]+>/gi,
14726     
14727     /**
14728      * Strips all HTML tags to sort on text only
14729      * @param {Mixed} s The value being converted
14730      * @return {String} The comparison value
14731      */
14732     asText : function(s){
14733         return String(s).replace(this.stripTagsRE, "");
14734     },
14735     
14736     /**
14737      * Strips all HTML tags to sort on text only - Case insensitive
14738      * @param {Mixed} s The value being converted
14739      * @return {String} The comparison value
14740      */
14741     asUCText : function(s){
14742         return String(s).toUpperCase().replace(this.stripTagsRE, "");
14743     },
14744     
14745     /**
14746      * Case insensitive string
14747      * @param {Mixed} s The value being converted
14748      * @return {String} The comparison value
14749      */
14750     asUCString : function(s) {
14751         return String(s).toUpperCase();
14752     },
14753     
14754     /**
14755      * Date sorting
14756      * @param {Mixed} s The value being converted
14757      * @return {Number} The comparison value
14758      */
14759     asDate : function(s) {
14760         if(!s){
14761             return 0;
14762         }
14763         if(s instanceof Date){
14764             return s.getTime();
14765         }
14766         return Date.parse(String(s));
14767     },
14768     
14769     /**
14770      * Float sorting
14771      * @param {Mixed} s The value being converted
14772      * @return {Float} The comparison value
14773      */
14774     asFloat : function(s) {
14775         var val = parseFloat(String(s).replace(/,/g, ""));
14776         if(isNaN(val)) {
14777             val = 0;
14778         }
14779         return val;
14780     },
14781     
14782     /**
14783      * Integer sorting
14784      * @param {Mixed} s The value being converted
14785      * @return {Number} The comparison value
14786      */
14787     asInt : function(s) {
14788         var val = parseInt(String(s).replace(/,/g, ""));
14789         if(isNaN(val)) {
14790             val = 0;
14791         }
14792         return val;
14793     }
14794 };/*
14795  * Based on:
14796  * Ext JS Library 1.1.1
14797  * Copyright(c) 2006-2007, Ext JS, LLC.
14798  *
14799  * Originally Released Under LGPL - original licence link has changed is not relivant.
14800  *
14801  * Fork - LGPL
14802  * <script type="text/javascript">
14803  */
14804
14805 /**
14806 * @class Roo.data.Record
14807  * Instances of this class encapsulate both record <em>definition</em> information, and record
14808  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
14809  * to access Records cached in an {@link Roo.data.Store} object.<br>
14810  * <p>
14811  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
14812  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
14813  * objects.<br>
14814  * <p>
14815  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
14816  * @constructor
14817  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
14818  * {@link #create}. The parameters are the same.
14819  * @param {Array} data An associative Array of data values keyed by the field name.
14820  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
14821  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
14822  * not specified an integer id is generated.
14823  */
14824 Roo.data.Record = function(data, id){
14825     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
14826     this.data = data;
14827 };
14828
14829 /**
14830  * Generate a constructor for a specific record layout.
14831  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
14832  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
14833  * Each field definition object may contain the following properties: <ul>
14834  * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
14835  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
14836  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
14837  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
14838  * is being used, then this is a string containing the javascript expression to reference the data relative to 
14839  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
14840  * to the data item relative to the record element. If the mapping expression is the same as the field name,
14841  * this may be omitted.</p></li>
14842  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
14843  * <ul><li>auto (Default, implies no conversion)</li>
14844  * <li>string</li>
14845  * <li>int</li>
14846  * <li>float</li>
14847  * <li>boolean</li>
14848  * <li>date</li></ul></p></li>
14849  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
14850  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
14851  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
14852  * by the Reader into an object that will be stored in the Record. It is passed the
14853  * following parameters:<ul>
14854  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
14855  * </ul></p></li>
14856  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
14857  * </ul>
14858  * <br>usage:<br><pre><code>
14859 var TopicRecord = Roo.data.Record.create(
14860     {name: 'title', mapping: 'topic_title'},
14861     {name: 'author', mapping: 'username'},
14862     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
14863     {name: 'lastPost', mapping: 'post_time', type: 'date'},
14864     {name: 'lastPoster', mapping: 'user2'},
14865     {name: 'excerpt', mapping: 'post_text'}
14866 );
14867
14868 var myNewRecord = new TopicRecord({
14869     title: 'Do my job please',
14870     author: 'noobie',
14871     totalPosts: 1,
14872     lastPost: new Date(),
14873     lastPoster: 'Animal',
14874     excerpt: 'No way dude!'
14875 });
14876 myStore.add(myNewRecord);
14877 </code></pre>
14878  * @method create
14879  * @static
14880  */
14881 Roo.data.Record.create = function(o){
14882     var f = function(){
14883         f.superclass.constructor.apply(this, arguments);
14884     };
14885     Roo.extend(f, Roo.data.Record);
14886     var p = f.prototype;
14887     p.fields = new Roo.util.MixedCollection(false, function(field){
14888         return field.name;
14889     });
14890     for(var i = 0, len = o.length; i < len; i++){
14891         p.fields.add(new Roo.data.Field(o[i]));
14892     }
14893     f.getField = function(name){
14894         return p.fields.get(name);  
14895     };
14896     return f;
14897 };
14898
14899 Roo.data.Record.AUTO_ID = 1000;
14900 Roo.data.Record.EDIT = 'edit';
14901 Roo.data.Record.REJECT = 'reject';
14902 Roo.data.Record.COMMIT = 'commit';
14903
14904 Roo.data.Record.prototype = {
14905     /**
14906      * Readonly flag - true if this record has been modified.
14907      * @type Boolean
14908      */
14909     dirty : false,
14910     editing : false,
14911     error: null,
14912     modified: null,
14913
14914     // private
14915     join : function(store){
14916         this.store = store;
14917     },
14918
14919     /**
14920      * Set the named field to the specified value.
14921      * @param {String} name The name of the field to set.
14922      * @param {Object} value The value to set the field to.
14923      */
14924     set : function(name, value){
14925         if(this.data[name] == value){
14926             return;
14927         }
14928         this.dirty = true;
14929         if(!this.modified){
14930             this.modified = {};
14931         }
14932         if(typeof this.modified[name] == 'undefined'){
14933             this.modified[name] = this.data[name];
14934         }
14935         this.data[name] = value;
14936         if(!this.editing && this.store){
14937             this.store.afterEdit(this);
14938         }       
14939     },
14940
14941     /**
14942      * Get the value of the named field.
14943      * @param {String} name The name of the field to get the value of.
14944      * @return {Object} The value of the field.
14945      */
14946     get : function(name){
14947         return this.data[name]; 
14948     },
14949
14950     // private
14951     beginEdit : function(){
14952         this.editing = true;
14953         this.modified = {}; 
14954     },
14955
14956     // private
14957     cancelEdit : function(){
14958         this.editing = false;
14959         delete this.modified;
14960     },
14961
14962     // private
14963     endEdit : function(){
14964         this.editing = false;
14965         if(this.dirty && this.store){
14966             this.store.afterEdit(this);
14967         }
14968     },
14969
14970     /**
14971      * Usually called by the {@link Roo.data.Store} which owns the Record.
14972      * Rejects all changes made to the Record since either creation, or the last commit operation.
14973      * Modified fields are reverted to their original values.
14974      * <p>
14975      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
14976      * of reject operations.
14977      */
14978     reject : function(){
14979         var m = this.modified;
14980         for(var n in m){
14981             if(typeof m[n] != "function"){
14982                 this.data[n] = m[n];
14983             }
14984         }
14985         this.dirty = false;
14986         delete this.modified;
14987         this.editing = false;
14988         if(this.store){
14989             this.store.afterReject(this);
14990         }
14991     },
14992
14993     /**
14994      * Usually called by the {@link Roo.data.Store} which owns the Record.
14995      * Commits all changes made to the Record since either creation, or the last commit operation.
14996      * <p>
14997      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
14998      * of commit operations.
14999      */
15000     commit : function(){
15001         this.dirty = false;
15002         delete this.modified;
15003         this.editing = false;
15004         if(this.store){
15005             this.store.afterCommit(this);
15006         }
15007     },
15008
15009     // private
15010     hasError : function(){
15011         return this.error != null;
15012     },
15013
15014     // private
15015     clearError : function(){
15016         this.error = null;
15017     },
15018
15019     /**
15020      * Creates a copy of this record.
15021      * @param {String} id (optional) A new record id if you don't want to use this record's id
15022      * @return {Record}
15023      */
15024     copy : function(newId) {
15025         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
15026     }
15027 };/*
15028  * Based on:
15029  * Ext JS Library 1.1.1
15030  * Copyright(c) 2006-2007, Ext JS, LLC.
15031  *
15032  * Originally Released Under LGPL - original licence link has changed is not relivant.
15033  *
15034  * Fork - LGPL
15035  * <script type="text/javascript">
15036  */
15037
15038
15039
15040 /**
15041  * @class Roo.data.Store
15042  * @extends Roo.util.Observable
15043  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
15044  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
15045  * <p>
15046  * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
15047  * has no knowledge of the format of the data returned by the Proxy.<br>
15048  * <p>
15049  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
15050  * instances from the data object. These records are cached and made available through accessor functions.
15051  * @constructor
15052  * Creates a new Store.
15053  * @param {Object} config A config object containing the objects needed for the Store to access data,
15054  * and read the data into Records.
15055  */
15056 Roo.data.Store = function(config){
15057     this.data = new Roo.util.MixedCollection(false);
15058     this.data.getKey = function(o){
15059         return o.id;
15060     };
15061     this.baseParams = {};
15062     // private
15063     this.paramNames = {
15064         "start" : "start",
15065         "limit" : "limit",
15066         "sort" : "sort",
15067         "dir" : "dir",
15068         "multisort" : "_multisort"
15069     };
15070
15071     if(config && config.data){
15072         this.inlineData = config.data;
15073         delete config.data;
15074     }
15075
15076     Roo.apply(this, config);
15077     
15078     if(this.reader){ // reader passed
15079         this.reader = Roo.factory(this.reader, Roo.data);
15080         this.reader.xmodule = this.xmodule || false;
15081         if(!this.recordType){
15082             this.recordType = this.reader.recordType;
15083         }
15084         if(this.reader.onMetaChange){
15085             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
15086         }
15087     }
15088
15089     if(this.recordType){
15090         this.fields = this.recordType.prototype.fields;
15091     }
15092     this.modified = [];
15093
15094     this.addEvents({
15095         /**
15096          * @event datachanged
15097          * Fires when the data cache has changed, and a widget which is using this Store
15098          * as a Record cache should refresh its view.
15099          * @param {Store} this
15100          */
15101         datachanged : true,
15102         /**
15103          * @event metachange
15104          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
15105          * @param {Store} this
15106          * @param {Object} meta The JSON metadata
15107          */
15108         metachange : true,
15109         /**
15110          * @event add
15111          * Fires when Records have been added to the Store
15112          * @param {Store} this
15113          * @param {Roo.data.Record[]} records The array of Records added
15114          * @param {Number} index The index at which the record(s) were added
15115          */
15116         add : true,
15117         /**
15118          * @event remove
15119          * Fires when a Record has been removed from the Store
15120          * @param {Store} this
15121          * @param {Roo.data.Record} record The Record that was removed
15122          * @param {Number} index The index at which the record was removed
15123          */
15124         remove : true,
15125         /**
15126          * @event update
15127          * Fires when a Record has been updated
15128          * @param {Store} this
15129          * @param {Roo.data.Record} record The Record that was updated
15130          * @param {String} operation The update operation being performed.  Value may be one of:
15131          * <pre><code>
15132  Roo.data.Record.EDIT
15133  Roo.data.Record.REJECT
15134  Roo.data.Record.COMMIT
15135          * </code></pre>
15136          */
15137         update : true,
15138         /**
15139          * @event clear
15140          * Fires when the data cache has been cleared.
15141          * @param {Store} this
15142          */
15143         clear : true,
15144         /**
15145          * @event beforeload
15146          * Fires before a request is made for a new data object.  If the beforeload handler returns false
15147          * the load action will be canceled.
15148          * @param {Store} this
15149          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15150          */
15151         beforeload : true,
15152         /**
15153          * @event beforeloadadd
15154          * Fires after a new set of Records has been loaded.
15155          * @param {Store} this
15156          * @param {Roo.data.Record[]} records The Records that were loaded
15157          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15158          */
15159         beforeloadadd : true,
15160         /**
15161          * @event load
15162          * Fires after a new set of Records has been loaded, before they are added to the store.
15163          * @param {Store} this
15164          * @param {Roo.data.Record[]} records The Records that were loaded
15165          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15166          * @params {Object} return from reader
15167          */
15168         load : true,
15169         /**
15170          * @event loadexception
15171          * Fires if an exception occurs in the Proxy during loading.
15172          * Called with the signature of the Proxy's "loadexception" event.
15173          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
15174          * 
15175          * @param {Proxy} 
15176          * @param {Object} return from JsonData.reader() - success, totalRecords, records
15177          * @param {Object} load options 
15178          * @param {Object} jsonData from your request (normally this contains the Exception)
15179          */
15180         loadexception : true
15181     });
15182     
15183     if(this.proxy){
15184         this.proxy = Roo.factory(this.proxy, Roo.data);
15185         this.proxy.xmodule = this.xmodule || false;
15186         this.relayEvents(this.proxy,  ["loadexception"]);
15187     }
15188     this.sortToggle = {};
15189     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
15190
15191     Roo.data.Store.superclass.constructor.call(this);
15192
15193     if(this.inlineData){
15194         this.loadData(this.inlineData);
15195         delete this.inlineData;
15196     }
15197 };
15198
15199 Roo.extend(Roo.data.Store, Roo.util.Observable, {
15200      /**
15201     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
15202     * without a remote query - used by combo/forms at present.
15203     */
15204     
15205     /**
15206     * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
15207     */
15208     /**
15209     * @cfg {Array} data Inline data to be loaded when the store is initialized.
15210     */
15211     /**
15212     * @cfg {Roo.data.DataReader} reader [required]  The Reader object which processes the data object and returns
15213     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
15214     */
15215     /**
15216     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
15217     * on any HTTP request
15218     */
15219     /**
15220     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
15221     */
15222     /**
15223     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
15224     */
15225     multiSort: false,
15226     /**
15227     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
15228     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
15229     */
15230     remoteSort : false,
15231
15232     /**
15233     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
15234      * loaded or when a record is removed. (defaults to false).
15235     */
15236     pruneModifiedRecords : false,
15237
15238     // private
15239     lastOptions : null,
15240
15241     /**
15242      * Add Records to the Store and fires the add event.
15243      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
15244      */
15245     add : function(records){
15246         records = [].concat(records);
15247         for(var i = 0, len = records.length; i < len; i++){
15248             records[i].join(this);
15249         }
15250         var index = this.data.length;
15251         this.data.addAll(records);
15252         this.fireEvent("add", this, records, index);
15253     },
15254
15255     /**
15256      * Remove a Record from the Store and fires the remove event.
15257      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
15258      */
15259     remove : function(record){
15260         var index = this.data.indexOf(record);
15261         this.data.removeAt(index);
15262  
15263         if(this.pruneModifiedRecords){
15264             this.modified.remove(record);
15265         }
15266         this.fireEvent("remove", this, record, index);
15267     },
15268
15269     /**
15270      * Remove all Records from the Store and fires the clear event.
15271      */
15272     removeAll : function(){
15273         this.data.clear();
15274         if(this.pruneModifiedRecords){
15275             this.modified = [];
15276         }
15277         this.fireEvent("clear", this);
15278     },
15279
15280     /**
15281      * Inserts Records to the Store at the given index and fires the add event.
15282      * @param {Number} index The start index at which to insert the passed Records.
15283      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
15284      */
15285     insert : function(index, records){
15286         records = [].concat(records);
15287         for(var i = 0, len = records.length; i < len; i++){
15288             this.data.insert(index, records[i]);
15289             records[i].join(this);
15290         }
15291         this.fireEvent("add", this, records, index);
15292     },
15293
15294     /**
15295      * Get the index within the cache of the passed Record.
15296      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
15297      * @return {Number} The index of the passed Record. Returns -1 if not found.
15298      */
15299     indexOf : function(record){
15300         return this.data.indexOf(record);
15301     },
15302
15303     /**
15304      * Get the index within the cache of the Record with the passed id.
15305      * @param {String} id The id of the Record to find.
15306      * @return {Number} The index of the Record. Returns -1 if not found.
15307      */
15308     indexOfId : function(id){
15309         return this.data.indexOfKey(id);
15310     },
15311
15312     /**
15313      * Get the Record with the specified id.
15314      * @param {String} id The id of the Record to find.
15315      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
15316      */
15317     getById : function(id){
15318         return this.data.key(id);
15319     },
15320
15321     /**
15322      * Get the Record at the specified index.
15323      * @param {Number} index The index of the Record to find.
15324      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
15325      */
15326     getAt : function(index){
15327         return this.data.itemAt(index);
15328     },
15329
15330     /**
15331      * Returns a range of Records between specified indices.
15332      * @param {Number} startIndex (optional) The starting index (defaults to 0)
15333      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
15334      * @return {Roo.data.Record[]} An array of Records
15335      */
15336     getRange : function(start, end){
15337         return this.data.getRange(start, end);
15338     },
15339
15340     // private
15341     storeOptions : function(o){
15342         o = Roo.apply({}, o);
15343         delete o.callback;
15344         delete o.scope;
15345         this.lastOptions = o;
15346     },
15347
15348     /**
15349      * Loads the Record cache from the configured Proxy using the configured Reader.
15350      * <p>
15351      * If using remote paging, then the first load call must specify the <em>start</em>
15352      * and <em>limit</em> properties in the options.params property to establish the initial
15353      * position within the dataset, and the number of Records to cache on each read from the Proxy.
15354      * <p>
15355      * <strong>It is important to note that for remote data sources, loading is asynchronous,
15356      * and this call will return before the new data has been loaded. Perform any post-processing
15357      * in a callback function, or in a "load" event handler.</strong>
15358      * <p>
15359      * @param {Object} options An object containing properties which control loading options:<ul>
15360      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
15361      * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
15362      * <pre>
15363                 {
15364                     data : data,  // array of key=>value data like JsonReader
15365                     total : data.length,
15366                     success : true
15367                     
15368                 }
15369         </pre>
15370             }.</li>
15371      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
15372      * passed the following arguments:<ul>
15373      * <li>r : Roo.data.Record[]</li>
15374      * <li>options: Options object from the load call</li>
15375      * <li>success: Boolean success indicator</li></ul></li>
15376      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
15377      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
15378      * </ul>
15379      */
15380     load : function(options){
15381         options = options || {};
15382         if(this.fireEvent("beforeload", this, options) !== false){
15383             this.storeOptions(options);
15384             var p = Roo.apply(options.params || {}, this.baseParams);
15385             // if meta was not loaded from remote source.. try requesting it.
15386             if (!this.reader.metaFromRemote) {
15387                 p._requestMeta = 1;
15388             }
15389             if(this.sortInfo && this.remoteSort){
15390                 var pn = this.paramNames;
15391                 p[pn["sort"]] = this.sortInfo.field;
15392                 p[pn["dir"]] = this.sortInfo.direction;
15393             }
15394             if (this.multiSort) {
15395                 var pn = this.paramNames;
15396                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
15397             }
15398             
15399             this.proxy.load(p, this.reader, this.loadRecords, this, options);
15400         }
15401     },
15402
15403     /**
15404      * Reloads the Record cache from the configured Proxy using the configured Reader and
15405      * the options from the last load operation performed.
15406      * @param {Object} options (optional) An object containing properties which may override the options
15407      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
15408      * the most recently used options are reused).
15409      */
15410     reload : function(options){
15411         this.load(Roo.applyIf(options||{}, this.lastOptions));
15412     },
15413
15414     // private
15415     // Called as a callback by the Reader during a load operation.
15416     loadRecords : function(o, options, success){
15417          
15418         if(!o){
15419             if(success !== false){
15420                 this.fireEvent("load", this, [], options, o);
15421             }
15422             if(options.callback){
15423                 options.callback.call(options.scope || this, [], options, false);
15424             }
15425             return;
15426         }
15427         // if data returned failure - throw an exception.
15428         if (o.success === false) {
15429             // show a message if no listener is registered.
15430             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
15431                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
15432             }
15433             // loadmask wil be hooked into this..
15434             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
15435             return;
15436         }
15437         var r = o.records, t = o.totalRecords || r.length;
15438         
15439         this.fireEvent("beforeloadadd", this, r, options, o);
15440         
15441         if(!options || options.add !== true){
15442             if(this.pruneModifiedRecords){
15443                 this.modified = [];
15444             }
15445             for(var i = 0, len = r.length; i < len; i++){
15446                 r[i].join(this);
15447             }
15448             if(this.snapshot){
15449                 this.data = this.snapshot;
15450                 delete this.snapshot;
15451             }
15452             this.data.clear();
15453             this.data.addAll(r);
15454             this.totalLength = t;
15455             this.applySort();
15456             this.fireEvent("datachanged", this);
15457         }else{
15458             this.totalLength = Math.max(t, this.data.length+r.length);
15459             this.add(r);
15460         }
15461         
15462         if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
15463                 
15464             var e = new Roo.data.Record({});
15465
15466             e.set(this.parent.displayField, this.parent.emptyTitle);
15467             e.set(this.parent.valueField, '');
15468
15469             this.insert(0, e);
15470         }
15471             
15472         this.fireEvent("load", this, r, options, o);
15473         if(options.callback){
15474             options.callback.call(options.scope || this, r, options, true);
15475         }
15476     },
15477
15478
15479     /**
15480      * Loads data from a passed data block. A Reader which understands the format of the data
15481      * must have been configured in the constructor.
15482      * @param {Object} data The data block from which to read the Records.  The format of the data expected
15483      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
15484      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
15485      */
15486     loadData : function(o, append){
15487         var r = this.reader.readRecords(o);
15488         this.loadRecords(r, {add: append}, true);
15489     },
15490     
15491      /**
15492      * using 'cn' the nested child reader read the child array into it's child stores.
15493      * @param {Object} rec The record with a 'children array
15494      */
15495     loadDataFromChildren : function(rec)
15496     {
15497         this.loadData(this.reader.toLoadData(rec));
15498     },
15499     
15500
15501     /**
15502      * Gets the number of cached records.
15503      * <p>
15504      * <em>If using paging, this may not be the total size of the dataset. If the data object
15505      * used by the Reader contains the dataset size, then the getTotalCount() function returns
15506      * the data set size</em>
15507      */
15508     getCount : function(){
15509         return this.data.length || 0;
15510     },
15511
15512     /**
15513      * Gets the total number of records in the dataset as returned by the server.
15514      * <p>
15515      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
15516      * the dataset size</em>
15517      */
15518     getTotalCount : function(){
15519         return this.totalLength || 0;
15520     },
15521
15522     /**
15523      * Returns the sort state of the Store as an object with two properties:
15524      * <pre><code>
15525  field {String} The name of the field by which the Records are sorted
15526  direction {String} The sort order, "ASC" or "DESC"
15527      * </code></pre>
15528      */
15529     getSortState : function(){
15530         return this.sortInfo;
15531     },
15532
15533     // private
15534     applySort : function(){
15535         if(this.sortInfo && !this.remoteSort){
15536             var s = this.sortInfo, f = s.field;
15537             var st = this.fields.get(f).sortType;
15538             var fn = function(r1, r2){
15539                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
15540                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
15541             };
15542             this.data.sort(s.direction, fn);
15543             if(this.snapshot && this.snapshot != this.data){
15544                 this.snapshot.sort(s.direction, fn);
15545             }
15546         }
15547     },
15548
15549     /**
15550      * Sets the default sort column and order to be used by the next load operation.
15551      * @param {String} fieldName The name of the field to sort by.
15552      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
15553      */
15554     setDefaultSort : function(field, dir){
15555         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
15556     },
15557
15558     /**
15559      * Sort the Records.
15560      * If remote sorting is used, the sort is performed on the server, and the cache is
15561      * reloaded. If local sorting is used, the cache is sorted internally.
15562      * @param {String} fieldName The name of the field to sort by.
15563      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
15564      */
15565     sort : function(fieldName, dir){
15566         var f = this.fields.get(fieldName);
15567         if(!dir){
15568             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
15569             
15570             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
15571                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
15572             }else{
15573                 dir = f.sortDir;
15574             }
15575         }
15576         this.sortToggle[f.name] = dir;
15577         this.sortInfo = {field: f.name, direction: dir};
15578         if(!this.remoteSort){
15579             this.applySort();
15580             this.fireEvent("datachanged", this);
15581         }else{
15582             this.load(this.lastOptions);
15583         }
15584     },
15585
15586     /**
15587      * Calls the specified function for each of the Records in the cache.
15588      * @param {Function} fn The function to call. The Record is passed as the first parameter.
15589      * Returning <em>false</em> aborts and exits the iteration.
15590      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
15591      */
15592     each : function(fn, scope){
15593         this.data.each(fn, scope);
15594     },
15595
15596     /**
15597      * Gets all records modified since the last commit.  Modified records are persisted across load operations
15598      * (e.g., during paging).
15599      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
15600      */
15601     getModifiedRecords : function(){
15602         return this.modified;
15603     },
15604
15605     // private
15606     createFilterFn : function(property, value, anyMatch){
15607         if(!value.exec){ // not a regex
15608             value = String(value);
15609             if(value.length == 0){
15610                 return false;
15611             }
15612             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
15613         }
15614         return function(r){
15615             return value.test(r.data[property]);
15616         };
15617     },
15618
15619     /**
15620      * Sums the value of <i>property</i> for each record between start and end and returns the result.
15621      * @param {String} property A field on your records
15622      * @param {Number} start The record index to start at (defaults to 0)
15623      * @param {Number} end The last record index to include (defaults to length - 1)
15624      * @return {Number} The sum
15625      */
15626     sum : function(property, start, end){
15627         var rs = this.data.items, v = 0;
15628         start = start || 0;
15629         end = (end || end === 0) ? end : rs.length-1;
15630
15631         for(var i = start; i <= end; i++){
15632             v += (rs[i].data[property] || 0);
15633         }
15634         return v;
15635     },
15636
15637     /**
15638      * Filter the records by a specified property.
15639      * @param {String} field A field on your records
15640      * @param {String/RegExp} value Either a string that the field
15641      * should start with or a RegExp to test against the field
15642      * @param {Boolean} anyMatch True to match any part not just the beginning
15643      */
15644     filter : function(property, value, anyMatch){
15645         var fn = this.createFilterFn(property, value, anyMatch);
15646         return fn ? this.filterBy(fn) : this.clearFilter();
15647     },
15648
15649     /**
15650      * Filter by a function. The specified function will be called with each
15651      * record in this data source. If the function returns true the record is included,
15652      * otherwise it is filtered.
15653      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
15654      * @param {Object} scope (optional) The scope of the function (defaults to this)
15655      */
15656     filterBy : function(fn, scope){
15657         this.snapshot = this.snapshot || this.data;
15658         this.data = this.queryBy(fn, scope||this);
15659         this.fireEvent("datachanged", this);
15660     },
15661
15662     /**
15663      * Query the records by a specified property.
15664      * @param {String} field A field on your records
15665      * @param {String/RegExp} value Either a string that the field
15666      * should start with or a RegExp to test against the field
15667      * @param {Boolean} anyMatch True to match any part not just the beginning
15668      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
15669      */
15670     query : function(property, value, anyMatch){
15671         var fn = this.createFilterFn(property, value, anyMatch);
15672         return fn ? this.queryBy(fn) : this.data.clone();
15673     },
15674
15675     /**
15676      * Query by a function. The specified function will be called with each
15677      * record in this data source. If the function returns true the record is included
15678      * in the results.
15679      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
15680      * @param {Object} scope (optional) The scope of the function (defaults to this)
15681       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
15682      **/
15683     queryBy : function(fn, scope){
15684         var data = this.snapshot || this.data;
15685         return data.filterBy(fn, scope||this);
15686     },
15687
15688     /**
15689      * Collects unique values for a particular dataIndex from this store.
15690      * @param {String} dataIndex The property to collect
15691      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
15692      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
15693      * @return {Array} An array of the unique values
15694      **/
15695     collect : function(dataIndex, allowNull, bypassFilter){
15696         var d = (bypassFilter === true && this.snapshot) ?
15697                 this.snapshot.items : this.data.items;
15698         var v, sv, r = [], l = {};
15699         for(var i = 0, len = d.length; i < len; i++){
15700             v = d[i].data[dataIndex];
15701             sv = String(v);
15702             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
15703                 l[sv] = true;
15704                 r[r.length] = v;
15705             }
15706         }
15707         return r;
15708     },
15709
15710     /**
15711      * Revert to a view of the Record cache with no filtering applied.
15712      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
15713      */
15714     clearFilter : function(suppressEvent){
15715         if(this.snapshot && this.snapshot != this.data){
15716             this.data = this.snapshot;
15717             delete this.snapshot;
15718             if(suppressEvent !== true){
15719                 this.fireEvent("datachanged", this);
15720             }
15721         }
15722     },
15723
15724     // private
15725     afterEdit : function(record){
15726         if(this.modified.indexOf(record) == -1){
15727             this.modified.push(record);
15728         }
15729         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
15730     },
15731     
15732     // private
15733     afterReject : function(record){
15734         this.modified.remove(record);
15735         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
15736     },
15737
15738     // private
15739     afterCommit : function(record){
15740         this.modified.remove(record);
15741         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
15742     },
15743
15744     /**
15745      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
15746      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
15747      */
15748     commitChanges : function(){
15749         var m = this.modified.slice(0);
15750         this.modified = [];
15751         for(var i = 0, len = m.length; i < len; i++){
15752             m[i].commit();
15753         }
15754     },
15755
15756     /**
15757      * Cancel outstanding changes on all changed records.
15758      */
15759     rejectChanges : function(){
15760         var m = this.modified.slice(0);
15761         this.modified = [];
15762         for(var i = 0, len = m.length; i < len; i++){
15763             m[i].reject();
15764         }
15765     },
15766
15767     onMetaChange : function(meta, rtype, o){
15768         this.recordType = rtype;
15769         this.fields = rtype.prototype.fields;
15770         delete this.snapshot;
15771         this.sortInfo = meta.sortInfo || this.sortInfo;
15772         this.modified = [];
15773         this.fireEvent('metachange', this, this.reader.meta);
15774     },
15775     
15776     moveIndex : function(data, type)
15777     {
15778         var index = this.indexOf(data);
15779         
15780         var newIndex = index + type;
15781         
15782         this.remove(data);
15783         
15784         this.insert(newIndex, data);
15785         
15786     }
15787 });/*
15788  * Based on:
15789  * Ext JS Library 1.1.1
15790  * Copyright(c) 2006-2007, Ext JS, LLC.
15791  *
15792  * Originally Released Under LGPL - original licence link has changed is not relivant.
15793  *
15794  * Fork - LGPL
15795  * <script type="text/javascript">
15796  */
15797
15798 /**
15799  * @class Roo.data.SimpleStore
15800  * @extends Roo.data.Store
15801  * Small helper class to make creating Stores from Array data easier.
15802  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
15803  * @cfg {Array} fields An array of field definition objects, or field name strings.
15804  * @cfg {Object} an existing reader (eg. copied from another store)
15805  * @cfg {Array} data The multi-dimensional array of data
15806  * @cfg {Roo.data.DataProxy} proxy [not-required]  
15807  * @cfg {Roo.data.Reader} reader  [not-required] 
15808  * @constructor
15809  * @param {Object} config
15810  */
15811 Roo.data.SimpleStore = function(config)
15812 {
15813     Roo.data.SimpleStore.superclass.constructor.call(this, {
15814         isLocal : true,
15815         reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
15816                 id: config.id
15817             },
15818             Roo.data.Record.create(config.fields)
15819         ),
15820         proxy : new Roo.data.MemoryProxy(config.data)
15821     });
15822     this.load();
15823 };
15824 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
15825  * Based on:
15826  * Ext JS Library 1.1.1
15827  * Copyright(c) 2006-2007, Ext JS, LLC.
15828  *
15829  * Originally Released Under LGPL - original licence link has changed is not relivant.
15830  *
15831  * Fork - LGPL
15832  * <script type="text/javascript">
15833  */
15834
15835 /**
15836 /**
15837  * @extends Roo.data.Store
15838  * @class Roo.data.JsonStore
15839  * Small helper class to make creating Stores for JSON data easier. <br/>
15840 <pre><code>
15841 var store = new Roo.data.JsonStore({
15842     url: 'get-images.php',
15843     root: 'images',
15844     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
15845 });
15846 </code></pre>
15847  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
15848  * JsonReader and HttpProxy (unless inline data is provided).</b>
15849  * @cfg {Array} fields An array of field definition objects, or field name strings.
15850  * @constructor
15851  * @param {Object} config
15852  */
15853 Roo.data.JsonStore = function(c){
15854     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
15855         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
15856         reader: new Roo.data.JsonReader(c, c.fields)
15857     }));
15858 };
15859 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
15860  * Based on:
15861  * Ext JS Library 1.1.1
15862  * Copyright(c) 2006-2007, Ext JS, LLC.
15863  *
15864  * Originally Released Under LGPL - original licence link has changed is not relivant.
15865  *
15866  * Fork - LGPL
15867  * <script type="text/javascript">
15868  */
15869
15870  
15871 Roo.data.Field = function(config){
15872     if(typeof config == "string"){
15873         config = {name: config};
15874     }
15875     Roo.apply(this, config);
15876     
15877     if(!this.type){
15878         this.type = "auto";
15879     }
15880     
15881     var st = Roo.data.SortTypes;
15882     // named sortTypes are supported, here we look them up
15883     if(typeof this.sortType == "string"){
15884         this.sortType = st[this.sortType];
15885     }
15886     
15887     // set default sortType for strings and dates
15888     if(!this.sortType){
15889         switch(this.type){
15890             case "string":
15891                 this.sortType = st.asUCString;
15892                 break;
15893             case "date":
15894                 this.sortType = st.asDate;
15895                 break;
15896             default:
15897                 this.sortType = st.none;
15898         }
15899     }
15900
15901     // define once
15902     var stripRe = /[\$,%]/g;
15903
15904     // prebuilt conversion function for this field, instead of
15905     // switching every time we're reading a value
15906     if(!this.convert){
15907         var cv, dateFormat = this.dateFormat;
15908         switch(this.type){
15909             case "":
15910             case "auto":
15911             case undefined:
15912                 cv = function(v){ return v; };
15913                 break;
15914             case "string":
15915                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
15916                 break;
15917             case "int":
15918                 cv = function(v){
15919                     return v !== undefined && v !== null && v !== '' ?
15920                            parseInt(String(v).replace(stripRe, ""), 10) : '';
15921                     };
15922                 break;
15923             case "float":
15924                 cv = function(v){
15925                     return v !== undefined && v !== null && v !== '' ?
15926                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
15927                     };
15928                 break;
15929             case "bool":
15930             case "boolean":
15931                 cv = function(v){ return v === true || v === "true" || v == 1; };
15932                 break;
15933             case "date":
15934                 cv = function(v){
15935                     if(!v){
15936                         return '';
15937                     }
15938                     if(v instanceof Date){
15939                         return v;
15940                     }
15941                     if(dateFormat){
15942                         if(dateFormat == "timestamp"){
15943                             return new Date(v*1000);
15944                         }
15945                         return Date.parseDate(v, dateFormat);
15946                     }
15947                     var parsed = Date.parse(v);
15948                     return parsed ? new Date(parsed) : null;
15949                 };
15950              break;
15951             
15952         }
15953         this.convert = cv;
15954     }
15955 };
15956
15957 Roo.data.Field.prototype = {
15958     dateFormat: null,
15959     defaultValue: "",
15960     mapping: null,
15961     sortType : null,
15962     sortDir : "ASC"
15963 };/*
15964  * Based on:
15965  * Ext JS Library 1.1.1
15966  * Copyright(c) 2006-2007, Ext JS, LLC.
15967  *
15968  * Originally Released Under LGPL - original licence link has changed is not relivant.
15969  *
15970  * Fork - LGPL
15971  * <script type="text/javascript">
15972  */
15973  
15974 // Base class for reading structured data from a data source.  This class is intended to be
15975 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
15976
15977 /**
15978  * @class Roo.data.DataReader
15979  * @abstract
15980  * Base class for reading structured data from a data source.  This class is intended to be
15981  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
15982  */
15983
15984 Roo.data.DataReader = function(meta, recordType){
15985     
15986     this.meta = meta;
15987     
15988     this.recordType = recordType instanceof Array ? 
15989         Roo.data.Record.create(recordType) : recordType;
15990 };
15991
15992 Roo.data.DataReader.prototype = {
15993     
15994     
15995     readerType : 'Data',
15996      /**
15997      * Create an empty record
15998      * @param {Object} data (optional) - overlay some values
15999      * @return {Roo.data.Record} record created.
16000      */
16001     newRow :  function(d) {
16002         var da =  {};
16003         this.recordType.prototype.fields.each(function(c) {
16004             switch( c.type) {
16005                 case 'int' : da[c.name] = 0; break;
16006                 case 'date' : da[c.name] = new Date(); break;
16007                 case 'float' : da[c.name] = 0.0; break;
16008                 case 'boolean' : da[c.name] = false; break;
16009                 default : da[c.name] = ""; break;
16010             }
16011             
16012         });
16013         return new this.recordType(Roo.apply(da, d));
16014     }
16015     
16016     
16017 };/*
16018  * Based on:
16019  * Ext JS Library 1.1.1
16020  * Copyright(c) 2006-2007, Ext JS, LLC.
16021  *
16022  * Originally Released Under LGPL - original licence link has changed is not relivant.
16023  *
16024  * Fork - LGPL
16025  * <script type="text/javascript">
16026  */
16027
16028 /**
16029  * @class Roo.data.DataProxy
16030  * @extends Roo.util.Observable
16031  * @abstract
16032  * This class is an abstract base class for implementations which provide retrieval of
16033  * unformatted data objects.<br>
16034  * <p>
16035  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
16036  * (of the appropriate type which knows how to parse the data object) to provide a block of
16037  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
16038  * <p>
16039  * Custom implementations must implement the load method as described in
16040  * {@link Roo.data.HttpProxy#load}.
16041  */
16042 Roo.data.DataProxy = function(){
16043     this.addEvents({
16044         /**
16045          * @event beforeload
16046          * Fires before a network request is made to retrieve a data object.
16047          * @param {Object} This DataProxy object.
16048          * @param {Object} params The params parameter to the load function.
16049          */
16050         beforeload : true,
16051         /**
16052          * @event load
16053          * Fires before the load method's callback is called.
16054          * @param {Object} This DataProxy object.
16055          * @param {Object} o The data object.
16056          * @param {Object} arg The callback argument object passed to the load function.
16057          */
16058         load : true,
16059         /**
16060          * @event loadexception
16061          * Fires if an Exception occurs during data retrieval.
16062          * @param {Object} This DataProxy object.
16063          * @param {Object} o The data object.
16064          * @param {Object} arg The callback argument object passed to the load function.
16065          * @param {Object} e The Exception.
16066          */
16067         loadexception : true
16068     });
16069     Roo.data.DataProxy.superclass.constructor.call(this);
16070 };
16071
16072 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
16073
16074     /**
16075      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
16076      */
16077 /*
16078  * Based on:
16079  * Ext JS Library 1.1.1
16080  * Copyright(c) 2006-2007, Ext JS, LLC.
16081  *
16082  * Originally Released Under LGPL - original licence link has changed is not relivant.
16083  *
16084  * Fork - LGPL
16085  * <script type="text/javascript">
16086  */
16087 /**
16088  * @class Roo.data.MemoryProxy
16089  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
16090  * to the Reader when its load method is called.
16091  * @constructor
16092  * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
16093  */
16094 Roo.data.MemoryProxy = function(data){
16095     if (data.data) {
16096         data = data.data;
16097     }
16098     Roo.data.MemoryProxy.superclass.constructor.call(this);
16099     this.data = data;
16100 };
16101
16102 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
16103     
16104     /**
16105      * Load data from the requested source (in this case an in-memory
16106      * data object passed to the constructor), read the data object into
16107      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
16108      * process that block using the passed callback.
16109      * @param {Object} params This parameter is not used by the MemoryProxy class.
16110      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16111      * object into a block of Roo.data.Records.
16112      * @param {Function} callback The function into which to pass the block of Roo.data.records.
16113      * The function must be passed <ul>
16114      * <li>The Record block object</li>
16115      * <li>The "arg" argument from the load function</li>
16116      * <li>A boolean success indicator</li>
16117      * </ul>
16118      * @param {Object} scope The scope in which to call the callback
16119      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16120      */
16121     load : function(params, reader, callback, scope, arg){
16122         params = params || {};
16123         var result;
16124         try {
16125             result = reader.readRecords(params.data ? params.data :this.data);
16126         }catch(e){
16127             this.fireEvent("loadexception", this, arg, null, e);
16128             callback.call(scope, null, arg, false);
16129             return;
16130         }
16131         callback.call(scope, result, arg, true);
16132     },
16133     
16134     // private
16135     update : function(params, records){
16136         
16137     }
16138 });/*
16139  * Based on:
16140  * Ext JS Library 1.1.1
16141  * Copyright(c) 2006-2007, Ext JS, LLC.
16142  *
16143  * Originally Released Under LGPL - original licence link has changed is not relivant.
16144  *
16145  * Fork - LGPL
16146  * <script type="text/javascript">
16147  */
16148 /**
16149  * @class Roo.data.HttpProxy
16150  * @extends Roo.data.DataProxy
16151  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
16152  * configured to reference a certain URL.<br><br>
16153  * <p>
16154  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
16155  * from which the running page was served.<br><br>
16156  * <p>
16157  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
16158  * <p>
16159  * Be aware that to enable the browser to parse an XML document, the server must set
16160  * the Content-Type header in the HTTP response to "text/xml".
16161  * @constructor
16162  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
16163  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
16164  * will be used to make the request.
16165  */
16166 Roo.data.HttpProxy = function(conn){
16167     Roo.data.HttpProxy.superclass.constructor.call(this);
16168     // is conn a conn config or a real conn?
16169     this.conn = conn;
16170     this.useAjax = !conn || !conn.events;
16171   
16172 };
16173
16174 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
16175     // thse are take from connection...
16176     
16177     /**
16178      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
16179      */
16180     /**
16181      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
16182      * extra parameters to each request made by this object. (defaults to undefined)
16183      */
16184     /**
16185      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
16186      *  to each request made by this object. (defaults to undefined)
16187      */
16188     /**
16189      * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
16190      */
16191     /**
16192      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
16193      */
16194      /**
16195      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
16196      * @type Boolean
16197      */
16198   
16199
16200     /**
16201      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
16202      * @type Boolean
16203      */
16204     /**
16205      * Return the {@link Roo.data.Connection} object being used by this Proxy.
16206      * @return {Connection} The Connection object. This object may be used to subscribe to events on
16207      * a finer-grained basis than the DataProxy events.
16208      */
16209     getConnection : function(){
16210         return this.useAjax ? Roo.Ajax : this.conn;
16211     },
16212
16213     /**
16214      * Load data from the configured {@link Roo.data.Connection}, read the data object into
16215      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
16216      * process that block using the passed callback.
16217      * @param {Object} params An object containing properties which are to be used as HTTP parameters
16218      * for the request to the remote server.
16219      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16220      * object into a block of Roo.data.Records.
16221      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
16222      * The function must be passed <ul>
16223      * <li>The Record block object</li>
16224      * <li>The "arg" argument from the load function</li>
16225      * <li>A boolean success indicator</li>
16226      * </ul>
16227      * @param {Object} scope The scope in which to call the callback
16228      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16229      */
16230     load : function(params, reader, callback, scope, arg){
16231         if(this.fireEvent("beforeload", this, params) !== false){
16232             var  o = {
16233                 params : params || {},
16234                 request: {
16235                     callback : callback,
16236                     scope : scope,
16237                     arg : arg
16238                 },
16239                 reader: reader,
16240                 callback : this.loadResponse,
16241                 scope: this
16242             };
16243             if(this.useAjax){
16244                 Roo.applyIf(o, this.conn);
16245                 if(this.activeRequest){
16246                     Roo.Ajax.abort(this.activeRequest);
16247                 }
16248                 this.activeRequest = Roo.Ajax.request(o);
16249             }else{
16250                 this.conn.request(o);
16251             }
16252         }else{
16253             callback.call(scope||this, null, arg, false);
16254         }
16255     },
16256
16257     // private
16258     loadResponse : function(o, success, response){
16259         delete this.activeRequest;
16260         if(!success){
16261             this.fireEvent("loadexception", this, o, response);
16262             o.request.callback.call(o.request.scope, null, o.request.arg, false);
16263             return;
16264         }
16265         var result;
16266         try {
16267             result = o.reader.read(response);
16268         }catch(e){
16269             o.success = false;
16270             o.raw = { errorMsg : response.responseText };
16271             this.fireEvent("loadexception", this, o, response, e);
16272             o.request.callback.call(o.request.scope, o, o.request.arg, false);
16273             return;
16274         }
16275         
16276         this.fireEvent("load", this, o, o.request.arg);
16277         o.request.callback.call(o.request.scope, result, o.request.arg, true);
16278     },
16279
16280     // private
16281     update : function(dataSet){
16282
16283     },
16284
16285     // private
16286     updateResponse : function(dataSet){
16287
16288     }
16289 });/*
16290  * Based on:
16291  * Ext JS Library 1.1.1
16292  * Copyright(c) 2006-2007, Ext JS, LLC.
16293  *
16294  * Originally Released Under LGPL - original licence link has changed is not relivant.
16295  *
16296  * Fork - LGPL
16297  * <script type="text/javascript">
16298  */
16299
16300 /**
16301  * @class Roo.data.ScriptTagProxy
16302  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
16303  * other than the originating domain of the running page.<br><br>
16304  * <p>
16305  * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
16306  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
16307  * <p>
16308  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
16309  * source code that is used as the source inside a &lt;script> tag.<br><br>
16310  * <p>
16311  * In order for the browser to process the returned data, the server must wrap the data object
16312  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
16313  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
16314  * depending on whether the callback name was passed:
16315  * <p>
16316  * <pre><code>
16317 boolean scriptTag = false;
16318 String cb = request.getParameter("callback");
16319 if (cb != null) {
16320     scriptTag = true;
16321     response.setContentType("text/javascript");
16322 } else {
16323     response.setContentType("application/x-json");
16324 }
16325 Writer out = response.getWriter();
16326 if (scriptTag) {
16327     out.write(cb + "(");
16328 }
16329 out.print(dataBlock.toJsonString());
16330 if (scriptTag) {
16331     out.write(");");
16332 }
16333 </pre></code>
16334  *
16335  * @constructor
16336  * @param {Object} config A configuration object.
16337  */
16338 Roo.data.ScriptTagProxy = function(config){
16339     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
16340     Roo.apply(this, config);
16341     this.head = document.getElementsByTagName("head")[0];
16342 };
16343
16344 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
16345
16346 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
16347     /**
16348      * @cfg {String} url The URL from which to request the data object.
16349      */
16350     /**
16351      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
16352      */
16353     timeout : 30000,
16354     /**
16355      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
16356      * the server the name of the callback function set up by the load call to process the returned data object.
16357      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
16358      * javascript output which calls this named function passing the data object as its only parameter.
16359      */
16360     callbackParam : "callback",
16361     /**
16362      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
16363      * name to the request.
16364      */
16365     nocache : true,
16366
16367     /**
16368      * Load data from the configured URL, read the data object into
16369      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
16370      * process that block using the passed callback.
16371      * @param {Object} params An object containing properties which are to be used as HTTP parameters
16372      * for the request to the remote server.
16373      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16374      * object into a block of Roo.data.Records.
16375      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
16376      * The function must be passed <ul>
16377      * <li>The Record block object</li>
16378      * <li>The "arg" argument from the load function</li>
16379      * <li>A boolean success indicator</li>
16380      * </ul>
16381      * @param {Object} scope The scope in which to call the callback
16382      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16383      */
16384     load : function(params, reader, callback, scope, arg){
16385         if(this.fireEvent("beforeload", this, params) !== false){
16386
16387             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
16388
16389             var url = this.url;
16390             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
16391             if(this.nocache){
16392                 url += "&_dc=" + (new Date().getTime());
16393             }
16394             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
16395             var trans = {
16396                 id : transId,
16397                 cb : "stcCallback"+transId,
16398                 scriptId : "stcScript"+transId,
16399                 params : params,
16400                 arg : arg,
16401                 url : url,
16402                 callback : callback,
16403                 scope : scope,
16404                 reader : reader
16405             };
16406             var conn = this;
16407
16408             window[trans.cb] = function(o){
16409                 conn.handleResponse(o, trans);
16410             };
16411
16412             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
16413
16414             if(this.autoAbort !== false){
16415                 this.abort();
16416             }
16417
16418             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
16419
16420             var script = document.createElement("script");
16421             script.setAttribute("src", url);
16422             script.setAttribute("type", "text/javascript");
16423             script.setAttribute("id", trans.scriptId);
16424             this.head.appendChild(script);
16425
16426             this.trans = trans;
16427         }else{
16428             callback.call(scope||this, null, arg, false);
16429         }
16430     },
16431
16432     // private
16433     isLoading : function(){
16434         return this.trans ? true : false;
16435     },
16436
16437     /**
16438      * Abort the current server request.
16439      */
16440     abort : function(){
16441         if(this.isLoading()){
16442             this.destroyTrans(this.trans);
16443         }
16444     },
16445
16446     // private
16447     destroyTrans : function(trans, isLoaded){
16448         this.head.removeChild(document.getElementById(trans.scriptId));
16449         clearTimeout(trans.timeoutId);
16450         if(isLoaded){
16451             window[trans.cb] = undefined;
16452             try{
16453                 delete window[trans.cb];
16454             }catch(e){}
16455         }else{
16456             // if hasn't been loaded, wait for load to remove it to prevent script error
16457             window[trans.cb] = function(){
16458                 window[trans.cb] = undefined;
16459                 try{
16460                     delete window[trans.cb];
16461                 }catch(e){}
16462             };
16463         }
16464     },
16465
16466     // private
16467     handleResponse : function(o, trans){
16468         this.trans = false;
16469         this.destroyTrans(trans, true);
16470         var result;
16471         try {
16472             result = trans.reader.readRecords(o);
16473         }catch(e){
16474             this.fireEvent("loadexception", this, o, trans.arg, e);
16475             trans.callback.call(trans.scope||window, null, trans.arg, false);
16476             return;
16477         }
16478         this.fireEvent("load", this, o, trans.arg);
16479         trans.callback.call(trans.scope||window, result, trans.arg, true);
16480     },
16481
16482     // private
16483     handleFailure : function(trans){
16484         this.trans = false;
16485         this.destroyTrans(trans, false);
16486         this.fireEvent("loadexception", this, null, trans.arg);
16487         trans.callback.call(trans.scope||window, null, trans.arg, false);
16488     }
16489 });/*
16490  * Based on:
16491  * Ext JS Library 1.1.1
16492  * Copyright(c) 2006-2007, Ext JS, LLC.
16493  *
16494  * Originally Released Under LGPL - original licence link has changed is not relivant.
16495  *
16496  * Fork - LGPL
16497  * <script type="text/javascript">
16498  */
16499
16500 /**
16501  * @class Roo.data.JsonReader
16502  * @extends Roo.data.DataReader
16503  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
16504  * based on mappings in a provided Roo.data.Record constructor.
16505  * 
16506  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
16507  * in the reply previously. 
16508  * 
16509  * <p>
16510  * Example code:
16511  * <pre><code>
16512 var RecordDef = Roo.data.Record.create([
16513     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
16514     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
16515 ]);
16516 var myReader = new Roo.data.JsonReader({
16517     totalProperty: "results",    // The property which contains the total dataset size (optional)
16518     root: "rows",                // The property which contains an Array of row objects
16519     id: "id"                     // The property within each row object that provides an ID for the record (optional)
16520 }, RecordDef);
16521 </code></pre>
16522  * <p>
16523  * This would consume a JSON file like this:
16524  * <pre><code>
16525 { 'results': 2, 'rows': [
16526     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
16527     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
16528 }
16529 </code></pre>
16530  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
16531  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
16532  * paged from the remote server.
16533  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
16534  * @cfg {String} root name of the property which contains the Array of row objects.
16535  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
16536  * @cfg {Array} fields Array of field definition objects
16537  * @constructor
16538  * Create a new JsonReader
16539  * @param {Object} meta Metadata configuration options
16540  * @param {Object} recordType Either an Array of field definition objects,
16541  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
16542  */
16543 Roo.data.JsonReader = function(meta, recordType){
16544     
16545     meta = meta || {};
16546     // set some defaults:
16547     Roo.applyIf(meta, {
16548         totalProperty: 'total',
16549         successProperty : 'success',
16550         root : 'data',
16551         id : 'id'
16552     });
16553     
16554     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
16555 };
16556 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
16557     
16558     readerType : 'Json',
16559     
16560     /**
16561      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
16562      * Used by Store query builder to append _requestMeta to params.
16563      * 
16564      */
16565     metaFromRemote : false,
16566     /**
16567      * This method is only used by a DataProxy which has retrieved data from a remote server.
16568      * @param {Object} response The XHR object which contains the JSON data in its responseText.
16569      * @return {Object} data A data block which is used by an Roo.data.Store object as
16570      * a cache of Roo.data.Records.
16571      */
16572     read : function(response){
16573         var json = response.responseText;
16574        
16575         var o = /* eval:var:o */ eval("("+json+")");
16576         if(!o) {
16577             throw {message: "JsonReader.read: Json object not found"};
16578         }
16579         
16580         if(o.metaData){
16581             
16582             delete this.ef;
16583             this.metaFromRemote = true;
16584             this.meta = o.metaData;
16585             this.recordType = Roo.data.Record.create(o.metaData.fields);
16586             this.onMetaChange(this.meta, this.recordType, o);
16587         }
16588         return this.readRecords(o);
16589     },
16590
16591     // private function a store will implement
16592     onMetaChange : function(meta, recordType, o){
16593
16594     },
16595
16596     /**
16597          * @ignore
16598          */
16599     simpleAccess: function(obj, subsc) {
16600         return obj[subsc];
16601     },
16602
16603         /**
16604          * @ignore
16605          */
16606     getJsonAccessor: function(){
16607         var re = /[\[\.]/;
16608         return function(expr) {
16609             try {
16610                 return(re.test(expr))
16611                     ? new Function("obj", "return obj." + expr)
16612                     : function(obj){
16613                         return obj[expr];
16614                     };
16615             } catch(e){}
16616             return Roo.emptyFn;
16617         };
16618     }(),
16619
16620     /**
16621      * Create a data block containing Roo.data.Records from an XML document.
16622      * @param {Object} o An object which contains an Array of row objects in the property specified
16623      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
16624      * which contains the total size of the dataset.
16625      * @return {Object} data A data block which is used by an Roo.data.Store object as
16626      * a cache of Roo.data.Records.
16627      */
16628     readRecords : function(o){
16629         /**
16630          * After any data loads, the raw JSON data is available for further custom processing.
16631          * @type Object
16632          */
16633         this.o = o;
16634         var s = this.meta, Record = this.recordType,
16635             f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
16636
16637 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
16638         if (!this.ef) {
16639             if(s.totalProperty) {
16640                     this.getTotal = this.getJsonAccessor(s.totalProperty);
16641                 }
16642                 if(s.successProperty) {
16643                     this.getSuccess = this.getJsonAccessor(s.successProperty);
16644                 }
16645                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
16646                 if (s.id) {
16647                         var g = this.getJsonAccessor(s.id);
16648                         this.getId = function(rec) {
16649                                 var r = g(rec);  
16650                                 return (r === undefined || r === "") ? null : r;
16651                         };
16652                 } else {
16653                         this.getId = function(){return null;};
16654                 }
16655             this.ef = [];
16656             for(var jj = 0; jj < fl; jj++){
16657                 f = fi[jj];
16658                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
16659                 this.ef[jj] = this.getJsonAccessor(map);
16660             }
16661         }
16662
16663         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
16664         if(s.totalProperty){
16665             var vt = parseInt(this.getTotal(o), 10);
16666             if(!isNaN(vt)){
16667                 totalRecords = vt;
16668             }
16669         }
16670         if(s.successProperty){
16671             var vs = this.getSuccess(o);
16672             if(vs === false || vs === 'false'){
16673                 success = false;
16674             }
16675         }
16676         var records = [];
16677         for(var i = 0; i < c; i++){
16678             var n = root[i];
16679             var values = {};
16680             var id = this.getId(n);
16681             for(var j = 0; j < fl; j++){
16682                 f = fi[j];
16683                                 var v = this.ef[j](n);
16684                                 if (!f.convert) {
16685                                         Roo.log('missing convert for ' + f.name);
16686                                         Roo.log(f);
16687                                         continue;
16688                                 }
16689                                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
16690             }
16691                         if (!Record) {
16692                                 return {
16693                                         raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
16694                                         success : false,
16695                                         records : [],
16696                                         totalRecords : 0
16697                                 };
16698                         }
16699             var record = new Record(values, id);
16700             record.json = n;
16701             records[i] = record;
16702         }
16703         return {
16704             raw : o,
16705             success : success,
16706             records : records,
16707             totalRecords : totalRecords
16708         };
16709     },
16710     // used when loading children.. @see loadDataFromChildren
16711     toLoadData: function(rec)
16712     {
16713         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
16714         var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
16715         return { data : data, total : data.length };
16716         
16717     }
16718 });/*
16719  * Based on:
16720  * Ext JS Library 1.1.1
16721  * Copyright(c) 2006-2007, Ext JS, LLC.
16722  *
16723  * Originally Released Under LGPL - original licence link has changed is not relivant.
16724  *
16725  * Fork - LGPL
16726  * <script type="text/javascript">
16727  */
16728
16729 /**
16730  * @class Roo.data.ArrayReader
16731  * @extends Roo.data.DataReader
16732  * Data reader class to create an Array of Roo.data.Record objects from an Array.
16733  * Each element of that Array represents a row of data fields. The
16734  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
16735  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
16736  * <p>
16737  * Example code:.
16738  * <pre><code>
16739 var RecordDef = Roo.data.Record.create([
16740     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
16741     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
16742 ]);
16743 var myReader = new Roo.data.ArrayReader({
16744     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
16745 }, RecordDef);
16746 </code></pre>
16747  * <p>
16748  * This would consume an Array like this:
16749  * <pre><code>
16750 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
16751   </code></pre>
16752  
16753  * @constructor
16754  * Create a new JsonReader
16755  * @param {Object} meta Metadata configuration options.
16756  * @param {Object|Array} recordType Either an Array of field definition objects
16757  * 
16758  * @cfg {Array} fields Array of field definition objects
16759  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
16760  * as specified to {@link Roo.data.Record#create},
16761  * or an {@link Roo.data.Record} object
16762  *
16763  * 
16764  * created using {@link Roo.data.Record#create}.
16765  */
16766 Roo.data.ArrayReader = function(meta, recordType)
16767 {    
16768     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
16769 };
16770
16771 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
16772     
16773       /**
16774      * Create a data block containing Roo.data.Records from an XML document.
16775      * @param {Object} o An Array of row objects which represents the dataset.
16776      * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
16777      * a cache of Roo.data.Records.
16778      */
16779     readRecords : function(o)
16780     {
16781         var sid = this.meta ? this.meta.id : null;
16782         var recordType = this.recordType, fields = recordType.prototype.fields;
16783         var records = [];
16784         var root = o;
16785         for(var i = 0; i < root.length; i++){
16786             var n = root[i];
16787             var values = {};
16788             var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
16789             for(var j = 0, jlen = fields.length; j < jlen; j++){
16790                 var f = fields.items[j];
16791                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
16792                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
16793                 v = f.convert(v);
16794                 values[f.name] = v;
16795             }
16796             var record = new recordType(values, id);
16797             record.json = n;
16798             records[records.length] = record;
16799         }
16800         return {
16801             records : records,
16802             totalRecords : records.length
16803         };
16804     },
16805     // used when loading children.. @see loadDataFromChildren
16806     toLoadData: function(rec)
16807     {
16808         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
16809         return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
16810         
16811     }
16812     
16813     
16814 });/*
16815  * - LGPL
16816  * * 
16817  */
16818
16819 /**
16820  * @class Roo.bootstrap.form.ComboBox
16821  * @extends Roo.bootstrap.form.TriggerField
16822  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
16823  * @cfg {Boolean} append (true|false) default false
16824  * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
16825  * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
16826  * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
16827  * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
16828  * @cfg {String} btnPosition set the position of the trigger button (left | right) default right
16829  * @cfg {Boolean} animate default true
16830  * @cfg {Boolean} emptyResultText only for touch device
16831  * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
16832  * @cfg {String} emptyTitle default ''
16833  * @cfg {Number} width fixed with? experimental
16834  * @constructor
16835  * Create a new ComboBox.
16836  * @param {Object} config Configuration options
16837  */
16838 Roo.bootstrap.form.ComboBox = function(config){
16839     Roo.bootstrap.form.ComboBox.superclass.constructor.call(this, config);
16840     this.addEvents({
16841         /**
16842          * @event expand
16843          * Fires when the dropdown list is expanded
16844         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16845         */
16846         'expand' : true,
16847         /**
16848          * @event collapse
16849          * Fires when the dropdown list is collapsed
16850         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16851         */
16852         'collapse' : true,
16853         /**
16854          * @event beforeselect
16855          * Fires before a list item is selected. Return false to cancel the selection.
16856         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16857         * @param {Roo.data.Record} record The data record returned from the underlying store
16858         * @param {Number} index The index of the selected item in the dropdown list
16859         */
16860         'beforeselect' : true,
16861         /**
16862          * @event select
16863          * Fires when a list item is selected
16864         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16865         * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
16866         * @param {Number} index The index of the selected item in the dropdown list
16867         */
16868         'select' : true,
16869         /**
16870          * @event beforequery
16871          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
16872          * The event object passed has these properties:
16873         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16874         * @param {String} query The query
16875         * @param {Boolean} forceAll true to force "all" query
16876         * @param {Boolean} cancel true to cancel the query
16877         * @param {Object} e The query event object
16878         */
16879         'beforequery': true,
16880          /**
16881          * @event add
16882          * Fires when the 'add' icon is pressed (add a listener to enable add button)
16883         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16884         */
16885         'add' : true,
16886         /**
16887          * @event edit
16888          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
16889         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16890         * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
16891         */
16892         'edit' : true,
16893         /**
16894          * @event remove
16895          * Fires when the remove value from the combobox array
16896         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16897         */
16898         'remove' : true,
16899         /**
16900          * @event afterremove
16901          * Fires when the remove value from the combobox array
16902         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16903         */
16904         'afterremove' : true,
16905         /**
16906          * @event specialfilter
16907          * Fires when specialfilter
16908             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16909             */
16910         'specialfilter' : true,
16911         /**
16912          * @event tick
16913          * Fires when tick the element
16914             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16915             */
16916         'tick' : true,
16917         /**
16918          * @event touchviewdisplay
16919          * Fires when touch view require special display (default is using displayField)
16920             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16921             * @param {Object} cfg set html .
16922             */
16923         'touchviewdisplay' : true
16924         
16925     });
16926     
16927     this.item = [];
16928     this.tickItems = [];
16929     
16930     this.selectedIndex = -1;
16931     if(this.mode == 'local'){
16932         if(config.queryDelay === undefined){
16933             this.queryDelay = 10;
16934         }
16935         if(config.minChars === undefined){
16936             this.minChars = 0;
16937         }
16938     }
16939 };
16940
16941 Roo.extend(Roo.bootstrap.form.ComboBox, Roo.bootstrap.form.TriggerField, {
16942      
16943     /**
16944      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
16945      * rendering into an Roo.Editor, defaults to false)
16946      */
16947     /**
16948      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
16949      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
16950      */
16951     /**
16952      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
16953      */
16954     /**
16955      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
16956      * the dropdown list (defaults to undefined, with no header element)
16957      */
16958
16959      /**
16960      * @cfg {String/Roo.Template} tpl The template to use to render the output default is  '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' 
16961      */
16962      
16963      /**
16964      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
16965      */
16966     listWidth: undefined,
16967     /**
16968      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
16969      * mode = 'remote' or 'text' if mode = 'local')
16970      */
16971     displayField: undefined,
16972     
16973     /**
16974      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
16975      * mode = 'remote' or 'value' if mode = 'local'). 
16976      * Note: use of a valueField requires the user make a selection
16977      * in order for a value to be mapped.
16978      */
16979     valueField: undefined,
16980     /**
16981      * @cfg {String} modalTitle The title of the dialog that pops up on mobile views.
16982      */
16983     modalTitle : '',
16984     
16985     /**
16986      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
16987      * field's data value (defaults to the underlying DOM element's name)
16988      */
16989     hiddenName: undefined,
16990     /**
16991      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
16992      */
16993     listClass: '',
16994     /**
16995      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
16996      */
16997     selectedClass: 'active',
16998     
16999     /**
17000      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
17001      */
17002     shadow:'sides',
17003     /**
17004      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
17005      * anchor positions (defaults to 'tl-bl')
17006      */
17007     listAlign: 'tl-bl?',
17008     /**
17009      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
17010      */
17011     maxHeight: 300,
17012     /**
17013      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
17014      * query specified by the allQuery config option (defaults to 'query')
17015      */
17016     triggerAction: 'query',
17017     /**
17018      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
17019      * (defaults to 4, does not apply if editable = false)
17020      */
17021     minChars : 4,
17022     /**
17023      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
17024      * delay (typeAheadDelay) if it matches a known value (defaults to false)
17025      */
17026     typeAhead: false,
17027     /**
17028      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
17029      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
17030      */
17031     queryDelay: 500,
17032     /**
17033      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
17034      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
17035      */
17036     pageSize: 0,
17037     /**
17038      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
17039      * when editable = true (defaults to false)
17040      */
17041     selectOnFocus:false,
17042     /**
17043      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
17044      */
17045     queryParam: 'query',
17046     /**
17047      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
17048      * when mode = 'remote' (defaults to 'Loading...')
17049      */
17050     loadingText: 'Loading...',
17051     /**
17052      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
17053      */
17054     resizable: false,
17055     /**
17056      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
17057      */
17058     handleHeight : 8,
17059     /**
17060      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
17061      * traditional select (defaults to true)
17062      */
17063     editable: true,
17064     /**
17065      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
17066      */
17067     allQuery: '',
17068     /**
17069      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
17070      */
17071     mode: 'remote',
17072     /**
17073      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
17074      * listWidth has a higher value)
17075      */
17076     minListWidth : 70,
17077     /**
17078      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
17079      * allow the user to set arbitrary text into the field (defaults to false)
17080      */
17081     forceSelection:false,
17082     /**
17083      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
17084      * if typeAhead = true (defaults to 250)
17085      */
17086     typeAheadDelay : 250,
17087     /**
17088      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
17089      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
17090      */
17091     valueNotFoundText : undefined,
17092     /**
17093      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
17094      */
17095     blockFocus : false,
17096     
17097     /**
17098      * @cfg {Boolean} disableClear Disable showing of clear button.
17099      */
17100     disableClear : false,
17101     /**
17102      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
17103      */
17104     alwaysQuery : false,
17105     
17106     /**
17107      * @cfg {Boolean} multiple  (true|false) ComboBobArray, default false
17108      */
17109     multiple : false,
17110     
17111     /**
17112      * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now
17113      */
17114     invalidClass : "has-warning",
17115     
17116     /**
17117      * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now
17118      */
17119     validClass : "has-success",
17120     
17121     /**
17122      * @cfg {Boolean} specialFilter (true|false) special filter default false
17123      */
17124     specialFilter : false,
17125     
17126     /**
17127      * @cfg {Boolean} mobileTouchView (true|false) show mobile touch view when using a mobile default true
17128      */
17129     mobileTouchView : true,
17130     
17131     /**
17132      * @cfg {Boolean} useNativeIOS (true|false) render it as classic select for ios, not support dynamic load data (default false)
17133      */
17134     useNativeIOS : false,
17135     
17136     /**
17137      * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view
17138      */
17139     mobile_restrict_height : false,
17140     
17141     ios_options : false,
17142     
17143     //private
17144     addicon : false,
17145     editicon: false,
17146     
17147     page: 0,
17148     hasQuery: false,
17149     append: false,
17150     loadNext: false,
17151     autoFocus : true,
17152     tickable : false,
17153     btnPosition : 'right',
17154     triggerList : true,
17155     showToggleBtn : true,
17156     animate : true,
17157     emptyResultText: 'Empty',
17158     triggerText : 'Select',
17159     emptyTitle : '',
17160     width : false,
17161     
17162     // element that contains real text value.. (when hidden is used..)
17163     
17164     getAutoCreate : function()
17165     {   
17166         var cfg = false;
17167         //render
17168         /*
17169          * Render classic select for iso
17170          */
17171         
17172         if(Roo.isIOS && this.useNativeIOS){
17173             cfg = this.getAutoCreateNativeIOS();
17174             return cfg;
17175         }
17176         
17177         /*
17178          * Touch Devices
17179          */
17180         
17181         if(Roo.isTouch && this.mobileTouchView){
17182             cfg = this.getAutoCreateTouchView();
17183             return cfg;;
17184         }
17185         
17186         /*
17187          *  Normal ComboBox
17188          */
17189         if(!this.tickable){
17190             cfg = Roo.bootstrap.form.ComboBox.superclass.getAutoCreate.call(this);
17191             return cfg;
17192         }
17193         
17194         /*
17195          *  ComboBox with tickable selections
17196          */
17197              
17198         var align = this.labelAlign || this.parentLabelAlign();
17199         
17200         cfg = {
17201             cls : 'form-group roo-combobox-tickable' //input-group
17202         };
17203         
17204         var btn_text_select = '';
17205         var btn_text_done = '';
17206         var btn_text_cancel = '';
17207         
17208         if (this.btn_text_show) {
17209             btn_text_select = 'Select';
17210             btn_text_done = 'Done';
17211             btn_text_cancel = 'Cancel'; 
17212         }
17213         
17214         var buttons = {
17215             tag : 'div',
17216             cls : 'tickable-buttons',
17217             cn : [
17218                 {
17219                     tag : 'button',
17220                     type : 'button',
17221                     cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
17222                     //html : this.triggerText
17223                     html: btn_text_select
17224                 },
17225                 {
17226                     tag : 'button',
17227                     type : 'button',
17228                     name : 'ok',
17229                     cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
17230                     //html : 'Done'
17231                     html: btn_text_done
17232                 },
17233                 {
17234                     tag : 'button',
17235                     type : 'button',
17236                     name : 'cancel',
17237                     cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
17238                     //html : 'Cancel'
17239                     html: btn_text_cancel
17240                 }
17241             ]
17242         };
17243         
17244         if(this.editable){
17245             buttons.cn.unshift({
17246                 tag: 'input',
17247                 cls: 'roo-select2-search-field-input'
17248             });
17249         }
17250         
17251         var _this = this;
17252         
17253         Roo.each(buttons.cn, function(c){
17254             if (_this.size) {
17255                 c.cls += ' btn-' + _this.size;
17256             }
17257
17258             if (_this.disabled) {
17259                 c.disabled = true;
17260             }
17261         });
17262         
17263         var box = {
17264             tag: 'div',
17265             style : 'display: contents',
17266             cn: [
17267                 {
17268                     tag: 'input',
17269                     type : 'hidden',
17270                     cls: 'form-hidden-field'
17271                 },
17272                 {
17273                     tag: 'ul',
17274                     cls: 'roo-select2-choices',
17275                     cn:[
17276                         {
17277                             tag: 'li',
17278                             cls: 'roo-select2-search-field',
17279                             cn: [
17280                                 buttons
17281                             ]
17282                         }
17283                     ]
17284                 }
17285             ]
17286         };
17287         
17288         var combobox = {
17289             cls: 'roo-select2-container input-group roo-select2-container-multi',
17290             cn: [
17291                 
17292                 box
17293 //                {
17294 //                    tag: 'ul',
17295 //                    cls: 'typeahead typeahead-long dropdown-menu',
17296 //                    style: 'display:none; max-height:' + this.maxHeight + 'px;'
17297 //                }
17298             ]
17299         };
17300         
17301         if(this.hasFeedback && !this.allowBlank){
17302             
17303             var feedback = {
17304                 tag: 'span',
17305                 cls: 'glyphicon form-control-feedback'
17306             };
17307
17308             combobox.cn.push(feedback);
17309         }
17310         
17311         
17312         
17313         var indicator = {
17314             tag : 'i',
17315             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
17316             tooltip : 'This field is required'
17317         };
17318         if (Roo.bootstrap.version == 4) {
17319             indicator = {
17320                 tag : 'i',
17321                 style : 'display:none'
17322             };
17323         }
17324         if (align ==='left' && this.fieldLabel.length) {
17325             
17326             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
17327             
17328             cfg.cn = [
17329                 indicator,
17330                 {
17331                     tag: 'label',
17332                     'for' :  id,
17333                     cls : 'control-label col-form-label',
17334                     html : this.fieldLabel
17335
17336                 },
17337                 {
17338                     cls : "", 
17339                     cn: [
17340                         combobox
17341                     ]
17342                 }
17343
17344             ];
17345             
17346             var labelCfg = cfg.cn[1];
17347             var contentCfg = cfg.cn[2];
17348             
17349
17350             if(this.indicatorpos == 'right'){
17351                 
17352                 cfg.cn = [
17353                     {
17354                         tag: 'label',
17355                         'for' :  id,
17356                         cls : 'control-label col-form-label',
17357                         cn : [
17358                             {
17359                                 tag : 'span',
17360                                 html : this.fieldLabel
17361                             },
17362                             indicator
17363                         ]
17364                     },
17365                     {
17366                         cls : "",
17367                         cn: [
17368                             combobox
17369                         ]
17370                     }
17371
17372                 ];
17373                 
17374                 
17375                 
17376                 labelCfg = cfg.cn[0];
17377                 contentCfg = cfg.cn[1];
17378             
17379             }
17380             
17381             if(this.labelWidth > 12){
17382                 labelCfg.style = "width: " + this.labelWidth + 'px';
17383             }
17384             if(this.width * 1 > 0){
17385                 contentCfg.style = "width: " + this.width + 'px';
17386             }
17387             if(this.labelWidth < 13 && this.labelmd == 0){
17388                 this.labelmd = this.labelWidth;
17389             }
17390             
17391             if(this.labellg > 0){
17392                 labelCfg.cls += ' col-lg-' + this.labellg;
17393                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
17394             }
17395             
17396             if(this.labelmd > 0){
17397                 labelCfg.cls += ' col-md-' + this.labelmd;
17398                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
17399             }
17400             
17401             if(this.labelsm > 0){
17402                 labelCfg.cls += ' col-sm-' + this.labelsm;
17403                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
17404             }
17405             
17406             if(this.labelxs > 0){
17407                 labelCfg.cls += ' col-xs-' + this.labelxs;
17408                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
17409             }
17410                 
17411                 
17412         } else if ( this.fieldLabel.length) {
17413 //                Roo.log(" label");
17414                  cfg.cn = [
17415                    indicator,
17416                     {
17417                         tag: 'label',
17418                         //cls : 'input-group-addon',
17419                         html : this.fieldLabel
17420                     },
17421                     combobox
17422                 ];
17423                 
17424                 if(this.indicatorpos == 'right'){
17425                     cfg.cn = [
17426                         {
17427                             tag: 'label',
17428                             //cls : 'input-group-addon',
17429                             html : this.fieldLabel
17430                         },
17431                         indicator,
17432                         combobox
17433                     ];
17434                     
17435                 }
17436
17437         } else {
17438             
17439 //                Roo.log(" no label && no align");
17440                 cfg = combobox
17441                      
17442                 
17443         }
17444          
17445         var settings=this;
17446         ['xs','sm','md','lg'].map(function(size){
17447             if (settings[size]) {
17448                 cfg.cls += ' col-' + size + '-' + settings[size];
17449             }
17450         });
17451         
17452         return cfg;
17453         
17454     },
17455     
17456     _initEventsCalled : false,
17457     
17458     // private
17459     initEvents: function()
17460     {   
17461         if (this._initEventsCalled) { // as we call render... prevent looping...
17462             return;
17463         }
17464         this._initEventsCalled = true;
17465         
17466         if (!this.store) {
17467             throw "can not find store for combo";
17468         }
17469         
17470         this.indicator = this.indicatorEl();
17471         
17472         this.store = Roo.factory(this.store, Roo.data);
17473         this.store.parent = this;
17474         
17475         // if we are building from html. then this element is so complex, that we can not really
17476         // use the rendered HTML.
17477         // so we have to trash and replace the previous code.
17478         if (Roo.XComponent.build_from_html) {
17479             // remove this element....
17480             var e = this.el.dom, k=0;
17481             while (e ) { e = e.previousSibling;  ++k;}
17482
17483             this.el.remove();
17484             
17485             this.el=false;
17486             this.rendered = false;
17487             
17488             this.render(this.parent().getChildContainer(true), k);
17489         }
17490         
17491         if(Roo.isIOS && this.useNativeIOS){
17492             this.initIOSView();
17493             return;
17494         }
17495         
17496         /*
17497          * Touch Devices
17498          */
17499         
17500         if(Roo.isTouch && this.mobileTouchView){
17501             this.initTouchView();
17502             return;
17503         }
17504         
17505         if(this.tickable){
17506             this.initTickableEvents();
17507             return;
17508         }
17509         
17510         Roo.bootstrap.form.ComboBox.superclass.initEvents.call(this);
17511         
17512         if(this.hiddenName){
17513             
17514             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17515             
17516             this.hiddenField.dom.value =
17517                 this.hiddenValue !== undefined ? this.hiddenValue :
17518                 this.value !== undefined ? this.value : '';
17519
17520             // prevent input submission
17521             this.el.dom.removeAttribute('name');
17522             this.hiddenField.dom.setAttribute('name', this.hiddenName);
17523              
17524              
17525         }
17526         //if(Roo.isGecko){
17527         //    this.el.dom.setAttribute('autocomplete', 'off');
17528         //}
17529         
17530         var cls = 'x-combo-list';
17531         
17532         //this.list = new Roo.Layer({
17533         //    shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
17534         //});
17535         
17536         var _this = this;
17537         
17538         (function(){
17539             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
17540             _this.list.setWidth(lw);
17541         }).defer(100);
17542         
17543         this.list.on('mouseover', this.onViewOver, this);
17544         this.list.on('mousemove', this.onViewMove, this);
17545         this.list.on('scroll', this.onViewScroll, this);
17546         
17547         /*
17548         this.list.swallowEvent('mousewheel');
17549         this.assetHeight = 0;
17550
17551         if(this.title){
17552             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
17553             this.assetHeight += this.header.getHeight();
17554         }
17555
17556         this.innerList = this.list.createChild({cls:cls+'-inner'});
17557         this.innerList.on('mouseover', this.onViewOver, this);
17558         this.innerList.on('mousemove', this.onViewMove, this);
17559         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
17560         
17561         if(this.allowBlank && !this.pageSize && !this.disableClear){
17562             this.footer = this.list.createChild({cls:cls+'-ft'});
17563             this.pageTb = new Roo.Toolbar(this.footer);
17564            
17565         }
17566         if(this.pageSize){
17567             this.footer = this.list.createChild({cls:cls+'-ft'});
17568             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
17569                     {pageSize: this.pageSize});
17570             
17571         }
17572         
17573         if (this.pageTb && this.allowBlank && !this.disableClear) {
17574             var _this = this;
17575             this.pageTb.add(new Roo.Toolbar.Fill(), {
17576                 cls: 'x-btn-icon x-btn-clear',
17577                 text: '&#160;',
17578                 handler: function()
17579                 {
17580                     _this.collapse();
17581                     _this.clearValue();
17582                     _this.onSelect(false, -1);
17583                 }
17584             });
17585         }
17586         if (this.footer) {
17587             this.assetHeight += this.footer.getHeight();
17588         }
17589         */
17590             
17591         if(!this.tpl){
17592             this.tpl = Roo.bootstrap.version == 4 ?
17593                 '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' :  // 4 does not need <li> and it get's really confisued.
17594                 '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
17595         }
17596
17597         this.view = new Roo.View(this.list, this.tpl, {
17598             singleSelect:true, store: this.store, selectedClass: this.selectedClass
17599         });
17600         //this.view.wrapEl.setDisplayed(false);
17601         this.view.on('click', this.onViewClick, this);
17602         
17603         
17604         this.store.on('beforeload', this.onBeforeLoad, this);
17605         this.store.on('load', this.onLoad, this);
17606         this.store.on('loadexception', this.onLoadException, this);
17607         /*
17608         if(this.resizable){
17609             this.resizer = new Roo.Resizable(this.list,  {
17610                pinned:true, handles:'se'
17611             });
17612             this.resizer.on('resize', function(r, w, h){
17613                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
17614                 this.listWidth = w;
17615                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
17616                 this.restrictHeight();
17617             }, this);
17618             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
17619         }
17620         */
17621         if(!this.editable){
17622             this.editable = true;
17623             this.setEditable(false);
17624         }
17625         
17626         /*
17627         
17628         if (typeof(this.events.add.listeners) != 'undefined') {
17629             
17630             this.addicon = this.wrap.createChild(
17631                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
17632        
17633             this.addicon.on('click', function(e) {
17634                 this.fireEvent('add', this);
17635             }, this);
17636         }
17637         if (typeof(this.events.edit.listeners) != 'undefined') {
17638             
17639             this.editicon = this.wrap.createChild(
17640                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
17641             if (this.addicon) {
17642                 this.editicon.setStyle('margin-left', '40px');
17643             }
17644             this.editicon.on('click', function(e) {
17645                 
17646                 // we fire even  if inothing is selected..
17647                 this.fireEvent('edit', this, this.lastData );
17648                 
17649             }, this);
17650         }
17651         */
17652         
17653         this.keyNav = new Roo.KeyNav(this.inputEl(), {
17654             "up" : function(e){
17655                 this.inKeyMode = true;
17656                 this.selectPrev();
17657             },
17658
17659             "down" : function(e){
17660                 if(!this.isExpanded()){
17661                     this.onTriggerClick();
17662                 }else{
17663                     this.inKeyMode = true;
17664                     this.selectNext();
17665                 }
17666             },
17667
17668             "enter" : function(e){
17669 //                this.onViewClick();
17670                 //return true;
17671                 this.collapse();
17672                 
17673                 if(this.fireEvent("specialkey", this, e)){
17674                     this.onViewClick(false);
17675                 }
17676                 
17677                 return true;
17678             },
17679
17680             "esc" : function(e){
17681                 this.collapse();
17682             },
17683
17684             "tab" : function(e){
17685                 this.collapse();
17686                 
17687                 if(this.fireEvent("specialkey", this, e)){
17688                     this.onViewClick(false);
17689                 }
17690                 
17691                 return true;
17692             },
17693
17694             scope : this,
17695
17696             doRelay : function(foo, bar, hname){
17697                 if(hname == 'down' || this.scope.isExpanded()){
17698                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
17699                 }
17700                 return true;
17701             },
17702
17703             forceKeyDown: true
17704         });
17705         
17706         
17707         this.queryDelay = Math.max(this.queryDelay || 10,
17708                 this.mode == 'local' ? 10 : 250);
17709         
17710         
17711         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
17712         
17713         if(this.typeAhead){
17714             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
17715         }
17716         if(this.editable !== false){
17717             this.inputEl().on("keyup", this.onKeyUp, this);
17718         }
17719         if(this.forceSelection){
17720             this.inputEl().on('blur', this.doForce, this);
17721         }
17722         
17723         if(this.multiple){
17724             this.choices = this.el.select('ul.roo-select2-choices', true).first();
17725             this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17726         }
17727     },
17728     
17729     initTickableEvents: function()
17730     {   
17731         this.createList();
17732         
17733         if(this.hiddenName){
17734             
17735             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17736             
17737             this.hiddenField.dom.value =
17738                 this.hiddenValue !== undefined ? this.hiddenValue :
17739                 this.value !== undefined ? this.value : '';
17740
17741             // prevent input submission
17742             this.el.dom.removeAttribute('name');
17743             this.hiddenField.dom.setAttribute('name', this.hiddenName);
17744              
17745              
17746         }
17747         
17748 //        this.list = this.el.select('ul.dropdown-menu',true).first();
17749         
17750         this.choices = this.el.select('ul.roo-select2-choices', true).first();
17751         this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17752         if(this.triggerList){
17753             this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
17754         }
17755          
17756         this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
17757         this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
17758         
17759         this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
17760         this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
17761         
17762         this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
17763         this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
17764         
17765         this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
17766         this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
17767         this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
17768         
17769         this.okBtn.hide();
17770         this.cancelBtn.hide();
17771         
17772         var _this = this;
17773         
17774         (function(){
17775             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
17776             _this.list.setWidth(lw);
17777         }).defer(100);
17778         
17779         this.list.on('mouseover', this.onViewOver, this);
17780         this.list.on('mousemove', this.onViewMove, this);
17781         
17782         this.list.on('scroll', this.onViewScroll, this);
17783         
17784         if(!this.tpl){
17785             this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}"' + 
17786                 'type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
17787         }
17788
17789         this.view = new Roo.View(this.list, this.tpl, {
17790             singleSelect:true,
17791             tickable:true,
17792             parent:this,
17793             store: this.store,
17794             selectedClass: this.selectedClass
17795         });
17796         
17797         //this.view.wrapEl.setDisplayed(false);
17798         this.view.on('click', this.onViewClick, this);
17799         
17800         
17801         
17802         this.store.on('beforeload', this.onBeforeLoad, this);
17803         this.store.on('load', this.onLoad, this);
17804         this.store.on('loadexception', this.onLoadException, this);
17805         
17806         if(this.editable){
17807             this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
17808                 "up" : function(e){
17809                     this.inKeyMode = true;
17810                     this.selectPrev();
17811                 },
17812
17813                 "down" : function(e){
17814                     this.inKeyMode = true;
17815                     this.selectNext();
17816                 },
17817
17818                 "enter" : function(e){
17819                     if(this.fireEvent("specialkey", this, e)){
17820                         this.onViewClick(false);
17821                     }
17822                     
17823                     return true;
17824                 },
17825
17826                 "esc" : function(e){
17827                     this.onTickableFooterButtonClick(e, false, false);
17828                 },
17829
17830                 "tab" : function(e){
17831                     this.fireEvent("specialkey", this, e);
17832                     
17833                     this.onTickableFooterButtonClick(e, false, false);
17834                     
17835                     return true;
17836                 },
17837
17838                 scope : this,
17839
17840                 doRelay : function(e, fn, key){
17841                     if(this.scope.isExpanded()){
17842                        return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
17843                     }
17844                     return true;
17845                 },
17846
17847                 forceKeyDown: true
17848             });
17849         }
17850         
17851         this.queryDelay = Math.max(this.queryDelay || 10,
17852                 this.mode == 'local' ? 10 : 250);
17853         
17854         
17855         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
17856         
17857         if(this.typeAhead){
17858             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
17859         }
17860         
17861         if(this.editable !== false){
17862             this.tickableInputEl().on("keyup", this.onKeyUp, this);
17863         }
17864         
17865         this.indicator = this.indicatorEl();
17866         
17867         if(this.indicator){
17868             this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
17869             this.indicator.hide();
17870         }
17871         
17872     },
17873
17874     onDestroy : function(){
17875         if(this.view){
17876             this.view.setStore(null);
17877             this.view.el.removeAllListeners();
17878             this.view.el.remove();
17879             this.view.purgeListeners();
17880         }
17881         if(this.list){
17882             this.list.dom.innerHTML  = '';
17883         }
17884         
17885         if(this.store){
17886             this.store.un('beforeload', this.onBeforeLoad, this);
17887             this.store.un('load', this.onLoad, this);
17888             this.store.un('loadexception', this.onLoadException, this);
17889         }
17890         Roo.bootstrap.form.ComboBox.superclass.onDestroy.call(this);
17891     },
17892
17893     // private
17894     fireKey : function(e){
17895         if(e.isNavKeyPress() && !this.list.isVisible()){
17896             this.fireEvent("specialkey", this, e);
17897         }
17898     },
17899
17900     // private
17901     onResize: function(w, h)
17902     {
17903         
17904         
17905 //        Roo.bootstrap.form.ComboBox.superclass.onResize.apply(this, arguments);
17906 //        
17907 //        if(typeof w != 'number'){
17908 //            // we do not handle it!?!?
17909 //            return;
17910 //        }
17911 //        var tw = this.trigger.getWidth();
17912 //       // tw += this.addicon ? this.addicon.getWidth() : 0;
17913 //       // tw += this.editicon ? this.editicon.getWidth() : 0;
17914 //        var x = w - tw;
17915 //        this.inputEl().setWidth( this.adjustWidth('input', x));
17916 //            
17917 //        //this.trigger.setStyle('left', x+'px');
17918 //        
17919 //        if(this.list && this.listWidth === undefined){
17920 //            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
17921 //            this.list.setWidth(lw);
17922 //            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
17923 //        }
17924         
17925     
17926         
17927     },
17928
17929     /**
17930      * Allow or prevent the user from directly editing the field text.  If false is passed,
17931      * the user will only be able to select from the items defined in the dropdown list.  This method
17932      * is the runtime equivalent of setting the 'editable' config option at config time.
17933      * @param {Boolean} value True to allow the user to directly edit the field text
17934      */
17935     setEditable : function(value){
17936         if(value == this.editable){
17937             return;
17938         }
17939         this.editable = value;
17940         if(!value){
17941             this.inputEl().dom.setAttribute('readOnly', true);
17942             this.inputEl().on('mousedown', this.onTriggerClick,  this);
17943             this.inputEl().addClass('x-combo-noedit');
17944         }else{
17945             this.inputEl().dom.removeAttribute('readOnly');
17946             this.inputEl().un('mousedown', this.onTriggerClick,  this);
17947             this.inputEl().removeClass('x-combo-noedit');
17948         }
17949     },
17950
17951     // private
17952     
17953     onBeforeLoad : function(combo,opts){
17954         if(!this.hasFocus){
17955             return;
17956         }
17957          if (!opts.add) {
17958             this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
17959          }
17960         this.restrictHeight();
17961         this.selectedIndex = -1;
17962     },
17963
17964     // private
17965     onLoad : function(){
17966         
17967         this.hasQuery = false;
17968         
17969         if(!this.hasFocus){
17970             return;
17971         }
17972         
17973         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
17974             this.loading.hide();
17975         }
17976         
17977         if(this.store.getCount() > 0){
17978             
17979             this.expand();
17980             this.restrictHeight();
17981             if(this.lastQuery == this.allQuery){
17982                 if(this.editable && !this.tickable){
17983                     this.inputEl().dom.select();
17984                 }
17985                 
17986                 if(
17987                     !this.selectByValue(this.value, true) &&
17988                     this.autoFocus && 
17989                     (
17990                         !this.store.lastOptions ||
17991                         typeof(this.store.lastOptions.add) == 'undefined' || 
17992                         this.store.lastOptions.add != true
17993                     )
17994                 ){
17995                     this.select(0, true);
17996                 }
17997             }else{
17998                 if(this.autoFocus){
17999                     this.selectNext();
18000                 }
18001                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
18002                     this.taTask.delay(this.typeAheadDelay);
18003                 }
18004             }
18005         }else{
18006             this.onEmptyResults();
18007         }
18008         
18009         //this.el.focus();
18010     },
18011     // private
18012     onLoadException : function()
18013     {
18014         this.hasQuery = false;
18015         
18016         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
18017             this.loading.hide();
18018         }
18019         
18020         if(this.tickable && this.editable){
18021             return;
18022         }
18023         
18024         this.collapse();
18025         // only causes errors at present
18026         //Roo.log(this.store.reader.jsonData);
18027         //if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
18028             // fixme
18029             //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
18030         //}
18031         
18032         
18033     },
18034     // private
18035     onTypeAhead : function(){
18036         if(this.store.getCount() > 0){
18037             var r = this.store.getAt(0);
18038             var newValue = r.data[this.displayField];
18039             var len = newValue.length;
18040             var selStart = this.getRawValue().length;
18041             
18042             if(selStart != len){
18043                 this.setRawValue(newValue);
18044                 this.selectText(selStart, newValue.length);
18045             }
18046         }
18047     },
18048
18049     // private
18050     onSelect : function(record, index){
18051         
18052         if(this.fireEvent('beforeselect', this, record, index) !== false){
18053         
18054             this.setFromData(index > -1 ? record.data : false);
18055             
18056             this.collapse();
18057             this.fireEvent('select', this, record, index);
18058         }
18059     },
18060
18061     /**
18062      * Returns the currently selected field value or empty string if no value is set.
18063      * @return {String} value The selected value
18064      */
18065     getValue : function()
18066     {
18067         if(Roo.isIOS && this.useNativeIOS){
18068             return this.ios_options[this.inputEl().dom.selectedIndex].data[this.valueField];
18069         }
18070         
18071         if(this.multiple){
18072             return (this.hiddenField) ? this.hiddenField.dom.value : this.value;
18073         }
18074         
18075         if(this.valueField){
18076             return typeof this.value != 'undefined' ? this.value : '';
18077         }else{
18078             return Roo.bootstrap.form.ComboBox.superclass.getValue.call(this);
18079         }
18080     },
18081     
18082     getRawValue : function()
18083     {
18084         if(Roo.isIOS && this.useNativeIOS){
18085             return this.ios_options[this.inputEl().dom.selectedIndex].data[this.displayField];
18086         }
18087         
18088         var v = this.inputEl().getValue();
18089         
18090         return v;
18091     },
18092
18093     /**
18094      * Clears any text/value currently set in the field
18095      */
18096     clearValue : function(){
18097         
18098         if(this.hiddenField){
18099             this.hiddenField.dom.value = '';
18100         }
18101         this.value = '';
18102         this.setRawValue('');
18103         this.lastSelectionText = '';
18104         this.lastData = false;
18105         
18106         var close = this.closeTriggerEl();
18107         
18108         if(close){
18109             close.hide();
18110         }
18111         
18112         this.validate();
18113         
18114     },
18115
18116     /**
18117      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
18118      * will be displayed in the field.  If the value does not match the data value of an existing item,
18119      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
18120      * Otherwise the field will be blank (although the value will still be set).
18121      * @param {String} value The value to match
18122      */
18123     setValue : function(v)
18124     {
18125         if(Roo.isIOS && this.useNativeIOS){
18126             this.setIOSValue(v);
18127             return;
18128         }
18129         
18130         if(this.multiple){
18131             this.syncValue();
18132             return;
18133         }
18134         
18135         var text = v;
18136         if(this.valueField){
18137             var r = this.findRecord(this.valueField, v);
18138             if(r){
18139                 text = r.data[this.displayField];
18140             }else if(this.valueNotFoundText !== undefined){
18141                 text = this.valueNotFoundText;
18142             }
18143         }
18144         this.lastSelectionText = text;
18145         if(this.hiddenField){
18146             this.hiddenField.dom.value = v;
18147         }
18148         Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, text);
18149         this.value = v;
18150         
18151         var close = this.closeTriggerEl();
18152         
18153         if(close){
18154             (v && (v.length || v * 1 > 0)) ? close.show() : close.hide();
18155         }
18156         
18157         this.validate();
18158     },
18159     /**
18160      * @property {Object} the last set data for the element
18161      */
18162     
18163     lastData : false,
18164     /**
18165      * Sets the value of the field based on a object which is related to the record format for the store.
18166      * @param {Object} value the value to set as. or false on reset?
18167      */
18168     setFromData : function(o){
18169         
18170         if(this.multiple){
18171             this.addItem(o);
18172             return;
18173         }
18174             
18175         var dv = ''; // display value
18176         var vv = ''; // value value..
18177         this.lastData = o;
18178         if (this.displayField) {
18179             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
18180         } else {
18181             // this is an error condition!!!
18182             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
18183         }
18184         
18185         if(this.valueField){
18186             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
18187         }
18188         
18189         var close = this.closeTriggerEl();
18190         
18191         if(close){
18192             if(dv.length || vv * 1 > 0){
18193                 close.show() ;
18194                 this.blockFocus=true;
18195             } else {
18196                 close.hide();
18197             }             
18198         }
18199         
18200         if(this.hiddenField){
18201             this.hiddenField.dom.value = vv;
18202             
18203             this.lastSelectionText = dv;
18204             Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
18205             this.value = vv;
18206             return;
18207         }
18208         // no hidden field.. - we store the value in 'value', but still display
18209         // display field!!!!
18210         this.lastSelectionText = dv;
18211         Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
18212         this.value = vv;
18213         
18214         
18215         
18216     },
18217     // private
18218     reset : function(){
18219         // overridden so that last data is reset..
18220         
18221         if(this.multiple){
18222             this.clearItem();
18223             return;
18224         }
18225         
18226         this.setValue(this.originalValue);
18227         //this.clearInvalid();
18228         this.lastData = false;
18229         if (this.view) {
18230             this.view.clearSelections();
18231         }
18232         
18233         this.validate();
18234     },
18235     // private
18236     findRecord : function(prop, value){
18237         var record;
18238         if(this.store.getCount() > 0){
18239             this.store.each(function(r){
18240                 if(r.data[prop] == value){
18241                     record = r;
18242                     return false;
18243                 }
18244                 return true;
18245             });
18246         }
18247         return record;
18248     },
18249     
18250     getName: function()
18251     {
18252         // returns hidden if it's set..
18253         if (!this.rendered) {return ''};
18254         return !this.hiddenName && this.inputEl().dom.name  ? this.inputEl().dom.name : (this.hiddenName || '');
18255         
18256     },
18257     // private
18258     onViewMove : function(e, t){
18259         this.inKeyMode = false;
18260     },
18261
18262     // private
18263     onViewOver : function(e, t){
18264         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
18265             return;
18266         }
18267         var item = this.view.findItemFromChild(t);
18268         
18269         if(item){
18270             var index = this.view.indexOf(item);
18271             this.select(index, false);
18272         }
18273     },
18274
18275     // private
18276     onViewClick : function(view, doFocus, el, e)
18277     {
18278         var index = this.view.getSelectedIndexes()[0];
18279         
18280         var r = this.store.getAt(index);
18281         
18282         if(this.tickable){
18283             
18284             if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
18285                 return;
18286             }
18287             
18288             var rm = false;
18289             var _this = this;
18290             
18291             Roo.each(this.tickItems, function(v,k){
18292                 
18293                 if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
18294                     Roo.log(v);
18295                     _this.tickItems.splice(k, 1);
18296                     
18297                     if(typeof(e) == 'undefined' && view == false){
18298                         Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
18299                     }
18300                     
18301                     rm = true;
18302                     return;
18303                 }
18304             });
18305             
18306             if(rm){
18307                 return;
18308             }
18309             
18310             if(this.fireEvent('tick', this, r, index, Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked) !== false){
18311                 this.tickItems.push(r.data);
18312             }
18313             
18314             if(typeof(e) == 'undefined' && view == false){
18315                 Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
18316             }
18317                     
18318             return;
18319         }
18320         
18321         if(r){
18322             this.onSelect(r, index);
18323         }
18324         if(doFocus !== false && !this.blockFocus){
18325             this.inputEl().focus();
18326         }
18327     },
18328
18329     // private
18330     restrictHeight : function(){
18331         //this.innerList.dom.style.height = '';
18332         //var inner = this.innerList.dom;
18333         //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
18334         //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
18335         //this.list.beginUpdate();
18336         //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
18337         this.list.alignTo(this.inputEl(), this.listAlign);
18338         this.list.alignTo(this.inputEl(), this.listAlign);
18339         //this.list.endUpdate();
18340     },
18341
18342     // private
18343     onEmptyResults : function(){
18344         
18345         if(this.tickable && this.editable){
18346             this.hasFocus = false;
18347             this.restrictHeight();
18348             return;
18349         }
18350         
18351         this.collapse();
18352     },
18353
18354     /**
18355      * Returns true if the dropdown list is expanded, else false.
18356      */
18357     isExpanded : function(){
18358         return this.list.isVisible();
18359     },
18360
18361     /**
18362      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
18363      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
18364      * @param {String} value The data value of the item to select
18365      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
18366      * selected item if it is not currently in view (defaults to true)
18367      * @return {Boolean} True if the value matched an item in the list, else false
18368      */
18369     selectByValue : function(v, scrollIntoView){
18370         if(v !== undefined && v !== null){
18371             var r = this.findRecord(this.valueField || this.displayField, v);
18372             if(r){
18373                 this.select(this.store.indexOf(r), scrollIntoView);
18374                 return true;
18375             }
18376         }
18377         return false;
18378     },
18379
18380     /**
18381      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
18382      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
18383      * @param {Number} index The zero-based index of the list item to select
18384      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
18385      * selected item if it is not currently in view (defaults to true)
18386      */
18387     select : function(index, scrollIntoView){
18388         this.selectedIndex = index;
18389         this.view.select(index);
18390         if(scrollIntoView !== false){
18391             var el = this.view.getNode(index);
18392             /*
18393              * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
18394              */
18395             if(el){
18396                 this.list.scrollChildIntoView(el, false);
18397             }
18398         }
18399     },
18400
18401     // private
18402     selectNext : function(){
18403         var ct = this.store.getCount();
18404         if(ct > 0){
18405             if(this.selectedIndex == -1){
18406                 this.select(0);
18407             }else if(this.selectedIndex < ct-1){
18408                 this.select(this.selectedIndex+1);
18409             }
18410         }
18411     },
18412
18413     // private
18414     selectPrev : function(){
18415         var ct = this.store.getCount();
18416         if(ct > 0){
18417             if(this.selectedIndex == -1){
18418                 this.select(0);
18419             }else if(this.selectedIndex != 0){
18420                 this.select(this.selectedIndex-1);
18421             }
18422         }
18423     },
18424
18425     // private
18426     onKeyUp : function(e){
18427         if(this.editable !== false && !e.isSpecialKey()){
18428             this.lastKey = e.getKey();
18429             this.dqTask.delay(this.queryDelay);
18430         }
18431     },
18432
18433     // private
18434     validateBlur : function(){
18435         return !this.list || !this.list.isVisible();   
18436     },
18437
18438     // private
18439     initQuery : function(){
18440         
18441         var v = this.getRawValue();
18442         
18443         if(this.tickable && this.editable){
18444             v = this.tickableInputEl().getValue();
18445         }
18446         
18447         this.doQuery(v);
18448     },
18449
18450     // private
18451     doForce : function(){
18452         if(this.inputEl().dom.value.length > 0){
18453             this.inputEl().dom.value =
18454                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
18455              
18456         }
18457     },
18458
18459     /**
18460      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
18461      * query allowing the query action to be canceled if needed.
18462      * @param {String} query The SQL query to execute
18463      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
18464      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
18465      * saved in the current store (defaults to false)
18466      */
18467     doQuery : function(q, forceAll){
18468         
18469         if(q === undefined || q === null){
18470             q = '';
18471         }
18472         var qe = {
18473             query: q,
18474             forceAll: forceAll,
18475             combo: this,
18476             cancel:false
18477         };
18478         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
18479             return false;
18480         }
18481         q = qe.query;
18482         
18483         forceAll = qe.forceAll;
18484         if(forceAll === true || (q.length >= this.minChars)){
18485             
18486             this.hasQuery = true;
18487             
18488             if(this.lastQuery != q || this.alwaysQuery){
18489                 this.lastQuery = q;
18490                 if(this.mode == 'local'){
18491                     this.selectedIndex = -1;
18492                     if(forceAll){
18493                         this.store.clearFilter();
18494                     }else{
18495                         
18496                         if(this.specialFilter){
18497                             this.fireEvent('specialfilter', this);
18498                             this.onLoad();
18499                             return;
18500                         }
18501                         
18502                         this.store.filter(this.displayField, q);
18503                     }
18504                     
18505                     this.store.fireEvent("datachanged", this.store);
18506                     
18507                     this.onLoad();
18508                     
18509                     
18510                 }else{
18511                     
18512                     this.store.baseParams[this.queryParam] = q;
18513                     
18514                     var options = {params : this.getParams(q)};
18515                     
18516                     if(this.loadNext){
18517                         options.add = true;
18518                         options.params.start = this.page * this.pageSize;
18519                     }
18520                     
18521                     this.store.load(options);
18522                     
18523                     /*
18524                      *  this code will make the page width larger, at the beginning, the list not align correctly, 
18525                      *  we should expand the list on onLoad
18526                      *  so command out it
18527                      */
18528 //                    this.expand();
18529                 }
18530             }else{
18531                 this.selectedIndex = -1;
18532                 this.onLoad();   
18533             }
18534         }
18535         
18536         this.loadNext = false;
18537     },
18538     
18539     // private
18540     getParams : function(q){
18541         var p = {};
18542         //p[this.queryParam] = q;
18543         
18544         if(this.pageSize){
18545             p.start = 0;
18546             p.limit = this.pageSize;
18547         }
18548         return p;
18549     },
18550
18551     /**
18552      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
18553      */
18554     collapse : function(){
18555         if(!this.isExpanded()){
18556             return;
18557         }
18558         
18559         this.list.hide();
18560         
18561         this.hasFocus = false;
18562         
18563         if(this.tickable){
18564             this.okBtn.hide();
18565             this.cancelBtn.hide();
18566             this.trigger.show();
18567             
18568             if(this.editable){
18569                 this.tickableInputEl().dom.value = '';
18570                 this.tickableInputEl().blur();
18571             }
18572             
18573         }
18574         
18575         Roo.get(document).un('mousedown', this.collapseIf, this);
18576         Roo.get(document).un('mousewheel', this.collapseIf, this);
18577         if (!this.editable) {
18578             Roo.get(document).un('keydown', this.listKeyPress, this);
18579         }
18580         this.fireEvent('collapse', this);
18581         
18582         this.validate();
18583     },
18584
18585     // private
18586     collapseIf : function(e){
18587         var in_combo  = e.within(this.el);
18588         var in_list =  e.within(this.list);
18589         var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
18590         
18591         if (in_combo || in_list || is_list) {
18592             //e.stopPropagation();
18593             return;
18594         }
18595         
18596         if(this.tickable){
18597             this.onTickableFooterButtonClick(e, false, false);
18598         }
18599
18600         this.collapse();
18601         
18602     },
18603
18604     /**
18605      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
18606      */
18607     expand : function(){
18608        
18609         if(this.isExpanded() || !this.hasFocus){
18610             return;
18611         }
18612         
18613         var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
18614         this.list.setWidth(lw);
18615         
18616         Roo.log('expand');
18617         
18618         this.list.show();
18619         
18620         this.restrictHeight();
18621         
18622         if(this.tickable){
18623             
18624             this.tickItems = Roo.apply([], this.item);
18625             
18626             this.okBtn.show();
18627             this.cancelBtn.show();
18628             this.trigger.hide();
18629             
18630             if(this.editable){
18631                 this.tickableInputEl().focus();
18632             }
18633             
18634         }
18635         
18636         Roo.get(document).on('mousedown', this.collapseIf, this);
18637         Roo.get(document).on('mousewheel', this.collapseIf, this);
18638         if (!this.editable) {
18639             Roo.get(document).on('keydown', this.listKeyPress, this);
18640         }
18641         
18642         this.fireEvent('expand', this);
18643     },
18644
18645     // private
18646     // Implements the default empty TriggerField.onTriggerClick function
18647     onTriggerClick : function(e)
18648     {
18649         Roo.log('trigger click');
18650         
18651         if(this.disabled || !this.triggerList){
18652             return;
18653         }
18654         
18655         this.page = 0;
18656         this.loadNext = false;
18657         
18658         if(this.isExpanded()){
18659             this.collapse();
18660             if (!this.blockFocus) {
18661                 this.inputEl().focus();
18662             }
18663             
18664         }else {
18665             this.hasFocus = true;
18666             if(this.triggerAction == 'all') {
18667                 this.doQuery(this.allQuery, true);
18668             } else {
18669                 this.doQuery(this.getRawValue());
18670             }
18671             if (!this.blockFocus) {
18672                 this.inputEl().focus();
18673             }
18674         }
18675     },
18676     
18677     onTickableTriggerClick : function(e)
18678     {
18679         if(this.disabled){
18680             return;
18681         }
18682         
18683         this.page = 0;
18684         this.loadNext = false;
18685         this.hasFocus = true;
18686         
18687         if(this.triggerAction == 'all') {
18688             this.doQuery(this.allQuery, true);
18689         } else {
18690             this.doQuery(this.getRawValue());
18691         }
18692     },
18693     
18694     onSearchFieldClick : function(e)
18695     {
18696         if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
18697             this.onTickableFooterButtonClick(e, false, false);
18698             return;
18699         }
18700         
18701         if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
18702             return;
18703         }
18704         
18705         this.page = 0;
18706         this.loadNext = false;
18707         this.hasFocus = true;
18708         
18709         if(this.triggerAction == 'all') {
18710             this.doQuery(this.allQuery, true);
18711         } else {
18712             this.doQuery(this.getRawValue());
18713         }
18714     },
18715     
18716     listKeyPress : function(e)
18717     {
18718         //Roo.log('listkeypress');
18719         // scroll to first matching element based on key pres..
18720         if (e.isSpecialKey()) {
18721             return false;
18722         }
18723         var k = String.fromCharCode(e.getKey()).toUpperCase();
18724         //Roo.log(k);
18725         var match  = false;
18726         var csel = this.view.getSelectedNodes();
18727         var cselitem = false;
18728         if (csel.length) {
18729             var ix = this.view.indexOf(csel[0]);
18730             cselitem  = this.store.getAt(ix);
18731             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
18732                 cselitem = false;
18733             }
18734             
18735         }
18736         
18737         this.store.each(function(v) { 
18738             if (cselitem) {
18739                 // start at existing selection.
18740                 if (cselitem.id == v.id) {
18741                     cselitem = false;
18742                 }
18743                 return true;
18744             }
18745                 
18746             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
18747                 match = this.store.indexOf(v);
18748                 return false;
18749             }
18750             return true;
18751         }, this);
18752         
18753         if (match === false) {
18754             return true; // no more action?
18755         }
18756         // scroll to?
18757         this.view.select(match);
18758         var sn = Roo.get(this.view.getSelectedNodes()[0]);
18759         sn.scrollIntoView(sn.dom.parentNode, false);
18760     },
18761     
18762     onViewScroll : function(e, t){
18763         
18764         if(this.view.el.getScroll().top == 0 ||this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
18765             return;
18766         }
18767         
18768         this.hasQuery = true;
18769         
18770         this.loading = this.list.select('.loading', true).first();
18771         
18772         if(this.loading === null){
18773             this.list.createChild({
18774                 tag: 'div',
18775                 cls: 'loading roo-select2-more-results roo-select2-active',
18776                 html: 'Loading more results...'
18777             });
18778             
18779             this.loading = this.list.select('.loading', true).first();
18780             
18781             this.loading.setVisibilityMode(Roo.Element.DISPLAY);
18782             
18783             this.loading.hide();
18784         }
18785         
18786         this.loading.show();
18787         
18788         var _combo = this;
18789         
18790         this.page++;
18791         this.loadNext = true;
18792         
18793         (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
18794         
18795         return;
18796     },
18797     
18798     addItem : function(o)
18799     {   
18800         var dv = ''; // display value
18801         
18802         if (this.displayField) {
18803             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
18804         } else {
18805             // this is an error condition!!!
18806             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
18807         }
18808         
18809         if(!dv.length){
18810             return;
18811         }
18812         
18813         var choice = this.choices.createChild({
18814             tag: 'li',
18815             cls: 'roo-select2-search-choice',
18816             cn: [
18817                 {
18818                     tag: 'div',
18819                     html: dv
18820                 },
18821                 {
18822                     tag: 'a',
18823                     href: '#',
18824                     cls: 'roo-select2-search-choice-close fa fa-times',
18825                     tabindex: '-1'
18826                 }
18827             ]
18828             
18829         }, this.searchField);
18830         
18831         var close = choice.select('a.roo-select2-search-choice-close', true).first();
18832         
18833         close.on('click', this.onRemoveItem, this, { item : choice, data : o} );
18834         
18835         this.item.push(o);
18836         
18837         this.lastData = o;
18838         
18839         this.syncValue();
18840         
18841         this.inputEl().dom.value = '';
18842         
18843         this.validate();
18844     },
18845     
18846     onRemoveItem : function(e, _self, o)
18847     {
18848         e.preventDefault();
18849         
18850         this.lastItem = Roo.apply([], this.item);
18851         
18852         var index = this.item.indexOf(o.data) * 1;
18853         
18854         if( index < 0){
18855             Roo.log('not this item?!');
18856             return;
18857         }
18858         
18859         this.item.splice(index, 1);
18860         o.item.remove();
18861         
18862         this.syncValue();
18863         
18864         this.fireEvent('remove', this, e);
18865         
18866         this.validate();
18867         
18868     },
18869     
18870     syncValue : function()
18871     {
18872         if(!this.item.length){
18873             this.clearValue();
18874             return;
18875         }
18876             
18877         var value = [];
18878         var _this = this;
18879         Roo.each(this.item, function(i){
18880             if(_this.valueField){
18881                 value.push(i[_this.valueField]);
18882                 return;
18883             }
18884
18885             value.push(i);
18886         });
18887
18888         this.value = value.join(',');
18889
18890         if(this.hiddenField){
18891             this.hiddenField.dom.value = this.value;
18892         }
18893         
18894         this.store.fireEvent("datachanged", this.store);
18895         
18896         this.validate();
18897     },
18898     
18899     clearItem : function()
18900     {
18901         if(!this.multiple){
18902             return;
18903         }
18904         
18905         this.item = [];
18906         
18907         Roo.each(this.choices.select('>li.roo-select2-search-choice', true).elements, function(c){
18908            c.remove();
18909         });
18910         
18911         this.syncValue();
18912         
18913         this.validate();
18914         
18915         if(this.tickable && !Roo.isTouch){
18916             this.view.refresh();
18917         }
18918     },
18919     
18920     inputEl: function ()
18921     {
18922         if(Roo.isIOS && this.useNativeIOS){
18923             return this.el.select('select.roo-ios-select', true).first();
18924         }
18925         
18926         if(Roo.isTouch && this.mobileTouchView){
18927             return this.el.select('input.form-control',true).first();
18928         }
18929         
18930         if(this.tickable){
18931             return this.searchField;
18932         }
18933         
18934         return this.el.select('input.form-control',true).first();
18935     },
18936     
18937     onTickableFooterButtonClick : function(e, btn, el)
18938     {
18939         e.preventDefault();
18940         
18941         this.lastItem = Roo.apply([], this.item);
18942         
18943         if(btn && btn.name == 'cancel'){
18944             this.tickItems = Roo.apply([], this.item);
18945             this.collapse();
18946             return;
18947         }
18948         
18949         this.clearItem();
18950         
18951         var _this = this;
18952         
18953         Roo.each(this.tickItems, function(o){
18954             _this.addItem(o);
18955         });
18956         
18957         this.collapse();
18958         
18959     },
18960     
18961     validate : function()
18962     {
18963         if(this.getVisibilityEl().hasClass('hidden')){
18964             return true;
18965         }
18966         
18967         var v = this.getRawValue();
18968         
18969         if(this.multiple){
18970             v = this.getValue();
18971         }
18972         
18973         if(this.disabled || this.allowBlank || v.length){
18974             this.markValid();
18975             return true;
18976         }
18977         
18978         this.markInvalid();
18979         return false;
18980     },
18981     
18982     tickableInputEl : function()
18983     {
18984         if(!this.tickable || !this.editable){
18985             return this.inputEl();
18986         }
18987         
18988         return this.inputEl().select('.roo-select2-search-field-input', true).first();
18989     },
18990     
18991     
18992     getAutoCreateTouchView : function()
18993     {
18994         var id = Roo.id();
18995         
18996         var cfg = {
18997             cls: 'form-group' //input-group
18998         };
18999         
19000         var input =  {
19001             tag: 'input',
19002             id : id,
19003             type : this.inputType,
19004             cls : 'form-control x-combo-noedit',
19005             autocomplete: 'new-password',
19006             placeholder : this.placeholder || '',
19007             readonly : true
19008         };
19009         
19010         if (this.name) {
19011             input.name = this.name;
19012         }
19013         
19014         if (this.size) {
19015             input.cls += ' input-' + this.size;
19016         }
19017         
19018         if (this.disabled) {
19019             input.disabled = true;
19020         }
19021         
19022         var inputblock = {
19023             cls : 'roo-combobox-wrap',
19024             cn : [
19025                 input
19026             ]
19027         };
19028         
19029         if(this.before){
19030             inputblock.cls += ' input-group';
19031             
19032             inputblock.cn.unshift({
19033                 tag :'span',
19034                 cls : 'input-group-addon input-group-prepend input-group-text',
19035                 html : this.before
19036             });
19037         }
19038         
19039         if(this.removable && !this.multiple){
19040             inputblock.cls += ' roo-removable';
19041             
19042             inputblock.cn.push({
19043                 tag: 'button',
19044                 html : 'x',
19045                 cls : 'roo-combo-removable-btn close'
19046             });
19047         }
19048
19049         if(this.hasFeedback && !this.allowBlank){
19050             
19051             inputblock.cls += ' has-feedback';
19052             
19053             inputblock.cn.push({
19054                 tag: 'span',
19055                 cls: 'glyphicon form-control-feedback'
19056             });
19057             
19058         }
19059         
19060         if (this.after) {
19061             
19062             inputblock.cls += (this.before) ? '' : ' input-group';
19063             
19064             inputblock.cn.push({
19065                 tag :'span',
19066                 cls : 'input-group-addon input-group-append input-group-text',
19067                 html : this.after
19068             });
19069         }
19070
19071         
19072         var ibwrap = inputblock;
19073         
19074         if(this.multiple){
19075             ibwrap = {
19076                 tag: 'ul',
19077                 cls: 'roo-select2-choices',
19078                 cn:[
19079                     {
19080                         tag: 'li',
19081                         cls: 'roo-select2-search-field',
19082                         cn: [
19083
19084                             inputblock
19085                         ]
19086                     }
19087                 ]
19088             };
19089         
19090             
19091         }
19092         
19093         var combobox = {
19094             cls: 'roo-select2-container input-group roo-touchview-combobox ',
19095             cn: [
19096                 {
19097                     tag: 'input',
19098                     type : 'hidden',
19099                     cls: 'form-hidden-field'
19100                 },
19101                 ibwrap
19102             ]
19103         };
19104         
19105         if(!this.multiple && this.showToggleBtn){
19106             
19107             var caret = {
19108                 cls: 'caret'
19109             };
19110             
19111             if (this.caret != false) {
19112                 caret = {
19113                      tag: 'i',
19114                      cls: 'fa fa-' + this.caret
19115                 };
19116                 
19117             }
19118             
19119             combobox.cn.push({
19120                 tag :'span',
19121                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
19122                 cn : [
19123                     Roo.bootstrap.version == 3 ? caret : '',
19124                     {
19125                         tag: 'span',
19126                         cls: 'combobox-clear',
19127                         cn  : [
19128                             {
19129                                 tag : 'i',
19130                                 cls: 'icon-remove'
19131                             }
19132                         ]
19133                     }
19134                 ]
19135
19136             })
19137         }
19138         
19139         if(this.multiple){
19140             combobox.cls += ' roo-select2-container-multi';
19141         }
19142         
19143         var required =  this.allowBlank ?  {
19144                     tag : 'i',
19145                     style: 'display: none'
19146                 } : {
19147                    tag : 'i',
19148                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
19149                    tooltip : 'This field is required'
19150                 };
19151         
19152         var align = this.labelAlign || this.parentLabelAlign();
19153         
19154         if (align ==='left' && this.fieldLabel.length) {
19155
19156             cfg.cn = [
19157                 required,
19158                 {
19159                     tag: 'label',
19160                     cls : 'control-label col-form-label',
19161                     html : this.fieldLabel
19162
19163                 },
19164                 {
19165                     cls : 'roo-combobox-wrap ', 
19166                     cn: [
19167                         combobox
19168                     ]
19169                 }
19170             ];
19171             
19172             var labelCfg = cfg.cn[1];
19173             var contentCfg = cfg.cn[2];
19174             
19175
19176             if(this.indicatorpos == 'right'){
19177                 cfg.cn = [
19178                     {
19179                         tag: 'label',
19180                         'for' :  id,
19181                         cls : 'control-label col-form-label',
19182                         cn : [
19183                             {
19184                                 tag : 'span',
19185                                 html : this.fieldLabel
19186                             },
19187                             required
19188                         ]
19189                     },
19190                     {
19191                         cls : "roo-combobox-wrap ",
19192                         cn: [
19193                             combobox
19194                         ]
19195                     }
19196
19197                 ];
19198                 
19199                 labelCfg = cfg.cn[0];
19200                 contentCfg = cfg.cn[1];
19201             }
19202             
19203            
19204             
19205             if(this.labelWidth > 12){
19206                 labelCfg.style = "width: " + this.labelWidth + 'px';
19207             }
19208            
19209             if(this.labelWidth < 13 && this.labelmd == 0){
19210                 this.labelmd = this.labelWidth;
19211             }
19212             
19213             if(this.labellg > 0){
19214                 labelCfg.cls += ' col-lg-' + this.labellg;
19215                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
19216             }
19217             
19218             if(this.labelmd > 0){
19219                 labelCfg.cls += ' col-md-' + this.labelmd;
19220                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
19221             }
19222             
19223             if(this.labelsm > 0){
19224                 labelCfg.cls += ' col-sm-' + this.labelsm;
19225                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
19226             }
19227             
19228             if(this.labelxs > 0){
19229                 labelCfg.cls += ' col-xs-' + this.labelxs;
19230                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
19231             }
19232                 
19233                 
19234         } else if ( this.fieldLabel.length) {
19235             cfg.cn = [
19236                required,
19237                 {
19238                     tag: 'label',
19239                     cls : 'control-label',
19240                     html : this.fieldLabel
19241
19242                 },
19243                 {
19244                     cls : '', 
19245                     cn: [
19246                         combobox
19247                     ]
19248                 }
19249             ];
19250             
19251             if(this.indicatorpos == 'right'){
19252                 cfg.cn = [
19253                     {
19254                         tag: 'label',
19255                         cls : 'control-label',
19256                         html : this.fieldLabel,
19257                         cn : [
19258                             required
19259                         ]
19260                     },
19261                     {
19262                         cls : '', 
19263                         cn: [
19264                             combobox
19265                         ]
19266                     }
19267                 ];
19268             }
19269         } else {
19270             cfg.cn = combobox;    
19271         }
19272         
19273         
19274         var settings = this;
19275         
19276         ['xs','sm','md','lg'].map(function(size){
19277             if (settings[size]) {
19278                 cfg.cls += ' col-' + size + '-' + settings[size];
19279             }
19280         });
19281         
19282         return cfg;
19283     },
19284     
19285     initTouchView : function()
19286     {
19287         this.renderTouchView();
19288         
19289         this.touchViewEl.on('scroll', function(){
19290             this.el.dom.scrollTop = 0;
19291         }, this);
19292         
19293         this.originalValue = this.getValue();
19294         
19295         this.triggerEl = this.el.select('span.dropdown-toggle',true).first();
19296         
19297         this.inputEl().on("click", this.showTouchView, this);
19298         if (this.triggerEl) {
19299             this.triggerEl.on("click", this.showTouchView, this);
19300         }
19301         
19302         
19303         this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this);
19304         this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this);
19305         
19306         this.maskEl = new Roo.LoadMask(this.touchViewEl, { store : this.store, msgCls: 'roo-el-mask-msg' });
19307         
19308         this.store.on('beforeload', this.onTouchViewBeforeLoad, this);
19309         this.store.on('load', this.onTouchViewLoad, this);
19310         this.store.on('loadexception', this.onTouchViewLoadException, this);
19311         
19312         if(this.hiddenName){
19313             
19314             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
19315             
19316             this.hiddenField.dom.value =
19317                 this.hiddenValue !== undefined ? this.hiddenValue :
19318                 this.value !== undefined ? this.value : '';
19319         
19320             this.el.dom.removeAttribute('name');
19321             this.hiddenField.dom.setAttribute('name', this.hiddenName);
19322         }
19323         
19324         if(this.multiple){
19325             this.choices = this.el.select('ul.roo-select2-choices', true).first();
19326             this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
19327         }
19328         
19329         if(this.removable && !this.multiple){
19330             var close = this.closeTriggerEl();
19331             if(close){
19332                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
19333                 close.on('click', this.removeBtnClick, this, close);
19334             }
19335         }
19336         /*
19337          * fix the bug in Safari iOS8
19338          */
19339         this.inputEl().on("focus", function(e){
19340             document.activeElement.blur();
19341         }, this);
19342         
19343         this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
19344         
19345         return;
19346         
19347         
19348     },
19349     
19350     renderTouchView : function()
19351     {
19352         this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.form.ComboBox.touchViewTemplate);
19353         this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19354         
19355         this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first();
19356         this.touchViewHeaderEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19357         
19358         this.touchViewBodyEl = this.touchViewEl.select('.modal-body', true).first();
19359         this.touchViewBodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19360         this.touchViewBodyEl.setStyle('overflow', 'auto');
19361         
19362         this.touchViewListGroup = this.touchViewBodyEl.select('.list-group', true).first();
19363         this.touchViewListGroup.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19364         
19365         this.touchViewFooterEl = this.touchViewEl.select('.modal-footer', true).first();
19366         this.touchViewFooterEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19367         
19368     },
19369     
19370     showTouchView : function()
19371     {
19372         if(this.disabled){
19373             return;
19374         }
19375         
19376         this.touchViewHeaderEl.hide();
19377
19378         if(this.modalTitle.length){
19379             this.touchViewHeaderEl.dom.innerHTML = this.modalTitle;
19380             this.touchViewHeaderEl.show();
19381         }
19382
19383         this.touchViewEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
19384         this.touchViewEl.show();
19385
19386         this.touchViewEl.select('.modal-dialog', true).first().setStyle({ margin : '0px', width : '100%'});
19387         
19388         //this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(
19389         //        Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
19390
19391         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
19392
19393         if(this.modalTitle.length){
19394             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
19395         }
19396         
19397         this.touchViewBodyEl.setHeight(bodyHeight);
19398
19399         if(this.animate){
19400             var _this = this;
19401             (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
19402         }else{
19403             this.touchViewEl.addClass(['in','show']);
19404         }
19405         
19406         if(this._touchViewMask){
19407             Roo.get(document.body).addClass("x-body-masked");
19408             this._touchViewMask.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
19409             this._touchViewMask.setStyle('z-index', 10000);
19410             this._touchViewMask.addClass('show');
19411         }
19412         
19413         this.doTouchViewQuery();
19414         
19415     },
19416     
19417     hideTouchView : function()
19418     {
19419         this.touchViewEl.removeClass(['in','show']);
19420
19421         if(this.animate){
19422             var _this = this;
19423             (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150);
19424         }else{
19425             this.touchViewEl.setStyle('display', 'none');
19426         }
19427         
19428         if(this._touchViewMask){
19429             this._touchViewMask.removeClass('show');
19430             Roo.get(document.body).removeClass("x-body-masked");
19431         }
19432     },
19433     
19434     setTouchViewValue : function()
19435     {
19436         if(this.multiple){
19437             this.clearItem();
19438         
19439             var _this = this;
19440
19441             Roo.each(this.tickItems, function(o){
19442                 this.addItem(o);
19443             }, this);
19444         }
19445         
19446         this.hideTouchView();
19447     },
19448     
19449     doTouchViewQuery : function()
19450     {
19451         var qe = {
19452             query: '',
19453             forceAll: true,
19454             combo: this,
19455             cancel:false
19456         };
19457         
19458         if(this.fireEvent('beforequery', qe) ===false || qe.cancel){
19459             return false;
19460         }
19461         
19462         if(!this.alwaysQuery || this.mode == 'local'){
19463             this.onTouchViewLoad();
19464             return;
19465         }
19466         
19467         this.store.load();
19468     },
19469     
19470     onTouchViewBeforeLoad : function(combo,opts)
19471     {
19472         return;
19473     },
19474
19475     // private
19476     onTouchViewLoad : function()
19477     {
19478         if(this.store.getCount() < 1){
19479             this.onTouchViewEmptyResults();
19480             return;
19481         }
19482         
19483         this.clearTouchView();
19484         
19485         var rawValue = this.getRawValue();
19486         
19487         var template = (this.multiple) ? Roo.bootstrap.form.ComboBox.listItemCheckbox : Roo.bootstrap.form.ComboBox.listItemRadio;
19488         
19489         this.tickItems = [];
19490         
19491         this.store.data.each(function(d, rowIndex){
19492             var row = this.touchViewListGroup.createChild(template);
19493             
19494             if(typeof(d.data.cls) != 'undefined' && d.data.cls.length){
19495                 row.addClass(d.data.cls);
19496             }
19497             
19498             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
19499                 var cfg = {
19500                     data : d.data,
19501                     html : d.data[this.displayField]
19502                 };
19503                 
19504                 if(this.fireEvent('touchviewdisplay', this, cfg) !== false){
19505                     row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = cfg.html;
19506                 }
19507             }
19508             row.removeClass('selected');
19509             if(!this.multiple && this.valueField &&
19510                     typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue())
19511             {
19512                 // radio buttons..
19513                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19514                 row.addClass('selected');
19515             }
19516             
19517             if(this.multiple && this.valueField &&
19518                     typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1)
19519             {
19520                 
19521                 // checkboxes...
19522                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19523                 this.tickItems.push(d.data);
19524             }
19525             
19526             row.on('click', this.onTouchViewClick, this, {row : row, rowIndex : rowIndex});
19527             
19528         }, this);
19529         
19530         var firstChecked = this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).first();
19531         
19532         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
19533
19534         if(this.modalTitle.length){
19535             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
19536         }
19537
19538         var listHeight = this.touchViewListGroup.getHeight() + this.touchViewBodyEl.getPadding('tb') * 2;
19539         
19540         if(this.mobile_restrict_height && listHeight < bodyHeight){
19541             this.touchViewBodyEl.setHeight(listHeight);
19542         }
19543         
19544         var _this = this;
19545         
19546         if(firstChecked && listHeight > bodyHeight){
19547             (function() { firstChecked.findParent('li').scrollIntoView(_this.touchViewListGroup.dom); }).defer(500);
19548         }
19549         
19550     },
19551     
19552     onTouchViewLoadException : function()
19553     {
19554         this.hideTouchView();
19555     },
19556     
19557     onTouchViewEmptyResults : function()
19558     {
19559         this.clearTouchView();
19560         
19561         this.touchViewListGroup.createChild(Roo.bootstrap.form.ComboBox.emptyResult);
19562         
19563         this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText;
19564         
19565     },
19566     
19567     clearTouchView : function()
19568     {
19569         this.touchViewListGroup.dom.innerHTML = '';
19570     },
19571     
19572     onTouchViewClick : function(e, el, o)
19573     {
19574         e.preventDefault();
19575         
19576         var row = o.row;
19577         var rowIndex = o.rowIndex;
19578         
19579         var r = this.store.getAt(rowIndex);
19580         
19581         if(this.fireEvent('beforeselect', this, r, rowIndex) !== false){
19582             
19583             if(!this.multiple){
19584                 Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
19585                     c.dom.removeAttribute('checked');
19586                 }, this);
19587
19588                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19589
19590                 this.setFromData(r.data);
19591
19592                 var close = this.closeTriggerEl();
19593
19594                 if(close){
19595                     close.show();
19596                 }
19597
19598                 this.hideTouchView();
19599
19600                 this.fireEvent('select', this, r, rowIndex);
19601
19602                 return;
19603             }
19604
19605             if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
19606                 row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
19607                 this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
19608                 return;
19609             }
19610
19611             row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19612             this.addItem(r.data);
19613             this.tickItems.push(r.data);
19614         }
19615     },
19616     
19617     getAutoCreateNativeIOS : function()
19618     {
19619         var cfg = {
19620             cls: 'form-group' //input-group,
19621         };
19622         
19623         var combobox =  {
19624             tag: 'select',
19625             cls : 'roo-ios-select'
19626         };
19627         
19628         if (this.name) {
19629             combobox.name = this.name;
19630         }
19631         
19632         if (this.disabled) {
19633             combobox.disabled = true;
19634         }
19635         
19636         var settings = this;
19637         
19638         ['xs','sm','md','lg'].map(function(size){
19639             if (settings[size]) {
19640                 cfg.cls += ' col-' + size + '-' + settings[size];
19641             }
19642         });
19643         
19644         cfg.cn = combobox;
19645         
19646         return cfg;
19647         
19648     },
19649     
19650     initIOSView : function()
19651     {
19652         this.store.on('load', this.onIOSViewLoad, this);
19653         
19654         return;
19655     },
19656     
19657     onIOSViewLoad : function()
19658     {
19659         if(this.store.getCount() < 1){
19660             return;
19661         }
19662         
19663         this.clearIOSView();
19664         
19665         if(this.allowBlank) {
19666             
19667             var default_text = '-- SELECT --';
19668             
19669             if(this.placeholder.length){
19670                 default_text = this.placeholder;
19671             }
19672             
19673             if(this.emptyTitle.length){
19674                 default_text += ' - ' + this.emptyTitle + ' -';
19675             }
19676             
19677             var opt = this.inputEl().createChild({
19678                 tag: 'option',
19679                 value : 0,
19680                 html : default_text
19681             });
19682             
19683             var o = {};
19684             o[this.valueField] = 0;
19685             o[this.displayField] = default_text;
19686             
19687             this.ios_options.push({
19688                 data : o,
19689                 el : opt
19690             });
19691             
19692         }
19693         
19694         this.store.data.each(function(d, rowIndex){
19695             
19696             var html = '';
19697             
19698             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
19699                 html = d.data[this.displayField];
19700             }
19701             
19702             var value = '';
19703             
19704             if(this.valueField && typeof(d.data[this.valueField]) != 'undefined'){
19705                 value = d.data[this.valueField];
19706             }
19707             
19708             var option = {
19709                 tag: 'option',
19710                 value : value,
19711                 html : html
19712             };
19713             
19714             if(this.value == d.data[this.valueField]){
19715                 option['selected'] = true;
19716             }
19717             
19718             var opt = this.inputEl().createChild(option);
19719             
19720             this.ios_options.push({
19721                 data : d.data,
19722                 el : opt
19723             });
19724             
19725         }, this);
19726         
19727         this.inputEl().on('change', function(){
19728            this.fireEvent('select', this);
19729         }, this);
19730         
19731     },
19732     
19733     clearIOSView: function()
19734     {
19735         this.inputEl().dom.innerHTML = '';
19736         
19737         this.ios_options = [];
19738     },
19739     
19740     setIOSValue: function(v)
19741     {
19742         this.value = v;
19743         
19744         if(!this.ios_options){
19745             return;
19746         }
19747         
19748         Roo.each(this.ios_options, function(opts){
19749            
19750            opts.el.dom.removeAttribute('selected');
19751            
19752            if(opts.data[this.valueField] != v){
19753                return;
19754            }
19755            
19756            opts.el.dom.setAttribute('selected', true);
19757            
19758         }, this);
19759     }
19760
19761     /** 
19762     * @cfg {Boolean} grow 
19763     * @hide 
19764     */
19765     /** 
19766     * @cfg {Number} growMin 
19767     * @hide 
19768     */
19769     /** 
19770     * @cfg {Number} growMax 
19771     * @hide 
19772     */
19773     /**
19774      * @hide
19775      * @method autoSize
19776      */
19777 });
19778
19779 Roo.apply(Roo.bootstrap.form.ComboBox,  {
19780     
19781     header : {
19782         tag: 'div',
19783         cls: 'modal-header',
19784         cn: [
19785             {
19786                 tag: 'h4',
19787                 cls: 'modal-title'
19788             }
19789         ]
19790     },
19791     
19792     body : {
19793         tag: 'div',
19794         cls: 'modal-body',
19795         cn: [
19796             {
19797                 tag: 'ul',
19798                 cls: 'list-group'
19799             }
19800         ]
19801     },
19802     
19803     listItemRadio : {
19804         tag: 'li',
19805         cls: 'list-group-item',
19806         cn: [
19807             {
19808                 tag: 'span',
19809                 cls: 'roo-combobox-list-group-item-value'
19810             },
19811             {
19812                 tag: 'div',
19813                 cls: 'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info',
19814                 cn: [
19815                     {
19816                         tag: 'input',
19817                         type: 'radio'
19818                     },
19819                     {
19820                         tag: 'label'
19821                     }
19822                 ]
19823             }
19824         ]
19825     },
19826     
19827     listItemCheckbox : {
19828         tag: 'li',
19829         cls: 'list-group-item',
19830         cn: [
19831             {
19832                 tag: 'span',
19833                 cls: 'roo-combobox-list-group-item-value'
19834             },
19835             {
19836                 tag: 'div',
19837                 cls: 'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info',
19838                 cn: [
19839                     {
19840                         tag: 'input',
19841                         type: 'checkbox'
19842                     },
19843                     {
19844                         tag: 'label'
19845                     }
19846                 ]
19847             }
19848         ]
19849     },
19850     
19851     emptyResult : {
19852         tag: 'div',
19853         cls: 'alert alert-danger roo-combobox-touch-view-empty-result'
19854     },
19855     
19856     footer : {
19857         tag: 'div',
19858         cls: 'modal-footer',
19859         cn: [
19860             {
19861                 tag: 'div',
19862                 cls: 'row',
19863                 cn: [
19864                     {
19865                         tag: 'div',
19866                         cls: 'col-xs-6 text-left',
19867                         cn: {
19868                             tag: 'button',
19869                             cls: 'btn btn-danger roo-touch-view-cancel',
19870                             html: 'Cancel'
19871                         }
19872                     },
19873                     {
19874                         tag: 'div',
19875                         cls: 'col-xs-6 text-right',
19876                         cn: {
19877                             tag: 'button',
19878                             cls: 'btn btn-success roo-touch-view-ok',
19879                             html: 'OK'
19880                         }
19881                     }
19882                 ]
19883             }
19884         ]
19885         
19886     }
19887 });
19888
19889 Roo.apply(Roo.bootstrap.form.ComboBox,  {
19890     
19891     touchViewTemplate : {
19892         tag: 'div',
19893         cls: 'modal fade roo-combobox-touch-view',
19894         cn: [
19895             {
19896                 tag: 'div',
19897                 cls: 'modal-dialog',
19898                 style : 'position:fixed', // we have to fix position....
19899                 cn: [
19900                     {
19901                         tag: 'div',
19902                         cls: 'modal-content',
19903                         cn: [
19904                             Roo.bootstrap.form.ComboBox.header,
19905                             Roo.bootstrap.form.ComboBox.body,
19906                             Roo.bootstrap.form.ComboBox.footer
19907                         ]
19908                     }
19909                 ]
19910             }
19911         ]
19912     }
19913 });/*
19914  * Based on:
19915  * Ext JS Library 1.1.1
19916  * Copyright(c) 2006-2007, Ext JS, LLC.
19917  *
19918  * Originally Released Under LGPL - original licence link has changed is not relivant.
19919  *
19920  * Fork - LGPL
19921  * <script type="text/javascript">
19922  */
19923
19924 /**
19925  * @class Roo.View
19926  * @extends Roo.util.Observable
19927  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
19928  * This class also supports single and multi selection modes. <br>
19929  * Create a data model bound view:
19930  <pre><code>
19931  var store = new Roo.data.Store(...);
19932
19933  var view = new Roo.View({
19934     el : "my-element",
19935     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
19936  
19937     singleSelect: true,
19938     selectedClass: "ydataview-selected",
19939     store: store
19940  });
19941
19942  // listen for node click?
19943  view.on("click", function(vw, index, node, e){
19944  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
19945  });
19946
19947  // load XML data
19948  dataModel.load("foobar.xml");
19949  </code></pre>
19950  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
19951  * <br><br>
19952  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
19953  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
19954  * 
19955  * Note: old style constructor is still suported (container, template, config)
19956  * 
19957  * @constructor
19958  * Create a new View
19959  * @param {Object} config The config object
19960  * 
19961  */
19962 Roo.View = function(config, depreciated_tpl, depreciated_config){
19963     
19964     this.parent = false;
19965     
19966     if (typeof(depreciated_tpl) == 'undefined') {
19967         // new way.. - universal constructor.
19968         Roo.apply(this, config);
19969         this.el  = Roo.get(this.el);
19970     } else {
19971         // old format..
19972         this.el  = Roo.get(config);
19973         this.tpl = depreciated_tpl;
19974         Roo.apply(this, depreciated_config);
19975     }
19976     this.wrapEl  = this.el.wrap().wrap();
19977     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
19978     
19979     
19980     if(typeof(this.tpl) == "string"){
19981         this.tpl = new Roo.Template(this.tpl);
19982     } else {
19983         // support xtype ctors..
19984         this.tpl = new Roo.factory(this.tpl, Roo);
19985     }
19986     
19987     
19988     this.tpl.compile();
19989     
19990     /** @private */
19991     this.addEvents({
19992         /**
19993          * @event beforeclick
19994          * Fires before a click is processed. Returns false to cancel the default action.
19995          * @param {Roo.View} this
19996          * @param {Number} index The index of the target node
19997          * @param {HTMLElement} node The target node
19998          * @param {Roo.EventObject} e The raw event object
19999          */
20000             "beforeclick" : true,
20001         /**
20002          * @event click
20003          * Fires when a template node is clicked.
20004          * @param {Roo.View} this
20005          * @param {Number} index The index of the target node
20006          * @param {HTMLElement} node The target node
20007          * @param {Roo.EventObject} e The raw event object
20008          */
20009             "click" : true,
20010         /**
20011          * @event dblclick
20012          * Fires when a template node is double clicked.
20013          * @param {Roo.View} this
20014          * @param {Number} index The index of the target node
20015          * @param {HTMLElement} node The target node
20016          * @param {Roo.EventObject} e The raw event object
20017          */
20018             "dblclick" : true,
20019         /**
20020          * @event contextmenu
20021          * Fires when a template node is right clicked.
20022          * @param {Roo.View} this
20023          * @param {Number} index The index of the target node
20024          * @param {HTMLElement} node The target node
20025          * @param {Roo.EventObject} e The raw event object
20026          */
20027             "contextmenu" : true,
20028         /**
20029          * @event selectionchange
20030          * Fires when the selected nodes change.
20031          * @param {Roo.View} this
20032          * @param {Array} selections Array of the selected nodes
20033          */
20034             "selectionchange" : true,
20035     
20036         /**
20037          * @event beforeselect
20038          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
20039          * @param {Roo.View} this
20040          * @param {HTMLElement} node The node to be selected
20041          * @param {Array} selections Array of currently selected nodes
20042          */
20043             "beforeselect" : true,
20044         /**
20045          * @event preparedata
20046          * Fires on every row to render, to allow you to change the data.
20047          * @param {Roo.View} this
20048          * @param {Object} data to be rendered (change this)
20049          */
20050           "preparedata" : true
20051           
20052           
20053         });
20054
20055
20056
20057     this.el.on({
20058         "click": this.onClick,
20059         "dblclick": this.onDblClick,
20060         "contextmenu": this.onContextMenu,
20061         scope:this
20062     });
20063
20064     this.selections = [];
20065     this.nodes = [];
20066     this.cmp = new Roo.CompositeElementLite([]);
20067     if(this.store){
20068         this.store = Roo.factory(this.store, Roo.data);
20069         this.setStore(this.store, true);
20070     }
20071     
20072     if ( this.footer && this.footer.xtype) {
20073            
20074          var fctr = this.wrapEl.appendChild(document.createElement("div"));
20075         
20076         this.footer.dataSource = this.store;
20077         this.footer.container = fctr;
20078         this.footer = Roo.factory(this.footer, Roo);
20079         fctr.insertFirst(this.el);
20080         
20081         // this is a bit insane - as the paging toolbar seems to detach the el..
20082 //        dom.parentNode.parentNode.parentNode
20083          // they get detached?
20084     }
20085     
20086     
20087     Roo.View.superclass.constructor.call(this);
20088     
20089     
20090 };
20091
20092 Roo.extend(Roo.View, Roo.util.Observable, {
20093     
20094      /**
20095      * @cfg {Roo.data.Store} store Data store to load data from.
20096      */
20097     store : false,
20098     
20099     /**
20100      * @cfg {String|Roo.Element} el The container element.
20101      */
20102     el : '',
20103     
20104     /**
20105      * @cfg {String|Roo.Template} tpl The template used by this View 
20106      */
20107     tpl : false,
20108     /**
20109      * @cfg {String} dataName the named area of the template to use as the data area
20110      *                          Works with domtemplates roo-name="name"
20111      */
20112     dataName: false,
20113     /**
20114      * @cfg {String} selectedClass The css class to add to selected nodes
20115      */
20116     selectedClass : "x-view-selected",
20117      /**
20118      * @cfg {String} emptyText The empty text to show when nothing is loaded.
20119      */
20120     emptyText : "",
20121     
20122     /**
20123      * @cfg {String} text to display on mask (default Loading)
20124      */
20125     mask : false,
20126     /**
20127      * @cfg {Boolean} multiSelect Allow multiple selection
20128      */
20129     multiSelect : false,
20130     /**
20131      * @cfg {Boolean} singleSelect Allow single selection
20132      */
20133     singleSelect:  false,
20134     
20135     /**
20136      * @cfg {Boolean} toggleSelect - selecting 
20137      */
20138     toggleSelect : false,
20139     
20140     /**
20141      * @cfg {Boolean} tickable - selecting 
20142      */
20143     tickable : false,
20144     
20145     /**
20146      * Returns the element this view is bound to.
20147      * @return {Roo.Element}
20148      */
20149     getEl : function(){
20150         return this.wrapEl;
20151     },
20152     
20153     
20154
20155     /**
20156      * Refreshes the view. - called by datachanged on the store. - do not call directly.
20157      */
20158     refresh : function(){
20159         //Roo.log('refresh');
20160         var t = this.tpl;
20161         
20162         // if we are using something like 'domtemplate', then
20163         // the what gets used is:
20164         // t.applySubtemplate(NAME, data, wrapping data..)
20165         // the outer template then get' applied with
20166         //     the store 'extra data'
20167         // and the body get's added to the
20168         //      roo-name="data" node?
20169         //      <span class='roo-tpl-{name}'></span> ?????
20170         
20171         
20172         
20173         this.clearSelections();
20174         this.el.update("");
20175         var html = [];
20176         var records = this.store.getRange();
20177         if(records.length < 1) {
20178             
20179             // is this valid??  = should it render a template??
20180             
20181             this.el.update(this.emptyText);
20182             return;
20183         }
20184         var el = this.el;
20185         if (this.dataName) {
20186             this.el.update(t.apply(this.store.meta)); //????
20187             el = this.el.child('.roo-tpl-' + this.dataName);
20188         }
20189         
20190         for(var i = 0, len = records.length; i < len; i++){
20191             var data = this.prepareData(records[i].data, i, records[i]);
20192             this.fireEvent("preparedata", this, data, i, records[i]);
20193             
20194             var d = Roo.apply({}, data);
20195             
20196             if(this.tickable){
20197                 Roo.apply(d, {'roo-id' : Roo.id()});
20198                 
20199                 var _this = this;
20200             
20201                 Roo.each(this.parent.item, function(item){
20202                     if(item[_this.parent.valueField] != data[_this.parent.valueField]){
20203                         return;
20204                     }
20205                     Roo.apply(d, {'roo-data-checked' : 'checked'});
20206                 });
20207             }
20208             
20209             html[html.length] = Roo.util.Format.trim(
20210                 this.dataName ?
20211                     t.applySubtemplate(this.dataName, d, this.store.meta) :
20212                     t.apply(d)
20213             );
20214         }
20215         
20216         
20217         
20218         el.update(html.join(""));
20219         this.nodes = el.dom.childNodes;
20220         this.updateIndexes(0);
20221     },
20222     
20223
20224     /**
20225      * Function to override to reformat the data that is sent to
20226      * the template for each node.
20227      * DEPRICATED - use the preparedata event handler.
20228      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
20229      * a JSON object for an UpdateManager bound view).
20230      */
20231     prepareData : function(data, index, record)
20232     {
20233         this.fireEvent("preparedata", this, data, index, record);
20234         return data;
20235     },
20236
20237     onUpdate : function(ds, record){
20238         // Roo.log('on update');   
20239         this.clearSelections();
20240         var index = this.store.indexOf(record);
20241         var n = this.nodes[index];
20242         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
20243         n.parentNode.removeChild(n);
20244         this.updateIndexes(index, index);
20245     },
20246
20247     
20248     
20249 // --------- FIXME     
20250     onAdd : function(ds, records, index)
20251     {
20252         //Roo.log(['on Add', ds, records, index] );        
20253         this.clearSelections();
20254         if(this.nodes.length == 0){
20255             this.refresh();
20256             return;
20257         }
20258         var n = this.nodes[index];
20259         for(var i = 0, len = records.length; i < len; i++){
20260             var d = this.prepareData(records[i].data, i, records[i]);
20261             if(n){
20262                 this.tpl.insertBefore(n, d);
20263             }else{
20264                 
20265                 this.tpl.append(this.el, d);
20266             }
20267         }
20268         this.updateIndexes(index);
20269     },
20270
20271     onRemove : function(ds, record, index){
20272        // Roo.log('onRemove');
20273         this.clearSelections();
20274         var el = this.dataName  ?
20275             this.el.child('.roo-tpl-' + this.dataName) :
20276             this.el; 
20277         
20278         el.dom.removeChild(this.nodes[index]);
20279         this.updateIndexes(index);
20280     },
20281
20282     /**
20283      * Refresh an individual node.
20284      * @param {Number} index
20285      */
20286     refreshNode : function(index){
20287         this.onUpdate(this.store, this.store.getAt(index));
20288     },
20289
20290     updateIndexes : function(startIndex, endIndex){
20291         var ns = this.nodes;
20292         startIndex = startIndex || 0;
20293         endIndex = endIndex || ns.length - 1;
20294         for(var i = startIndex; i <= endIndex; i++){
20295             ns[i].nodeIndex = i;
20296         }
20297     },
20298
20299     /**
20300      * Changes the data store this view uses and refresh the view.
20301      * @param {Store} store
20302      */
20303     setStore : function(store, initial){
20304         if(!initial && this.store){
20305             this.store.un("datachanged", this.refresh);
20306             this.store.un("add", this.onAdd);
20307             this.store.un("remove", this.onRemove);
20308             this.store.un("update", this.onUpdate);
20309             this.store.un("clear", this.refresh);
20310             this.store.un("beforeload", this.onBeforeLoad);
20311             this.store.un("load", this.onLoad);
20312             this.store.un("loadexception", this.onLoad);
20313         }
20314         if(store){
20315           
20316             store.on("datachanged", this.refresh, this);
20317             store.on("add", this.onAdd, this);
20318             store.on("remove", this.onRemove, this);
20319             store.on("update", this.onUpdate, this);
20320             store.on("clear", this.refresh, this);
20321             store.on("beforeload", this.onBeforeLoad, this);
20322             store.on("load", this.onLoad, this);
20323             store.on("loadexception", this.onLoad, this);
20324         }
20325         
20326         if(store){
20327             this.refresh();
20328         }
20329     },
20330     /**
20331      * onbeforeLoad - masks the loading area.
20332      *
20333      */
20334     onBeforeLoad : function(store,opts)
20335     {
20336          //Roo.log('onBeforeLoad');   
20337         if (!opts.add) {
20338             this.el.update("");
20339         }
20340         this.el.mask(this.mask ? this.mask : "Loading" ); 
20341     },
20342     onLoad : function ()
20343     {
20344         this.el.unmask();
20345     },
20346     
20347
20348     /**
20349      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
20350      * @param {HTMLElement} node
20351      * @return {HTMLElement} The template node
20352      */
20353     findItemFromChild : function(node){
20354         var el = this.dataName  ?
20355             this.el.child('.roo-tpl-' + this.dataName,true) :
20356             this.el.dom; 
20357         
20358         if(!node || node.parentNode == el){
20359                     return node;
20360             }
20361             var p = node.parentNode;
20362             while(p && p != el){
20363             if(p.parentNode == el){
20364                 return p;
20365             }
20366             p = p.parentNode;
20367         }
20368             return null;
20369     },
20370
20371     /** @ignore */
20372     onClick : function(e){
20373         var item = this.findItemFromChild(e.getTarget());
20374         if(item){
20375             var index = this.indexOf(item);
20376             if(this.onItemClick(item, index, e) !== false){
20377                 this.fireEvent("click", this, index, item, e);
20378             }
20379         }else{
20380             this.clearSelections();
20381         }
20382     },
20383
20384     /** @ignore */
20385     onContextMenu : function(e){
20386         var item = this.findItemFromChild(e.getTarget());
20387         if(item){
20388             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
20389         }
20390     },
20391
20392     /** @ignore */
20393     onDblClick : function(e){
20394         var item = this.findItemFromChild(e.getTarget());
20395         if(item){
20396             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
20397         }
20398     },
20399
20400     onItemClick : function(item, index, e)
20401     {
20402         if(this.fireEvent("beforeclick", this, index, item, e) === false){
20403             return false;
20404         }
20405         if (this.toggleSelect) {
20406             var m = this.isSelected(item) ? 'unselect' : 'select';
20407             //Roo.log(m);
20408             var _t = this;
20409             _t[m](item, true, false);
20410             return true;
20411         }
20412         if(this.multiSelect || this.singleSelect){
20413             if(this.multiSelect && e.shiftKey && this.lastSelection){
20414                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
20415             }else{
20416                 this.select(item, this.multiSelect && e.ctrlKey);
20417                 this.lastSelection = item;
20418             }
20419             
20420             if(!this.tickable){
20421                 e.preventDefault();
20422             }
20423             
20424         }
20425         return true;
20426     },
20427
20428     /**
20429      * Get the number of selected nodes.
20430      * @return {Number}
20431      */
20432     getSelectionCount : function(){
20433         return this.selections.length;
20434     },
20435
20436     /**
20437      * Get the currently selected nodes.
20438      * @return {Array} An array of HTMLElements
20439      */
20440     getSelectedNodes : function(){
20441         return this.selections;
20442     },
20443
20444     /**
20445      * Get the indexes of the selected nodes.
20446      * @return {Array}
20447      */
20448     getSelectedIndexes : function(){
20449         var indexes = [], s = this.selections;
20450         for(var i = 0, len = s.length; i < len; i++){
20451             indexes.push(s[i].nodeIndex);
20452         }
20453         return indexes;
20454     },
20455
20456     /**
20457      * Clear all selections
20458      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
20459      */
20460     clearSelections : function(suppressEvent){
20461         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
20462             this.cmp.elements = this.selections;
20463             this.cmp.removeClass(this.selectedClass);
20464             this.selections = [];
20465             if(!suppressEvent){
20466                 this.fireEvent("selectionchange", this, this.selections);
20467             }
20468         }
20469     },
20470
20471     /**
20472      * Returns true if the passed node is selected
20473      * @param {HTMLElement/Number} node The node or node index
20474      * @return {Boolean}
20475      */
20476     isSelected : function(node){
20477         var s = this.selections;
20478         if(s.length < 1){
20479             return false;
20480         }
20481         node = this.getNode(node);
20482         return s.indexOf(node) !== -1;
20483     },
20484
20485     /**
20486      * Selects nodes.
20487      * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
20488      * @param {Boolean} keepExisting (optional) true to keep existing selections
20489      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
20490      */
20491     select : function(nodeInfo, keepExisting, suppressEvent){
20492         if(nodeInfo instanceof Array){
20493             if(!keepExisting){
20494                 this.clearSelections(true);
20495             }
20496             for(var i = 0, len = nodeInfo.length; i < len; i++){
20497                 this.select(nodeInfo[i], true, true);
20498             }
20499             return;
20500         } 
20501         var node = this.getNode(nodeInfo);
20502         if(!node || this.isSelected(node)){
20503             return; // already selected.
20504         }
20505         if(!keepExisting){
20506             this.clearSelections(true);
20507         }
20508         
20509         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
20510             Roo.fly(node).addClass(this.selectedClass);
20511             this.selections.push(node);
20512             if(!suppressEvent){
20513                 this.fireEvent("selectionchange", this, this.selections);
20514             }
20515         }
20516         
20517         
20518     },
20519       /**
20520      * Unselects nodes.
20521      * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
20522      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
20523      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
20524      */
20525     unselect : function(nodeInfo, keepExisting, suppressEvent)
20526     {
20527         if(nodeInfo instanceof Array){
20528             Roo.each(this.selections, function(s) {
20529                 this.unselect(s, nodeInfo);
20530             }, this);
20531             return;
20532         }
20533         var node = this.getNode(nodeInfo);
20534         if(!node || !this.isSelected(node)){
20535             //Roo.log("not selected");
20536             return; // not selected.
20537         }
20538         // fireevent???
20539         var ns = [];
20540         Roo.each(this.selections, function(s) {
20541             if (s == node ) {
20542                 Roo.fly(node).removeClass(this.selectedClass);
20543
20544                 return;
20545             }
20546             ns.push(s);
20547         },this);
20548         
20549         this.selections= ns;
20550         this.fireEvent("selectionchange", this, this.selections);
20551     },
20552
20553     /**
20554      * Gets a template node.
20555      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
20556      * @return {HTMLElement} The node or null if it wasn't found
20557      */
20558     getNode : function(nodeInfo){
20559         if(typeof nodeInfo == "string"){
20560             return document.getElementById(nodeInfo);
20561         }else if(typeof nodeInfo == "number"){
20562             return this.nodes[nodeInfo];
20563         }
20564         return nodeInfo;
20565     },
20566
20567     /**
20568      * Gets a range template nodes.
20569      * @param {Number} startIndex
20570      * @param {Number} endIndex
20571      * @return {Array} An array of nodes
20572      */
20573     getNodes : function(start, end){
20574         var ns = this.nodes;
20575         start = start || 0;
20576         end = typeof end == "undefined" ? ns.length - 1 : end;
20577         var nodes = [];
20578         if(start <= end){
20579             for(var i = start; i <= end; i++){
20580                 nodes.push(ns[i]);
20581             }
20582         } else{
20583             for(var i = start; i >= end; i--){
20584                 nodes.push(ns[i]);
20585             }
20586         }
20587         return nodes;
20588     },
20589
20590     /**
20591      * Finds the index of the passed node
20592      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
20593      * @return {Number} The index of the node or -1
20594      */
20595     indexOf : function(node){
20596         node = this.getNode(node);
20597         if(typeof node.nodeIndex == "number"){
20598             return node.nodeIndex;
20599         }
20600         var ns = this.nodes;
20601         for(var i = 0, len = ns.length; i < len; i++){
20602             if(ns[i] == node){
20603                 return i;
20604             }
20605         }
20606         return -1;
20607     }
20608 });
20609 /*
20610  * - LGPL
20611  *
20612  * based on jquery fullcalendar
20613  * 
20614  */
20615
20616 Roo.bootstrap = Roo.bootstrap || {};
20617 /**
20618  * @class Roo.bootstrap.Calendar
20619  * @extends Roo.bootstrap.Component
20620  * Bootstrap Calendar class
20621  * @cfg {Boolean} loadMask (true|false) default false
20622  * @cfg {Object} header generate the user specific header of the calendar, default false
20623
20624  * @constructor
20625  * Create a new Container
20626  * @param {Object} config The config object
20627  */
20628
20629
20630
20631 Roo.bootstrap.Calendar = function(config){
20632     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
20633      this.addEvents({
20634         /**
20635              * @event select
20636              * Fires when a date is selected
20637              * @param {DatePicker} this
20638              * @param {Date} date The selected date
20639              */
20640         'select': true,
20641         /**
20642              * @event monthchange
20643              * Fires when the displayed month changes 
20644              * @param {DatePicker} this
20645              * @param {Date} date The selected month
20646              */
20647         'monthchange': true,
20648         /**
20649              * @event evententer
20650              * Fires when mouse over an event
20651              * @param {Calendar} this
20652              * @param {event} Event
20653              */
20654         'evententer': true,
20655         /**
20656              * @event eventleave
20657              * Fires when the mouse leaves an
20658              * @param {Calendar} this
20659              * @param {event}
20660              */
20661         'eventleave': true,
20662         /**
20663              * @event eventclick
20664              * Fires when the mouse click an
20665              * @param {Calendar} this
20666              * @param {event}
20667              */
20668         'eventclick': true
20669         
20670     });
20671
20672 };
20673
20674 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
20675     
20676           /**
20677      * @cfg {Roo.data.Store} store
20678      * The data source for the calendar
20679      */
20680         store : false,
20681      /**
20682      * @cfg {Number} startDay
20683      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
20684      */
20685     startDay : 0,
20686     
20687     loadMask : false,
20688     
20689     header : false,
20690       
20691     getAutoCreate : function(){
20692         
20693         
20694         var fc_button = function(name, corner, style, content ) {
20695             return Roo.apply({},{
20696                 tag : 'span',
20697                 cls : 'fc-button fc-button-'+name+' fc-state-default ' + 
20698                          (corner.length ?
20699                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
20700                             ''
20701                         ),
20702                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
20703                 unselectable: 'on'
20704             });
20705         };
20706         
20707         var header = {};
20708         
20709         if(!this.header){
20710             header = {
20711                 tag : 'table',
20712                 cls : 'fc-header',
20713                 style : 'width:100%',
20714                 cn : [
20715                     {
20716                         tag: 'tr',
20717                         cn : [
20718                             {
20719                                 tag : 'td',
20720                                 cls : 'fc-header-left',
20721                                 cn : [
20722                                     fc_button('prev', 'left', 'arrow', '&#8249;' ),
20723                                     fc_button('next', 'right', 'arrow', '&#8250;' ),
20724                                     { tag: 'span', cls: 'fc-header-space' },
20725                                     fc_button('today', 'left right', '', 'today' )  // neds state disabled..
20726
20727
20728                                 ]
20729                             },
20730
20731                             {
20732                                 tag : 'td',
20733                                 cls : 'fc-header-center',
20734                                 cn : [
20735                                     {
20736                                         tag: 'span',
20737                                         cls: 'fc-header-title',
20738                                         cn : {
20739                                             tag: 'H2',
20740                                             html : 'month / year'
20741                                         }
20742                                     }
20743
20744                                 ]
20745                             },
20746                             {
20747                                 tag : 'td',
20748                                 cls : 'fc-header-right',
20749                                 cn : [
20750                               /*      fc_button('month', 'left', '', 'month' ),
20751                                     fc_button('week', '', '', 'week' ),
20752                                     fc_button('day', 'right', '', 'day' )
20753                                 */    
20754
20755                                 ]
20756                             }
20757
20758                         ]
20759                     }
20760                 ]
20761             };
20762         }
20763         
20764         header = this.header;
20765         
20766        
20767         var cal_heads = function() {
20768             var ret = [];
20769             // fixme - handle this.
20770             
20771             for (var i =0; i < Date.dayNames.length; i++) {
20772                 var d = Date.dayNames[i];
20773                 ret.push({
20774                     tag: 'th',
20775                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
20776                     html : d.substring(0,3)
20777                 });
20778                 
20779             }
20780             ret[0].cls += ' fc-first';
20781             ret[6].cls += ' fc-last';
20782             return ret;
20783         };
20784         var cal_cell = function(n) {
20785             return  {
20786                 tag: 'td',
20787                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
20788                 cn : [
20789                     {
20790                         cn : [
20791                             {
20792                                 cls: 'fc-day-number',
20793                                 html: 'D'
20794                             },
20795                             {
20796                                 cls: 'fc-day-content',
20797                              
20798                                 cn : [
20799                                      {
20800                                         style: 'position: relative;' // height: 17px;
20801                                     }
20802                                 ]
20803                             }
20804                             
20805                             
20806                         ]
20807                     }
20808                 ]
20809                 
20810             }
20811         };
20812         var cal_rows = function() {
20813             
20814             var ret = [];
20815             for (var r = 0; r < 6; r++) {
20816                 var row= {
20817                     tag : 'tr',
20818                     cls : 'fc-week',
20819                     cn : []
20820                 };
20821                 
20822                 for (var i =0; i < Date.dayNames.length; i++) {
20823                     var d = Date.dayNames[i];
20824                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
20825
20826                 }
20827                 row.cn[0].cls+=' fc-first';
20828                 row.cn[0].cn[0].style = 'min-height:90px';
20829                 row.cn[6].cls+=' fc-last';
20830                 ret.push(row);
20831                 
20832             }
20833             ret[0].cls += ' fc-first';
20834             ret[4].cls += ' fc-prev-last';
20835             ret[5].cls += ' fc-last';
20836             return ret;
20837             
20838         };
20839         
20840         var cal_table = {
20841             tag: 'table',
20842             cls: 'fc-border-separate',
20843             style : 'width:100%',
20844             cellspacing  : 0,
20845             cn : [
20846                 { 
20847                     tag: 'thead',
20848                     cn : [
20849                         { 
20850                             tag: 'tr',
20851                             cls : 'fc-first fc-last',
20852                             cn : cal_heads()
20853                         }
20854                     ]
20855                 },
20856                 { 
20857                     tag: 'tbody',
20858                     cn : cal_rows()
20859                 }
20860                   
20861             ]
20862         };
20863          
20864          var cfg = {
20865             cls : 'fc fc-ltr',
20866             cn : [
20867                 header,
20868                 {
20869                     cls : 'fc-content',
20870                     style : "position: relative;",
20871                     cn : [
20872                         {
20873                             cls : 'fc-view fc-view-month fc-grid',
20874                             style : 'position: relative',
20875                             unselectable : 'on',
20876                             cn : [
20877                                 {
20878                                     cls : 'fc-event-container',
20879                                     style : 'position:absolute;z-index:8;top:0;left:0;'
20880                                 },
20881                                 cal_table
20882                             ]
20883                         }
20884                     ]
20885     
20886                 }
20887            ] 
20888             
20889         };
20890         
20891          
20892         
20893         return cfg;
20894     },
20895     
20896     
20897     initEvents : function()
20898     {
20899         if(!this.store){
20900             throw "can not find store for calendar";
20901         }
20902         
20903         var mark = {
20904             tag: "div",
20905             cls:"x-dlg-mask",
20906             style: "text-align:center",
20907             cn: [
20908                 {
20909                     tag: "div",
20910                     style: "background-color:white;width:50%;margin:250 auto",
20911                     cn: [
20912                         {
20913                             tag: "img",
20914                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif' 
20915                         },
20916                         {
20917                             tag: "span",
20918                             html: "Loading"
20919                         }
20920                         
20921                     ]
20922                 }
20923             ]
20924         };
20925         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
20926         
20927         var size = this.el.select('.fc-content', true).first().getSize();
20928         this.maskEl.setSize(size.width, size.height);
20929         this.maskEl.enableDisplayMode("block");
20930         if(!this.loadMask){
20931             this.maskEl.hide();
20932         }
20933         
20934         this.store = Roo.factory(this.store, Roo.data);
20935         this.store.on('load', this.onLoad, this);
20936         this.store.on('beforeload', this.onBeforeLoad, this);
20937         
20938         this.resize();
20939         
20940         this.cells = this.el.select('.fc-day',true);
20941         //Roo.log(this.cells);
20942         this.textNodes = this.el.query('.fc-day-number');
20943         this.cells.addClassOnOver('fc-state-hover');
20944         
20945         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
20946         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
20947         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
20948         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
20949         
20950         this.on('monthchange', this.onMonthChange, this);
20951         
20952         this.update(new Date().clearTime());
20953     },
20954     
20955     resize : function() {
20956         var sz  = this.el.getSize();
20957         
20958         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
20959         this.el.select('.fc-day-content div',true).setHeight(34);
20960     },
20961     
20962     
20963     // private
20964     showPrevMonth : function(e){
20965         this.update(this.activeDate.add("mo", -1));
20966     },
20967     showToday : function(e){
20968         this.update(new Date().clearTime());
20969     },
20970     // private
20971     showNextMonth : function(e){
20972         this.update(this.activeDate.add("mo", 1));
20973     },
20974
20975     // private
20976     showPrevYear : function(){
20977         this.update(this.activeDate.add("y", -1));
20978     },
20979
20980     // private
20981     showNextYear : function(){
20982         this.update(this.activeDate.add("y", 1));
20983     },
20984
20985     
20986    // private
20987     update : function(date)
20988     {
20989         var vd = this.activeDate;
20990         this.activeDate = date;
20991 //        if(vd && this.el){
20992 //            var t = date.getTime();
20993 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
20994 //                Roo.log('using add remove');
20995 //                
20996 //                this.fireEvent('monthchange', this, date);
20997 //                
20998 //                this.cells.removeClass("fc-state-highlight");
20999 //                this.cells.each(function(c){
21000 //                   if(c.dateValue == t){
21001 //                       c.addClass("fc-state-highlight");
21002 //                       setTimeout(function(){
21003 //                            try{c.dom.firstChild.focus();}catch(e){}
21004 //                       }, 50);
21005 //                       return false;
21006 //                   }
21007 //                   return true;
21008 //                });
21009 //                return;
21010 //            }
21011 //        }
21012         
21013         var days = date.getDaysInMonth();
21014         
21015         var firstOfMonth = date.getFirstDateOfMonth();
21016         var startingPos = firstOfMonth.getDay()-this.startDay;
21017         
21018         if(startingPos < this.startDay){
21019             startingPos += 7;
21020         }
21021         
21022         var pm = date.add(Date.MONTH, -1);
21023         var prevStart = pm.getDaysInMonth()-startingPos;
21024 //        
21025         this.cells = this.el.select('.fc-day',true);
21026         this.textNodes = this.el.query('.fc-day-number');
21027         this.cells.addClassOnOver('fc-state-hover');
21028         
21029         var cells = this.cells.elements;
21030         var textEls = this.textNodes;
21031         
21032         Roo.each(cells, function(cell){
21033             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
21034         });
21035         
21036         days += startingPos;
21037
21038         // convert everything to numbers so it's fast
21039         var day = 86400000;
21040         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
21041         //Roo.log(d);
21042         //Roo.log(pm);
21043         //Roo.log(prevStart);
21044         
21045         var today = new Date().clearTime().getTime();
21046         var sel = date.clearTime().getTime();
21047         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
21048         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
21049         var ddMatch = this.disabledDatesRE;
21050         var ddText = this.disabledDatesText;
21051         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
21052         var ddaysText = this.disabledDaysText;
21053         var format = this.format;
21054         
21055         var setCellClass = function(cal, cell){
21056             cell.row = 0;
21057             cell.events = [];
21058             cell.more = [];
21059             //Roo.log('set Cell Class');
21060             cell.title = "";
21061             var t = d.getTime();
21062             
21063             //Roo.log(d);
21064             
21065             cell.dateValue = t;
21066             if(t == today){
21067                 cell.className += " fc-today";
21068                 cell.className += " fc-state-highlight";
21069                 cell.title = cal.todayText;
21070             }
21071             if(t == sel){
21072                 // disable highlight in other month..
21073                 //cell.className += " fc-state-highlight";
21074                 
21075             }
21076             // disabling
21077             if(t < min) {
21078                 cell.className = " fc-state-disabled";
21079                 cell.title = cal.minText;
21080                 return;
21081             }
21082             if(t > max) {
21083                 cell.className = " fc-state-disabled";
21084                 cell.title = cal.maxText;
21085                 return;
21086             }
21087             if(ddays){
21088                 if(ddays.indexOf(d.getDay()) != -1){
21089                     cell.title = ddaysText;
21090                     cell.className = " fc-state-disabled";
21091                 }
21092             }
21093             if(ddMatch && format){
21094                 var fvalue = d.dateFormat(format);
21095                 if(ddMatch.test(fvalue)){
21096                     cell.title = ddText.replace("%0", fvalue);
21097                     cell.className = " fc-state-disabled";
21098                 }
21099             }
21100             
21101             if (!cell.initialClassName) {
21102                 cell.initialClassName = cell.dom.className;
21103             }
21104             
21105             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
21106         };
21107
21108         var i = 0;
21109         
21110         for(; i < startingPos; i++) {
21111             textEls[i].innerHTML = (++prevStart);
21112             d.setDate(d.getDate()+1);
21113             
21114             cells[i].className = "fc-past fc-other-month";
21115             setCellClass(this, cells[i]);
21116         }
21117         
21118         var intDay = 0;
21119         
21120         for(; i < days; i++){
21121             intDay = i - startingPos + 1;
21122             textEls[i].innerHTML = (intDay);
21123             d.setDate(d.getDate()+1);
21124             
21125             cells[i].className = ''; // "x-date-active";
21126             setCellClass(this, cells[i]);
21127         }
21128         var extraDays = 0;
21129         
21130         for(; i < 42; i++) {
21131             textEls[i].innerHTML = (++extraDays);
21132             d.setDate(d.getDate()+1);
21133             
21134             cells[i].className = "fc-future fc-other-month";
21135             setCellClass(this, cells[i]);
21136         }
21137         
21138         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
21139         
21140         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
21141         
21142         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
21143         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
21144         
21145         if(totalRows != 6){
21146             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
21147             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
21148         }
21149         
21150         this.fireEvent('monthchange', this, date);
21151         
21152         
21153         /*
21154         if(!this.internalRender){
21155             var main = this.el.dom.firstChild;
21156             var w = main.offsetWidth;
21157             this.el.setWidth(w + this.el.getBorderWidth("lr"));
21158             Roo.fly(main).setWidth(w);
21159             this.internalRender = true;
21160             // opera does not respect the auto grow header center column
21161             // then, after it gets a width opera refuses to recalculate
21162             // without a second pass
21163             if(Roo.isOpera && !this.secondPass){
21164                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
21165                 this.secondPass = true;
21166                 this.update.defer(10, this, [date]);
21167             }
21168         }
21169         */
21170         
21171     },
21172     
21173     findCell : function(dt) {
21174         dt = dt.clearTime().getTime();
21175         var ret = false;
21176         this.cells.each(function(c){
21177             //Roo.log("check " +c.dateValue + '?=' + dt);
21178             if(c.dateValue == dt){
21179                 ret = c;
21180                 return false;
21181             }
21182             return true;
21183         });
21184         
21185         return ret;
21186     },
21187     
21188     findCells : function(ev) {
21189         var s = ev.start.clone().clearTime().getTime();
21190        // Roo.log(s);
21191         var e= ev.end.clone().clearTime().getTime();
21192        // Roo.log(e);
21193         var ret = [];
21194         this.cells.each(function(c){
21195              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
21196             
21197             if(c.dateValue > e){
21198                 return ;
21199             }
21200             if(c.dateValue < s){
21201                 return ;
21202             }
21203             ret.push(c);
21204         });
21205         
21206         return ret;    
21207     },
21208     
21209 //    findBestRow: function(cells)
21210 //    {
21211 //        var ret = 0;
21212 //        
21213 //        for (var i =0 ; i < cells.length;i++) {
21214 //            ret  = Math.max(cells[i].rows || 0,ret);
21215 //        }
21216 //        return ret;
21217 //        
21218 //    },
21219     
21220     
21221     addItem : function(ev)
21222     {
21223         // look for vertical location slot in
21224         var cells = this.findCells(ev);
21225         
21226 //        ev.row = this.findBestRow(cells);
21227         
21228         // work out the location.
21229         
21230         var crow = false;
21231         var rows = [];
21232         for(var i =0; i < cells.length; i++) {
21233             
21234             cells[i].row = cells[0].row;
21235             
21236             if(i == 0){
21237                 cells[i].row = cells[i].row + 1;
21238             }
21239             
21240             if (!crow) {
21241                 crow = {
21242                     start : cells[i],
21243                     end :  cells[i]
21244                 };
21245                 continue;
21246             }
21247             if (crow.start.getY() == cells[i].getY()) {
21248                 // on same row.
21249                 crow.end = cells[i];
21250                 continue;
21251             }
21252             // different row.
21253             rows.push(crow);
21254             crow = {
21255                 start: cells[i],
21256                 end : cells[i]
21257             };
21258             
21259         }
21260         
21261         rows.push(crow);
21262         ev.els = [];
21263         ev.rows = rows;
21264         ev.cells = cells;
21265         
21266         cells[0].events.push(ev);
21267         
21268         this.calevents.push(ev);
21269     },
21270     
21271     clearEvents: function() {
21272         
21273         if(!this.calevents){
21274             return;
21275         }
21276         
21277         Roo.each(this.cells.elements, function(c){
21278             c.row = 0;
21279             c.events = [];
21280             c.more = [];
21281         });
21282         
21283         Roo.each(this.calevents, function(e) {
21284             Roo.each(e.els, function(el) {
21285                 el.un('mouseenter' ,this.onEventEnter, this);
21286                 el.un('mouseleave' ,this.onEventLeave, this);
21287                 el.remove();
21288             },this);
21289         },this);
21290         
21291         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
21292             e.remove();
21293         });
21294         
21295     },
21296     
21297     renderEvents: function()
21298     {   
21299         var _this = this;
21300         
21301         this.cells.each(function(c) {
21302             
21303             if(c.row < 5){
21304                 return;
21305             }
21306             
21307             var ev = c.events;
21308             
21309             var r = 4;
21310             if(c.row != c.events.length){
21311                 r = 4 - (4 - (c.row - c.events.length));
21312             }
21313             
21314             c.events = ev.slice(0, r);
21315             c.more = ev.slice(r);
21316             
21317             if(c.more.length && c.more.length == 1){
21318                 c.events.push(c.more.pop());
21319             }
21320             
21321             c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
21322             
21323         });
21324             
21325         this.cells.each(function(c) {
21326             
21327             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
21328             
21329             
21330             for (var e = 0; e < c.events.length; e++){
21331                 var ev = c.events[e];
21332                 var rows = ev.rows;
21333                 
21334                 for(var i = 0; i < rows.length; i++) {
21335                 
21336                     // how many rows should it span..
21337
21338                     var  cfg = {
21339                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
21340                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
21341
21342                         unselectable : "on",
21343                         cn : [
21344                             {
21345                                 cls: 'fc-event-inner',
21346                                 cn : [
21347     //                                {
21348     //                                  tag:'span',
21349     //                                  cls: 'fc-event-time',
21350     //                                  html : cells.length > 1 ? '' : ev.time
21351     //                                },
21352                                     {
21353                                       tag:'span',
21354                                       cls: 'fc-event-title',
21355                                       html : String.format('{0}', ev.title)
21356                                     }
21357
21358
21359                                 ]
21360                             },
21361                             {
21362                                 cls: 'ui-resizable-handle ui-resizable-e',
21363                                 html : '&nbsp;&nbsp;&nbsp'
21364                             }
21365
21366                         ]
21367                     };
21368
21369                     if (i == 0) {
21370                         cfg.cls += ' fc-event-start';
21371                     }
21372                     if ((i+1) == rows.length) {
21373                         cfg.cls += ' fc-event-end';
21374                     }
21375
21376                     var ctr = _this.el.select('.fc-event-container',true).first();
21377                     var cg = ctr.createChild(cfg);
21378
21379                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
21380                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
21381
21382                     var r = (c.more.length) ? 1 : 0;
21383                     cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);    
21384                     cg.setWidth(ebox.right - sbox.x -2);
21385
21386                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
21387                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
21388                     cg.on('click', _this.onEventClick, _this, ev);
21389
21390                     ev.els.push(cg);
21391                     
21392                 }
21393                 
21394             }
21395             
21396             
21397             if(c.more.length){
21398                 var  cfg = {
21399                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
21400                     style : 'position: absolute',
21401                     unselectable : "on",
21402                     cn : [
21403                         {
21404                             cls: 'fc-event-inner',
21405                             cn : [
21406                                 {
21407                                   tag:'span',
21408                                   cls: 'fc-event-title',
21409                                   html : 'More'
21410                                 }
21411
21412
21413                             ]
21414                         },
21415                         {
21416                             cls: 'ui-resizable-handle ui-resizable-e',
21417                             html : '&nbsp;&nbsp;&nbsp'
21418                         }
21419
21420                     ]
21421                 };
21422
21423                 var ctr = _this.el.select('.fc-event-container',true).first();
21424                 var cg = ctr.createChild(cfg);
21425
21426                 var sbox = c.select('.fc-day-content',true).first().getBox();
21427                 var ebox = c.select('.fc-day-content',true).first().getBox();
21428                 //Roo.log(cg);
21429                 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);    
21430                 cg.setWidth(ebox.right - sbox.x -2);
21431
21432                 cg.on('click', _this.onMoreEventClick, _this, c.more);
21433                 
21434             }
21435             
21436         });
21437         
21438         
21439         
21440     },
21441     
21442     onEventEnter: function (e, el,event,d) {
21443         this.fireEvent('evententer', this, el, event);
21444     },
21445     
21446     onEventLeave: function (e, el,event,d) {
21447         this.fireEvent('eventleave', this, el, event);
21448     },
21449     
21450     onEventClick: function (e, el,event,d) {
21451         this.fireEvent('eventclick', this, el, event);
21452     },
21453     
21454     onMonthChange: function () {
21455         this.store.load();
21456     },
21457     
21458     onMoreEventClick: function(e, el, more)
21459     {
21460         var _this = this;
21461         
21462         this.calpopover.placement = 'right';
21463         this.calpopover.setTitle('More');
21464         
21465         this.calpopover.setContent('');
21466         
21467         var ctr = this.calpopover.el.select('.popover-content', true).first();
21468         
21469         Roo.each(more, function(m){
21470             var cfg = {
21471                 cls : 'fc-event-hori fc-event-draggable',
21472                 html : m.title
21473             };
21474             var cg = ctr.createChild(cfg);
21475             
21476             cg.on('click', _this.onEventClick, _this, m);
21477         });
21478         
21479         this.calpopover.show(el);
21480         
21481         
21482     },
21483     
21484     onLoad: function () 
21485     {   
21486         this.calevents = [];
21487         var cal = this;
21488         
21489         if(this.store.getCount() > 0){
21490             this.store.data.each(function(d){
21491                cal.addItem({
21492                     id : d.data.id,
21493                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
21494                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
21495                     time : d.data.start_time,
21496                     title : d.data.title,
21497                     description : d.data.description,
21498                     venue : d.data.venue
21499                 });
21500             });
21501         }
21502         
21503         this.renderEvents();
21504         
21505         if(this.calevents.length && this.loadMask){
21506             this.maskEl.hide();
21507         }
21508     },
21509     
21510     onBeforeLoad: function()
21511     {
21512         this.clearEvents();
21513         if(this.loadMask){
21514             this.maskEl.show();
21515         }
21516     }
21517 });
21518
21519  
21520  /*
21521  * - LGPL
21522  *
21523  * element
21524  * 
21525  */
21526
21527 /**
21528  * @class Roo.bootstrap.Popover
21529  * @extends Roo.bootstrap.Component
21530  * @parent none builder
21531  * @children Roo.bootstrap.Component
21532  * Bootstrap Popover class
21533  * @cfg {String} html contents of the popover   (or false to use children..)
21534  * @cfg {String} title of popover (or false to hide)
21535  * @cfg {String|function} (right|top|bottom|left|auto) placement how it is placed
21536  * @cfg {String} trigger click || hover (or false to trigger manually)
21537  * @cfg {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event.
21538  * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element
21539  *      - if false and it has a 'parent' then it will be automatically added to that element
21540  *      - if string - Roo.get  will be called 
21541  * @cfg {Number} delay - delay before showing
21542  
21543  * @constructor
21544  * Create a new Popover
21545  * @param {Object} config The config object
21546  */
21547
21548 Roo.bootstrap.Popover = function(config){
21549     Roo.bootstrap.Popover.superclass.constructor.call(this, config);
21550     
21551     this.addEvents({
21552         // raw events
21553          /**
21554          * @event show
21555          * After the popover show
21556          * 
21557          * @param {Roo.bootstrap.Popover} this
21558          */
21559         "show" : true,
21560         /**
21561          * @event hide
21562          * After the popover hide
21563          * 
21564          * @param {Roo.bootstrap.Popover} this
21565          */
21566         "hide" : true
21567     });
21568 };
21569
21570 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
21571     
21572     title: false,
21573     html: false,
21574     
21575     placement : 'right',
21576     trigger : 'hover', // hover
21577     modal : false,
21578     delay : 0,
21579     
21580     over: false,
21581     
21582     can_build_overlaid : false,
21583     
21584     maskEl : false, // the mask element
21585     headerEl : false,
21586     contentEl : false,
21587     alignEl : false, // when show is called with an element - this get's stored.
21588     
21589     getChildContainer : function()
21590     {
21591         return this.contentEl;
21592         
21593     },
21594     getPopoverHeader : function()
21595     {
21596         this.title = true; // flag not to hide it..
21597         this.headerEl.addClass('p-0');
21598         return this.headerEl
21599     },
21600     
21601     
21602     getAutoCreate : function(){
21603          
21604         var cfg = {
21605            cls : 'popover roo-dynamic shadow roo-popover' + (this.modal ? '-modal' : ''),
21606            style: 'display:block',
21607            cn : [
21608                 {
21609                     cls : 'arrow'
21610                 },
21611                 {
21612                     cls : 'popover-inner ',
21613                     cn : [
21614                         {
21615                             tag: 'h3',
21616                             cls: 'popover-title popover-header',
21617                             html : this.title === false ? '' : this.title
21618                         },
21619                         {
21620                             cls : 'popover-content popover-body '  + (this.cls || ''),
21621                             html : this.html || ''
21622                         }
21623                     ]
21624                     
21625                 }
21626            ]
21627         };
21628         
21629         return cfg;
21630     },
21631     /**
21632      * @param {string} the title
21633      */
21634     setTitle: function(str)
21635     {
21636         this.title = str;
21637         if (this.el) {
21638             this.headerEl.dom.innerHTML = str;
21639         }
21640         
21641     },
21642     /**
21643      * @param {string} the body content
21644      */
21645     setContent: function(str)
21646     {
21647         this.html = str;
21648         if (this.contentEl) {
21649             this.contentEl.dom.innerHTML = str;
21650         }
21651         
21652     },
21653     // as it get's added to the bottom of the page.
21654     onRender : function(ct, position)
21655     {
21656         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
21657         
21658         
21659         
21660         if(!this.el){
21661             var cfg = Roo.apply({},  this.getAutoCreate());
21662             cfg.id = Roo.id();
21663             
21664             if (this.cls) {
21665                 cfg.cls += ' ' + this.cls;
21666             }
21667             if (this.style) {
21668                 cfg.style = this.style;
21669             }
21670             //Roo.log("adding to ");
21671             this.el = Roo.get(document.body).createChild(cfg, position);
21672 //            Roo.log(this.el);
21673         }
21674         
21675         this.contentEl = this.el.select('.popover-content',true).first();
21676         this.headerEl =  this.el.select('.popover-title',true).first();
21677         
21678         var nitems = [];
21679         if(typeof(this.items) != 'undefined'){
21680             var items = this.items;
21681             delete this.items;
21682
21683             for(var i =0;i < items.length;i++) {
21684                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
21685             }
21686         }
21687
21688         this.items = nitems;
21689         
21690         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
21691         Roo.EventManager.onWindowResize(this.resizeMask, this, true);
21692         
21693         
21694         
21695         this.initEvents();
21696     },
21697     
21698     resizeMask : function()
21699     {
21700         this.maskEl.setSize(
21701             Roo.lib.Dom.getViewWidth(true),
21702             Roo.lib.Dom.getViewHeight(true)
21703         );
21704     },
21705     
21706     initEvents : function()
21707     {
21708         
21709         if (!this.modal) { 
21710             Roo.bootstrap.Popover.register(this);
21711         }
21712          
21713         this.arrowEl = this.el.select('.arrow',true).first();
21714         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4
21715         this.el.enableDisplayMode('block');
21716         this.el.hide();
21717  
21718         
21719         if (this.over === false && !this.parent()) {
21720             return; 
21721         }
21722         if (this.triggers === false) {
21723             return;
21724         }
21725          
21726         // support parent
21727         var on_el = (this.over == 'parent' || this.over === false) ? this.parent().el : Roo.get(this.over);
21728         var triggers = this.trigger ? this.trigger.split(' ') : [];
21729         Roo.each(triggers, function(trigger) {
21730         
21731             if (trigger == 'click') {
21732                 on_el.on('click', this.toggle, this);
21733             } else if (trigger != 'manual') {
21734                 var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin';
21735                 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
21736       
21737                 on_el.on(eventIn  ,this.enter, this);
21738                 on_el.on(eventOut, this.leave, this);
21739             }
21740         }, this);
21741     },
21742     
21743     
21744     // private
21745     timeout : null,
21746     hoverState : null,
21747     
21748     toggle : function () {
21749         this.hoverState == 'in' ? this.leave() : this.enter();
21750     },
21751     
21752     enter : function () {
21753         
21754         clearTimeout(this.timeout);
21755     
21756         this.hoverState = 'in';
21757     
21758         if (!this.delay || !this.delay.show) {
21759             this.show();
21760             return;
21761         }
21762         var _t = this;
21763         this.timeout = setTimeout(function () {
21764             if (_t.hoverState == 'in') {
21765                 _t.show();
21766             }
21767         }, this.delay.show)
21768     },
21769     
21770     leave : function() {
21771         clearTimeout(this.timeout);
21772     
21773         this.hoverState = 'out';
21774     
21775         if (!this.delay || !this.delay.hide) {
21776             this.hide();
21777             return;
21778         }
21779         var _t = this;
21780         this.timeout = setTimeout(function () {
21781             if (_t.hoverState == 'out') {
21782                 _t.hide();
21783             }
21784         }, this.delay.hide)
21785     },
21786     
21787     /**
21788      * update the position of the dialog
21789      * normally this is needed if the popover get's bigger - due to a Table reload etc..
21790      * 
21791      *
21792      */
21793     
21794     doAlign : function()
21795     {
21796         
21797         if (this.alignEl) {
21798             this.updatePosition(this.placement, true);
21799              
21800         } else {
21801             // this is usually just done by the builder = to show the popoup in the middle of the scren.
21802             var es = this.el.getSize();
21803             var x = Roo.lib.Dom.getViewWidth()/2;
21804             var y = Roo.lib.Dom.getViewHeight()/2;
21805             this.el.setXY([ x-(es.width/2),  y-(es.height/2)] );
21806             
21807         }
21808
21809          
21810          
21811         
21812         
21813     },
21814     
21815     /**
21816      * Show the popover
21817      * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
21818      * @param {string} (left|right|top|bottom) position
21819      */
21820     show : function (on_el, placement)
21821     {
21822         this.placement = typeof(placement) == 'undefined' ?  this.placement   : placement;
21823         on_el = on_el || false; // default to false
21824          
21825         if (!on_el) {
21826             if (this.parent() && (this.over == 'parent' || (this.over === false))) {
21827                 on_el = this.parent().el;
21828             } else if (this.over) {
21829                 on_el = Roo.get(this.over);
21830             }
21831             
21832         }
21833         
21834         this.alignEl = Roo.get( on_el );
21835
21836         if (!this.el) {
21837             this.render(document.body);
21838         }
21839         
21840         
21841          
21842         
21843         if (this.title === false) {
21844             this.headerEl.hide();
21845         }
21846         
21847        
21848         this.el.show();
21849         this.el.dom.style.display = 'block';
21850          
21851         this.doAlign();
21852         
21853         //var arrow = this.el.select('.arrow',true).first();
21854         //arrow.set(align[2], 
21855         
21856         this.el.addClass('in');
21857         
21858          
21859         
21860         this.hoverState = 'in';
21861         
21862         if (this.modal) {
21863             this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
21864             this.maskEl.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
21865             this.maskEl.dom.style.display = 'block';
21866             this.maskEl.addClass('show');
21867         }
21868         this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
21869  
21870         this.fireEvent('show', this);
21871         
21872     },
21873     /**
21874      * fire this manually after loading a grid in the table for example
21875      * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one)
21876      * @param {Boolean} try and move it if we cant get right position.
21877      */
21878     updatePosition : function(placement, try_move)
21879     {
21880         // allow for calling with no parameters
21881         placement = placement   ? placement :  this.placement;
21882         try_move = typeof(try_move) == 'undefined' ? true : try_move;
21883         
21884         this.el.removeClass([
21885             'fade','top','bottom', 'left', 'right','in',
21886             'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right'
21887         ]);
21888         this.el.addClass(placement + ' bs-popover-' + placement);
21889         
21890         if (!this.alignEl ) {
21891             return false;
21892         }
21893         
21894         switch (placement) {
21895             case 'right':
21896                 var exact = this.el.getAlignToXY(this.alignEl, 'tl-tr', [10,0]);
21897                 var offset = this.el.getAlignToXY(this.alignEl, 'tl-tr?',[10,0]);
21898                 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
21899                     //normal display... or moved up/down.
21900                     this.el.setXY(offset);
21901                     var xy = this.alignEl.getAnchorXY('tr', false);
21902                     xy[0]+=2;xy[1]+=5;
21903                     this.arrowEl.setXY(xy);
21904                     return true;
21905                 }
21906                 // continue through...
21907                 return this.updatePosition('left', false);
21908                 
21909             
21910             case 'left':
21911                 var exact = this.el.getAlignToXY(this.alignEl, 'tr-tl', [-10,0]);
21912                 var offset = this.el.getAlignToXY(this.alignEl, 'tr-tl?',[-10,0]);
21913                 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
21914                     //normal display... or moved up/down.
21915                     this.el.setXY(offset);
21916                     var xy = this.alignEl.getAnchorXY('tl', false);
21917                     xy[0]-=10;xy[1]+=5; // << fix me
21918                     this.arrowEl.setXY(xy);
21919                     return true;
21920                 }
21921                 // call self...
21922                 return this.updatePosition('right', false);
21923             
21924             case 'top':
21925                 var exact = this.el.getAlignToXY(this.alignEl, 'b-t', [0,-10]);
21926                 var offset = this.el.getAlignToXY(this.alignEl, 'b-t?',[0,-10]);
21927                 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
21928                     //normal display... or moved up/down.
21929                     this.el.setXY(offset);
21930                     var xy = this.alignEl.getAnchorXY('t', false);
21931                     xy[1]-=10; // << fix me
21932                     this.arrowEl.setXY(xy);
21933                     return true;
21934                 }
21935                 // fall through
21936                return this.updatePosition('bottom', false);
21937             
21938             case 'bottom':
21939                  var exact = this.el.getAlignToXY(this.alignEl, 't-b', [0,10]);
21940                 var offset = this.el.getAlignToXY(this.alignEl, 't-b?',[0,10]);
21941                 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
21942                     //normal display... or moved up/down.
21943                     this.el.setXY(offset);
21944                     var xy = this.alignEl.getAnchorXY('b', false);
21945                      xy[1]+=2; // << fix me
21946                     this.arrowEl.setXY(xy);
21947                     return true;
21948                 }
21949                 // fall through
21950                 return this.updatePosition('top', false);
21951                 
21952             
21953         }
21954         
21955         
21956         return false;
21957     },
21958     
21959     hide : function()
21960     {
21961         this.el.setXY([0,0]);
21962         this.el.removeClass('in');
21963         this.el.hide();
21964         this.hoverState = null;
21965         this.maskEl.hide(); // always..
21966         this.fireEvent('hide', this);
21967     }
21968     
21969 });
21970
21971
21972 Roo.apply(Roo.bootstrap.Popover, {
21973
21974     alignment : {
21975         'left' : ['r-l', [-10,0], 'left bs-popover-left'],
21976         'right' : ['l-br', [10,0], 'right bs-popover-right'],
21977         'bottom' : ['t-b', [0,10], 'top bs-popover-top'],
21978         'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom']
21979     },
21980     
21981     zIndex : 20001,
21982
21983     clickHander : false,
21984     
21985     
21986
21987     onMouseDown : function(e)
21988     {
21989         if (this.popups.length &&  !e.getTarget(".roo-popover")) {
21990             /// what is nothing is showing..
21991             this.hideAll();
21992         }
21993          
21994     },
21995     
21996     
21997     popups : [],
21998     
21999     register : function(popup)
22000     {
22001         if (!Roo.bootstrap.Popover.clickHandler) {
22002             Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover);
22003         }
22004         // hide other popups.
22005         popup.on('show', Roo.bootstrap.Popover.onShow,  popup);
22006         popup.on('hide', Roo.bootstrap.Popover.onHide,  popup);
22007         this.hideAll(); //<< why?
22008         //this.popups.push(popup);
22009     },
22010     hideAll : function()
22011     {
22012         this.popups.forEach(function(p) {
22013             p.hide();
22014         });
22015     },
22016     onShow : function() {
22017         Roo.bootstrap.Popover.popups.push(this);
22018     },
22019     onHide : function() {
22020         Roo.bootstrap.Popover.popups.remove(this);
22021     } 
22022
22023 });
22024 /**
22025  * @class Roo.bootstrap.PopoverNav
22026  * @extends Roo.bootstrap.nav.Simplebar
22027  * @parent Roo.bootstrap.Popover
22028  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container
22029  * @licence LGPL
22030  * Bootstrap Popover header navigation class
22031  * FIXME? should this go under nav?
22032  *
22033  * 
22034  * @constructor
22035  * Create a new Popover Header Navigation 
22036  * @param {Object} config The config object
22037  */
22038
22039 Roo.bootstrap.PopoverNav = function(config){
22040     Roo.bootstrap.PopoverNav.superclass.constructor.call(this, config);
22041 };
22042
22043 Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.nav.Simplebar,  {
22044     
22045     
22046     container_method : 'getPopoverHeader' 
22047     
22048      
22049     
22050     
22051    
22052 });
22053
22054  
22055
22056  /*
22057  * - LGPL
22058  *
22059  * Progress
22060  * 
22061  */
22062
22063 /**
22064  * @class Roo.bootstrap.Progress
22065  * @extends Roo.bootstrap.Component
22066  * @children Roo.bootstrap.ProgressBar
22067  * Bootstrap Progress class
22068  * @cfg {Boolean} striped striped of the progress bar
22069  * @cfg {Boolean} active animated of the progress bar
22070  * 
22071  * 
22072  * @constructor
22073  * Create a new Progress
22074  * @param {Object} config The config object
22075  */
22076
22077 Roo.bootstrap.Progress = function(config){
22078     Roo.bootstrap.Progress.superclass.constructor.call(this, config);
22079 };
22080
22081 Roo.extend(Roo.bootstrap.Progress, Roo.bootstrap.Component,  {
22082     
22083     striped : false,
22084     active: false,
22085     
22086     getAutoCreate : function(){
22087         var cfg = {
22088             tag: 'div',
22089             cls: 'progress'
22090         };
22091         
22092         
22093         if(this.striped){
22094             cfg.cls += ' progress-striped';
22095         }
22096       
22097         if(this.active){
22098             cfg.cls += ' active';
22099         }
22100         
22101         
22102         return cfg;
22103     }
22104    
22105 });
22106
22107  
22108
22109  /*
22110  * - LGPL
22111  *
22112  * ProgressBar
22113  * 
22114  */
22115
22116 /**
22117  * @class Roo.bootstrap.ProgressBar
22118  * @extends Roo.bootstrap.Component
22119  * Bootstrap ProgressBar class
22120  * @cfg {Number} aria_valuenow aria-value now
22121  * @cfg {Number} aria_valuemin aria-value min
22122  * @cfg {Number} aria_valuemax aria-value max
22123  * @cfg {String} label label for the progress bar
22124  * @cfg {String} panel (success | info | warning | danger )
22125  * @cfg {String} role role of the progress bar
22126  * @cfg {String} sr_only text
22127  * 
22128  * 
22129  * @constructor
22130  * Create a new ProgressBar
22131  * @param {Object} config The config object
22132  */
22133
22134 Roo.bootstrap.ProgressBar = function(config){
22135     Roo.bootstrap.ProgressBar.superclass.constructor.call(this, config);
22136 };
22137
22138 Roo.extend(Roo.bootstrap.ProgressBar, Roo.bootstrap.Component,  {
22139     
22140     aria_valuenow : 0,
22141     aria_valuemin : 0,
22142     aria_valuemax : 100,
22143     label : false,
22144     panel : false,
22145     role : false,
22146     sr_only: false,
22147     
22148     getAutoCreate : function()
22149     {
22150         
22151         var cfg = {
22152             tag: 'div',
22153             cls: 'progress-bar',
22154             style: 'width:' + Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%'
22155         };
22156         
22157         if(this.sr_only){
22158             cfg.cn = {
22159                 tag: 'span',
22160                 cls: 'sr-only',
22161                 html: this.sr_only
22162             }
22163         }
22164         
22165         if(this.role){
22166             cfg.role = this.role;
22167         }
22168         
22169         if(this.aria_valuenow){
22170             cfg['aria-valuenow'] = this.aria_valuenow;
22171         }
22172         
22173         if(this.aria_valuemin){
22174             cfg['aria-valuemin'] = this.aria_valuemin;
22175         }
22176         
22177         if(this.aria_valuemax){
22178             cfg['aria-valuemax'] = this.aria_valuemax;
22179         }
22180         
22181         if(this.label && !this.sr_only){
22182             cfg.html = this.label;
22183         }
22184         
22185         if(this.panel){
22186             cfg.cls += ' progress-bar-' + this.panel;
22187         }
22188         
22189         return cfg;
22190     },
22191     
22192     update : function(aria_valuenow)
22193     {
22194         this.aria_valuenow = aria_valuenow;
22195         
22196         this.el.setStyle('width', Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%');
22197     }
22198    
22199 });
22200
22201  
22202
22203  /**
22204  * @class Roo.bootstrap.TabGroup
22205  * @extends Roo.bootstrap.Column
22206  * @children Roo.bootstrap.TabPanel
22207  * Bootstrap Column class
22208  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
22209  * @cfg {Boolean} carousel true to make the group behave like a carousel
22210  * @cfg {Boolean} bullets show bullets for the panels
22211  * @cfg {Boolean} autoslide (true|false) auto slide .. default false
22212  * @cfg {Number} timer auto slide timer .. default 0 millisecond
22213  * @cfg {Boolean} showarrow (true|false) show arrow default true
22214  * 
22215  * @constructor
22216  * Create a new TabGroup
22217  * @param {Object} config The config object
22218  */
22219
22220 Roo.bootstrap.TabGroup = function(config){
22221     Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
22222     if (!this.navId) {
22223         this.navId = Roo.id();
22224     }
22225     this.tabs = [];
22226     Roo.bootstrap.TabGroup.register(this);
22227     
22228 };
22229
22230 Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
22231     
22232     carousel : false,
22233     transition : false,
22234     bullets : 0,
22235     timer : 0,
22236     autoslide : false,
22237     slideFn : false,
22238     slideOnTouch : false,
22239     showarrow : true,
22240     
22241     getAutoCreate : function()
22242     {
22243         var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
22244         
22245         cfg.cls += ' tab-content';
22246         
22247         if (this.carousel) {
22248             cfg.cls += ' carousel slide';
22249             
22250             cfg.cn = [{
22251                cls : 'carousel-inner',
22252                cn : []
22253             }];
22254         
22255             if(this.bullets  && !Roo.isTouch){
22256                 
22257                 var bullets = {
22258                     cls : 'carousel-bullets',
22259                     cn : []
22260                 };
22261                
22262                 if(this.bullets_cls){
22263                     bullets.cls = bullets.cls + ' ' + this.bullets_cls;
22264                 }
22265                 
22266                 bullets.cn.push({
22267                     cls : 'clear'
22268                 });
22269                 
22270                 cfg.cn[0].cn.push(bullets);
22271             }
22272             
22273             if(this.showarrow){
22274                 cfg.cn[0].cn.push({
22275                     tag : 'div',
22276                     class : 'carousel-arrow',
22277                     cn : [
22278                         {
22279                             tag : 'div',
22280                             class : 'carousel-prev',
22281                             cn : [
22282                                 {
22283                                     tag : 'i',
22284                                     class : 'fa fa-chevron-left'
22285                                 }
22286                             ]
22287                         },
22288                         {
22289                             tag : 'div',
22290                             class : 'carousel-next',
22291                             cn : [
22292                                 {
22293                                     tag : 'i',
22294                                     class : 'fa fa-chevron-right'
22295                                 }
22296                             ]
22297                         }
22298                     ]
22299                 });
22300             }
22301             
22302         }
22303         
22304         return cfg;
22305     },
22306     
22307     initEvents:  function()
22308     {
22309 //        if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
22310 //            this.el.on("touchstart", this.onTouchStart, this);
22311 //        }
22312         
22313         if(this.autoslide){
22314             var _this = this;
22315             
22316             this.slideFn = window.setInterval(function() {
22317                 _this.showPanelNext();
22318             }, this.timer);
22319         }
22320         
22321         if(this.showarrow){
22322             this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
22323             this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
22324         }
22325         
22326         
22327     },
22328     
22329 //    onTouchStart : function(e, el, o)
22330 //    {
22331 //        if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
22332 //            return;
22333 //        }
22334 //        
22335 //        this.showPanelNext();
22336 //    },
22337     
22338     
22339     getChildContainer : function()
22340     {
22341         return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
22342     },
22343     
22344     /**
22345     * register a Navigation item
22346     * @param {Roo.bootstrap.nav.Item} the navitem to add
22347     */
22348     register : function(item)
22349     {
22350         this.tabs.push( item);
22351         item.navId = this.navId; // not really needed..
22352         this.addBullet();
22353     
22354     },
22355     
22356     getActivePanel : function()
22357     {
22358         var r = false;
22359         Roo.each(this.tabs, function(t) {
22360             if (t.active) {
22361                 r = t;
22362                 return false;
22363             }
22364             return null;
22365         });
22366         return r;
22367         
22368     },
22369     getPanelByName : function(n)
22370     {
22371         var r = false;
22372         Roo.each(this.tabs, function(t) {
22373             if (t.tabId == n) {
22374                 r = t;
22375                 return false;
22376             }
22377             return null;
22378         });
22379         return r;
22380     },
22381     indexOfPanel : function(p)
22382     {
22383         var r = false;
22384         Roo.each(this.tabs, function(t,i) {
22385             if (t.tabId == p.tabId) {
22386                 r = i;
22387                 return false;
22388             }
22389             return null;
22390         });
22391         return r;
22392     },
22393     /**
22394      * show a specific panel
22395      * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
22396      * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
22397      */
22398     showPanel : function (pan)
22399     {
22400         if(this.transition || typeof(pan) == 'undefined'){
22401             Roo.log("waiting for the transitionend");
22402             return false;
22403         }
22404         
22405         if (typeof(pan) == 'number') {
22406             pan = this.tabs[pan];
22407         }
22408         
22409         if (typeof(pan) == 'string') {
22410             pan = this.getPanelByName(pan);
22411         }
22412         
22413         var cur = this.getActivePanel();
22414         
22415         if(!pan || !cur){
22416             Roo.log('pan or acitve pan is undefined');
22417             return false;
22418         }
22419         
22420         if (pan.tabId == this.getActivePanel().tabId) {
22421             return true;
22422         }
22423         
22424         if (false === cur.fireEvent('beforedeactivate')) {
22425             return false;
22426         }
22427         
22428         if(this.bullets > 0 && !Roo.isTouch){
22429             this.setActiveBullet(this.indexOfPanel(pan));
22430         }
22431         
22432         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
22433             
22434             //class="carousel-item carousel-item-next carousel-item-left"
22435             
22436             this.transition = true;
22437             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
22438             var lr = dir == 'next' ? 'left' : 'right';
22439             pan.el.addClass(dir); // or prev
22440             pan.el.addClass('carousel-item-' + dir); // or prev
22441             pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
22442             cur.el.addClass(lr); // or right
22443             pan.el.addClass(lr);
22444             cur.el.addClass('carousel-item-' +lr); // or right
22445             pan.el.addClass('carousel-item-' +lr);
22446             
22447             
22448             var _this = this;
22449             cur.el.on('transitionend', function() {
22450                 Roo.log("trans end?");
22451                 
22452                 pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
22453                 pan.setActive(true);
22454                 
22455                 cur.el.removeClass([lr, 'carousel-item-' + lr]);
22456                 cur.setActive(false);
22457                 
22458                 _this.transition = false;
22459                 
22460             }, this, { single:  true } );
22461             
22462             return true;
22463         }
22464         
22465         cur.setActive(false);
22466         pan.setActive(true);
22467         
22468         return true;
22469         
22470     },
22471     showPanelNext : function()
22472     {
22473         var i = this.indexOfPanel(this.getActivePanel());
22474         
22475         if (i >= this.tabs.length - 1 && !this.autoslide) {
22476             return;
22477         }
22478         
22479         if (i >= this.tabs.length - 1 && this.autoslide) {
22480             i = -1;
22481         }
22482         
22483         this.showPanel(this.tabs[i+1]);
22484     },
22485     
22486     showPanelPrev : function()
22487     {
22488         var i = this.indexOfPanel(this.getActivePanel());
22489         
22490         if (i  < 1 && !this.autoslide) {
22491             return;
22492         }
22493         
22494         if (i < 1 && this.autoslide) {
22495             i = this.tabs.length;
22496         }
22497         
22498         this.showPanel(this.tabs[i-1]);
22499     },
22500     
22501     
22502     addBullet: function()
22503     {
22504         if(!this.bullets || Roo.isTouch){
22505             return;
22506         }
22507         var ctr = this.el.select('.carousel-bullets',true).first();
22508         var i = this.el.select('.carousel-bullets .bullet',true).getCount() ;
22509         var bullet = ctr.createChild({
22510             cls : 'bullet bullet-' + i
22511         },ctr.dom.lastChild);
22512         
22513         
22514         var _this = this;
22515         
22516         bullet.on('click', (function(e, el, o, ii, t){
22517
22518             e.preventDefault();
22519
22520             this.showPanel(ii);
22521
22522             if(this.autoslide && this.slideFn){
22523                 clearInterval(this.slideFn);
22524                 this.slideFn = window.setInterval(function() {
22525                     _this.showPanelNext();
22526                 }, this.timer);
22527             }
22528
22529         }).createDelegate(this, [i, bullet], true));
22530                 
22531         
22532     },
22533      
22534     setActiveBullet : function(i)
22535     {
22536         if(Roo.isTouch){
22537             return;
22538         }
22539         
22540         Roo.each(this.el.select('.bullet', true).elements, function(el){
22541             el.removeClass('selected');
22542         });
22543
22544         var bullet = this.el.select('.bullet-' + i, true).first();
22545         
22546         if(!bullet){
22547             return;
22548         }
22549         
22550         bullet.addClass('selected');
22551     }
22552     
22553     
22554   
22555 });
22556
22557  
22558
22559  
22560  
22561 Roo.apply(Roo.bootstrap.TabGroup, {
22562     
22563     groups: {},
22564      /**
22565     * register a Navigation Group
22566     * @param {Roo.bootstrap.nav.Group} the navgroup to add
22567     */
22568     register : function(navgrp)
22569     {
22570         this.groups[navgrp.navId] = navgrp;
22571         
22572     },
22573     /**
22574     * fetch a Navigation Group based on the navigation ID
22575     * if one does not exist , it will get created.
22576     * @param {string} the navgroup to add
22577     * @returns {Roo.bootstrap.nav.Group} the navgroup 
22578     */
22579     get: function(navId) {
22580         if (typeof(this.groups[navId]) == 'undefined') {
22581             this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
22582         }
22583         return this.groups[navId] ;
22584     }
22585     
22586     
22587     
22588 });
22589
22590  /*
22591  * - LGPL
22592  *
22593  * TabPanel
22594  * 
22595  */
22596
22597 /**
22598  * @class Roo.bootstrap.TabPanel
22599  * @extends Roo.bootstrap.Component
22600  * @children Roo.bootstrap.Component
22601  * Bootstrap TabPanel class
22602  * @cfg {Boolean} active panel active
22603  * @cfg {String} html panel content
22604  * @cfg {String} tabId  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
22605  * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
22606  * @cfg {String} href click to link..
22607  * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
22608  * 
22609  * 
22610  * @constructor
22611  * Create a new TabPanel
22612  * @param {Object} config The config object
22613  */
22614
22615 Roo.bootstrap.TabPanel = function(config){
22616     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
22617     this.addEvents({
22618         /**
22619              * @event changed
22620              * Fires when the active status changes
22621              * @param {Roo.bootstrap.TabPanel} this
22622              * @param {Boolean} state the new state
22623             
22624          */
22625         'changed': true,
22626         /**
22627              * @event beforedeactivate
22628              * Fires before a tab is de-activated - can be used to do validation on a form.
22629              * @param {Roo.bootstrap.TabPanel} this
22630              * @return {Boolean} false if there is an error
22631             
22632          */
22633         'beforedeactivate': true
22634      });
22635     
22636     this.tabId = this.tabId || Roo.id();
22637   
22638 };
22639
22640 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
22641     
22642     active: false,
22643     html: false,
22644     tabId: false,
22645     navId : false,
22646     href : '',
22647     touchSlide : false,
22648     getAutoCreate : function(){
22649         
22650         
22651         var cfg = {
22652             tag: 'div',
22653             // item is needed for carousel - not sure if it has any effect otherwise
22654             cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
22655             html: this.html || ''
22656         };
22657         
22658         if(this.active){
22659             cfg.cls += ' active';
22660         }
22661         
22662         if(this.tabId){
22663             cfg.tabId = this.tabId;
22664         }
22665         
22666         
22667         
22668         return cfg;
22669     },
22670     
22671     initEvents:  function()
22672     {
22673         var p = this.parent();
22674         
22675         this.navId = this.navId || p.navId;
22676         
22677         if (typeof(this.navId) != 'undefined') {
22678             // not really needed.. but just in case.. parent should be a NavGroup.
22679             var tg = Roo.bootstrap.TabGroup.get(this.navId);
22680             
22681             tg.register(this);
22682             
22683             var i = tg.tabs.length - 1;
22684             
22685             if(this.active && tg.bullets > 0 && i < tg.bullets){
22686                 tg.setActiveBullet(i);
22687             }
22688         }
22689         
22690         this.el.on('click', this.onClick, this);
22691         
22692         if(Roo.isTouch && this.touchSlide){
22693             this.el.on("touchstart", this.onTouchStart, this);
22694             this.el.on("touchmove", this.onTouchMove, this);
22695             this.el.on("touchend", this.onTouchEnd, this);
22696         }
22697         
22698     },
22699     
22700     onRender : function(ct, position)
22701     {
22702         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
22703     },
22704     
22705     setActive : function(state)
22706     {
22707         Roo.log("panel - set active " + this.tabId + "=" + state);
22708         
22709         this.active = state;
22710         if (!state) {
22711             this.el.removeClass('active');
22712             
22713         } else  if (!this.el.hasClass('active')) {
22714             this.el.addClass('active');
22715         }
22716         
22717         this.fireEvent('changed', this, state);
22718     },
22719     
22720     onClick : function(e)
22721     {
22722         e.preventDefault();
22723         
22724         if(!this.href.length){
22725             return;
22726         }
22727         
22728         window.location.href = this.href;
22729     },
22730     
22731     startX : 0,
22732     startY : 0,
22733     endX : 0,
22734     endY : 0,
22735     swiping : false,
22736     
22737     onTouchStart : function(e)
22738     {
22739         this.swiping = false;
22740         
22741         this.startX = e.browserEvent.touches[0].clientX;
22742         this.startY = e.browserEvent.touches[0].clientY;
22743     },
22744     
22745     onTouchMove : function(e)
22746     {
22747         this.swiping = true;
22748         
22749         this.endX = e.browserEvent.touches[0].clientX;
22750         this.endY = e.browserEvent.touches[0].clientY;
22751     },
22752     
22753     onTouchEnd : function(e)
22754     {
22755         if(!this.swiping){
22756             this.onClick(e);
22757             return;
22758         }
22759         
22760         var tabGroup = this.parent();
22761         
22762         if(this.endX > this.startX){ // swiping right
22763             tabGroup.showPanelPrev();
22764             return;
22765         }
22766         
22767         if(this.startX > this.endX){ // swiping left
22768             tabGroup.showPanelNext();
22769             return;
22770         }
22771     }
22772     
22773     
22774 });
22775  
22776
22777  
22778
22779  /*
22780  * - LGPL
22781  *
22782  * DateField
22783  * 
22784  */
22785
22786 /**
22787  * @class Roo.bootstrap.form.DateField
22788  * @extends Roo.bootstrap.form.Input
22789  * Bootstrap DateField class
22790  * @cfg {Number} weekStart default 0
22791  * @cfg {String} viewMode default empty, (months|years)
22792  * @cfg {String} minViewMode default empty, (months|years)
22793  * @cfg {Number} startDate default -Infinity
22794  * @cfg {Number} endDate default Infinity
22795  * @cfg {Boolean} todayHighlight default false
22796  * @cfg {Boolean} todayBtn default false
22797  * @cfg {Boolean} calendarWeeks default false
22798  * @cfg {Object} daysOfWeekDisabled default empty
22799  * @cfg {Boolean} singleMode default false (true | false)
22800  * 
22801  * @cfg {Boolean} keyboardNavigation default true
22802  * @cfg {String} language default en
22803  * 
22804  * @constructor
22805  * Create a new DateField
22806  * @param {Object} config The config object
22807  */
22808
22809 Roo.bootstrap.form.DateField = function(config){
22810     Roo.bootstrap.form.DateField.superclass.constructor.call(this, config);
22811      this.addEvents({
22812             /**
22813              * @event show
22814              * Fires when this field show.
22815              * @param {Roo.bootstrap.form.DateField} this
22816              * @param {Mixed} date The date value
22817              */
22818             show : true,
22819             /**
22820              * @event show
22821              * Fires when this field hide.
22822              * @param {Roo.bootstrap.form.DateField} this
22823              * @param {Mixed} date The date value
22824              */
22825             hide : true,
22826             /**
22827              * @event select
22828              * Fires when select a date.
22829              * @param {Roo.bootstrap.form.DateField} this
22830              * @param {Mixed} date The date value
22831              */
22832             select : true,
22833             /**
22834              * @event beforeselect
22835              * Fires when before select a date.
22836              * @param {Roo.bootstrap.form.DateField} this
22837              * @param {Mixed} date The date value
22838              */
22839             beforeselect : true
22840         });
22841 };
22842
22843 Roo.extend(Roo.bootstrap.form.DateField, Roo.bootstrap.form.Input,  {
22844     
22845     /**
22846      * @cfg {String} format
22847      * The default date format string which can be overriden for localization support.  The format must be
22848      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
22849      */
22850     format : "m/d/y",
22851     /**
22852      * @cfg {String} altFormats
22853      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
22854      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
22855      */
22856     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
22857     
22858     weekStart : 0,
22859     
22860     viewMode : '',
22861     
22862     minViewMode : '',
22863     
22864     todayHighlight : false,
22865     
22866     todayBtn: false,
22867     
22868     language: 'en',
22869     
22870     keyboardNavigation: true,
22871     
22872     calendarWeeks: false,
22873     
22874     startDate: -Infinity,
22875     
22876     endDate: Infinity,
22877     
22878     daysOfWeekDisabled: [],
22879     
22880     _events: [],
22881     
22882     singleMode : false,
22883     
22884     UTCDate: function()
22885     {
22886         return new Date(Date.UTC.apply(Date, arguments));
22887     },
22888     
22889     UTCToday: function()
22890     {
22891         var today = new Date();
22892         return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
22893     },
22894     
22895     getDate: function() {
22896             var d = this.getUTCDate();
22897             return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
22898     },
22899     
22900     getUTCDate: function() {
22901             return this.date;
22902     },
22903     
22904     setDate: function(d) {
22905             this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
22906     },
22907     
22908     setUTCDate: function(d) {
22909             this.date = d;
22910             this.setValue(this.formatDate(this.date));
22911     },
22912         
22913     onRender: function(ct, position)
22914     {
22915         
22916         Roo.bootstrap.form.DateField.superclass.onRender.call(this, ct, position);
22917         
22918         this.language = this.language || 'en';
22919         this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : this.language.split('-')[0];
22920         this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : "en";
22921         
22922         this.isRTL = Roo.bootstrap.form.DateField.dates[this.language].rtl || false;
22923         this.format = this.format || 'm/d/y';
22924         this.isInline = false;
22925         this.isInput = true;
22926         this.component = this.el.select('.add-on', true).first() || false;
22927         this.component = (this.component && this.component.length === 0) ? false : this.component;
22928         this.hasInput = this.component && this.inputEl().length;
22929         
22930         if (typeof(this.minViewMode === 'string')) {
22931             switch (this.minViewMode) {
22932                 case 'months':
22933                     this.minViewMode = 1;
22934                     break;
22935                 case 'years':
22936                     this.minViewMode = 2;
22937                     break;
22938                 default:
22939                     this.minViewMode = 0;
22940                     break;
22941             }
22942         }
22943         
22944         if (typeof(this.viewMode === 'string')) {
22945             switch (this.viewMode) {
22946                 case 'months':
22947                     this.viewMode = 1;
22948                     break;
22949                 case 'years':
22950                     this.viewMode = 2;
22951                     break;
22952                 default:
22953                     this.viewMode = 0;
22954                     break;
22955             }
22956         }
22957                 
22958         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.DateField.template);
22959         
22960 //        this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.form.DateField.template);
22961         
22962         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
22963         
22964         this.picker().on('mousedown', this.onMousedown, this);
22965         this.picker().on('click', this.onClick, this);
22966         
22967         this.picker().addClass('datepicker-dropdown');
22968         
22969         this.startViewMode = this.viewMode;
22970         
22971         if(this.singleMode){
22972             Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
22973                 v.setVisibilityMode(Roo.Element.DISPLAY);
22974                 v.hide();
22975             });
22976             
22977             Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
22978                 v.setStyle('width', '189px');
22979             });
22980         }
22981         
22982         Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
22983             if(!this.calendarWeeks){
22984                 v.remove();
22985                 return;
22986             }
22987             
22988             v.dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
22989             v.attr('colspan', function(i, val){
22990                 return parseInt(val) + 1;
22991             });
22992         });
22993                         
22994         
22995         this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
22996         
22997         this.setStartDate(this.startDate);
22998         this.setEndDate(this.endDate);
22999         
23000         this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
23001         
23002         this.fillDow();
23003         this.fillMonths();
23004         this.update();
23005         this.showMode();
23006         
23007         if(this.isInline) {
23008             this.showPopup();
23009         }
23010     },
23011     
23012     picker : function()
23013     {
23014         return this.pickerEl;
23015 //        return this.el.select('.datepicker', true).first();
23016     },
23017     
23018     fillDow: function()
23019     {
23020         var dowCnt = this.weekStart;
23021         
23022         var dow = {
23023             tag: 'tr',
23024             cn: [
23025                 
23026             ]
23027         };
23028         
23029         if(this.calendarWeeks){
23030             dow.cn.push({
23031                 tag: 'th',
23032                 cls: 'cw',
23033                 html: '&nbsp;'
23034             })
23035         }
23036         
23037         while (dowCnt < this.weekStart + 7) {
23038             dow.cn.push({
23039                 tag: 'th',
23040                 cls: 'dow',
23041                 html: Roo.bootstrap.form.DateField.dates[this.language].daysMin[(dowCnt++)%7]
23042             });
23043         }
23044         
23045         this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
23046     },
23047     
23048     fillMonths: function()
23049     {    
23050         var i = 0;
23051         var months = this.picker().select('>.datepicker-months td', true).first();
23052         
23053         months.dom.innerHTML = '';
23054         
23055         while (i < 12) {
23056             var month = {
23057                 tag: 'span',
23058                 cls: 'month',
23059                 html: Roo.bootstrap.form.DateField.dates[this.language].monthsShort[i++]
23060             };
23061             
23062             months.createChild(month);
23063         }
23064         
23065     },
23066     
23067     update: function()
23068     {
23069         this.date = (typeof(this.date) === 'undefined' || ((typeof(this.date) === 'string') && !this.date.length)) ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
23070         
23071         if (this.date < this.startDate) {
23072             this.viewDate = new Date(this.startDate);
23073         } else if (this.date > this.endDate) {
23074             this.viewDate = new Date(this.endDate);
23075         } else {
23076             this.viewDate = new Date(this.date);
23077         }
23078         
23079         this.fill();
23080     },
23081     
23082     fill: function() 
23083     {
23084         var d = new Date(this.viewDate),
23085                 year = d.getUTCFullYear(),
23086                 month = d.getUTCMonth(),
23087                 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
23088                 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
23089                 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
23090                 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
23091                 currentDate = this.date && this.date.valueOf(),
23092                 today = this.UTCToday();
23093         
23094         this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].months[month]+' '+year;
23095         
23096 //        this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
23097         
23098 //        this.picker.select('>tfoot th.today').
23099 //                                              .text(dates[this.language].today)
23100 //                                              .toggle(this.todayBtn !== false);
23101     
23102         this.updateNavArrows();
23103         this.fillMonths();
23104                                                 
23105         var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
23106         
23107         day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
23108          
23109         prevMonth.setUTCDate(day);
23110         
23111         prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
23112         
23113         var nextMonth = new Date(prevMonth);
23114         
23115         nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
23116         
23117         nextMonth = nextMonth.valueOf();
23118         
23119         var fillMonths = false;
23120         
23121         this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
23122         
23123         while(prevMonth.valueOf() <= nextMonth) {
23124             var clsName = '';
23125             
23126             if (prevMonth.getUTCDay() === this.weekStart) {
23127                 if(fillMonths){
23128                     this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
23129                 }
23130                     
23131                 fillMonths = {
23132                     tag: 'tr',
23133                     cn: []
23134                 };
23135                 
23136                 if(this.calendarWeeks){
23137                     // ISO 8601: First week contains first thursday.
23138                     // ISO also states week starts on Monday, but we can be more abstract here.
23139                     var
23140                     // Start of current week: based on weekstart/current date
23141                     ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
23142                     // Thursday of this week
23143                     th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
23144                     // First Thursday of year, year from thursday
23145                     yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
23146                     // Calendar week: ms between thursdays, div ms per day, div 7 days
23147                     calWeek =  (th - yth) / 864e5 / 7 + 1;
23148                     
23149                     fillMonths.cn.push({
23150                         tag: 'td',
23151                         cls: 'cw',
23152                         html: calWeek
23153                     });
23154                 }
23155             }
23156             
23157             if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
23158                 clsName += ' old';
23159             } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
23160                 clsName += ' new';
23161             }
23162             if (this.todayHighlight &&
23163                 prevMonth.getUTCFullYear() == today.getFullYear() &&
23164                 prevMonth.getUTCMonth() == today.getMonth() &&
23165                 prevMonth.getUTCDate() == today.getDate()) {
23166                 clsName += ' today';
23167             }
23168             
23169             if (currentDate && prevMonth.valueOf() === currentDate) {
23170                 clsName += ' active';
23171             }
23172             
23173             if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
23174                     this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
23175                     clsName += ' disabled';
23176             }
23177             
23178             fillMonths.cn.push({
23179                 tag: 'td',
23180                 cls: 'day ' + clsName,
23181                 html: prevMonth.getDate()
23182             });
23183             
23184             prevMonth.setDate(prevMonth.getDate()+1);
23185         }
23186           
23187         var currentYear = this.date && this.date.getUTCFullYear();
23188         var currentMonth = this.date && this.date.getUTCMonth();
23189         
23190         this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
23191         
23192         Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
23193             v.removeClass('active');
23194             
23195             if(currentYear === year && k === currentMonth){
23196                 v.addClass('active');
23197             }
23198             
23199             if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
23200                 v.addClass('disabled');
23201             }
23202             
23203         });
23204         
23205         
23206         year = parseInt(year/10, 10) * 10;
23207         
23208         this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
23209         
23210         this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
23211         
23212         year -= 1;
23213         for (var i = -1; i < 11; i++) {
23214             this.picker().select('>.datepicker-years tbody td',true).first().createChild({
23215                 tag: 'span',
23216                 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
23217                 html: year
23218             });
23219             
23220             year += 1;
23221         }
23222     },
23223     
23224     showMode: function(dir) 
23225     {
23226         if (dir) {
23227             this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
23228         }
23229         
23230         Roo.each(this.picker().select('>div',true).elements, function(v){
23231             v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
23232             v.hide();
23233         });
23234         this.picker().select('>.datepicker-'+Roo.bootstrap.form.DateField.modes[this.viewMode].clsName, true).first().show();
23235     },
23236     
23237     place: function()
23238     {
23239         if(this.isInline) {
23240             return;
23241         }
23242         
23243         this.picker().removeClass(['bottom', 'top']);
23244         
23245         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
23246             /*
23247              * place to the top of element!
23248              *
23249              */
23250             
23251             this.picker().addClass('top');
23252             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
23253             
23254             return;
23255         }
23256         
23257         this.picker().addClass('bottom');
23258         
23259         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
23260     },
23261     
23262     parseDate : function(value)
23263     {
23264         if(!value || value instanceof Date){
23265             return value;
23266         }
23267         var v = Date.parseDate(value, this.format);
23268         if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
23269             v = Date.parseDate(value, 'Y-m-d');
23270         }
23271         if(!v && this.altFormats){
23272             if(!this.altFormatsArray){
23273                 this.altFormatsArray = this.altFormats.split("|");
23274             }
23275             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
23276                 v = Date.parseDate(value, this.altFormatsArray[i]);
23277             }
23278         }
23279         return v;
23280     },
23281     
23282     formatDate : function(date, fmt)
23283     {   
23284         return (!date || !(date instanceof Date)) ?
23285         date : date.dateFormat(fmt || this.format);
23286     },
23287     
23288     onFocus : function()
23289     {
23290         Roo.bootstrap.form.DateField.superclass.onFocus.call(this);
23291         this.showPopup();
23292     },
23293     
23294     onBlur : function()
23295     {
23296         Roo.bootstrap.form.DateField.superclass.onBlur.call(this);
23297         
23298         var d = this.inputEl().getValue();
23299         
23300         this.setValue(d);
23301                 
23302         this.hidePopup();
23303     },
23304     
23305     showPopup : function()
23306     {
23307         this.picker().show();
23308         this.update();
23309         this.place();
23310         
23311         this.fireEvent('showpopup', this, this.date);
23312     },
23313     
23314     hidePopup : function()
23315     {
23316         if(this.isInline) {
23317             return;
23318         }
23319         this.picker().hide();
23320         this.viewMode = this.startViewMode;
23321         this.showMode();
23322         
23323         this.fireEvent('hidepopup', this, this.date);
23324         
23325     },
23326     
23327     onMousedown: function(e)
23328     {
23329         e.stopPropagation();
23330         e.preventDefault();
23331     },
23332     
23333     keyup: function(e)
23334     {
23335         Roo.bootstrap.form.DateField.superclass.keyup.call(this);
23336         this.update();
23337     },
23338
23339     setValue: function(v)
23340     {
23341         if(this.fireEvent('beforeselect', this, v) !== false){
23342             var d = new Date(this.parseDate(v) ).clearTime();
23343         
23344             if(isNaN(d.getTime())){
23345                 this.date = this.viewDate = '';
23346                 Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
23347                 return;
23348             }
23349
23350             v = this.formatDate(d);
23351
23352             Roo.bootstrap.form.DateField.superclass.setValue.call(this, v);
23353
23354             this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
23355
23356             this.update();
23357
23358             this.fireEvent('select', this, this.date);
23359         }
23360     },
23361     
23362     getValue: function()
23363     {
23364         return this.formatDate(this.date);
23365     },
23366     
23367     fireKey: function(e)
23368     {
23369         if (!this.picker().isVisible()){
23370             if (e.keyCode == 27) { // allow escape to hide and re-show picker
23371                 this.showPopup();
23372             }
23373             return;
23374         }
23375         
23376         var dateChanged = false,
23377         dir, day, month,
23378         newDate, newViewDate;
23379         
23380         switch(e.keyCode){
23381             case 27: // escape
23382                 this.hidePopup();
23383                 e.preventDefault();
23384                 break;
23385             case 37: // left
23386             case 39: // right
23387                 if (!this.keyboardNavigation) {
23388                     break;
23389                 }
23390                 dir = e.keyCode == 37 ? -1 : 1;
23391                 
23392                 if (e.ctrlKey){
23393                     newDate = this.moveYear(this.date, dir);
23394                     newViewDate = this.moveYear(this.viewDate, dir);
23395                 } else if (e.shiftKey){
23396                     newDate = this.moveMonth(this.date, dir);
23397                     newViewDate = this.moveMonth(this.viewDate, dir);
23398                 } else {
23399                     newDate = new Date(this.date);
23400                     newDate.setUTCDate(this.date.getUTCDate() + dir);
23401                     newViewDate = new Date(this.viewDate);
23402                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
23403                 }
23404                 if (this.dateWithinRange(newDate)){
23405                     this.date = newDate;
23406                     this.viewDate = newViewDate;
23407                     this.setValue(this.formatDate(this.date));
23408 //                    this.update();
23409                     e.preventDefault();
23410                     dateChanged = true;
23411                 }
23412                 break;
23413             case 38: // up
23414             case 40: // down
23415                 if (!this.keyboardNavigation) {
23416                     break;
23417                 }
23418                 dir = e.keyCode == 38 ? -1 : 1;
23419                 if (e.ctrlKey){
23420                     newDate = this.moveYear(this.date, dir);
23421                     newViewDate = this.moveYear(this.viewDate, dir);
23422                 } else if (e.shiftKey){
23423                     newDate = this.moveMonth(this.date, dir);
23424                     newViewDate = this.moveMonth(this.viewDate, dir);
23425                 } else {
23426                     newDate = new Date(this.date);
23427                     newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
23428                     newViewDate = new Date(this.viewDate);
23429                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
23430                 }
23431                 if (this.dateWithinRange(newDate)){
23432                     this.date = newDate;
23433                     this.viewDate = newViewDate;
23434                     this.setValue(this.formatDate(this.date));
23435 //                    this.update();
23436                     e.preventDefault();
23437                     dateChanged = true;
23438                 }
23439                 break;
23440             case 13: // enter
23441                 this.setValue(this.formatDate(this.date));
23442                 this.hidePopup();
23443                 e.preventDefault();
23444                 break;
23445             case 9: // tab
23446                 this.setValue(this.formatDate(this.date));
23447                 this.hidePopup();
23448                 break;
23449             case 16: // shift
23450             case 17: // ctrl
23451             case 18: // alt
23452                 break;
23453             default :
23454                 this.hidePopup();
23455                 
23456         }
23457     },
23458     
23459     
23460     onClick: function(e) 
23461     {
23462         e.stopPropagation();
23463         e.preventDefault();
23464         
23465         var target = e.getTarget();
23466         
23467         if(target.nodeName.toLowerCase() === 'i'){
23468             target = Roo.get(target).dom.parentNode;
23469         }
23470         
23471         var nodeName = target.nodeName;
23472         var className = target.className;
23473         var html = target.innerHTML;
23474         //Roo.log(nodeName);
23475         
23476         switch(nodeName.toLowerCase()) {
23477             case 'th':
23478                 switch(className) {
23479                     case 'switch':
23480                         this.showMode(1);
23481                         break;
23482                     case 'prev':
23483                     case 'next':
23484                         var dir = Roo.bootstrap.form.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
23485                         switch(this.viewMode){
23486                                 case 0:
23487                                         this.viewDate = this.moveMonth(this.viewDate, dir);
23488                                         break;
23489                                 case 1:
23490                                 case 2:
23491                                         this.viewDate = this.moveYear(this.viewDate, dir);
23492                                         break;
23493                         }
23494                         this.fill();
23495                         break;
23496                     case 'today':
23497                         var date = new Date();
23498                         this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
23499 //                        this.fill()
23500                         this.setValue(this.formatDate(this.date));
23501                         
23502                         this.hidePopup();
23503                         break;
23504                 }
23505                 break;
23506             case 'span':
23507                 if (className.indexOf('disabled') < 0) {
23508                 if (!this.viewDate) {
23509                     this.viewDate = new Date();
23510                 }
23511                 this.viewDate.setUTCDate(1);
23512                     if (className.indexOf('month') > -1) {
23513                         this.viewDate.setUTCMonth(Roo.bootstrap.form.DateField.dates[this.language].monthsShort.indexOf(html));
23514                     } else {
23515                         var year = parseInt(html, 10) || 0;
23516                         this.viewDate.setUTCFullYear(year);
23517                         
23518                     }
23519                     
23520                     if(this.singleMode){
23521                         this.setValue(this.formatDate(this.viewDate));
23522                         this.hidePopup();
23523                         return;
23524                     }
23525                     
23526                     this.showMode(-1);
23527                     this.fill();
23528                 }
23529                 break;
23530                 
23531             case 'td':
23532                 //Roo.log(className);
23533                 if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
23534                     var day = parseInt(html, 10) || 1;
23535                     var year =  (this.viewDate || new Date()).getUTCFullYear(),
23536                         month = (this.viewDate || new Date()).getUTCMonth();
23537
23538                     if (className.indexOf('old') > -1) {
23539                         if(month === 0 ){
23540                             month = 11;
23541                             year -= 1;
23542                         }else{
23543                             month -= 1;
23544                         }
23545                     } else if (className.indexOf('new') > -1) {
23546                         if (month == 11) {
23547                             month = 0;
23548                             year += 1;
23549                         } else {
23550                             month += 1;
23551                         }
23552                     }
23553                     //Roo.log([year,month,day]);
23554                     this.date = this.UTCDate(year, month, day,0,0,0,0);
23555                     this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
23556 //                    this.fill();
23557                     //Roo.log(this.formatDate(this.date));
23558                     this.setValue(this.formatDate(this.date));
23559                     this.hidePopup();
23560                 }
23561                 break;
23562         }
23563     },
23564     
23565     setStartDate: function(startDate)
23566     {
23567         this.startDate = startDate || -Infinity;
23568         if (this.startDate !== -Infinity) {
23569             this.startDate = this.parseDate(this.startDate);
23570         }
23571         this.update();
23572         this.updateNavArrows();
23573     },
23574
23575     setEndDate: function(endDate)
23576     {
23577         this.endDate = endDate || Infinity;
23578         if (this.endDate !== Infinity) {
23579             this.endDate = this.parseDate(this.endDate);
23580         }
23581         this.update();
23582         this.updateNavArrows();
23583     },
23584     
23585     setDaysOfWeekDisabled: function(daysOfWeekDisabled)
23586     {
23587         this.daysOfWeekDisabled = daysOfWeekDisabled || [];
23588         if (typeof(this.daysOfWeekDisabled) !== 'object') {
23589             this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
23590         }
23591         this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
23592             return parseInt(d, 10);
23593         });
23594         this.update();
23595         this.updateNavArrows();
23596     },
23597     
23598     updateNavArrows: function() 
23599     {
23600         if(this.singleMode){
23601             return;
23602         }
23603         
23604         var d = new Date(this.viewDate),
23605         year = d.getUTCFullYear(),
23606         month = d.getUTCMonth();
23607         
23608         Roo.each(this.picker().select('.prev', true).elements, function(v){
23609             v.show();
23610             switch (this.viewMode) {
23611                 case 0:
23612
23613                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
23614                         v.hide();
23615                     }
23616                     break;
23617                 case 1:
23618                 case 2:
23619                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
23620                         v.hide();
23621                     }
23622                     break;
23623             }
23624         });
23625         
23626         Roo.each(this.picker().select('.next', true).elements, function(v){
23627             v.show();
23628             switch (this.viewMode) {
23629                 case 0:
23630
23631                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
23632                         v.hide();
23633                     }
23634                     break;
23635                 case 1:
23636                 case 2:
23637                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
23638                         v.hide();
23639                     }
23640                     break;
23641             }
23642         })
23643     },
23644     
23645     moveMonth: function(date, dir)
23646     {
23647         if (!dir) {
23648             return date;
23649         }
23650         var new_date = new Date(date.valueOf()),
23651         day = new_date.getUTCDate(),
23652         month = new_date.getUTCMonth(),
23653         mag = Math.abs(dir),
23654         new_month, test;
23655         dir = dir > 0 ? 1 : -1;
23656         if (mag == 1){
23657             test = dir == -1
23658             // If going back one month, make sure month is not current month
23659             // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
23660             ? function(){
23661                 return new_date.getUTCMonth() == month;
23662             }
23663             // If going forward one month, make sure month is as expected
23664             // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
23665             : function(){
23666                 return new_date.getUTCMonth() != new_month;
23667             };
23668             new_month = month + dir;
23669             new_date.setUTCMonth(new_month);
23670             // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
23671             if (new_month < 0 || new_month > 11) {
23672                 new_month = (new_month + 12) % 12;
23673             }
23674         } else {
23675             // For magnitudes >1, move one month at a time...
23676             for (var i=0; i<mag; i++) {
23677                 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
23678                 new_date = this.moveMonth(new_date, dir);
23679             }
23680             // ...then reset the day, keeping it in the new month
23681             new_month = new_date.getUTCMonth();
23682             new_date.setUTCDate(day);
23683             test = function(){
23684                 return new_month != new_date.getUTCMonth();
23685             };
23686         }
23687         // Common date-resetting loop -- if date is beyond end of month, make it
23688         // end of month
23689         while (test()){
23690             new_date.setUTCDate(--day);
23691             new_date.setUTCMonth(new_month);
23692         }
23693         return new_date;
23694     },
23695
23696     moveYear: function(date, dir)
23697     {
23698         return this.moveMonth(date, dir*12);
23699     },
23700
23701     dateWithinRange: function(date)
23702     {
23703         return date >= this.startDate && date <= this.endDate;
23704     },
23705
23706     
23707     remove: function() 
23708     {
23709         this.picker().remove();
23710     },
23711     
23712     validateValue : function(value)
23713     {
23714         if(this.getVisibilityEl().hasClass('hidden')){
23715             return true;
23716         }
23717         
23718         if(value.length < 1)  {
23719             if(this.allowBlank){
23720                 return true;
23721             }
23722             return false;
23723         }
23724         
23725         if(value.length < this.minLength){
23726             return false;
23727         }
23728         if(value.length > this.maxLength){
23729             return false;
23730         }
23731         if(this.vtype){
23732             var vt = Roo.form.VTypes;
23733             if(!vt[this.vtype](value, this)){
23734                 return false;
23735             }
23736         }
23737         if(typeof this.validator == "function"){
23738             var msg = this.validator(value);
23739             if(msg !== true){
23740                 return false;
23741             }
23742         }
23743         
23744         if(this.regex && !this.regex.test(value)){
23745             return false;
23746         }
23747         
23748         if(typeof(this.parseDate(value)) == 'undefined'){
23749             return false;
23750         }
23751         
23752         if (this.endDate !== Infinity && this.parseDate(value).getTime() > this.endDate.getTime()) {
23753             return false;
23754         }      
23755         
23756         if (this.startDate !== -Infinity && this.parseDate(value).getTime() < this.startDate.getTime()) {
23757             return false;
23758         } 
23759         
23760         
23761         return true;
23762     },
23763     
23764     reset : function()
23765     {
23766         this.date = this.viewDate = '';
23767         
23768         Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
23769     }
23770    
23771 });
23772
23773 Roo.apply(Roo.bootstrap.form.DateField,  {
23774     
23775     head : {
23776         tag: 'thead',
23777         cn: [
23778         {
23779             tag: 'tr',
23780             cn: [
23781             {
23782                 tag: 'th',
23783                 cls: 'prev',
23784                 html: '<i class="fa fa-arrow-left"/>'
23785             },
23786             {
23787                 tag: 'th',
23788                 cls: 'switch',
23789                 colspan: '5'
23790             },
23791             {
23792                 tag: 'th',
23793                 cls: 'next',
23794                 html: '<i class="fa fa-arrow-right"/>'
23795             }
23796
23797             ]
23798         }
23799         ]
23800     },
23801     
23802     content : {
23803         tag: 'tbody',
23804         cn: [
23805         {
23806             tag: 'tr',
23807             cn: [
23808             {
23809                 tag: 'td',
23810                 colspan: '7'
23811             }
23812             ]
23813         }
23814         ]
23815     },
23816     
23817     footer : {
23818         tag: 'tfoot',
23819         cn: [
23820         {
23821             tag: 'tr',
23822             cn: [
23823             {
23824                 tag: 'th',
23825                 colspan: '7',
23826                 cls: 'today'
23827             }
23828                     
23829             ]
23830         }
23831         ]
23832     },
23833     
23834     dates:{
23835         en: {
23836             days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
23837             daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
23838             daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
23839             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
23840             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
23841             today: "Today"
23842         }
23843     },
23844     
23845     modes: [
23846     {
23847         clsName: 'days',
23848         navFnc: 'Month',
23849         navStep: 1
23850     },
23851     {
23852         clsName: 'months',
23853         navFnc: 'FullYear',
23854         navStep: 1
23855     },
23856     {
23857         clsName: 'years',
23858         navFnc: 'FullYear',
23859         navStep: 10
23860     }]
23861 });
23862
23863 Roo.apply(Roo.bootstrap.form.DateField,  {
23864   
23865     template : {
23866         tag: 'div',
23867         cls: 'datepicker dropdown-menu roo-dynamic shadow',
23868         cn: [
23869         {
23870             tag: 'div',
23871             cls: 'datepicker-days',
23872             cn: [
23873             {
23874                 tag: 'table',
23875                 cls: 'table-condensed',
23876                 cn:[
23877                 Roo.bootstrap.form.DateField.head,
23878                 {
23879                     tag: 'tbody'
23880                 },
23881                 Roo.bootstrap.form.DateField.footer
23882                 ]
23883             }
23884             ]
23885         },
23886         {
23887             tag: 'div',
23888             cls: 'datepicker-months',
23889             cn: [
23890             {
23891                 tag: 'table',
23892                 cls: 'table-condensed',
23893                 cn:[
23894                 Roo.bootstrap.form.DateField.head,
23895                 Roo.bootstrap.form.DateField.content,
23896                 Roo.bootstrap.form.DateField.footer
23897                 ]
23898             }
23899             ]
23900         },
23901         {
23902             tag: 'div',
23903             cls: 'datepicker-years',
23904             cn: [
23905             {
23906                 tag: 'table',
23907                 cls: 'table-condensed',
23908                 cn:[
23909                 Roo.bootstrap.form.DateField.head,
23910                 Roo.bootstrap.form.DateField.content,
23911                 Roo.bootstrap.form.DateField.footer
23912                 ]
23913             }
23914             ]
23915         }
23916         ]
23917     }
23918 });
23919
23920  
23921
23922  /*
23923  * - LGPL
23924  *
23925  * TimeField
23926  * 
23927  */
23928
23929 /**
23930  * @class Roo.bootstrap.form.TimeField
23931  * @extends Roo.bootstrap.form.Input
23932  * Bootstrap DateField class
23933  * 
23934  * 
23935  * @constructor
23936  * Create a new TimeField
23937  * @param {Object} config The config object
23938  */
23939
23940 Roo.bootstrap.form.TimeField = function(config){
23941     Roo.bootstrap.form.TimeField.superclass.constructor.call(this, config);
23942     this.addEvents({
23943             /**
23944              * @event show
23945              * Fires when this field show.
23946              * @param {Roo.bootstrap.form.DateField} thisthis
23947              * @param {Mixed} date The date value
23948              */
23949             show : true,
23950             /**
23951              * @event show
23952              * Fires when this field hide.
23953              * @param {Roo.bootstrap.form.DateField} this
23954              * @param {Mixed} date The date value
23955              */
23956             hide : true,
23957             /**
23958              * @event select
23959              * Fires when select a date.
23960              * @param {Roo.bootstrap.form.DateField} this
23961              * @param {Mixed} date The date value
23962              */
23963             select : true
23964         });
23965 };
23966
23967 Roo.extend(Roo.bootstrap.form.TimeField, Roo.bootstrap.form.Input,  {
23968     
23969     /**
23970      * @cfg {String} format
23971      * The default time format string which can be overriden for localization support.  The format must be
23972      * valid according to {@link Date#parseDate} (defaults to 'H:i').
23973      */
23974     format : "H:i",
23975
23976     getAutoCreate : function()
23977     {
23978         this.after = '<i class="fa far fa-clock"></i>';
23979         return Roo.bootstrap.form.TimeField.superclass.getAutoCreate.call(this);
23980         
23981          
23982     },
23983     onRender: function(ct, position)
23984     {
23985         
23986         Roo.bootstrap.form.TimeField.superclass.onRender.call(this, ct, position);
23987                 
23988         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.TimeField.template);
23989         
23990         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
23991         
23992         this.pop = this.picker().select('>.datepicker-time',true).first();
23993         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
23994         
23995         this.picker().on('mousedown', this.onMousedown, this);
23996         this.picker().on('click', this.onClick, this);
23997         
23998         this.picker().addClass('datepicker-dropdown');
23999     
24000         this.fillTime();
24001         this.update();
24002             
24003         this.pop.select('.hours-up', true).first().on('click', this.onIncrementHours, this);
24004         this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this);
24005         this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
24006         this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
24007         this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
24008         this.pop.select('button.ok', true).first().on('click', this.setTime, this);
24009
24010     },
24011     
24012     fireKey: function(e){
24013         if (!this.picker().isVisible()){
24014             if (e.keyCode == 27) { // allow escape to hide and re-show picker
24015                 this.show();
24016             }
24017             return;
24018         }
24019
24020         e.preventDefault();
24021         
24022         switch(e.keyCode){
24023             case 27: // escape
24024                 this.hide();
24025                 break;
24026             case 37: // left
24027             case 39: // right
24028                 this.onTogglePeriod();
24029                 break;
24030             case 38: // up
24031                 this.onIncrementMinutes();
24032                 break;
24033             case 40: // down
24034                 this.onDecrementMinutes();
24035                 break;
24036             case 13: // enter
24037             case 9: // tab
24038                 this.setTime();
24039                 break;
24040         }
24041     },
24042     
24043     onClick: function(e) {
24044         e.stopPropagation();
24045         e.preventDefault();
24046     },
24047     
24048     picker : function()
24049     {
24050         return this.pickerEl;
24051     },
24052     
24053     fillTime: function()
24054     {    
24055         var time = this.pop.select('tbody', true).first();
24056         
24057         time.dom.innerHTML = '';
24058         
24059         time.createChild({
24060             tag: 'tr',
24061             cn: [
24062                 {
24063                     tag: 'td',
24064                     cn: [
24065                         {
24066                             tag: 'a',
24067                             href: '#',
24068                             cls: 'btn',
24069                             cn: [
24070                                 {
24071                                     tag: 'i',
24072                                     cls: 'hours-up fa fas fa-chevron-up'
24073                                 }
24074                             ]
24075                         } 
24076                     ]
24077                 },
24078                 {
24079                     tag: 'td',
24080                     cls: 'separator'
24081                 },
24082                 {
24083                     tag: 'td',
24084                     cn: [
24085                         {
24086                             tag: 'a',
24087                             href: '#',
24088                             cls: 'btn',
24089                             cn: [
24090                                 {
24091                                     tag: 'i',
24092                                     cls: 'minutes-up fa fas fa-chevron-up'
24093                                 }
24094                             ]
24095                         }
24096                     ]
24097                 },
24098                 {
24099                     tag: 'td',
24100                     cls: 'separator'
24101                 }
24102             ]
24103         });
24104         
24105         time.createChild({
24106             tag: 'tr',
24107             cn: [
24108                 {
24109                     tag: 'td',
24110                     cn: [
24111                         {
24112                             tag: 'span',
24113                             cls: 'timepicker-hour',
24114                             html: '00'
24115                         }  
24116                     ]
24117                 },
24118                 {
24119                     tag: 'td',
24120                     cls: 'separator',
24121                     html: ':'
24122                 },
24123                 {
24124                     tag: 'td',
24125                     cn: [
24126                         {
24127                             tag: 'span',
24128                             cls: 'timepicker-minute',
24129                             html: '00'
24130                         }  
24131                     ]
24132                 },
24133                 {
24134                     tag: 'td',
24135                     cls: 'separator'
24136                 },
24137                 {
24138                     tag: 'td',
24139                     cn: [
24140                         {
24141                             tag: 'button',
24142                             type: 'button',
24143                             cls: 'btn btn-primary period',
24144                             html: 'AM'
24145                             
24146                         }
24147                     ]
24148                 }
24149             ]
24150         });
24151         
24152         time.createChild({
24153             tag: 'tr',
24154             cn: [
24155                 {
24156                     tag: 'td',
24157                     cn: [
24158                         {
24159                             tag: 'a',
24160                             href: '#',
24161                             cls: 'btn',
24162                             cn: [
24163                                 {
24164                                     tag: 'span',
24165                                     cls: 'hours-down fa fas fa-chevron-down'
24166                                 }
24167                             ]
24168                         }
24169                     ]
24170                 },
24171                 {
24172                     tag: 'td',
24173                     cls: 'separator'
24174                 },
24175                 {
24176                     tag: 'td',
24177                     cn: [
24178                         {
24179                             tag: 'a',
24180                             href: '#',
24181                             cls: 'btn',
24182                             cn: [
24183                                 {
24184                                     tag: 'span',
24185                                     cls: 'minutes-down fa fas fa-chevron-down'
24186                                 }
24187                             ]
24188                         }
24189                     ]
24190                 },
24191                 {
24192                     tag: 'td',
24193                     cls: 'separator'
24194                 }
24195             ]
24196         });
24197         
24198     },
24199     
24200     update: function()
24201     {
24202         
24203         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
24204         
24205         this.fill();
24206     },
24207     
24208     fill: function() 
24209     {
24210         var hours = this.time.getHours();
24211         var minutes = this.time.getMinutes();
24212         var period = 'AM';
24213         
24214         if(hours > 11){
24215             period = 'PM';
24216         }
24217         
24218         if(hours == 0){
24219             hours = 12;
24220         }
24221         
24222         
24223         if(hours > 12){
24224             hours = hours - 12;
24225         }
24226         
24227         if(hours < 10){
24228             hours = '0' + hours;
24229         }
24230         
24231         if(minutes < 10){
24232             minutes = '0' + minutes;
24233         }
24234         
24235         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
24236         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
24237         this.pop.select('button', true).first().dom.innerHTML = period;
24238         
24239     },
24240     
24241     place: function()
24242     {   
24243         this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
24244         
24245         var cls = ['bottom'];
24246         
24247         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
24248             cls.pop();
24249             cls.push('top');
24250         }
24251         
24252         cls.push('right');
24253         
24254         if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
24255             cls.pop();
24256             cls.push('left');
24257         }
24258         //this.picker().setXY(20000,20000);
24259         this.picker().addClass(cls.join('-'));
24260         
24261         var _this = this;
24262         
24263         Roo.each(cls, function(c){
24264             if(c == 'bottom'){
24265                 (function() {
24266                  //  
24267                 }).defer(200);
24268                  _this.picker().alignTo(_this.inputEl(),   "tr-br", [0, 10], false);
24269                 //_this.picker().setTop(_this.inputEl().getHeight());
24270                 return;
24271             }
24272             if(c == 'top'){
24273                  _this.picker().alignTo(_this.inputEl(),   "br-tr", [0, 10], false);
24274                 
24275                 //_this.picker().setTop(0 - _this.picker().getHeight());
24276                 return;
24277             }
24278             /*
24279             if(c == 'left'){
24280                 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
24281                 return;
24282             }
24283             if(c == 'right'){
24284                 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
24285                 return;
24286             }
24287             */
24288         });
24289         
24290     },
24291   
24292     onFocus : function()
24293     {
24294         Roo.bootstrap.form.TimeField.superclass.onFocus.call(this);
24295         this.show();
24296     },
24297     
24298     onBlur : function()
24299     {
24300         Roo.bootstrap.form.TimeField.superclass.onBlur.call(this);
24301         this.hide();
24302     },
24303     
24304     show : function()
24305     {
24306         this.picker().show();
24307         this.pop.show();
24308         this.update();
24309         this.place();
24310         
24311         this.fireEvent('show', this, this.date);
24312     },
24313     
24314     hide : function()
24315     {
24316         this.picker().hide();
24317         this.pop.hide();
24318         
24319         this.fireEvent('hide', this, this.date);
24320     },
24321     
24322     setTime : function()
24323     {
24324         this.hide();
24325         this.setValue(this.time.format(this.format));
24326         
24327         this.fireEvent('select', this, this.date);
24328         
24329         
24330     },
24331     
24332     onMousedown: function(e){
24333         e.stopPropagation();
24334         e.preventDefault();
24335     },
24336     
24337     onIncrementHours: function()
24338     {
24339         Roo.log('onIncrementHours');
24340         this.time = this.time.add(Date.HOUR, 1);
24341         this.update();
24342         
24343     },
24344     
24345     onDecrementHours: function()
24346     {
24347         Roo.log('onDecrementHours');
24348         this.time = this.time.add(Date.HOUR, -1);
24349         this.update();
24350     },
24351     
24352     onIncrementMinutes: function()
24353     {
24354         Roo.log('onIncrementMinutes');
24355         this.time = this.time.add(Date.MINUTE, 1);
24356         this.update();
24357     },
24358     
24359     onDecrementMinutes: function()
24360     {
24361         Roo.log('onDecrementMinutes');
24362         this.time = this.time.add(Date.MINUTE, -1);
24363         this.update();
24364     },
24365     
24366     onTogglePeriod: function()
24367     {
24368         Roo.log('onTogglePeriod');
24369         this.time = this.time.add(Date.HOUR, 12);
24370         this.update();
24371     }
24372     
24373    
24374 });
24375  
24376
24377 Roo.apply(Roo.bootstrap.form.TimeField,  {
24378   
24379     template : {
24380         tag: 'div',
24381         cls: 'datepicker dropdown-menu',
24382         cn: [
24383             {
24384                 tag: 'div',
24385                 cls: 'datepicker-time',
24386                 cn: [
24387                 {
24388                     tag: 'table',
24389                     cls: 'table-condensed',
24390                     cn:[
24391                         {
24392                             tag: 'tbody',
24393                             cn: [
24394                                 {
24395                                     tag: 'tr',
24396                                     cn: [
24397                                     {
24398                                         tag: 'td',
24399                                         colspan: '7'
24400                                     }
24401                                     ]
24402                                 }
24403                             ]
24404                         },
24405                         {
24406                             tag: 'tfoot',
24407                             cn: [
24408                                 {
24409                                     tag: 'tr',
24410                                     cn: [
24411                                     {
24412                                         tag: 'th',
24413                                         colspan: '7',
24414                                         cls: '',
24415                                         cn: [
24416                                             {
24417                                                 tag: 'button',
24418                                                 cls: 'btn btn-info ok',
24419                                                 html: 'OK'
24420                                             }
24421                                         ]
24422                                     }
24423                     
24424                                     ]
24425                                 }
24426                             ]
24427                         }
24428                     ]
24429                 }
24430                 ]
24431             }
24432         ]
24433     }
24434 });
24435
24436  
24437
24438  /*
24439  * - LGPL
24440  *
24441  * MonthField
24442  * 
24443  */
24444
24445 /**
24446  * @class Roo.bootstrap.form.MonthField
24447  * @extends Roo.bootstrap.form.Input
24448  * Bootstrap MonthField class
24449  * 
24450  * @cfg {String} language default en
24451  * 
24452  * @constructor
24453  * Create a new MonthField
24454  * @param {Object} config The config object
24455  */
24456
24457 Roo.bootstrap.form.MonthField = function(config){
24458     Roo.bootstrap.form.MonthField.superclass.constructor.call(this, config);
24459     
24460     this.addEvents({
24461         /**
24462          * @event show
24463          * Fires when this field show.
24464          * @param {Roo.bootstrap.form.MonthField} this
24465          * @param {Mixed} date The date value
24466          */
24467         show : true,
24468         /**
24469          * @event show
24470          * Fires when this field hide.
24471          * @param {Roo.bootstrap.form.MonthField} this
24472          * @param {Mixed} date The date value
24473          */
24474         hide : true,
24475         /**
24476          * @event select
24477          * Fires when select a date.
24478          * @param {Roo.bootstrap.form.MonthField} this
24479          * @param {String} oldvalue The old value
24480          * @param {String} newvalue The new value
24481          */
24482         select : true
24483     });
24484 };
24485
24486 Roo.extend(Roo.bootstrap.form.MonthField, Roo.bootstrap.form.Input,  {
24487     
24488     onRender: function(ct, position)
24489     {
24490         
24491         Roo.bootstrap.form.MonthField.superclass.onRender.call(this, ct, position);
24492         
24493         this.language = this.language || 'en';
24494         this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : this.language.split('-')[0];
24495         this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : "en";
24496         
24497         this.isRTL = Roo.bootstrap.form.MonthField.dates[this.language].rtl || false;
24498         this.isInline = false;
24499         this.isInput = true;
24500         this.component = this.el.select('.add-on', true).first() || false;
24501         this.component = (this.component && this.component.length === 0) ? false : this.component;
24502         this.hasInput = this.component && this.inputEL().length;
24503         
24504         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.MonthField.template);
24505         
24506         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24507         
24508         this.picker().on('mousedown', this.onMousedown, this);
24509         this.picker().on('click', this.onClick, this);
24510         
24511         this.picker().addClass('datepicker-dropdown');
24512         
24513         Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
24514             v.setStyle('width', '189px');
24515         });
24516         
24517         this.fillMonths();
24518         
24519         this.update();
24520         
24521         if(this.isInline) {
24522             this.show();
24523         }
24524         
24525     },
24526     
24527     setValue: function(v, suppressEvent)
24528     {   
24529         var o = this.getValue();
24530         
24531         Roo.bootstrap.form.MonthField.superclass.setValue.call(this, v);
24532         
24533         this.update();
24534
24535         if(suppressEvent !== true){
24536             this.fireEvent('select', this, o, v);
24537         }
24538         
24539     },
24540     
24541     getValue: function()
24542     {
24543         return this.value;
24544     },
24545     
24546     onClick: function(e) 
24547     {
24548         e.stopPropagation();
24549         e.preventDefault();
24550         
24551         var target = e.getTarget();
24552         
24553         if(target.nodeName.toLowerCase() === 'i'){
24554             target = Roo.get(target).dom.parentNode;
24555         }
24556         
24557         var nodeName = target.nodeName;
24558         var className = target.className;
24559         var html = target.innerHTML;
24560         
24561         if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
24562             return;
24563         }
24564         
24565         this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].monthsShort.indexOf(html);
24566         
24567         this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24568         
24569         this.hide();
24570                         
24571     },
24572     
24573     picker : function()
24574     {
24575         return this.pickerEl;
24576     },
24577     
24578     fillMonths: function()
24579     {    
24580         var i = 0;
24581         var months = this.picker().select('>.datepicker-months td', true).first();
24582         
24583         months.dom.innerHTML = '';
24584         
24585         while (i < 12) {
24586             var month = {
24587                 tag: 'span',
24588                 cls: 'month',
24589                 html: Roo.bootstrap.form.MonthField.dates[this.language].monthsShort[i++]
24590             };
24591             
24592             months.createChild(month);
24593         }
24594         
24595     },
24596     
24597     update: function()
24598     {
24599         var _this = this;
24600         
24601         if(typeof(this.vIndex) == 'undefined' && this.value.length){
24602             this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].months.indexOf(this.value);
24603         }
24604         
24605         Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
24606             e.removeClass('active');
24607             
24608             if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
24609                 e.addClass('active');
24610             }
24611         })
24612     },
24613     
24614     place: function()
24615     {
24616         if(this.isInline) {
24617             return;
24618         }
24619         
24620         this.picker().removeClass(['bottom', 'top']);
24621         
24622         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
24623             /*
24624              * place to the top of element!
24625              *
24626              */
24627             
24628             this.picker().addClass('top');
24629             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
24630             
24631             return;
24632         }
24633         
24634         this.picker().addClass('bottom');
24635         
24636         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
24637     },
24638     
24639     onFocus : function()
24640     {
24641         Roo.bootstrap.form.MonthField.superclass.onFocus.call(this);
24642         this.show();
24643     },
24644     
24645     onBlur : function()
24646     {
24647         Roo.bootstrap.form.MonthField.superclass.onBlur.call(this);
24648         
24649         var d = this.inputEl().getValue();
24650         
24651         this.setValue(d);
24652                 
24653         this.hide();
24654     },
24655     
24656     show : function()
24657     {
24658         this.picker().show();
24659         this.picker().select('>.datepicker-months', true).first().show();
24660         this.update();
24661         this.place();
24662         
24663         this.fireEvent('show', this, this.date);
24664     },
24665     
24666     hide : function()
24667     {
24668         if(this.isInline) {
24669             return;
24670         }
24671         this.picker().hide();
24672         this.fireEvent('hide', this, this.date);
24673         
24674     },
24675     
24676     onMousedown: function(e)
24677     {
24678         e.stopPropagation();
24679         e.preventDefault();
24680     },
24681     
24682     keyup: function(e)
24683     {
24684         Roo.bootstrap.form.MonthField.superclass.keyup.call(this);
24685         this.update();
24686     },
24687
24688     fireKey: function(e)
24689     {
24690         if (!this.picker().isVisible()){
24691             if (e.keyCode == 27)   {// allow escape to hide and re-show picker
24692                 this.show();
24693             }
24694             return;
24695         }
24696         
24697         var dir;
24698         
24699         switch(e.keyCode){
24700             case 27: // escape
24701                 this.hide();
24702                 e.preventDefault();
24703                 break;
24704             case 37: // left
24705             case 39: // right
24706                 dir = e.keyCode == 37 ? -1 : 1;
24707                 
24708                 this.vIndex = this.vIndex + dir;
24709                 
24710                 if(this.vIndex < 0){
24711                     this.vIndex = 0;
24712                 }
24713                 
24714                 if(this.vIndex > 11){
24715                     this.vIndex = 11;
24716                 }
24717                 
24718                 if(isNaN(this.vIndex)){
24719                     this.vIndex = 0;
24720                 }
24721                 
24722                 this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24723                 
24724                 break;
24725             case 38: // up
24726             case 40: // down
24727                 
24728                 dir = e.keyCode == 38 ? -1 : 1;
24729                 
24730                 this.vIndex = this.vIndex + dir * 4;
24731                 
24732                 if(this.vIndex < 0){
24733                     this.vIndex = 0;
24734                 }
24735                 
24736                 if(this.vIndex > 11){
24737                     this.vIndex = 11;
24738                 }
24739                 
24740                 if(isNaN(this.vIndex)){
24741                     this.vIndex = 0;
24742                 }
24743                 
24744                 this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24745                 break;
24746                 
24747             case 13: // enter
24748                 
24749                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
24750                     this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24751                 }
24752                 
24753                 this.hide();
24754                 e.preventDefault();
24755                 break;
24756             case 9: // tab
24757                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
24758                     this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24759                 }
24760                 this.hide();
24761                 break;
24762             case 16: // shift
24763             case 17: // ctrl
24764             case 18: // alt
24765                 break;
24766             default :
24767                 this.hide();
24768                 
24769         }
24770     },
24771     
24772     remove: function() 
24773     {
24774         this.picker().remove();
24775     }
24776    
24777 });
24778
24779 Roo.apply(Roo.bootstrap.form.MonthField,  {
24780     
24781     content : {
24782         tag: 'tbody',
24783         cn: [
24784         {
24785             tag: 'tr',
24786             cn: [
24787             {
24788                 tag: 'td',
24789                 colspan: '7'
24790             }
24791             ]
24792         }
24793         ]
24794     },
24795     
24796     dates:{
24797         en: {
24798             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
24799             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
24800         }
24801     }
24802 });
24803
24804 Roo.apply(Roo.bootstrap.form.MonthField,  {
24805   
24806     template : {
24807         tag: 'div',
24808         cls: 'datepicker dropdown-menu roo-dynamic',
24809         cn: [
24810             {
24811                 tag: 'div',
24812                 cls: 'datepicker-months',
24813                 cn: [
24814                 {
24815                     tag: 'table',
24816                     cls: 'table-condensed',
24817                     cn:[
24818                         Roo.bootstrap.form.DateField.content
24819                     ]
24820                 }
24821                 ]
24822             }
24823         ]
24824     }
24825 });
24826
24827  
24828
24829  
24830  /*
24831  * - LGPL
24832  *
24833  * CheckBox
24834  * 
24835  */
24836
24837 /**
24838  * @class Roo.bootstrap.form.CheckBox
24839  * @extends Roo.bootstrap.form.Input
24840  * Bootstrap CheckBox class
24841  * 
24842  * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
24843  * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
24844  * @cfg {String} boxLabel The text that appears beside the checkbox
24845  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
24846  * @cfg {Boolean} checked initnal the element
24847  * @cfg {Boolean} inline inline the element (default false)
24848  * @cfg {String} groupId the checkbox group id // normal just use for checkbox
24849  * @cfg {String} tooltip label tooltip
24850  * 
24851  * @constructor
24852  * Create a new CheckBox
24853  * @param {Object} config The config object
24854  */
24855
24856 Roo.bootstrap.form.CheckBox = function(config){
24857     Roo.bootstrap.form.CheckBox.superclass.constructor.call(this, config);
24858    
24859     this.addEvents({
24860         /**
24861         * @event check
24862         * Fires when the element is checked or unchecked.
24863         * @param {Roo.bootstrap.form.CheckBox} this This input
24864         * @param {Boolean} checked The new checked value
24865         */
24866        check : true,
24867        /**
24868         * @event click
24869         * Fires when the element is click.
24870         * @param {Roo.bootstrap.form.CheckBox} this This input
24871         */
24872        click : true
24873     });
24874     
24875 };
24876
24877 Roo.extend(Roo.bootstrap.form.CheckBox, Roo.bootstrap.form.Input,  {
24878   
24879     inputType: 'checkbox',
24880     inputValue: 1,
24881     valueOff: 0,
24882     boxLabel: false,
24883     checked: false,
24884     weight : false,
24885     inline: false,
24886     tooltip : '',
24887     
24888     // checkbox success does not make any sense really.. 
24889     invalidClass : "",
24890     validClass : "",
24891     
24892     
24893     getAutoCreate : function()
24894     {
24895         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
24896         
24897         var id = Roo.id();
24898         
24899         var cfg = {};
24900         
24901         cfg.cls = 'form-group form-check ' + this.inputType; //input-group
24902         
24903         if(this.inline){
24904             cfg.cls += ' ' + this.inputType + '-inline  form-check-inline';
24905         }
24906         
24907         var input =  {
24908             tag: 'input',
24909             id : id,
24910             type : this.inputType,
24911             value : this.inputValue,
24912             cls : 'roo-' + this.inputType, //'form-box',
24913             placeholder : this.placeholder || ''
24914             
24915         };
24916         
24917         if(this.inputType != 'radio'){
24918             var hidden =  {
24919                 tag: 'input',
24920                 type : 'hidden',
24921                 cls : 'roo-hidden-value',
24922                 value : this.checked ? this.inputValue : this.valueOff
24923             };
24924         }
24925         
24926             
24927         if (this.weight) { // Validity check?
24928             cfg.cls += " " + this.inputType + "-" + this.weight;
24929         }
24930         
24931         if (this.disabled) {
24932             input.disabled=true;
24933         }
24934         
24935         if(this.checked){
24936             input.checked = this.checked;
24937         }
24938         
24939         if (this.name) {
24940             
24941             input.name = this.name;
24942             
24943             if(this.inputType != 'radio'){
24944                 hidden.name = this.name;
24945                 input.name = '_hidden_' + this.name;
24946             }
24947         }
24948         
24949         if (this.size) {
24950             input.cls += ' input-' + this.size;
24951         }
24952         
24953         var settings=this;
24954         
24955         ['xs','sm','md','lg'].map(function(size){
24956             if (settings[size]) {
24957                 cfg.cls += ' col-' + size + '-' + settings[size];
24958             }
24959         });
24960         
24961         var inputblock = input;
24962          
24963         if (this.before || this.after) {
24964             
24965             inputblock = {
24966                 cls : 'input-group',
24967                 cn :  [] 
24968             };
24969             
24970             if (this.before) {
24971                 inputblock.cn.push({
24972                     tag :'span',
24973                     cls : 'input-group-addon',
24974                     html : this.before
24975                 });
24976             }
24977             
24978             inputblock.cn.push(input);
24979             
24980             if(this.inputType != 'radio'){
24981                 inputblock.cn.push(hidden);
24982             }
24983             
24984             if (this.after) {
24985                 inputblock.cn.push({
24986                     tag :'span',
24987                     cls : 'input-group-addon',
24988                     html : this.after
24989                 });
24990             }
24991             
24992         }
24993         var boxLabelCfg = false;
24994         
24995         if(this.boxLabel){
24996            
24997             boxLabelCfg = {
24998                 tag: 'label',
24999                 //'for': id, // box label is handled by onclick - so no for...
25000                 cls: 'box-label',
25001                 html: this.boxLabel
25002             };
25003             if(this.tooltip){
25004                 boxLabelCfg.tooltip = this.tooltip;
25005             }
25006              
25007         }
25008         
25009         
25010         if (align ==='left' && this.fieldLabel.length) {
25011 //                Roo.log("left and has label");
25012             cfg.cn = [
25013                 {
25014                     tag: 'label',
25015                     'for' :  id,
25016                     cls : 'control-label',
25017                     html : this.fieldLabel
25018                 },
25019                 {
25020                     cls : "", 
25021                     cn: [
25022                         inputblock
25023                     ]
25024                 }
25025             ];
25026             
25027             if (boxLabelCfg) {
25028                 cfg.cn[1].cn.push(boxLabelCfg);
25029             }
25030             
25031             if(this.labelWidth > 12){
25032                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
25033             }
25034             
25035             if(this.labelWidth < 13 && this.labelmd == 0){
25036                 this.labelmd = this.labelWidth;
25037             }
25038             
25039             if(this.labellg > 0){
25040                 cfg.cn[0].cls += ' col-lg-' + this.labellg;
25041                 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
25042             }
25043             
25044             if(this.labelmd > 0){
25045                 cfg.cn[0].cls += ' col-md-' + this.labelmd;
25046                 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
25047             }
25048             
25049             if(this.labelsm > 0){
25050                 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
25051                 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
25052             }
25053             
25054             if(this.labelxs > 0){
25055                 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
25056                 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
25057             }
25058             
25059         } else if ( this.fieldLabel.length) {
25060 //                Roo.log(" label");
25061                 cfg.cn = [
25062                    
25063                     {
25064                         tag: this.boxLabel ? 'span' : 'label',
25065                         'for': id,
25066                         cls: 'control-label box-input-label',
25067                         //cls : 'input-group-addon',
25068                         html : this.fieldLabel
25069                     },
25070                     
25071                     inputblock
25072                     
25073                 ];
25074                 if (boxLabelCfg) {
25075                     cfg.cn.push(boxLabelCfg);
25076                 }
25077
25078         } else {
25079             
25080 //                Roo.log(" no label && no align");
25081                 cfg.cn = [  inputblock ] ;
25082                 if (boxLabelCfg) {
25083                     cfg.cn.push(boxLabelCfg);
25084                 }
25085
25086                 
25087         }
25088         
25089        
25090         
25091         if(this.inputType != 'radio'){
25092             cfg.cn.push(hidden);
25093         }
25094         
25095         return cfg;
25096         
25097     },
25098     
25099     /**
25100      * return the real input element.
25101      */
25102     inputEl: function ()
25103     {
25104         return this.el.select('input.roo-' + this.inputType,true).first();
25105     },
25106     hiddenEl: function ()
25107     {
25108         return this.el.select('input.roo-hidden-value',true).first();
25109     },
25110     
25111     labelEl: function()
25112     {
25113         return this.el.select('label.control-label',true).first();
25114     },
25115     /* depricated... */
25116     
25117     label: function()
25118     {
25119         return this.labelEl();
25120     },
25121     
25122     boxLabelEl: function()
25123     {
25124         return this.el.select('label.box-label',true).first();
25125     },
25126     
25127     initEvents : function()
25128     {
25129 //        Roo.bootstrap.form.CheckBox.superclass.initEvents.call(this);
25130         
25131         this.inputEl().on('click', this.onClick,  this);
25132         
25133         if (this.boxLabel) { 
25134             this.el.select('label.box-label',true).first().on('click', this.onClick,  this);
25135         }
25136         
25137         this.startValue = this.getValue();
25138         
25139         if(this.groupId){
25140             Roo.bootstrap.form.CheckBox.register(this);
25141         }
25142     },
25143     
25144     onClick : function(e)
25145     {   
25146         if(this.fireEvent('click', this, e) !== false){
25147             this.setChecked(!this.checked);
25148         }
25149         
25150     },
25151     
25152     setChecked : function(state,suppressEvent)
25153     {
25154         this.startValue = this.getValue();
25155
25156         if(this.inputType == 'radio'){
25157             
25158             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25159                 e.dom.checked = false;
25160             });
25161             
25162             this.inputEl().dom.checked = true;
25163             
25164             this.inputEl().dom.value = this.inputValue;
25165             
25166             if(suppressEvent !== true){
25167                 this.fireEvent('check', this, true);
25168             }
25169             
25170             this.validate();
25171             
25172             return;
25173         }
25174         
25175         this.checked = state;
25176         
25177         this.inputEl().dom.checked = state;
25178         
25179         
25180         this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
25181         
25182         if(suppressEvent !== true){
25183             this.fireEvent('check', this, state);
25184         }
25185         
25186         this.validate();
25187     },
25188     
25189     getValue : function()
25190     {
25191         if(this.inputType == 'radio'){
25192             return this.getGroupValue();
25193         }
25194         
25195         return this.hiddenEl().dom.value;
25196         
25197     },
25198     
25199     getGroupValue : function()
25200     {
25201         if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
25202             return '';
25203         }
25204         
25205         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
25206     },
25207     
25208     setValue : function(v,suppressEvent)
25209     {
25210         if(this.inputType == 'radio'){
25211             this.setGroupValue(v, suppressEvent);
25212             return;
25213         }
25214         
25215         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
25216         
25217         this.validate();
25218     },
25219     
25220     setGroupValue : function(v, suppressEvent)
25221     {
25222         this.startValue = this.getValue();
25223         
25224         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25225             e.dom.checked = false;
25226             
25227             if(e.dom.value == v){
25228                 e.dom.checked = true;
25229             }
25230         });
25231         
25232         if(suppressEvent !== true){
25233             this.fireEvent('check', this, true);
25234         }
25235
25236         this.validate();
25237         
25238         return;
25239     },
25240     
25241     validate : function()
25242     {
25243         if(this.getVisibilityEl().hasClass('hidden')){
25244             return true;
25245         }
25246         
25247         if(
25248                 this.disabled || 
25249                 (this.inputType == 'radio' && this.validateRadio()) ||
25250                 (this.inputType == 'checkbox' && this.validateCheckbox())
25251         ){
25252             this.markValid();
25253             return true;
25254         }
25255         
25256         this.markInvalid();
25257         return false;
25258     },
25259     
25260     validateRadio : function()
25261     {
25262         if(this.getVisibilityEl().hasClass('hidden')){
25263             return true;
25264         }
25265         
25266         if(this.allowBlank){
25267             return true;
25268         }
25269         
25270         var valid = false;
25271         
25272         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25273             if(!e.dom.checked){
25274                 return;
25275             }
25276             
25277             valid = true;
25278             
25279             return false;
25280         });
25281         
25282         return valid;
25283     },
25284     
25285     validateCheckbox : function()
25286     {
25287         if(!this.groupId){
25288             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
25289             //return (this.getValue() == this.inputValue) ? true : false;
25290         }
25291         
25292         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25293         
25294         if(!group){
25295             return false;
25296         }
25297         
25298         var r = false;
25299         
25300         for(var i in group){
25301             if(group[i].el.isVisible(true)){
25302                 r = false;
25303                 break;
25304             }
25305             
25306             r = true;
25307         }
25308         
25309         for(var i in group){
25310             if(r){
25311                 break;
25312             }
25313             
25314             r = (group[i].getValue() == group[i].inputValue) ? true : false;
25315         }
25316         
25317         return r;
25318     },
25319     
25320     /**
25321      * Mark this field as valid
25322      */
25323     markValid : function()
25324     {
25325         var _this = this;
25326         
25327         this.fireEvent('valid', this);
25328         
25329         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25330         
25331         if(this.groupId){
25332             label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
25333         }
25334         
25335         if(label){
25336             label.markValid();
25337         }
25338
25339         if(this.inputType == 'radio'){
25340             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25341                 var fg = e.findParent('.form-group', false, true);
25342                 if (Roo.bootstrap.version == 3) {
25343                     fg.removeClass([_this.invalidClass, _this.validClass]);
25344                     fg.addClass(_this.validClass);
25345                 } else {
25346                     fg.removeClass(['is-valid', 'is-invalid']);
25347                     fg.addClass('is-valid');
25348                 }
25349             });
25350             
25351             return;
25352         }
25353
25354         if(!this.groupId){
25355             var fg = this.el.findParent('.form-group', false, true);
25356             if (Roo.bootstrap.version == 3) {
25357                 fg.removeClass([this.invalidClass, this.validClass]);
25358                 fg.addClass(this.validClass);
25359             } else {
25360                 fg.removeClass(['is-valid', 'is-invalid']);
25361                 fg.addClass('is-valid');
25362             }
25363             return;
25364         }
25365         
25366         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25367         
25368         if(!group){
25369             return;
25370         }
25371         
25372         for(var i in group){
25373             var fg = group[i].el.findParent('.form-group', false, true);
25374             if (Roo.bootstrap.version == 3) {
25375                 fg.removeClass([this.invalidClass, this.validClass]);
25376                 fg.addClass(this.validClass);
25377             } else {
25378                 fg.removeClass(['is-valid', 'is-invalid']);
25379                 fg.addClass('is-valid');
25380             }
25381         }
25382     },
25383     
25384      /**
25385      * Mark this field as invalid
25386      * @param {String} msg The validation message
25387      */
25388     markInvalid : function(msg)
25389     {
25390         if(this.allowBlank){
25391             return;
25392         }
25393         
25394         var _this = this;
25395         
25396         this.fireEvent('invalid', this, msg);
25397         
25398         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25399         
25400         if(this.groupId){
25401             label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
25402         }
25403         
25404         if(label){
25405             label.markInvalid();
25406         }
25407             
25408         if(this.inputType == 'radio'){
25409             
25410             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25411                 var fg = e.findParent('.form-group', false, true);
25412                 if (Roo.bootstrap.version == 3) {
25413                     fg.removeClass([_this.invalidClass, _this.validClass]);
25414                     fg.addClass(_this.invalidClass);
25415                 } else {
25416                     fg.removeClass(['is-invalid', 'is-valid']);
25417                     fg.addClass('is-invalid');
25418                 }
25419             });
25420             
25421             return;
25422         }
25423         
25424         if(!this.groupId){
25425             var fg = this.el.findParent('.form-group', false, true);
25426             if (Roo.bootstrap.version == 3) {
25427                 fg.removeClass([_this.invalidClass, _this.validClass]);
25428                 fg.addClass(_this.invalidClass);
25429             } else {
25430                 fg.removeClass(['is-invalid', 'is-valid']);
25431                 fg.addClass('is-invalid');
25432             }
25433             return;
25434         }
25435         
25436         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25437         
25438         if(!group){
25439             return;
25440         }
25441         
25442         for(var i in group){
25443             var fg = group[i].el.findParent('.form-group', false, true);
25444             if (Roo.bootstrap.version == 3) {
25445                 fg.removeClass([_this.invalidClass, _this.validClass]);
25446                 fg.addClass(_this.invalidClass);
25447             } else {
25448                 fg.removeClass(['is-invalid', 'is-valid']);
25449                 fg.addClass('is-invalid');
25450             }
25451         }
25452         
25453     },
25454     
25455     clearInvalid : function()
25456     {
25457         Roo.bootstrap.form.Input.prototype.clearInvalid.call(this);
25458         
25459         // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
25460         
25461         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25462         
25463         if (label && label.iconEl) {
25464             label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
25465             label.iconEl.removeClass(['is-invalid', 'is-valid']);
25466         }
25467     },
25468     
25469     disable : function()
25470     {
25471         if(this.inputType != 'radio'){
25472             Roo.bootstrap.form.CheckBox.superclass.disable.call(this);
25473             return;
25474         }
25475         
25476         var _this = this;
25477         
25478         if(this.rendered){
25479             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25480                 _this.getActionEl().addClass(this.disabledClass);
25481                 e.dom.disabled = true;
25482             });
25483         }
25484         
25485         this.disabled = true;
25486         this.fireEvent("disable", this);
25487         return this;
25488     },
25489
25490     enable : function()
25491     {
25492         if(this.inputType != 'radio'){
25493             Roo.bootstrap.form.CheckBox.superclass.enable.call(this);
25494             return;
25495         }
25496         
25497         var _this = this;
25498         
25499         if(this.rendered){
25500             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25501                 _this.getActionEl().removeClass(this.disabledClass);
25502                 e.dom.disabled = false;
25503             });
25504         }
25505         
25506         this.disabled = false;
25507         this.fireEvent("enable", this);
25508         return this;
25509     },
25510     
25511     setBoxLabel : function(v)
25512     {
25513         this.boxLabel = v;
25514         
25515         if(this.rendered){
25516             this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
25517         }
25518     }
25519
25520 });
25521
25522 Roo.apply(Roo.bootstrap.form.CheckBox, {
25523     
25524     groups: {},
25525     
25526      /**
25527     * register a CheckBox Group
25528     * @param {Roo.bootstrap.form.CheckBox} the CheckBox to add
25529     */
25530     register : function(checkbox)
25531     {
25532         if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
25533             this.groups[checkbox.groupId] = {};
25534         }
25535         
25536         if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
25537             return;
25538         }
25539         
25540         this.groups[checkbox.groupId][checkbox.name] = checkbox;
25541         
25542     },
25543     /**
25544     * fetch a CheckBox Group based on the group ID
25545     * @param {string} the group ID
25546     * @returns {Roo.bootstrap.form.CheckBox} the CheckBox group
25547     */
25548     get: function(groupId) {
25549         if (typeof(this.groups[groupId]) == 'undefined') {
25550             return false;
25551         }
25552         
25553         return this.groups[groupId] ;
25554     }
25555     
25556     
25557 });
25558 /*
25559  * - LGPL
25560  *
25561  * RadioItem
25562  * 
25563  */
25564
25565 /**
25566  * @class Roo.bootstrap.form.Radio
25567  * @extends Roo.bootstrap.Component
25568  * Bootstrap Radio class
25569  * @cfg {String} boxLabel - the label associated
25570  * @cfg {String} value - the value of radio
25571  * 
25572  * @constructor
25573  * Create a new Radio
25574  * @param {Object} config The config object
25575  */
25576 Roo.bootstrap.form.Radio = function(config){
25577     Roo.bootstrap.form.Radio.superclass.constructor.call(this, config);
25578     
25579 };
25580
25581 Roo.extend(Roo.bootstrap.form.Radio, Roo.bootstrap.Component, {
25582     
25583     boxLabel : '',
25584     
25585     value : '',
25586     
25587     getAutoCreate : function()
25588     {
25589         var cfg = {
25590             tag : 'div',
25591             cls : 'form-group radio',
25592             cn : [
25593                 {
25594                     tag : 'label',
25595                     cls : 'box-label',
25596                     html : this.boxLabel
25597                 }
25598             ]
25599         };
25600         
25601         return cfg;
25602     },
25603     
25604     initEvents : function() 
25605     {
25606         this.parent().register(this);
25607         
25608         this.el.on('click', this.onClick, this);
25609         
25610     },
25611     
25612     onClick : function(e)
25613     {
25614         if(this.parent().fireEvent('click', this.parent(), this, e) !== false){
25615             this.setChecked(true);
25616         }
25617     },
25618     
25619     setChecked : function(state, suppressEvent)
25620     {
25621         this.parent().setValue(this.value, suppressEvent);
25622         
25623     },
25624     
25625     setBoxLabel : function(v)
25626     {
25627         this.boxLabel = v;
25628         
25629         if(this.rendered){
25630             this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
25631         }
25632     }
25633     
25634 });
25635  
25636
25637  /*
25638  * - LGPL
25639  *
25640  * Input
25641  * 
25642  */
25643
25644 /**
25645  * @class Roo.bootstrap.form.SecurePass
25646  * @extends Roo.bootstrap.form.Input
25647  * Bootstrap SecurePass class
25648  *
25649  * 
25650  * @constructor
25651  * Create a new SecurePass
25652  * @param {Object} config The config object
25653  */
25654  
25655 Roo.bootstrap.form.SecurePass = function (config) {
25656     // these go here, so the translation tool can replace them..
25657     this.errors = {
25658         PwdEmpty: "Please type a password, and then retype it to confirm.",
25659         PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
25660         PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
25661         PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
25662         IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
25663         FNInPwd: "Your password can't contain your first name. Please type a different password.",
25664         LNInPwd: "Your password can't contain your last name. Please type a different password.",
25665         TooWeak: "Your password is Too Weak."
25666     },
25667     this.meterLabel = "Password strength:";
25668     this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
25669     this.meterClass = [
25670         "roo-password-meter-tooweak", 
25671         "roo-password-meter-weak", 
25672         "roo-password-meter-medium", 
25673         "roo-password-meter-strong", 
25674         "roo-password-meter-grey"
25675     ];
25676     
25677     this.errors = {};
25678     
25679     Roo.bootstrap.form.SecurePass.superclass.constructor.call(this, config);
25680 }
25681
25682 Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, {
25683     /**
25684      * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
25685      * {
25686      *  PwdEmpty: "Please type a password, and then retype it to confirm.",
25687      *  PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
25688      *  PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
25689      *  PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
25690      *  IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
25691      *  FNInPwd: "Your password can't contain your first name. Please type a different password.",
25692      *  LNInPwd: "Your password can't contain your last name. Please type a different password."
25693      * })
25694      */
25695     // private
25696     
25697     meterWidth: 300,
25698     errorMsg :'',    
25699     errors: false,
25700     imageRoot: '/',
25701     /**
25702      * @cfg {String/Object} Label for the strength meter (defaults to
25703      * 'Password strength:')
25704      */
25705     // private
25706     meterLabel: '',
25707     /**
25708      * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
25709      * ['Weak', 'Medium', 'Strong'])
25710      */
25711     // private    
25712     pwdStrengths: false,    
25713     // private
25714     strength: 0,
25715     // private
25716     _lastPwd: null,
25717     // private
25718     kCapitalLetter: 0,
25719     kSmallLetter: 1,
25720     kDigit: 2,
25721     kPunctuation: 3,
25722     
25723     insecure: false,
25724     // private
25725     initEvents: function ()
25726     {
25727         Roo.bootstrap.form.SecurePass.superclass.initEvents.call(this);
25728
25729         if (this.el.is('input[type=password]') && Roo.isSafari) {
25730             this.el.on('keydown', this.SafariOnKeyDown, this);
25731         }
25732
25733         this.el.on('keyup', this.checkStrength, this, {buffer: 50});
25734     },
25735     // private
25736     onRender: function (ct, position)
25737     {
25738         Roo.bootstrap.form.SecurePass.superclass.onRender.call(this, ct, position);
25739         this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
25740         this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
25741
25742         this.trigger.createChild({
25743                    cn: [
25744                     {
25745                     //id: 'PwdMeter',
25746                     tag: 'div',
25747                     cls: 'roo-password-meter-grey col-xs-12',
25748                     style: {
25749                         //width: 0,
25750                         //width: this.meterWidth + 'px'                                                
25751                         }
25752                     },
25753                     {                            
25754                          cls: 'roo-password-meter-text'                          
25755                     }
25756                 ]            
25757         });
25758
25759          
25760         if (this.hideTrigger) {
25761             this.trigger.setDisplayed(false);
25762         }
25763         this.setSize(this.width || '', this.height || '');
25764     },
25765     // private
25766     onDestroy: function ()
25767     {
25768         if (this.trigger) {
25769             this.trigger.removeAllListeners();
25770             this.trigger.remove();
25771         }
25772         if (this.wrap) {
25773             this.wrap.remove();
25774         }
25775         Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
25776     },
25777     // private
25778     checkStrength: function ()
25779     {
25780         var pwd = this.inputEl().getValue();
25781         if (pwd == this._lastPwd) {
25782             return;
25783         }
25784
25785         var strength;
25786         if (this.ClientSideStrongPassword(pwd)) {
25787             strength = 3;
25788         } else if (this.ClientSideMediumPassword(pwd)) {
25789             strength = 2;
25790         } else if (this.ClientSideWeakPassword(pwd)) {
25791             strength = 1;
25792         } else {
25793             strength = 0;
25794         }
25795         
25796         Roo.log('strength1: ' + strength);
25797         
25798         //var pm = this.trigger.child('div/div/div').dom;
25799         var pm = this.trigger.child('div/div');
25800         pm.removeClass(this.meterClass);
25801         pm.addClass(this.meterClass[strength]);
25802                 
25803         
25804         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25805                 
25806         pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
25807         
25808         this._lastPwd = pwd;
25809     },
25810     reset: function ()
25811     {
25812         Roo.bootstrap.form.SecurePass.superclass.reset.call(this);
25813         
25814         this._lastPwd = '';
25815         
25816         var pm = this.trigger.child('div/div');
25817         pm.removeClass(this.meterClass);
25818         pm.addClass('roo-password-meter-grey');        
25819         
25820         
25821         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25822         
25823         pt.innerHTML = '';
25824         this.inputEl().dom.type='password';
25825     },
25826     // private
25827     validateValue: function (value)
25828     {
25829         if (!Roo.bootstrap.form.SecurePass.superclass.validateValue.call(this, value)) {
25830             return false;
25831         }
25832         if (value.length == 0) {
25833             if (this.allowBlank) {
25834                 this.clearInvalid();
25835                 return true;
25836             }
25837
25838             this.markInvalid(this.errors.PwdEmpty);
25839             this.errorMsg = this.errors.PwdEmpty;
25840             return false;
25841         }
25842         
25843         if(this.insecure){
25844             return true;
25845         }
25846         
25847         if (!value.match(/[\x21-\x7e]+/)) {
25848             this.markInvalid(this.errors.PwdBadChar);
25849             this.errorMsg = this.errors.PwdBadChar;
25850             return false;
25851         }
25852         if (value.length < 6) {
25853             this.markInvalid(this.errors.PwdShort);
25854             this.errorMsg = this.errors.PwdShort;
25855             return false;
25856         }
25857         if (value.length > 16) {
25858             this.markInvalid(this.errors.PwdLong);
25859             this.errorMsg = this.errors.PwdLong;
25860             return false;
25861         }
25862         var strength;
25863         if (this.ClientSideStrongPassword(value)) {
25864             strength = 3;
25865         } else if (this.ClientSideMediumPassword(value)) {
25866             strength = 2;
25867         } else if (this.ClientSideWeakPassword(value)) {
25868             strength = 1;
25869         } else {
25870             strength = 0;
25871         }
25872
25873         
25874         if (strength < 2) {
25875             //this.markInvalid(this.errors.TooWeak);
25876             this.errorMsg = this.errors.TooWeak;
25877             //return false;
25878         }
25879         
25880         
25881         console.log('strength2: ' + strength);
25882         
25883         //var pm = this.trigger.child('div/div/div').dom;
25884         
25885         var pm = this.trigger.child('div/div');
25886         pm.removeClass(this.meterClass);
25887         pm.addClass(this.meterClass[strength]);
25888                 
25889         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25890                 
25891         pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
25892         
25893         this.errorMsg = ''; 
25894         return true;
25895     },
25896     // private
25897     CharacterSetChecks: function (type)
25898     {
25899         this.type = type;
25900         this.fResult = false;
25901     },
25902     // private
25903     isctype: function (character, type)
25904     {
25905         switch (type) {  
25906             case this.kCapitalLetter:
25907                 if (character >= 'A' && character <= 'Z') {
25908                     return true;
25909                 }
25910                 break;
25911             
25912             case this.kSmallLetter:
25913                 if (character >= 'a' && character <= 'z') {
25914                     return true;
25915                 }
25916                 break;
25917             
25918             case this.kDigit:
25919                 if (character >= '0' && character <= '9') {
25920                     return true;
25921                 }
25922                 break;
25923             
25924             case this.kPunctuation:
25925                 if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
25926                     return true;
25927                 }
25928                 break;
25929             
25930             default:
25931                 return false;
25932         }
25933
25934     },
25935     // private
25936     IsLongEnough: function (pwd, size)
25937     {
25938         return !(pwd == null || isNaN(size) || pwd.length < size);
25939     },
25940     // private
25941     SpansEnoughCharacterSets: function (word, nb)
25942     {
25943         if (!this.IsLongEnough(word, nb))
25944         {
25945             return false;
25946         }
25947
25948         var characterSetChecks = new Array(
25949             new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
25950             new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation)
25951         );
25952         
25953         for (var index = 0; index < word.length; ++index) {
25954             for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
25955                 if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
25956                     characterSetChecks[nCharSet].fResult = true;
25957                     break;
25958                 }
25959             }
25960         }
25961
25962         var nCharSets = 0;
25963         for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
25964             if (characterSetChecks[nCharSet].fResult) {
25965                 ++nCharSets;
25966             }
25967         }
25968
25969         if (nCharSets < nb) {
25970             return false;
25971         }
25972         return true;
25973     },
25974     // private
25975     ClientSideStrongPassword: function (pwd)
25976     {
25977         return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
25978     },
25979     // private
25980     ClientSideMediumPassword: function (pwd)
25981     {
25982         return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
25983     },
25984     // private
25985     ClientSideWeakPassword: function (pwd)
25986     {
25987         return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
25988     }
25989           
25990 });
25991 Roo.htmleditor = {};
25992  
25993 /**
25994  * @class Roo.htmleditor.Filter
25995  * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
25996  * @cfg {DomElement} node The node to iterate and filter
25997  * @cfg {boolean|String|Array} tag Tags to replace 
25998  * @constructor
25999  * Create a new Filter.
26000  * @param {Object} config Configuration options
26001  */
26002
26003
26004
26005 Roo.htmleditor.Filter = function(cfg) {
26006     Roo.apply(this.cfg);
26007     // this does not actually call walk as it's really just a abstract class
26008 }
26009
26010
26011 Roo.htmleditor.Filter.prototype = {
26012     
26013     node: false,
26014     
26015     tag: false,
26016
26017     // overrride to do replace comments.
26018     replaceComment : false,
26019     
26020     // overrride to do replace or do stuff with tags..
26021     replaceTag : false,
26022     
26023     walk : function(dom)
26024     {
26025         Roo.each( Array.from(dom.childNodes), function( e ) {
26026             switch(true) {
26027                 
26028                 case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
26029                     this.replaceComment(e);
26030                     return;
26031                 
26032                 case e.nodeType != 1: //not a node.
26033                     return;
26034                 
26035                 case this.tag === true: // everything
26036                 case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
26037                 case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
26038                     if (this.replaceTag && false === this.replaceTag(e)) {
26039                         return;
26040                     }
26041                     if (e.hasChildNodes()) {
26042                         this.walk(e);
26043                     }
26044                     return;
26045                 
26046                 default:    // tags .. that do not match.
26047                     if (e.hasChildNodes()) {
26048                         this.walk(e);
26049                     }
26050             }
26051             
26052         }, this);
26053         
26054     }
26055 }; 
26056
26057 /**
26058  * @class Roo.htmleditor.FilterAttributes
26059  * clean attributes and  styles including http:// etc.. in attribute
26060  * @constructor
26061 * Run a new Attribute Filter
26062 * @param {Object} config Configuration options
26063  */
26064 Roo.htmleditor.FilterAttributes = function(cfg)
26065 {
26066     Roo.apply(this, cfg);
26067     this.attrib_black = this.attrib_black || [];
26068     this.attrib_white = this.attrib_white || [];
26069
26070     this.attrib_clean = this.attrib_clean || [];
26071     this.style_white = this.style_white || [];
26072     this.style_black = this.style_black || [];
26073     this.walk(cfg.node);
26074 }
26075
26076 Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
26077 {
26078     tag: true, // all tags
26079     
26080     attrib_black : false, // array
26081     attrib_clean : false,
26082     attrib_white : false,
26083
26084     style_white : false,
26085     style_black : false,
26086      
26087      
26088     replaceTag : function(node)
26089     {
26090         if (!node.attributes || !node.attributes.length) {
26091             return true;
26092         }
26093         
26094         for (var i = node.attributes.length-1; i > -1 ; i--) {
26095             var a = node.attributes[i];
26096             //console.log(a);
26097             if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
26098                 node.removeAttribute(a.name);
26099                 continue;
26100             }
26101             
26102             
26103             
26104             if (a.name.toLowerCase().substr(0,2)=='on')  {
26105                 node.removeAttribute(a.name);
26106                 continue;
26107             }
26108             
26109             
26110             if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
26111                 node.removeAttribute(a.name);
26112                 continue;
26113             }
26114             if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
26115                 this.cleanAttr(node,a.name,a.value); // fixme..
26116                 continue;
26117             }
26118             if (a.name == 'style') {
26119                 this.cleanStyle(node,a.name,a.value);
26120                 continue;
26121             }
26122             /// clean up MS crap..
26123             // tecnically this should be a list of valid class'es..
26124             
26125             
26126             if (a.name == 'class') {
26127                 if (a.value.match(/^Mso/)) {
26128                     node.removeAttribute('class');
26129                 }
26130                 
26131                 if (a.value.match(/^body$/)) {
26132                     node.removeAttribute('class');
26133                 }
26134                 continue;
26135             }
26136             
26137             
26138             // style cleanup!?
26139             // class cleanup?
26140             
26141         }
26142         return true; // clean children
26143     },
26144         
26145     cleanAttr: function(node, n,v)
26146     {
26147         
26148         if (v.match(/^\./) || v.match(/^\//)) {
26149             return;
26150         }
26151         if (v.match(/^(http|https):\/\//)
26152             || v.match(/^mailto:/) 
26153             || v.match(/^ftp:/)
26154             || v.match(/^data:/)
26155             ) {
26156             return;
26157         }
26158         if (v.match(/^#/)) {
26159             return;
26160         }
26161         if (v.match(/^\{/)) { // allow template editing.
26162             return;
26163         }
26164 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
26165         node.removeAttribute(n);
26166         
26167     },
26168     cleanStyle : function(node,  n,v)
26169     {
26170         if (v.match(/expression/)) { //XSS?? should we even bother..
26171             node.removeAttribute(n);
26172             return;
26173         }
26174         
26175         var parts = v.split(/;/);
26176         var clean = [];
26177         
26178         Roo.each(parts, function(p) {
26179             p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
26180             if (!p.length) {
26181                 return true;
26182             }
26183             var l = p.split(':').shift().replace(/\s+/g,'');
26184             l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
26185             
26186             if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
26187                 return true;
26188             }
26189             //Roo.log()
26190             // only allow 'c whitelisted system attributes'
26191             if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
26192                 return true;
26193             }
26194             
26195             
26196             clean.push(p);
26197             return true;
26198         },this);
26199         if (clean.length) { 
26200             node.setAttribute(n, clean.join(';'));
26201         } else {
26202             node.removeAttribute(n);
26203         }
26204         
26205     }
26206         
26207         
26208         
26209     
26210 });/**
26211  * @class Roo.htmleditor.FilterBlack
26212  * remove blacklisted elements.
26213  * @constructor
26214  * Run a new Blacklisted Filter
26215  * @param {Object} config Configuration options
26216  */
26217
26218 Roo.htmleditor.FilterBlack = function(cfg)
26219 {
26220     Roo.apply(this, cfg);
26221     this.walk(cfg.node);
26222 }
26223
26224 Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
26225 {
26226     tag : true, // all elements.
26227    
26228     replaceTag : function(n)
26229     {
26230         n.parentNode.removeChild(n);
26231     }
26232 });
26233 /**
26234  * @class Roo.htmleditor.FilterComment
26235  * remove comments.
26236  * @constructor
26237 * Run a new Comments Filter
26238 * @param {Object} config Configuration options
26239  */
26240 Roo.htmleditor.FilterComment = function(cfg)
26241 {
26242     this.walk(cfg.node);
26243 }
26244
26245 Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
26246 {
26247   
26248     replaceComment : function(n)
26249     {
26250         n.parentNode.removeChild(n);
26251     }
26252 });/**
26253  * @class Roo.htmleditor.FilterKeepChildren
26254  * remove tags but keep children
26255  * @constructor
26256  * Run a new Keep Children Filter
26257  * @param {Object} config Configuration options
26258  */
26259
26260 Roo.htmleditor.FilterKeepChildren = function(cfg)
26261 {
26262     Roo.apply(this, cfg);
26263     if (this.tag === false) {
26264         return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
26265     }
26266     this.walk(cfg.node);
26267 }
26268
26269 Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
26270 {
26271     
26272   
26273     replaceTag : function(node)
26274     {
26275         // walk children...
26276         //Roo.log(node);
26277         var ar = Array.from(node.childNodes);
26278         //remove first..
26279         for (var i = 0; i < ar.length; i++) {
26280             if (ar[i].nodeType == 1) {
26281                 if (
26282                     (typeof(this.tag) == 'object' && this.tag.indexOf(ar[i].tagName) > -1)
26283                     || // array and it matches
26284                     (typeof(this.tag) == 'string' && this.tag == ar[i].tagName)
26285                 ) {
26286                     this.replaceTag(ar[i]); // child is blacklisted as well...
26287                     continue;
26288                 }
26289             }
26290         }  
26291         ar = Array.from(node.childNodes);
26292         for (var i = 0; i < ar.length; i++) {
26293          
26294             node.removeChild(ar[i]);
26295             // what if we need to walk these???
26296             node.parentNode.insertBefore(ar[i], node);
26297             if (this.tag !== false) {
26298                 this.walk(ar[i]);
26299                 
26300             }
26301         }
26302         node.parentNode.removeChild(node);
26303         return false; // don't walk children
26304         
26305         
26306     }
26307 });/**
26308  * @class Roo.htmleditor.FilterParagraph
26309  * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
26310  * like on 'push' to remove the <p> tags and replace them with line breaks.
26311  * @constructor
26312  * Run a new Paragraph Filter
26313  * @param {Object} config Configuration options
26314  */
26315
26316 Roo.htmleditor.FilterParagraph = function(cfg)
26317 {
26318     // no need to apply config.
26319     this.walk(cfg.node);
26320 }
26321
26322 Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
26323 {
26324     
26325      
26326     tag : 'P',
26327     
26328      
26329     replaceTag : function(node)
26330     {
26331         
26332         if (node.childNodes.length == 1 &&
26333             node.childNodes[0].nodeType == 3 &&
26334             node.childNodes[0].textContent.trim().length < 1
26335             ) {
26336             // remove and replace with '<BR>';
26337             node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
26338             return false; // no need to walk..
26339         }
26340         var ar = Array.from(node.childNodes);
26341         for (var i = 0; i < ar.length; i++) {
26342             node.removeChild(ar[i]);
26343             // what if we need to walk these???
26344             node.parentNode.insertBefore(ar[i], node);
26345         }
26346         // now what about this?
26347         // <p> &nbsp; </p>
26348         
26349         // double BR.
26350         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
26351         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
26352         node.parentNode.removeChild(node);
26353         
26354         return false;
26355
26356     }
26357     
26358 });/**
26359  * @class Roo.htmleditor.FilterSpan
26360  * filter span's with no attributes out..
26361  * @constructor
26362  * Run a new Span Filter
26363  * @param {Object} config Configuration options
26364  */
26365
26366 Roo.htmleditor.FilterSpan = function(cfg)
26367 {
26368     // no need to apply config.
26369     this.walk(cfg.node);
26370 }
26371
26372 Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
26373 {
26374      
26375     tag : 'SPAN',
26376      
26377  
26378     replaceTag : function(node)
26379     {
26380         if (node.attributes && node.attributes.length > 0) {
26381             return true; // walk if there are any.
26382         }
26383         Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
26384         return false;
26385      
26386     }
26387     
26388 });/**
26389  * @class Roo.htmleditor.FilterTableWidth
26390   try and remove table width data - as that frequently messes up other stuff.
26391  * 
26392  *      was cleanTableWidths.
26393  *
26394  * Quite often pasting from word etc.. results in tables with column and widths.
26395  * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
26396  *
26397  * @constructor
26398  * Run a new Table Filter
26399  * @param {Object} config Configuration options
26400  */
26401
26402 Roo.htmleditor.FilterTableWidth = function(cfg)
26403 {
26404     // no need to apply config.
26405     this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
26406     this.walk(cfg.node);
26407 }
26408
26409 Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
26410 {
26411      
26412      
26413     
26414     replaceTag: function(node) {
26415         
26416         
26417       
26418         if (node.hasAttribute('width')) {
26419             node.removeAttribute('width');
26420         }
26421         
26422          
26423         if (node.hasAttribute("style")) {
26424             // pretty basic...
26425             
26426             var styles = node.getAttribute("style").split(";");
26427             var nstyle = [];
26428             Roo.each(styles, function(s) {
26429                 if (!s.match(/:/)) {
26430                     return;
26431                 }
26432                 var kv = s.split(":");
26433                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
26434                     return;
26435                 }
26436                 // what ever is left... we allow.
26437                 nstyle.push(s);
26438             });
26439             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
26440             if (!nstyle.length) {
26441                 node.removeAttribute('style');
26442             }
26443         }
26444         
26445         return true; // continue doing children..
26446     }
26447 });/**
26448  * @class Roo.htmleditor.FilterWord
26449  * try and clean up all the mess that Word generates.
26450  * 
26451  * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
26452  
26453  * @constructor
26454  * Run a new Span Filter
26455  * @param {Object} config Configuration options
26456  */
26457
26458 Roo.htmleditor.FilterWord = function(cfg)
26459 {
26460     // no need to apply config.
26461     this.replaceDocBullets(cfg.node);
26462     
26463     this.walk(cfg.node);
26464     
26465     
26466 }
26467
26468 Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
26469 {
26470     tag: true,
26471      
26472     
26473     /**
26474      * Clean up MS wordisms...
26475      */
26476     replaceTag : function(node)
26477     {
26478          
26479         // no idea what this does - span with text, replaceds with just text.
26480         if(
26481                 node.nodeName == 'SPAN' &&
26482                 !node.hasAttributes() &&
26483                 node.childNodes.length == 1 &&
26484                 node.firstChild.nodeName == "#text"  
26485         ) {
26486             var textNode = node.firstChild;
26487             node.removeChild(textNode);
26488             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
26489                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
26490             }
26491             node.parentNode.insertBefore(textNode, node);
26492             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
26493                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
26494             }
26495             
26496             node.parentNode.removeChild(node);
26497             return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
26498         }
26499         
26500    
26501         
26502         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
26503             node.parentNode.removeChild(node);
26504             return false; // dont do chidlren
26505         }
26506         //Roo.log(node.tagName);
26507         // remove - but keep children..
26508         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
26509             //Roo.log('-- removed');
26510             while (node.childNodes.length) {
26511                 var cn = node.childNodes[0];
26512                 node.removeChild(cn);
26513                 node.parentNode.insertBefore(cn, node);
26514                 // move node to parent - and clean it..
26515                 if (cn.nodeType == 1) {
26516                     this.replaceTag(cn);
26517                 }
26518                 
26519             }
26520             node.parentNode.removeChild(node);
26521             /// no need to iterate chidlren = it's got none..
26522             //this.iterateChildren(node, this.cleanWord);
26523             return false; // no need to iterate children.
26524         }
26525         // clean styles
26526         if (node.className.length) {
26527             
26528             var cn = node.className.split(/\W+/);
26529             var cna = [];
26530             Roo.each(cn, function(cls) {
26531                 if (cls.match(/Mso[a-zA-Z]+/)) {
26532                     return;
26533                 }
26534                 cna.push(cls);
26535             });
26536             node.className = cna.length ? cna.join(' ') : '';
26537             if (!cna.length) {
26538                 node.removeAttribute("class");
26539             }
26540         }
26541         
26542         if (node.hasAttribute("lang")) {
26543             node.removeAttribute("lang");
26544         }
26545         
26546         if (node.hasAttribute("style")) {
26547             
26548             var styles = node.getAttribute("style").split(";");
26549             var nstyle = [];
26550             Roo.each(styles, function(s) {
26551                 if (!s.match(/:/)) {
26552                     return;
26553                 }
26554                 var kv = s.split(":");
26555                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
26556                     return;
26557                 }
26558                 // what ever is left... we allow.
26559                 nstyle.push(s);
26560             });
26561             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
26562             if (!nstyle.length) {
26563                 node.removeAttribute('style');
26564             }
26565         }
26566         return true; // do children
26567         
26568         
26569         
26570     },
26571     
26572     styleToObject: function(node)
26573     {
26574         var styles = node.getAttribute("style").split(";");
26575         var ret = {};
26576         Roo.each(styles, function(s) {
26577             if (!s.match(/:/)) {
26578                 return;
26579             }
26580             var kv = s.split(":");
26581              
26582             // what ever is left... we allow.
26583             ret[kv[0]] = kv[1];
26584         });
26585         return ret;
26586     },
26587     
26588     
26589     replaceDocBullets : function(doc)
26590     {
26591         var listpara = doc.getElementsByClassName('MsoListParagraph');
26592         while(listpara.length) {
26593             this.replaceDocBullet(listpara.item(0));
26594             //code
26595         }
26596     },
26597     
26598     replaceDocBullet : function(p)
26599     {
26600         // gather all the siblings.
26601         var ns = p,
26602             parent = p.parentNode,
26603             doc = parent.ownerDocument,
26604             items = []; 
26605         while (ns) {
26606             if (ns.nodeType != 1) {
26607                 ns = ns.nextSibling;
26608                 continue;
26609             }
26610             if (!ns.className.match(/MsoListParagraph/i)) {
26611                 break;
26612             }
26613             items.push(ns);
26614             ns = ns.nextSibling;
26615             
26616         }
26617         var ul = parent.ownerDocument.createElement('ul'); // what about number lists...
26618         parent.insertBefore(ul, p);
26619         var lvl = 0;
26620         var stack = [ ul ];
26621         var last_li = false;
26622         items.forEach(function(n) {
26623             parent.removeChild(n);
26624             var spans = n.getElementsByTagName('span');
26625             if (!spans.length || !n.isEqualNode(spans.item(0).parentNode)) {
26626                 return; // skip it...
26627             }
26628             
26629             var style = this.styleToObject(n);
26630             if (typeof(style['mso-list']) == 'undefined') {
26631                 return; // skip it.
26632             }
26633             n.removeChild(spans.item(0)); // remove the fake bullet.
26634             var nlvl = (style['mso-list'].split(' ')[1].replace(/level/,'') *1) - 1;
26635             if (nlvl > lvl) {
26636                 //new indent
26637                 var nul = doc.createElement('ul'); // what about number lists...
26638                 last_li.appendChild(nul);
26639                 stack[nlvl] = nul;
26640             }
26641             lvl = nlvl;
26642             
26643             var nli = stack[nlvl].appendChild(doc.createElement('li'));
26644             last_li = nli;
26645             // copy children of p into nli
26646             while(n.firstChild) {
26647                 var fc = n.firstChild;
26648                 n.removeChild(fc);
26649                 nli.appendChild(fc);
26650             }
26651              
26652             
26653         },this);
26654         
26655         
26656         
26657         
26658     }
26659     
26660     
26661     
26662 });
26663 /**
26664  * @class Roo.htmleditor.FilterStyleToTag
26665  * part of the word stuff... - certain 'styles' should be converted to tags.
26666  * eg.
26667  *   font-weight: bold -> bold
26668  *   ?? super / subscrit etc..
26669  * 
26670  * @constructor
26671 * Run a new style to tag filter.
26672 * @param {Object} config Configuration options
26673  */
26674 Roo.htmleditor.FilterStyleToTag = function(cfg)
26675 {
26676     
26677     this.tags = {
26678         B  : [ 'fontWeight' , 'bold'],
26679         I :  [ 'fontStyle' , 'italic'],
26680         //pre :  [ 'font-style' , 'italic'],
26681         // h1.. h6 ?? font-size?
26682         SUP : [ 'verticalAlign' , 'super' ],
26683         SUB : [ 'verticalAlign' , 'sub' ]
26684         
26685         
26686     };
26687     
26688     Roo.apply(this, cfg);
26689      
26690     
26691     this.walk(cfg.node);
26692     
26693     
26694     
26695 }
26696
26697
26698 Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
26699 {
26700     tag: true, // all tags
26701     
26702     tags : false,
26703     
26704     
26705     replaceTag : function(node)
26706     {
26707         
26708         
26709         if (node.getAttribute("style") === null) {
26710             return true;
26711         }
26712         var inject = [];
26713         for (var k in this.tags) {
26714             if (node.style[this.tags[k][0]] == this.tags[k][1]) {
26715                 inject.push(k);
26716                 node.style.removeProperty(this.tags[k][0]);
26717             }
26718         }
26719         if (!inject.length) {
26720             return true; 
26721         }
26722         var cn = Array.from(node.childNodes);
26723         var nn = node;
26724         Roo.each(inject, function(t) {
26725             var nc = node.ownerDocument.createElement(t);
26726             nn.appendChild(nc);
26727             nn = nc;
26728         });
26729         for(var i = 0;i < cn.length;cn++) {
26730             node.removeChild(cn[i]);
26731             nn.appendChild(cn[i]);
26732         }
26733         return true /// iterate thru
26734     }
26735     
26736 })/**
26737  * @class Roo.htmleditor.FilterLongBr
26738  * BR/BR/BR - keep a maximum of 2...
26739  * @constructor
26740  * Run a new Long BR Filter
26741  * @param {Object} config Configuration options
26742  */
26743
26744 Roo.htmleditor.FilterLongBr = function(cfg)
26745 {
26746     // no need to apply config.
26747     this.walk(cfg.node);
26748 }
26749
26750 Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
26751 {
26752     
26753      
26754     tag : 'BR',
26755     
26756      
26757     replaceTag : function(node)
26758     {
26759         
26760         var ps = node.nextSibling;
26761         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
26762             ps = ps.nextSibling;
26763         }
26764         
26765         if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
26766             node.parentNode.removeChild(node); // remove last BR inside one fo these tags
26767             return false;
26768         }
26769         
26770         if (!ps || ps.nodeType != 1) {
26771             return false;
26772         }
26773         
26774         if (!ps || ps.tagName != 'BR') {
26775            
26776             return false;
26777         }
26778         
26779         
26780         
26781         
26782         
26783         if (!node.previousSibling) {
26784             return false;
26785         }
26786         var ps = node.previousSibling;
26787         
26788         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
26789             ps = ps.previousSibling;
26790         }
26791         if (!ps || ps.nodeType != 1) {
26792             return false;
26793         }
26794         // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
26795         if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
26796             return false;
26797         }
26798         
26799         node.parentNode.removeChild(node); // remove me...
26800         
26801         return false; // no need to do children
26802
26803     }
26804     
26805 }); 
26806
26807 /**
26808  * @class Roo.htmleditor.FilterBlock
26809  * removes id / data-block and contenteditable that are associated with blocks
26810  * usage should be done on a cloned copy of the dom
26811  * @constructor
26812 * Run a new Attribute Filter { node : xxxx }}
26813 * @param {Object} config Configuration options
26814  */
26815 Roo.htmleditor.FilterBlock = function(cfg)
26816 {
26817     Roo.apply(this, cfg);
26818     var qa = cfg.node.querySelectorAll;
26819     this.removeAttributes('data-block');
26820     this.removeAttributes('contenteditable');
26821     this.removeAttributes('id');
26822     
26823 }
26824
26825 Roo.apply(Roo.htmleditor.FilterBlock.prototype,
26826 {
26827     node: true, // all tags
26828      
26829      
26830     removeAttributes : function(attr)
26831     {
26832         var ar = this.node.querySelectorAll('*[' + attr + ']');
26833         for (var i =0;i<ar.length;i++) {
26834             ar[i].removeAttribute(attr);
26835         }
26836     }
26837         
26838         
26839         
26840     
26841 });
26842 /**
26843  * @class Roo.htmleditor.KeyEnter
26844  * Handle Enter press..
26845  * @cfg {Roo.HtmlEditorCore} core the editor.
26846  * @constructor
26847  * Create a new Filter.
26848  * @param {Object} config Configuration options
26849  */
26850
26851
26852
26853
26854
26855 Roo.htmleditor.KeyEnter = function(cfg) {
26856     Roo.apply(this, cfg);
26857     // this does not actually call walk as it's really just a abstract class
26858  
26859     Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
26860 }
26861
26862 //Roo.htmleditor.KeyEnter.i = 0;
26863
26864
26865 Roo.htmleditor.KeyEnter.prototype = {
26866     
26867     core : false,
26868     
26869     keypress : function(e)
26870     {
26871         if (e.charCode != 13 && e.charCode != 10) {
26872             Roo.log([e.charCode,e]);
26873             return true;
26874         }
26875         e.preventDefault();
26876         // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
26877         var doc = this.core.doc;
26878           //add a new line
26879        
26880     
26881         var sel = this.core.getSelection();
26882         var range = sel.getRangeAt(0);
26883         var n = range.commonAncestorContainer;
26884         var pc = range.closest([ 'ol', 'ul']);
26885         var pli = range.closest('li');
26886         if (!pc || e.ctrlKey) {
26887             sel.insertNode('br', 'after'); 
26888          
26889             this.core.undoManager.addEvent();
26890             this.core.fireEditorEvent(e);
26891             return false;
26892         }
26893         
26894         // deal with <li> insetion
26895         if (pli.innerText.trim() == '' &&
26896             pli.previousSibling &&
26897             pli.previousSibling.nodeName == 'LI' &&
26898             pli.previousSibling.innerText.trim() ==  '') {
26899             pli.parentNode.removeChild(pli.previousSibling);
26900             sel.cursorAfter(pc);
26901             this.core.undoManager.addEvent();
26902             this.core.fireEditorEvent(e);
26903             return false;
26904         }
26905     
26906         var li = doc.createElement('LI');
26907         li.innerHTML = '&nbsp;';
26908         if (!pli || !pli.firstSibling) {
26909             pc.appendChild(li);
26910         } else {
26911             pli.parentNode.insertBefore(li, pli.firstSibling);
26912         }
26913         sel.cursorText (li.firstChild);
26914       
26915         this.core.undoManager.addEvent();
26916         this.core.fireEditorEvent(e);
26917
26918         return false;
26919         
26920     
26921         
26922         
26923          
26924     }
26925 };
26926      
26927 /**
26928  * @class Roo.htmleditor.Block
26929  * Base class for html editor blocks - do not use it directly .. extend it..
26930  * @cfg {DomElement} node The node to apply stuff to.
26931  * @cfg {String} friendly_name the name that appears in the context bar about this block
26932  * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
26933  
26934  * @constructor
26935  * Create a new Filter.
26936  * @param {Object} config Configuration options
26937  */
26938
26939 Roo.htmleditor.Block  = function(cfg)
26940 {
26941     // do nothing .. should not be called really.
26942 }
26943 /**
26944  * factory method to get the block from an element (using cache if necessary)
26945  * @static
26946  * @param {HtmlElement} the dom element
26947  */
26948 Roo.htmleditor.Block.factory = function(node)
26949 {
26950     var cc = Roo.htmleditor.Block.cache;
26951     var id = Roo.get(node).id;
26952     if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
26953         Roo.htmleditor.Block.cache[id].readElement(node);
26954         return Roo.htmleditor.Block.cache[id];
26955     }
26956     var db  = node.getAttribute('data-block');
26957     if (!db) {
26958         db = node.nodeName.toLowerCase().toUpperCaseFirst();
26959     }
26960     var cls = Roo.htmleditor['Block' + db];
26961     if (typeof(cls) == 'undefined') {
26962         //Roo.log(node.getAttribute('data-block'));
26963         Roo.log("OOps missing block : " + 'Block' + db);
26964         return false;
26965     }
26966     Roo.htmleditor.Block.cache[id] = new cls({ node: node });
26967     return Roo.htmleditor.Block.cache[id];  /// should trigger update element
26968 };
26969
26970 /**
26971  * initalize all Elements from content that are 'blockable'
26972  * @static
26973  * @param the body element
26974  */
26975 Roo.htmleditor.Block.initAll = function(body, type)
26976 {
26977     if (typeof(type) == 'undefined') {
26978         var ia = Roo.htmleditor.Block.initAll;
26979         ia(body,'table');
26980         ia(body,'td');
26981         ia(body,'figure');
26982         return;
26983     }
26984     Roo.each(Roo.get(body).query(type), function(e) {
26985         Roo.htmleditor.Block.factory(e);    
26986     },this);
26987 };
26988 // question goes here... do we need to clear out this cache sometimes?
26989 // or show we make it relivant to the htmleditor.
26990 Roo.htmleditor.Block.cache = {};
26991
26992 Roo.htmleditor.Block.prototype = {
26993     
26994     node : false,
26995     
26996      // used by context menu
26997     friendly_name : 'Based Block',
26998     
26999     // text for button to delete this element
27000     deleteTitle : false,
27001     
27002     context : false,
27003     /**
27004      * Update a node with values from this object
27005      * @param {DomElement} node
27006      */
27007     updateElement : function(node)
27008     {
27009         Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
27010     },
27011      /**
27012      * convert to plain HTML for calling insertAtCursor..
27013      */
27014     toHTML : function()
27015     {
27016         return Roo.DomHelper.markup(this.toObject());
27017     },
27018     /**
27019      * used by readEleemnt to extract data from a node
27020      * may need improving as it's pretty basic
27021      
27022      * @param {DomElement} node
27023      * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
27024      * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
27025      * @param {String} style the style property - eg. text-align
27026      */
27027     getVal : function(node, tag, attr, style)
27028     {
27029         var n = node;
27030         if (tag !== true && n.tagName != tag.toUpperCase()) {
27031             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
27032             // but kiss for now.
27033             n = node.getElementsByTagName(tag).item(0);
27034         }
27035         if (!n) {
27036             return '';
27037         }
27038         if (attr === false) {
27039             return n;
27040         }
27041         if (attr == 'html') {
27042             return n.innerHTML;
27043         }
27044         if (attr == 'style') {
27045             return n.style[style]; 
27046         }
27047         
27048         return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
27049             
27050     },
27051     /**
27052      * create a DomHelper friendly object - for use with 
27053      * Roo.DomHelper.markup / overwrite / etc..
27054      * (override this)
27055      */
27056     toObject : function()
27057     {
27058         return {};
27059     },
27060       /**
27061      * Read a node that has a 'data-block' property - and extract the values from it.
27062      * @param {DomElement} node - the node
27063      */
27064     readElement : function(node)
27065     {
27066         
27067     } 
27068     
27069     
27070 };
27071
27072  
27073
27074 /**
27075  * @class Roo.htmleditor.BlockFigure
27076  * Block that has an image and a figcaption
27077  * @cfg {String} image_src the url for the image
27078  * @cfg {String} align (left|right) alignment for the block default left
27079  * @cfg {String} caption the text to appear below  (and in the alt tag)
27080  * @cfg {String} caption_display (block|none) display or not the caption
27081  * @cfg {String|number} image_width the width of the image number or %?
27082  * @cfg {String|number} image_height the height of the image number or %?
27083  * 
27084  * @constructor
27085  * Create a new Filter.
27086  * @param {Object} config Configuration options
27087  */
27088
27089 Roo.htmleditor.BlockFigure = function(cfg)
27090 {
27091     if (cfg.node) {
27092         this.readElement(cfg.node);
27093         this.updateElement(cfg.node);
27094     }
27095     Roo.apply(this, cfg);
27096 }
27097 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
27098  
27099     
27100     // setable values.
27101     image_src: '',
27102     align: 'center',
27103     caption : '',
27104     caption_display : 'block',
27105     width : '100%',
27106     cls : '',
27107     href: '',
27108     video_url : '',
27109     
27110     // margin: '2%', not used
27111     
27112     text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
27113
27114     
27115     // used by context menu
27116     friendly_name : 'Image with caption',
27117     deleteTitle : "Delete Image and Caption",
27118     
27119     contextMenu : function(toolbar)
27120     {
27121         
27122         var block = function() {
27123             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
27124         };
27125         
27126         
27127         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
27128         
27129         var syncValue = toolbar.editorcore.syncValue;
27130         
27131         var fields = {};
27132         
27133         return [
27134              {
27135                 xtype : 'TextItem',
27136                 text : "Source: ",
27137                 xns : rooui.Toolbar  //Boostrap?
27138             },
27139             {
27140                 xtype : 'Button',
27141                 text: 'Change Image URL',
27142                  
27143                 listeners : {
27144                     click: function (btn, state)
27145                     {
27146                         var b = block();
27147                         
27148                         Roo.MessageBox.show({
27149                             title : "Image Source URL",
27150                             msg : "Enter the url for the image",
27151                             buttons: Roo.MessageBox.OKCANCEL,
27152                             fn: function(btn, val){
27153                                 if (btn != 'ok') {
27154                                     return;
27155                                 }
27156                                 b.image_src = val;
27157                                 b.updateElement();
27158                                 syncValue();
27159                                 toolbar.editorcore.onEditorEvent();
27160                             },
27161                             minWidth:250,
27162                             prompt:true,
27163                             //multiline: multiline,
27164                             modal : true,
27165                             value : b.image_src
27166                         });
27167                     }
27168                 },
27169                 xns : rooui.Toolbar
27170             },
27171          
27172             {
27173                 xtype : 'Button',
27174                 text: 'Change Link URL',
27175                  
27176                 listeners : {
27177                     click: function (btn, state)
27178                     {
27179                         var b = block();
27180                         
27181                         Roo.MessageBox.show({
27182                             title : "Link URL",
27183                             msg : "Enter the url for the link - leave blank to have no link",
27184                             buttons: Roo.MessageBox.OKCANCEL,
27185                             fn: function(btn, val){
27186                                 if (btn != 'ok') {
27187                                     return;
27188                                 }
27189                                 b.href = val;
27190                                 b.updateElement();
27191                                 syncValue();
27192                                 toolbar.editorcore.onEditorEvent();
27193                             },
27194                             minWidth:250,
27195                             prompt:true,
27196                             //multiline: multiline,
27197                             modal : true,
27198                             value : b.href
27199                         });
27200                     }
27201                 },
27202                 xns : rooui.Toolbar
27203             },
27204             {
27205                 xtype : 'Button',
27206                 text: 'Show Video URL',
27207                  
27208                 listeners : {
27209                     click: function (btn, state)
27210                     {
27211                         Roo.MessageBox.alert("Video URL",
27212                             block().video_url == '' ? 'This image is not linked ot a video' :
27213                                 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
27214                     }
27215                 },
27216                 xns : rooui.Toolbar
27217             },
27218             
27219             
27220             {
27221                 xtype : 'TextItem',
27222                 text : "Width: ",
27223                 xns : rooui.Toolbar  //Boostrap?
27224             },
27225             {
27226                 xtype : 'ComboBox',
27227                 allowBlank : false,
27228                 displayField : 'val',
27229                 editable : true,
27230                 listWidth : 100,
27231                 triggerAction : 'all',
27232                 typeAhead : true,
27233                 valueField : 'val',
27234                 width : 70,
27235                 name : 'width',
27236                 listeners : {
27237                     select : function (combo, r, index)
27238                     {
27239                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27240                         var b = block();
27241                         b.width = r.get('val');
27242                         b.updateElement();
27243                         syncValue();
27244                         toolbar.editorcore.onEditorEvent();
27245                     }
27246                 },
27247                 xns : rooui.form,
27248                 store : {
27249                     xtype : 'SimpleStore',
27250                     data : [
27251                         ['50%'],
27252                         ['80%'],
27253                         ['100%']
27254                     ],
27255                     fields : [ 'val'],
27256                     xns : Roo.data
27257                 }
27258             },
27259             {
27260                 xtype : 'TextItem',
27261                 text : "Align: ",
27262                 xns : rooui.Toolbar  //Boostrap?
27263             },
27264             {
27265                 xtype : 'ComboBox',
27266                 allowBlank : false,
27267                 displayField : 'val',
27268                 editable : true,
27269                 listWidth : 100,
27270                 triggerAction : 'all',
27271                 typeAhead : true,
27272                 valueField : 'val',
27273                 width : 70,
27274                 name : 'align',
27275                 listeners : {
27276                     select : function (combo, r, index)
27277                     {
27278                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27279                         var b = block();
27280                         b.align = r.get('val');
27281                         b.updateElement();
27282                         syncValue();
27283                         toolbar.editorcore.onEditorEvent();
27284                     }
27285                 },
27286                 xns : rooui.form,
27287                 store : {
27288                     xtype : 'SimpleStore',
27289                     data : [
27290                         ['left'],
27291                         ['right'],
27292                         ['center']
27293                     ],
27294                     fields : [ 'val'],
27295                     xns : Roo.data
27296                 }
27297             },
27298             
27299             
27300             {
27301                 xtype : 'Button',
27302                 text: 'Hide Caption',
27303                 name : 'caption_display',
27304                 pressed : false,
27305                 enableToggle : true,
27306                 setValue : function(v) {
27307                     // this trigger toggle.
27308                      
27309                     this.setText(v ? "Hide Caption" : "Show Caption");
27310                     this.setPressed(v != 'block');
27311                 },
27312                 listeners : {
27313                     toggle: function (btn, state)
27314                     {
27315                         var b  = block();
27316                         b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
27317                         this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
27318                         b.updateElement();
27319                         syncValue();
27320                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27321                         toolbar.editorcore.onEditorEvent();
27322                     }
27323                 },
27324                 xns : rooui.Toolbar
27325             }
27326         ];
27327         
27328     },
27329     /**
27330      * create a DomHelper friendly object - for use with
27331      * Roo.DomHelper.markup / overwrite / etc..
27332      */
27333     toObject : function()
27334     {
27335         var d = document.createElement('div');
27336         d.innerHTML = this.caption;
27337         
27338         var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
27339         
27340         var iw = this.align == 'center' ? this.width : '100%';
27341         var img =   {
27342             tag : 'img',
27343             contenteditable : 'false',
27344             src : this.image_src,
27345             alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
27346             style: {
27347                 width : iw,
27348                 maxWidth : iw + ' !important', // this is not getting rendered?
27349                 margin : m  
27350                 
27351             }
27352         };
27353         /*
27354         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
27355                     '<a href="{2}">' + 
27356                         '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
27357                     '</a>' + 
27358                 '</div>',
27359         */
27360                 
27361         if (this.href.length > 0) {
27362             img = {
27363                 tag : 'a',
27364                 href: this.href,
27365                 contenteditable : 'true',
27366                 cn : [
27367                     img
27368                 ]
27369             };
27370         }
27371         
27372         
27373         if (this.video_url.length > 0) {
27374             img = {
27375                 tag : 'div',
27376                 cls : this.cls,
27377                 frameborder : 0,
27378                 allowfullscreen : true,
27379                 width : 420,  // these are for video tricks - that we replace the outer
27380                 height : 315,
27381                 src : this.video_url,
27382                 cn : [
27383                     img
27384                 ]
27385             };
27386         }
27387         // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
27388         var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
27389         
27390   
27391         var ret =   {
27392             tag: 'figure',
27393             'data-block' : 'Figure',
27394             'data-width' : this.width, 
27395             contenteditable : 'false',
27396             
27397             style : {
27398                 display: 'block',
27399                 float :  this.align ,
27400                 maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
27401                 width : this.align == 'center' ? '100%' : this.width,
27402                 margin:  '0px',
27403                 padding: this.align == 'center' ? '0' : '0 10px' ,
27404                 textAlign : this.align   // seems to work for email..
27405                 
27406             },
27407            
27408             
27409             align : this.align,
27410             cn : [
27411                 img,
27412               
27413                 {
27414                     tag: 'figcaption',
27415                     'data-display' : this.caption_display,
27416                     style : {
27417                         textAlign : 'left',
27418                         fontSize : '16px',
27419                         lineHeight : '24px',
27420                         display : this.caption_display,
27421                         maxWidth : (this.align == 'center' ?  this.width : '100%' ) + ' !important',
27422                         margin: m,
27423                         width: this.align == 'center' ?  this.width : '100%' 
27424                     
27425                          
27426                     },
27427                     cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
27428                     cn : [
27429                         {
27430                             tag: 'div',
27431                             style  : {
27432                                 marginTop : '16px',
27433                                 textAlign : 'left'
27434                             },
27435                             align: 'left',
27436                             cn : [
27437                                 {
27438                                     // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
27439                                     tag : 'i',
27440                                     contenteditable : true,
27441                                     html : captionhtml
27442                                 }
27443                                 
27444                             ]
27445                         }
27446                         
27447                     ]
27448                     
27449                 }
27450             ]
27451         };
27452         return ret;
27453          
27454     },
27455     
27456     readElement : function(node)
27457     {
27458         // this should not really come from the link...
27459         this.video_url = this.getVal(node, 'div', 'src');
27460         this.cls = this.getVal(node, 'div', 'class');
27461         this.href = this.getVal(node, 'a', 'href');
27462         
27463         
27464         this.image_src = this.getVal(node, 'img', 'src');
27465          
27466         this.align = this.getVal(node, 'figure', 'align');
27467         var figcaption = this.getVal(node, 'figcaption', false);
27468         if (figcaption !== '') {
27469             this.caption = this.getVal(figcaption, 'i', 'html');
27470         }
27471         
27472
27473         this.caption_display = this.getVal(node, 'figcaption', 'data-display');
27474         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
27475         this.width = this.getVal(node, true, 'data-width');
27476         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
27477         
27478     },
27479     removeNode : function()
27480     {
27481         return this.node;
27482     }
27483     
27484   
27485    
27486      
27487     
27488     
27489     
27490     
27491 })
27492
27493  
27494
27495 /**
27496  * @class Roo.htmleditor.BlockTable
27497  * Block that manages a table
27498  * 
27499  * @constructor
27500  * Create a new Filter.
27501  * @param {Object} config Configuration options
27502  */
27503
27504 Roo.htmleditor.BlockTable = function(cfg)
27505 {
27506     if (cfg.node) {
27507         this.readElement(cfg.node);
27508         this.updateElement(cfg.node);
27509     }
27510     Roo.apply(this, cfg);
27511     if (!cfg.node) {
27512         this.rows = [];
27513         for(var r = 0; r < this.no_row; r++) {
27514             this.rows[r] = [];
27515             for(var c = 0; c < this.no_col; c++) {
27516                 this.rows[r][c] = this.emptyCell();
27517             }
27518         }
27519     }
27520     
27521     
27522 }
27523 Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
27524  
27525     rows : false,
27526     no_col : 1,
27527     no_row : 1,
27528     
27529     
27530     width: '100%',
27531     
27532     // used by context menu
27533     friendly_name : 'Table',
27534     deleteTitle : 'Delete Table',
27535     // context menu is drawn once..
27536     
27537     contextMenu : function(toolbar)
27538     {
27539         
27540         var block = function() {
27541             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
27542         };
27543         
27544         
27545         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
27546         
27547         var syncValue = toolbar.editorcore.syncValue;
27548         
27549         var fields = {};
27550         
27551         return [
27552             {
27553                 xtype : 'TextItem',
27554                 text : "Width: ",
27555                 xns : rooui.Toolbar  //Boostrap?
27556             },
27557             {
27558                 xtype : 'ComboBox',
27559                 allowBlank : false,
27560                 displayField : 'val',
27561                 editable : true,
27562                 listWidth : 100,
27563                 triggerAction : 'all',
27564                 typeAhead : true,
27565                 valueField : 'val',
27566                 width : 100,
27567                 name : 'width',
27568                 listeners : {
27569                     select : function (combo, r, index)
27570                     {
27571                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27572                         var b = block();
27573                         b.width = r.get('val');
27574                         b.updateElement();
27575                         syncValue();
27576                         toolbar.editorcore.onEditorEvent();
27577                     }
27578                 },
27579                 xns : rooui.form,
27580                 store : {
27581                     xtype : 'SimpleStore',
27582                     data : [
27583                         ['100%'],
27584                         ['auto']
27585                     ],
27586                     fields : [ 'val'],
27587                     xns : Roo.data
27588                 }
27589             },
27590             // -------- Cols
27591             
27592             {
27593                 xtype : 'TextItem',
27594                 text : "Columns: ",
27595                 xns : rooui.Toolbar  //Boostrap?
27596             },
27597          
27598             {
27599                 xtype : 'Button',
27600                 text: '-',
27601                 listeners : {
27602                     click : function (_self, e)
27603                     {
27604                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27605                         block().removeColumn();
27606                         syncValue();
27607                         toolbar.editorcore.onEditorEvent();
27608                     }
27609                 },
27610                 xns : rooui.Toolbar
27611             },
27612             {
27613                 xtype : 'Button',
27614                 text: '+',
27615                 listeners : {
27616                     click : function (_self, e)
27617                     {
27618                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27619                         block().addColumn();
27620                         syncValue();
27621                         toolbar.editorcore.onEditorEvent();
27622                     }
27623                 },
27624                 xns : rooui.Toolbar
27625             },
27626             // -------- ROWS
27627             {
27628                 xtype : 'TextItem',
27629                 text : "Rows: ",
27630                 xns : rooui.Toolbar  //Boostrap?
27631             },
27632          
27633             {
27634                 xtype : 'Button',
27635                 text: '-',
27636                 listeners : {
27637                     click : function (_self, e)
27638                     {
27639                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
27640                         block().removeRow();
27641                         syncValue();
27642                         toolbar.editorcore.onEditorEvent();
27643                     }
27644                 },
27645                 xns : rooui.Toolbar
27646             },
27647             {
27648                 xtype : 'Button',
27649                 text: '+',
27650                 listeners : {
27651                     click : function (_self, e)
27652                     {
27653                         block().addRow();
27654                         syncValue();
27655                         toolbar.editorcore.onEditorEvent();
27656                     }
27657                 },
27658                 xns : rooui.Toolbar
27659             },
27660             // -------- ROWS
27661             {
27662                 xtype : 'Button',
27663                 text: 'Reset Column Widths',
27664                 listeners : {
27665                     
27666                     click : function (_self, e)
27667                     {
27668                         block().resetWidths();
27669                         syncValue();
27670                         toolbar.editorcore.onEditorEvent();
27671                     }
27672                 },
27673                 xns : rooui.Toolbar
27674             } 
27675             
27676             
27677             
27678         ];
27679         
27680     },
27681     
27682     
27683   /**
27684      * create a DomHelper friendly object - for use with
27685      * Roo.DomHelper.markup / overwrite / etc..
27686      * ?? should it be called with option to hide all editing features?
27687      */
27688     toObject : function()
27689     {
27690         
27691         var ret = {
27692             tag : 'table',
27693             contenteditable : 'false', // this stops cell selection from picking the table.
27694             'data-block' : 'Table',
27695             style : {
27696                 width:  this.width,
27697                 border : 'solid 1px #000', // ??? hard coded?
27698                 'border-collapse' : 'collapse' 
27699             },
27700             cn : [
27701                 { tag : 'tbody' , cn : [] }
27702             ]
27703         };
27704         
27705         // do we have a head = not really 
27706         var ncols = 0;
27707         Roo.each(this.rows, function( row ) {
27708             var tr = {
27709                 tag: 'tr',
27710                 style : {
27711                     margin: '6px',
27712                     border : 'solid 1px #000',
27713                     textAlign : 'left' 
27714                 },
27715                 cn : [ ]
27716             };
27717             
27718             ret.cn[0].cn.push(tr);
27719             // does the row have any properties? ?? height?
27720             var nc = 0;
27721             Roo.each(row, function( cell ) {
27722                 
27723                 var td = {
27724                     tag : 'td',
27725                     contenteditable :  'true',
27726                     'data-block' : 'Td',
27727                     html : cell.html,
27728                     style : cell.style
27729                 };
27730                 if (cell.colspan > 1) {
27731                     td.colspan = cell.colspan ;
27732                     nc += cell.colspan;
27733                 } else {
27734                     nc++;
27735                 }
27736                 if (cell.rowspan > 1) {
27737                     td.rowspan = cell.rowspan ;
27738                 }
27739                 
27740                 
27741                 // widths ?
27742                 tr.cn.push(td);
27743                     
27744                 
27745             }, this);
27746             ncols = Math.max(nc, ncols);
27747             
27748             
27749         }, this);
27750         // add the header row..
27751         
27752         ncols++;
27753          
27754         
27755         return ret;
27756          
27757     },
27758     
27759     readElement : function(node)
27760     {
27761         node  = node ? node : this.node ;
27762         this.width = this.getVal(node, true, 'style', 'width') || '100%';
27763         
27764         this.rows = [];
27765         this.no_row = 0;
27766         var trs = Array.from(node.rows);
27767         trs.forEach(function(tr) {
27768             var row =  [];
27769             this.rows.push(row);
27770             
27771             this.no_row++;
27772             var no_column = 0;
27773             Array.from(tr.cells).forEach(function(td) {
27774                 
27775                 var add = {
27776                     colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
27777                     rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
27778                     style : td.hasAttribute('style') ? td.getAttribute('style') : '',
27779                     html : td.innerHTML
27780                 };
27781                 no_column += add.colspan;
27782                      
27783                 
27784                 row.push(add);
27785                 
27786                 
27787             },this);
27788             this.no_col = Math.max(this.no_col, no_column);
27789             
27790             
27791         },this);
27792         
27793         
27794     },
27795     normalizeRows: function()
27796     {
27797         var ret= [];
27798         var rid = -1;
27799         this.rows.forEach(function(row) {
27800             rid++;
27801             ret[rid] = [];
27802             row = this.normalizeRow(row);
27803             var cid = 0;
27804             row.forEach(function(c) {
27805                 while (typeof(ret[rid][cid]) != 'undefined') {
27806                     cid++;
27807                 }
27808                 if (typeof(ret[rid]) == 'undefined') {
27809                     ret[rid] = [];
27810                 }
27811                 ret[rid][cid] = c;
27812                 c.row = rid;
27813                 c.col = cid;
27814                 if (c.rowspan < 2) {
27815                     return;
27816                 }
27817                 
27818                 for(var i = 1 ;i < c.rowspan; i++) {
27819                     if (typeof(ret[rid+i]) == 'undefined') {
27820                         ret[rid+i] = [];
27821                     }
27822                     ret[rid+i][cid] = c;
27823                 }
27824             });
27825         }, this);
27826         return ret;
27827     
27828     },
27829     
27830     normalizeRow: function(row)
27831     {
27832         var ret= [];
27833         row.forEach(function(c) {
27834             if (c.colspan < 2) {
27835                 ret.push(c);
27836                 return;
27837             }
27838             for(var i =0 ;i < c.colspan; i++) {
27839                 ret.push(c);
27840             }
27841         });
27842         return ret;
27843     
27844     },
27845     
27846     deleteColumn : function(sel)
27847     {
27848         if (!sel || sel.type != 'col') {
27849             return;
27850         }
27851         if (this.no_col < 2) {
27852             return;
27853         }
27854         
27855         this.rows.forEach(function(row) {
27856             var cols = this.normalizeRow(row);
27857             var col = cols[sel.col];
27858             if (col.colspan > 1) {
27859                 col.colspan --;
27860             } else {
27861                 row.remove(col);
27862             }
27863             
27864         }, this);
27865         this.no_col--;
27866         
27867     },
27868     removeColumn : function()
27869     {
27870         this.deleteColumn({
27871             type: 'col',
27872             col : this.no_col-1
27873         });
27874         this.updateElement();
27875     },
27876     
27877      
27878     addColumn : function()
27879     {
27880         
27881         this.rows.forEach(function(row) {
27882             row.push(this.emptyCell());
27883            
27884         }, this);
27885         this.updateElement();
27886     },
27887     
27888     deleteRow : function(sel)
27889     {
27890         if (!sel || sel.type != 'row') {
27891             return;
27892         }
27893         
27894         if (this.no_row < 2) {
27895             return;
27896         }
27897         
27898         var rows = this.normalizeRows();
27899         
27900         
27901         rows[sel.row].forEach(function(col) {
27902             if (col.rowspan > 1) {
27903                 col.rowspan--;
27904             } else {
27905                 col.remove = 1; // flage it as removed.
27906             }
27907             
27908         }, this);
27909         var newrows = [];
27910         this.rows.forEach(function(row) {
27911             newrow = [];
27912             row.forEach(function(c) {
27913                 if (typeof(c.remove) == 'undefined') {
27914                     newrow.push(c);
27915                 }
27916                 
27917             });
27918             if (newrow.length > 0) {
27919                 newrows.push(row);
27920             }
27921         });
27922         this.rows =  newrows;
27923         
27924         
27925         
27926         this.no_row--;
27927         this.updateElement();
27928         
27929     },
27930     removeRow : function()
27931     {
27932         this.deleteRow({
27933             type: 'row',
27934             row : this.no_row-1
27935         });
27936         
27937     },
27938     
27939      
27940     addRow : function()
27941     {
27942         
27943         var row = [];
27944         for (var i = 0; i < this.no_col; i++ ) {
27945             
27946             row.push(this.emptyCell());
27947            
27948         }
27949         this.rows.push(row);
27950         this.updateElement();
27951         
27952     },
27953      
27954     // the default cell object... at present...
27955     emptyCell : function() {
27956         return (new Roo.htmleditor.BlockTd({})).toObject();
27957         
27958      
27959     },
27960     
27961     removeNode : function()
27962     {
27963         return this.node;
27964     },
27965     
27966     
27967     
27968     resetWidths : function()
27969     {
27970         Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
27971             var nn = Roo.htmleditor.Block.factory(n);
27972             nn.width = '';
27973             nn.updateElement(n);
27974         });
27975     }
27976     
27977     
27978     
27979     
27980 })
27981
27982 /**
27983  *
27984  * editing a TD?
27985  *
27986  * since selections really work on the table cell, then editing really should work from there
27987  *
27988  * The original plan was to support merging etc... - but that may not be needed yet..
27989  *
27990  * So this simple version will support:
27991  *   add/remove cols
27992  *   adjust the width +/-
27993  *   reset the width...
27994  *   
27995  *
27996  */
27997
27998
27999  
28000
28001 /**
28002  * @class Roo.htmleditor.BlockTable
28003  * Block that manages a table
28004  * 
28005  * @constructor
28006  * Create a new Filter.
28007  * @param {Object} config Configuration options
28008  */
28009
28010 Roo.htmleditor.BlockTd = function(cfg)
28011 {
28012     if (cfg.node) {
28013         this.readElement(cfg.node);
28014         this.updateElement(cfg.node);
28015     }
28016     Roo.apply(this, cfg);
28017      
28018     
28019     
28020 }
28021 Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
28022  
28023     node : false,
28024     
28025     width: '',
28026     textAlign : 'left',
28027     valign : 'top',
28028     
28029     colspan : 1,
28030     rowspan : 1,
28031     
28032     
28033     // used by context menu
28034     friendly_name : 'Table Cell',
28035     deleteTitle : false, // use our customer delete
28036     
28037     // context menu is drawn once..
28038     
28039     contextMenu : function(toolbar)
28040     {
28041         
28042         var cell = function() {
28043             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
28044         };
28045         
28046         var table = function() {
28047             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
28048         };
28049         
28050         var lr = false;
28051         var saveSel = function()
28052         {
28053             lr = toolbar.editorcore.getSelection().getRangeAt(0);
28054         }
28055         var restoreSel = function()
28056         {
28057             if (lr) {
28058                 (function() {
28059                     toolbar.editorcore.focus();
28060                     var cr = toolbar.editorcore.getSelection();
28061                     cr.removeAllRanges();
28062                     cr.addRange(lr);
28063                     toolbar.editorcore.onEditorEvent();
28064                 }).defer(10, this);
28065                 
28066                 
28067             }
28068         }
28069         
28070         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
28071         
28072         var syncValue = toolbar.editorcore.syncValue;
28073         
28074         var fields = {};
28075         
28076         return [
28077             {
28078                 xtype : 'Button',
28079                 text : 'Edit Table',
28080                 listeners : {
28081                     click : function() {
28082                         var t = toolbar.tb.selectedNode.closest('table');
28083                         toolbar.editorcore.selectNode(t);
28084                         toolbar.editorcore.onEditorEvent();                        
28085                     }
28086                 }
28087                 
28088             },
28089               
28090            
28091              
28092             {
28093                 xtype : 'TextItem',
28094                 text : "Column Width: ",
28095                  xns : rooui.Toolbar 
28096                
28097             },
28098             {
28099                 xtype : 'Button',
28100                 text: '-',
28101                 listeners : {
28102                     click : function (_self, e)
28103                     {
28104                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28105                         cell().shrinkColumn();
28106                         syncValue();
28107                          toolbar.editorcore.onEditorEvent();
28108                     }
28109                 },
28110                 xns : rooui.Toolbar
28111             },
28112             {
28113                 xtype : 'Button',
28114                 text: '+',
28115                 listeners : {
28116                     click : function (_self, e)
28117                     {
28118                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28119                         cell().growColumn();
28120                         syncValue();
28121                         toolbar.editorcore.onEditorEvent();
28122                     }
28123                 },
28124                 xns : rooui.Toolbar
28125             },
28126             
28127             {
28128                 xtype : 'TextItem',
28129                 text : "Vertical Align: ",
28130                 xns : rooui.Toolbar  //Boostrap?
28131             },
28132             {
28133                 xtype : 'ComboBox',
28134                 allowBlank : false,
28135                 displayField : 'val',
28136                 editable : true,
28137                 listWidth : 100,
28138                 triggerAction : 'all',
28139                 typeAhead : true,
28140                 valueField : 'val',
28141                 width : 100,
28142                 name : 'valign',
28143                 listeners : {
28144                     select : function (combo, r, index)
28145                     {
28146                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28147                         var b = cell();
28148                         b.valign = r.get('val');
28149                         b.updateElement();
28150                         syncValue();
28151                         toolbar.editorcore.onEditorEvent();
28152                     }
28153                 },
28154                 xns : rooui.form,
28155                 store : {
28156                     xtype : 'SimpleStore',
28157                     data : [
28158                         ['top'],
28159                         ['middle'],
28160                         ['bottom'] // there are afew more... 
28161                     ],
28162                     fields : [ 'val'],
28163                     xns : Roo.data
28164                 }
28165             },
28166             
28167             {
28168                 xtype : 'TextItem',
28169                 text : "Merge Cells: ",
28170                  xns : rooui.Toolbar 
28171                
28172             },
28173             
28174             
28175             {
28176                 xtype : 'Button',
28177                 text: 'Right',
28178                 listeners : {
28179                     click : function (_self, e)
28180                     {
28181                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28182                         cell().mergeRight();
28183                         //block().growColumn();
28184                         syncValue();
28185                         toolbar.editorcore.onEditorEvent();
28186                     }
28187                 },
28188                 xns : rooui.Toolbar
28189             },
28190              
28191             {
28192                 xtype : 'Button',
28193                 text: 'Below',
28194                 listeners : {
28195                     click : function (_self, e)
28196                     {
28197                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28198                         cell().mergeBelow();
28199                         //block().growColumn();
28200                         syncValue();
28201                         toolbar.editorcore.onEditorEvent();
28202                     }
28203                 },
28204                 xns : rooui.Toolbar
28205             },
28206             {
28207                 xtype : 'TextItem',
28208                 text : "| ",
28209                  xns : rooui.Toolbar 
28210                
28211             },
28212             
28213             {
28214                 xtype : 'Button',
28215                 text: 'Split',
28216                 listeners : {
28217                     click : function (_self, e)
28218                     {
28219                         //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28220                         cell().split();
28221                         syncValue();
28222                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
28223                         toolbar.editorcore.onEditorEvent();
28224                                              
28225                     }
28226                 },
28227                 xns : rooui.Toolbar
28228             },
28229             {
28230                 xtype : 'Fill',
28231                 xns : rooui.Toolbar 
28232                
28233             },
28234         
28235           
28236             {
28237                 xtype : 'Button',
28238                 text: 'Delete',
28239                  
28240                 xns : rooui.Toolbar,
28241                 menu : {
28242                     xtype : 'Menu',
28243                     xns : rooui.menu,
28244                     items : [
28245                         {
28246                             xtype : 'Item',
28247                             html: 'Column',
28248                             listeners : {
28249                                 click : function (_self, e)
28250                                 {
28251                                     var t = table();
28252                                     
28253                                     cell().deleteColumn();
28254                                     syncValue();
28255                                     toolbar.editorcore.selectNode(t.node);
28256                                     toolbar.editorcore.onEditorEvent();   
28257                                 }
28258                             },
28259                             xns : rooui.menu
28260                         },
28261                         {
28262                             xtype : 'Item',
28263                             html: 'Row',
28264                             listeners : {
28265                                 click : function (_self, e)
28266                                 {
28267                                     var t = table();
28268                                     cell().deleteRow();
28269                                     syncValue();
28270                                     
28271                                     toolbar.editorcore.selectNode(t.node);
28272                                     toolbar.editorcore.onEditorEvent();   
28273                                                          
28274                                 }
28275                             },
28276                             xns : rooui.menu
28277                         },
28278                        {
28279                             xtype : 'Separator',
28280                             xns : rooui.menu
28281                         },
28282                         {
28283                             xtype : 'Item',
28284                             html: 'Table',
28285                             listeners : {
28286                                 click : function (_self, e)
28287                                 {
28288                                     var t = table();
28289                                     var nn = t.node.nextSibling || t.node.previousSibling;
28290                                     t.node.parentNode.removeChild(t.node);
28291                                     if (nn) { 
28292                                         toolbar.editorcore.selectNode(nn, true);
28293                                     }
28294                                     toolbar.editorcore.onEditorEvent();   
28295                                                          
28296                                 }
28297                             },
28298                             xns : rooui.menu
28299                         }
28300                     ]
28301                 }
28302             }
28303             
28304             // align... << fixme
28305             
28306         ];
28307         
28308     },
28309     
28310     
28311   /**
28312      * create a DomHelper friendly object - for use with
28313      * Roo.DomHelper.markup / overwrite / etc..
28314      * ?? should it be called with option to hide all editing features?
28315      */
28316  /**
28317      * create a DomHelper friendly object - for use with
28318      * Roo.DomHelper.markup / overwrite / etc..
28319      * ?? should it be called with option to hide all editing features?
28320      */
28321     toObject : function()
28322     {
28323         
28324         var ret = {
28325             tag : 'td',
28326             contenteditable : 'true', // this stops cell selection from picking the table.
28327             'data-block' : 'Td',
28328             valign : this.valign,
28329             style : {  
28330                 'text-align' :  this.textAlign,
28331                 border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
28332                 'border-collapse' : 'collapse',
28333                 padding : '6px', // 8 for desktop / 4 for mobile
28334                 'vertical-align': this.valign
28335             },
28336             html : this.html
28337         };
28338         if (this.width != '') {
28339             ret.width = this.width;
28340             ret.style.width = this.width;
28341         }
28342         
28343         
28344         if (this.colspan > 1) {
28345             ret.colspan = this.colspan ;
28346         } 
28347         if (this.rowspan > 1) {
28348             ret.rowspan = this.rowspan ;
28349         }
28350         
28351            
28352         
28353         return ret;
28354          
28355     },
28356     
28357     readElement : function(node)
28358     {
28359         node  = node ? node : this.node ;
28360         this.width = node.style.width;
28361         this.colspan = Math.max(1,1*node.getAttribute('colspan'));
28362         this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
28363         this.html = node.innerHTML;
28364         
28365         
28366     },
28367      
28368     // the default cell object... at present...
28369     emptyCell : function() {
28370         return {
28371             colspan :  1,
28372             rowspan :  1,
28373             textAlign : 'left',
28374             html : "&nbsp;" // is this going to be editable now?
28375         };
28376      
28377     },
28378     
28379     removeNode : function()
28380     {
28381         return this.node.closest('table');
28382          
28383     },
28384     
28385     cellData : false,
28386     
28387     colWidths : false,
28388     
28389     toTableArray  : function()
28390     {
28391         var ret = [];
28392         var tab = this.node.closest('tr').closest('table');
28393         Array.from(tab.rows).forEach(function(r, ri){
28394             ret[ri] = [];
28395         });
28396         var rn = 0;
28397         this.colWidths = [];
28398         var all_auto = true;
28399         Array.from(tab.rows).forEach(function(r, ri){
28400             
28401             var cn = 0;
28402             Array.from(r.cells).forEach(function(ce, ci){
28403                 var c =  {
28404                     cell : ce,
28405                     row : rn,
28406                     col: cn,
28407                     colspan : ce.colSpan,
28408                     rowspan : ce.rowSpan
28409                 };
28410                 if (ce.isEqualNode(this.node)) {
28411                     this.cellData = c;
28412                 }
28413                 // if we have been filled up by a row?
28414                 if (typeof(ret[rn][cn]) != 'undefined') {
28415                     while(typeof(ret[rn][cn]) != 'undefined') {
28416                         cn++;
28417                     }
28418                     c.col = cn;
28419                 }
28420                 
28421                 if (typeof(this.colWidths[cn]) == 'undefined') {
28422                     this.colWidths[cn] =   ce.style.width;
28423                     if (this.colWidths[cn] != '') {
28424                         all_auto = false;
28425                     }
28426                 }
28427                 
28428                 
28429                 if (c.colspan < 2 && c.rowspan < 2 ) {
28430                     ret[rn][cn] = c;
28431                     cn++;
28432                     return;
28433                 }
28434                 for(var j = 0; j < c.rowspan; j++) {
28435                     if (typeof(ret[rn+j]) == 'undefined') {
28436                         continue; // we have a problem..
28437                     }
28438                     ret[rn+j][cn] = c;
28439                     for(var i = 0; i < c.colspan; i++) {
28440                         ret[rn+j][cn+i] = c;
28441                     }
28442                 }
28443                 
28444                 cn += c.colspan;
28445             }, this);
28446             rn++;
28447         }, this);
28448         
28449         // initalize widths.?
28450         // either all widths or no widths..
28451         if (all_auto) {
28452             this.colWidths[0] = false; // no widths flag.
28453         }
28454         
28455         
28456         return ret;
28457         
28458     },
28459     
28460     
28461     
28462     
28463     mergeRight: function()
28464     {
28465          
28466         // get the contents of the next cell along..
28467         var tr = this.node.closest('tr');
28468         var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
28469         if (i >= tr.childNodes.length - 1) {
28470             return; // no cells on right to merge with.
28471         }
28472         var table = this.toTableArray();
28473         
28474         if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
28475             return; // nothing right?
28476         }
28477         var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
28478         // right cell - must be same rowspan and on the same row.
28479         if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
28480             return; // right hand side is not same rowspan.
28481         }
28482         
28483         
28484         
28485         this.node.innerHTML += ' ' + rc.cell.innerHTML;
28486         tr.removeChild(rc.cell);
28487         this.colspan += rc.colspan;
28488         this.node.setAttribute('colspan', this.colspan);
28489
28490     },
28491     
28492     
28493     mergeBelow : function()
28494     {
28495         var table = this.toTableArray();
28496         if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
28497             return; // no row below
28498         }
28499         if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
28500             return; // nothing right?
28501         }
28502         var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
28503         
28504         if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
28505             return; // right hand side is not same rowspan.
28506         }
28507         this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
28508         rc.cell.parentNode.removeChild(rc.cell);
28509         this.rowspan += rc.rowspan;
28510         this.node.setAttribute('rowspan', this.rowspan);
28511     },
28512     
28513     split: function()
28514     {
28515         if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
28516             return;
28517         }
28518         var table = this.toTableArray();
28519         var cd = this.cellData;
28520         this.rowspan = 1;
28521         this.colspan = 1;
28522         
28523         for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
28524             
28525             
28526             
28527             for(var c = cd.col; c < cd.col + cd.colspan; c++) {
28528                 if (r == cd.row && c == cd.col) {
28529                     this.node.removeAttribute('rowspan');
28530                     this.node.removeAttribute('colspan');
28531                     continue;
28532                 }
28533                  
28534                 var ntd = this.node.cloneNode(); // which col/row should be 0..
28535                 ntd.removeAttribute('id'); //
28536                 //ntd.style.width  = '';
28537                 ntd.innerHTML = '';
28538                 table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
28539             }
28540             
28541         }
28542         this.redrawAllCells(table);
28543         
28544          
28545         
28546     },
28547     
28548     
28549     
28550     redrawAllCells: function(table)
28551     {
28552         
28553          
28554         var tab = this.node.closest('tr').closest('table');
28555         var ctr = tab.rows[0].parentNode;
28556         Array.from(tab.rows).forEach(function(r, ri){
28557             
28558             Array.from(r.cells).forEach(function(ce, ci){
28559                 ce.parentNode.removeChild(ce);
28560             });
28561             r.parentNode.removeChild(r);
28562         });
28563         for(var r = 0 ; r < table.length; r++) {
28564             var re = tab.rows[r];
28565             
28566             var re = tab.ownerDocument.createElement('tr');
28567             ctr.appendChild(re);
28568             for(var c = 0 ; c < table[r].length; c++) {
28569                 if (table[r][c].cell === false) {
28570                     continue;
28571                 }
28572                 
28573                 re.appendChild(table[r][c].cell);
28574                  
28575                 table[r][c].cell = false;
28576             }
28577         }
28578         
28579     },
28580     updateWidths : function(table)
28581     {
28582         for(var r = 0 ; r < table.length; r++) {
28583            
28584             for(var c = 0 ; c < table[r].length; c++) {
28585                 if (table[r][c].cell === false) {
28586                     continue;
28587                 }
28588                 
28589                 if (this.colWidths[0] != false && table[r][c].colspan < 2) {
28590                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
28591                     el.width = Math.floor(this.colWidths[c])  +'%';
28592                     el.updateElement(el.node);
28593                 }
28594                 table[r][c].cell = false; // done
28595             }
28596         }
28597     },
28598     normalizeWidths : function(table)
28599     {
28600     
28601         if (this.colWidths[0] === false) {
28602             var nw = 100.0 / this.colWidths.length;
28603             this.colWidths.forEach(function(w,i) {
28604                 this.colWidths[i] = nw;
28605             },this);
28606             return;
28607         }
28608     
28609         var t = 0, missing = [];
28610         
28611         this.colWidths.forEach(function(w,i) {
28612             //if you mix % and
28613             this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
28614             var add =  this.colWidths[i];
28615             if (add > 0) {
28616                 t+=add;
28617                 return;
28618             }
28619             missing.push(i);
28620             
28621             
28622         },this);
28623         var nc = this.colWidths.length;
28624         if (missing.length) {
28625             var mult = (nc - missing.length) / (1.0 * nc);
28626             var t = mult * t;
28627             var ew = (100 -t) / (1.0 * missing.length);
28628             this.colWidths.forEach(function(w,i) {
28629                 if (w > 0) {
28630                     this.colWidths[i] = w * mult;
28631                     return;
28632                 }
28633                 
28634                 this.colWidths[i] = ew;
28635             }, this);
28636             // have to make up numbers..
28637              
28638         }
28639         // now we should have all the widths..
28640         
28641     
28642     },
28643     
28644     shrinkColumn : function()
28645     {
28646         var table = this.toTableArray();
28647         this.normalizeWidths(table);
28648         var col = this.cellData.col;
28649         var nw = this.colWidths[col] * 0.8;
28650         if (nw < 5) {
28651             return;
28652         }
28653         var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
28654         this.colWidths.forEach(function(w,i) {
28655             if (i == col) {
28656                  this.colWidths[i] = nw;
28657                 return;
28658             }
28659             this.colWidths[i] += otherAdd
28660         }, this);
28661         this.updateWidths(table);
28662          
28663     },
28664     growColumn : function()
28665     {
28666         var table = this.toTableArray();
28667         this.normalizeWidths(table);
28668         var col = this.cellData.col;
28669         var nw = this.colWidths[col] * 1.2;
28670         if (nw > 90) {
28671             return;
28672         }
28673         var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
28674         this.colWidths.forEach(function(w,i) {
28675             if (i == col) {
28676                 this.colWidths[i] = nw;
28677                 return;
28678             }
28679             this.colWidths[i] -= otherSub
28680         }, this);
28681         this.updateWidths(table);
28682          
28683     },
28684     deleteRow : function()
28685     {
28686         // delete this rows 'tr'
28687         // if any of the cells in this row have a rowspan > 1 && row!= this row..
28688         // then reduce the rowspan.
28689         var table = this.toTableArray();
28690         // this.cellData.row;
28691         for (var i =0;i< table[this.cellData.row].length ; i++) {
28692             var c = table[this.cellData.row][i];
28693             if (c.row != this.cellData.row) {
28694                 
28695                 c.rowspan--;
28696                 c.cell.setAttribute('rowspan', c.rowspan);
28697                 continue;
28698             }
28699             if (c.rowspan > 1) {
28700                 c.rowspan--;
28701                 c.cell.setAttribute('rowspan', c.rowspan);
28702             }
28703         }
28704         table.splice(this.cellData.row,1);
28705         this.redrawAllCells(table);
28706         
28707     },
28708     deleteColumn : function()
28709     {
28710         var table = this.toTableArray();
28711         
28712         for (var i =0;i< table.length ; i++) {
28713             var c = table[i][this.cellData.col];
28714             if (c.col != this.cellData.col) {
28715                 table[i][this.cellData.col].colspan--;
28716             } else if (c.colspan > 1) {
28717                 c.colspan--;
28718                 c.cell.setAttribute('colspan', c.colspan);
28719             }
28720             table[i].splice(this.cellData.col,1);
28721         }
28722         
28723         this.redrawAllCells(table);
28724     }
28725     
28726     
28727     
28728     
28729 })
28730
28731 //<script type="text/javascript">
28732
28733 /*
28734  * Based  Ext JS Library 1.1.1
28735  * Copyright(c) 2006-2007, Ext JS, LLC.
28736  * LGPL
28737  *
28738  */
28739  
28740 /**
28741  * @class Roo.HtmlEditorCore
28742  * @extends Roo.Component
28743  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
28744  *
28745  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
28746  */
28747
28748 Roo.HtmlEditorCore = function(config){
28749     
28750     
28751     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
28752     
28753     
28754     this.addEvents({
28755         /**
28756          * @event initialize
28757          * Fires when the editor is fully initialized (including the iframe)
28758          * @param {Roo.HtmlEditorCore} this
28759          */
28760         initialize: true,
28761         /**
28762          * @event activate
28763          * Fires when the editor is first receives the focus. Any insertion must wait
28764          * until after this event.
28765          * @param {Roo.HtmlEditorCore} this
28766          */
28767         activate: true,
28768          /**
28769          * @event beforesync
28770          * Fires before the textarea is updated with content from the editor iframe. Return false
28771          * to cancel the sync.
28772          * @param {Roo.HtmlEditorCore} this
28773          * @param {String} html
28774          */
28775         beforesync: true,
28776          /**
28777          * @event beforepush
28778          * Fires before the iframe editor is updated with content from the textarea. Return false
28779          * to cancel the push.
28780          * @param {Roo.HtmlEditorCore} this
28781          * @param {String} html
28782          */
28783         beforepush: true,
28784          /**
28785          * @event sync
28786          * Fires when the textarea is updated with content from the editor iframe.
28787          * @param {Roo.HtmlEditorCore} this
28788          * @param {String} html
28789          */
28790         sync: true,
28791          /**
28792          * @event push
28793          * Fires when the iframe editor is updated with content from the textarea.
28794          * @param {Roo.HtmlEditorCore} this
28795          * @param {String} html
28796          */
28797         push: true,
28798         
28799         /**
28800          * @event editorevent
28801          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
28802          * @param {Roo.HtmlEditorCore} this
28803          */
28804         editorevent: true 
28805          
28806         
28807     });
28808     
28809     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
28810     
28811     // defaults : white / black...
28812     this.applyBlacklists();
28813     
28814     
28815     
28816 };
28817
28818
28819 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
28820
28821
28822      /**
28823      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
28824      */
28825     
28826     owner : false,
28827     
28828      /**
28829      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
28830      *                        Roo.resizable.
28831      */
28832     resizable : false,
28833      /**
28834      * @cfg {Number} height (in pixels)
28835      */   
28836     height: 300,
28837    /**
28838      * @cfg {Number} width (in pixels)
28839      */   
28840     width: 500,
28841      /**
28842      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
28843      *         if you are doing an email editor, this probably needs disabling, it's designed
28844      */
28845     autoClean: true,
28846     
28847     /**
28848      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
28849      */
28850     enableBlocks : true,
28851     /**
28852      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
28853      * 
28854      */
28855     stylesheets: false,
28856      /**
28857      * @cfg {String} language default en - language of text (usefull for rtl languages)
28858      * 
28859      */
28860     language: 'en',
28861     
28862     /**
28863      * @cfg {boolean} allowComments - default false - allow comments in HTML source
28864      *          - by default they are stripped - if you are editing email you may need this.
28865      */
28866     allowComments: false,
28867     // id of frame..
28868     frameId: false,
28869     
28870     // private properties
28871     validationEvent : false,
28872     deferHeight: true,
28873     initialized : false,
28874     activated : false,
28875     sourceEditMode : false,
28876     onFocus : Roo.emptyFn,
28877     iframePad:3,
28878     hideMode:'offsets',
28879     
28880     clearUp: true,
28881     
28882     // blacklist + whitelisted elements..
28883     black: false,
28884     white: false,
28885      
28886     bodyCls : '',
28887
28888     
28889     undoManager : false,
28890     /**
28891      * Protected method that will not generally be called directly. It
28892      * is called when the editor initializes the iframe with HTML contents. Override this method if you
28893      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
28894      */
28895     getDocMarkup : function(){
28896         // body styles..
28897         var st = '';
28898         
28899         // inherit styels from page...?? 
28900         if (this.stylesheets === false) {
28901             
28902             Roo.get(document.head).select('style').each(function(node) {
28903                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
28904             });
28905             
28906             Roo.get(document.head).select('link').each(function(node) { 
28907                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
28908             });
28909             
28910         } else if (!this.stylesheets.length) {
28911                 // simple..
28912                 st = '<style type="text/css">' +
28913                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
28914                    '</style>';
28915         } else {
28916             for (var i in this.stylesheets) {
28917                 if (typeof(this.stylesheets[i]) != 'string') {
28918                     continue;
28919                 }
28920                 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
28921             }
28922             
28923         }
28924         
28925         st +=  '<style type="text/css">' +
28926             'IMG { cursor: pointer } ' +
28927         '</style>';
28928         
28929         st += '<meta name="google" content="notranslate">';
28930         
28931         var cls = 'notranslate roo-htmleditor-body';
28932         
28933         if(this.bodyCls.length){
28934             cls += ' ' + this.bodyCls;
28935         }
28936         
28937         return '<html  class="notranslate" translate="no"><head>' + st  +
28938             //<style type="text/css">' +
28939             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
28940             //'</style>' +
28941             ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
28942     },
28943
28944     // private
28945     onRender : function(ct, position)
28946     {
28947         var _t = this;
28948         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
28949         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
28950         
28951         
28952         this.el.dom.style.border = '0 none';
28953         this.el.dom.setAttribute('tabIndex', -1);
28954         this.el.addClass('x-hidden hide');
28955         
28956         
28957         
28958         if(Roo.isIE){ // fix IE 1px bogus margin
28959             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
28960         }
28961        
28962         
28963         this.frameId = Roo.id();
28964         
28965          
28966         
28967         var iframe = this.owner.wrap.createChild({
28968             tag: 'iframe',
28969             cls: 'form-control', // bootstrap..
28970             id: this.frameId,
28971             name: this.frameId,
28972             frameBorder : 'no',
28973             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
28974         }, this.el
28975         );
28976         
28977         
28978         this.iframe = iframe.dom;
28979
28980         this.assignDocWin();
28981         
28982         this.doc.designMode = 'on';
28983        
28984         this.doc.open();
28985         this.doc.write(this.getDocMarkup());
28986         this.doc.close();
28987
28988         
28989         var task = { // must defer to wait for browser to be ready
28990             run : function(){
28991                 //console.log("run task?" + this.doc.readyState);
28992                 this.assignDocWin();
28993                 if(this.doc.body || this.doc.readyState == 'complete'){
28994                     try {
28995                         this.doc.designMode="on";
28996                         
28997                     } catch (e) {
28998                         return;
28999                     }
29000                     Roo.TaskMgr.stop(task);
29001                     this.initEditor.defer(10, this);
29002                 }
29003             },
29004             interval : 10,
29005             duration: 10000,
29006             scope: this
29007         };
29008         Roo.TaskMgr.start(task);
29009
29010     },
29011
29012     // private
29013     onResize : function(w, h)
29014     {
29015          Roo.log('resize: ' +w + ',' + h );
29016         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
29017         if(!this.iframe){
29018             return;
29019         }
29020         if(typeof w == 'number'){
29021             
29022             this.iframe.style.width = w + 'px';
29023         }
29024         if(typeof h == 'number'){
29025             
29026             this.iframe.style.height = h + 'px';
29027             if(this.doc){
29028                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
29029             }
29030         }
29031         
29032     },
29033
29034     /**
29035      * Toggles the editor between standard and source edit mode.
29036      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
29037      */
29038     toggleSourceEdit : function(sourceEditMode){
29039         
29040         this.sourceEditMode = sourceEditMode === true;
29041         
29042         if(this.sourceEditMode){
29043  
29044             Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
29045             
29046         }else{
29047             Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
29048             //this.iframe.className = '';
29049             this.deferFocus();
29050         }
29051         //this.setSize(this.owner.wrap.getSize());
29052         //this.fireEvent('editmodechange', this, this.sourceEditMode);
29053     },
29054
29055     
29056   
29057
29058     /**
29059      * Protected method that will not generally be called directly. If you need/want
29060      * custom HTML cleanup, this is the method you should override.
29061      * @param {String} html The HTML to be cleaned
29062      * return {String} The cleaned HTML
29063      */
29064     cleanHtml : function(html)
29065     {
29066         html = String(html);
29067         if(html.length > 5){
29068             if(Roo.isSafari){ // strip safari nonsense
29069                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
29070             }
29071         }
29072         if(html == '&nbsp;'){
29073             html = '';
29074         }
29075         return html;
29076     },
29077
29078     /**
29079      * HTML Editor -> Textarea
29080      * Protected method that will not generally be called directly. Syncs the contents
29081      * of the editor iframe with the textarea.
29082      */
29083     syncValue : function()
29084     {
29085         //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
29086         if(this.initialized){
29087             
29088             if (this.undoManager) {
29089                 this.undoManager.addEvent();
29090             }
29091
29092             
29093             var bd = (this.doc.body || this.doc.documentElement);
29094            
29095             
29096             var sel = this.win.getSelection();
29097             
29098             var div = document.createElement('div');
29099             div.innerHTML = bd.innerHTML;
29100             var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
29101             if (gtx.length > 0) {
29102                 var rm = gtx.item(0).parentNode;
29103                 rm.parentNode.removeChild(rm);
29104             }
29105             
29106            
29107             if (this.enableBlocks) {
29108                 new Roo.htmleditor.FilterBlock({ node : div });
29109             }
29110             //?? tidy?
29111             var tidy = new Roo.htmleditor.TidySerializer({
29112                 inner:  true
29113             });
29114             var html  = tidy.serialize(div);
29115             
29116             
29117             if(Roo.isSafari){
29118                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
29119                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
29120                 if(m && m[1]){
29121                     html = '<div style="'+m[0]+'">' + html + '</div>';
29122                 }
29123             }
29124             html = this.cleanHtml(html);
29125             // fix up the special chars.. normaly like back quotes in word...
29126             // however we do not want to do this with chinese..
29127             html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
29128                 
29129                 var cc = match.charCodeAt();
29130
29131                 // Get the character value, handling surrogate pairs
29132                 if (match.length == 2) {
29133                     // It's a surrogate pair, calculate the Unicode code point
29134                     var high = match.charCodeAt(0) - 0xD800;
29135                     var low  = match.charCodeAt(1) - 0xDC00;
29136                     cc = (high * 0x400) + low + 0x10000;
29137                 }  else if (
29138                     (cc >= 0x4E00 && cc < 0xA000 ) ||
29139                     (cc >= 0x3400 && cc < 0x4E00 ) ||
29140                     (cc >= 0xf900 && cc < 0xfb00 )
29141                 ) {
29142                         return match;
29143                 }  
29144          
29145                 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
29146                 return "&#" + cc + ";";
29147                 
29148                 
29149             });
29150             
29151             
29152              
29153             if(this.owner.fireEvent('beforesync', this, html) !== false){
29154                 this.el.dom.value = html;
29155                 this.owner.fireEvent('sync', this, html);
29156             }
29157         }
29158     },
29159
29160     /**
29161      * TEXTAREA -> EDITABLE
29162      * Protected method that will not generally be called directly. Pushes the value of the textarea
29163      * into the iframe editor.
29164      */
29165     pushValue : function()
29166     {
29167         //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
29168         if(this.initialized){
29169             var v = this.el.dom.value.trim();
29170             
29171             
29172             if(this.owner.fireEvent('beforepush', this, v) !== false){
29173                 var d = (this.doc.body || this.doc.documentElement);
29174                 d.innerHTML = v;
29175                  
29176                 this.el.dom.value = d.innerHTML;
29177                 this.owner.fireEvent('push', this, v);
29178             }
29179             if (this.autoClean) {
29180                 new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
29181                 new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
29182             }
29183             if (this.enableBlocks) {
29184                 Roo.htmleditor.Block.initAll(this.doc.body);
29185             }
29186             
29187             this.updateLanguage();
29188             
29189             var lc = this.doc.body.lastChild;
29190             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
29191                 // add an extra line at the end.
29192                 this.doc.body.appendChild(this.doc.createElement('br'));
29193             }
29194             
29195             
29196         }
29197     },
29198
29199     // private
29200     deferFocus : function(){
29201         this.focus.defer(10, this);
29202     },
29203
29204     // doc'ed in Field
29205     focus : function(){
29206         if(this.win && !this.sourceEditMode){
29207             this.win.focus();
29208         }else{
29209             this.el.focus();
29210         }
29211     },
29212     
29213     assignDocWin: function()
29214     {
29215         var iframe = this.iframe;
29216         
29217          if(Roo.isIE){
29218             this.doc = iframe.contentWindow.document;
29219             this.win = iframe.contentWindow;
29220         } else {
29221 //            if (!Roo.get(this.frameId)) {
29222 //                return;
29223 //            }
29224 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
29225 //            this.win = Roo.get(this.frameId).dom.contentWindow;
29226             
29227             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
29228                 return;
29229             }
29230             
29231             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
29232             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
29233         }
29234     },
29235     
29236     // private
29237     initEditor : function(){
29238         //console.log("INIT EDITOR");
29239         this.assignDocWin();
29240         
29241         
29242         
29243         this.doc.designMode="on";
29244         this.doc.open();
29245         this.doc.write(this.getDocMarkup());
29246         this.doc.close();
29247         
29248         var dbody = (this.doc.body || this.doc.documentElement);
29249         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
29250         // this copies styles from the containing element into thsi one..
29251         // not sure why we need all of this..
29252         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
29253         
29254         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
29255         //ss['background-attachment'] = 'fixed'; // w3c
29256         dbody.bgProperties = 'fixed'; // ie
29257         dbody.setAttribute("translate", "no");
29258         
29259         //Roo.DomHelper.applyStyles(dbody, ss);
29260         Roo.EventManager.on(this.doc, {
29261              
29262             'mouseup': this.onEditorEvent,
29263             'dblclick': this.onEditorEvent,
29264             'click': this.onEditorEvent,
29265             'keyup': this.onEditorEvent,
29266             
29267             buffer:100,
29268             scope: this
29269         });
29270         Roo.EventManager.on(this.doc, {
29271             'paste': this.onPasteEvent,
29272             scope : this
29273         });
29274         if(Roo.isGecko){
29275             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
29276         }
29277         //??? needed???
29278         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
29279             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
29280         }
29281         this.initialized = true;
29282
29283         
29284         // initialize special key events - enter
29285         new Roo.htmleditor.KeyEnter({core : this});
29286         
29287          
29288         
29289         this.owner.fireEvent('initialize', this);
29290         this.pushValue();
29291     },
29292     // this is to prevent a href clicks resulting in a redirect?
29293    
29294     onPasteEvent : function(e,v)
29295     {
29296         // I think we better assume paste is going to be a dirty load of rubish from word..
29297         
29298         // even pasting into a 'email version' of this widget will have to clean up that mess.
29299         var cd = (e.browserEvent.clipboardData || window.clipboardData);
29300         
29301         // check what type of paste - if it's an image, then handle it differently.
29302         if (cd.files && cd.files.length > 0) {
29303             // pasting images?
29304             var urlAPI = (window.createObjectURL && window) || 
29305                 (window.URL && URL.revokeObjectURL && URL) || 
29306                 (window.webkitURL && webkitURL);
29307     
29308             var url = urlAPI.createObjectURL( cd.files[0]);
29309             this.insertAtCursor('<img src=" + url + ">');
29310             return false;
29311         }
29312         if (cd.types.indexOf('text/html') < 0 ) {
29313             return false;
29314         }
29315         var images = [];
29316         var html = cd.getData('text/html'); // clipboard event
29317         if (cd.types.indexOf('text/rtf') > -1) {
29318             var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
29319             images = parser.doc ? parser.doc.getElementsByType('pict') : [];
29320         }
29321         //Roo.log(images);
29322         //Roo.log(imgs);
29323         // fixme..
29324         images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
29325                        .map(function(g) { return g.toDataURL(); })
29326                        .filter(function(g) { return g != 'about:blank'; });
29327         
29328         
29329         html = this.cleanWordChars(html);
29330         
29331         var d = (new DOMParser().parseFromString(html, 'text/html')).body;
29332         
29333         
29334         var sn = this.getParentElement();
29335         // check if d contains a table, and prevent nesting??
29336         //Roo.log(d.getElementsByTagName('table'));
29337         //Roo.log(sn);
29338         //Roo.log(sn.closest('table'));
29339         if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
29340             e.preventDefault();
29341             this.insertAtCursor("You can not nest tables");
29342             //Roo.log("prevent?"); // fixme - 
29343             return false;
29344         }
29345         
29346         if (images.length > 0) {
29347             Roo.each(d.getElementsByTagName('img'), function(img, i) {
29348                 img.setAttribute('src', images[i]);
29349             });
29350         }
29351         if (this.autoClean) {
29352             new Roo.htmleditor.FilterWord({ node : d });
29353             
29354             new Roo.htmleditor.FilterStyleToTag({ node : d });
29355             new Roo.htmleditor.FilterAttributes({
29356                 node : d,
29357                 attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width'],
29358                 attrib_clean : ['href', 'src' ] 
29359             });
29360             new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
29361             // should be fonts..
29362             new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', 'O:P' ]} );
29363             new Roo.htmleditor.FilterParagraph({ node : d });
29364             new Roo.htmleditor.FilterSpan({ node : d });
29365             new Roo.htmleditor.FilterLongBr({ node : d });
29366             new Roo.htmleditor.FilterComment({ node : d });
29367             
29368             
29369         }
29370         if (this.enableBlocks) {
29371                 
29372             Array.from(d.getElementsByTagName('img')).forEach(function(img) {
29373                 if (img.closest('figure')) { // assume!! that it's aready
29374                     return;
29375                 }
29376                 var fig  = new Roo.htmleditor.BlockFigure({
29377                     image_src  : img.src
29378                 });
29379                 fig.updateElement(img); // replace it..
29380                 
29381             });
29382         }
29383         
29384         
29385         this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
29386         if (this.enableBlocks) {
29387             Roo.htmleditor.Block.initAll(this.doc.body);
29388         }
29389          
29390         
29391         e.preventDefault();
29392         return false;
29393         // default behaveiour should be our local cleanup paste? (optional?)
29394         // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
29395         //this.owner.fireEvent('paste', e, v);
29396     },
29397     // private
29398     onDestroy : function(){
29399         
29400         
29401         
29402         if(this.rendered){
29403             
29404             //for (var i =0; i < this.toolbars.length;i++) {
29405             //    // fixme - ask toolbars for heights?
29406             //    this.toolbars[i].onDestroy();
29407            // }
29408             
29409             //this.wrap.dom.innerHTML = '';
29410             //this.wrap.remove();
29411         }
29412     },
29413
29414     // private
29415     onFirstFocus : function(){
29416         
29417         this.assignDocWin();
29418         this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
29419         
29420         this.activated = true;
29421          
29422     
29423         if(Roo.isGecko){ // prevent silly gecko errors
29424             this.win.focus();
29425             var s = this.win.getSelection();
29426             if(!s.focusNode || s.focusNode.nodeType != 3){
29427                 var r = s.getRangeAt(0);
29428                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
29429                 r.collapse(true);
29430                 this.deferFocus();
29431             }
29432             try{
29433                 this.execCmd('useCSS', true);
29434                 this.execCmd('styleWithCSS', false);
29435             }catch(e){}
29436         }
29437         this.owner.fireEvent('activate', this);
29438     },
29439
29440     // private
29441     adjustFont: function(btn){
29442         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
29443         //if(Roo.isSafari){ // safari
29444         //    adjust *= 2;
29445        // }
29446         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
29447         if(Roo.isSafari){ // safari
29448             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
29449             v =  (v < 10) ? 10 : v;
29450             v =  (v > 48) ? 48 : v;
29451             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
29452             
29453         }
29454         
29455         
29456         v = Math.max(1, v+adjust);
29457         
29458         this.execCmd('FontSize', v  );
29459     },
29460
29461     onEditorEvent : function(e)
29462     {
29463          
29464         
29465         if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
29466             return; // we do not handle this.. (undo manager does..)
29467         }
29468         // in theory this detects if the last element is not a br, then we try and do that.
29469         // its so clicking in space at bottom triggers adding a br and moving the cursor.
29470         if (e &&
29471             e.target.nodeName == 'BODY' &&
29472             e.type == "mouseup" &&
29473             this.doc.body.lastChild
29474            ) {
29475             var lc = this.doc.body.lastChild;
29476             // gtx-trans is google translate plugin adding crap.
29477             while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
29478                 lc = lc.previousSibling;
29479             }
29480             if (lc.nodeType == 1 && lc.nodeName != 'BR') {
29481             // if last element is <BR> - then dont do anything.
29482             
29483                 var ns = this.doc.createElement('br');
29484                 this.doc.body.appendChild(ns);
29485                 range = this.doc.createRange();
29486                 range.setStartAfter(ns);
29487                 range.collapse(true);
29488                 var sel = this.win.getSelection();
29489                 sel.removeAllRanges();
29490                 sel.addRange(range);
29491             }
29492         }
29493         
29494         
29495         
29496         this.fireEditorEvent(e);
29497       //  this.updateToolbar();
29498         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
29499     },
29500     
29501     fireEditorEvent: function(e)
29502     {
29503         this.owner.fireEvent('editorevent', this, e);
29504     },
29505
29506     insertTag : function(tg)
29507     {
29508         // could be a bit smarter... -> wrap the current selected tRoo..
29509         if (tg.toLowerCase() == 'span' ||
29510             tg.toLowerCase() == 'code' ||
29511             tg.toLowerCase() == 'sup' ||
29512             tg.toLowerCase() == 'sub' 
29513             ) {
29514             
29515             range = this.createRange(this.getSelection());
29516             var wrappingNode = this.doc.createElement(tg.toLowerCase());
29517             wrappingNode.appendChild(range.extractContents());
29518             range.insertNode(wrappingNode);
29519
29520             return;
29521             
29522             
29523             
29524         }
29525         this.execCmd("formatblock",   tg);
29526         this.undoManager.addEvent(); 
29527     },
29528     
29529     insertText : function(txt)
29530     {
29531         
29532         
29533         var range = this.createRange();
29534         range.deleteContents();
29535                //alert(Sender.getAttribute('label'));
29536                
29537         range.insertNode(this.doc.createTextNode(txt));
29538         this.undoManager.addEvent();
29539     } ,
29540     
29541      
29542
29543     /**
29544      * Executes a Midas editor command on the editor document and performs necessary focus and
29545      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
29546      * @param {String} cmd The Midas command
29547      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
29548      */
29549     relayCmd : function(cmd, value)
29550     {
29551         
29552         switch (cmd) {
29553             case 'justifyleft':
29554             case 'justifyright':
29555             case 'justifycenter':
29556                 // if we are in a cell, then we will adjust the
29557                 var n = this.getParentElement();
29558                 var td = n.closest('td');
29559                 if (td) {
29560                     var bl = Roo.htmleditor.Block.factory(td);
29561                     bl.textAlign = cmd.replace('justify','');
29562                     bl.updateElement();
29563                     this.owner.fireEvent('editorevent', this);
29564                     return;
29565                 }
29566                 this.execCmd('styleWithCSS', true); // 
29567                 break;
29568             case 'bold':
29569             case 'italic':
29570                 // if there is no selection, then we insert, and set the curson inside it..
29571                 this.execCmd('styleWithCSS', false); 
29572                 break;
29573                 
29574         
29575             default:
29576                 break;
29577         }
29578         
29579         
29580         this.win.focus();
29581         this.execCmd(cmd, value);
29582         this.owner.fireEvent('editorevent', this);
29583         //this.updateToolbar();
29584         this.owner.deferFocus();
29585     },
29586
29587     /**
29588      * Executes a Midas editor command directly on the editor document.
29589      * For visual commands, you should use {@link #relayCmd} instead.
29590      * <b>This should only be called after the editor is initialized.</b>
29591      * @param {String} cmd The Midas command
29592      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
29593      */
29594     execCmd : function(cmd, value){
29595         this.doc.execCommand(cmd, false, value === undefined ? null : value);
29596         this.syncValue();
29597     },
29598  
29599  
29600    
29601     /**
29602      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
29603      * to insert tRoo.
29604      * @param {String} text | dom node.. 
29605      */
29606     insertAtCursor : function(text)
29607     {
29608         
29609         if(!this.activated){
29610             return;
29611         }
29612          
29613         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
29614             this.win.focus();
29615             
29616             
29617             // from jquery ui (MIT licenced)
29618             var range, node;
29619             var win = this.win;
29620             
29621             if (win.getSelection && win.getSelection().getRangeAt) {
29622                 
29623                 // delete the existing?
29624                 
29625                 this.createRange(this.getSelection()).deleteContents();
29626                 range = win.getSelection().getRangeAt(0);
29627                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
29628                 range.insertNode(node);
29629                 range = range.cloneRange();
29630                 range.collapse(false);
29631                  
29632                 win.getSelection().removeAllRanges();
29633                 win.getSelection().addRange(range);
29634                 
29635                 
29636                 
29637             } else if (win.document.selection && win.document.selection.createRange) {
29638                 // no firefox support
29639                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
29640                 win.document.selection.createRange().pasteHTML(txt);
29641             
29642             } else {
29643                 // no firefox support
29644                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
29645                 this.execCmd('InsertHTML', txt);
29646             } 
29647             this.syncValue();
29648             
29649             this.deferFocus();
29650         }
29651     },
29652  // private
29653     mozKeyPress : function(e){
29654         if(e.ctrlKey){
29655             var c = e.getCharCode(), cmd;
29656           
29657             if(c > 0){
29658                 c = String.fromCharCode(c).toLowerCase();
29659                 switch(c){
29660                     case 'b':
29661                         cmd = 'bold';
29662                         break;
29663                     case 'i':
29664                         cmd = 'italic';
29665                         break;
29666                     
29667                     case 'u':
29668                         cmd = 'underline';
29669                         break;
29670                     
29671                     //case 'v':
29672                       //  this.cleanUpPaste.defer(100, this);
29673                       //  return;
29674                         
29675                 }
29676                 if(cmd){
29677                     
29678                     this.relayCmd(cmd);
29679                     //this.win.focus();
29680                     //this.execCmd(cmd);
29681                     //this.deferFocus();
29682                     e.preventDefault();
29683                 }
29684                 
29685             }
29686         }
29687     },
29688
29689     // private
29690     fixKeys : function(){ // load time branching for fastest keydown performance
29691         
29692         
29693         if(Roo.isIE){
29694             return function(e){
29695                 var k = e.getKey(), r;
29696                 if(k == e.TAB){
29697                     e.stopEvent();
29698                     r = this.doc.selection.createRange();
29699                     if(r){
29700                         r.collapse(true);
29701                         r.pasteHTML('&#160;&#160;&#160;&#160;');
29702                         this.deferFocus();
29703                     }
29704                     return;
29705                 }
29706                 /// this is handled by Roo.htmleditor.KeyEnter
29707                  /*
29708                 if(k == e.ENTER){
29709                     r = this.doc.selection.createRange();
29710                     if(r){
29711                         var target = r.parentElement();
29712                         if(!target || target.tagName.toLowerCase() != 'li'){
29713                             e.stopEvent();
29714                             r.pasteHTML('<br/>');
29715                             r.collapse(false);
29716                             r.select();
29717                         }
29718                     }
29719                 }
29720                 */
29721                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
29722                 //    this.cleanUpPaste.defer(100, this);
29723                 //    return;
29724                 //}
29725                 
29726                 
29727             };
29728         }else if(Roo.isOpera){
29729             return function(e){
29730                 var k = e.getKey();
29731                 if(k == e.TAB){
29732                     e.stopEvent();
29733                     this.win.focus();
29734                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
29735                     this.deferFocus();
29736                 }
29737                
29738                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
29739                 //    this.cleanUpPaste.defer(100, this);
29740                  //   return;
29741                 //}
29742                 
29743             };
29744         }else if(Roo.isSafari){
29745             return function(e){
29746                 var k = e.getKey();
29747                 
29748                 if(k == e.TAB){
29749                     e.stopEvent();
29750                     this.execCmd('InsertText','\t');
29751                     this.deferFocus();
29752                     return;
29753                 }
29754                  this.mozKeyPress(e);
29755                 
29756                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
29757                  //   this.cleanUpPaste.defer(100, this);
29758                  //   return;
29759                // }
29760                 
29761              };
29762         }
29763     }(),
29764     
29765     getAllAncestors: function()
29766     {
29767         var p = this.getSelectedNode();
29768         var a = [];
29769         if (!p) {
29770             a.push(p); // push blank onto stack..
29771             p = this.getParentElement();
29772         }
29773         
29774         
29775         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
29776             a.push(p);
29777             p = p.parentNode;
29778         }
29779         a.push(this.doc.body);
29780         return a;
29781     },
29782     lastSel : false,
29783     lastSelNode : false,
29784     
29785     
29786     getSelection : function() 
29787     {
29788         this.assignDocWin();
29789         return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
29790     },
29791     /**
29792      * Select a dom node
29793      * @param {DomElement} node the node to select
29794      */
29795     selectNode : function(node, collapse)
29796     {
29797         var nodeRange = node.ownerDocument.createRange();
29798         try {
29799             nodeRange.selectNode(node);
29800         } catch (e) {
29801             nodeRange.selectNodeContents(node);
29802         }
29803         if (collapse === true) {
29804             nodeRange.collapse(true);
29805         }
29806         //
29807         var s = this.win.getSelection();
29808         s.removeAllRanges();
29809         s.addRange(nodeRange);
29810     },
29811     
29812     getSelectedNode: function() 
29813     {
29814         // this may only work on Gecko!!!
29815         
29816         // should we cache this!!!!
29817         
29818          
29819          
29820         var range = this.createRange(this.getSelection()).cloneRange();
29821         
29822         if (Roo.isIE) {
29823             var parent = range.parentElement();
29824             while (true) {
29825                 var testRange = range.duplicate();
29826                 testRange.moveToElementText(parent);
29827                 if (testRange.inRange(range)) {
29828                     break;
29829                 }
29830                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
29831                     break;
29832                 }
29833                 parent = parent.parentElement;
29834             }
29835             return parent;
29836         }
29837         
29838         // is ancestor a text element.
29839         var ac =  range.commonAncestorContainer;
29840         if (ac.nodeType == 3) {
29841             ac = ac.parentNode;
29842         }
29843         
29844         var ar = ac.childNodes;
29845          
29846         var nodes = [];
29847         var other_nodes = [];
29848         var has_other_nodes = false;
29849         for (var i=0;i<ar.length;i++) {
29850             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
29851                 continue;
29852             }
29853             // fullly contained node.
29854             
29855             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
29856                 nodes.push(ar[i]);
29857                 continue;
29858             }
29859             
29860             // probably selected..
29861             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
29862                 other_nodes.push(ar[i]);
29863                 continue;
29864             }
29865             // outer..
29866             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
29867                 continue;
29868             }
29869             
29870             
29871             has_other_nodes = true;
29872         }
29873         if (!nodes.length && other_nodes.length) {
29874             nodes= other_nodes;
29875         }
29876         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
29877             return false;
29878         }
29879         
29880         return nodes[0];
29881     },
29882     
29883     
29884     createRange: function(sel)
29885     {
29886         // this has strange effects when using with 
29887         // top toolbar - not sure if it's a great idea.
29888         //this.editor.contentWindow.focus();
29889         if (typeof sel != "undefined") {
29890             try {
29891                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
29892             } catch(e) {
29893                 return this.doc.createRange();
29894             }
29895         } else {
29896             return this.doc.createRange();
29897         }
29898     },
29899     getParentElement: function()
29900     {
29901         
29902         this.assignDocWin();
29903         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
29904         
29905         var range = this.createRange(sel);
29906          
29907         try {
29908             var p = range.commonAncestorContainer;
29909             while (p.nodeType == 3) { // text node
29910                 p = p.parentNode;
29911             }
29912             return p;
29913         } catch (e) {
29914             return null;
29915         }
29916     
29917     },
29918     /***
29919      *
29920      * Range intersection.. the hard stuff...
29921      *  '-1' = before
29922      *  '0' = hits..
29923      *  '1' = after.
29924      *         [ -- selected range --- ]
29925      *   [fail]                        [fail]
29926      *
29927      *    basically..
29928      *      if end is before start or  hits it. fail.
29929      *      if start is after end or hits it fail.
29930      *
29931      *   if either hits (but other is outside. - then it's not 
29932      *   
29933      *    
29934      **/
29935     
29936     
29937     // @see http://www.thismuchiknow.co.uk/?p=64.
29938     rangeIntersectsNode : function(range, node)
29939     {
29940         var nodeRange = node.ownerDocument.createRange();
29941         try {
29942             nodeRange.selectNode(node);
29943         } catch (e) {
29944             nodeRange.selectNodeContents(node);
29945         }
29946     
29947         var rangeStartRange = range.cloneRange();
29948         rangeStartRange.collapse(true);
29949     
29950         var rangeEndRange = range.cloneRange();
29951         rangeEndRange.collapse(false);
29952     
29953         var nodeStartRange = nodeRange.cloneRange();
29954         nodeStartRange.collapse(true);
29955     
29956         var nodeEndRange = nodeRange.cloneRange();
29957         nodeEndRange.collapse(false);
29958     
29959         return rangeStartRange.compareBoundaryPoints(
29960                  Range.START_TO_START, nodeEndRange) == -1 &&
29961                rangeEndRange.compareBoundaryPoints(
29962                  Range.START_TO_START, nodeStartRange) == 1;
29963         
29964          
29965     },
29966     rangeCompareNode : function(range, node)
29967     {
29968         var nodeRange = node.ownerDocument.createRange();
29969         try {
29970             nodeRange.selectNode(node);
29971         } catch (e) {
29972             nodeRange.selectNodeContents(node);
29973         }
29974         
29975         
29976         range.collapse(true);
29977     
29978         nodeRange.collapse(true);
29979      
29980         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
29981         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
29982          
29983         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
29984         
29985         var nodeIsBefore   =  ss == 1;
29986         var nodeIsAfter    = ee == -1;
29987         
29988         if (nodeIsBefore && nodeIsAfter) {
29989             return 0; // outer
29990         }
29991         if (!nodeIsBefore && nodeIsAfter) {
29992             return 1; //right trailed.
29993         }
29994         
29995         if (nodeIsBefore && !nodeIsAfter) {
29996             return 2;  // left trailed.
29997         }
29998         // fully contined.
29999         return 3;
30000     },
30001  
30002     cleanWordChars : function(input) {// change the chars to hex code
30003         
30004        var swapCodes  = [ 
30005             [    8211, "&#8211;" ], 
30006             [    8212, "&#8212;" ], 
30007             [    8216,  "'" ],  
30008             [    8217, "'" ],  
30009             [    8220, '"' ],  
30010             [    8221, '"' ],  
30011             [    8226, "*" ],  
30012             [    8230, "..." ]
30013         ]; 
30014         var output = input;
30015         Roo.each(swapCodes, function(sw) { 
30016             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
30017             
30018             output = output.replace(swapper, sw[1]);
30019         });
30020         
30021         return output;
30022     },
30023     
30024      
30025     
30026         
30027     
30028     cleanUpChild : function (node)
30029     {
30030         
30031         new Roo.htmleditor.FilterComment({node : node});
30032         new Roo.htmleditor.FilterAttributes({
30033                 node : node,
30034                 attrib_black : this.ablack,
30035                 attrib_clean : this.aclean,
30036                 style_white : this.cwhite,
30037                 style_black : this.cblack
30038         });
30039         new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
30040         new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
30041          
30042         
30043     },
30044     
30045     /**
30046      * Clean up MS wordisms...
30047      * @deprecated - use filter directly
30048      */
30049     cleanWord : function(node)
30050     {
30051         new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
30052         
30053     },
30054    
30055     
30056     /**
30057
30058      * @deprecated - use filters
30059      */
30060     cleanTableWidths : function(node)
30061     {
30062         new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
30063         
30064  
30065     },
30066     
30067      
30068         
30069     applyBlacklists : function()
30070     {
30071         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
30072         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
30073         
30074         this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
30075         this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
30076         this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
30077         
30078         this.white = [];
30079         this.black = [];
30080         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
30081             if (b.indexOf(tag) > -1) {
30082                 return;
30083             }
30084             this.white.push(tag);
30085             
30086         }, this);
30087         
30088         Roo.each(w, function(tag) {
30089             if (b.indexOf(tag) > -1) {
30090                 return;
30091             }
30092             if (this.white.indexOf(tag) > -1) {
30093                 return;
30094             }
30095             this.white.push(tag);
30096             
30097         }, this);
30098         
30099         
30100         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
30101             if (w.indexOf(tag) > -1) {
30102                 return;
30103             }
30104             this.black.push(tag);
30105             
30106         }, this);
30107         
30108         Roo.each(b, function(tag) {
30109             if (w.indexOf(tag) > -1) {
30110                 return;
30111             }
30112             if (this.black.indexOf(tag) > -1) {
30113                 return;
30114             }
30115             this.black.push(tag);
30116             
30117         }, this);
30118         
30119         
30120         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
30121         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
30122         
30123         this.cwhite = [];
30124         this.cblack = [];
30125         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
30126             if (b.indexOf(tag) > -1) {
30127                 return;
30128             }
30129             this.cwhite.push(tag);
30130             
30131         }, this);
30132         
30133         Roo.each(w, function(tag) {
30134             if (b.indexOf(tag) > -1) {
30135                 return;
30136             }
30137             if (this.cwhite.indexOf(tag) > -1) {
30138                 return;
30139             }
30140             this.cwhite.push(tag);
30141             
30142         }, this);
30143         
30144         
30145         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
30146             if (w.indexOf(tag) > -1) {
30147                 return;
30148             }
30149             this.cblack.push(tag);
30150             
30151         }, this);
30152         
30153         Roo.each(b, function(tag) {
30154             if (w.indexOf(tag) > -1) {
30155                 return;
30156             }
30157             if (this.cblack.indexOf(tag) > -1) {
30158                 return;
30159             }
30160             this.cblack.push(tag);
30161             
30162         }, this);
30163     },
30164     
30165     setStylesheets : function(stylesheets)
30166     {
30167         if(typeof(stylesheets) == 'string'){
30168             Roo.get(this.iframe.contentDocument.head).createChild({
30169                 tag : 'link',
30170                 rel : 'stylesheet',
30171                 type : 'text/css',
30172                 href : stylesheets
30173             });
30174             
30175             return;
30176         }
30177         var _this = this;
30178      
30179         Roo.each(stylesheets, function(s) {
30180             if(!s.length){
30181                 return;
30182             }
30183             
30184             Roo.get(_this.iframe.contentDocument.head).createChild({
30185                 tag : 'link',
30186                 rel : 'stylesheet',
30187                 type : 'text/css',
30188                 href : s
30189             });
30190         });
30191
30192         
30193     },
30194     
30195     
30196     updateLanguage : function()
30197     {
30198         if (!this.iframe || !this.iframe.contentDocument) {
30199             return;
30200         }
30201         Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
30202     },
30203     
30204     
30205     removeStylesheets : function()
30206     {
30207         var _this = this;
30208         
30209         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
30210             s.remove();
30211         });
30212     },
30213     
30214     setStyle : function(style)
30215     {
30216         Roo.get(this.iframe.contentDocument.head).createChild({
30217             tag : 'style',
30218             type : 'text/css',
30219             html : style
30220         });
30221
30222         return;
30223     }
30224     
30225     // hide stuff that is not compatible
30226     /**
30227      * @event blur
30228      * @hide
30229      */
30230     /**
30231      * @event change
30232      * @hide
30233      */
30234     /**
30235      * @event focus
30236      * @hide
30237      */
30238     /**
30239      * @event specialkey
30240      * @hide
30241      */
30242     /**
30243      * @cfg {String} fieldClass @hide
30244      */
30245     /**
30246      * @cfg {String} focusClass @hide
30247      */
30248     /**
30249      * @cfg {String} autoCreate @hide
30250      */
30251     /**
30252      * @cfg {String} inputType @hide
30253      */
30254     /**
30255      * @cfg {String} invalidClass @hide
30256      */
30257     /**
30258      * @cfg {String} invalidText @hide
30259      */
30260     /**
30261      * @cfg {String} msgFx @hide
30262      */
30263     /**
30264      * @cfg {String} validateOnBlur @hide
30265      */
30266 });
30267
30268 Roo.HtmlEditorCore.white = [
30269         'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
30270         
30271        'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD',      'DIR',       'DIV', 
30272        'DL',      'DT',         'H1',     'H2',      'H3',        'H4', 
30273        'H5',      'H6',         'HR',     'ISINDEX', 'LISTING',   'MARQUEE', 
30274        'MENU',    'MULTICOL',   'OL',     'P',       'PLAINTEXT', 'PRE', 
30275        'TABLE',   'UL',         'XMP', 
30276        
30277        'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
30278       'THEAD',   'TR', 
30279      
30280       'DIR', 'MENU', 'OL', 'UL', 'DL',
30281        
30282       'EMBED',  'OBJECT'
30283 ];
30284
30285
30286 Roo.HtmlEditorCore.black = [
30287     //    'embed',  'object', // enable - backend responsiblity to clean thiese
30288         'APPLET', // 
30289         'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
30290         'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
30291         'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
30292         'SCRIPT', 'STYLE' ,'TITLE',  'XML',
30293         //'FONT' // CLEAN LATER..
30294         'COLGROUP', 'COL'   // messy tables.
30295         
30296         
30297 ];
30298 Roo.HtmlEditorCore.clean = [ // ?? needed???
30299      'SCRIPT', 'STYLE', 'TITLE', 'XML'
30300 ];
30301 Roo.HtmlEditorCore.tag_remove = [
30302     'FONT', 'TBODY'  
30303 ];
30304 // attributes..
30305
30306 Roo.HtmlEditorCore.ablack = [
30307     'on'
30308 ];
30309     
30310 Roo.HtmlEditorCore.aclean = [ 
30311     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
30312 ];
30313
30314 // protocols..
30315 Roo.HtmlEditorCore.pwhite= [
30316         'http',  'https',  'mailto'
30317 ];
30318
30319 // white listed style attributes.
30320 Roo.HtmlEditorCore.cwhite= [
30321       //  'text-align', /// default is to allow most things..
30322       
30323          
30324 //        'font-size'//??
30325 ];
30326
30327 // black listed style attributes.
30328 Roo.HtmlEditorCore.cblack= [
30329       //  'font-size' -- this can be set by the project 
30330 ];
30331
30332
30333
30334
30335     /*
30336  * - LGPL
30337  *
30338  * HtmlEditor
30339  * 
30340  */
30341
30342 /**
30343  * @class Roo.bootstrap.form.HtmlEditor
30344  * @extends Roo.bootstrap.form.TextArea
30345  * Bootstrap HtmlEditor class
30346
30347  * @constructor
30348  * Create a new HtmlEditor
30349  * @param {Object} config The config object
30350  */
30351
30352 Roo.bootstrap.form.HtmlEditor = function(config){
30353     Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
30354     if (!this.toolbars) {
30355         this.toolbars = [];
30356     }
30357     
30358     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
30359     this.addEvents({
30360             /**
30361              * @event initialize
30362              * Fires when the editor is fully initialized (including the iframe)
30363              * @param {HtmlEditor} this
30364              */
30365             initialize: true,
30366             /**
30367              * @event activate
30368              * Fires when the editor is first receives the focus. Any insertion must wait
30369              * until after this event.
30370              * @param {HtmlEditor} this
30371              */
30372             activate: true,
30373              /**
30374              * @event beforesync
30375              * Fires before the textarea is updated with content from the editor iframe. Return false
30376              * to cancel the sync.
30377              * @param {HtmlEditor} this
30378              * @param {String} html
30379              */
30380             beforesync: true,
30381              /**
30382              * @event beforepush
30383              * Fires before the iframe editor is updated with content from the textarea. Return false
30384              * to cancel the push.
30385              * @param {HtmlEditor} this
30386              * @param {String} html
30387              */
30388             beforepush: true,
30389              /**
30390              * @event sync
30391              * Fires when the textarea is updated with content from the editor iframe.
30392              * @param {HtmlEditor} this
30393              * @param {String} html
30394              */
30395             sync: true,
30396              /**
30397              * @event push
30398              * Fires when the iframe editor is updated with content from the textarea.
30399              * @param {HtmlEditor} this
30400              * @param {String} html
30401              */
30402             push: true,
30403              /**
30404              * @event editmodechange
30405              * Fires when the editor switches edit modes
30406              * @param {HtmlEditor} this
30407              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
30408              */
30409             editmodechange: true,
30410             /**
30411              * @event editorevent
30412              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
30413              * @param {HtmlEditor} this
30414              */
30415             editorevent: true,
30416             /**
30417              * @event firstfocus
30418              * Fires when on first focus - needed by toolbars..
30419              * @param {HtmlEditor} this
30420              */
30421             firstfocus: true,
30422             /**
30423              * @event autosave
30424              * Auto save the htmlEditor value as a file into Events
30425              * @param {HtmlEditor} this
30426              */
30427             autosave: true,
30428             /**
30429              * @event savedpreview
30430              * preview the saved version of htmlEditor
30431              * @param {HtmlEditor} this
30432              */
30433             savedpreview: true
30434         });
30435 };
30436
30437
30438 Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea,  {
30439     
30440     
30441       /**
30442      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
30443      */
30444     toolbars : false,
30445     
30446      /**
30447     * @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty
30448     */
30449     btns : [],
30450    
30451      /**
30452      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
30453      *                        Roo.resizable.
30454      */
30455     resizable : false,
30456      /**
30457      * @cfg {Number} height (in pixels)
30458      */   
30459     height: 300,
30460    /**
30461      * @cfg {Number} width (in pixels)
30462      */   
30463     width: false,
30464     
30465     /**
30466      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
30467      * 
30468      */
30469     stylesheets: false,
30470     
30471     // id of frame..
30472     frameId: false,
30473     
30474     // private properties
30475     validationEvent : false,
30476     deferHeight: true,
30477     initialized : false,
30478     activated : false,
30479     
30480     onFocus : Roo.emptyFn,
30481     iframePad:3,
30482     hideMode:'offsets',
30483     
30484     tbContainer : false,
30485     
30486     bodyCls : '',
30487     
30488     toolbarContainer :function() {
30489         return this.wrap.select('.x-html-editor-tb',true).first();
30490     },
30491
30492     /**
30493      * Protected method that will not generally be called directly. It
30494      * is called when the editor creates its toolbar. Override this method if you need to
30495      * add custom toolbar buttons.
30496      * @param {HtmlEditor} editor
30497      */
30498     createToolbar : function(){
30499         Roo.log('renewing');
30500         Roo.log("create toolbars");
30501         
30502         this.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard({editor: this} ) ];
30503         this.toolbars[0].render(this.toolbarContainer());
30504         
30505         return;
30506         
30507 //        if (!editor.toolbars || !editor.toolbars.length) {
30508 //            editor.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard() ]; // can be empty?
30509 //        }
30510 //        
30511 //        for (var i =0 ; i < editor.toolbars.length;i++) {
30512 //            editor.toolbars[i] = Roo.factory(
30513 //                    typeof(editor.toolbars[i]) == 'string' ?
30514 //                        { xtype: editor.toolbars[i]} : editor.toolbars[i],
30515 //                Roo.bootstrap.form.HtmlEditor);
30516 //            editor.toolbars[i].init(editor);
30517 //        }
30518     },
30519
30520      
30521     // private
30522     onRender : function(ct, position)
30523     {
30524        // Roo.log("Call onRender: " + this.xtype);
30525         var _t = this;
30526         Roo.bootstrap.form.HtmlEditor.superclass.onRender.call(this, ct, position);
30527       
30528         this.wrap = this.inputEl().wrap({
30529             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
30530         });
30531         
30532         this.editorcore.onRender(ct, position);
30533          
30534         if (this.resizable) {
30535             this.resizeEl = new Roo.Resizable(this.wrap, {
30536                 pinned : true,
30537                 wrap: true,
30538                 dynamic : true,
30539                 minHeight : this.height,
30540                 height: this.height,
30541                 handles : this.resizable,
30542                 width: this.width,
30543                 listeners : {
30544                     resize : function(r, w, h) {
30545                         _t.onResize(w,h); // -something
30546                     }
30547                 }
30548             });
30549             
30550         }
30551         this.createToolbar(this);
30552        
30553         
30554         if(!this.width && this.resizable){
30555             this.setSize(this.wrap.getSize());
30556         }
30557         if (this.resizeEl) {
30558             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
30559             // should trigger onReize..
30560         }
30561         
30562     },
30563
30564     // private
30565     onResize : function(w, h)
30566     {
30567         Roo.log('resize: ' +w + ',' + h );
30568         Roo.bootstrap.form.HtmlEditor.superclass.onResize.apply(this, arguments);
30569         var ew = false;
30570         var eh = false;
30571         
30572         if(this.inputEl() ){
30573             if(typeof w == 'number'){
30574                 var aw = w - this.wrap.getFrameWidth('lr');
30575                 this.inputEl().setWidth(this.adjustWidth('textarea', aw));
30576                 ew = aw;
30577             }
30578             if(typeof h == 'number'){
30579                  var tbh = -11;  // fixme it needs to tool bar size!
30580                 for (var i =0; i < this.toolbars.length;i++) {
30581                     // fixme - ask toolbars for heights?
30582                     tbh += this.toolbars[i].el.getHeight();
30583                     //if (this.toolbars[i].footer) {
30584                     //    tbh += this.toolbars[i].footer.el.getHeight();
30585                     //}
30586                 }
30587               
30588                 
30589                 
30590                 
30591                 
30592                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
30593                 ah -= 5; // knock a few pixes off for look..
30594                 this.inputEl().setHeight(this.adjustWidth('textarea', ah));
30595                 var eh = ah;
30596             }
30597         }
30598         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
30599         this.editorcore.onResize(ew,eh);
30600         
30601     },
30602
30603     /**
30604      * Toggles the editor between standard and source edit mode.
30605      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
30606      */
30607     toggleSourceEdit : function(sourceEditMode)
30608     {
30609         this.editorcore.toggleSourceEdit(sourceEditMode);
30610         
30611         if(this.editorcore.sourceEditMode){
30612             Roo.log('editor - showing textarea');
30613             
30614 //            Roo.log('in');
30615 //            Roo.log(this.syncValue());
30616             this.syncValue();
30617             this.inputEl().removeClass(['hide', 'x-hidden']);
30618             this.inputEl().dom.removeAttribute('tabIndex');
30619             this.inputEl().focus();
30620         }else{
30621             Roo.log('editor - hiding textarea');
30622 //            Roo.log('out')
30623 //            Roo.log(this.pushValue()); 
30624             this.pushValue();
30625             
30626             this.inputEl().addClass(['hide', 'x-hidden']);
30627             this.inputEl().dom.setAttribute('tabIndex', -1);
30628             //this.deferFocus();
30629         }
30630          
30631         if(this.resizable){
30632             this.setSize(this.wrap.getSize());
30633         }
30634         
30635         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
30636     },
30637  
30638     // private (for BoxComponent)
30639     adjustSize : Roo.BoxComponent.prototype.adjustSize,
30640
30641     // private (for BoxComponent)
30642     getResizeEl : function(){
30643         return this.wrap;
30644     },
30645
30646     // private (for BoxComponent)
30647     getPositionEl : function(){
30648         return this.wrap;
30649     },
30650
30651     // private
30652     initEvents : function(){
30653         this.originalValue = this.getValue();
30654     },
30655
30656 //    /**
30657 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
30658 //     * @method
30659 //     */
30660 //    markInvalid : Roo.emptyFn,
30661 //    /**
30662 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
30663 //     * @method
30664 //     */
30665 //    clearInvalid : Roo.emptyFn,
30666
30667     setValue : function(v){
30668         Roo.bootstrap.form.HtmlEditor.superclass.setValue.call(this, v);
30669         this.editorcore.pushValue();
30670     },
30671
30672      
30673     // private
30674     deferFocus : function(){
30675         this.focus.defer(10, this);
30676     },
30677
30678     // doc'ed in Field
30679     focus : function(){
30680         this.editorcore.focus();
30681         
30682     },
30683       
30684
30685     // private
30686     onDestroy : function(){
30687         
30688         
30689         
30690         if(this.rendered){
30691             
30692             for (var i =0; i < this.toolbars.length;i++) {
30693                 // fixme - ask toolbars for heights?
30694                 this.toolbars[i].onDestroy();
30695             }
30696             
30697             this.wrap.dom.innerHTML = '';
30698             this.wrap.remove();
30699         }
30700     },
30701
30702     // private
30703     onFirstFocus : function(){
30704         //Roo.log("onFirstFocus");
30705         this.editorcore.onFirstFocus();
30706          for (var i =0; i < this.toolbars.length;i++) {
30707             this.toolbars[i].onFirstFocus();
30708         }
30709         
30710     },
30711     
30712     // private
30713     syncValue : function()
30714     {   
30715         this.editorcore.syncValue();
30716     },
30717     
30718     pushValue : function()
30719     {   
30720         this.editorcore.pushValue();
30721     }
30722      
30723     
30724     // hide stuff that is not compatible
30725     /**
30726      * @event blur
30727      * @hide
30728      */
30729     /**
30730      * @event change
30731      * @hide
30732      */
30733     /**
30734      * @event focus
30735      * @hide
30736      */
30737     /**
30738      * @event specialkey
30739      * @hide
30740      */
30741     /**
30742      * @cfg {String} fieldClass @hide
30743      */
30744     /**
30745      * @cfg {String} focusClass @hide
30746      */
30747     /**
30748      * @cfg {String} autoCreate @hide
30749      */
30750     /**
30751      * @cfg {String} inputType @hide
30752      */
30753      
30754     /**
30755      * @cfg {String} invalidText @hide
30756      */
30757     /**
30758      * @cfg {String} msgFx @hide
30759      */
30760     /**
30761      * @cfg {String} validateOnBlur @hide
30762      */
30763 });
30764  
30765     
30766    
30767    
30768    
30769       
30770 Roo.namespace('Roo.bootstrap.form.HtmlEditor');
30771 /**
30772  * @class Roo.bootstrap.form.HtmlEditorToolbarStandard
30773  * @parent Roo.bootstrap.form.HtmlEditor
30774  * @extends Roo.bootstrap.nav.Simplebar
30775  * Basic Toolbar
30776  * 
30777  * @example
30778  * Usage:
30779  *
30780  new Roo.bootstrap.form.HtmlEditor({
30781     ....
30782     toolbars : [
30783         new Roo.bootstrap.form.HtmlEditorToolbarStandard({
30784             disable : { fonts: 1 , format: 1, ..., ... , ...],
30785             btns : [ .... ]
30786         })
30787     }
30788      
30789  * 
30790  * @cfg {Object} disable List of elements to disable..
30791  * @cfg {Array} btns List of additional buttons.
30792  * 
30793  * 
30794  * NEEDS Extra CSS? 
30795  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
30796  */
30797  
30798 Roo.bootstrap.form.HtmlEditorToolbarStandard = function(config)
30799 {
30800     
30801     Roo.apply(this, config);
30802     
30803     // default disabled, based on 'good practice'..
30804     this.disable = this.disable || {};
30805     Roo.applyIf(this.disable, {
30806         fontSize : true,
30807         colors : true,
30808         specialElements : true
30809     });
30810     Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.constructor.call(this, config);
30811     
30812     this.editor = config.editor;
30813     this.editorcore = config.editor.editorcore;
30814     
30815     this.buttons   = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
30816     
30817     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
30818     // dont call parent... till later.
30819 }
30820 Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simplebar,  {
30821      
30822     bar : true,
30823     
30824     editor : false,
30825     editorcore : false,
30826     
30827     
30828     formats : [
30829         "p" ,  
30830         "h1","h2","h3","h4","h5","h6", 
30831         "pre", "code", 
30832         "abbr", "acronym", "address", "cite", "samp", "var",
30833         'div','span'
30834     ],
30835     
30836     onRender : function(ct, position)
30837     {
30838        // Roo.log("Call onRender: " + this.xtype);
30839         
30840        Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.onRender.call(this, ct, position);
30841        Roo.log(this.el);
30842        this.el.dom.style.marginBottom = '0';
30843        var _this = this;
30844        var editorcore = this.editorcore;
30845        var editor= this.editor;
30846        
30847        var children = [];
30848        var btn = function(id,cmd , toggle, handler, html){
30849        
30850             var  event = toggle ? 'toggle' : 'click';
30851        
30852             var a = {
30853                 size : 'sm',
30854                 xtype: 'Button',
30855                 xns: Roo.bootstrap,
30856                 //glyphicon : id,
30857                 fa: id,
30858                 cmd : id || cmd,
30859                 enableToggle:toggle !== false,
30860                 html : html || '',
30861                 pressed : toggle ? false : null,
30862                 listeners : {}
30863             };
30864             a.listeners[toggle ? 'toggle' : 'click'] = function() {
30865                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
30866             };
30867             children.push(a);
30868             return a;
30869        }
30870        
30871     //    var cb_box = function...
30872         
30873         var style = {
30874                 xtype: 'Button',
30875                 size : 'sm',
30876                 xns: Roo.bootstrap,
30877                 fa : 'font',
30878                 //html : 'submit'
30879                 menu : {
30880                     xtype: 'Menu',
30881                     xns: Roo.bootstrap,
30882                     items:  []
30883                 }
30884         };
30885         Roo.each(this.formats, function(f) {
30886             style.menu.items.push({
30887                 xtype :'MenuItem',
30888                 xns: Roo.bootstrap,
30889                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
30890                 tagname : f,
30891                 listeners : {
30892                     click : function()
30893                     {
30894                         editorcore.insertTag(this.tagname);
30895                         editor.focus();
30896                     }
30897                 }
30898                 
30899             });
30900         });
30901         children.push(style);   
30902         
30903         btn('bold',false,true);
30904         btn('italic',false,true);
30905         btn('align-left', 'justifyleft',true);
30906         btn('align-center', 'justifycenter',true);
30907         btn('align-right' , 'justifyright',true);
30908         btn('link', false, false, function(btn) {
30909             //Roo.log("create link?");
30910             var url = prompt(this.createLinkText, this.defaultLinkValue);
30911             if(url && url != 'http:/'+'/'){
30912                 this.editorcore.relayCmd('createlink', url);
30913             }
30914         }),
30915         btn('list','insertunorderedlist',true);
30916         btn('pencil', false,true, function(btn){
30917                 Roo.log(this);
30918                 this.toggleSourceEdit(btn.pressed);
30919         });
30920         
30921         if (this.editor.btns.length > 0) {
30922             for (var i = 0; i<this.editor.btns.length; i++) {
30923                 children.push(this.editor.btns[i]);
30924             }
30925         }
30926         
30927         /*
30928         var cog = {
30929                 xtype: 'Button',
30930                 size : 'sm',
30931                 xns: Roo.bootstrap,
30932                 glyphicon : 'cog',
30933                 //html : 'submit'
30934                 menu : {
30935                     xtype: 'Menu',
30936                     xns: Roo.bootstrap,
30937                     items:  []
30938                 }
30939         };
30940         
30941         cog.menu.items.push({
30942             xtype :'MenuItem',
30943             xns: Roo.bootstrap,
30944             html : Clean styles,
30945             tagname : f,
30946             listeners : {
30947                 click : function()
30948                 {
30949                     editorcore.insertTag(this.tagname);
30950                     editor.focus();
30951                 }
30952             }
30953             
30954         });
30955        */
30956         
30957          
30958        this.xtype = 'NavSimplebar';
30959         
30960         for(var i=0;i< children.length;i++) {
30961             
30962             this.buttons.add(this.addxtypeChild(children[i]));
30963             
30964         }
30965         
30966         editor.on('editorevent', this.updateToolbar, this);
30967     },
30968     onBtnClick : function(id)
30969     {
30970        this.editorcore.relayCmd(id);
30971        this.editorcore.focus();
30972     },
30973     
30974     /**
30975      * Protected method that will not generally be called directly. It triggers
30976      * a toolbar update by reading the markup state of the current selection in the editor.
30977      */
30978     updateToolbar: function(){
30979
30980         if(!this.editorcore.activated){
30981             this.editor.onFirstFocus(); // is this neeed?
30982             return;
30983         }
30984
30985         var btns = this.buttons; 
30986         var doc = this.editorcore.doc;
30987         btns.get('bold').setActive(doc.queryCommandState('bold'));
30988         btns.get('italic').setActive(doc.queryCommandState('italic'));
30989         //btns.get('underline').setActive(doc.queryCommandState('underline'));
30990         
30991         btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
30992         btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
30993         btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
30994         
30995         //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
30996         btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
30997          /*
30998         
30999         var ans = this.editorcore.getAllAncestors();
31000         if (this.formatCombo) {
31001             
31002             
31003             var store = this.formatCombo.store;
31004             this.formatCombo.setValue("");
31005             for (var i =0; i < ans.length;i++) {
31006                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
31007                     // select it..
31008                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
31009                     break;
31010                 }
31011             }
31012         }
31013         
31014         
31015         
31016         // hides menus... - so this cant be on a menu...
31017         Roo.bootstrap.MenuMgr.hideAll();
31018         */
31019         Roo.bootstrap.menu.Manager.hideAll();
31020         //this.editorsyncValue();
31021     },
31022     onFirstFocus: function() {
31023         this.buttons.each(function(item){
31024            item.enable();
31025         });
31026     },
31027     toggleSourceEdit : function(sourceEditMode){
31028         
31029           
31030         if(sourceEditMode){
31031             Roo.log("disabling buttons");
31032            this.buttons.each( function(item){
31033                 if(item.cmd != 'pencil'){
31034                     item.disable();
31035                 }
31036             });
31037           
31038         }else{
31039             Roo.log("enabling buttons");
31040             if(this.editorcore.initialized){
31041                 this.buttons.each( function(item){
31042                     item.enable();
31043                 });
31044             }
31045             
31046         }
31047         Roo.log("calling toggole on editor");
31048         // tell the editor that it's been pressed..
31049         this.editor.toggleSourceEdit(sourceEditMode);
31050        
31051     }
31052 });
31053
31054
31055
31056
31057  
31058 /*
31059  * - LGPL
31060  */
31061
31062 /**
31063  * @class Roo.bootstrap.form.Markdown
31064  * @extends Roo.bootstrap.form.TextArea
31065  * Bootstrap Showdown editable area
31066  * @cfg {string} content
31067  * 
31068  * @constructor
31069  * Create a new Showdown
31070  */
31071
31072 Roo.bootstrap.form.Markdown = function(config){
31073     Roo.bootstrap.form.Markdown.superclass.constructor.call(this, config);
31074    
31075 };
31076
31077 Roo.extend(Roo.bootstrap.form.Markdown, Roo.bootstrap.form.TextArea,  {
31078     
31079     editing :false,
31080     
31081     initEvents : function()
31082     {
31083         
31084         Roo.bootstrap.form.TextArea.prototype.initEvents.call(this);
31085         this.markdownEl = this.el.createChild({
31086             cls : 'roo-markdown-area'
31087         });
31088         this.inputEl().addClass('d-none');
31089         if (this.getValue() == '') {
31090             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
31091             
31092         } else {
31093             this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
31094         }
31095         this.markdownEl.on('click', this.toggleTextEdit, this);
31096         this.on('blur', this.toggleTextEdit, this);
31097         this.on('specialkey', this.resizeTextArea, this);
31098     },
31099     
31100     toggleTextEdit : function()
31101     {
31102         var sh = this.markdownEl.getHeight();
31103         this.inputEl().addClass('d-none');
31104         this.markdownEl.addClass('d-none');
31105         if (!this.editing) {
31106             // show editor?
31107             this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
31108             this.inputEl().removeClass('d-none');
31109             this.inputEl().focus();
31110             this.editing = true;
31111             return;
31112         }
31113         // show showdown...
31114         this.updateMarkdown();
31115         this.markdownEl.removeClass('d-none');
31116         this.editing = false;
31117         return;
31118     },
31119     updateMarkdown : function()
31120     {
31121         if (this.getValue() == '') {
31122             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
31123             return;
31124         }
31125  
31126         this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
31127     },
31128     
31129     resizeTextArea: function () {
31130         
31131         var sh = 100;
31132         Roo.log([sh, this.getValue().split("\n").length * 30]);
31133         this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
31134     },
31135     setValue : function(val)
31136     {
31137         Roo.bootstrap.form.TextArea.prototype.setValue.call(this,val);
31138         if (!this.editing) {
31139             this.updateMarkdown();
31140         }
31141         
31142     },
31143     focus : function()
31144     {
31145         if (!this.editing) {
31146             this.toggleTextEdit();
31147         }
31148         
31149     }
31150
31151
31152 });/*
31153  * Based on:
31154  * Ext JS Library 1.1.1
31155  * Copyright(c) 2006-2007, Ext JS, LLC.
31156  *
31157  * Originally Released Under LGPL - original licence link has changed is not relivant.
31158  *
31159  * Fork - LGPL
31160  * <script type="text/javascript">
31161  */
31162  
31163 /**
31164  * @class Roo.bootstrap.PagingToolbar
31165  * @extends Roo.bootstrap.nav.Simplebar
31166  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
31167  * @constructor
31168  * Create a new PagingToolbar
31169  * @param {Object} config The config object
31170  * @param {Roo.data.Store} store
31171  */
31172 Roo.bootstrap.PagingToolbar = function(config)
31173 {
31174     // old args format still supported... - xtype is prefered..
31175         // created from xtype...
31176     
31177     this.ds = config.dataSource;
31178     
31179     if (config.store && !this.ds) {
31180         this.store= Roo.factory(config.store, Roo.data);
31181         this.ds = this.store;
31182         this.ds.xmodule = this.xmodule || false;
31183     }
31184     
31185     this.toolbarItems = [];
31186     if (config.items) {
31187         this.toolbarItems = config.items;
31188     }
31189     
31190     Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
31191     
31192     this.cursor = 0;
31193     
31194     if (this.ds) { 
31195         this.bind(this.ds);
31196     }
31197     
31198     if (Roo.bootstrap.version == 4) {
31199         this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
31200     } else {
31201         this.navgroup = new Roo.bootstrap.nav.Group({ cls: 'pagination' });
31202     }
31203     
31204 };
31205
31206 Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.nav.Simplebar, {
31207     /**
31208      * @cfg {Roo.bootstrap.Button} buttons[]
31209      * Buttons for the toolbar
31210      */
31211      /**
31212      * @cfg {Roo.data.Store} store
31213      * The underlying data store providing the paged data
31214      */
31215     /**
31216      * @cfg {String/HTMLElement/Element} container
31217      * container The id or element that will contain the toolbar
31218      */
31219     /**
31220      * @cfg {Boolean} displayInfo
31221      * True to display the displayMsg (defaults to false)
31222      */
31223     /**
31224      * @cfg {Number} pageSize
31225      * The number of records to display per page (defaults to 20)
31226      */
31227     pageSize: 20,
31228     /**
31229      * @cfg {String} displayMsg
31230      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
31231      */
31232     displayMsg : 'Displaying {0} - {1} of {2}',
31233     /**
31234      * @cfg {String} emptyMsg
31235      * The message to display when no records are found (defaults to "No data to display")
31236      */
31237     emptyMsg : 'No data to display',
31238     /**
31239      * Customizable piece of the default paging text (defaults to "Page")
31240      * @type String
31241      */
31242     beforePageText : "Page",
31243     /**
31244      * Customizable piece of the default paging text (defaults to "of %0")
31245      * @type String
31246      */
31247     afterPageText : "of {0}",
31248     /**
31249      * Customizable piece of the default paging text (defaults to "First Page")
31250      * @type String
31251      */
31252     firstText : "First Page",
31253     /**
31254      * Customizable piece of the default paging text (defaults to "Previous Page")
31255      * @type String
31256      */
31257     prevText : "Previous Page",
31258     /**
31259      * Customizable piece of the default paging text (defaults to "Next Page")
31260      * @type String
31261      */
31262     nextText : "Next Page",
31263     /**
31264      * Customizable piece of the default paging text (defaults to "Last Page")
31265      * @type String
31266      */
31267     lastText : "Last Page",
31268     /**
31269      * Customizable piece of the default paging text (defaults to "Refresh")
31270      * @type String
31271      */
31272     refreshText : "Refresh",
31273
31274     buttons : false,
31275     // private
31276     onRender : function(ct, position) 
31277     {
31278         Roo.bootstrap.PagingToolbar.superclass.onRender.call(this, ct, position);
31279         this.navgroup.parentId = this.id;
31280         this.navgroup.onRender(this.el, null);
31281         // add the buttons to the navgroup
31282         
31283         if(this.displayInfo){
31284             this.el.select('ul.navbar-nav',true).first().createChild({cls:'x-paging-info'});
31285             this.displayEl = this.el.select('.x-paging-info', true).first();
31286 //            var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info', preventDefault : true } );
31287 //            this.displayEl = navel.el.select('span',true).first();
31288         }
31289         
31290         var _this = this;
31291         
31292         if(this.buttons){
31293             Roo.each(_this.buttons, function(e){ // this might need to use render????
31294                Roo.factory(e).render(_this.el);
31295             });
31296         }
31297             
31298         Roo.each(_this.toolbarItems, function(e) {
31299             _this.navgroup.addItem(e);
31300         });
31301         
31302         
31303         this.first = this.navgroup.addItem({
31304             tooltip: this.firstText,
31305             cls: "prev btn-outline-secondary",
31306             html : ' <i class="fa fa-step-backward"></i>',
31307             disabled: true,
31308             preventDefault: true,
31309             listeners : { click : this.onClick.createDelegate(this, ["first"]) }
31310         });
31311         
31312         this.prev =  this.navgroup.addItem({
31313             tooltip: this.prevText,
31314             cls: "prev btn-outline-secondary",
31315             html : ' <i class="fa fa-backward"></i>',
31316             disabled: true,
31317             preventDefault: true,
31318             listeners : { click :  this.onClick.createDelegate(this, ["prev"]) }
31319         });
31320     //this.addSeparator();
31321         
31322         
31323         var field = this.navgroup.addItem( {
31324             tagtype : 'span',
31325             cls : 'x-paging-position  btn-outline-secondary',
31326              disabled: true,
31327             html : this.beforePageText  +
31328                 '<input type="text" size="3" value="1" class="x-grid-page-number">' +
31329                 '<span class="x-paging-after">' +  String.format(this.afterPageText, 1) + '</span>'
31330          } ); //?? escaped?
31331         
31332         this.field = field.el.select('input', true).first();
31333         this.field.on("keydown", this.onPagingKeydown, this);
31334         this.field.on("focus", function(){this.dom.select();});
31335     
31336     
31337         this.afterTextEl =  field.el.select('.x-paging-after',true).first();
31338         //this.field.setHeight(18);
31339         //this.addSeparator();
31340         this.next = this.navgroup.addItem({
31341             tooltip: this.nextText,
31342             cls: "next btn-outline-secondary",
31343             html : ' <i class="fa fa-forward"></i>',
31344             disabled: true,
31345             preventDefault: true,
31346             listeners : { click :  this.onClick.createDelegate(this, ["next"]) }
31347         });
31348         this.last = this.navgroup.addItem({
31349             tooltip: this.lastText,
31350             html : ' <i class="fa fa-step-forward"></i>',
31351             cls: "next btn-outline-secondary",
31352             disabled: true,
31353             preventDefault: true,
31354             listeners : { click :  this.onClick.createDelegate(this, ["last"]) }
31355         });
31356     //this.addSeparator();
31357         this.loading = this.navgroup.addItem({
31358             tooltip: this.refreshText,
31359             cls: "btn-outline-secondary",
31360             html : ' <i class="fa fa-refresh"></i>',
31361             preventDefault: true,
31362             listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
31363         });
31364         
31365     },
31366
31367     // private
31368     updateInfo : function(){
31369         if(this.displayEl){
31370             var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
31371             var msg = count == 0 ?
31372                 this.emptyMsg :
31373                 String.format(
31374                     this.displayMsg,
31375                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
31376                 );
31377             this.displayEl.update(msg);
31378         }
31379     },
31380
31381     // private
31382     onLoad : function(ds, r, o)
31383     {
31384         this.cursor = o.params && o.params.start ? o.params.start : 0;
31385         
31386         var d = this.getPageData(),
31387             ap = d.activePage,
31388             ps = d.pages;
31389         
31390         
31391         this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, d.pages);
31392         this.field.dom.value = ap;
31393         this.first.setDisabled(ap == 1);
31394         this.prev.setDisabled(ap == 1);
31395         this.next.setDisabled(ap == ps);
31396         this.last.setDisabled(ap == ps);
31397         this.loading.enable();
31398         this.updateInfo();
31399     },
31400
31401     // private
31402     getPageData : function(){
31403         var total = this.ds.getTotalCount();
31404         return {
31405             total : total,
31406             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
31407             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
31408         };
31409     },
31410
31411     // private
31412     onLoadError : function(proxy, o){
31413         this.loading.enable();
31414         if (this.ds.events.loadexception.listeners.length  < 2) {
31415             // nothing has been assigned to loadexception except this...
31416             // so 
31417             Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
31418
31419         }
31420     },
31421
31422     // private
31423     onPagingKeydown : function(e){
31424         var k = e.getKey();
31425         var d = this.getPageData();
31426         if(k == e.RETURN){
31427             var v = this.field.dom.value, pageNum;
31428             if(!v || isNaN(pageNum = parseInt(v, 10))){
31429                 this.field.dom.value = d.activePage;
31430                 return;
31431             }
31432             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
31433             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
31434             e.stopEvent();
31435         }
31436         else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
31437         {
31438           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
31439           this.field.dom.value = pageNum;
31440           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
31441           e.stopEvent();
31442         }
31443         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
31444         {
31445           var v = this.field.dom.value, pageNum; 
31446           var increment = (e.shiftKey) ? 10 : 1;
31447           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
31448                 increment *= -1;
31449           }
31450           if(!v || isNaN(pageNum = parseInt(v, 10))) {
31451             this.field.dom.value = d.activePage;
31452             return;
31453           }
31454           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
31455           {
31456             this.field.dom.value = parseInt(v, 10) + increment;
31457             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
31458             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
31459           }
31460           e.stopEvent();
31461         }
31462     },
31463
31464     // private
31465     beforeLoad : function(){
31466         if(this.loading){
31467             this.loading.disable();
31468         }
31469     },
31470
31471     // private
31472     onClick : function(which){
31473         
31474         var ds = this.ds;
31475         if (!ds) {
31476             return;
31477         }
31478         
31479         switch(which){
31480             case "first":
31481                 ds.load({params:{start: 0, limit: this.pageSize}});
31482             break;
31483             case "prev":
31484                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
31485             break;
31486             case "next":
31487                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
31488             break;
31489             case "last":
31490                 var total = ds.getTotalCount();
31491                 var extra = total % this.pageSize;
31492                 var lastStart = extra ? (total - extra) : total-this.pageSize;
31493                 ds.load({params:{start: lastStart, limit: this.pageSize}});
31494             break;
31495             case "refresh":
31496                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
31497             break;
31498         }
31499     },
31500
31501     /**
31502      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
31503      * @param {Roo.data.Store} store The data store to unbind
31504      */
31505     unbind : function(ds){
31506         ds.un("beforeload", this.beforeLoad, this);
31507         ds.un("load", this.onLoad, this);
31508         ds.un("loadexception", this.onLoadError, this);
31509         ds.un("remove", this.updateInfo, this);
31510         ds.un("add", this.updateInfo, this);
31511         this.ds = undefined;
31512     },
31513
31514     /**
31515      * Binds the paging toolbar to the specified {@link Roo.data.Store}
31516      * @param {Roo.data.Store} store The data store to bind
31517      */
31518     bind : function(ds){
31519         ds.on("beforeload", this.beforeLoad, this);
31520         ds.on("load", this.onLoad, this);
31521         ds.on("loadexception", this.onLoadError, this);
31522         ds.on("remove", this.updateInfo, this);
31523         ds.on("add", this.updateInfo, this);
31524         this.ds = ds;
31525     }
31526 });/*
31527  * - LGPL
31528  *
31529  * element
31530  * 
31531  */
31532
31533 /**
31534  * @class Roo.bootstrap.MessageBar
31535  * @extends Roo.bootstrap.Component
31536  * Bootstrap MessageBar class
31537  * @cfg {String} html contents of the MessageBar
31538  * @cfg {String} weight (info | success | warning | danger) default info
31539  * @cfg {String} beforeClass insert the bar before the given class
31540  * @cfg {Boolean} closable (true | false) default false
31541  * @cfg {Boolean} fixed (true | false) default false, fix the bar at the top
31542  * 
31543  * @constructor
31544  * Create a new Element
31545  * @param {Object} config The config object
31546  */
31547
31548 Roo.bootstrap.MessageBar = function(config){
31549     Roo.bootstrap.MessageBar.superclass.constructor.call(this, config);
31550 };
31551
31552 Roo.extend(Roo.bootstrap.MessageBar, Roo.bootstrap.Component,  {
31553     
31554     html: '',
31555     weight: 'info',
31556     closable: false,
31557     fixed: false,
31558     beforeClass: 'bootstrap-sticky-wrap',
31559     
31560     getAutoCreate : function(){
31561         
31562         var cfg = {
31563             tag: 'div',
31564             cls: 'alert alert-dismissable alert-' + this.weight,
31565             cn: [
31566                 {
31567                     tag: 'span',
31568                     cls: 'message',
31569                     html: this.html || ''
31570                 }
31571             ]
31572         };
31573         
31574         if(this.fixed){
31575             cfg.cls += ' alert-messages-fixed';
31576         }
31577         
31578         if(this.closable){
31579             cfg.cn.push({
31580                 tag: 'button',
31581                 cls: 'close',
31582                 html: 'x'
31583             });
31584         }
31585         
31586         return cfg;
31587     },
31588     
31589     onRender : function(ct, position)
31590     {
31591         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
31592         
31593         if(!this.el){
31594             var cfg = Roo.apply({},  this.getAutoCreate());
31595             cfg.id = Roo.id();
31596             
31597             if (this.cls) {
31598                 cfg.cls += ' ' + this.cls;
31599             }
31600             if (this.style) {
31601                 cfg.style = this.style;
31602             }
31603             this.el = Roo.get(document.body).createChild(cfg, Roo.select('.'+this.beforeClass, true).first());
31604             
31605             this.el.setVisibilityMode(Roo.Element.DISPLAY);
31606         }
31607         
31608         this.el.select('>button.close').on('click', this.hide, this);
31609         
31610     },
31611     
31612     show : function()
31613     {
31614         if (!this.rendered) {
31615             this.render();
31616         }
31617         
31618         this.el.show();
31619         
31620         this.fireEvent('show', this);
31621         
31622     },
31623     
31624     hide : function()
31625     {
31626         if (!this.rendered) {
31627             this.render();
31628         }
31629         
31630         this.el.hide();
31631         
31632         this.fireEvent('hide', this);
31633     },
31634     
31635     update : function()
31636     {
31637 //        var e = this.el.dom.firstChild;
31638 //        
31639 //        if(this.closable){
31640 //            e = e.nextSibling;
31641 //        }
31642 //        
31643 //        e.data = this.html || '';
31644
31645         this.el.select('>.message', true).first().dom.innerHTML = this.html || '';
31646     }
31647    
31648 });
31649
31650  
31651
31652      /*
31653  * - LGPL
31654  *
31655  * Graph
31656  * 
31657  */
31658
31659
31660 /**
31661  * @class Roo.bootstrap.Graph
31662  * @extends Roo.bootstrap.Component
31663  * Bootstrap Graph class
31664 > Prameters
31665  -sm {number} sm 4
31666  -md {number} md 5
31667  @cfg {String} graphtype  bar | vbar | pie
31668  @cfg {number} g_x coodinator | centre x (pie)
31669  @cfg {number} g_y coodinator | centre y (pie)
31670  @cfg {number} g_r radius (pie)
31671  @cfg {number} g_height height of the chart (respected by all elements in the set)
31672  @cfg {number} g_width width of the chart (respected by all elements in the set)
31673  @cfg {Object} title The title of the chart
31674     
31675  -{Array}  values
31676  -opts (object) options for the chart 
31677      o {
31678      o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
31679      o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
31680      o vgutter (number)
31681      o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
31682      o stacked (boolean) whether or not to tread values as in a stacked bar chart
31683      o to
31684      o stretch (boolean)
31685      o }
31686  -opts (object) options for the pie
31687      o{
31688      o cut
31689      o startAngle (number)
31690      o endAngle (number)
31691      } 
31692  *
31693  * @constructor
31694  * Create a new Input
31695  * @param {Object} config The config object
31696  */
31697
31698 Roo.bootstrap.Graph = function(config){
31699     Roo.bootstrap.Graph.superclass.constructor.call(this, config);
31700     
31701     this.addEvents({
31702         // img events
31703         /**
31704          * @event click
31705          * The img click event for the img.
31706          * @param {Roo.EventObject} e
31707          */
31708         "click" : true
31709     });
31710 };
31711
31712 Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
31713     
31714     sm: 4,
31715     md: 5,
31716     graphtype: 'bar',
31717     g_height: 250,
31718     g_width: 400,
31719     g_x: 50,
31720     g_y: 50,
31721     g_r: 30,
31722     opts:{
31723         //g_colors: this.colors,
31724         g_type: 'soft',
31725         g_gutter: '20%'
31726
31727     },
31728     title : false,
31729
31730     getAutoCreate : function(){
31731         
31732         var cfg = {
31733             tag: 'div',
31734             html : null
31735         };
31736         
31737         
31738         return  cfg;
31739     },
31740
31741     onRender : function(ct,position){
31742         
31743         
31744         Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
31745         
31746         if (typeof(Raphael) == 'undefined') {
31747             Roo.bootstrap.MessageBox.alert("Error","Raphael is not availabe");
31748             return;
31749         }
31750         
31751         this.raphael = Raphael(this.el.dom);
31752         
31753                     // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
31754                     // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
31755                     // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
31756                     // txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
31757                 /*
31758                 r.text(160, 10, "Single Series Chart").attr(txtattr);
31759                 r.text(480, 10, "Multiline Series Chart").attr(txtattr);
31760                 r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
31761                 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
31762                 
31763                 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
31764                 r.barchart(330, 10, 300, 220, data1);
31765                 r.barchart(10, 250, 300, 220, data2, {stacked: true});
31766                 r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
31767                 */
31768                 
31769                 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
31770                 // r.barchart(30, 30, 560, 250,  xdata, {
31771                 //    labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
31772                 //     axis : "0 0 1 1",
31773                 //     axisxlabels :  xdata
31774                 //     //yvalues : cols,
31775                    
31776                 // });
31777 //        var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
31778 //        
31779 //        this.load(null,xdata,{
31780 //                axis : "0 0 1 1",
31781 //                axisxlabels :  xdata
31782 //                });
31783
31784     },
31785
31786     load : function(graphtype,xdata,opts)
31787     {
31788         this.raphael.clear();
31789         if(!graphtype) {
31790             graphtype = this.graphtype;
31791         }
31792         if(!opts){
31793             opts = this.opts;
31794         }
31795         var r = this.raphael,
31796             fin = function () {
31797                 this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
31798             },
31799             fout = function () {
31800                 this.flag.animate({opacity: 0}, 300, function () {this.remove();});
31801             },
31802             pfin = function() {
31803                 this.sector.stop();
31804                 this.sector.scale(1.1, 1.1, this.cx, this.cy);
31805
31806                 if (this.label) {
31807                     this.label[0].stop();
31808                     this.label[0].attr({ r: 7.5 });
31809                     this.label[1].attr({ "font-weight": 800 });
31810                 }
31811             },
31812             pfout = function() {
31813                 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
31814
31815                 if (this.label) {
31816                     this.label[0].animate({ r: 5 }, 500, "bounce");
31817                     this.label[1].attr({ "font-weight": 400 });
31818                 }
31819             };
31820
31821         switch(graphtype){
31822             case 'bar':
31823                 this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
31824                 break;
31825             case 'hbar':
31826                 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
31827                 break;
31828             case 'pie':
31829 //                opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west", 
31830 //                href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
31831 //            
31832                 this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts).hover(pfin, pfout);
31833                 
31834                 break;
31835
31836         }
31837         
31838         if(this.title){
31839             this.raphael.text(this.title.x, this.title.y, this.title.text).attr(this.title.attr);
31840         }
31841         
31842     },
31843     
31844     setTitle: function(o)
31845     {
31846         this.title = o;
31847     },
31848     
31849     initEvents: function() {
31850         
31851         if(!this.href){
31852             this.el.on('click', this.onClick, this);
31853         }
31854     },
31855     
31856     onClick : function(e)
31857     {
31858         Roo.log('img onclick');
31859         this.fireEvent('click', this, e);
31860     }
31861    
31862 });
31863
31864  
31865 Roo.bootstrap.dash = {};/*
31866  * - LGPL
31867  *
31868  * numberBox
31869  * 
31870  */
31871 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
31872
31873 /**
31874  * @class Roo.bootstrap.dash.NumberBox
31875  * @extends Roo.bootstrap.Component
31876  * Bootstrap NumberBox class
31877  * @cfg {String} headline Box headline
31878  * @cfg {String} content Box content
31879  * @cfg {String} icon Box icon
31880  * @cfg {String} footer Footer text
31881  * @cfg {String} fhref Footer href
31882  * 
31883  * @constructor
31884  * Create a new NumberBox
31885  * @param {Object} config The config object
31886  */
31887
31888
31889 Roo.bootstrap.dash.NumberBox = function(config){
31890     Roo.bootstrap.dash.NumberBox.superclass.constructor.call(this, config);
31891     
31892 };
31893
31894 Roo.extend(Roo.bootstrap.dash.NumberBox, Roo.bootstrap.Component,  {
31895     
31896     headline : '',
31897     content : '',
31898     icon : '',
31899     footer : '',
31900     fhref : '',
31901     ficon : '',
31902     
31903     getAutoCreate : function(){
31904         
31905         var cfg = {
31906             tag : 'div',
31907             cls : 'small-box ',
31908             cn : [
31909                 {
31910                     tag : 'div',
31911                     cls : 'inner',
31912                     cn :[
31913                         {
31914                             tag : 'h3',
31915                             cls : 'roo-headline',
31916                             html : this.headline
31917                         },
31918                         {
31919                             tag : 'p',
31920                             cls : 'roo-content',
31921                             html : this.content
31922                         }
31923                     ]
31924                 }
31925             ]
31926         };
31927         
31928         if(this.icon){
31929             cfg.cn.push({
31930                 tag : 'div',
31931                 cls : 'icon',
31932                 cn :[
31933                     {
31934                         tag : 'i',
31935                         cls : 'ion ' + this.icon
31936                     }
31937                 ]
31938             });
31939         }
31940         
31941         if(this.footer){
31942             var footer = {
31943                 tag : 'a',
31944                 cls : 'small-box-footer',
31945                 href : this.fhref || '#',
31946                 html : this.footer
31947             };
31948             
31949             cfg.cn.push(footer);
31950             
31951         }
31952         
31953         return  cfg;
31954     },
31955
31956     onRender : function(ct,position){
31957         Roo.bootstrap.dash.NumberBox.superclass.onRender.call(this,ct,position);
31958
31959
31960        
31961                 
31962     },
31963
31964     setHeadline: function (value)
31965     {
31966         this.el.select('.roo-headline',true).first().dom.innerHTML = value;
31967     },
31968     
31969     setFooter: function (value, href)
31970     {
31971         this.el.select('a.small-box-footer',true).first().dom.innerHTML = value;
31972         
31973         if(href){
31974             this.el.select('a.small-box-footer',true).first().attr('href', href);
31975         }
31976         
31977     },
31978
31979     setContent: function (value)
31980     {
31981         this.el.select('.roo-content',true).first().dom.innerHTML = value;
31982     },
31983
31984     initEvents: function() 
31985     {   
31986         
31987     }
31988     
31989 });
31990
31991  
31992 /*
31993  * - LGPL
31994  *
31995  * TabBox
31996  * 
31997  */
31998 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
31999
32000 /**
32001  * @class Roo.bootstrap.dash.TabBox
32002  * @extends Roo.bootstrap.Component
32003  * @children Roo.bootstrap.dash.TabPane
32004  * Bootstrap TabBox class
32005  * @cfg {String} title Title of the TabBox
32006  * @cfg {String} icon Icon of the TabBox
32007  * @cfg {Boolean} showtabs (true|false) show the tabs default true
32008  * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
32009  * 
32010  * @constructor
32011  * Create a new TabBox
32012  * @param {Object} config The config object
32013  */
32014
32015
32016 Roo.bootstrap.dash.TabBox = function(config){
32017     Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
32018     this.addEvents({
32019         // raw events
32020         /**
32021          * @event addpane
32022          * When a pane is added
32023          * @param {Roo.bootstrap.dash.TabPane} pane
32024          */
32025         "addpane" : true,
32026         /**
32027          * @event activatepane
32028          * When a pane is activated
32029          * @param {Roo.bootstrap.dash.TabPane} pane
32030          */
32031         "activatepane" : true
32032         
32033          
32034     });
32035     
32036     this.panes = [];
32037 };
32038
32039 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
32040
32041     title : '',
32042     icon : false,
32043     showtabs : true,
32044     tabScrollable : false,
32045     
32046     getChildContainer : function()
32047     {
32048         return this.el.select('.tab-content', true).first();
32049     },
32050     
32051     getAutoCreate : function(){
32052         
32053         var header = {
32054             tag: 'li',
32055             cls: 'pull-left header',
32056             html: this.title,
32057             cn : []
32058         };
32059         
32060         if(this.icon){
32061             header.cn.push({
32062                 tag: 'i',
32063                 cls: 'fa ' + this.icon
32064             });
32065         }
32066         
32067         var h = {
32068             tag: 'ul',
32069             cls: 'nav nav-tabs pull-right',
32070             cn: [
32071                 header
32072             ]
32073         };
32074         
32075         if(this.tabScrollable){
32076             h = {
32077                 tag: 'div',
32078                 cls: 'tab-header',
32079                 cn: [
32080                     {
32081                         tag: 'ul',
32082                         cls: 'nav nav-tabs pull-right',
32083                         cn: [
32084                             header
32085                         ]
32086                     }
32087                 ]
32088             };
32089         }
32090         
32091         var cfg = {
32092             tag: 'div',
32093             cls: 'nav-tabs-custom',
32094             cn: [
32095                 h,
32096                 {
32097                     tag: 'div',
32098                     cls: 'tab-content no-padding',
32099                     cn: []
32100                 }
32101             ]
32102         };
32103
32104         return  cfg;
32105     },
32106     initEvents : function()
32107     {
32108         //Roo.log('add add pane handler');
32109         this.on('addpane', this.onAddPane, this);
32110     },
32111      /**
32112      * Updates the box title
32113      * @param {String} html to set the title to.
32114      */
32115     setTitle : function(value)
32116     {
32117         this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
32118     },
32119     onAddPane : function(pane)
32120     {
32121         this.panes.push(pane);
32122         //Roo.log('addpane');
32123         //Roo.log(pane);
32124         // tabs are rendere left to right..
32125         if(!this.showtabs){
32126             return;
32127         }
32128         
32129         var ctr = this.el.select('.nav-tabs', true).first();
32130          
32131          
32132         var existing = ctr.select('.nav-tab',true);
32133         var qty = existing.getCount();;
32134         
32135         
32136         var tab = ctr.createChild({
32137             tag : 'li',
32138             cls : 'nav-tab' + (qty ? '' : ' active'),
32139             cn : [
32140                 {
32141                     tag : 'a',
32142                     href:'#',
32143                     html : pane.title
32144                 }
32145             ]
32146         }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
32147         pane.tab = tab;
32148         
32149         tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
32150         if (!qty) {
32151             pane.el.addClass('active');
32152         }
32153         
32154                 
32155     },
32156     onTabClick : function(ev,un,ob,pane)
32157     {
32158         //Roo.log('tab - prev default');
32159         ev.preventDefault();
32160         
32161         
32162         this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
32163         pane.tab.addClass('active');
32164         //Roo.log(pane.title);
32165         this.getChildContainer().select('.tab-pane',true).removeClass('active');
32166         // technically we should have a deactivate event.. but maybe add later.
32167         // and it should not de-activate the selected tab...
32168         this.fireEvent('activatepane', pane);
32169         pane.el.addClass('active');
32170         pane.fireEvent('activate');
32171         
32172         
32173     },
32174     
32175     getActivePane : function()
32176     {
32177         var r = false;
32178         Roo.each(this.panes, function(p) {
32179             if(p.el.hasClass('active')){
32180                 r = p;
32181                 return false;
32182             }
32183             
32184             return;
32185         });
32186         
32187         return r;
32188     }
32189     
32190     
32191 });
32192
32193  
32194 /*
32195  * - LGPL
32196  *
32197  * Tab pane
32198  * 
32199  */
32200 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
32201 /**
32202  * @class Roo.bootstrap.TabPane
32203  * @extends Roo.bootstrap.Component
32204  * @children  Roo.bootstrap.Graph Roo.bootstrap.Column
32205  * Bootstrap TabPane class
32206  * @cfg {Boolean} active (false | true) Default false
32207  * @cfg {String} title title of panel
32208
32209  * 
32210  * @constructor
32211  * Create a new TabPane
32212  * @param {Object} config The config object
32213  */
32214
32215 Roo.bootstrap.dash.TabPane = function(config){
32216     Roo.bootstrap.dash.TabPane.superclass.constructor.call(this, config);
32217     
32218     this.addEvents({
32219         // raw events
32220         /**
32221          * @event activate
32222          * When a pane is activated
32223          * @param {Roo.bootstrap.dash.TabPane} pane
32224          */
32225         "activate" : true
32226          
32227     });
32228 };
32229
32230 Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component,  {
32231     
32232     active : false,
32233     title : '',
32234     
32235     // the tabBox that this is attached to.
32236     tab : false,
32237      
32238     getAutoCreate : function() 
32239     {
32240         var cfg = {
32241             tag: 'div',
32242             cls: 'tab-pane'
32243         };
32244         
32245         if(this.active){
32246             cfg.cls += ' active';
32247         }
32248         
32249         return cfg;
32250     },
32251     initEvents  : function()
32252     {
32253         //Roo.log('trigger add pane handler');
32254         this.parent().fireEvent('addpane', this)
32255     },
32256     
32257      /**
32258      * Updates the tab title 
32259      * @param {String} html to set the title to.
32260      */
32261     setTitle: function(str)
32262     {
32263         if (!this.tab) {
32264             return;
32265         }
32266         this.title = str;
32267         this.tab.select('a', true).first().dom.innerHTML = str;
32268         
32269     }
32270     
32271     
32272     
32273 });
32274
32275  
32276
32277
32278  /*
32279  * - LGPL
32280  *
32281  * Tooltip
32282  * 
32283  */
32284
32285 /**
32286  * @class Roo.bootstrap.Tooltip
32287  * Bootstrap Tooltip class
32288  * This is basic at present - all componets support it by default, however they should add tooltipEl() method
32289  * to determine which dom element triggers the tooltip.
32290  * 
32291  * It needs to add support for additional attributes like tooltip-position
32292  * 
32293  * @constructor
32294  * Create a new Toolti
32295  * @param {Object} config The config object
32296  */
32297
32298 Roo.bootstrap.Tooltip = function(config){
32299     Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
32300     
32301     this.alignment = Roo.bootstrap.Tooltip.alignment;
32302     
32303     if(typeof(config) != 'undefined' && typeof(config.alignment) != 'undefined'){
32304         this.alignment = config.alignment;
32305     }
32306     
32307 };
32308
32309 Roo.apply(Roo.bootstrap.Tooltip, {
32310     /**
32311      * @function init initialize tooltip monitoring.
32312      * @static
32313      */
32314     currentEl : false,
32315     currentTip : false,
32316     currentRegion : false,
32317     
32318     //  init : delay?
32319     
32320     init : function()
32321     {
32322         Roo.get(document).on('mouseover', this.enter ,this);
32323         Roo.get(document).on('mouseout', this.leave, this);
32324          
32325         
32326         this.currentTip = new Roo.bootstrap.Tooltip();
32327     },
32328     
32329     enter : function(ev)
32330     {
32331         var dom = ev.getTarget();
32332         
32333         //Roo.log(['enter',dom]);
32334         var el = Roo.fly(dom);
32335         if (this.currentEl) {
32336             //Roo.log(dom);
32337             //Roo.log(this.currentEl);
32338             //Roo.log(this.currentEl.contains(dom));
32339             if (this.currentEl == el) {
32340                 return;
32341             }
32342             if (dom != this.currentEl.dom && this.currentEl.contains(dom)) {
32343                 return;
32344             }
32345
32346         }
32347         
32348         if (this.currentTip.el) {
32349             this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
32350         }    
32351         //Roo.log(ev);
32352         
32353         if(!el || el.dom == document){
32354             return;
32355         }
32356         
32357         var bindEl = el; 
32358         var pel = false;
32359         if (!el.attr('tooltip')) {
32360             pel = el.findParent("[tooltip]");
32361             if (pel) {
32362                 bindEl = Roo.get(pel);
32363             }
32364         }
32365         
32366        
32367         
32368         // you can not look for children, as if el is the body.. then everythign is the child..
32369         if (!pel && !el.attr('tooltip')) { //
32370             if (!el.select("[tooltip]").elements.length) {
32371                 return;
32372             }
32373             // is the mouse over this child...?
32374             bindEl = el.select("[tooltip]").first();
32375             var xy = ev.getXY();
32376             if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
32377                 //Roo.log("not in region.");
32378                 return;
32379             }
32380             //Roo.log("child element over..");
32381             
32382         }
32383         this.currentEl = el;
32384         this.currentTip.bind(bindEl);
32385         this.currentRegion = Roo.lib.Region.getRegion(dom);
32386         this.currentTip.enter();
32387         
32388     },
32389     leave : function(ev)
32390     {
32391         var dom = ev.getTarget();
32392         //Roo.log(['leave',dom]);
32393         if (!this.currentEl) {
32394             return;
32395         }
32396         
32397         
32398         if (dom != this.currentEl.dom) {
32399             return;
32400         }
32401         var xy = ev.getXY();
32402         if (this.currentRegion.contains( new Roo.lib.Region( xy[1], xy[0] ,xy[1], xy[0]  ))) {
32403             return;
32404         }
32405         // only activate leave if mouse cursor is outside... bounding box..
32406         
32407         
32408         
32409         
32410         if (this.currentTip) {
32411             this.currentTip.leave();
32412         }
32413         //Roo.log('clear currentEl');
32414         this.currentEl = false;
32415         
32416         
32417     },
32418     alignment : {
32419         'left' : ['r-l', [-2,0], 'right'],
32420         'right' : ['l-r', [2,0], 'left'],
32421         'bottom' : ['t-b', [0,2], 'top'],
32422         'top' : [ 'b-t', [0,-2], 'bottom']
32423     }
32424     
32425 });
32426
32427
32428 Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
32429     
32430     
32431     bindEl : false,
32432     
32433     delay : null, // can be { show : 300 , hide: 500}
32434     
32435     timeout : null,
32436     
32437     hoverState : null, //???
32438     
32439     placement : 'bottom', 
32440     
32441     alignment : false,
32442     
32443     getAutoCreate : function(){
32444     
32445         var cfg = {
32446            cls : 'tooltip',   
32447            role : 'tooltip',
32448            cn : [
32449                 {
32450                     cls : 'tooltip-arrow arrow'
32451                 },
32452                 {
32453                     cls : 'tooltip-inner'
32454                 }
32455            ]
32456         };
32457         
32458         return cfg;
32459     },
32460     bind : function(el)
32461     {
32462         this.bindEl = el;
32463     },
32464     
32465     initEvents : function()
32466     {
32467         this.arrowEl = this.el.select('.arrow', true).first();
32468         this.innerEl = this.el.select('.tooltip-inner', true).first();
32469     },
32470     
32471     enter : function () {
32472        
32473         if (this.timeout != null) {
32474             clearTimeout(this.timeout);
32475         }
32476         
32477         this.hoverState = 'in';
32478          //Roo.log("enter - show");
32479         if (!this.delay || !this.delay.show) {
32480             this.show();
32481             return;
32482         }
32483         var _t = this;
32484         this.timeout = setTimeout(function () {
32485             if (_t.hoverState == 'in') {
32486                 _t.show();
32487             }
32488         }, this.delay.show);
32489     },
32490     leave : function()
32491     {
32492         clearTimeout(this.timeout);
32493     
32494         this.hoverState = 'out';
32495          if (!this.delay || !this.delay.hide) {
32496             this.hide();
32497             return;
32498         }
32499        
32500         var _t = this;
32501         this.timeout = setTimeout(function () {
32502             //Roo.log("leave - timeout");
32503             
32504             if (_t.hoverState == 'out') {
32505                 _t.hide();
32506                 Roo.bootstrap.Tooltip.currentEl = false;
32507             }
32508         }, delay);
32509     },
32510     
32511     show : function (msg)
32512     {
32513         if (!this.el) {
32514             this.render(document.body);
32515         }
32516         // set content.
32517         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
32518         
32519         var tip = msg || this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
32520         
32521         this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
32522         
32523         this.el.removeClass(['fade','top','bottom', 'left', 'right','in',
32524                              'bs-tooltip-top','bs-tooltip-bottom', 'bs-tooltip-left', 'bs-tooltip-right']);
32525         
32526         var placement = typeof this.placement == 'function' ?
32527             this.placement.call(this, this.el, on_el) :
32528             this.placement;
32529             
32530         var autoToken = /\s?auto?\s?/i;
32531         var autoPlace = autoToken.test(placement);
32532         if (autoPlace) {
32533             placement = placement.replace(autoToken, '') || 'top';
32534         }
32535         
32536         //this.el.detach()
32537         //this.el.setXY([0,0]);
32538         this.el.show();
32539         //this.el.dom.style.display='block';
32540         
32541         //this.el.appendTo(on_el);
32542         
32543         var p = this.getPosition();
32544         var box = this.el.getBox();
32545         
32546         if (autoPlace) {
32547             // fixme..
32548         }
32549         
32550         var align = this.alignment[placement];
32551         
32552         var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
32553         
32554         if(placement == 'top' || placement == 'bottom'){
32555             if(xy[0] < 0){
32556                 placement = 'right';
32557             }
32558             
32559             if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
32560                 placement = 'left';
32561             }
32562             
32563             var scroll = Roo.select('body', true).first().getScroll();
32564             
32565             if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
32566                 placement = 'top';
32567             }
32568             
32569             align = this.alignment[placement];
32570             
32571             this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
32572             
32573         }
32574         
32575         var elems = document.getElementsByTagName('div');
32576         var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
32577         for (var i = 0; i < elems.length; i++) {
32578           var zindex = Number.parseInt(
32579                 document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
32580                 10
32581           );
32582           if (zindex > highest) {
32583             highest = zindex;
32584           }
32585         }
32586         
32587         
32588         
32589         this.el.dom.style.zIndex = highest;
32590         
32591         this.el.alignTo(this.bindEl, align[0],align[1]);
32592         //var arrow = this.el.select('.arrow',true).first();
32593         //arrow.set(align[2], 
32594         
32595         this.el.addClass(placement);
32596         this.el.addClass("bs-tooltip-"+ placement);
32597         
32598         this.el.addClass('in fade show');
32599         
32600         this.hoverState = null;
32601         
32602         if (this.el.hasClass('fade')) {
32603             // fade it?
32604         }
32605         
32606         
32607         
32608         
32609         
32610     },
32611     hide : function()
32612     {
32613          
32614         if (!this.el) {
32615             return;
32616         }
32617         //this.el.setXY([0,0]);
32618         this.el.removeClass(['show', 'in']);
32619         //this.el.hide();
32620         
32621     }
32622     
32623 });
32624  
32625
32626  /*
32627  * - LGPL
32628  *
32629  * Location Picker
32630  * 
32631  */
32632
32633 /**
32634  * @class Roo.bootstrap.LocationPicker
32635  * @extends Roo.bootstrap.Component
32636  * Bootstrap LocationPicker class
32637  * @cfg {Number} latitude Position when init default 0
32638  * @cfg {Number} longitude Position when init default 0
32639  * @cfg {Number} zoom default 15
32640  * @cfg {String} mapTypeId default google.maps.MapTypeId.ROADMAP
32641  * @cfg {Boolean} mapTypeControl default false
32642  * @cfg {Boolean} disableDoubleClickZoom default false
32643  * @cfg {Boolean} scrollwheel default true
32644  * @cfg {Boolean} streetViewControl default false
32645  * @cfg {Number} radius default 0
32646  * @cfg {String} locationName
32647  * @cfg {Boolean} draggable default true
32648  * @cfg {Boolean} enableAutocomplete default false
32649  * @cfg {Boolean} enableReverseGeocode default true
32650  * @cfg {String} markerTitle
32651  * 
32652  * @constructor
32653  * Create a new LocationPicker
32654  * @param {Object} config The config object
32655  */
32656
32657
32658 Roo.bootstrap.LocationPicker = function(config){
32659     
32660     Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
32661     
32662     this.addEvents({
32663         /**
32664          * @event initial
32665          * Fires when the picker initialized.
32666          * @param {Roo.bootstrap.LocationPicker} this
32667          * @param {Google Location} location
32668          */
32669         initial : true,
32670         /**
32671          * @event positionchanged
32672          * Fires when the picker position changed.
32673          * @param {Roo.bootstrap.LocationPicker} this
32674          * @param {Google Location} location
32675          */
32676         positionchanged : true,
32677         /**
32678          * @event resize
32679          * Fires when the map resize.
32680          * @param {Roo.bootstrap.LocationPicker} this
32681          */
32682         resize : true,
32683         /**
32684          * @event show
32685          * Fires when the map show.
32686          * @param {Roo.bootstrap.LocationPicker} this
32687          */
32688         show : true,
32689         /**
32690          * @event hide
32691          * Fires when the map hide.
32692          * @param {Roo.bootstrap.LocationPicker} this
32693          */
32694         hide : true,
32695         /**
32696          * @event mapClick
32697          * Fires when click the map.
32698          * @param {Roo.bootstrap.LocationPicker} this
32699          * @param {Map event} e
32700          */
32701         mapClick : true,
32702         /**
32703          * @event mapRightClick
32704          * Fires when right click the map.
32705          * @param {Roo.bootstrap.LocationPicker} this
32706          * @param {Map event} e
32707          */
32708         mapRightClick : true,
32709         /**
32710          * @event markerClick
32711          * Fires when click the marker.
32712          * @param {Roo.bootstrap.LocationPicker} this
32713          * @param {Map event} e
32714          */
32715         markerClick : true,
32716         /**
32717          * @event markerRightClick
32718          * Fires when right click the marker.
32719          * @param {Roo.bootstrap.LocationPicker} this
32720          * @param {Map event} e
32721          */
32722         markerRightClick : true,
32723         /**
32724          * @event OverlayViewDraw
32725          * Fires when OverlayView Draw
32726          * @param {Roo.bootstrap.LocationPicker} this
32727          */
32728         OverlayViewDraw : true,
32729         /**
32730          * @event OverlayViewOnAdd
32731          * Fires when OverlayView Draw
32732          * @param {Roo.bootstrap.LocationPicker} this
32733          */
32734         OverlayViewOnAdd : true,
32735         /**
32736          * @event OverlayViewOnRemove
32737          * Fires when OverlayView Draw
32738          * @param {Roo.bootstrap.LocationPicker} this
32739          */
32740         OverlayViewOnRemove : true,
32741         /**
32742          * @event OverlayViewShow
32743          * Fires when OverlayView Draw
32744          * @param {Roo.bootstrap.LocationPicker} this
32745          * @param {Pixel} cpx
32746          */
32747         OverlayViewShow : true,
32748         /**
32749          * @event OverlayViewHide
32750          * Fires when OverlayView Draw
32751          * @param {Roo.bootstrap.LocationPicker} this
32752          */
32753         OverlayViewHide : true,
32754         /**
32755          * @event loadexception
32756          * Fires when load google lib failed.
32757          * @param {Roo.bootstrap.LocationPicker} this
32758          */
32759         loadexception : true
32760     });
32761         
32762 };
32763
32764 Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
32765     
32766     gMapContext: false,
32767     
32768     latitude: 0,
32769     longitude: 0,
32770     zoom: 15,
32771     mapTypeId: false,
32772     mapTypeControl: false,
32773     disableDoubleClickZoom: false,
32774     scrollwheel: true,
32775     streetViewControl: false,
32776     radius: 0,
32777     locationName: '',
32778     draggable: true,
32779     enableAutocomplete: false,
32780     enableReverseGeocode: true,
32781     markerTitle: '',
32782     
32783     getAutoCreate: function()
32784     {
32785
32786         var cfg = {
32787             tag: 'div',
32788             cls: 'roo-location-picker'
32789         };
32790         
32791         return cfg
32792     },
32793     
32794     initEvents: function(ct, position)
32795     {       
32796         if(!this.el.getWidth() || this.isApplied()){
32797             return;
32798         }
32799         
32800         this.el.setVisibilityMode(Roo.Element.DISPLAY);
32801         
32802         this.initial();
32803     },
32804     
32805     initial: function()
32806     {
32807         if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
32808             this.fireEvent('loadexception', this);
32809             return;
32810         }
32811         
32812         if(!this.mapTypeId){
32813             this.mapTypeId = google.maps.MapTypeId.ROADMAP;
32814         }
32815         
32816         this.gMapContext = this.GMapContext();
32817         
32818         this.initOverlayView();
32819         
32820         this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
32821         
32822         var _this = this;
32823                 
32824         google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
32825             _this.setPosition(_this.gMapContext.marker.position);
32826         });
32827         
32828         google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
32829             _this.fireEvent('mapClick', this, event);
32830             
32831         });
32832
32833         google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
32834             _this.fireEvent('mapRightClick', this, event);
32835             
32836         });
32837         
32838         google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
32839             _this.fireEvent('markerClick', this, event);
32840             
32841         });
32842
32843         google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
32844             _this.fireEvent('markerRightClick', this, event);
32845             
32846         });
32847         
32848         this.setPosition(this.gMapContext.location);
32849         
32850         this.fireEvent('initial', this, this.gMapContext.location);
32851     },
32852     
32853     initOverlayView: function()
32854     {
32855         var _this = this;
32856         
32857         Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
32858             
32859             draw: function()
32860             {
32861                 _this.fireEvent('OverlayViewDraw', _this);
32862             },
32863             
32864             onAdd: function()
32865             {
32866                 _this.fireEvent('OverlayViewOnAdd', _this);
32867             },
32868             
32869             onRemove: function()
32870             {
32871                 _this.fireEvent('OverlayViewOnRemove', _this);
32872             },
32873             
32874             show: function(cpx)
32875             {
32876                 _this.fireEvent('OverlayViewShow', _this, cpx);
32877             },
32878             
32879             hide: function()
32880             {
32881                 _this.fireEvent('OverlayViewHide', _this);
32882             }
32883             
32884         });
32885     },
32886     
32887     fromLatLngToContainerPixel: function(event)
32888     {
32889         return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
32890     },
32891     
32892     isApplied: function() 
32893     {
32894         return this.getGmapContext() == false ? false : true;
32895     },
32896     
32897     getGmapContext: function() 
32898     {
32899         return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
32900     },
32901     
32902     GMapContext: function() 
32903     {
32904         var position = new google.maps.LatLng(this.latitude, this.longitude);
32905         
32906         var _map = new google.maps.Map(this.el.dom, {
32907             center: position,
32908             zoom: this.zoom,
32909             mapTypeId: this.mapTypeId,
32910             mapTypeControl: this.mapTypeControl,
32911             disableDoubleClickZoom: this.disableDoubleClickZoom,
32912             scrollwheel: this.scrollwheel,
32913             streetViewControl: this.streetViewControl,
32914             locationName: this.locationName,
32915             draggable: this.draggable,
32916             enableAutocomplete: this.enableAutocomplete,
32917             enableReverseGeocode: this.enableReverseGeocode
32918         });
32919         
32920         var _marker = new google.maps.Marker({
32921             position: position,
32922             map: _map,
32923             title: this.markerTitle,
32924             draggable: this.draggable
32925         });
32926         
32927         return {
32928             map: _map,
32929             marker: _marker,
32930             circle: null,
32931             location: position,
32932             radius: this.radius,
32933             locationName: this.locationName,
32934             addressComponents: {
32935                 formatted_address: null,
32936                 addressLine1: null,
32937                 addressLine2: null,
32938                 streetName: null,
32939                 streetNumber: null,
32940                 city: null,
32941                 district: null,
32942                 state: null,
32943                 stateOrProvince: null
32944             },
32945             settings: this,
32946             domContainer: this.el.dom,
32947             geodecoder: new google.maps.Geocoder()
32948         };
32949     },
32950     
32951     drawCircle: function(center, radius, options) 
32952     {
32953         if (this.gMapContext.circle != null) {
32954             this.gMapContext.circle.setMap(null);
32955         }
32956         if (radius > 0) {
32957             radius *= 1;
32958             options = Roo.apply({}, options, {
32959                 strokeColor: "#0000FF",
32960                 strokeOpacity: .35,
32961                 strokeWeight: 2,
32962                 fillColor: "#0000FF",
32963                 fillOpacity: .2
32964             });
32965             
32966             options.map = this.gMapContext.map;
32967             options.radius = radius;
32968             options.center = center;
32969             this.gMapContext.circle = new google.maps.Circle(options);
32970             return this.gMapContext.circle;
32971         }
32972         
32973         return null;
32974     },
32975     
32976     setPosition: function(location) 
32977     {
32978         this.gMapContext.location = location;
32979         this.gMapContext.marker.setPosition(location);
32980         this.gMapContext.map.panTo(location);
32981         this.drawCircle(location, this.gMapContext.radius, {});
32982         
32983         var _this = this;
32984         
32985         if (this.gMapContext.settings.enableReverseGeocode) {
32986             this.gMapContext.geodecoder.geocode({
32987                 latLng: this.gMapContext.location
32988             }, function(results, status) {
32989                 
32990                 if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
32991                     _this.gMapContext.locationName = results[0].formatted_address;
32992                     _this.gMapContext.addressComponents = _this.address_component_from_google_geocode(results[0].address_components);
32993                     
32994                     _this.fireEvent('positionchanged', this, location);
32995                 }
32996             });
32997             
32998             return;
32999         }
33000         
33001         this.fireEvent('positionchanged', this, location);
33002     },
33003     
33004     resize: function()
33005     {
33006         google.maps.event.trigger(this.gMapContext.map, "resize");
33007         
33008         this.gMapContext.map.setCenter(this.gMapContext.marker.position);
33009         
33010         this.fireEvent('resize', this);
33011     },
33012     
33013     setPositionByLatLng: function(latitude, longitude)
33014     {
33015         this.setPosition(new google.maps.LatLng(latitude, longitude));
33016     },
33017     
33018     getCurrentPosition: function() 
33019     {
33020         return {
33021             latitude: this.gMapContext.location.lat(),
33022             longitude: this.gMapContext.location.lng()
33023         };
33024     },
33025     
33026     getAddressName: function() 
33027     {
33028         return this.gMapContext.locationName;
33029     },
33030     
33031     getAddressComponents: function() 
33032     {
33033         return this.gMapContext.addressComponents;
33034     },
33035     
33036     address_component_from_google_geocode: function(address_components) 
33037     {
33038         var result = {};
33039         
33040         for (var i = 0; i < address_components.length; i++) {
33041             var component = address_components[i];
33042             if (component.types.indexOf("postal_code") >= 0) {
33043                 result.postalCode = component.short_name;
33044             } else if (component.types.indexOf("street_number") >= 0) {
33045                 result.streetNumber = component.short_name;
33046             } else if (component.types.indexOf("route") >= 0) {
33047                 result.streetName = component.short_name;
33048             } else if (component.types.indexOf("neighborhood") >= 0) {
33049                 result.city = component.short_name;
33050             } else if (component.types.indexOf("locality") >= 0) {
33051                 result.city = component.short_name;
33052             } else if (component.types.indexOf("sublocality") >= 0) {
33053                 result.district = component.short_name;
33054             } else if (component.types.indexOf("administrative_area_level_1") >= 0) {
33055                 result.stateOrProvince = component.short_name;
33056             } else if (component.types.indexOf("country") >= 0) {
33057                 result.country = component.short_name;
33058             }
33059         }
33060         
33061         result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
33062         result.addressLine2 = "";
33063         return result;
33064     },
33065     
33066     setZoomLevel: function(zoom)
33067     {
33068         this.gMapContext.map.setZoom(zoom);
33069     },
33070     
33071     show: function()
33072     {
33073         if(!this.el){
33074             return;
33075         }
33076         
33077         this.el.show();
33078         
33079         this.resize();
33080         
33081         this.fireEvent('show', this);
33082     },
33083     
33084     hide: function()
33085     {
33086         if(!this.el){
33087             return;
33088         }
33089         
33090         this.el.hide();
33091         
33092         this.fireEvent('hide', this);
33093     }
33094     
33095 });
33096
33097 Roo.apply(Roo.bootstrap.LocationPicker, {
33098     
33099     OverlayView : function(map, options)
33100     {
33101         options = options || {};
33102         
33103         this.setMap(map);
33104     }
33105     
33106     
33107 });/**
33108  * @class Roo.bootstrap.Alert
33109  * @extends Roo.bootstrap.Component
33110  * Bootstrap Alert class - shows an alert area box
33111  * eg
33112  * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
33113   Enter a valid email address
33114 </div>
33115  * @licence LGPL
33116  * @cfg {String} title The title of alert
33117  * @cfg {String} html The content of alert
33118  * @cfg {String} weight (success|info|warning|danger) Weight of the message
33119  * @cfg {String} fa font-awesomeicon
33120  * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
33121  * @cfg {Boolean} close true to show a x closer
33122  * 
33123  * 
33124  * @constructor
33125  * Create a new alert
33126  * @param {Object} config The config object
33127  */
33128
33129
33130 Roo.bootstrap.Alert = function(config){
33131     Roo.bootstrap.Alert.superclass.constructor.call(this, config);
33132     
33133 };
33134
33135 Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
33136     
33137     title: '',
33138     html: '',
33139     weight: false,
33140     fa: false,
33141     faicon: false, // BC
33142     close : false,
33143     
33144     
33145     getAutoCreate : function()
33146     {
33147         
33148         var cfg = {
33149             tag : 'div',
33150             cls : 'alert',
33151             cn : [
33152                 {
33153                     tag: 'button',
33154                     type :  "button",
33155                     cls: "close",
33156                     html : '×',
33157                     style : this.close ? '' : 'display:none'
33158                 },
33159                 {
33160                     tag : 'i',
33161                     cls : 'roo-alert-icon'
33162                     
33163                 },
33164                 {
33165                     tag : 'b',
33166                     cls : 'roo-alert-title',
33167                     html : this.title
33168                 },
33169                 {
33170                     tag : 'span',
33171                     cls : 'roo-alert-text',
33172                     html : this.html
33173                 }
33174             ]
33175         };
33176         
33177         if(this.faicon){
33178             cfg.cn[0].cls += ' fa ' + this.faicon;
33179         }
33180         if(this.fa){
33181             cfg.cn[0].cls += ' fa ' + this.fa;
33182         }
33183         
33184         if(this.weight){
33185             cfg.cls += ' alert-' + this.weight;
33186         }
33187         
33188         return cfg;
33189     },
33190     
33191     initEvents: function() 
33192     {
33193         this.el.setVisibilityMode(Roo.Element.DISPLAY);
33194         this.titleEl =  this.el.select('.roo-alert-title',true).first();
33195         this.iconEl = this.el.select('.roo-alert-icon',true).first();
33196         this.htmlEl = this.el.select('.roo-alert-text',true).first();
33197         if (this.seconds > 0) {
33198             this.hide.defer(this.seconds, this);
33199         }
33200     },
33201     /**
33202      * Set the Title Message HTML
33203      * @param {String} html
33204      */
33205     setTitle : function(str)
33206     {
33207         this.titleEl.dom.innerHTML = str;
33208     },
33209      
33210      /**
33211      * Set the Body Message HTML
33212      * @param {String} html
33213      */
33214     setHtml : function(str)
33215     {
33216         this.htmlEl.dom.innerHTML = str;
33217     },
33218     /**
33219      * Set the Weight of the alert
33220      * @param {String} (success|info|warning|danger) weight
33221      */
33222     
33223     setWeight : function(weight)
33224     {
33225         if(this.weight){
33226             this.el.removeClass('alert-' + this.weight);
33227         }
33228         
33229         this.weight = weight;
33230         
33231         this.el.addClass('alert-' + this.weight);
33232     },
33233       /**
33234      * Set the Icon of the alert
33235      * @param {String} see fontawsome names (name without the 'fa-' bit)
33236      */
33237     setIcon : function(icon)
33238     {
33239         if(this.faicon){
33240             this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
33241         }
33242         
33243         this.faicon = icon;
33244         
33245         this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
33246     },
33247     /**
33248      * Hide the Alert
33249      */
33250     hide: function() 
33251     {
33252         this.el.hide();   
33253     },
33254     /**
33255      * Show the Alert
33256      */
33257     show: function() 
33258     {  
33259         this.el.show();   
33260     }
33261     
33262 });
33263
33264  
33265 /*
33266 * Licence: LGPL
33267 */
33268
33269 /**
33270  * @class Roo.bootstrap.UploadCropbox
33271  * @extends Roo.bootstrap.Component
33272  * Bootstrap UploadCropbox class
33273  * @cfg {String} emptyText show when image has been loaded
33274  * @cfg {String} rotateNotify show when image too small to rotate
33275  * @cfg {Number} errorTimeout default 3000
33276  * @cfg {Number} minWidth default 300
33277  * @cfg {Number} minHeight default 300
33278  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
33279  * @cfg {Boolean} isDocument (true|false) default false
33280  * @cfg {String} url action url
33281  * @cfg {String} paramName default 'imageUpload'
33282  * @cfg {String} method default POST
33283  * @cfg {Boolean} loadMask (true|false) default true
33284  * @cfg {Boolean} loadingText default 'Loading...'
33285  * 
33286  * @constructor
33287  * Create a new UploadCropbox
33288  * @param {Object} config The config object
33289  */
33290
33291 Roo.bootstrap.UploadCropbox = function(config){
33292     Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
33293     
33294     this.addEvents({
33295         /**
33296          * @event beforeselectfile
33297          * Fire before select file
33298          * @param {Roo.bootstrap.UploadCropbox} this
33299          */
33300         "beforeselectfile" : true,
33301         /**
33302          * @event initial
33303          * Fire after initEvent
33304          * @param {Roo.bootstrap.UploadCropbox} this
33305          */
33306         "initial" : true,
33307         /**
33308          * @event crop
33309          * Fire after initEvent
33310          * @param {Roo.bootstrap.UploadCropbox} this
33311          * @param {String} data
33312          */
33313         "crop" : true,
33314         /**
33315          * @event prepare
33316          * Fire when preparing the file data
33317          * @param {Roo.bootstrap.UploadCropbox} this
33318          * @param {Object} file
33319          */
33320         "prepare" : true,
33321         /**
33322          * @event exception
33323          * Fire when get exception
33324          * @param {Roo.bootstrap.UploadCropbox} this
33325          * @param {XMLHttpRequest} xhr
33326          */
33327         "exception" : true,
33328         /**
33329          * @event beforeloadcanvas
33330          * Fire before load the canvas
33331          * @param {Roo.bootstrap.UploadCropbox} this
33332          * @param {String} src
33333          */
33334         "beforeloadcanvas" : true,
33335         /**
33336          * @event trash
33337          * Fire when trash image
33338          * @param {Roo.bootstrap.UploadCropbox} this
33339          */
33340         "trash" : true,
33341         /**
33342          * @event download
33343          * Fire when download the image
33344          * @param {Roo.bootstrap.UploadCropbox} this
33345          */
33346         "download" : true,
33347         /**
33348          * @event footerbuttonclick
33349          * Fire when footerbuttonclick
33350          * @param {Roo.bootstrap.UploadCropbox} this
33351          * @param {String} type
33352          */
33353         "footerbuttonclick" : true,
33354         /**
33355          * @event resize
33356          * Fire when resize
33357          * @param {Roo.bootstrap.UploadCropbox} this
33358          */
33359         "resize" : true,
33360         /**
33361          * @event rotate
33362          * Fire when rotate the image
33363          * @param {Roo.bootstrap.UploadCropbox} this
33364          * @param {String} pos
33365          */
33366         "rotate" : true,
33367         /**
33368          * @event inspect
33369          * Fire when inspect the file
33370          * @param {Roo.bootstrap.UploadCropbox} this
33371          * @param {Object} file
33372          */
33373         "inspect" : true,
33374         /**
33375          * @event upload
33376          * Fire when xhr upload the file
33377          * @param {Roo.bootstrap.UploadCropbox} this
33378          * @param {Object} data
33379          */
33380         "upload" : true,
33381         /**
33382          * @event arrange
33383          * Fire when arrange the file data
33384          * @param {Roo.bootstrap.UploadCropbox} this
33385          * @param {Object} formData
33386          */
33387         "arrange" : true
33388     });
33389     
33390     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
33391 };
33392
33393 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
33394     
33395     emptyText : 'Click to upload image',
33396     rotateNotify : 'Image is too small to rotate',
33397     errorTimeout : 3000,
33398     scale : 0,
33399     baseScale : 1,
33400     rotate : 0,
33401     dragable : false,
33402     pinching : false,
33403     mouseX : 0,
33404     mouseY : 0,
33405     cropData : false,
33406     minWidth : 300,
33407     minHeight : 300,
33408     file : false,
33409     exif : {},
33410     baseRotate : 1,
33411     cropType : 'image/jpeg',
33412     buttons : false,
33413     canvasLoaded : false,
33414     isDocument : false,
33415     method : 'POST',
33416     paramName : 'imageUpload',
33417     loadMask : true,
33418     loadingText : 'Loading...',
33419     maskEl : false,
33420     
33421     getAutoCreate : function()
33422     {
33423         var cfg = {
33424             tag : 'div',
33425             cls : 'roo-upload-cropbox',
33426             cn : [
33427                 {
33428                     tag : 'input',
33429                     cls : 'roo-upload-cropbox-selector',
33430                     type : 'file'
33431                 },
33432                 {
33433                     tag : 'div',
33434                     cls : 'roo-upload-cropbox-body',
33435                     style : 'cursor:pointer',
33436                     cn : [
33437                         {
33438                             tag : 'div',
33439                             cls : 'roo-upload-cropbox-preview'
33440                         },
33441                         {
33442                             tag : 'div',
33443                             cls : 'roo-upload-cropbox-thumb'
33444                         },
33445                         {
33446                             tag : 'div',
33447                             cls : 'roo-upload-cropbox-empty-notify',
33448                             html : this.emptyText
33449                         },
33450                         {
33451                             tag : 'div',
33452                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
33453                             html : this.rotateNotify
33454                         }
33455                     ]
33456                 },
33457                 {
33458                     tag : 'div',
33459                     cls : 'roo-upload-cropbox-footer',
33460                     cn : {
33461                         tag : 'div',
33462                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
33463                         cn : []
33464                     }
33465                 }
33466             ]
33467         };
33468         
33469         return cfg;
33470     },
33471     
33472     onRender : function(ct, position)
33473     {
33474         Roo.bootstrap.UploadCropbox.superclass.onRender.call(this, ct, position);
33475         
33476         if (this.buttons.length) {
33477             
33478             Roo.each(this.buttons, function(bb) {
33479                 
33480                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
33481                 
33482                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
33483                 
33484             }, this);
33485         }
33486         
33487         if(this.loadMask){
33488             this.maskEl = this.el;
33489         }
33490     },
33491     
33492     initEvents : function()
33493     {
33494         this.urlAPI = (window.createObjectURL && window) || 
33495                                 (window.URL && URL.revokeObjectURL && URL) || 
33496                                 (window.webkitURL && webkitURL);
33497                         
33498         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
33499         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
33500         
33501         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
33502         this.selectorEl.hide();
33503         
33504         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
33505         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
33506         
33507         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
33508         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
33509         this.thumbEl.hide();
33510         
33511         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
33512         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
33513         
33514         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
33515         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
33516         this.errorEl.hide();
33517         
33518         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
33519         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
33520         this.footerEl.hide();
33521         
33522         this.setThumbBoxSize();
33523         
33524         this.bind();
33525         
33526         this.resize();
33527         
33528         this.fireEvent('initial', this);
33529     },
33530
33531     bind : function()
33532     {
33533         var _this = this;
33534         
33535         window.addEventListener("resize", function() { _this.resize(); } );
33536         
33537         this.bodyEl.on('click', this.beforeSelectFile, this);
33538         
33539         if(Roo.isTouch){
33540             this.bodyEl.on('touchstart', this.onTouchStart, this);
33541             this.bodyEl.on('touchmove', this.onTouchMove, this);
33542             this.bodyEl.on('touchend', this.onTouchEnd, this);
33543         }
33544         
33545         if(!Roo.isTouch){
33546             this.bodyEl.on('mousedown', this.onMouseDown, this);
33547             this.bodyEl.on('mousemove', this.onMouseMove, this);
33548             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
33549             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
33550             Roo.get(document).on('mouseup', this.onMouseUp, this);
33551         }
33552         
33553         this.selectorEl.on('change', this.onFileSelected, this);
33554     },
33555     
33556     reset : function()
33557     {    
33558         this.scale = 0;
33559         this.baseScale = 1;
33560         this.rotate = 0;
33561         this.baseRotate = 1;
33562         this.dragable = false;
33563         this.pinching = false;
33564         this.mouseX = 0;
33565         this.mouseY = 0;
33566         this.cropData = false;
33567         this.notifyEl.dom.innerHTML = this.emptyText;
33568         
33569         this.selectorEl.dom.value = '';
33570         
33571     },
33572     
33573     resize : function()
33574     {
33575         if(this.fireEvent('resize', this) != false){
33576             this.setThumbBoxPosition();
33577             this.setCanvasPosition();
33578         }
33579     },
33580     
33581     onFooterButtonClick : function(e, el, o, type)
33582     {
33583         switch (type) {
33584             case 'rotate-left' :
33585                 this.onRotateLeft(e);
33586                 break;
33587             case 'rotate-right' :
33588                 this.onRotateRight(e);
33589                 break;
33590             case 'picture' :
33591                 this.beforeSelectFile(e);
33592                 break;
33593             case 'trash' :
33594                 this.trash(e);
33595                 break;
33596             case 'crop' :
33597                 this.crop(e);
33598                 break;
33599             case 'download' :
33600                 this.download(e);
33601                 break;
33602             default :
33603                 break;
33604         }
33605         
33606         this.fireEvent('footerbuttonclick', this, type);
33607     },
33608     
33609     beforeSelectFile : function(e)
33610     {
33611         e.preventDefault();
33612         
33613         if(this.fireEvent('beforeselectfile', this) != false){
33614             this.selectorEl.dom.click();
33615         }
33616     },
33617     
33618     onFileSelected : function(e)
33619     {
33620         e.preventDefault();
33621         
33622         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
33623             return;
33624         }
33625         
33626         var file = this.selectorEl.dom.files[0];
33627         
33628         if(this.fireEvent('inspect', this, file) != false){
33629             this.prepare(file);
33630         }
33631         
33632     },
33633     
33634     trash : function(e)
33635     {
33636         this.fireEvent('trash', this);
33637     },
33638     
33639     download : function(e)
33640     {
33641         this.fireEvent('download', this);
33642     },
33643     
33644     loadCanvas : function(src)
33645     {   
33646         if(this.fireEvent('beforeloadcanvas', this, src) != false){
33647             
33648             this.reset();
33649             
33650             this.imageEl = document.createElement('img');
33651             
33652             var _this = this;
33653             
33654             this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
33655             
33656             this.imageEl.src = src;
33657         }
33658     },
33659     
33660     onLoadCanvas : function()
33661     {   
33662         this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
33663         this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
33664         
33665         this.bodyEl.un('click', this.beforeSelectFile, this);
33666         
33667         this.notifyEl.hide();
33668         this.thumbEl.show();
33669         this.footerEl.show();
33670         
33671         this.baseRotateLevel();
33672         
33673         if(this.isDocument){
33674             this.setThumbBoxSize();
33675         }
33676         
33677         this.setThumbBoxPosition();
33678         
33679         this.baseScaleLevel();
33680         
33681         this.draw();
33682         
33683         this.resize();
33684         
33685         this.canvasLoaded = true;
33686         
33687         if(this.loadMask){
33688             this.maskEl.unmask();
33689         }
33690         
33691     },
33692     
33693     setCanvasPosition : function()
33694     {   
33695         if(!this.canvasEl){
33696             return;
33697         }
33698         
33699         var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
33700         var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
33701         
33702         this.previewEl.setLeft(pw);
33703         this.previewEl.setTop(ph);
33704         
33705     },
33706     
33707     onMouseDown : function(e)
33708     {   
33709         e.stopEvent();
33710         
33711         this.dragable = true;
33712         this.pinching = false;
33713         
33714         if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
33715             this.dragable = false;
33716             return;
33717         }
33718         
33719         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
33720         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
33721         
33722     },
33723     
33724     onMouseMove : function(e)
33725     {   
33726         e.stopEvent();
33727         
33728         if(!this.canvasLoaded){
33729             return;
33730         }
33731         
33732         if (!this.dragable){
33733             return;
33734         }
33735         
33736         var minX = Math.ceil(this.thumbEl.getLeft(true));
33737         var minY = Math.ceil(this.thumbEl.getTop(true));
33738         
33739         var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
33740         var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
33741         
33742         var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
33743         var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
33744         
33745         x = x - this.mouseX;
33746         y = y - this.mouseY;
33747         
33748         var bgX = Math.ceil(x + this.previewEl.getLeft(true));
33749         var bgY = Math.ceil(y + this.previewEl.getTop(true));
33750         
33751         bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
33752         bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
33753         
33754         this.previewEl.setLeft(bgX);
33755         this.previewEl.setTop(bgY);
33756         
33757         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
33758         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
33759     },
33760     
33761     onMouseUp : function(e)
33762     {   
33763         e.stopEvent();
33764         
33765         this.dragable = false;
33766     },
33767     
33768     onMouseWheel : function(e)
33769     {   
33770         e.stopEvent();
33771         
33772         this.startScale = this.scale;
33773         
33774         this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
33775         
33776         if(!this.zoomable()){
33777             this.scale = this.startScale;
33778             return;
33779         }
33780         
33781         this.draw();
33782         
33783         return;
33784     },
33785     
33786     zoomable : function()
33787     {
33788         var minScale = this.thumbEl.getWidth() / this.minWidth;
33789         
33790         if(this.minWidth < this.minHeight){
33791             minScale = this.thumbEl.getHeight() / this.minHeight;
33792         }
33793         
33794         var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
33795         var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
33796         
33797         if(
33798                 this.isDocument &&
33799                 (this.rotate == 0 || this.rotate == 180) && 
33800                 (
33801                     width > this.imageEl.OriginWidth || 
33802                     height > this.imageEl.OriginHeight ||
33803                     (width < this.minWidth && height < this.minHeight)
33804                 )
33805         ){
33806             return false;
33807         }
33808         
33809         if(
33810                 this.isDocument &&
33811                 (this.rotate == 90 || this.rotate == 270) && 
33812                 (
33813                     width > this.imageEl.OriginWidth || 
33814                     height > this.imageEl.OriginHeight ||
33815                     (width < this.minHeight && height < this.minWidth)
33816                 )
33817         ){
33818             return false;
33819         }
33820         
33821         if(
33822                 !this.isDocument &&
33823                 (this.rotate == 0 || this.rotate == 180) && 
33824                 (
33825                     width < this.minWidth || 
33826                     width > this.imageEl.OriginWidth || 
33827                     height < this.minHeight || 
33828                     height > this.imageEl.OriginHeight
33829                 )
33830         ){
33831             return false;
33832         }
33833         
33834         if(
33835                 !this.isDocument &&
33836                 (this.rotate == 90 || this.rotate == 270) && 
33837                 (
33838                     width < this.minHeight || 
33839                     width > this.imageEl.OriginWidth || 
33840                     height < this.minWidth || 
33841                     height > this.imageEl.OriginHeight
33842                 )
33843         ){
33844             return false;
33845         }
33846         
33847         return true;
33848         
33849     },
33850     
33851     onRotateLeft : function(e)
33852     {   
33853         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
33854             
33855             var minScale = this.thumbEl.getWidth() / this.minWidth;
33856             
33857             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
33858             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
33859             
33860             this.startScale = this.scale;
33861             
33862             while (this.getScaleLevel() < minScale){
33863             
33864                 this.scale = this.scale + 1;
33865                 
33866                 if(!this.zoomable()){
33867                     break;
33868                 }
33869                 
33870                 if(
33871                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
33872                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
33873                 ){
33874                     continue;
33875                 }
33876                 
33877                 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
33878
33879                 this.draw();
33880                 
33881                 return;
33882             }
33883             
33884             this.scale = this.startScale;
33885             
33886             this.onRotateFail();
33887             
33888             return false;
33889         }
33890         
33891         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
33892
33893         if(this.isDocument){
33894             this.setThumbBoxSize();
33895             this.setThumbBoxPosition();
33896             this.setCanvasPosition();
33897         }
33898         
33899         this.draw();
33900         
33901         this.fireEvent('rotate', this, 'left');
33902         
33903     },
33904     
33905     onRotateRight : function(e)
33906     {
33907         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
33908             
33909             var minScale = this.thumbEl.getWidth() / this.minWidth;
33910         
33911             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
33912             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
33913             
33914             this.startScale = this.scale;
33915             
33916             while (this.getScaleLevel() < minScale){
33917             
33918                 this.scale = this.scale + 1;
33919                 
33920                 if(!this.zoomable()){
33921                     break;
33922                 }
33923                 
33924                 if(
33925                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
33926                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
33927                 ){
33928                     continue;
33929                 }
33930                 
33931                 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
33932
33933                 this.draw();
33934                 
33935                 return;
33936             }
33937             
33938             this.scale = this.startScale;
33939             
33940             this.onRotateFail();
33941             
33942             return false;
33943         }
33944         
33945         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
33946
33947         if(this.isDocument){
33948             this.setThumbBoxSize();
33949             this.setThumbBoxPosition();
33950             this.setCanvasPosition();
33951         }
33952         
33953         this.draw();
33954         
33955         this.fireEvent('rotate', this, 'right');
33956     },
33957     
33958     onRotateFail : function()
33959     {
33960         this.errorEl.show(true);
33961         
33962         var _this = this;
33963         
33964         (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
33965     },
33966     
33967     draw : function()
33968     {
33969         this.previewEl.dom.innerHTML = '';
33970         
33971         var canvasEl = document.createElement("canvas");
33972         
33973         var contextEl = canvasEl.getContext("2d");
33974         
33975         canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
33976         canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
33977         var center = this.imageEl.OriginWidth / 2;
33978         
33979         if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
33980             canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
33981             canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
33982             center = this.imageEl.OriginHeight / 2;
33983         }
33984         
33985         contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
33986         
33987         contextEl.translate(center, center);
33988         contextEl.rotate(this.rotate * Math.PI / 180);
33989
33990         contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
33991         
33992         this.canvasEl = document.createElement("canvas");
33993         
33994         this.contextEl = this.canvasEl.getContext("2d");
33995         
33996         switch (this.rotate) {
33997             case 0 :
33998                 
33999                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
34000                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
34001                 
34002                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34003                 
34004                 break;
34005             case 90 : 
34006                 
34007                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
34008                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
34009                 
34010                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
34011                     this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34012                     break;
34013                 }
34014                 
34015                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34016                 
34017                 break;
34018             case 180 :
34019                 
34020                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
34021                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
34022                 
34023                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
34024                     this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34025                     break;
34026                 }
34027                 
34028                 this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34029                 
34030                 break;
34031             case 270 :
34032                 
34033                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
34034                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
34035         
34036                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
34037                     this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34038                     break;
34039                 }
34040                 
34041                 this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
34042                 
34043                 break;
34044             default : 
34045                 break;
34046         }
34047         
34048         this.previewEl.appendChild(this.canvasEl);
34049         
34050         this.setCanvasPosition();
34051     },
34052     
34053     crop : function()
34054     {
34055         if(!this.canvasLoaded){
34056             return;
34057         }
34058         
34059         var imageCanvas = document.createElement("canvas");
34060         
34061         var imageContext = imageCanvas.getContext("2d");
34062         
34063         imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
34064         imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
34065         
34066         var center = imageCanvas.width / 2;
34067         
34068         imageContext.translate(center, center);
34069         
34070         imageContext.rotate(this.rotate * Math.PI / 180);
34071         
34072         imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
34073         
34074         var canvas = document.createElement("canvas");
34075         
34076         var context = canvas.getContext("2d");
34077                 
34078         canvas.width = this.minWidth;
34079         canvas.height = this.minHeight;
34080
34081         switch (this.rotate) {
34082             case 0 :
34083                 
34084                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
34085                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
34086                 
34087                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
34088                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
34089                 
34090                 var targetWidth = this.minWidth - 2 * x;
34091                 var targetHeight = this.minHeight - 2 * y;
34092                 
34093                 var scale = 1;
34094                 
34095                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
34096                     scale = targetWidth / width;
34097                 }
34098                 
34099                 if(x > 0 && y == 0){
34100                     scale = targetHeight / height;
34101                 }
34102                 
34103                 if(x > 0 && y > 0){
34104                     scale = targetWidth / width;
34105                     
34106                     if(width < height){
34107                         scale = targetHeight / height;
34108                     }
34109                 }
34110                 
34111                 context.scale(scale, scale);
34112                 
34113                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
34114                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
34115
34116                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
34117                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
34118
34119                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
34120                 
34121                 break;
34122             case 90 : 
34123                 
34124                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
34125                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
34126                 
34127                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
34128                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
34129                 
34130                 var targetWidth = this.minWidth - 2 * x;
34131                 var targetHeight = this.minHeight - 2 * y;
34132                 
34133                 var scale = 1;
34134                 
34135                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
34136                     scale = targetWidth / width;
34137                 }
34138                 
34139                 if(x > 0 && y == 0){
34140                     scale = targetHeight / height;
34141                 }
34142                 
34143                 if(x > 0 && y > 0){
34144                     scale = targetWidth / width;
34145                     
34146                     if(width < height){
34147                         scale = targetHeight / height;
34148                     }
34149                 }
34150                 
34151                 context.scale(scale, scale);
34152                 
34153                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
34154                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
34155
34156                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
34157                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
34158                 
34159                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
34160                 
34161                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
34162                 
34163                 break;
34164             case 180 :
34165                 
34166                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
34167                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
34168                 
34169                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
34170                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
34171                 
34172                 var targetWidth = this.minWidth - 2 * x;
34173                 var targetHeight = this.minHeight - 2 * y;
34174                 
34175                 var scale = 1;
34176                 
34177                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
34178                     scale = targetWidth / width;
34179                 }
34180                 
34181                 if(x > 0 && y == 0){
34182                     scale = targetHeight / height;
34183                 }
34184                 
34185                 if(x > 0 && y > 0){
34186                     scale = targetWidth / width;
34187                     
34188                     if(width < height){
34189                         scale = targetHeight / height;
34190                     }
34191                 }
34192                 
34193                 context.scale(scale, scale);
34194                 
34195                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
34196                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
34197
34198                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
34199                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
34200
34201                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
34202                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
34203                 
34204                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
34205                 
34206                 break;
34207             case 270 :
34208                 
34209                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
34210                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
34211                 
34212                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
34213                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
34214                 
34215                 var targetWidth = this.minWidth - 2 * x;
34216                 var targetHeight = this.minHeight - 2 * y;
34217                 
34218                 var scale = 1;
34219                 
34220                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
34221                     scale = targetWidth / width;
34222                 }
34223                 
34224                 if(x > 0 && y == 0){
34225                     scale = targetHeight / height;
34226                 }
34227                 
34228                 if(x > 0 && y > 0){
34229                     scale = targetWidth / width;
34230                     
34231                     if(width < height){
34232                         scale = targetHeight / height;
34233                     }
34234                 }
34235                 
34236                 context.scale(scale, scale);
34237                 
34238                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
34239                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
34240
34241                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
34242                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
34243                 
34244                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
34245                 
34246                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
34247                 
34248                 break;
34249             default : 
34250                 break;
34251         }
34252         
34253         this.cropData = canvas.toDataURL(this.cropType);
34254         
34255         if(this.fireEvent('crop', this, this.cropData) !== false){
34256             this.process(this.file, this.cropData);
34257         }
34258         
34259         return;
34260         
34261     },
34262     
34263     setThumbBoxSize : function()
34264     {
34265         var width, height;
34266         
34267         if(this.isDocument && typeof(this.imageEl) != 'undefined'){
34268             width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
34269             height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
34270             
34271             this.minWidth = width;
34272             this.minHeight = height;
34273             
34274             if(this.rotate == 90 || this.rotate == 270){
34275                 this.minWidth = height;
34276                 this.minHeight = width;
34277             }
34278         }
34279         
34280         height = 300;
34281         width = Math.ceil(this.minWidth * height / this.minHeight);
34282         
34283         if(this.minWidth > this.minHeight){
34284             width = 300;
34285             height = Math.ceil(this.minHeight * width / this.minWidth);
34286         }
34287         
34288         this.thumbEl.setStyle({
34289             width : width + 'px',
34290             height : height + 'px'
34291         });
34292
34293         return;
34294             
34295     },
34296     
34297     setThumbBoxPosition : function()
34298     {
34299         var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
34300         var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
34301         
34302         this.thumbEl.setLeft(x);
34303         this.thumbEl.setTop(y);
34304         
34305     },
34306     
34307     baseRotateLevel : function()
34308     {
34309         this.baseRotate = 1;
34310         
34311         if(
34312                 typeof(this.exif) != 'undefined' &&
34313                 typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
34314                 [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != -1
34315         ){
34316             this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
34317         }
34318         
34319         this.rotate = Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];
34320         
34321     },
34322     
34323     baseScaleLevel : function()
34324     {
34325         var width, height;
34326         
34327         if(this.isDocument){
34328             
34329             if(this.baseRotate == 6 || this.baseRotate == 8){
34330             
34331                 height = this.thumbEl.getHeight();
34332                 this.baseScale = height / this.imageEl.OriginWidth;
34333
34334                 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
34335                     width = this.thumbEl.getWidth();
34336                     this.baseScale = width / this.imageEl.OriginHeight;
34337                 }
34338
34339                 return;
34340             }
34341
34342             height = this.thumbEl.getHeight();
34343             this.baseScale = height / this.imageEl.OriginHeight;
34344
34345             if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
34346                 width = this.thumbEl.getWidth();
34347                 this.baseScale = width / this.imageEl.OriginWidth;
34348             }
34349
34350             return;
34351         }
34352         
34353         if(this.baseRotate == 6 || this.baseRotate == 8){
34354             
34355             width = this.thumbEl.getHeight();
34356             this.baseScale = width / this.imageEl.OriginHeight;
34357             
34358             if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
34359                 height = this.thumbEl.getWidth();
34360                 this.baseScale = height / this.imageEl.OriginHeight;
34361             }
34362             
34363             if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
34364                 height = this.thumbEl.getWidth();
34365                 this.baseScale = height / this.imageEl.OriginHeight;
34366                 
34367                 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
34368                     width = this.thumbEl.getHeight();
34369                     this.baseScale = width / this.imageEl.OriginWidth;
34370                 }
34371             }
34372             
34373             return;
34374         }
34375         
34376         width = this.thumbEl.getWidth();
34377         this.baseScale = width / this.imageEl.OriginWidth;
34378         
34379         if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
34380             height = this.thumbEl.getHeight();
34381             this.baseScale = height / this.imageEl.OriginHeight;
34382         }
34383         
34384         if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
34385             
34386             height = this.thumbEl.getHeight();
34387             this.baseScale = height / this.imageEl.OriginHeight;
34388             
34389             if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
34390                 width = this.thumbEl.getWidth();
34391                 this.baseScale = width / this.imageEl.OriginWidth;
34392             }
34393             
34394         }
34395         
34396         return;
34397     },
34398     
34399     getScaleLevel : function()
34400     {
34401         return this.baseScale * Math.pow(1.1, this.scale);
34402     },
34403     
34404     onTouchStart : function(e)
34405     {
34406         if(!this.canvasLoaded){
34407             this.beforeSelectFile(e);
34408             return;
34409         }
34410         
34411         var touches = e.browserEvent.touches;
34412         
34413         if(!touches){
34414             return;
34415         }
34416         
34417         if(touches.length == 1){
34418             this.onMouseDown(e);
34419             return;
34420         }
34421         
34422         if(touches.length != 2){
34423             return;
34424         }
34425         
34426         var coords = [];
34427         
34428         for(var i = 0, finger; finger = touches[i]; i++){
34429             coords.push(finger.pageX, finger.pageY);
34430         }
34431         
34432         var x = Math.pow(coords[0] - coords[2], 2);
34433         var y = Math.pow(coords[1] - coords[3], 2);
34434         
34435         this.startDistance = Math.sqrt(x + y);
34436         
34437         this.startScale = this.scale;
34438         
34439         this.pinching = true;
34440         this.dragable = false;
34441         
34442     },
34443     
34444     onTouchMove : function(e)
34445     {
34446         if(!this.pinching && !this.dragable){
34447             return;
34448         }
34449         
34450         var touches = e.browserEvent.touches;
34451         
34452         if(!touches){
34453             return;
34454         }
34455         
34456         if(this.dragable){
34457             this.onMouseMove(e);
34458             return;
34459         }
34460         
34461         var coords = [];
34462         
34463         for(var i = 0, finger; finger = touches[i]; i++){
34464             coords.push(finger.pageX, finger.pageY);
34465         }
34466         
34467         var x = Math.pow(coords[0] - coords[2], 2);
34468         var y = Math.pow(coords[1] - coords[3], 2);
34469         
34470         this.endDistance = Math.sqrt(x + y);
34471         
34472         this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
34473         
34474         if(!this.zoomable()){
34475             this.scale = this.startScale;
34476             return;
34477         }
34478         
34479         this.draw();
34480         
34481     },
34482     
34483     onTouchEnd : function(e)
34484     {
34485         this.pinching = false;
34486         this.dragable = false;
34487         
34488     },
34489     
34490     process : function(file, crop)
34491     {
34492         if(this.loadMask){
34493             this.maskEl.mask(this.loadingText);
34494         }
34495         
34496         this.xhr = new XMLHttpRequest();
34497         
34498         file.xhr = this.xhr;
34499
34500         this.xhr.open(this.method, this.url, true);
34501         
34502         var headers = {
34503             "Accept": "application/json",
34504             "Cache-Control": "no-cache",
34505             "X-Requested-With": "XMLHttpRequest"
34506         };
34507         
34508         for (var headerName in headers) {
34509             var headerValue = headers[headerName];
34510             if (headerValue) {
34511                 this.xhr.setRequestHeader(headerName, headerValue);
34512             }
34513         }
34514         
34515         var _this = this;
34516         
34517         this.xhr.onload = function()
34518         {
34519             _this.xhrOnLoad(_this.xhr);
34520         }
34521         
34522         this.xhr.onerror = function()
34523         {
34524             _this.xhrOnError(_this.xhr);
34525         }
34526         
34527         var formData = new FormData();
34528
34529         formData.append('returnHTML', 'NO');
34530         
34531         if(crop){
34532             formData.append('crop', crop);
34533         }
34534         
34535         if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
34536             formData.append(this.paramName, file, file.name);
34537         }
34538         
34539         if(typeof(file.filename) != 'undefined'){
34540             formData.append('filename', file.filename);
34541         }
34542         
34543         if(typeof(file.mimetype) != 'undefined'){
34544             formData.append('mimetype', file.mimetype);
34545         }
34546         
34547         if(this.fireEvent('arrange', this, formData) != false){
34548             this.xhr.send(formData);
34549         };
34550     },
34551     
34552     xhrOnLoad : function(xhr)
34553     {
34554         if(this.loadMask){
34555             this.maskEl.unmask();
34556         }
34557         
34558         if (xhr.readyState !== 4) {
34559             this.fireEvent('exception', this, xhr);
34560             return;
34561         }
34562
34563         var response = Roo.decode(xhr.responseText);
34564         
34565         if(!response.success){
34566             this.fireEvent('exception', this, xhr);
34567             return;
34568         }
34569         
34570         var response = Roo.decode(xhr.responseText);
34571         
34572         this.fireEvent('upload', this, response);
34573         
34574     },
34575     
34576     xhrOnError : function()
34577     {
34578         if(this.loadMask){
34579             this.maskEl.unmask();
34580         }
34581         
34582         Roo.log('xhr on error');
34583         
34584         var response = Roo.decode(xhr.responseText);
34585           
34586         Roo.log(response);
34587         
34588     },
34589     
34590     prepare : function(file)
34591     {   
34592         if(this.loadMask){
34593             this.maskEl.mask(this.loadingText);
34594         }
34595         
34596         this.file = false;
34597         this.exif = {};
34598         
34599         if(typeof(file) === 'string'){
34600             this.loadCanvas(file);
34601             return;
34602         }
34603         
34604         if(!file || !this.urlAPI){
34605             return;
34606         }
34607         
34608         this.file = file;
34609         this.cropType = file.type;
34610         
34611         var _this = this;
34612         
34613         if(this.fireEvent('prepare', this, this.file) != false){
34614             
34615             var reader = new FileReader();
34616             
34617             reader.onload = function (e) {
34618                 if (e.target.error) {
34619                     Roo.log(e.target.error);
34620                     return;
34621                 }
34622                 
34623                 var buffer = e.target.result,
34624                     dataView = new DataView(buffer),
34625                     offset = 2,
34626                     maxOffset = dataView.byteLength - 4,
34627                     markerBytes,
34628                     markerLength;
34629                 
34630                 if (dataView.getUint16(0) === 0xffd8) {
34631                     while (offset < maxOffset) {
34632                         markerBytes = dataView.getUint16(offset);
34633                         
34634                         if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
34635                             markerLength = dataView.getUint16(offset + 2) + 2;
34636                             if (offset + markerLength > dataView.byteLength) {
34637                                 Roo.log('Invalid meta data: Invalid segment size.');
34638                                 break;
34639                             }
34640                             
34641                             if(markerBytes == 0xffe1){
34642                                 _this.parseExifData(
34643                                     dataView,
34644                                     offset,
34645                                     markerLength
34646                                 );
34647                             }
34648                             
34649                             offset += markerLength;
34650                             
34651                             continue;
34652                         }
34653                         
34654                         break;
34655                     }
34656                     
34657                 }
34658                 
34659                 var url = _this.urlAPI.createObjectURL(_this.file);
34660                 
34661                 _this.loadCanvas(url);
34662                 
34663                 return;
34664             }
34665             
34666             reader.readAsArrayBuffer(this.file);
34667             
34668         }
34669         
34670     },
34671     
34672     parseExifData : function(dataView, offset, length)
34673     {
34674         var tiffOffset = offset + 10,
34675             littleEndian,
34676             dirOffset;
34677     
34678         if (dataView.getUint32(offset + 4) !== 0x45786966) {
34679             // No Exif data, might be XMP data instead
34680             return;
34681         }
34682         
34683         // Check for the ASCII code for "Exif" (0x45786966):
34684         if (dataView.getUint32(offset + 4) !== 0x45786966) {
34685             // No Exif data, might be XMP data instead
34686             return;
34687         }
34688         if (tiffOffset + 8 > dataView.byteLength) {
34689             Roo.log('Invalid Exif data: Invalid segment size.');
34690             return;
34691         }
34692         // Check for the two null bytes:
34693         if (dataView.getUint16(offset + 8) !== 0x0000) {
34694             Roo.log('Invalid Exif data: Missing byte alignment offset.');
34695             return;
34696         }
34697         // Check the byte alignment:
34698         switch (dataView.getUint16(tiffOffset)) {
34699         case 0x4949:
34700             littleEndian = true;
34701             break;
34702         case 0x4D4D:
34703             littleEndian = false;
34704             break;
34705         default:
34706             Roo.log('Invalid Exif data: Invalid byte alignment marker.');
34707             return;
34708         }
34709         // Check for the TIFF tag marker (0x002A):
34710         if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
34711             Roo.log('Invalid Exif data: Missing TIFF marker.');
34712             return;
34713         }
34714         // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
34715         dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
34716         
34717         this.parseExifTags(
34718             dataView,
34719             tiffOffset,
34720             tiffOffset + dirOffset,
34721             littleEndian
34722         );
34723     },
34724     
34725     parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
34726     {
34727         var tagsNumber,
34728             dirEndOffset,
34729             i;
34730         if (dirOffset + 6 > dataView.byteLength) {
34731             Roo.log('Invalid Exif data: Invalid directory offset.');
34732             return;
34733         }
34734         tagsNumber = dataView.getUint16(dirOffset, littleEndian);
34735         dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
34736         if (dirEndOffset + 4 > dataView.byteLength) {
34737             Roo.log('Invalid Exif data: Invalid directory size.');
34738             return;
34739         }
34740         for (i = 0; i < tagsNumber; i += 1) {
34741             this.parseExifTag(
34742                 dataView,
34743                 tiffOffset,
34744                 dirOffset + 2 + 12 * i, // tag offset
34745                 littleEndian
34746             );
34747         }
34748         // Return the offset to the next directory:
34749         return dataView.getUint32(dirEndOffset, littleEndian);
34750     },
34751     
34752     parseExifTag : function (dataView, tiffOffset, offset, littleEndian) 
34753     {
34754         var tag = dataView.getUint16(offset, littleEndian);
34755         
34756         this.exif[tag] = this.getExifValue(
34757             dataView,
34758             tiffOffset,
34759             offset,
34760             dataView.getUint16(offset + 2, littleEndian), // tag type
34761             dataView.getUint32(offset + 4, littleEndian), // tag length
34762             littleEndian
34763         );
34764     },
34765     
34766     getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
34767     {
34768         var tagType = Roo.bootstrap.UploadCropbox.exifTagTypes[type],
34769             tagSize,
34770             dataOffset,
34771             values,
34772             i,
34773             str,
34774             c;
34775     
34776         if (!tagType) {
34777             Roo.log('Invalid Exif data: Invalid tag type.');
34778             return;
34779         }
34780         
34781         tagSize = tagType.size * length;
34782         // Determine if the value is contained in the dataOffset bytes,
34783         // or if the value at the dataOffset is a pointer to the actual data:
34784         dataOffset = tagSize > 4 ?
34785                 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
34786         if (dataOffset + tagSize > dataView.byteLength) {
34787             Roo.log('Invalid Exif data: Invalid data offset.');
34788             return;
34789         }
34790         if (length === 1) {
34791             return tagType.getValue(dataView, dataOffset, littleEndian);
34792         }
34793         values = [];
34794         for (i = 0; i < length; i += 1) {
34795             values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
34796         }
34797         
34798         if (tagType.ascii) {
34799             str = '';
34800             // Concatenate the chars:
34801             for (i = 0; i < values.length; i += 1) {
34802                 c = values[i];
34803                 // Ignore the terminating NULL byte(s):
34804                 if (c === '\u0000') {
34805                     break;
34806                 }
34807                 str += c;
34808             }
34809             return str;
34810         }
34811         return values;
34812     }
34813     
34814 });
34815
34816 Roo.apply(Roo.bootstrap.UploadCropbox, {
34817     tags : {
34818         'Orientation': 0x0112
34819     },
34820     
34821     Orientation: {
34822             1: 0, //'top-left',
34823 //            2: 'top-right',
34824             3: 180, //'bottom-right',
34825 //            4: 'bottom-left',
34826 //            5: 'left-top',
34827             6: 90, //'right-top',
34828 //            7: 'right-bottom',
34829             8: 270 //'left-bottom'
34830     },
34831     
34832     exifTagTypes : {
34833         // byte, 8-bit unsigned int:
34834         1: {
34835             getValue: function (dataView, dataOffset) {
34836                 return dataView.getUint8(dataOffset);
34837             },
34838             size: 1
34839         },
34840         // ascii, 8-bit byte:
34841         2: {
34842             getValue: function (dataView, dataOffset) {
34843                 return String.fromCharCode(dataView.getUint8(dataOffset));
34844             },
34845             size: 1,
34846             ascii: true
34847         },
34848         // short, 16 bit int:
34849         3: {
34850             getValue: function (dataView, dataOffset, littleEndian) {
34851                 return dataView.getUint16(dataOffset, littleEndian);
34852             },
34853             size: 2
34854         },
34855         // long, 32 bit int:
34856         4: {
34857             getValue: function (dataView, dataOffset, littleEndian) {
34858                 return dataView.getUint32(dataOffset, littleEndian);
34859             },
34860             size: 4
34861         },
34862         // rational = two long values, first is numerator, second is denominator:
34863         5: {
34864             getValue: function (dataView, dataOffset, littleEndian) {
34865                 return dataView.getUint32(dataOffset, littleEndian) /
34866                     dataView.getUint32(dataOffset + 4, littleEndian);
34867             },
34868             size: 8
34869         },
34870         // slong, 32 bit signed int:
34871         9: {
34872             getValue: function (dataView, dataOffset, littleEndian) {
34873                 return dataView.getInt32(dataOffset, littleEndian);
34874             },
34875             size: 4
34876         },
34877         // srational, two slongs, first is numerator, second is denominator:
34878         10: {
34879             getValue: function (dataView, dataOffset, littleEndian) {
34880                 return dataView.getInt32(dataOffset, littleEndian) /
34881                     dataView.getInt32(dataOffset + 4, littleEndian);
34882             },
34883             size: 8
34884         }
34885     },
34886     
34887     footer : {
34888         STANDARD : [
34889             {
34890                 tag : 'div',
34891                 cls : 'btn-group roo-upload-cropbox-rotate-left',
34892                 action : 'rotate-left',
34893                 cn : [
34894                     {
34895                         tag : 'button',
34896                         cls : 'btn btn-default',
34897                         html : '<i class="fa fa-undo"></i>'
34898                     }
34899                 ]
34900             },
34901             {
34902                 tag : 'div',
34903                 cls : 'btn-group roo-upload-cropbox-picture',
34904                 action : 'picture',
34905                 cn : [
34906                     {
34907                         tag : 'button',
34908                         cls : 'btn btn-default',
34909                         html : '<i class="fa fa-picture-o"></i>'
34910                     }
34911                 ]
34912             },
34913             {
34914                 tag : 'div',
34915                 cls : 'btn-group roo-upload-cropbox-rotate-right',
34916                 action : 'rotate-right',
34917                 cn : [
34918                     {
34919                         tag : 'button',
34920                         cls : 'btn btn-default',
34921                         html : '<i class="fa fa-repeat"></i>'
34922                     }
34923                 ]
34924             }
34925         ],
34926         DOCUMENT : [
34927             {
34928                 tag : 'div',
34929                 cls : 'btn-group roo-upload-cropbox-rotate-left',
34930                 action : 'rotate-left',
34931                 cn : [
34932                     {
34933                         tag : 'button',
34934                         cls : 'btn btn-default',
34935                         html : '<i class="fa fa-undo"></i>'
34936                     }
34937                 ]
34938             },
34939             {
34940                 tag : 'div',
34941                 cls : 'btn-group roo-upload-cropbox-download',
34942                 action : 'download',
34943                 cn : [
34944                     {
34945                         tag : 'button',
34946                         cls : 'btn btn-default',
34947                         html : '<i class="fa fa-download"></i>'
34948                     }
34949                 ]
34950             },
34951             {
34952                 tag : 'div',
34953                 cls : 'btn-group roo-upload-cropbox-crop',
34954                 action : 'crop',
34955                 cn : [
34956                     {
34957                         tag : 'button',
34958                         cls : 'btn btn-default',
34959                         html : '<i class="fa fa-crop"></i>'
34960                     }
34961                 ]
34962             },
34963             {
34964                 tag : 'div',
34965                 cls : 'btn-group roo-upload-cropbox-trash',
34966                 action : 'trash',
34967                 cn : [
34968                     {
34969                         tag : 'button',
34970                         cls : 'btn btn-default',
34971                         html : '<i class="fa fa-trash"></i>'
34972                     }
34973                 ]
34974             },
34975             {
34976                 tag : 'div',
34977                 cls : 'btn-group roo-upload-cropbox-rotate-right',
34978                 action : 'rotate-right',
34979                 cn : [
34980                     {
34981                         tag : 'button',
34982                         cls : 'btn btn-default',
34983                         html : '<i class="fa fa-repeat"></i>'
34984                     }
34985                 ]
34986             }
34987         ],
34988         ROTATOR : [
34989             {
34990                 tag : 'div',
34991                 cls : 'btn-group roo-upload-cropbox-rotate-left',
34992                 action : 'rotate-left',
34993                 cn : [
34994                     {
34995                         tag : 'button',
34996                         cls : 'btn btn-default',
34997                         html : '<i class="fa fa-undo"></i>'
34998                     }
34999                 ]
35000             },
35001             {
35002                 tag : 'div',
35003                 cls : 'btn-group roo-upload-cropbox-rotate-right',
35004                 action : 'rotate-right',
35005                 cn : [
35006                     {
35007                         tag : 'button',
35008                         cls : 'btn btn-default',
35009                         html : '<i class="fa fa-repeat"></i>'
35010                     }
35011                 ]
35012             }
35013         ]
35014     }
35015 });
35016
35017 /*
35018 * Licence: LGPL
35019 */
35020
35021 /**
35022  * @class Roo.bootstrap.DocumentManager
35023  * @extends Roo.bootstrap.Component
35024  * Bootstrap DocumentManager class
35025  * @cfg {String} paramName default 'imageUpload'
35026  * @cfg {String} toolTipName default 'filename'
35027  * @cfg {String} method default POST
35028  * @cfg {String} url action url
35029  * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
35030  * @cfg {Boolean} multiple multiple upload default true
35031  * @cfg {Number} thumbSize default 300
35032  * @cfg {String} fieldLabel
35033  * @cfg {Number} labelWidth default 4
35034  * @cfg {String} labelAlign (left|top) default left
35035  * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
35036 * @cfg {Number} labellg set the width of label (1-12)
35037  * @cfg {Number} labelmd set the width of label (1-12)
35038  * @cfg {Number} labelsm set the width of label (1-12)
35039  * @cfg {Number} labelxs set the width of label (1-12)
35040  * 
35041  * @constructor
35042  * Create a new DocumentManager
35043  * @param {Object} config The config object
35044  */
35045
35046 Roo.bootstrap.DocumentManager = function(config){
35047     Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
35048     
35049     this.files = [];
35050     this.delegates = [];
35051     
35052     this.addEvents({
35053         /**
35054          * @event initial
35055          * Fire when initial the DocumentManager
35056          * @param {Roo.bootstrap.DocumentManager} this
35057          */
35058         "initial" : true,
35059         /**
35060          * @event inspect
35061          * inspect selected file
35062          * @param {Roo.bootstrap.DocumentManager} this
35063          * @param {File} file
35064          */
35065         "inspect" : true,
35066         /**
35067          * @event exception
35068          * Fire when xhr load exception
35069          * @param {Roo.bootstrap.DocumentManager} this
35070          * @param {XMLHttpRequest} xhr
35071          */
35072         "exception" : true,
35073         /**
35074          * @event afterupload
35075          * Fire when xhr load exception
35076          * @param {Roo.bootstrap.DocumentManager} this
35077          * @param {XMLHttpRequest} xhr
35078          */
35079         "afterupload" : true,
35080         /**
35081          * @event prepare
35082          * prepare the form data
35083          * @param {Roo.bootstrap.DocumentManager} this
35084          * @param {Object} formData
35085          */
35086         "prepare" : true,
35087         /**
35088          * @event remove
35089          * Fire when remove the file
35090          * @param {Roo.bootstrap.DocumentManager} this
35091          * @param {Object} file
35092          */
35093         "remove" : true,
35094         /**
35095          * @event refresh
35096          * Fire after refresh the file
35097          * @param {Roo.bootstrap.DocumentManager} this
35098          */
35099         "refresh" : true,
35100         /**
35101          * @event click
35102          * Fire after click the image
35103          * @param {Roo.bootstrap.DocumentManager} this
35104          * @param {Object} file
35105          */
35106         "click" : true,
35107         /**
35108          * @event edit
35109          * Fire when upload a image and editable set to true
35110          * @param {Roo.bootstrap.DocumentManager} this
35111          * @param {Object} file
35112          */
35113         "edit" : true,
35114         /**
35115          * @event beforeselectfile
35116          * Fire before select file
35117          * @param {Roo.bootstrap.DocumentManager} this
35118          */
35119         "beforeselectfile" : true,
35120         /**
35121          * @event process
35122          * Fire before process file
35123          * @param {Roo.bootstrap.DocumentManager} this
35124          * @param {Object} file
35125          */
35126         "process" : true,
35127         /**
35128          * @event previewrendered
35129          * Fire when preview rendered
35130          * @param {Roo.bootstrap.DocumentManager} this
35131          * @param {Object} file
35132          */
35133         "previewrendered" : true,
35134         /**
35135          */
35136         "previewResize" : true
35137         
35138     });
35139 };
35140
35141 Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
35142     
35143     boxes : 0,
35144     inputName : '',
35145     thumbSize : 300,
35146     multiple : true,
35147     files : false,
35148     method : 'POST',
35149     url : '',
35150     paramName : 'imageUpload',
35151     toolTipName : 'filename',
35152     fieldLabel : '',
35153     labelWidth : 4,
35154     labelAlign : 'left',
35155     editable : true,
35156     delegates : false,
35157     xhr : false, 
35158     
35159     labellg : 0,
35160     labelmd : 0,
35161     labelsm : 0,
35162     labelxs : 0,
35163     
35164     getAutoCreate : function()
35165     {   
35166         var managerWidget = {
35167             tag : 'div',
35168             cls : 'roo-document-manager',
35169             cn : [
35170                 {
35171                     tag : 'input',
35172                     cls : 'roo-document-manager-selector',
35173                     type : 'file'
35174                 },
35175                 {
35176                     tag : 'div',
35177                     cls : 'roo-document-manager-uploader',
35178                     cn : [
35179                         {
35180                             tag : 'div',
35181                             cls : 'roo-document-manager-upload-btn',
35182                             html : '<i class="fa fa-plus"></i>'
35183                         }
35184                     ]
35185                     
35186                 }
35187             ]
35188         };
35189         
35190         var content = [
35191             {
35192                 tag : 'div',
35193                 cls : 'column col-md-12',
35194                 cn : managerWidget
35195             }
35196         ];
35197         
35198         if(this.fieldLabel.length){
35199             
35200             content = [
35201                 {
35202                     tag : 'div',
35203                     cls : 'column col-md-12',
35204                     html : this.fieldLabel
35205                 },
35206                 {
35207                     tag : 'div',
35208                     cls : 'column col-md-12',
35209                     cn : managerWidget
35210                 }
35211             ];
35212
35213             if(this.labelAlign == 'left'){
35214                 content = [
35215                     {
35216                         tag : 'div',
35217                         cls : 'column',
35218                         html : this.fieldLabel
35219                     },
35220                     {
35221                         tag : 'div',
35222                         cls : 'column',
35223                         cn : managerWidget
35224                     }
35225                 ];
35226                 
35227                 if(this.labelWidth > 12){
35228                     content[0].style = "width: " + this.labelWidth + 'px';
35229                 }
35230
35231                 if(this.labelWidth < 13 && this.labelmd == 0){
35232                     this.labelmd = this.labelWidth;
35233                 }
35234
35235                 if(this.labellg > 0){
35236                     content[0].cls += ' col-lg-' + this.labellg;
35237                     content[1].cls += ' col-lg-' + (12 - this.labellg);
35238                 }
35239
35240                 if(this.labelmd > 0){
35241                     content[0].cls += ' col-md-' + this.labelmd;
35242                     content[1].cls += ' col-md-' + (12 - this.labelmd);
35243                 }
35244
35245                 if(this.labelsm > 0){
35246                     content[0].cls += ' col-sm-' + this.labelsm;
35247                     content[1].cls += ' col-sm-' + (12 - this.labelsm);
35248                 }
35249
35250                 if(this.labelxs > 0){
35251                     content[0].cls += ' col-xs-' + this.labelxs;
35252                     content[1].cls += ' col-xs-' + (12 - this.labelxs);
35253                 }
35254                 
35255             }
35256         }
35257         
35258         var cfg = {
35259             tag : 'div',
35260             cls : 'row clearfix',
35261             cn : content
35262         };
35263         
35264         return cfg;
35265         
35266     },
35267     
35268     initEvents : function()
35269     {
35270         this.managerEl = this.el.select('.roo-document-manager', true).first();
35271         this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35272         
35273         this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
35274         this.selectorEl.hide();
35275         
35276         if(this.multiple){
35277             this.selectorEl.attr('multiple', 'multiple');
35278         }
35279         
35280         this.selectorEl.on('change', this.onFileSelected, this);
35281         
35282         this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
35283         this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35284         
35285         this.uploader.on('click', this.onUploaderClick, this);
35286         
35287         this.renderProgressDialog();
35288         
35289         var _this = this;
35290         
35291         window.addEventListener("resize", function() { _this.refresh(); } );
35292         
35293         this.fireEvent('initial', this);
35294     },
35295     
35296     renderProgressDialog : function()
35297     {
35298         var _this = this;
35299         
35300         this.progressDialog = new Roo.bootstrap.Modal({
35301             cls : 'roo-document-manager-progress-dialog',
35302             allow_close : false,
35303             animate : false,
35304             title : '',
35305             buttons : [
35306                 {
35307                     name  :'cancel',
35308                     weight : 'danger',
35309                     html : 'Cancel'
35310                 }
35311             ], 
35312             listeners : { 
35313                 btnclick : function() {
35314                     _this.uploadCancel();
35315                     this.hide();
35316                 }
35317             }
35318         });
35319          
35320         this.progressDialog.render(Roo.get(document.body));
35321          
35322         this.progress = new Roo.bootstrap.Progress({
35323             cls : 'roo-document-manager-progress',
35324             active : true,
35325             striped : true
35326         });
35327         
35328         this.progress.render(this.progressDialog.getChildContainer());
35329         
35330         this.progressBar = new Roo.bootstrap.ProgressBar({
35331             cls : 'roo-document-manager-progress-bar',
35332             aria_valuenow : 0,
35333             aria_valuemin : 0,
35334             aria_valuemax : 12,
35335             panel : 'success'
35336         });
35337         
35338         this.progressBar.render(this.progress.getChildContainer());
35339     },
35340     
35341     onUploaderClick : function(e)
35342     {
35343         e.preventDefault();
35344      
35345         if(this.fireEvent('beforeselectfile', this) != false){
35346             this.selectorEl.dom.click();
35347         }
35348         
35349     },
35350     
35351     onFileSelected : function(e)
35352     {
35353         e.preventDefault();
35354         
35355         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
35356             return;
35357         }
35358         
35359         Roo.each(this.selectorEl.dom.files, function(file){
35360             if(this.fireEvent('inspect', this, file) != false){
35361                 this.files.push(file);
35362             }
35363         }, this);
35364         
35365         this.queue();
35366         
35367     },
35368     
35369     queue : function()
35370     {
35371         this.selectorEl.dom.value = '';
35372         
35373         if(!this.files || !this.files.length){
35374             return;
35375         }
35376         
35377         if(this.boxes > 0 && this.files.length > this.boxes){
35378             this.files = this.files.slice(0, this.boxes);
35379         }
35380         
35381         this.uploader.show();
35382         
35383         if(this.boxes > 0 && this.files.length > this.boxes - 1){
35384             this.uploader.hide();
35385         }
35386         
35387         var _this = this;
35388         
35389         var files = [];
35390         
35391         var docs = [];
35392         
35393         Roo.each(this.files, function(file){
35394             
35395             if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
35396                 var f = this.renderPreview(file);
35397                 files.push(f);
35398                 return;
35399             }
35400             
35401             if(file.type.indexOf('image') != -1){
35402                 this.delegates.push(
35403                     (function(){
35404                         _this.process(file);
35405                     }).createDelegate(this)
35406                 );
35407         
35408                 return;
35409             }
35410             
35411             docs.push(
35412                 (function(){
35413                     _this.process(file);
35414                 }).createDelegate(this)
35415             );
35416             
35417         }, this);
35418         
35419         this.files = files;
35420         
35421         this.delegates = this.delegates.concat(docs);
35422         
35423         if(!this.delegates.length){
35424             this.refresh();
35425             return;
35426         }
35427         
35428         this.progressBar.aria_valuemax = this.delegates.length;
35429         
35430         this.arrange();
35431         
35432         return;
35433     },
35434     
35435     arrange : function()
35436     {
35437         if(!this.delegates.length){
35438             this.progressDialog.hide();
35439             this.refresh();
35440             return;
35441         }
35442         
35443         var delegate = this.delegates.shift();
35444         
35445         this.progressDialog.show();
35446         
35447         this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
35448         
35449         this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
35450         
35451         delegate();
35452     },
35453     
35454     refresh : function()
35455     {
35456         this.uploader.show();
35457         
35458         if(this.boxes > 0 && this.files.length > this.boxes - 1){
35459             this.uploader.hide();
35460         }
35461         
35462         Roo.isTouch ? this.closable(false) : this.closable(true);
35463         
35464         this.fireEvent('refresh', this);
35465     },
35466     
35467     onRemove : function(e, el, o)
35468     {
35469         e.preventDefault();
35470         
35471         this.fireEvent('remove', this, o);
35472         
35473     },
35474     
35475     remove : function(o)
35476     {
35477         var files = [];
35478         
35479         Roo.each(this.files, function(file){
35480             if(typeof(file.id) == 'undefined' || file.id * 1 < 1 || file.id != o.id){
35481                 files.push(file);
35482                 return;
35483             }
35484
35485             o.target.remove();
35486
35487         }, this);
35488         
35489         this.files = files;
35490         
35491         this.refresh();
35492     },
35493     
35494     clear : function()
35495     {
35496         Roo.each(this.files, function(file){
35497             if(!file.target){
35498                 return;
35499             }
35500             
35501             file.target.remove();
35502
35503         }, this);
35504         
35505         this.files = [];
35506         
35507         this.refresh();
35508     },
35509     
35510     onClick : function(e, el, o)
35511     {
35512         e.preventDefault();
35513         
35514         this.fireEvent('click', this, o);
35515         
35516     },
35517     
35518     closable : function(closable)
35519     {
35520         Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close', true).elements, function(el){
35521             
35522             el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35523             
35524             if(closable){
35525                 el.show();
35526                 return;
35527             }
35528             
35529             el.hide();
35530             
35531         }, this);
35532     },
35533     
35534     xhrOnLoad : function(xhr)
35535     {
35536         Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
35537             el.remove();
35538         }, this);
35539         
35540         if (xhr.readyState !== 4) {
35541             this.arrange();
35542             this.fireEvent('exception', this, xhr);
35543             return;
35544         }
35545
35546         var response = Roo.decode(xhr.responseText);
35547         
35548         if(!response.success){
35549             this.arrange();
35550             this.fireEvent('exception', this, xhr);
35551             return;
35552         }
35553         
35554         var file = this.renderPreview(response.data);
35555         
35556         this.files.push(file);
35557         
35558         this.arrange();
35559         
35560         this.fireEvent('afterupload', this, xhr);
35561         
35562     },
35563     
35564     xhrOnError : function(xhr)
35565     {
35566         Roo.log('xhr on error');
35567         
35568         var response = Roo.decode(xhr.responseText);
35569           
35570         Roo.log(response);
35571         
35572         this.arrange();
35573     },
35574     
35575     process : function(file)
35576     {
35577         if(this.fireEvent('process', this, file) !== false){
35578             if(this.editable && file.type.indexOf('image') != -1){
35579                 this.fireEvent('edit', this, file);
35580                 return;
35581             }
35582
35583             this.uploadStart(file, false);
35584
35585             return;
35586         }
35587         
35588     },
35589     
35590     uploadStart : function(file, crop)
35591     {
35592         this.xhr = new XMLHttpRequest();
35593         
35594         if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
35595             this.arrange();
35596             return;
35597         }
35598         
35599         file.xhr = this.xhr;
35600             
35601         this.managerEl.createChild({
35602             tag : 'div',
35603             cls : 'roo-document-manager-loading',
35604             cn : [
35605                 {
35606                     tag : 'div',
35607                     tooltip : file.name,
35608                     cls : 'roo-document-manager-thumb',
35609                     html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
35610                 }
35611             ]
35612
35613         });
35614
35615         this.xhr.open(this.method, this.url, true);
35616         
35617         var headers = {
35618             "Accept": "application/json",
35619             "Cache-Control": "no-cache",
35620             "X-Requested-With": "XMLHttpRequest"
35621         };
35622         
35623         for (var headerName in headers) {
35624             var headerValue = headers[headerName];
35625             if (headerValue) {
35626                 this.xhr.setRequestHeader(headerName, headerValue);
35627             }
35628         }
35629         
35630         var _this = this;
35631         
35632         this.xhr.onload = function()
35633         {
35634             _this.xhrOnLoad(_this.xhr);
35635         }
35636         
35637         this.xhr.onerror = function()
35638         {
35639             _this.xhrOnError(_this.xhr);
35640         }
35641         
35642         var formData = new FormData();
35643
35644         formData.append('returnHTML', 'NO');
35645         
35646         if(crop){
35647             formData.append('crop', crop);
35648         }
35649         
35650         formData.append(this.paramName, file, file.name);
35651         
35652         var options = {
35653             file : file, 
35654             manually : false
35655         };
35656         
35657         if(this.fireEvent('prepare', this, formData, options) != false){
35658             
35659             if(options.manually){
35660                 return;
35661             }
35662             
35663             this.xhr.send(formData);
35664             return;
35665         };
35666         
35667         this.uploadCancel();
35668     },
35669     
35670     uploadCancel : function()
35671     {
35672         if (this.xhr) {
35673             this.xhr.abort();
35674         }
35675         
35676         this.delegates = [];
35677         
35678         Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
35679             el.remove();
35680         }, this);
35681         
35682         this.arrange();
35683     },
35684     
35685     renderPreview : function(file)
35686     {
35687         if(typeof(file.target) != 'undefined' && file.target){
35688             return file;
35689         }
35690         
35691         var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
35692         
35693         var previewEl = this.managerEl.createChild({
35694             tag : 'div',
35695             cls : 'roo-document-manager-preview',
35696             cn : [
35697                 {
35698                     tag : 'div',
35699                     tooltip : file[this.toolTipName],
35700                     cls : 'roo-document-manager-thumb',
35701                     html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
35702                 },
35703                 {
35704                     tag : 'button',
35705                     cls : 'close',
35706                     html : '<i class="fa fa-times-circle"></i>'
35707                 }
35708             ]
35709         });
35710
35711         var close = previewEl.select('button.close', true).first();
35712
35713         close.on('click', this.onRemove, this, file);
35714
35715         file.target = previewEl;
35716
35717         var image = previewEl.select('img', true).first();
35718         
35719         var _this = this;
35720         
35721         image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
35722         
35723         image.on('click', this.onClick, this, file);
35724         
35725         this.fireEvent('previewrendered', this, file);
35726         
35727         return file;
35728         
35729     },
35730     
35731     onPreviewLoad : function(file, image)
35732     {
35733         if(typeof(file.target) == 'undefined' || !file.target){
35734             return;
35735         }
35736         
35737         var width = image.dom.naturalWidth || image.dom.width;
35738         var height = image.dom.naturalHeight || image.dom.height;
35739         
35740         if(!this.previewResize) {
35741             return;
35742         }
35743         
35744         if(width > height){
35745             file.target.addClass('wide');
35746             return;
35747         }
35748         
35749         file.target.addClass('tall');
35750         return;
35751         
35752     },
35753     
35754     uploadFromSource : function(file, crop)
35755     {
35756         this.xhr = new XMLHttpRequest();
35757         
35758         this.managerEl.createChild({
35759             tag : 'div',
35760             cls : 'roo-document-manager-loading',
35761             cn : [
35762                 {
35763                     tag : 'div',
35764                     tooltip : file.name,
35765                     cls : 'roo-document-manager-thumb',
35766                     html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
35767                 }
35768             ]
35769
35770         });
35771
35772         this.xhr.open(this.method, this.url, true);
35773         
35774         var headers = {
35775             "Accept": "application/json",
35776             "Cache-Control": "no-cache",
35777             "X-Requested-With": "XMLHttpRequest"
35778         };
35779         
35780         for (var headerName in headers) {
35781             var headerValue = headers[headerName];
35782             if (headerValue) {
35783                 this.xhr.setRequestHeader(headerName, headerValue);
35784             }
35785         }
35786         
35787         var _this = this;
35788         
35789         this.xhr.onload = function()
35790         {
35791             _this.xhrOnLoad(_this.xhr);
35792         }
35793         
35794         this.xhr.onerror = function()
35795         {
35796             _this.xhrOnError(_this.xhr);
35797         }
35798         
35799         var formData = new FormData();
35800
35801         formData.append('returnHTML', 'NO');
35802         
35803         formData.append('crop', crop);
35804         
35805         if(typeof(file.filename) != 'undefined'){
35806             formData.append('filename', file.filename);
35807         }
35808         
35809         if(typeof(file.mimetype) != 'undefined'){
35810             formData.append('mimetype', file.mimetype);
35811         }
35812         
35813         Roo.log(formData);
35814         
35815         if(this.fireEvent('prepare', this, formData) != false){
35816             this.xhr.send(formData);
35817         };
35818     }
35819 });
35820
35821 /*
35822 * Licence: LGPL
35823 */
35824
35825 /**
35826  * @class Roo.bootstrap.DocumentViewer
35827  * @extends Roo.bootstrap.Component
35828  * Bootstrap DocumentViewer class
35829  * @cfg {Boolean} showDownload (true|false) show download button (default true)
35830  * @cfg {Boolean} showTrash (true|false) show trash button (default true)
35831  * 
35832  * @constructor
35833  * Create a new DocumentViewer
35834  * @param {Object} config The config object
35835  */
35836
35837 Roo.bootstrap.DocumentViewer = function(config){
35838     Roo.bootstrap.DocumentViewer.superclass.constructor.call(this, config);
35839     
35840     this.addEvents({
35841         /**
35842          * @event initial
35843          * Fire after initEvent
35844          * @param {Roo.bootstrap.DocumentViewer} this
35845          */
35846         "initial" : true,
35847         /**
35848          * @event click
35849          * Fire after click
35850          * @param {Roo.bootstrap.DocumentViewer} this
35851          */
35852         "click" : true,
35853         /**
35854          * @event download
35855          * Fire after download button
35856          * @param {Roo.bootstrap.DocumentViewer} this
35857          */
35858         "download" : true,
35859         /**
35860          * @event trash
35861          * Fire after trash button
35862          * @param {Roo.bootstrap.DocumentViewer} this
35863          */
35864         "trash" : true
35865         
35866     });
35867 };
35868
35869 Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component,  {
35870     
35871     showDownload : true,
35872     
35873     showTrash : true,
35874     
35875     getAutoCreate : function()
35876     {
35877         var cfg = {
35878             tag : 'div',
35879             cls : 'roo-document-viewer',
35880             cn : [
35881                 {
35882                     tag : 'div',
35883                     cls : 'roo-document-viewer-body',
35884                     cn : [
35885                         {
35886                             tag : 'div',
35887                             cls : 'roo-document-viewer-thumb',
35888                             cn : [
35889                                 {
35890                                     tag : 'img',
35891                                     cls : 'roo-document-viewer-image'
35892                                 }
35893                             ]
35894                         }
35895                     ]
35896                 },
35897                 {
35898                     tag : 'div',
35899                     cls : 'roo-document-viewer-footer',
35900                     cn : {
35901                         tag : 'div',
35902                         cls : 'btn-group btn-group-justified roo-document-viewer-btn-group',
35903                         cn : [
35904                             {
35905                                 tag : 'div',
35906                                 cls : 'btn-group roo-document-viewer-download',
35907                                 cn : [
35908                                     {
35909                                         tag : 'button',
35910                                         cls : 'btn btn-default',
35911                                         html : '<i class="fa fa-download"></i>'
35912                                     }
35913                                 ]
35914                             },
35915                             {
35916                                 tag : 'div',
35917                                 cls : 'btn-group roo-document-viewer-trash',
35918                                 cn : [
35919                                     {
35920                                         tag : 'button',
35921                                         cls : 'btn btn-default',
35922                                         html : '<i class="fa fa-trash"></i>'
35923                                     }
35924                                 ]
35925                             }
35926                         ]
35927                     }
35928                 }
35929             ]
35930         };
35931         
35932         return cfg;
35933     },
35934     
35935     initEvents : function()
35936     {
35937         this.bodyEl = this.el.select('.roo-document-viewer-body', true).first();
35938         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
35939         
35940         this.thumbEl = this.el.select('.roo-document-viewer-thumb', true).first();
35941         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
35942         
35943         this.imageEl = this.el.select('.roo-document-viewer-image', true).first();
35944         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
35945         
35946         this.footerEl = this.el.select('.roo-document-viewer-footer', true).first();
35947         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY);
35948         
35949         this.downloadBtn = this.el.select('.roo-document-viewer-download', true).first();
35950         this.downloadBtn.setVisibilityMode(Roo.Element.DISPLAY);
35951         
35952         this.trashBtn = this.el.select('.roo-document-viewer-trash', true).first();
35953         this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY);
35954         
35955         this.bodyEl.on('click', this.onClick, this);
35956         this.downloadBtn.on('click', this.onDownload, this);
35957         this.trashBtn.on('click', this.onTrash, this);
35958         
35959         this.downloadBtn.hide();
35960         this.trashBtn.hide();
35961         
35962         if(this.showDownload){
35963             this.downloadBtn.show();
35964         }
35965         
35966         if(this.showTrash){
35967             this.trashBtn.show();
35968         }
35969         
35970         if(!this.showDownload && !this.showTrash) {
35971             this.footerEl.hide();
35972         }
35973         
35974     },
35975     
35976     initial : function()
35977     {
35978         this.fireEvent('initial', this);
35979         
35980     },
35981     
35982     onClick : function(e)
35983     {
35984         e.preventDefault();
35985         
35986         this.fireEvent('click', this);
35987     },
35988     
35989     onDownload : function(e)
35990     {
35991         e.preventDefault();
35992         
35993         this.fireEvent('download', this);
35994     },
35995     
35996     onTrash : function(e)
35997     {
35998         e.preventDefault();
35999         
36000         this.fireEvent('trash', this);
36001     }
36002     
36003 });
36004 /*
36005  * - LGPL
36006  *
36007  * FieldLabel
36008  * 
36009  */
36010
36011 /**
36012  * @class Roo.bootstrap.form.FieldLabel
36013  * @extends Roo.bootstrap.Component
36014  * Bootstrap FieldLabel class
36015  * @cfg {String} html contents of the element
36016  * @cfg {String} tag tag of the element default label
36017  * @cfg {String} cls class of the element
36018  * @cfg {String} target label target 
36019  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
36020  * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
36021  * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
36022  * @cfg {String} iconTooltip default "This field is required"
36023  * @cfg {String} indicatorpos (left|right) default left
36024  * 
36025  * @constructor
36026  * Create a new FieldLabel
36027  * @param {Object} config The config object
36028  */
36029
36030 Roo.bootstrap.form.FieldLabel = function(config){
36031     Roo.bootstrap.Element.superclass.constructor.call(this, config);
36032     
36033     this.addEvents({
36034             /**
36035              * @event invalid
36036              * Fires after the field has been marked as invalid.
36037              * @param {Roo.form.FieldLabel} this
36038              * @param {String} msg The validation message
36039              */
36040             invalid : true,
36041             /**
36042              * @event valid
36043              * Fires after the field has been validated with no errors.
36044              * @param {Roo.form.FieldLabel} this
36045              */
36046             valid : true
36047         });
36048 };
36049
36050 Roo.extend(Roo.bootstrap.form.FieldLabel, Roo.bootstrap.Component,  {
36051     
36052     tag: 'label',
36053     cls: '',
36054     html: '',
36055     target: '',
36056     allowBlank : true,
36057     invalidClass : 'has-warning',
36058     validClass : 'has-success',
36059     iconTooltip : 'This field is required',
36060     indicatorpos : 'left',
36061     
36062     getAutoCreate : function(){
36063         
36064         var cls = "";
36065         if (!this.allowBlank) {
36066             cls  = "visible";
36067         }
36068         
36069         var cfg = {
36070             tag : this.tag,
36071             cls : 'roo-bootstrap-field-label ' + this.cls,
36072             for : this.target,
36073             cn : [
36074                 {
36075                     tag : 'i',
36076                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
36077                     tooltip : this.iconTooltip
36078                 },
36079                 {
36080                     tag : 'span',
36081                     html : this.html
36082                 }
36083             ] 
36084         };
36085         
36086         if(this.indicatorpos == 'right'){
36087             var cfg = {
36088                 tag : this.tag,
36089                 cls : 'roo-bootstrap-field-label ' + this.cls,
36090                 for : this.target,
36091                 cn : [
36092                     {
36093                         tag : 'span',
36094                         html : this.html
36095                     },
36096                     {
36097                         tag : 'i',
36098                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
36099                         tooltip : this.iconTooltip
36100                     }
36101                 ] 
36102             };
36103         }
36104         
36105         return cfg;
36106     },
36107     
36108     initEvents: function() 
36109     {
36110         Roo.bootstrap.Element.superclass.initEvents.call(this);
36111         
36112         this.indicator = this.indicatorEl();
36113         
36114         if(this.indicator){
36115             this.indicator.removeClass('visible');
36116             this.indicator.addClass('invisible');
36117         }
36118         
36119         Roo.bootstrap.form.FieldLabel.register(this);
36120     },
36121     
36122     indicatorEl : function()
36123     {
36124         var indicator = this.el.select('i.roo-required-indicator',true).first();
36125         
36126         if(!indicator){
36127             return false;
36128         }
36129         
36130         return indicator;
36131         
36132     },
36133     
36134     /**
36135      * Mark this field as valid
36136      */
36137     markValid : function()
36138     {
36139         if(this.indicator){
36140             this.indicator.removeClass('visible');
36141             this.indicator.addClass('invisible');
36142         }
36143         if (Roo.bootstrap.version == 3) {
36144             this.el.removeClass(this.invalidClass);
36145             this.el.addClass(this.validClass);
36146         } else {
36147             this.el.removeClass('is-invalid');
36148             this.el.addClass('is-valid');
36149         }
36150         
36151         
36152         this.fireEvent('valid', this);
36153     },
36154     
36155     /**
36156      * Mark this field as invalid
36157      * @param {String} msg The validation message
36158      */
36159     markInvalid : function(msg)
36160     {
36161         if(this.indicator){
36162             this.indicator.removeClass('invisible');
36163             this.indicator.addClass('visible');
36164         }
36165           if (Roo.bootstrap.version == 3) {
36166             this.el.removeClass(this.validClass);
36167             this.el.addClass(this.invalidClass);
36168         } else {
36169             this.el.removeClass('is-valid');
36170             this.el.addClass('is-invalid');
36171         }
36172         
36173         
36174         this.fireEvent('invalid', this, msg);
36175     }
36176     
36177    
36178 });
36179
36180 Roo.apply(Roo.bootstrap.form.FieldLabel, {
36181     
36182     groups: {},
36183     
36184      /**
36185     * register a FieldLabel Group
36186     * @param {Roo.bootstrap.form.FieldLabel} the FieldLabel to add
36187     */
36188     register : function(label)
36189     {
36190         if(this.groups.hasOwnProperty(label.target)){
36191             return;
36192         }
36193      
36194         this.groups[label.target] = label;
36195         
36196     },
36197     /**
36198     * fetch a FieldLabel Group based on the target
36199     * @param {string} target
36200     * @returns {Roo.bootstrap.form.FieldLabel} the CheckBox group
36201     */
36202     get: function(target) {
36203         if (typeof(this.groups[target]) == 'undefined') {
36204             return false;
36205         }
36206         
36207         return this.groups[target] ;
36208     }
36209 });
36210
36211  
36212
36213  /*
36214  * - LGPL
36215  *
36216  * page DateSplitField.
36217  * 
36218  */
36219
36220
36221 /**
36222  * @class Roo.bootstrap.form.DateSplitField
36223  * @extends Roo.bootstrap.Component
36224  * Bootstrap DateSplitField class
36225  * @cfg {string} fieldLabel - the label associated
36226  * @cfg {Number} labelWidth set the width of label (0-12)
36227  * @cfg {String} labelAlign (top|left)
36228  * @cfg {Boolean} dayAllowBlank (true|false) default false
36229  * @cfg {Boolean} monthAllowBlank (true|false) default false
36230  * @cfg {Boolean} yearAllowBlank (true|false) default false
36231  * @cfg {string} dayPlaceholder 
36232  * @cfg {string} monthPlaceholder
36233  * @cfg {string} yearPlaceholder
36234  * @cfg {string} dayFormat default 'd'
36235  * @cfg {string} monthFormat default 'm'
36236  * @cfg {string} yearFormat default 'Y'
36237  * @cfg {Number} labellg set the width of label (1-12)
36238  * @cfg {Number} labelmd set the width of label (1-12)
36239  * @cfg {Number} labelsm set the width of label (1-12)
36240  * @cfg {Number} labelxs set the width of label (1-12)
36241
36242  *     
36243  * @constructor
36244  * Create a new DateSplitField
36245  * @param {Object} config The config object
36246  */
36247
36248 Roo.bootstrap.form.DateSplitField = function(config){
36249     Roo.bootstrap.form.DateSplitField.superclass.constructor.call(this, config);
36250     
36251     this.addEvents({
36252         // raw events
36253          /**
36254          * @event years
36255          * getting the data of years
36256          * @param {Roo.bootstrap.form.DateSplitField} this
36257          * @param {Object} years
36258          */
36259         "years" : true,
36260         /**
36261          * @event days
36262          * getting the data of days
36263          * @param {Roo.bootstrap.form.DateSplitField} this
36264          * @param {Object} days
36265          */
36266         "days" : true,
36267         /**
36268          * @event invalid
36269          * Fires after the field has been marked as invalid.
36270          * @param {Roo.form.Field} this
36271          * @param {String} msg The validation message
36272          */
36273         invalid : true,
36274        /**
36275          * @event valid
36276          * Fires after the field has been validated with no errors.
36277          * @param {Roo.form.Field} this
36278          */
36279         valid : true
36280     });
36281 };
36282
36283 Roo.extend(Roo.bootstrap.form.DateSplitField, Roo.bootstrap.Component,  {
36284     
36285     fieldLabel : '',
36286     labelAlign : 'top',
36287     labelWidth : 3,
36288     dayAllowBlank : false,
36289     monthAllowBlank : false,
36290     yearAllowBlank : false,
36291     dayPlaceholder : '',
36292     monthPlaceholder : '',
36293     yearPlaceholder : '',
36294     dayFormat : 'd',
36295     monthFormat : 'm',
36296     yearFormat : 'Y',
36297     isFormField : true,
36298     labellg : 0,
36299     labelmd : 0,
36300     labelsm : 0,
36301     labelxs : 0,
36302     
36303     getAutoCreate : function()
36304     {
36305         var cfg = {
36306             tag : 'div',
36307             cls : 'row roo-date-split-field-group',
36308             cn : [
36309                 {
36310                     tag : 'input',
36311                     type : 'hidden',
36312                     cls : 'form-hidden-field roo-date-split-field-group-value',
36313                     name : this.name
36314                 }
36315             ]
36316         };
36317         
36318         var labelCls = 'col-md-12';
36319         var contentCls = 'col-md-4';
36320         
36321         if(this.fieldLabel){
36322             
36323             var label = {
36324                 tag : 'div',
36325                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
36326                 cn : [
36327                     {
36328                         tag : 'label',
36329                         html : this.fieldLabel
36330                     }
36331                 ]
36332             };
36333             
36334             if(this.labelAlign == 'left'){
36335             
36336                 if(this.labelWidth > 12){
36337                     label.style = "width: " + this.labelWidth + 'px';
36338                 }
36339
36340                 if(this.labelWidth < 13 && this.labelmd == 0){
36341                     this.labelmd = this.labelWidth;
36342                 }
36343
36344                 if(this.labellg > 0){
36345                     labelCls = ' col-lg-' + this.labellg;
36346                     contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
36347                 }
36348
36349                 if(this.labelmd > 0){
36350                     labelCls = ' col-md-' + this.labelmd;
36351                     contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
36352                 }
36353
36354                 if(this.labelsm > 0){
36355                     labelCls = ' col-sm-' + this.labelsm;
36356                     contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
36357                 }
36358
36359                 if(this.labelxs > 0){
36360                     labelCls = ' col-xs-' + this.labelxs;
36361                     contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
36362                 }
36363             }
36364             
36365             label.cls += ' ' + labelCls;
36366             
36367             cfg.cn.push(label);
36368         }
36369         
36370         Roo.each(['day', 'month', 'year'], function(t){
36371             cfg.cn.push({
36372                 tag : 'div',
36373                 cls : 'column roo-date-split-field-' + t + ' ' + contentCls
36374             });
36375         }, this);
36376         
36377         return cfg;
36378     },
36379     
36380     inputEl: function ()
36381     {
36382         return this.el.select('.roo-date-split-field-group-value', true).first();
36383     },
36384     
36385     onRender : function(ct, position) 
36386     {
36387         var _this = this;
36388         
36389         Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position);
36390         
36391         this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
36392         
36393         this.dayField = new Roo.bootstrap.form.ComboBox({
36394             allowBlank : this.dayAllowBlank,
36395             alwaysQuery : true,
36396             displayField : 'value',
36397             editable : false,
36398             fieldLabel : '',
36399             forceSelection : true,
36400             mode : 'local',
36401             placeholder : this.dayPlaceholder,
36402             selectOnFocus : true,
36403             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
36404             triggerAction : 'all',
36405             typeAhead : true,
36406             valueField : 'value',
36407             store : new Roo.data.SimpleStore({
36408                 data : (function() {    
36409                     var days = [];
36410                     _this.fireEvent('days', _this, days);
36411                     return days;
36412                 })(),
36413                 fields : [ 'value' ]
36414             }),
36415             listeners : {
36416                 select : function (_self, record, index)
36417                 {
36418                     _this.setValue(_this.getValue());
36419                 }
36420             }
36421         });
36422
36423         this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
36424         
36425         this.monthField = new Roo.bootstrap.form.MonthField({
36426             after : '<i class=\"fa fa-calendar\"></i>',
36427             allowBlank : this.monthAllowBlank,
36428             placeholder : this.monthPlaceholder,
36429             readOnly : true,
36430             listeners : {
36431                 render : function (_self)
36432                 {
36433                     this.el.select('span.input-group-addon', true).first().on('click', function(e){
36434                         e.preventDefault();
36435                         _self.focus();
36436                     });
36437                 },
36438                 select : function (_self, oldvalue, newvalue)
36439                 {
36440                     _this.setValue(_this.getValue());
36441                 }
36442             }
36443         });
36444         
36445         this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
36446         
36447         this.yearField = new Roo.bootstrap.form.ComboBox({
36448             allowBlank : this.yearAllowBlank,
36449             alwaysQuery : true,
36450             displayField : 'value',
36451             editable : false,
36452             fieldLabel : '',
36453             forceSelection : true,
36454             mode : 'local',
36455             placeholder : this.yearPlaceholder,
36456             selectOnFocus : true,
36457             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
36458             triggerAction : 'all',
36459             typeAhead : true,
36460             valueField : 'value',
36461             store : new Roo.data.SimpleStore({
36462                 data : (function() {
36463                     var years = [];
36464                     _this.fireEvent('years', _this, years);
36465                     return years;
36466                 })(),
36467                 fields : [ 'value' ]
36468             }),
36469             listeners : {
36470                 select : function (_self, record, index)
36471                 {
36472                     _this.setValue(_this.getValue());
36473                 }
36474             }
36475         });
36476
36477         this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
36478     },
36479     
36480     setValue : function(v, format)
36481     {
36482         this.inputEl.dom.value = v;
36483         
36484         var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
36485         
36486         var d = Date.parseDate(v, f);
36487         
36488         if(!d){
36489             this.validate();
36490             return;
36491         }
36492         
36493         this.setDay(d.format(this.dayFormat));
36494         this.setMonth(d.format(this.monthFormat));
36495         this.setYear(d.format(this.yearFormat));
36496         
36497         this.validate();
36498         
36499         return;
36500     },
36501     
36502     setDay : function(v)
36503     {
36504         this.dayField.setValue(v);
36505         this.inputEl.dom.value = this.getValue();
36506         this.validate();
36507         return;
36508     },
36509     
36510     setMonth : function(v)
36511     {
36512         this.monthField.setValue(v, true);
36513         this.inputEl.dom.value = this.getValue();
36514         this.validate();
36515         return;
36516     },
36517     
36518     setYear : function(v)
36519     {
36520         this.yearField.setValue(v);
36521         this.inputEl.dom.value = this.getValue();
36522         this.validate();
36523         return;
36524     },
36525     
36526     getDay : function()
36527     {
36528         return this.dayField.getValue();
36529     },
36530     
36531     getMonth : function()
36532     {
36533         return this.monthField.getValue();
36534     },
36535     
36536     getYear : function()
36537     {
36538         return this.yearField.getValue();
36539     },
36540     
36541     getValue : function()
36542     {
36543         var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
36544         
36545         var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
36546         
36547         return date;
36548     },
36549     
36550     reset : function()
36551     {
36552         this.setDay('');
36553         this.setMonth('');
36554         this.setYear('');
36555         this.inputEl.dom.value = '';
36556         this.validate();
36557         return;
36558     },
36559     
36560     validate : function()
36561     {
36562         var d = this.dayField.validate();
36563         var m = this.monthField.validate();
36564         var y = this.yearField.validate();
36565         
36566         var valid = true;
36567         
36568         if(
36569                 (!this.dayAllowBlank && !d) ||
36570                 (!this.monthAllowBlank && !m) ||
36571                 (!this.yearAllowBlank && !y)
36572         ){
36573             valid = false;
36574         }
36575         
36576         if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){
36577             return valid;
36578         }
36579         
36580         if(valid){
36581             this.markValid();
36582             return valid;
36583         }
36584         
36585         this.markInvalid();
36586         
36587         return valid;
36588     },
36589     
36590     markValid : function()
36591     {
36592         
36593         var label = this.el.select('label', true).first();
36594         var icon = this.el.select('i.fa-star', true).first();
36595
36596         if(label && icon){
36597             icon.remove();
36598         }
36599         
36600         this.fireEvent('valid', this);
36601     },
36602     
36603      /**
36604      * Mark this field as invalid
36605      * @param {String} msg The validation message
36606      */
36607     markInvalid : function(msg)
36608     {
36609         
36610         var label = this.el.select('label', true).first();
36611         var icon = this.el.select('i.fa-star', true).first();
36612
36613         if(label && !icon){
36614             this.el.select('.roo-date-split-field-label', true).createChild({
36615                 tag : 'i',
36616                 cls : 'text-danger fa fa-lg fa-star',
36617                 tooltip : 'This field is required',
36618                 style : 'margin-right:5px;'
36619             }, label, true);
36620         }
36621         
36622         this.fireEvent('invalid', this, msg);
36623     },
36624     
36625     clearInvalid : function()
36626     {
36627         var label = this.el.select('label', true).first();
36628         var icon = this.el.select('i.fa-star', true).first();
36629
36630         if(label && icon){
36631             icon.remove();
36632         }
36633         
36634         this.fireEvent('valid', this);
36635     },
36636     
36637     getName: function()
36638     {
36639         return this.name;
36640     }
36641     
36642 });
36643
36644  
36645
36646 /**
36647  * @class Roo.bootstrap.LayoutMasonry
36648  * @extends Roo.bootstrap.Component
36649  * @children Roo.bootstrap.Element Roo.bootstrap.Img Roo.bootstrap.MasonryBrick
36650  * Bootstrap Layout Masonry class
36651  *
36652  * This is based on 
36653  * http://masonry.desandro.com
36654  *
36655  * The idea is to render all the bricks based on vertical width...
36656  *
36657  * The original code extends 'outlayer' - we might need to use that....
36658
36659  * @constructor
36660  * Create a new Element
36661  * @param {Object} config The config object
36662  */
36663
36664 Roo.bootstrap.LayoutMasonry = function(config){
36665     
36666     Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
36667     
36668     this.bricks = [];
36669     
36670     Roo.bootstrap.LayoutMasonry.register(this);
36671     
36672     this.addEvents({
36673         // raw events
36674         /**
36675          * @event layout
36676          * Fire after layout the items
36677          * @param {Roo.bootstrap.LayoutMasonry} this
36678          * @param {Roo.EventObject} e
36679          */
36680         "layout" : true
36681     });
36682     
36683 };
36684
36685 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
36686     
36687     /**
36688      * @cfg {Boolean} isLayoutInstant = no animation?
36689      */   
36690     isLayoutInstant : false, // needed?
36691    
36692     /**
36693      * @cfg {Number} boxWidth  width of the columns
36694      */   
36695     boxWidth : 450,
36696     
36697       /**
36698      * @cfg {Number} boxHeight  - 0 for square, or fix it at a certian height
36699      */   
36700     boxHeight : 0,
36701     
36702     /**
36703      * @cfg {Number} padWidth padding below box..
36704      */   
36705     padWidth : 10, 
36706     
36707     /**
36708      * @cfg {Number} gutter gutter width..
36709      */   
36710     gutter : 10,
36711     
36712      /**
36713      * @cfg {Number} maxCols maximum number of columns
36714      */   
36715     
36716     maxCols: 0,
36717     
36718     /**
36719      * @cfg {Boolean} isAutoInitial defalut true
36720      */   
36721     isAutoInitial : true, 
36722     
36723     containerWidth: 0,
36724     
36725     /**
36726      * @cfg {Boolean} isHorizontal defalut false
36727      */   
36728     isHorizontal : false, 
36729
36730     currentSize : null,
36731     
36732     tag: 'div',
36733     
36734     cls: '',
36735     
36736     bricks: null, //CompositeElement
36737     
36738     cols : 1,
36739     
36740     _isLayoutInited : false,
36741     
36742 //    isAlternative : false, // only use for vertical layout...
36743     
36744     /**
36745      * @cfg {Number} alternativePadWidth padding below box..
36746      */   
36747     alternativePadWidth : 50,
36748     
36749     selectedBrick : [],
36750     
36751     getAutoCreate : function(){
36752         
36753         var cfg = Roo.apply({}, Roo.bootstrap.LayoutMasonry.superclass.getAutoCreate.call(this));
36754         
36755         var cfg = {
36756             tag: this.tag,
36757             cls: 'blog-masonary-wrapper ' + this.cls,
36758             cn : {
36759                 cls : 'mas-boxes masonary'
36760             }
36761         };
36762         
36763         return cfg;
36764     },
36765     
36766     getChildContainer: function( )
36767     {
36768         if (this.boxesEl) {
36769             return this.boxesEl;
36770         }
36771         
36772         this.boxesEl = this.el.select('.mas-boxes').first();
36773         
36774         return this.boxesEl;
36775     },
36776     
36777     
36778     initEvents : function()
36779     {
36780         var _this = this;
36781         
36782         if(this.isAutoInitial){
36783             Roo.log('hook children rendered');
36784             this.on('childrenrendered', function() {
36785                 Roo.log('children rendered');
36786                 _this.initial();
36787             } ,this);
36788         }
36789     },
36790     
36791     initial : function()
36792     {
36793         this.selectedBrick = [];
36794         
36795         this.currentSize = this.el.getBox(true);
36796         
36797         Roo.EventManager.onWindowResize(this.resize, this); 
36798
36799         if(!this.isAutoInitial){
36800             this.layout();
36801             return;
36802         }
36803         
36804         this.layout();
36805         
36806         return;
36807         //this.layout.defer(500,this);
36808         
36809     },
36810     
36811     resize : function()
36812     {
36813         var cs = this.el.getBox(true);
36814         
36815         if (
36816                 this.currentSize.width == cs.width && 
36817                 this.currentSize.x == cs.x && 
36818                 this.currentSize.height == cs.height && 
36819                 this.currentSize.y == cs.y 
36820         ) {
36821             Roo.log("no change in with or X or Y");
36822             return;
36823         }
36824         
36825         this.currentSize = cs;
36826         
36827         this.layout();
36828         
36829     },
36830     
36831     layout : function()
36832     {   
36833         this._resetLayout();
36834         
36835         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
36836         
36837         this.layoutItems( isInstant );
36838       
36839         this._isLayoutInited = true;
36840         
36841         this.fireEvent('layout', this);
36842         
36843     },
36844     
36845     _resetLayout : function()
36846     {
36847         if(this.isHorizontal){
36848             this.horizontalMeasureColumns();
36849             return;
36850         }
36851         
36852         this.verticalMeasureColumns();
36853         
36854     },
36855     
36856     verticalMeasureColumns : function()
36857     {
36858         this.getContainerWidth();
36859         
36860 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
36861 //            this.colWidth = Math.floor(this.containerWidth * 0.8);
36862 //            return;
36863 //        }
36864         
36865         var boxWidth = this.boxWidth + this.padWidth;
36866         
36867         if(this.containerWidth < this.boxWidth){
36868             boxWidth = this.containerWidth
36869         }
36870         
36871         var containerWidth = this.containerWidth;
36872         
36873         var cols = Math.floor(containerWidth / boxWidth);
36874         
36875         this.cols = Math.max( cols, 1 );
36876         
36877         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
36878         
36879         var totalBoxWidth = this.cols * boxWidth - this.padWidth;
36880         
36881         var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
36882         
36883         this.colWidth = boxWidth + avail - this.padWidth;
36884         
36885         this.unitWidth = Math.round((this.colWidth - (this.gutter * 2)) / 3);
36886         this.unitHeight = this.boxHeight > 0 ? this.boxHeight  : this.unitWidth;
36887     },
36888     
36889     horizontalMeasureColumns : function()
36890     {
36891         this.getContainerWidth();
36892         
36893         var boxWidth = this.boxWidth;
36894         
36895         if(this.containerWidth < boxWidth){
36896             boxWidth = this.containerWidth;
36897         }
36898         
36899         this.unitWidth = Math.floor((boxWidth - (this.gutter * 2)) / 3);
36900         
36901         this.el.setHeight(boxWidth);
36902         
36903     },
36904     
36905     getContainerWidth : function()
36906     {
36907         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
36908     },
36909     
36910     layoutItems : function( isInstant )
36911     {
36912         Roo.log(this.bricks);
36913         
36914         var items = Roo.apply([], this.bricks);
36915         
36916         if(this.isHorizontal){
36917             this._horizontalLayoutItems( items , isInstant );
36918             return;
36919         }
36920         
36921 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
36922 //            this._verticalAlternativeLayoutItems( items , isInstant );
36923 //            return;
36924 //        }
36925         
36926         this._verticalLayoutItems( items , isInstant );
36927         
36928     },
36929     
36930     _verticalLayoutItems : function ( items , isInstant)
36931     {
36932         if ( !items || !items.length ) {
36933             return;
36934         }
36935         
36936         var standard = [
36937             ['xs', 'xs', 'xs', 'tall'],
36938             ['xs', 'xs', 'tall'],
36939             ['xs', 'xs', 'sm'],
36940             ['xs', 'xs', 'xs'],
36941             ['xs', 'tall'],
36942             ['xs', 'sm'],
36943             ['xs', 'xs'],
36944             ['xs'],
36945             
36946             ['sm', 'xs', 'xs'],
36947             ['sm', 'xs'],
36948             ['sm'],
36949             
36950             ['tall', 'xs', 'xs', 'xs'],
36951             ['tall', 'xs', 'xs'],
36952             ['tall', 'xs'],
36953             ['tall']
36954             
36955         ];
36956         
36957         var queue = [];
36958         
36959         var boxes = [];
36960         
36961         var box = [];
36962         
36963         Roo.each(items, function(item, k){
36964             
36965             switch (item.size) {
36966                 // these layouts take up a full box,
36967                 case 'md' :
36968                 case 'md-left' :
36969                 case 'md-right' :
36970                 case 'wide' :
36971                     
36972                     if(box.length){
36973                         boxes.push(box);
36974                         box = [];
36975                     }
36976                     
36977                     boxes.push([item]);
36978                     
36979                     break;
36980                     
36981                 case 'xs' :
36982                 case 'sm' :
36983                 case 'tall' :
36984                     
36985                     box.push(item);
36986                     
36987                     break;
36988                 default :
36989                     break;
36990                     
36991             }
36992             
36993         }, this);
36994         
36995         if(box.length){
36996             boxes.push(box);
36997             box = [];
36998         }
36999         
37000         var filterPattern = function(box, length)
37001         {
37002             if(!box.length){
37003                 return;
37004             }
37005             
37006             var match = false;
37007             
37008             var pattern = box.slice(0, length);
37009             
37010             var format = [];
37011             
37012             Roo.each(pattern, function(i){
37013                 format.push(i.size);
37014             }, this);
37015             
37016             Roo.each(standard, function(s){
37017                 
37018                 if(String(s) != String(format)){
37019                     return;
37020                 }
37021                 
37022                 match = true;
37023                 return false;
37024                 
37025             }, this);
37026             
37027             if(!match && length == 1){
37028                 return;
37029             }
37030             
37031             if(!match){
37032                 filterPattern(box, length - 1);
37033                 return;
37034             }
37035                 
37036             queue.push(pattern);
37037
37038             box = box.slice(length, box.length);
37039
37040             filterPattern(box, 4);
37041
37042             return;
37043             
37044         }
37045         
37046         Roo.each(boxes, function(box, k){
37047             
37048             if(!box.length){
37049                 return;
37050             }
37051             
37052             if(box.length == 1){
37053                 queue.push(box);
37054                 return;
37055             }
37056             
37057             filterPattern(box, 4);
37058             
37059         }, this);
37060         
37061         this._processVerticalLayoutQueue( queue, isInstant );
37062         
37063     },
37064     
37065 //    _verticalAlternativeLayoutItems : function( items , isInstant )
37066 //    {
37067 //        if ( !items || !items.length ) {
37068 //            return;
37069 //        }
37070 //
37071 //        this._processVerticalAlternativeLayoutQueue( items, isInstant );
37072 //        
37073 //    },
37074     
37075     _horizontalLayoutItems : function ( items , isInstant)
37076     {
37077         if ( !items || !items.length || items.length < 3) {
37078             return;
37079         }
37080         
37081         items.reverse();
37082         
37083         var eItems = items.slice(0, 3);
37084         
37085         items = items.slice(3, items.length);
37086         
37087         var standard = [
37088             ['xs', 'xs', 'xs', 'wide'],
37089             ['xs', 'xs', 'wide'],
37090             ['xs', 'xs', 'sm'],
37091             ['xs', 'xs', 'xs'],
37092             ['xs', 'wide'],
37093             ['xs', 'sm'],
37094             ['xs', 'xs'],
37095             ['xs'],
37096             
37097             ['sm', 'xs', 'xs'],
37098             ['sm', 'xs'],
37099             ['sm'],
37100             
37101             ['wide', 'xs', 'xs', 'xs'],
37102             ['wide', 'xs', 'xs'],
37103             ['wide', 'xs'],
37104             ['wide'],
37105             
37106             ['wide-thin']
37107         ];
37108         
37109         var queue = [];
37110         
37111         var boxes = [];
37112         
37113         var box = [];
37114         
37115         Roo.each(items, function(item, k){
37116             
37117             switch (item.size) {
37118                 case 'md' :
37119                 case 'md-left' :
37120                 case 'md-right' :
37121                 case 'tall' :
37122                     
37123                     if(box.length){
37124                         boxes.push(box);
37125                         box = [];
37126                     }
37127                     
37128                     boxes.push([item]);
37129                     
37130                     break;
37131                     
37132                 case 'xs' :
37133                 case 'sm' :
37134                 case 'wide' :
37135                 case 'wide-thin' :
37136                     
37137                     box.push(item);
37138                     
37139                     break;
37140                 default :
37141                     break;
37142                     
37143             }
37144             
37145         }, this);
37146         
37147         if(box.length){
37148             boxes.push(box);
37149             box = [];
37150         }
37151         
37152         var filterPattern = function(box, length)
37153         {
37154             if(!box.length){
37155                 return;
37156             }
37157             
37158             var match = false;
37159             
37160             var pattern = box.slice(0, length);
37161             
37162             var format = [];
37163             
37164             Roo.each(pattern, function(i){
37165                 format.push(i.size);
37166             }, this);
37167             
37168             Roo.each(standard, function(s){
37169                 
37170                 if(String(s) != String(format)){
37171                     return;
37172                 }
37173                 
37174                 match = true;
37175                 return false;
37176                 
37177             }, this);
37178             
37179             if(!match && length == 1){
37180                 return;
37181             }
37182             
37183             if(!match){
37184                 filterPattern(box, length - 1);
37185                 return;
37186             }
37187                 
37188             queue.push(pattern);
37189
37190             box = box.slice(length, box.length);
37191
37192             filterPattern(box, 4);
37193
37194             return;
37195             
37196         }
37197         
37198         Roo.each(boxes, function(box, k){
37199             
37200             if(!box.length){
37201                 return;
37202             }
37203             
37204             if(box.length == 1){
37205                 queue.push(box);
37206                 return;
37207             }
37208             
37209             filterPattern(box, 4);
37210             
37211         }, this);
37212         
37213         
37214         var prune = [];
37215         
37216         var pos = this.el.getBox(true);
37217         
37218         var minX = pos.x;
37219         
37220         var maxX = pos.right - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
37221         
37222         var hit_end = false;
37223         
37224         Roo.each(queue, function(box){
37225             
37226             if(hit_end){
37227                 
37228                 Roo.each(box, function(b){
37229                 
37230                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
37231                     b.el.hide();
37232
37233                 }, this);
37234
37235                 return;
37236             }
37237             
37238             var mx = 0;
37239             
37240             Roo.each(box, function(b){
37241                 
37242                 b.el.setVisibilityMode(Roo.Element.DISPLAY);
37243                 b.el.show();
37244
37245                 mx = Math.max(mx, b.x);
37246                 
37247             }, this);
37248             
37249             maxX = maxX - this.unitWidth * mx - this.gutter * (mx - 1) - this.padWidth;
37250             
37251             if(maxX < minX){
37252                 
37253                 Roo.each(box, function(b){
37254                 
37255                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
37256                     b.el.hide();
37257                     
37258                 }, this);
37259                 
37260                 hit_end = true;
37261                 
37262                 return;
37263             }
37264             
37265             prune.push(box);
37266             
37267         }, this);
37268         
37269         this._processHorizontalLayoutQueue( prune, eItems, isInstant );
37270     },
37271     
37272     /** Sets position of item in DOM
37273     * @param {Element} item
37274     * @param {Number} x - horizontal position
37275     * @param {Number} y - vertical position
37276     * @param {Boolean} isInstant - disables transitions
37277     */
37278     _processVerticalLayoutQueue : function( queue, isInstant )
37279     {
37280         var pos = this.el.getBox(true);
37281         var x = pos.x;
37282         var y = pos.y;
37283         var maxY = [];
37284         
37285         for (var i = 0; i < this.cols; i++){
37286             maxY[i] = pos.y;
37287         }
37288         
37289         Roo.each(queue, function(box, k){
37290             
37291             var col = k % this.cols;
37292             
37293             Roo.each(box, function(b,kk){
37294                 
37295                 b.el.position('absolute');
37296                 
37297                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
37298                 var height = Math.floor(this.unitHeight * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
37299                 
37300                 if(b.size == 'md-left' || b.size == 'md-right'){
37301                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
37302                     height = Math.floor(this.unitHeight * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
37303                 }
37304                 
37305                 b.el.setWidth(width);
37306                 b.el.setHeight(height);
37307                 // iframe?
37308                 b.el.select('iframe',true).setSize(width,height);
37309                 
37310             }, this);
37311             
37312             for (var i = 0; i < this.cols; i++){
37313                 
37314                 if(maxY[i] < maxY[col]){
37315                     col = i;
37316                     continue;
37317                 }
37318                 
37319                 col = Math.min(col, i);
37320                 
37321             }
37322             
37323             x = pos.x + col * (this.colWidth + this.padWidth);
37324             
37325             y = maxY[col];
37326             
37327             var positions = [];
37328             
37329             switch (box.length){
37330                 case 1 :
37331                     positions = this.getVerticalOneBoxColPositions(x, y, box);
37332                     break;
37333                 case 2 :
37334                     positions = this.getVerticalTwoBoxColPositions(x, y, box);
37335                     break;
37336                 case 3 :
37337                     positions = this.getVerticalThreeBoxColPositions(x, y, box);
37338                     break;
37339                 case 4 :
37340                     positions = this.getVerticalFourBoxColPositions(x, y, box);
37341                     break;
37342                 default :
37343                     break;
37344             }
37345             
37346             Roo.each(box, function(b,kk){
37347                 
37348                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
37349                 
37350                 var sz = b.el.getSize();
37351                 
37352                 maxY[col] = Math.max(maxY[col], positions[kk].y + sz.height + this.padWidth);
37353                 
37354             }, this);
37355             
37356         }, this);
37357         
37358         var mY = 0;
37359         
37360         for (var i = 0; i < this.cols; i++){
37361             mY = Math.max(mY, maxY[i]);
37362         }
37363         
37364         this.el.setHeight(mY - pos.y);
37365         
37366     },
37367     
37368 //    _processVerticalAlternativeLayoutQueue : function( items, isInstant )
37369 //    {
37370 //        var pos = this.el.getBox(true);
37371 //        var x = pos.x;
37372 //        var y = pos.y;
37373 //        var maxX = pos.right;
37374 //        
37375 //        var maxHeight = 0;
37376 //        
37377 //        Roo.each(items, function(item, k){
37378 //            
37379 //            var c = k % 2;
37380 //            
37381 //            item.el.position('absolute');
37382 //                
37383 //            var width = Math.floor(this.colWidth + item.el.getPadding('lr'));
37384 //
37385 //            item.el.setWidth(width);
37386 //
37387 //            var height = Math.floor(this.colWidth * item.y / item.x + item.el.getPadding('tb'));
37388 //
37389 //            item.el.setHeight(height);
37390 //            
37391 //            if(c == 0){
37392 //                item.el.setXY([x, y], isInstant ? false : true);
37393 //            } else {
37394 //                item.el.setXY([maxX - width, y], isInstant ? false : true);
37395 //            }
37396 //            
37397 //            y = y + height + this.alternativePadWidth;
37398 //            
37399 //            maxHeight = maxHeight + height + this.alternativePadWidth;
37400 //            
37401 //        }, this);
37402 //        
37403 //        this.el.setHeight(maxHeight);
37404 //        
37405 //    },
37406     
37407     _processHorizontalLayoutQueue : function( queue, eItems, isInstant )
37408     {
37409         var pos = this.el.getBox(true);
37410         
37411         var minX = pos.x;
37412         var minY = pos.y;
37413         
37414         var maxX = pos.right;
37415         
37416         this._processHorizontalEndItem(eItems, maxX, minX, minY, isInstant);
37417         
37418         var maxX = maxX - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
37419         
37420         Roo.each(queue, function(box, k){
37421             
37422             Roo.each(box, function(b, kk){
37423                 
37424                 b.el.position('absolute');
37425                 
37426                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
37427                 var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
37428                 
37429                 if(b.size == 'md-left' || b.size == 'md-right'){
37430                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
37431                     height = Math.floor(this.unitWidth * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
37432                 }
37433                 
37434                 b.el.setWidth(width);
37435                 b.el.setHeight(height);
37436                 
37437             }, this);
37438             
37439             if(!box.length){
37440                 return;
37441             }
37442             
37443             var positions = [];
37444             
37445             switch (box.length){
37446                 case 1 :
37447                     positions = this.getHorizontalOneBoxColPositions(maxX, minY, box);
37448                     break;
37449                 case 2 :
37450                     positions = this.getHorizontalTwoBoxColPositions(maxX, minY, box);
37451                     break;
37452                 case 3 :
37453                     positions = this.getHorizontalThreeBoxColPositions(maxX, minY, box);
37454                     break;
37455                 case 4 :
37456                     positions = this.getHorizontalFourBoxColPositions(maxX, minY, box);
37457                     break;
37458                 default :
37459                     break;
37460             }
37461             
37462             Roo.each(box, function(b,kk){
37463                 
37464                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
37465                 
37466                 maxX = Math.min(maxX, positions[kk].x - this.padWidth);
37467                 
37468             }, this);
37469             
37470         }, this);
37471         
37472     },
37473     
37474     _processHorizontalEndItem : function(eItems, maxX, minX, minY, isInstant)
37475     {
37476         Roo.each(eItems, function(b,k){
37477             
37478             b.size = (k == 0) ? 'sm' : 'xs';
37479             b.x = (k == 0) ? 2 : 1;
37480             b.y = (k == 0) ? 2 : 1;
37481             
37482             b.el.position('absolute');
37483             
37484             var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
37485                 
37486             b.el.setWidth(width);
37487             
37488             var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
37489             
37490             b.el.setHeight(height);
37491             
37492         }, this);
37493
37494         var positions = [];
37495         
37496         positions.push({
37497             x : maxX - this.unitWidth * 2 - this.gutter,
37498             y : minY
37499         });
37500         
37501         positions.push({
37502             x : maxX - this.unitWidth,
37503             y : minY + (this.unitWidth + this.gutter) * 2
37504         });
37505         
37506         positions.push({
37507             x : maxX - this.unitWidth * 3 - this.gutter * 2,
37508             y : minY
37509         });
37510         
37511         Roo.each(eItems, function(b,k){
37512             
37513             b.el.setXY([positions[k].x, positions[k].y], isInstant ? false : true);
37514
37515         }, this);
37516         
37517     },
37518     
37519     getVerticalOneBoxColPositions : function(x, y, box)
37520     {
37521         var pos = [];
37522         
37523         var rand = Math.floor(Math.random() * ((4 - box[0].x)));
37524         
37525         if(box[0].size == 'md-left'){
37526             rand = 0;
37527         }
37528         
37529         if(box[0].size == 'md-right'){
37530             rand = 1;
37531         }
37532         
37533         pos.push({
37534             x : x + (this.unitWidth + this.gutter) * rand,
37535             y : y
37536         });
37537         
37538         return pos;
37539     },
37540     
37541     getVerticalTwoBoxColPositions : function(x, y, box)
37542     {
37543         var pos = [];
37544         
37545         if(box[0].size == 'xs'){
37546             
37547             pos.push({
37548                 x : x,
37549                 y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[1].y))
37550             });
37551
37552             pos.push({
37553                 x : x + (this.unitWidth + this.gutter) * (3 - box[1].x),
37554                 y : y
37555             });
37556             
37557             return pos;
37558             
37559         }
37560         
37561         pos.push({
37562             x : x,
37563             y : y
37564         });
37565
37566         pos.push({
37567             x : x + (this.unitWidth + this.gutter) * 2,
37568             y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[0].y))
37569         });
37570         
37571         return pos;
37572         
37573     },
37574     
37575     getVerticalThreeBoxColPositions : function(x, y, box)
37576     {
37577         var pos = [];
37578         
37579         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
37580             
37581             pos.push({
37582                 x : x,
37583                 y : y
37584             });
37585
37586             pos.push({
37587                 x : x + (this.unitWidth + this.gutter) * 1,
37588                 y : y
37589             });
37590             
37591             pos.push({
37592                 x : x + (this.unitWidth + this.gutter) * 2,
37593                 y : y
37594             });
37595             
37596             return pos;
37597             
37598         }
37599         
37600         if(box[0].size == 'xs' && box[1].size == 'xs'){
37601             
37602             pos.push({
37603                 x : x,
37604                 y : y
37605             });
37606
37607             pos.push({
37608                 x : x,
37609                 y : y + ((this.unitHeight + this.gutter) * (box[2].y - 1))
37610             });
37611             
37612             pos.push({
37613                 x : x + (this.unitWidth + this.gutter) * 1,
37614                 y : y
37615             });
37616             
37617             return pos;
37618             
37619         }
37620         
37621         pos.push({
37622             x : x,
37623             y : y
37624         });
37625
37626         pos.push({
37627             x : x + (this.unitWidth + this.gutter) * 2,
37628             y : y
37629         });
37630
37631         pos.push({
37632             x : x + (this.unitWidth + this.gutter) * 2,
37633             y : y + (this.unitHeight + this.gutter) * (box[0].y - 1)
37634         });
37635             
37636         return pos;
37637         
37638     },
37639     
37640     getVerticalFourBoxColPositions : function(x, y, box)
37641     {
37642         var pos = [];
37643         
37644         if(box[0].size == 'xs'){
37645             
37646             pos.push({
37647                 x : x,
37648                 y : y
37649             });
37650
37651             pos.push({
37652                 x : x,
37653                 y : y + (this.unitHeight + this.gutter) * 1
37654             });
37655             
37656             pos.push({
37657                 x : x,
37658                 y : y + (this.unitHeight + this.gutter) * 2
37659             });
37660             
37661             pos.push({
37662                 x : x + (this.unitWidth + this.gutter) * 1,
37663                 y : y
37664             });
37665             
37666             return pos;
37667             
37668         }
37669         
37670         pos.push({
37671             x : x,
37672             y : y
37673         });
37674
37675         pos.push({
37676             x : x + (this.unitWidth + this.gutter) * 2,
37677             y : y
37678         });
37679
37680         pos.push({
37681             x : x + (this.unitHeightunitWidth + this.gutter) * 2,
37682             y : y + (this.unitHeight + this.gutter) * 1
37683         });
37684
37685         pos.push({
37686             x : x + (this.unitWidth + this.gutter) * 2,
37687             y : y + (this.unitWidth + this.gutter) * 2
37688         });
37689
37690         return pos;
37691         
37692     },
37693     
37694     getHorizontalOneBoxColPositions : function(maxX, minY, box)
37695     {
37696         var pos = [];
37697         
37698         if(box[0].size == 'md-left'){
37699             pos.push({
37700                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
37701                 y : minY
37702             });
37703             
37704             return pos;
37705         }
37706         
37707         if(box[0].size == 'md-right'){
37708             pos.push({
37709                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
37710                 y : minY + (this.unitWidth + this.gutter) * 1
37711             });
37712             
37713             return pos;
37714         }
37715         
37716         var rand = Math.floor(Math.random() * (4 - box[0].y));
37717         
37718         pos.push({
37719             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37720             y : minY + (this.unitWidth + this.gutter) * rand
37721         });
37722         
37723         return pos;
37724         
37725     },
37726     
37727     getHorizontalTwoBoxColPositions : function(maxX, minY, box)
37728     {
37729         var pos = [];
37730         
37731         if(box[0].size == 'xs'){
37732             
37733             pos.push({
37734                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37735                 y : minY
37736             });
37737
37738             pos.push({
37739                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37740                 y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
37741             });
37742             
37743             return pos;
37744             
37745         }
37746         
37747         pos.push({
37748             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37749             y : minY
37750         });
37751
37752         pos.push({
37753             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37754             y : minY + (this.unitWidth + this.gutter) * 2
37755         });
37756         
37757         return pos;
37758         
37759     },
37760     
37761     getHorizontalThreeBoxColPositions : function(maxX, minY, box)
37762     {
37763         var pos = [];
37764         
37765         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
37766             
37767             pos.push({
37768                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37769                 y : minY
37770             });
37771
37772             pos.push({
37773                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37774                 y : minY + (this.unitWidth + this.gutter) * 1
37775             });
37776             
37777             pos.push({
37778                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
37779                 y : minY + (this.unitWidth + this.gutter) * 2
37780             });
37781             
37782             return pos;
37783             
37784         }
37785         
37786         if(box[0].size == 'xs' && box[1].size == 'xs'){
37787             
37788             pos.push({
37789                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37790                 y : minY
37791             });
37792
37793             pos.push({
37794                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37795                 y : minY
37796             });
37797             
37798             pos.push({
37799                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
37800                 y : minY + (this.unitWidth + this.gutter) * 1
37801             });
37802             
37803             return pos;
37804             
37805         }
37806         
37807         pos.push({
37808             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37809             y : minY
37810         });
37811
37812         pos.push({
37813             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37814             y : minY + (this.unitWidth + this.gutter) * 2
37815         });
37816
37817         pos.push({
37818             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
37819             y : minY + (this.unitWidth + this.gutter) * 2
37820         });
37821             
37822         return pos;
37823         
37824     },
37825     
37826     getHorizontalFourBoxColPositions : function(maxX, minY, box)
37827     {
37828         var pos = [];
37829         
37830         if(box[0].size == 'xs'){
37831             
37832             pos.push({
37833                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37834                 y : minY
37835             });
37836
37837             pos.push({
37838                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37839                 y : minY
37840             });
37841             
37842             pos.push({
37843                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
37844                 y : minY
37845             });
37846             
37847             pos.push({
37848                 x : maxX - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
37849                 y : minY + (this.unitWidth + this.gutter) * 1
37850             });
37851             
37852             return pos;
37853             
37854         }
37855         
37856         pos.push({
37857             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
37858             y : minY
37859         });
37860         
37861         pos.push({
37862             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
37863             y : minY + (this.unitWidth + this.gutter) * 2
37864         });
37865         
37866         pos.push({
37867             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
37868             y : minY + (this.unitWidth + this.gutter) * 2
37869         });
37870         
37871         pos.push({
37872             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1) - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
37873             y : minY + (this.unitWidth + this.gutter) * 2
37874         });
37875
37876         return pos;
37877         
37878     },
37879     
37880     /**
37881     * remove a Masonry Brick
37882     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to remove
37883     */
37884     removeBrick : function(brick_id)
37885     {
37886         if (!brick_id) {
37887             return;
37888         }
37889         
37890         for (var i = 0; i<this.bricks.length; i++) {
37891             if (this.bricks[i].id == brick_id) {
37892                 this.bricks.splice(i,1);
37893                 this.el.dom.removeChild(Roo.get(brick_id).dom);
37894                 this.initial();
37895             }
37896         }
37897     },
37898     
37899     /**
37900     * adds a Masonry Brick
37901     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
37902     */
37903     addBrick : function(cfg)
37904     {
37905         var cn = new Roo.bootstrap.MasonryBrick(cfg);
37906         //this.register(cn);
37907         cn.parentId = this.id;
37908         cn.render(this.el);
37909         return cn;
37910     },
37911     
37912     /**
37913     * register a Masonry Brick
37914     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
37915     */
37916     
37917     register : function(brick)
37918     {
37919         this.bricks.push(brick);
37920         brick.masonryId = this.id;
37921     },
37922     
37923     /**
37924     * clear all the Masonry Brick
37925     */
37926     clearAll : function()
37927     {
37928         this.bricks = [];
37929         //this.getChildContainer().dom.innerHTML = "";
37930         this.el.dom.innerHTML = '';
37931     },
37932     
37933     getSelected : function()
37934     {
37935         if (!this.selectedBrick) {
37936             return false;
37937         }
37938         
37939         return this.selectedBrick;
37940     }
37941 });
37942
37943 Roo.apply(Roo.bootstrap.LayoutMasonry, {
37944     
37945     groups: {},
37946      /**
37947     * register a Masonry Layout
37948     * @param {Roo.bootstrap.LayoutMasonry} the masonry layout to add
37949     */
37950     
37951     register : function(layout)
37952     {
37953         this.groups[layout.id] = layout;
37954     },
37955     /**
37956     * fetch a  Masonry Layout based on the masonry layout ID
37957     * @param {string} the masonry layout to add
37958     * @returns {Roo.bootstrap.LayoutMasonry} the masonry layout
37959     */
37960     
37961     get: function(layout_id) {
37962         if (typeof(this.groups[layout_id]) == 'undefined') {
37963             return false;
37964         }
37965         return this.groups[layout_id] ;
37966     }
37967     
37968     
37969     
37970 });
37971
37972  
37973
37974  /**
37975  *
37976  * This is based on 
37977  * http://masonry.desandro.com
37978  *
37979  * The idea is to render all the bricks based on vertical width...
37980  *
37981  * The original code extends 'outlayer' - we might need to use that....
37982  * 
37983  */
37984
37985
37986 /**
37987  * @class Roo.bootstrap.LayoutMasonryAuto
37988  * @extends Roo.bootstrap.Component
37989  * Bootstrap Layout Masonry class
37990  * 
37991  * @constructor
37992  * Create a new Element
37993  * @param {Object} config The config object
37994  */
37995
37996 Roo.bootstrap.LayoutMasonryAuto = function(config){
37997     Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call(this, config);
37998 };
37999
38000 Roo.extend(Roo.bootstrap.LayoutMasonryAuto, Roo.bootstrap.Component,  {
38001     
38002       /**
38003      * @cfg {Boolean} isFitWidth  - resize the width..
38004      */   
38005     isFitWidth : false,  // options..
38006     /**
38007      * @cfg {Boolean} isOriginLeft = left align?
38008      */   
38009     isOriginLeft : true,
38010     /**
38011      * @cfg {Boolean} isOriginTop = top align?
38012      */   
38013     isOriginTop : false,
38014     /**
38015      * @cfg {Boolean} isLayoutInstant = no animation?
38016      */   
38017     isLayoutInstant : false, // needed?
38018     /**
38019      * @cfg {Boolean} isResizingContainer = not sure if this is used..
38020      */   
38021     isResizingContainer : true,
38022     /**
38023      * @cfg {Number} columnWidth  width of the columns 
38024      */   
38025     
38026     columnWidth : 0,
38027     
38028     /**
38029      * @cfg {Number} maxCols maximum number of columns
38030      */   
38031     
38032     maxCols: 0,
38033     /**
38034      * @cfg {Number} padHeight padding below box..
38035      */   
38036     
38037     padHeight : 10, 
38038     
38039     /**
38040      * @cfg {Boolean} isAutoInitial defalut true
38041      */   
38042     
38043     isAutoInitial : true, 
38044     
38045     // private?
38046     gutter : 0,
38047     
38048     containerWidth: 0,
38049     initialColumnWidth : 0,
38050     currentSize : null,
38051     
38052     colYs : null, // array.
38053     maxY : 0,
38054     padWidth: 10,
38055     
38056     
38057     tag: 'div',
38058     cls: '',
38059     bricks: null, //CompositeElement
38060     cols : 0, // array?
38061     // element : null, // wrapped now this.el
38062     _isLayoutInited : null, 
38063     
38064     
38065     getAutoCreate : function(){
38066         
38067         var cfg = {
38068             tag: this.tag,
38069             cls: 'blog-masonary-wrapper ' + this.cls,
38070             cn : {
38071                 cls : 'mas-boxes masonary'
38072             }
38073         };
38074         
38075         return cfg;
38076     },
38077     
38078     getChildContainer: function( )
38079     {
38080         if (this.boxesEl) {
38081             return this.boxesEl;
38082         }
38083         
38084         this.boxesEl = this.el.select('.mas-boxes').first();
38085         
38086         return this.boxesEl;
38087     },
38088     
38089     
38090     initEvents : function()
38091     {
38092         var _this = this;
38093         
38094         if(this.isAutoInitial){
38095             Roo.log('hook children rendered');
38096             this.on('childrenrendered', function() {
38097                 Roo.log('children rendered');
38098                 _this.initial();
38099             } ,this);
38100         }
38101         
38102     },
38103     
38104     initial : function()
38105     {
38106         this.reloadItems();
38107
38108         this.currentSize = this.el.getBox(true);
38109
38110         /// was window resize... - let's see if this works..
38111         Roo.EventManager.onWindowResize(this.resize, this); 
38112
38113         if(!this.isAutoInitial){
38114             this.layout();
38115             return;
38116         }
38117         
38118         this.layout.defer(500,this);
38119     },
38120     
38121     reloadItems: function()
38122     {
38123         this.bricks = this.el.select('.masonry-brick', true);
38124         
38125         this.bricks.each(function(b) {
38126             //Roo.log(b.getSize());
38127             if (!b.attr('originalwidth')) {
38128                 b.attr('originalwidth',  b.getSize().width);
38129             }
38130             
38131         });
38132         
38133         Roo.log(this.bricks.elements.length);
38134     },
38135     
38136     resize : function()
38137     {
38138         Roo.log('resize');
38139         var cs = this.el.getBox(true);
38140         
38141         if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
38142             Roo.log("no change in with or X");
38143             return;
38144         }
38145         this.currentSize = cs;
38146         this.layout();
38147     },
38148     
38149     layout : function()
38150     {
38151          Roo.log('layout');
38152         this._resetLayout();
38153         //this._manageStamps();
38154       
38155         // don't animate first layout
38156         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
38157         this.layoutItems( isInstant );
38158       
38159         // flag for initalized
38160         this._isLayoutInited = true;
38161     },
38162     
38163     layoutItems : function( isInstant )
38164     {
38165         //var items = this._getItemsForLayout( this.items );
38166         // original code supports filtering layout items.. we just ignore it..
38167         
38168         this._layoutItems( this.bricks , isInstant );
38169       
38170         this._postLayout();
38171     },
38172     _layoutItems : function ( items , isInstant)
38173     {
38174        //this.fireEvent( 'layout', this, items );
38175     
38176
38177         if ( !items || !items.elements.length ) {
38178           // no items, emit event with empty array
38179             return;
38180         }
38181
38182         var queue = [];
38183         items.each(function(item) {
38184             Roo.log("layout item");
38185             Roo.log(item);
38186             // get x/y object from method
38187             var position = this._getItemLayoutPosition( item );
38188             // enqueue
38189             position.item = item;
38190             position.isInstant = isInstant; // || item.isLayoutInstant; << not set yet...
38191             queue.push( position );
38192         }, this);
38193       
38194         this._processLayoutQueue( queue );
38195     },
38196     /** Sets position of item in DOM
38197     * @param {Element} item
38198     * @param {Number} x - horizontal position
38199     * @param {Number} y - vertical position
38200     * @param {Boolean} isInstant - disables transitions
38201     */
38202     _processLayoutQueue : function( queue )
38203     {
38204         for ( var i=0, len = queue.length; i < len; i++ ) {
38205             var obj = queue[i];
38206             obj.item.position('absolute');
38207             obj.item.setXY([obj.x,obj.y], obj.isInstant ? false : true);
38208         }
38209     },
38210       
38211     
38212     /**
38213     * Any logic you want to do after each layout,
38214     * i.e. size the container
38215     */
38216     _postLayout : function()
38217     {
38218         this.resizeContainer();
38219     },
38220     
38221     resizeContainer : function()
38222     {
38223         if ( !this.isResizingContainer ) {
38224             return;
38225         }
38226         var size = this._getContainerSize();
38227         if ( size ) {
38228             this.el.setSize(size.width,size.height);
38229             this.boxesEl.setSize(size.width,size.height);
38230         }
38231     },
38232     
38233     
38234     
38235     _resetLayout : function()
38236     {
38237         //this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
38238         this.colWidth = this.el.getWidth();
38239         //this.gutter = this.el.getWidth(); 
38240         
38241         this.measureColumns();
38242
38243         // reset column Y
38244         var i = this.cols;
38245         this.colYs = [];
38246         while (i--) {
38247             this.colYs.push( 0 );
38248         }
38249     
38250         this.maxY = 0;
38251     },
38252
38253     measureColumns : function()
38254     {
38255         this.getContainerWidth();
38256       // if columnWidth is 0, default to outerWidth of first item
38257         if ( !this.columnWidth ) {
38258             var firstItem = this.bricks.first();
38259             Roo.log(firstItem);
38260             this.columnWidth  = this.containerWidth;
38261             if (firstItem && firstItem.attr('originalwidth') ) {
38262                 this.columnWidth = 1* (firstItem.attr('originalwidth') || firstItem.getWidth());
38263             }
38264             // columnWidth fall back to item of first element
38265             Roo.log("set column width?");
38266                         this.initialColumnWidth = this.columnWidth  ;
38267
38268             // if first elem has no width, default to size of container
38269             
38270         }
38271         
38272         
38273         if (this.initialColumnWidth) {
38274             this.columnWidth = this.initialColumnWidth;
38275         }
38276         
38277         
38278             
38279         // column width is fixed at the top - however if container width get's smaller we should
38280         // reduce it...
38281         
38282         // this bit calcs how man columns..
38283             
38284         var columnWidth = this.columnWidth += this.gutter;
38285       
38286         // calculate columns
38287         var containerWidth = this.containerWidth + this.gutter;
38288         
38289         var cols = (containerWidth - this.padWidth) / (columnWidth - this.padWidth);
38290         // fix rounding errors, typically with gutters
38291         var excess = columnWidth - containerWidth % columnWidth;
38292         
38293         
38294         // if overshoot is less than a pixel, round up, otherwise floor it
38295         var mathMethod = excess && excess < 1 ? 'round' : 'floor';
38296         cols = Math[ mathMethod ]( cols );
38297         this.cols = Math.max( cols, 1 );
38298         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
38299         
38300          // padding positioning..
38301         var totalColWidth = this.cols * this.columnWidth;
38302         var padavail = this.containerWidth - totalColWidth;
38303         // so for 2 columns - we need 3 'pads'
38304         
38305         var padNeeded = (1+this.cols) * this.padWidth;
38306         
38307         var padExtra = Math.floor((padavail - padNeeded) / this.cols);
38308         
38309         this.columnWidth += padExtra
38310         //this.padWidth = Math.floor(padavail /  ( this.cols));
38311         
38312         // adjust colum width so that padding is fixed??
38313         
38314         // we have 3 columns ... total = width * 3
38315         // we have X left over... that should be used by 
38316         
38317         //if (this.expandC) {
38318             
38319         //}
38320         
38321         
38322         
38323     },
38324     
38325     getContainerWidth : function()
38326     {
38327        /* // container is parent if fit width
38328         var container = this.isFitWidth ? this.element.parentNode : this.element;
38329         // check that this.size and size are there
38330         // IE8 triggers resize on body size change, so they might not be
38331         
38332         var size = getSize( container );  //FIXME
38333         this.containerWidth = size && size.innerWidth; //FIXME
38334         */
38335          
38336         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
38337         
38338     },
38339     
38340     _getItemLayoutPosition : function( item )  // what is item?
38341     {
38342         // we resize the item to our columnWidth..
38343       
38344         item.setWidth(this.columnWidth);
38345         item.autoBoxAdjust  = false;
38346         
38347         var sz = item.getSize();
38348  
38349         // how many columns does this brick span
38350         var remainder = this.containerWidth % this.columnWidth;
38351         
38352         var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
38353         // round if off by 1 pixel, otherwise use ceil
38354         var colSpan = Math[ mathMethod ]( sz.width  / this.columnWidth );
38355         colSpan = Math.min( colSpan, this.cols );
38356         
38357         // normally this should be '1' as we dont' currently allow multi width columns..
38358         
38359         var colGroup = this._getColGroup( colSpan );
38360         // get the minimum Y value from the columns
38361         var minimumY = Math.min.apply( Math, colGroup );
38362         Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
38363         
38364         var shortColIndex = colGroup.indexOf(  minimumY ); // broken on ie8..?? probably...
38365          
38366         // position the brick
38367         var position = {
38368             x: this.currentSize.x + (this.padWidth /2) + ((this.columnWidth + this.padWidth )* shortColIndex),
38369             y: this.currentSize.y + minimumY + this.padHeight
38370         };
38371         
38372         Roo.log(position);
38373         // apply setHeight to necessary columns
38374         var setHeight = minimumY + sz.height + this.padHeight;
38375         //Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
38376         
38377         var setSpan = this.cols + 1 - colGroup.length;
38378         for ( var i = 0; i < setSpan; i++ ) {
38379           this.colYs[ shortColIndex + i ] = setHeight ;
38380         }
38381       
38382         return position;
38383     },
38384     
38385     /**
38386      * @param {Number} colSpan - number of columns the element spans
38387      * @returns {Array} colGroup
38388      */
38389     _getColGroup : function( colSpan )
38390     {
38391         if ( colSpan < 2 ) {
38392           // if brick spans only one column, use all the column Ys
38393           return this.colYs;
38394         }
38395       
38396         var colGroup = [];
38397         // how many different places could this brick fit horizontally
38398         var groupCount = this.cols + 1 - colSpan;
38399         // for each group potential horizontal position
38400         for ( var i = 0; i < groupCount; i++ ) {
38401           // make an array of colY values for that one group
38402           var groupColYs = this.colYs.slice( i, i + colSpan );
38403           // and get the max value of the array
38404           colGroup[i] = Math.max.apply( Math, groupColYs );
38405         }
38406         return colGroup;
38407     },
38408     /*
38409     _manageStamp : function( stamp )
38410     {
38411         var stampSize =  stamp.getSize();
38412         var offset = stamp.getBox();
38413         // get the columns that this stamp affects
38414         var firstX = this.isOriginLeft ? offset.x : offset.right;
38415         var lastX = firstX + stampSize.width;
38416         var firstCol = Math.floor( firstX / this.columnWidth );
38417         firstCol = Math.max( 0, firstCol );
38418         
38419         var lastCol = Math.floor( lastX / this.columnWidth );
38420         // lastCol should not go over if multiple of columnWidth #425
38421         lastCol -= lastX % this.columnWidth ? 0 : 1;
38422         lastCol = Math.min( this.cols - 1, lastCol );
38423         
38424         // set colYs to bottom of the stamp
38425         var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
38426             stampSize.height;
38427             
38428         for ( var i = firstCol; i <= lastCol; i++ ) {
38429           this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
38430         }
38431     },
38432     */
38433     
38434     _getContainerSize : function()
38435     {
38436         this.maxY = Math.max.apply( Math, this.colYs );
38437         var size = {
38438             height: this.maxY
38439         };
38440       
38441         if ( this.isFitWidth ) {
38442             size.width = this._getContainerFitWidth();
38443         }
38444       
38445         return size;
38446     },
38447     
38448     _getContainerFitWidth : function()
38449     {
38450         var unusedCols = 0;
38451         // count unused columns
38452         var i = this.cols;
38453         while ( --i ) {
38454           if ( this.colYs[i] !== 0 ) {
38455             break;
38456           }
38457           unusedCols++;
38458         }
38459         // fit container to columns that have been used
38460         return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
38461     },
38462     
38463     needsResizeLayout : function()
38464     {
38465         var previousWidth = this.containerWidth;
38466         this.getContainerWidth();
38467         return previousWidth !== this.containerWidth;
38468     }
38469  
38470 });
38471
38472  
38473
38474  /*
38475  * - LGPL
38476  *
38477  * element
38478  * 
38479  */
38480
38481 /**
38482  * @class Roo.bootstrap.MasonryBrick
38483  * @extends Roo.bootstrap.Component
38484  * Bootstrap MasonryBrick class
38485  * 
38486  * @constructor
38487  * Create a new MasonryBrick
38488  * @param {Object} config The config object
38489  */
38490
38491 Roo.bootstrap.MasonryBrick = function(config){
38492     
38493     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
38494     
38495     Roo.bootstrap.MasonryBrick.register(this);
38496     
38497     this.addEvents({
38498         // raw events
38499         /**
38500          * @event click
38501          * When a MasonryBrick is clcik
38502          * @param {Roo.bootstrap.MasonryBrick} this
38503          * @param {Roo.EventObject} e
38504          */
38505         "click" : true
38506     });
38507 };
38508
38509 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
38510     
38511     /**
38512      * @cfg {String} title
38513      */   
38514     title : '',
38515     /**
38516      * @cfg {String} html
38517      */   
38518     html : '',
38519     /**
38520      * @cfg {String} bgimage
38521      */   
38522     bgimage : '',
38523     /**
38524      * @cfg {String} videourl
38525      */   
38526     videourl : '',
38527     /**
38528      * @cfg {String} cls
38529      */   
38530     cls : '',
38531     /**
38532      * @cfg {String} href
38533      */   
38534     href : '',
38535     /**
38536      * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
38537      */   
38538     size : 'xs',
38539     
38540     /**
38541      * @cfg {String} placetitle (center|bottom)
38542      */   
38543     placetitle : '',
38544     
38545     /**
38546      * @cfg {Boolean} isFitContainer defalut true
38547      */   
38548     isFitContainer : true, 
38549     
38550     /**
38551      * @cfg {Boolean} preventDefault defalut false
38552      */   
38553     preventDefault : false, 
38554     
38555     /**
38556      * @cfg {Boolean} inverse defalut false
38557      */   
38558     maskInverse : false, 
38559     
38560     getAutoCreate : function()
38561     {
38562         if(!this.isFitContainer){
38563             return this.getSplitAutoCreate();
38564         }
38565         
38566         var cls = 'masonry-brick masonry-brick-full';
38567         
38568         if(this.href.length){
38569             cls += ' masonry-brick-link';
38570         }
38571         
38572         if(this.bgimage.length){
38573             cls += ' masonry-brick-image';
38574         }
38575         
38576         if(this.maskInverse){
38577             cls += ' mask-inverse';
38578         }
38579         
38580         if(!this.html.length && !this.maskInverse && !this.videourl.length){
38581             cls += ' enable-mask';
38582         }
38583         
38584         if(this.size){
38585             cls += ' masonry-' + this.size + '-brick';
38586         }
38587         
38588         if(this.placetitle.length){
38589             
38590             switch (this.placetitle) {
38591                 case 'center' :
38592                     cls += ' masonry-center-title';
38593                     break;
38594                 case 'bottom' :
38595                     cls += ' masonry-bottom-title';
38596                     break;
38597                 default:
38598                     break;
38599             }
38600             
38601         } else {
38602             if(!this.html.length && !this.bgimage.length){
38603                 cls += ' masonry-center-title';
38604             }
38605
38606             if(!this.html.length && this.bgimage.length){
38607                 cls += ' masonry-bottom-title';
38608             }
38609         }
38610         
38611         if(this.cls){
38612             cls += ' ' + this.cls;
38613         }
38614         
38615         var cfg = {
38616             tag: (this.href.length) ? 'a' : 'div',
38617             cls: cls,
38618             cn: [
38619                 {
38620                     tag: 'div',
38621                     cls: 'masonry-brick-mask'
38622                 },
38623                 {
38624                     tag: 'div',
38625                     cls: 'masonry-brick-paragraph',
38626                     cn: []
38627                 }
38628             ]
38629         };
38630         
38631         if(this.href.length){
38632             cfg.href = this.href;
38633         }
38634         
38635         var cn = cfg.cn[1].cn;
38636         
38637         if(this.title.length){
38638             cn.push({
38639                 tag: 'h4',
38640                 cls: 'masonry-brick-title',
38641                 html: this.title
38642             });
38643         }
38644         
38645         if(this.html.length){
38646             cn.push({
38647                 tag: 'p',
38648                 cls: 'masonry-brick-text',
38649                 html: this.html
38650             });
38651         }
38652         
38653         if (!this.title.length && !this.html.length) {
38654             cfg.cn[1].cls += ' hide';
38655         }
38656         
38657         if(this.bgimage.length){
38658             cfg.cn.push({
38659                 tag: 'img',
38660                 cls: 'masonry-brick-image-view',
38661                 src: this.bgimage
38662             });
38663         }
38664         
38665         if(this.videourl.length){
38666             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
38667             // youtube support only?
38668             cfg.cn.push({
38669                 tag: 'iframe',
38670                 cls: 'masonry-brick-image-view',
38671                 src: vurl,
38672                 frameborder : 0,
38673                 allowfullscreen : true
38674             });
38675         }
38676         
38677         return cfg;
38678         
38679     },
38680     
38681     getSplitAutoCreate : function()
38682     {
38683         var cls = 'masonry-brick masonry-brick-split';
38684         
38685         if(this.href.length){
38686             cls += ' masonry-brick-link';
38687         }
38688         
38689         if(this.bgimage.length){
38690             cls += ' masonry-brick-image';
38691         }
38692         
38693         if(this.size){
38694             cls += ' masonry-' + this.size + '-brick';
38695         }
38696         
38697         switch (this.placetitle) {
38698             case 'center' :
38699                 cls += ' masonry-center-title';
38700                 break;
38701             case 'bottom' :
38702                 cls += ' masonry-bottom-title';
38703                 break;
38704             default:
38705                 if(!this.bgimage.length){
38706                     cls += ' masonry-center-title';
38707                 }
38708
38709                 if(this.bgimage.length){
38710                     cls += ' masonry-bottom-title';
38711                 }
38712                 break;
38713         }
38714         
38715         if(this.cls){
38716             cls += ' ' + this.cls;
38717         }
38718         
38719         var cfg = {
38720             tag: (this.href.length) ? 'a' : 'div',
38721             cls: cls,
38722             cn: [
38723                 {
38724                     tag: 'div',
38725                     cls: 'masonry-brick-split-head',
38726                     cn: [
38727                         {
38728                             tag: 'div',
38729                             cls: 'masonry-brick-paragraph',
38730                             cn: []
38731                         }
38732                     ]
38733                 },
38734                 {
38735                     tag: 'div',
38736                     cls: 'masonry-brick-split-body',
38737                     cn: []
38738                 }
38739             ]
38740         };
38741         
38742         if(this.href.length){
38743             cfg.href = this.href;
38744         }
38745         
38746         if(this.title.length){
38747             cfg.cn[0].cn[0].cn.push({
38748                 tag: 'h4',
38749                 cls: 'masonry-brick-title',
38750                 html: this.title
38751             });
38752         }
38753         
38754         if(this.html.length){
38755             cfg.cn[1].cn.push({
38756                 tag: 'p',
38757                 cls: 'masonry-brick-text',
38758                 html: this.html
38759             });
38760         }
38761
38762         if(this.bgimage.length){
38763             cfg.cn[0].cn.push({
38764                 tag: 'img',
38765                 cls: 'masonry-brick-image-view',
38766                 src: this.bgimage
38767             });
38768         }
38769         
38770         if(this.videourl.length){
38771             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
38772             // youtube support only?
38773             cfg.cn[0].cn.cn.push({
38774                 tag: 'iframe',
38775                 cls: 'masonry-brick-image-view',
38776                 src: vurl,
38777                 frameborder : 0,
38778                 allowfullscreen : true
38779             });
38780         }
38781         
38782         return cfg;
38783     },
38784     
38785     initEvents: function() 
38786     {
38787         switch (this.size) {
38788             case 'xs' :
38789                 this.x = 1;
38790                 this.y = 1;
38791                 break;
38792             case 'sm' :
38793                 this.x = 2;
38794                 this.y = 2;
38795                 break;
38796             case 'md' :
38797             case 'md-left' :
38798             case 'md-right' :
38799                 this.x = 3;
38800                 this.y = 3;
38801                 break;
38802             case 'tall' :
38803                 this.x = 2;
38804                 this.y = 3;
38805                 break;
38806             case 'wide' :
38807                 this.x = 3;
38808                 this.y = 2;
38809                 break;
38810             case 'wide-thin' :
38811                 this.x = 3;
38812                 this.y = 1;
38813                 break;
38814                         
38815             default :
38816                 break;
38817         }
38818         
38819         if(Roo.isTouch){
38820             this.el.on('touchstart', this.onTouchStart, this);
38821             this.el.on('touchmove', this.onTouchMove, this);
38822             this.el.on('touchend', this.onTouchEnd, this);
38823             this.el.on('contextmenu', this.onContextMenu, this);
38824         } else {
38825             this.el.on('mouseenter'  ,this.enter, this);
38826             this.el.on('mouseleave', this.leave, this);
38827             this.el.on('click', this.onClick, this);
38828         }
38829         
38830         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
38831             this.parent().bricks.push(this);   
38832         }
38833         
38834     },
38835     
38836     onClick: function(e, el)
38837     {
38838         var time = this.endTimer - this.startTimer;
38839         // Roo.log(e.preventDefault());
38840         if(Roo.isTouch){
38841             if(time > 1000){
38842                 e.preventDefault();
38843                 return;
38844             }
38845         }
38846         
38847         if(!this.preventDefault){
38848             return;
38849         }
38850         
38851         e.preventDefault();
38852         
38853         if (this.activeClass != '') {
38854             this.selectBrick();
38855         }
38856         
38857         this.fireEvent('click', this, e);
38858     },
38859     
38860     enter: function(e, el)
38861     {
38862         e.preventDefault();
38863         
38864         if(!this.isFitContainer || this.maskInverse || this.videourl.length){
38865             return;
38866         }
38867         
38868         if(this.bgimage.length && this.html.length){
38869             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
38870         }
38871     },
38872     
38873     leave: function(e, el)
38874     {
38875         e.preventDefault();
38876         
38877         if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
38878             return;
38879         }
38880         
38881         if(this.bgimage.length && this.html.length){
38882             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
38883         }
38884     },
38885     
38886     onTouchStart: function(e, el)
38887     {
38888 //        e.preventDefault();
38889         
38890         this.touchmoved = false;
38891         
38892         if(!this.isFitContainer){
38893             return;
38894         }
38895         
38896         if(!this.bgimage.length || !this.html.length){
38897             return;
38898         }
38899         
38900         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
38901         
38902         this.timer = new Date().getTime();
38903         
38904     },
38905     
38906     onTouchMove: function(e, el)
38907     {
38908         this.touchmoved = true;
38909     },
38910     
38911     onContextMenu : function(e,el)
38912     {
38913         e.preventDefault();
38914         e.stopPropagation();
38915         return false;
38916     },
38917     
38918     onTouchEnd: function(e, el)
38919     {
38920 //        e.preventDefault();
38921         
38922         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
38923         
38924             this.leave(e,el);
38925             
38926             return;
38927         }
38928         
38929         if(!this.bgimage.length || !this.html.length){
38930             
38931             if(this.href.length){
38932                 window.location.href = this.href;
38933             }
38934             
38935             return;
38936         }
38937         
38938         if(!this.isFitContainer){
38939             return;
38940         }
38941         
38942         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
38943         
38944         window.location.href = this.href;
38945     },
38946     
38947     //selection on single brick only
38948     selectBrick : function() {
38949         
38950         if (!this.parentId) {
38951             return;
38952         }
38953         
38954         var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
38955         var index = m.selectedBrick.indexOf(this.id);
38956         
38957         if ( index > -1) {
38958             m.selectedBrick.splice(index,1);
38959             this.el.removeClass(this.activeClass);
38960             return;
38961         }
38962         
38963         for(var i = 0; i < m.selectedBrick.length; i++) {
38964             var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
38965             b.el.removeClass(b.activeClass);
38966         }
38967         
38968         m.selectedBrick = [];
38969         
38970         m.selectedBrick.push(this.id);
38971         this.el.addClass(this.activeClass);
38972         return;
38973     },
38974     
38975     isSelected : function(){
38976         return this.el.hasClass(this.activeClass);
38977         
38978     }
38979 });
38980
38981 Roo.apply(Roo.bootstrap.MasonryBrick, {
38982     
38983     //groups: {},
38984     groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
38985      /**
38986     * register a Masonry Brick
38987     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
38988     */
38989     
38990     register : function(brick)
38991     {
38992         //this.groups[brick.id] = brick;
38993         this.groups.add(brick.id, brick);
38994     },
38995     /**
38996     * fetch a  masonry brick based on the masonry brick ID
38997     * @param {string} the masonry brick to add
38998     * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
38999     */
39000     
39001     get: function(brick_id) 
39002     {
39003         // if (typeof(this.groups[brick_id]) == 'undefined') {
39004         //     return false;
39005         // }
39006         // return this.groups[brick_id] ;
39007         
39008         if(this.groups.key(brick_id)) {
39009             return this.groups.key(brick_id);
39010         }
39011         
39012         return false;
39013     }
39014     
39015     
39016     
39017 });
39018
39019  /*
39020  * - LGPL
39021  *
39022  * element
39023  * 
39024  */
39025
39026 /**
39027  * @class Roo.bootstrap.Brick
39028  * @extends Roo.bootstrap.Component
39029  * Bootstrap Brick class
39030  * 
39031  * @constructor
39032  * Create a new Brick
39033  * @param {Object} config The config object
39034  */
39035
39036 Roo.bootstrap.Brick = function(config){
39037     Roo.bootstrap.Brick.superclass.constructor.call(this, config);
39038     
39039     this.addEvents({
39040         // raw events
39041         /**
39042          * @event click
39043          * When a Brick is click
39044          * @param {Roo.bootstrap.Brick} this
39045          * @param {Roo.EventObject} e
39046          */
39047         "click" : true
39048     });
39049 };
39050
39051 Roo.extend(Roo.bootstrap.Brick, Roo.bootstrap.Component,  {
39052     
39053     /**
39054      * @cfg {String} title
39055      */   
39056     title : '',
39057     /**
39058      * @cfg {String} html
39059      */   
39060     html : '',
39061     /**
39062      * @cfg {String} bgimage
39063      */   
39064     bgimage : '',
39065     /**
39066      * @cfg {String} cls
39067      */   
39068     cls : '',
39069     /**
39070      * @cfg {String} href
39071      */   
39072     href : '',
39073     /**
39074      * @cfg {String} video
39075      */   
39076     video : '',
39077     /**
39078      * @cfg {Boolean} square
39079      */   
39080     square : true,
39081     
39082     getAutoCreate : function()
39083     {
39084         var cls = 'roo-brick';
39085         
39086         if(this.href.length){
39087             cls += ' roo-brick-link';
39088         }
39089         
39090         if(this.bgimage.length){
39091             cls += ' roo-brick-image';
39092         }
39093         
39094         if(!this.html.length && !this.bgimage.length){
39095             cls += ' roo-brick-center-title';
39096         }
39097         
39098         if(!this.html.length && this.bgimage.length){
39099             cls += ' roo-brick-bottom-title';
39100         }
39101         
39102         if(this.cls){
39103             cls += ' ' + this.cls;
39104         }
39105         
39106         var cfg = {
39107             tag: (this.href.length) ? 'a' : 'div',
39108             cls: cls,
39109             cn: [
39110                 {
39111                     tag: 'div',
39112                     cls: 'roo-brick-paragraph',
39113                     cn: []
39114                 }
39115             ]
39116         };
39117         
39118         if(this.href.length){
39119             cfg.href = this.href;
39120         }
39121         
39122         var cn = cfg.cn[0].cn;
39123         
39124         if(this.title.length){
39125             cn.push({
39126                 tag: 'h4',
39127                 cls: 'roo-brick-title',
39128                 html: this.title
39129             });
39130         }
39131         
39132         if(this.html.length){
39133             cn.push({
39134                 tag: 'p',
39135                 cls: 'roo-brick-text',
39136                 html: this.html
39137             });
39138         } else {
39139             cn.cls += ' hide';
39140         }
39141         
39142         if(this.bgimage.length){
39143             cfg.cn.push({
39144                 tag: 'img',
39145                 cls: 'roo-brick-image-view',
39146                 src: this.bgimage
39147             });
39148         }
39149         
39150         return cfg;
39151     },
39152     
39153     initEvents: function() 
39154     {
39155         if(this.title.length || this.html.length){
39156             this.el.on('mouseenter'  ,this.enter, this);
39157             this.el.on('mouseleave', this.leave, this);
39158         }
39159         
39160         Roo.EventManager.onWindowResize(this.resize, this); 
39161         
39162         if(this.bgimage.length){
39163             this.imageEl = this.el.select('.roo-brick-image-view', true).first();
39164             this.imageEl.on('load', this.onImageLoad, this);
39165             return;
39166         }
39167         
39168         this.resize();
39169     },
39170     
39171     onImageLoad : function()
39172     {
39173         this.resize();
39174     },
39175     
39176     resize : function()
39177     {
39178         var paragraph = this.el.select('.roo-brick-paragraph', true).first();
39179         
39180         paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
39181         
39182         if(this.bgimage.length){
39183             var image = this.el.select('.roo-brick-image-view', true).first();
39184             
39185             image.setWidth(paragraph.getWidth());
39186             
39187             if(this.square){
39188                 image.setHeight(paragraph.getWidth());
39189             }
39190             
39191             this.el.setHeight(image.getHeight());
39192             paragraph.setHeight(image.getHeight());
39193             
39194         }
39195         
39196     },
39197     
39198     enter: function(e, el)
39199     {
39200         e.preventDefault();
39201         
39202         if(this.bgimage.length){
39203             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
39204             this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
39205         }
39206     },
39207     
39208     leave: function(e, el)
39209     {
39210         e.preventDefault();
39211         
39212         if(this.bgimage.length){
39213             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
39214             this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);
39215         }
39216     }
39217     
39218 });
39219
39220  
39221
39222  /*
39223  * - LGPL
39224  *
39225  * Number field 
39226  */
39227
39228 /**
39229  * @class Roo.bootstrap.form.NumberField
39230  * @extends Roo.bootstrap.form.Input
39231  * Bootstrap NumberField class
39232  * 
39233  * 
39234  * 
39235  * 
39236  * @constructor
39237  * Create a new NumberField
39238  * @param {Object} config The config object
39239  */
39240
39241 Roo.bootstrap.form.NumberField = function(config){
39242     Roo.bootstrap.form.NumberField.superclass.constructor.call(this, config);
39243 };
39244
39245 Roo.extend(Roo.bootstrap.form.NumberField, Roo.bootstrap.form.Input, {
39246     
39247     /**
39248      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
39249      */
39250     allowDecimals : true,
39251     /**
39252      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
39253      */
39254     decimalSeparator : ".",
39255     /**
39256      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
39257      */
39258     decimalPrecision : 2,
39259     /**
39260      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
39261      */
39262     allowNegative : true,
39263     
39264     /**
39265      * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
39266      */
39267     allowZero: true,
39268     /**
39269      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
39270      */
39271     minValue : Number.NEGATIVE_INFINITY,
39272     /**
39273      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
39274      */
39275     maxValue : Number.MAX_VALUE,
39276     /**
39277      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
39278      */
39279     minText : "The minimum value for this field is {0}",
39280     /**
39281      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
39282      */
39283     maxText : "The maximum value for this field is {0}",
39284     /**
39285      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
39286      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
39287      */
39288     nanText : "{0} is not a valid number",
39289     /**
39290      * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
39291      */
39292     thousandsDelimiter : false,
39293     /**
39294      * @cfg {String} valueAlign alignment of value
39295      */
39296     valueAlign : "left",
39297
39298     getAutoCreate : function()
39299     {
39300         var hiddenInput = {
39301             tag: 'input',
39302             type: 'hidden',
39303             id: Roo.id(),
39304             cls: 'hidden-number-input'
39305         };
39306         
39307         if (this.name) {
39308             hiddenInput.name = this.name;
39309         }
39310         
39311         this.name = '';
39312         
39313         var cfg = Roo.bootstrap.form.NumberField.superclass.getAutoCreate.call(this);
39314         
39315         this.name = hiddenInput.name;
39316         
39317         if(cfg.cn.length > 0) {
39318             cfg.cn.push(hiddenInput);
39319         }
39320         
39321         return cfg;
39322     },
39323
39324     // private
39325     initEvents : function()
39326     {   
39327         Roo.bootstrap.form.NumberField.superclass.initEvents.call(this);
39328         
39329         var allowed = "0123456789";
39330         
39331         if(this.allowDecimals){
39332             allowed += this.decimalSeparator;
39333         }
39334         
39335         if(this.allowNegative){
39336             allowed += "-";
39337         }
39338         
39339         if(this.thousandsDelimiter) {
39340             allowed += ",";
39341         }
39342         
39343         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
39344         
39345         var keyPress = function(e){
39346             
39347             var k = e.getKey();
39348             
39349             var c = e.getCharCode();
39350             
39351             if(
39352                     (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
39353                     allowed.indexOf(String.fromCharCode(c)) === -1
39354             ){
39355                 e.stopEvent();
39356                 return;
39357             }
39358             
39359             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
39360                 return;
39361             }
39362             
39363             if(allowed.indexOf(String.fromCharCode(c)) === -1){
39364                 e.stopEvent();
39365             }
39366         };
39367         
39368         this.el.on("keypress", keyPress, this);
39369     },
39370     
39371     validateValue : function(value)
39372     {
39373         
39374         if(!Roo.bootstrap.form.NumberField.superclass.validateValue.call(this, value)){
39375             return false;
39376         }
39377         
39378         var num = this.parseValue(value);
39379         
39380         if(isNaN(num)){
39381             this.markInvalid(String.format(this.nanText, value));
39382             return false;
39383         }
39384         
39385         if(num < this.minValue){
39386             this.markInvalid(String.format(this.minText, this.minValue));
39387             return false;
39388         }
39389         
39390         if(num > this.maxValue){
39391             this.markInvalid(String.format(this.maxText, this.maxValue));
39392             return false;
39393         }
39394         
39395         return true;
39396     },
39397
39398     getValue : function()
39399     {
39400         var v = this.hiddenEl().getValue();
39401         
39402         return this.fixPrecision(this.parseValue(v));
39403     },
39404
39405     parseValue : function(value)
39406     {
39407         if(this.thousandsDelimiter) {
39408             value += "";
39409             r = new RegExp(",", "g");
39410             value = value.replace(r, "");
39411         }
39412         
39413         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
39414         return isNaN(value) ? '' : value;
39415     },
39416
39417     fixPrecision : function(value)
39418     {
39419         if(this.thousandsDelimiter) {
39420             value += "";
39421             r = new RegExp(",", "g");
39422             value = value.replace(r, "");
39423         }
39424         
39425         var nan = isNaN(value);
39426         
39427         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
39428             return nan ? '' : value;
39429         }
39430         return parseFloat(value).toFixed(this.decimalPrecision);
39431     },
39432
39433     setValue : function(v)
39434     {
39435         v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
39436         
39437         this.value = v;
39438         
39439         if(this.rendered){
39440             
39441             this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
39442             
39443             this.inputEl().dom.value = (v == '') ? '' :
39444                 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
39445             
39446             if(!this.allowZero && v === '0') {
39447                 this.hiddenEl().dom.value = '';
39448                 this.inputEl().dom.value = '';
39449             }
39450             
39451             this.validate();
39452         }
39453     },
39454
39455     decimalPrecisionFcn : function(v)
39456     {
39457         return Math.floor(v);
39458     },
39459
39460     beforeBlur : function()
39461     {
39462         var v = this.parseValue(this.getRawValue());
39463         
39464         if(v || v === 0 || v === ''){
39465             this.setValue(v);
39466         }
39467     },
39468     
39469     hiddenEl : function()
39470     {
39471         return this.el.select('input.hidden-number-input',true).first();
39472     }
39473     
39474 });
39475
39476  
39477
39478 /*
39479 * Licence: LGPL
39480 */
39481
39482 /**
39483  * @class Roo.bootstrap.DocumentSlider
39484  * @extends Roo.bootstrap.Component
39485  * Bootstrap DocumentSlider class
39486  * 
39487  * @constructor
39488  * Create a new DocumentViewer
39489  * @param {Object} config The config object
39490  */
39491
39492 Roo.bootstrap.DocumentSlider = function(config){
39493     Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
39494     
39495     this.files = [];
39496     
39497     this.addEvents({
39498         /**
39499          * @event initial
39500          * Fire after initEvent
39501          * @param {Roo.bootstrap.DocumentSlider} this
39502          */
39503         "initial" : true,
39504         /**
39505          * @event update
39506          * Fire after update
39507          * @param {Roo.bootstrap.DocumentSlider} this
39508          */
39509         "update" : true,
39510         /**
39511          * @event click
39512          * Fire after click
39513          * @param {Roo.bootstrap.DocumentSlider} this
39514          */
39515         "click" : true
39516     });
39517 };
39518
39519 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
39520     
39521     files : false,
39522     
39523     indicator : 0,
39524     
39525     getAutoCreate : function()
39526     {
39527         var cfg = {
39528             tag : 'div',
39529             cls : 'roo-document-slider',
39530             cn : [
39531                 {
39532                     tag : 'div',
39533                     cls : 'roo-document-slider-header',
39534                     cn : [
39535                         {
39536                             tag : 'div',
39537                             cls : 'roo-document-slider-header-title'
39538                         }
39539                     ]
39540                 },
39541                 {
39542                     tag : 'div',
39543                     cls : 'roo-document-slider-body',
39544                     cn : [
39545                         {
39546                             tag : 'div',
39547                             cls : 'roo-document-slider-prev',
39548                             cn : [
39549                                 {
39550                                     tag : 'i',
39551                                     cls : 'fa fa-chevron-left'
39552                                 }
39553                             ]
39554                         },
39555                         {
39556                             tag : 'div',
39557                             cls : 'roo-document-slider-thumb',
39558                             cn : [
39559                                 {
39560                                     tag : 'img',
39561                                     cls : 'roo-document-slider-image'
39562                                 }
39563                             ]
39564                         },
39565                         {
39566                             tag : 'div',
39567                             cls : 'roo-document-slider-next',
39568                             cn : [
39569                                 {
39570                                     tag : 'i',
39571                                     cls : 'fa fa-chevron-right'
39572                                 }
39573                             ]
39574                         }
39575                     ]
39576                 }
39577             ]
39578         };
39579         
39580         return cfg;
39581     },
39582     
39583     initEvents : function()
39584     {
39585         this.headerEl = this.el.select('.roo-document-slider-header', true).first();
39586         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
39587         
39588         this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
39589         this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
39590         
39591         this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
39592         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
39593         
39594         this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
39595         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
39596         
39597         this.imageEl = this.el.select('.roo-document-slider-image', true).first();
39598         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
39599         
39600         this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
39601         this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
39602         
39603         this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
39604         this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
39605         
39606         this.thumbEl.on('click', this.onClick, this);
39607         
39608         this.prevIndicator.on('click', this.prev, this);
39609         
39610         this.nextIndicator.on('click', this.next, this);
39611         
39612     },
39613     
39614     initial : function()
39615     {
39616         if(this.files.length){
39617             this.indicator = 1;
39618             this.update()
39619         }
39620         
39621         this.fireEvent('initial', this);
39622     },
39623     
39624     update : function()
39625     {
39626         this.imageEl.attr('src', this.files[this.indicator - 1]);
39627         
39628         this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
39629         
39630         this.prevIndicator.show();
39631         
39632         if(this.indicator == 1){
39633             this.prevIndicator.hide();
39634         }
39635         
39636         this.nextIndicator.show();
39637         
39638         if(this.indicator == this.files.length){
39639             this.nextIndicator.hide();
39640         }
39641         
39642         this.thumbEl.scrollTo('top');
39643         
39644         this.fireEvent('update', this);
39645     },
39646     
39647     onClick : function(e)
39648     {
39649         e.preventDefault();
39650         
39651         this.fireEvent('click', this);
39652     },
39653     
39654     prev : function(e)
39655     {
39656         e.preventDefault();
39657         
39658         this.indicator = Math.max(1, this.indicator - 1);
39659         
39660         this.update();
39661     },
39662     
39663     next : function(e)
39664     {
39665         e.preventDefault();
39666         
39667         this.indicator = Math.min(this.files.length, this.indicator + 1);
39668         
39669         this.update();
39670     }
39671 });
39672 /*
39673  * - LGPL
39674  *
39675  * RadioSet
39676  *
39677  *
39678  */
39679
39680 /**
39681  * @class Roo.bootstrap.form.RadioSet
39682  * @extends Roo.bootstrap.form.Input
39683  * @children Roo.bootstrap.form.Radio
39684  * Bootstrap RadioSet class
39685  * @cfg {String} indicatorpos (left|right) default left
39686  * @cfg {Boolean} inline (true|false) inline the element (default true)
39687  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
39688  * @constructor
39689  * Create a new RadioSet
39690  * @param {Object} config The config object
39691  */
39692
39693 Roo.bootstrap.form.RadioSet = function(config){
39694     
39695     Roo.bootstrap.form.RadioSet.superclass.constructor.call(this, config);
39696     
39697     this.radioes = [];
39698     
39699     Roo.bootstrap.form.RadioSet.register(this);
39700     
39701     this.addEvents({
39702         /**
39703         * @event check
39704         * Fires when the element is checked or unchecked.
39705         * @param {Roo.bootstrap.form.RadioSet} this This radio
39706         * @param {Roo.bootstrap.form.Radio} item The checked item
39707         */
39708        check : true,
39709        /**
39710         * @event click
39711         * Fires when the element is click.
39712         * @param {Roo.bootstrap.form.RadioSet} this This radio set
39713         * @param {Roo.bootstrap.form.Radio} item The checked item
39714         * @param {Roo.EventObject} e The event object
39715         */
39716        click : true
39717     });
39718     
39719 };
39720
39721 Roo.extend(Roo.bootstrap.form.RadioSet, Roo.bootstrap.form.Input,  {
39722
39723     radioes : false,
39724     
39725     inline : true,
39726     
39727     weight : '',
39728     
39729     indicatorpos : 'left',
39730     
39731     getAutoCreate : function()
39732     {
39733         var label = {
39734             tag : 'label',
39735             cls : 'roo-radio-set-label',
39736             cn : [
39737                 {
39738                     tag : 'span',
39739                     html : this.fieldLabel
39740                 }
39741             ]
39742         };
39743         if (Roo.bootstrap.version == 3) {
39744             
39745             
39746             if(this.indicatorpos == 'left'){
39747                 label.cn.unshift({
39748                     tag : 'i',
39749                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
39750                     tooltip : 'This field is required'
39751                 });
39752             } else {
39753                 label.cn.push({
39754                     tag : 'i',
39755                     cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
39756                     tooltip : 'This field is required'
39757                 });
39758             }
39759         }
39760         var items = {
39761             tag : 'div',
39762             cls : 'roo-radio-set-items'
39763         };
39764         
39765         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
39766         
39767         if (align === 'left' && this.fieldLabel.length) {
39768             
39769             items = {
39770                 cls : "roo-radio-set-right", 
39771                 cn: [
39772                     items
39773                 ]
39774             };
39775             
39776             if(this.labelWidth > 12){
39777                 label.style = "width: " + this.labelWidth + 'px';
39778             }
39779             
39780             if(this.labelWidth < 13 && this.labelmd == 0){
39781                 this.labelmd = this.labelWidth;
39782             }
39783             
39784             if(this.labellg > 0){
39785                 label.cls += ' col-lg-' + this.labellg;
39786                 items.cls += ' col-lg-' + (12 - this.labellg);
39787             }
39788             
39789             if(this.labelmd > 0){
39790                 label.cls += ' col-md-' + this.labelmd;
39791                 items.cls += ' col-md-' + (12 - this.labelmd);
39792             }
39793             
39794             if(this.labelsm > 0){
39795                 label.cls += ' col-sm-' + this.labelsm;
39796                 items.cls += ' col-sm-' + (12 - this.labelsm);
39797             }
39798             
39799             if(this.labelxs > 0){
39800                 label.cls += ' col-xs-' + this.labelxs;
39801                 items.cls += ' col-xs-' + (12 - this.labelxs);
39802             }
39803         }
39804         
39805         var cfg = {
39806             tag : 'div',
39807             cls : 'roo-radio-set',
39808             cn : [
39809                 {
39810                     tag : 'input',
39811                     cls : 'roo-radio-set-input',
39812                     type : 'hidden',
39813                     name : this.name,
39814                     value : this.value ? this.value :  ''
39815                 },
39816                 label,
39817                 items
39818             ]
39819         };
39820         
39821         if(this.weight.length){
39822             cfg.cls += ' roo-radio-' + this.weight;
39823         }
39824         
39825         if(this.inline) {
39826             cfg.cls += ' roo-radio-set-inline';
39827         }
39828         
39829         var settings=this;
39830         ['xs','sm','md','lg'].map(function(size){
39831             if (settings[size]) {
39832                 cfg.cls += ' col-' + size + '-' + settings[size];
39833             }
39834         });
39835         
39836         return cfg;
39837         
39838     },
39839
39840     initEvents : function()
39841     {
39842         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
39843         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
39844         
39845         if(!this.fieldLabel.length){
39846             this.labelEl.hide();
39847         }
39848         
39849         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
39850         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
39851         
39852         this.indicator = this.indicatorEl();
39853         
39854         if(this.indicator){
39855             this.indicator.addClass('invisible');
39856         }
39857         
39858         this.originalValue = this.getValue();
39859         
39860     },
39861     
39862     inputEl: function ()
39863     {
39864         return this.el.select('.roo-radio-set-input', true).first();
39865     },
39866     
39867     getChildContainer : function()
39868     {
39869         return this.itemsEl;
39870     },
39871     
39872     register : function(item)
39873     {
39874         this.radioes.push(item);
39875         
39876     },
39877     
39878     validate : function()
39879     {   
39880         if(this.getVisibilityEl().hasClass('hidden')){
39881             return true;
39882         }
39883         
39884         var valid = false;
39885         
39886         Roo.each(this.radioes, function(i){
39887             if(!i.checked){
39888                 return;
39889             }
39890             
39891             valid = true;
39892             return false;
39893         });
39894         
39895         if(this.allowBlank) {
39896             return true;
39897         }
39898         
39899         if(this.disabled || valid){
39900             this.markValid();
39901             return true;
39902         }
39903         
39904         this.markInvalid();
39905         return false;
39906         
39907     },
39908     
39909     markValid : function()
39910     {
39911         if(this.labelEl.isVisible(true) && this.indicatorEl()){
39912             this.indicatorEl().removeClass('visible');
39913             this.indicatorEl().addClass('invisible');
39914         }
39915         
39916         
39917         if (Roo.bootstrap.version == 3) {
39918             this.el.removeClass([this.invalidClass, this.validClass]);
39919             this.el.addClass(this.validClass);
39920         } else {
39921             this.el.removeClass(['is-invalid','is-valid']);
39922             this.el.addClass(['is-valid']);
39923         }
39924         this.fireEvent('valid', this);
39925     },
39926     
39927     markInvalid : function(msg)
39928     {
39929         if(this.allowBlank || this.disabled){
39930             return;
39931         }
39932         
39933         if(this.labelEl.isVisible(true) && this.indicatorEl()){
39934             this.indicatorEl().removeClass('invisible');
39935             this.indicatorEl().addClass('visible');
39936         }
39937         if (Roo.bootstrap.version == 3) {
39938             this.el.removeClass([this.invalidClass, this.validClass]);
39939             this.el.addClass(this.invalidClass);
39940         } else {
39941             this.el.removeClass(['is-invalid','is-valid']);
39942             this.el.addClass(['is-invalid']);
39943         }
39944         
39945         this.fireEvent('invalid', this, msg);
39946         
39947     },
39948     
39949     setValue : function(v, suppressEvent)
39950     {   
39951         if(this.value === v){
39952             return;
39953         }
39954         
39955         this.value = v;
39956         
39957         if(this.rendered){
39958             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
39959         }
39960         
39961         Roo.each(this.radioes, function(i){
39962             i.checked = false;
39963             i.el.removeClass('checked');
39964         });
39965         
39966         Roo.each(this.radioes, function(i){
39967             
39968             if(i.value === v || i.value.toString() === v.toString()){
39969                 i.checked = true;
39970                 i.el.addClass('checked');
39971                 
39972                 if(suppressEvent !== true){
39973                     this.fireEvent('check', this, i);
39974                 }
39975                 
39976                 return false;
39977             }
39978             
39979         }, this);
39980         
39981         this.validate();
39982     },
39983     
39984     clearInvalid : function(){
39985         
39986         if(!this.el || this.preventMark){
39987             return;
39988         }
39989         
39990         this.el.removeClass([this.invalidClass]);
39991         
39992         this.fireEvent('valid', this);
39993     }
39994     
39995 });
39996
39997 Roo.apply(Roo.bootstrap.form.RadioSet, {
39998     
39999     groups: {},
40000     
40001     register : function(set)
40002     {
40003         this.groups[set.name] = set;
40004     },
40005     
40006     get: function(name) 
40007     {
40008         if (typeof(this.groups[name]) == 'undefined') {
40009             return false;
40010         }
40011         
40012         return this.groups[name] ;
40013     }
40014     
40015 });
40016 /*
40017  * Based on:
40018  * Ext JS Library 1.1.1
40019  * Copyright(c) 2006-2007, Ext JS, LLC.
40020  *
40021  * Originally Released Under LGPL - original licence link has changed is not relivant.
40022  *
40023  * Fork - LGPL
40024  * <script type="text/javascript">
40025  */
40026
40027
40028 /**
40029  * @class Roo.bootstrap.SplitBar
40030  * @extends Roo.util.Observable
40031  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
40032  * <br><br>
40033  * Usage:
40034  * <pre><code>
40035 var split = new Roo.bootstrap.SplitBar("elementToDrag", "elementToSize",
40036                    Roo.bootstrap.SplitBar.HORIZONTAL, Roo.bootstrap.SplitBar.LEFT);
40037 split.setAdapter(new Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter("container"));
40038 split.minSize = 100;
40039 split.maxSize = 600;
40040 split.animate = true;
40041 split.on('moved', splitterMoved);
40042 </code></pre>
40043  * @constructor
40044  * Create a new SplitBar
40045  * @config {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
40046  * @config {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
40047  * @config {Number} orientation (optional) Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
40048  * @config {Number} placement (optional) Either Roo.bootstrap.SplitBar.LEFT or Roo.bootstrap.SplitBar.RIGHT for horizontal or  
40049                         Roo.bootstrap.SplitBar.TOP or Roo.bootstrap.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
40050                         position of the SplitBar).
40051  */
40052 Roo.bootstrap.SplitBar = function(cfg){
40053     
40054     /** @private */
40055     
40056     //{
40057     //  dragElement : elm
40058     //  resizingElement: el,
40059         // optional..
40060     //    orientation : Either Roo.bootstrap.SplitBar.HORIZONTAL
40061     //    placement : Roo.bootstrap.SplitBar.LEFT  ,
40062         // existingProxy ???
40063     //}
40064     
40065     this.el = Roo.get(cfg.dragElement, true);
40066     this.el.dom.unselectable = "on";
40067     /** @private */
40068     this.resizingEl = Roo.get(cfg.resizingElement, true);
40069
40070     /**
40071      * @private
40072      * The orientation of the split. Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
40073      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
40074      * @type Number
40075      */
40076     this.orientation = cfg.orientation || Roo.bootstrap.SplitBar.HORIZONTAL;
40077     
40078     /**
40079      * The minimum size of the resizing element. (Defaults to 0)
40080      * @type Number
40081      */
40082     this.minSize = 0;
40083     
40084     /**
40085      * The maximum size of the resizing element. (Defaults to 2000)
40086      * @type Number
40087      */
40088     this.maxSize = 2000;
40089     
40090     /**
40091      * Whether to animate the transition to the new size
40092      * @type Boolean
40093      */
40094     this.animate = false;
40095     
40096     /**
40097      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
40098      * @type Boolean
40099      */
40100     this.useShim = false;
40101     
40102     /** @private */
40103     this.shim = null;
40104     
40105     if(!cfg.existingProxy){
40106         /** @private */
40107         this.proxy = Roo.bootstrap.SplitBar.createProxy(this.orientation);
40108     }else{
40109         this.proxy = Roo.get(cfg.existingProxy).dom;
40110     }
40111     /** @private */
40112     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
40113     
40114     /** @private */
40115     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
40116     
40117     /** @private */
40118     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
40119     
40120     /** @private */
40121     this.dragSpecs = {};
40122     
40123     /**
40124      * @private The adapter to use to positon and resize elements
40125      */
40126     this.adapter = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
40127     this.adapter.init(this);
40128     
40129     if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
40130         /** @private */
40131         this.placement = cfg.placement || (this.el.getX() > this.resizingEl.getX() ? Roo.bootstrap.SplitBar.LEFT : Roo.bootstrap.SplitBar.RIGHT);
40132         this.el.addClass("roo-splitbar-h");
40133     }else{
40134         /** @private */
40135         this.placement = cfg.placement || (this.el.getY() > this.resizingEl.getY() ? Roo.bootstrap.SplitBar.TOP : Roo.bootstrap.SplitBar.BOTTOM);
40136         this.el.addClass("roo-splitbar-v");
40137     }
40138     
40139     this.addEvents({
40140         /**
40141          * @event resize
40142          * Fires when the splitter is moved (alias for {@link #event-moved})
40143          * @param {Roo.bootstrap.SplitBar} this
40144          * @param {Number} newSize the new width or height
40145          */
40146         "resize" : true,
40147         /**
40148          * @event moved
40149          * Fires when the splitter is moved
40150          * @param {Roo.bootstrap.SplitBar} this
40151          * @param {Number} newSize the new width or height
40152          */
40153         "moved" : true,
40154         /**
40155          * @event beforeresize
40156          * Fires before the splitter is dragged
40157          * @param {Roo.bootstrap.SplitBar} this
40158          */
40159         "beforeresize" : true,
40160
40161         "beforeapply" : true
40162     });
40163
40164     Roo.util.Observable.call(this);
40165 };
40166
40167 Roo.extend(Roo.bootstrap.SplitBar, Roo.util.Observable, {
40168     onStartProxyDrag : function(x, y){
40169         this.fireEvent("beforeresize", this);
40170         if(!this.overlay){
40171             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "roo-drag-overlay", html: "&#160;"}, true);
40172             o.unselectable();
40173             o.enableDisplayMode("block");
40174             // all splitbars share the same overlay
40175             Roo.bootstrap.SplitBar.prototype.overlay = o;
40176         }
40177         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
40178         this.overlay.show();
40179         Roo.get(this.proxy).setDisplayed("block");
40180         var size = this.adapter.getElementSize(this);
40181         this.activeMinSize = this.getMinimumSize();;
40182         this.activeMaxSize = this.getMaximumSize();;
40183         var c1 = size - this.activeMinSize;
40184         var c2 = Math.max(this.activeMaxSize - size, 0);
40185         if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
40186             this.dd.resetConstraints();
40187             this.dd.setXConstraint(
40188                 this.placement == Roo.bootstrap.SplitBar.LEFT ? c1 : c2, 
40189                 this.placement == Roo.bootstrap.SplitBar.LEFT ? c2 : c1
40190             );
40191             this.dd.setYConstraint(0, 0);
40192         }else{
40193             this.dd.resetConstraints();
40194             this.dd.setXConstraint(0, 0);
40195             this.dd.setYConstraint(
40196                 this.placement == Roo.bootstrap.SplitBar.TOP ? c1 : c2, 
40197                 this.placement == Roo.bootstrap.SplitBar.TOP ? c2 : c1
40198             );
40199          }
40200         this.dragSpecs.startSize = size;
40201         this.dragSpecs.startPoint = [x, y];
40202         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
40203     },
40204     
40205     /** 
40206      * @private Called after the drag operation by the DDProxy
40207      */
40208     onEndProxyDrag : function(e){
40209         Roo.get(this.proxy).setDisplayed(false);
40210         var endPoint = Roo.lib.Event.getXY(e);
40211         if(this.overlay){
40212             this.overlay.hide();
40213         }
40214         var newSize;
40215         if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
40216             newSize = this.dragSpecs.startSize + 
40217                 (this.placement == Roo.bootstrap.SplitBar.LEFT ?
40218                     endPoint[0] - this.dragSpecs.startPoint[0] :
40219                     this.dragSpecs.startPoint[0] - endPoint[0]
40220                 );
40221         }else{
40222             newSize = this.dragSpecs.startSize + 
40223                 (this.placement == Roo.bootstrap.SplitBar.TOP ?
40224                     endPoint[1] - this.dragSpecs.startPoint[1] :
40225                     this.dragSpecs.startPoint[1] - endPoint[1]
40226                 );
40227         }
40228         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
40229         if(newSize != this.dragSpecs.startSize){
40230             if(this.fireEvent('beforeapply', this, newSize) !== false){
40231                 this.adapter.setElementSize(this, newSize);
40232                 this.fireEvent("moved", this, newSize);
40233                 this.fireEvent("resize", this, newSize);
40234             }
40235         }
40236     },
40237     
40238     /**
40239      * Get the adapter this SplitBar uses
40240      * @return The adapter object
40241      */
40242     getAdapter : function(){
40243         return this.adapter;
40244     },
40245     
40246     /**
40247      * Set the adapter this SplitBar uses
40248      * @param {Object} adapter A SplitBar adapter object
40249      */
40250     setAdapter : function(adapter){
40251         this.adapter = adapter;
40252         this.adapter.init(this);
40253     },
40254     
40255     /**
40256      * Gets the minimum size for the resizing element
40257      * @return {Number} The minimum size
40258      */
40259     getMinimumSize : function(){
40260         return this.minSize;
40261     },
40262     
40263     /**
40264      * Sets the minimum size for the resizing element
40265      * @param {Number} minSize The minimum size
40266      */
40267     setMinimumSize : function(minSize){
40268         this.minSize = minSize;
40269     },
40270     
40271     /**
40272      * Gets the maximum size for the resizing element
40273      * @return {Number} The maximum size
40274      */
40275     getMaximumSize : function(){
40276         return this.maxSize;
40277     },
40278     
40279     /**
40280      * Sets the maximum size for the resizing element
40281      * @param {Number} maxSize The maximum size
40282      */
40283     setMaximumSize : function(maxSize){
40284         this.maxSize = maxSize;
40285     },
40286     
40287     /**
40288      * Sets the initialize size for the resizing element
40289      * @param {Number} size The initial size
40290      */
40291     setCurrentSize : function(size){
40292         var oldAnimate = this.animate;
40293         this.animate = false;
40294         this.adapter.setElementSize(this, size);
40295         this.animate = oldAnimate;
40296     },
40297     
40298     /**
40299      * Destroy this splitbar. 
40300      * @param {Boolean} removeEl True to remove the element
40301      */
40302     destroy : function(removeEl){
40303         if(this.shim){
40304             this.shim.remove();
40305         }
40306         this.dd.unreg();
40307         this.proxy.parentNode.removeChild(this.proxy);
40308         if(removeEl){
40309             this.el.remove();
40310         }
40311     }
40312 });
40313
40314 /**
40315  * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
40316  */
40317 Roo.bootstrap.SplitBar.createProxy = function(dir){
40318     var proxy = new Roo.Element(document.createElement("div"));
40319     proxy.unselectable();
40320     var cls = 'roo-splitbar-proxy';
40321     proxy.addClass(cls + ' ' + (dir == Roo.bootstrap.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
40322     document.body.appendChild(proxy.dom);
40323     return proxy.dom;
40324 };
40325
40326 /** 
40327  * @class Roo.bootstrap.SplitBar.BasicLayoutAdapter
40328  * Default Adapter. It assumes the splitter and resizing element are not positioned
40329  * elements and only gets/sets the width of the element. Generally used for table based layouts.
40330  */
40331 Roo.bootstrap.SplitBar.BasicLayoutAdapter = function(){
40332 };
40333
40334 Roo.bootstrap.SplitBar.BasicLayoutAdapter.prototype = {
40335     // do nothing for now
40336     init : function(s){
40337     
40338     },
40339     /**
40340      * Called before drag operations to get the current size of the resizing element. 
40341      * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
40342      */
40343      getElementSize : function(s){
40344         if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
40345             return s.resizingEl.getWidth();
40346         }else{
40347             return s.resizingEl.getHeight();
40348         }
40349     },
40350     
40351     /**
40352      * Called after drag operations to set the size of the resizing element.
40353      * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
40354      * @param {Number} newSize The new size to set
40355      * @param {Function} onComplete A function to be invoked when resizing is complete
40356      */
40357     setElementSize : function(s, newSize, onComplete){
40358         if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
40359             if(!s.animate){
40360                 s.resizingEl.setWidth(newSize);
40361                 if(onComplete){
40362                     onComplete(s, newSize);
40363                 }
40364             }else{
40365                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
40366             }
40367         }else{
40368             
40369             if(!s.animate){
40370                 s.resizingEl.setHeight(newSize);
40371                 if(onComplete){
40372                     onComplete(s, newSize);
40373                 }
40374             }else{
40375                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
40376             }
40377         }
40378     }
40379 };
40380
40381 /** 
40382  *@class Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter
40383  * @extends Roo.bootstrap.SplitBar.BasicLayoutAdapter
40384  * Adapter that  moves the splitter element to align with the resized sizing element. 
40385  * Used with an absolute positioned SplitBar.
40386  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
40387  * document.body, make sure you assign an id to the body element.
40388  */
40389 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter = function(container){
40390     this.basic = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
40391     this.container = Roo.get(container);
40392 };
40393
40394 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter.prototype = {
40395     init : function(s){
40396         this.basic.init(s);
40397     },
40398     
40399     getElementSize : function(s){
40400         return this.basic.getElementSize(s);
40401     },
40402     
40403     setElementSize : function(s, newSize, onComplete){
40404         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
40405     },
40406     
40407     moveSplitter : function(s){
40408         var yes = Roo.bootstrap.SplitBar;
40409         switch(s.placement){
40410             case yes.LEFT:
40411                 s.el.setX(s.resizingEl.getRight());
40412                 break;
40413             case yes.RIGHT:
40414                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
40415                 break;
40416             case yes.TOP:
40417                 s.el.setY(s.resizingEl.getBottom());
40418                 break;
40419             case yes.BOTTOM:
40420                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
40421                 break;
40422         }
40423     }
40424 };
40425
40426 /**
40427  * Orientation constant - Create a vertical SplitBar
40428  * @static
40429  * @type Number
40430  */
40431 Roo.bootstrap.SplitBar.VERTICAL = 1;
40432
40433 /**
40434  * Orientation constant - Create a horizontal SplitBar
40435  * @static
40436  * @type Number
40437  */
40438 Roo.bootstrap.SplitBar.HORIZONTAL = 2;
40439
40440 /**
40441  * Placement constant - The resizing element is to the left of the splitter element
40442  * @static
40443  * @type Number
40444  */
40445 Roo.bootstrap.SplitBar.LEFT = 1;
40446
40447 /**
40448  * Placement constant - The resizing element is to the right of the splitter element
40449  * @static
40450  * @type Number
40451  */
40452 Roo.bootstrap.SplitBar.RIGHT = 2;
40453
40454 /**
40455  * Placement constant - The resizing element is positioned above the splitter element
40456  * @static
40457  * @type Number
40458  */
40459 Roo.bootstrap.SplitBar.TOP = 3;
40460
40461 /**
40462  * Placement constant - The resizing element is positioned under splitter element
40463  * @static
40464  * @type Number
40465  */
40466 Roo.bootstrap.SplitBar.BOTTOM = 4;
40467 /*
40468  * Based on:
40469  * Ext JS Library 1.1.1
40470  * Copyright(c) 2006-2007, Ext JS, LLC.
40471  *
40472  * Originally Released Under LGPL - original licence link has changed is not relivant.
40473  *
40474  * Fork - LGPL
40475  * <script type="text/javascript">
40476  */
40477
40478 /**
40479  * @class Roo.bootstrap.layout.Manager
40480  * @extends Roo.bootstrap.Component
40481  * @abstract
40482  * Base class for layout managers.
40483  */
40484 Roo.bootstrap.layout.Manager = function(config)
40485 {
40486     this.monitorWindowResize = true; // do this before we apply configuration.
40487     
40488     Roo.bootstrap.layout.Manager.superclass.constructor.call(this,config);
40489
40490
40491
40492
40493
40494     /** false to disable window resize monitoring @type Boolean */
40495     
40496     this.regions = {};
40497     this.addEvents({
40498         /**
40499          * @event layout
40500          * Fires when a layout is performed.
40501          * @param {Roo.LayoutManager} this
40502          */
40503         "layout" : true,
40504         /**
40505          * @event regionresized
40506          * Fires when the user resizes a region.
40507          * @param {Roo.LayoutRegion} region The resized region
40508          * @param {Number} newSize The new size (width for east/west, height for north/south)
40509          */
40510         "regionresized" : true,
40511         /**
40512          * @event regioncollapsed
40513          * Fires when a region is collapsed.
40514          * @param {Roo.LayoutRegion} region The collapsed region
40515          */
40516         "regioncollapsed" : true,
40517         /**
40518          * @event regionexpanded
40519          * Fires when a region is expanded.
40520          * @param {Roo.LayoutRegion} region The expanded region
40521          */
40522         "regionexpanded" : true
40523     });
40524     this.updating = false;
40525
40526     if (config.el) {
40527         this.el = Roo.get(config.el);
40528         this.initEvents();
40529     }
40530
40531 };
40532
40533 Roo.extend(Roo.bootstrap.layout.Manager, Roo.bootstrap.Component, {
40534
40535
40536     regions : null,
40537
40538     monitorWindowResize : true,
40539
40540
40541     updating : false,
40542
40543
40544     onRender : function(ct, position)
40545     {
40546         if(!this.el){
40547             this.el = Roo.get(ct);
40548             this.initEvents();
40549         }
40550         //this.fireEvent('render',this);
40551     },
40552
40553
40554     initEvents: function()
40555     {
40556
40557
40558         // ie scrollbar fix
40559         if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
40560             document.body.scroll = "no";
40561         }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
40562             this.el.position('relative');
40563         }
40564         this.id = this.el.id;
40565         this.el.addClass("roo-layout-container");
40566         Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
40567         if(this.el.dom != document.body ) {
40568             this.el.on('resize', this.layout,this);
40569             this.el.on('show', this.layout,this);
40570         }
40571
40572     },
40573
40574     /**
40575      * Returns true if this layout is currently being updated
40576      * @return {Boolean}
40577      */
40578     isUpdating : function(){
40579         return this.updating;
40580     },
40581
40582     /**
40583      * Suspend the LayoutManager from doing auto-layouts while
40584      * making multiple add or remove calls
40585      */
40586     beginUpdate : function(){
40587         this.updating = true;
40588     },
40589
40590     /**
40591      * Restore auto-layouts and optionally disable the manager from performing a layout
40592      * @param {Boolean} noLayout true to disable a layout update
40593      */
40594     endUpdate : function(noLayout){
40595         this.updating = false;
40596         if(!noLayout){
40597             this.layout();
40598         }
40599     },
40600
40601     layout: function(){
40602         // abstract...
40603     },
40604
40605     onRegionResized : function(region, newSize){
40606         this.fireEvent("regionresized", region, newSize);
40607         this.layout();
40608     },
40609
40610     onRegionCollapsed : function(region){
40611         this.fireEvent("regioncollapsed", region);
40612     },
40613
40614     onRegionExpanded : function(region){
40615         this.fireEvent("regionexpanded", region);
40616     },
40617
40618     /**
40619      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
40620      * performs box-model adjustments.
40621      * @return {Object} The size as an object {width: (the width), height: (the height)}
40622      */
40623     getViewSize : function()
40624     {
40625         var size;
40626         if(this.el.dom != document.body){
40627             size = this.el.getSize();
40628         }else{
40629             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
40630         }
40631         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
40632         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
40633         return size;
40634     },
40635
40636     /**
40637      * Returns the Element this layout is bound to.
40638      * @return {Roo.Element}
40639      */
40640     getEl : function(){
40641         return this.el;
40642     },
40643
40644     /**
40645      * Returns the specified region.
40646      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
40647      * @return {Roo.LayoutRegion}
40648      */
40649     getRegion : function(target){
40650         return this.regions[target.toLowerCase()];
40651     },
40652
40653     onWindowResize : function(){
40654         if(this.monitorWindowResize){
40655             this.layout();
40656         }
40657     }
40658 });
40659 /*
40660  * Based on:
40661  * Ext JS Library 1.1.1
40662  * Copyright(c) 2006-2007, Ext JS, LLC.
40663  *
40664  * Originally Released Under LGPL - original licence link has changed is not relivant.
40665  *
40666  * Fork - LGPL
40667  * <script type="text/javascript">
40668  */
40669 /**
40670  * @class Roo.bootstrap.layout.Border
40671  * @extends Roo.bootstrap.layout.Manager
40672  * @children Roo.bootstrap.panel.Content Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Grid
40673  * @parent builder Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Nest Roo.bootstrap.Modal
40674  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
40675  * please see: examples/bootstrap/nested.html<br><br>
40676  
40677 <b>The container the layout is rendered into can be either the body element or any other element.
40678 If it is not the body element, the container needs to either be an absolute positioned element,
40679 or you will need to add "position:relative" to the css of the container.  You will also need to specify
40680 the container size if it is not the body element.</b>
40681
40682 * @constructor
40683 * Create a new Border
40684 * @param {Object} config Configuration options
40685  */
40686 Roo.bootstrap.layout.Border = function(config){
40687     config = config || {};
40688     Roo.bootstrap.layout.Border.superclass.constructor.call(this, config);
40689     
40690     
40691     
40692     Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
40693         if(config[region]){
40694             config[region].region = region;
40695             this.addRegion(config[region]);
40696         }
40697     },this);
40698     
40699 };
40700
40701 Roo.bootstrap.layout.Border.regions =  ["center", "north","south","east","west"];
40702
40703 Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
40704     
40705         /**
40706          * @cfg {Roo.bootstrap.layout.Region} center region to go in center
40707          */
40708         /**
40709          * @cfg {Roo.bootstrap.layout.Region} west region to go in west
40710          */
40711         /**
40712          * @cfg {Roo.bootstrap.layout.Region} east region to go in east
40713          */
40714         /**
40715          * @cfg {Roo.bootstrap.layout.Region} south region to go in south
40716          */
40717         /**
40718          * @cfg {Roo.bootstrap.layout.Region} north region to go in north
40719          */
40720         
40721         
40722         
40723         
40724     parent : false, // this might point to a 'nest' or a ???
40725     
40726     /**
40727      * Creates and adds a new region if it doesn't already exist.
40728      * @param {String} target The target region key (north, south, east, west or center).
40729      * @param {Object} config The regions config object
40730      * @return {BorderLayoutRegion} The new region
40731      */
40732     addRegion : function(config)
40733     {
40734         if(!this.regions[config.region]){
40735             var r = this.factory(config);
40736             this.bindRegion(r);
40737         }
40738         return this.regions[config.region];
40739     },
40740
40741     // private (kinda)
40742     bindRegion : function(r){
40743         this.regions[r.config.region] = r;
40744         
40745         r.on("visibilitychange",    this.layout, this);
40746         r.on("paneladded",          this.layout, this);
40747         r.on("panelremoved",        this.layout, this);
40748         r.on("invalidated",         this.layout, this);
40749         r.on("resized",             this.onRegionResized, this);
40750         r.on("collapsed",           this.onRegionCollapsed, this);
40751         r.on("expanded",            this.onRegionExpanded, this);
40752     },
40753
40754     /**
40755      * Performs a layout update.
40756      */
40757     layout : function()
40758     {
40759         if(this.updating) {
40760             return;
40761         }
40762         
40763         // render all the rebions if they have not been done alreayd?
40764         Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
40765             if(this.regions[region] && !this.regions[region].bodyEl){
40766                 this.regions[region].onRender(this.el)
40767             }
40768         },this);
40769         
40770         var size = this.getViewSize();
40771         var w = size.width;
40772         var h = size.height;
40773         var centerW = w;
40774         var centerH = h;
40775         var centerY = 0;
40776         var centerX = 0;
40777         //var x = 0, y = 0;
40778
40779         var rs = this.regions;
40780         var north = rs["north"];
40781         var south = rs["south"]; 
40782         var west = rs["west"];
40783         var east = rs["east"];
40784         var center = rs["center"];
40785         //if(this.hideOnLayout){ // not supported anymore
40786             //c.el.setStyle("display", "none");
40787         //}
40788         if(north && north.isVisible()){
40789             var b = north.getBox();
40790             var m = north.getMargins();
40791             b.width = w - (m.left+m.right);
40792             b.x = m.left;
40793             b.y = m.top;
40794             centerY = b.height + b.y + m.bottom;
40795             centerH -= centerY;
40796             north.updateBox(this.safeBox(b));
40797         }
40798         if(south && south.isVisible()){
40799             var b = south.getBox();
40800             var m = south.getMargins();
40801             b.width = w - (m.left+m.right);
40802             b.x = m.left;
40803             var totalHeight = (b.height + m.top + m.bottom);
40804             b.y = h - totalHeight + m.top;
40805             centerH -= totalHeight;
40806             south.updateBox(this.safeBox(b));
40807         }
40808         if(west && west.isVisible()){
40809             var b = west.getBox();
40810             var m = west.getMargins();
40811             b.height = centerH - (m.top+m.bottom);
40812             b.x = m.left;
40813             b.y = centerY + m.top;
40814             var totalWidth = (b.width + m.left + m.right);
40815             centerX += totalWidth;
40816             centerW -= totalWidth;
40817             west.updateBox(this.safeBox(b));
40818         }
40819         if(east && east.isVisible()){
40820             var b = east.getBox();
40821             var m = east.getMargins();
40822             b.height = centerH - (m.top+m.bottom);
40823             var totalWidth = (b.width + m.left + m.right);
40824             b.x = w - totalWidth + m.left;
40825             b.y = centerY + m.top;
40826             centerW -= totalWidth;
40827             east.updateBox(this.safeBox(b));
40828         }
40829         if(center){
40830             var m = center.getMargins();
40831             var centerBox = {
40832                 x: centerX + m.left,
40833                 y: centerY + m.top,
40834                 width: centerW - (m.left+m.right),
40835                 height: centerH - (m.top+m.bottom)
40836             };
40837             //if(this.hideOnLayout){
40838                 //center.el.setStyle("display", "block");
40839             //}
40840             center.updateBox(this.safeBox(centerBox));
40841         }
40842         this.el.repaint();
40843         this.fireEvent("layout", this);
40844     },
40845
40846     // private
40847     safeBox : function(box){
40848         box.width = Math.max(0, box.width);
40849         box.height = Math.max(0, box.height);
40850         return box;
40851     },
40852
40853     /**
40854      * Adds a ContentPanel (or subclass) to this layout.
40855      * @param {String} target The target region key (north, south, east, west or center).
40856      * @param {Roo.ContentPanel} panel The panel to add
40857      * @return {Roo.ContentPanel} The added panel
40858      */
40859     add : function(target, panel){
40860          
40861         target = target.toLowerCase();
40862         return this.regions[target].add(panel);
40863     },
40864
40865     /**
40866      * Remove a ContentPanel (or subclass) to this layout.
40867      * @param {String} target The target region key (north, south, east, west or center).
40868      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
40869      * @return {Roo.ContentPanel} The removed panel
40870      */
40871     remove : function(target, panel){
40872         target = target.toLowerCase();
40873         return this.regions[target].remove(panel);
40874     },
40875
40876     /**
40877      * Searches all regions for a panel with the specified id
40878      * @param {String} panelId
40879      * @return {Roo.ContentPanel} The panel or null if it wasn't found
40880      */
40881     findPanel : function(panelId){
40882         var rs = this.regions;
40883         for(var target in rs){
40884             if(typeof rs[target] != "function"){
40885                 var p = rs[target].getPanel(panelId);
40886                 if(p){
40887                     return p;
40888                 }
40889             }
40890         }
40891         return null;
40892     },
40893
40894     /**
40895      * Searches all regions for a panel with the specified id and activates (shows) it.
40896      * @param {String/ContentPanel} panelId The panels id or the panel itself
40897      * @return {Roo.ContentPanel} The shown panel or null
40898      */
40899     showPanel : function(panelId) {
40900       var rs = this.regions;
40901       for(var target in rs){
40902          var r = rs[target];
40903          if(typeof r != "function"){
40904             if(r.hasPanel(panelId)){
40905                return r.showPanel(panelId);
40906             }
40907          }
40908       }
40909       return null;
40910    },
40911
40912    /**
40913      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
40914      * @param {Roo.state.Provider} provider (optional) An alternate state provider
40915      */
40916    /*
40917     restoreState : function(provider){
40918         if(!provider){
40919             provider = Roo.state.Manager;
40920         }
40921         var sm = new Roo.LayoutStateManager();
40922         sm.init(this, provider);
40923     },
40924 */
40925  
40926  
40927     /**
40928      * Adds a xtype elements to the layout.
40929      * <pre><code>
40930
40931 layout.addxtype({
40932        xtype : 'ContentPanel',
40933        region: 'west',
40934        items: [ .... ]
40935    }
40936 );
40937
40938 layout.addxtype({
40939         xtype : 'NestedLayoutPanel',
40940         region: 'west',
40941         layout: {
40942            center: { },
40943            west: { }   
40944         },
40945         items : [ ... list of content panels or nested layout panels.. ]
40946    }
40947 );
40948 </code></pre>
40949      * @param {Object} cfg Xtype definition of item to add.
40950      */
40951     addxtype : function(cfg)
40952     {
40953         // basically accepts a pannel...
40954         // can accept a layout region..!?!?
40955         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
40956         
40957         
40958         // theory?  children can only be panels??
40959         
40960         //if (!cfg.xtype.match(/Panel$/)) {
40961         //    return false;
40962         //}
40963         var ret = false;
40964         
40965         if (typeof(cfg.region) == 'undefined') {
40966             Roo.log("Failed to add Panel, region was not set");
40967             Roo.log(cfg);
40968             return false;
40969         }
40970         var region = cfg.region;
40971         delete cfg.region;
40972         
40973           
40974         var xitems = [];
40975         if (cfg.items) {
40976             xitems = cfg.items;
40977             delete cfg.items;
40978         }
40979         var nb = false;
40980         
40981         if ( region == 'center') {
40982             Roo.log("Center: " + cfg.title);
40983         }
40984         
40985         
40986         switch(cfg.xtype) 
40987         {
40988             case 'Content':  // ContentPanel (el, cfg)
40989             case 'Scroll':  // ContentPanel (el, cfg)
40990             case 'View': 
40991                 cfg.autoCreate = cfg.autoCreate || true;
40992                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
40993                 //} else {
40994                 //    var el = this.el.createChild();
40995                 //    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
40996                 //}
40997                 
40998                 this.add(region, ret);
40999                 break;
41000             
41001             /*
41002             case 'TreePanel': // our new panel!
41003                 cfg.el = this.el.createChild();
41004                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
41005                 this.add(region, ret);
41006                 break;
41007             */
41008             
41009             case 'Nest': 
41010                 // create a new Layout (which is  a Border Layout...
41011                 
41012                 var clayout = cfg.layout;
41013                 clayout.el  = this.el.createChild();
41014                 clayout.items   = clayout.items  || [];
41015                 
41016                 delete cfg.layout;
41017                 
41018                 // replace this exitems with the clayout ones..
41019                 xitems = clayout.items;
41020                  
41021                 // force background off if it's in center...
41022                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
41023                     cfg.background = false;
41024                 }
41025                 cfg.layout  = new Roo.bootstrap.layout.Border(clayout);
41026                 
41027                 
41028                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
41029                 //console.log('adding nested layout panel '  + cfg.toSource());
41030                 this.add(region, ret);
41031                 nb = {}; /// find first...
41032                 break;
41033             
41034             case 'Grid':
41035                 
41036                 // needs grid and region
41037                 
41038                 //var el = this.getRegion(region).el.createChild();
41039                 /*
41040                  *var el = this.el.createChild();
41041                 // create the grid first...
41042                 cfg.grid.container = el;
41043                 cfg.grid = new cfg.grid.xns[cfg.grid.xtype](cfg.grid);
41044                 */
41045                 
41046                 if (region == 'center' && this.active ) {
41047                     cfg.background = false;
41048                 }
41049                 
41050                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
41051                 
41052                 this.add(region, ret);
41053                 /*
41054                 if (cfg.background) {
41055                     // render grid on panel activation (if panel background)
41056                     ret.on('activate', function(gp) {
41057                         if (!gp.grid.rendered) {
41058                     //        gp.grid.render(el);
41059                         }
41060                     });
41061                 } else {
41062                   //  cfg.grid.render(el);
41063                 }
41064                 */
41065                 break;
41066            
41067            
41068             case 'Border': // it can get called on it'self... - might need to check if this is fixed?
41069                 // it was the old xcomponent building that caused this before.
41070                 // espeically if border is the top element in the tree.
41071                 ret = this;
41072                 break; 
41073                 
41074                     
41075                 
41076                 
41077                 
41078             default:
41079                 /*
41080                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
41081                     
41082                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
41083                     this.add(region, ret);
41084                 } else {
41085                 */
41086                     Roo.log(cfg);
41087                     throw "Can not add '" + cfg.xtype + "' to Border";
41088                     return null;
41089              
41090                                 
41091              
41092         }
41093         this.beginUpdate();
41094         // add children..
41095         var region = '';
41096         var abn = {};
41097         Roo.each(xitems, function(i)  {
41098             region = nb && i.region ? i.region : false;
41099             
41100             var add = ret.addxtype(i);
41101            
41102             if (region) {
41103                 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
41104                 if (!i.background) {
41105                     abn[region] = nb[region] ;
41106                 }
41107             }
41108             
41109         });
41110         this.endUpdate();
41111
41112         // make the last non-background panel active..
41113         //if (nb) { Roo.log(abn); }
41114         if (nb) {
41115             
41116             for(var r in abn) {
41117                 region = this.getRegion(r);
41118                 if (region) {
41119                     // tried using nb[r], but it does not work..
41120                      
41121                     region.showPanel(abn[r]);
41122                    
41123                 }
41124             }
41125         }
41126         return ret;
41127         
41128     },
41129     
41130     
41131 // private
41132     factory : function(cfg)
41133     {
41134         
41135         var validRegions = Roo.bootstrap.layout.Border.regions;
41136
41137         var target = cfg.region;
41138         cfg.mgr = this;
41139         
41140         var r = Roo.bootstrap.layout;
41141         Roo.log(target);
41142         switch(target){
41143             case "north":
41144                 return new r.North(cfg);
41145             case "south":
41146                 return new r.South(cfg);
41147             case "east":
41148                 return new r.East(cfg);
41149             case "west":
41150                 return new r.West(cfg);
41151             case "center":
41152                 return new r.Center(cfg);
41153         }
41154         throw 'Layout region "'+target+'" not supported.';
41155     }
41156     
41157     
41158 });
41159  /*
41160  * Based on:
41161  * Ext JS Library 1.1.1
41162  * Copyright(c) 2006-2007, Ext JS, LLC.
41163  *
41164  * Originally Released Under LGPL - original licence link has changed is not relivant.
41165  *
41166  * Fork - LGPL
41167  * <script type="text/javascript">
41168  */
41169  
41170 /**
41171  * @class Roo.bootstrap.layout.Basic
41172  * @extends Roo.util.Observable
41173  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
41174  * and does not have a titlebar, tabs or any other features. All it does is size and position 
41175  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
41176  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
41177  * @cfg {string}   region  the region that it inhabits..
41178  * @cfg {bool}   skipConfig skip config?
41179  * 
41180
41181  */
41182 Roo.bootstrap.layout.Basic = function(config){
41183     
41184     this.mgr = config.mgr;
41185     
41186     this.position = config.region;
41187     
41188     var skipConfig = config.skipConfig;
41189     
41190     this.events = {
41191         /**
41192          * @scope Roo.BasicLayoutRegion
41193          */
41194         
41195         /**
41196          * @event beforeremove
41197          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
41198          * @param {Roo.LayoutRegion} this
41199          * @param {Roo.ContentPanel} panel The panel
41200          * @param {Object} e The cancel event object
41201          */
41202         "beforeremove" : true,
41203         /**
41204          * @event invalidated
41205          * Fires when the layout for this region is changed.
41206          * @param {Roo.LayoutRegion} this
41207          */
41208         "invalidated" : true,
41209         /**
41210          * @event visibilitychange
41211          * Fires when this region is shown or hidden 
41212          * @param {Roo.LayoutRegion} this
41213          * @param {Boolean} visibility true or false
41214          */
41215         "visibilitychange" : true,
41216         /**
41217          * @event paneladded
41218          * Fires when a panel is added. 
41219          * @param {Roo.LayoutRegion} this
41220          * @param {Roo.ContentPanel} panel The panel
41221          */
41222         "paneladded" : true,
41223         /**
41224          * @event panelremoved
41225          * Fires when a panel is removed. 
41226          * @param {Roo.LayoutRegion} this
41227          * @param {Roo.ContentPanel} panel The panel
41228          */
41229         "panelremoved" : true,
41230         /**
41231          * @event beforecollapse
41232          * Fires when this region before collapse.
41233          * @param {Roo.LayoutRegion} this
41234          */
41235         "beforecollapse" : true,
41236         /**
41237          * @event collapsed
41238          * Fires when this region is collapsed.
41239          * @param {Roo.LayoutRegion} this
41240          */
41241         "collapsed" : true,
41242         /**
41243          * @event expanded
41244          * Fires when this region is expanded.
41245          * @param {Roo.LayoutRegion} this
41246          */
41247         "expanded" : true,
41248         /**
41249          * @event slideshow
41250          * Fires when this region is slid into view.
41251          * @param {Roo.LayoutRegion} this
41252          */
41253         "slideshow" : true,
41254         /**
41255          * @event slidehide
41256          * Fires when this region slides out of view. 
41257          * @param {Roo.LayoutRegion} this
41258          */
41259         "slidehide" : true,
41260         /**
41261          * @event panelactivated
41262          * Fires when a panel is activated. 
41263          * @param {Roo.LayoutRegion} this
41264          * @param {Roo.ContentPanel} panel The activated panel
41265          */
41266         "panelactivated" : true,
41267         /**
41268          * @event resized
41269          * Fires when the user resizes this region. 
41270          * @param {Roo.LayoutRegion} this
41271          * @param {Number} newSize The new size (width for east/west, height for north/south)
41272          */
41273         "resized" : true
41274     };
41275     /** A collection of panels in this region. @type Roo.util.MixedCollection */
41276     this.panels = new Roo.util.MixedCollection();
41277     this.panels.getKey = this.getPanelId.createDelegate(this);
41278     this.box = null;
41279     this.activePanel = null;
41280     // ensure listeners are added...
41281     
41282     if (config.listeners || config.events) {
41283         Roo.bootstrap.layout.Basic.superclass.constructor.call(this, {
41284             listeners : config.listeners || {},
41285             events : config.events || {}
41286         });
41287     }
41288     
41289     if(skipConfig !== true){
41290         this.applyConfig(config);
41291     }
41292 };
41293
41294 Roo.extend(Roo.bootstrap.layout.Basic, Roo.util.Observable,
41295 {
41296     getPanelId : function(p){
41297         return p.getId();
41298     },
41299     
41300     applyConfig : function(config){
41301         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
41302         this.config = config;
41303         
41304     },
41305     
41306     /**
41307      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
41308      * the width, for horizontal (north, south) the height.
41309      * @param {Number} newSize The new width or height
41310      */
41311     resizeTo : function(newSize){
41312         var el = this.el ? this.el :
41313                  (this.activePanel ? this.activePanel.getEl() : null);
41314         if(el){
41315             switch(this.position){
41316                 case "east":
41317                 case "west":
41318                     el.setWidth(newSize);
41319                     this.fireEvent("resized", this, newSize);
41320                 break;
41321                 case "north":
41322                 case "south":
41323                     el.setHeight(newSize);
41324                     this.fireEvent("resized", this, newSize);
41325                 break;                
41326             }
41327         }
41328     },
41329     
41330     getBox : function(){
41331         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
41332     },
41333     
41334     getMargins : function(){
41335         return this.margins;
41336     },
41337     
41338     updateBox : function(box){
41339         this.box = box;
41340         var el = this.activePanel.getEl();
41341         el.dom.style.left = box.x + "px";
41342         el.dom.style.top = box.y + "px";
41343         this.activePanel.setSize(box.width, box.height);
41344     },
41345     
41346     /**
41347      * Returns the container element for this region.
41348      * @return {Roo.Element}
41349      */
41350     getEl : function(){
41351         return this.activePanel;
41352     },
41353     
41354     /**
41355      * Returns true if this region is currently visible.
41356      * @return {Boolean}
41357      */
41358     isVisible : function(){
41359         return this.activePanel ? true : false;
41360     },
41361     
41362     setActivePanel : function(panel){
41363         panel = this.getPanel(panel);
41364         if(this.activePanel && this.activePanel != panel){
41365             this.activePanel.setActiveState(false);
41366             this.activePanel.getEl().setLeftTop(-10000,-10000);
41367         }
41368         this.activePanel = panel;
41369         panel.setActiveState(true);
41370         if(this.box){
41371             panel.setSize(this.box.width, this.box.height);
41372         }
41373         this.fireEvent("panelactivated", this, panel);
41374         this.fireEvent("invalidated");
41375     },
41376     
41377     /**
41378      * Show the specified panel.
41379      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
41380      * @return {Roo.ContentPanel} The shown panel or null
41381      */
41382     showPanel : function(panel){
41383         panel = this.getPanel(panel);
41384         if(panel){
41385             this.setActivePanel(panel);
41386         }
41387         return panel;
41388     },
41389     
41390     /**
41391      * Get the active panel for this region.
41392      * @return {Roo.ContentPanel} The active panel or null
41393      */
41394     getActivePanel : function(){
41395         return this.activePanel;
41396     },
41397     
41398     /**
41399      * Add the passed ContentPanel(s)
41400      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
41401      * @return {Roo.ContentPanel} The panel added (if only one was added)
41402      */
41403     add : function(panel){
41404         if(arguments.length > 1){
41405             for(var i = 0, len = arguments.length; i < len; i++) {
41406                 this.add(arguments[i]);
41407             }
41408             return null;
41409         }
41410         if(this.hasPanel(panel)){
41411             this.showPanel(panel);
41412             return panel;
41413         }
41414         var el = panel.getEl();
41415         if(el.dom.parentNode != this.mgr.el.dom){
41416             this.mgr.el.dom.appendChild(el.dom);
41417         }
41418         if(panel.setRegion){
41419             panel.setRegion(this);
41420         }
41421         this.panels.add(panel);
41422         el.setStyle("position", "absolute");
41423         if(!panel.background){
41424             this.setActivePanel(panel);
41425             if(this.config.initialSize && this.panels.getCount()==1){
41426                 this.resizeTo(this.config.initialSize);
41427             }
41428         }
41429         this.fireEvent("paneladded", this, panel);
41430         return panel;
41431     },
41432     
41433     /**
41434      * Returns true if the panel is in this region.
41435      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
41436      * @return {Boolean}
41437      */
41438     hasPanel : function(panel){
41439         if(typeof panel == "object"){ // must be panel obj
41440             panel = panel.getId();
41441         }
41442         return this.getPanel(panel) ? true : false;
41443     },
41444     
41445     /**
41446      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
41447      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
41448      * @param {Boolean} preservePanel Overrides the config preservePanel option
41449      * @return {Roo.ContentPanel} The panel that was removed
41450      */
41451     remove : function(panel, preservePanel){
41452         panel = this.getPanel(panel);
41453         if(!panel){
41454             return null;
41455         }
41456         var e = {};
41457         this.fireEvent("beforeremove", this, panel, e);
41458         if(e.cancel === true){
41459             return null;
41460         }
41461         var panelId = panel.getId();
41462         this.panels.removeKey(panelId);
41463         return panel;
41464     },
41465     
41466     /**
41467      * Returns the panel specified or null if it's not in this region.
41468      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
41469      * @return {Roo.ContentPanel}
41470      */
41471     getPanel : function(id){
41472         if(typeof id == "object"){ // must be panel obj
41473             return id;
41474         }
41475         return this.panels.get(id);
41476     },
41477     
41478     /**
41479      * Returns this regions position (north/south/east/west/center).
41480      * @return {String} 
41481      */
41482     getPosition: function(){
41483         return this.position;    
41484     }
41485 });/*
41486  * Based on:
41487  * Ext JS Library 1.1.1
41488  * Copyright(c) 2006-2007, Ext JS, LLC.
41489  *
41490  * Originally Released Under LGPL - original licence link has changed is not relivant.
41491  *
41492  * Fork - LGPL
41493  * <script type="text/javascript">
41494  */
41495  
41496 /**
41497  * @class Roo.bootstrap.layout.Region
41498  * @extends Roo.bootstrap.layout.Basic
41499  * This class represents a region in a layout manager.
41500  
41501  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
41502  * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
41503  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
41504  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
41505  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
41506  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
41507  * @cfg {String}    title           The title for the region (overrides panel titles)
41508  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
41509  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
41510  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
41511  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
41512  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
41513  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
41514  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
41515  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
41516  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
41517  * @cfg {String}    overflow       (hidden|visible) if you have menus in the region, then you need to set this to visible.
41518
41519  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
41520  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
41521  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
41522  * @cfg {Number}    width           For East/West panels
41523  * @cfg {Number}    height          For North/South panels
41524  * @cfg {Boolean}   split           To show the splitter
41525  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
41526  * 
41527  * @cfg {string}   cls             Extra CSS classes to add to region
41528  * 
41529  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
41530  * @cfg {string}   region  the region that it inhabits..
41531  *
41532
41533  * @xxxcfg {Boolean}   collapsible     DISABLED False to disable collapsing (defaults to true)
41534  * @xxxcfg {Boolean}   collapsed       DISABLED True to set the initial display to collapsed (defaults to false)
41535
41536  * @xxxcfg {String}    collapsedTitle  DISABLED Optional string message to display in the collapsed block of a north or south region
41537  * @xxxxcfg {Boolean}   floatable       DISABLED False to disable floating (defaults to true)
41538  * @xxxxcfg {Boolean}   showPin         True to show a pin button NOT SUPPORTED YET
41539  */
41540 Roo.bootstrap.layout.Region = function(config)
41541 {
41542     this.applyConfig(config);
41543
41544     var mgr = config.mgr;
41545     var pos = config.region;
41546     config.skipConfig = true;
41547     Roo.bootstrap.layout.Region.superclass.constructor.call(this, config);
41548     
41549     if (mgr.el) {
41550         this.onRender(mgr.el);   
41551     }
41552      
41553     this.visible = true;
41554     this.collapsed = false;
41555     this.unrendered_panels = [];
41556 };
41557
41558 Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
41559
41560     position: '', // set by wrapper (eg. north/south etc..)
41561     unrendered_panels : null,  // unrendered panels.
41562     
41563     tabPosition : false,
41564     
41565     mgr: false, // points to 'Border'
41566     
41567     
41568     createBody : function(){
41569         /** This region's body element 
41570         * @type Roo.Element */
41571         this.bodyEl = this.el.createChild({
41572                 tag: "div",
41573                 cls: "roo-layout-panel-body tab-content" // bootstrap added...
41574         });
41575     },
41576
41577     onRender: function(ctr, pos)
41578     {
41579         var dh = Roo.DomHelper;
41580         /** This region's container element 
41581         * @type Roo.Element */
41582         this.el = dh.append(ctr.dom, {
41583                 tag: "div",
41584                 cls: (this.config.cls || '') + " roo-layout-region roo-layout-panel roo-layout-panel-" + this.position
41585             }, true);
41586         /** This region's title element 
41587         * @type Roo.Element */
41588     
41589         this.titleEl = dh.append(this.el.dom,  {
41590                 tag: "div",
41591                 unselectable: "on",
41592                 cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
41593                 children:[
41594                     {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
41595                     {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
41596                 ]
41597             }, true);
41598         
41599         this.titleEl.enableDisplayMode();
41600         /** This region's title text element 
41601         * @type HTMLElement */
41602         this.titleTextEl = this.titleEl.dom.firstChild;
41603         this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
41604         /*
41605         this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
41606         this.closeBtn.enableDisplayMode();
41607         this.closeBtn.on("click", this.closeClicked, this);
41608         this.closeBtn.hide();
41609     */
41610         this.createBody(this.config);
41611         if(this.config.hideWhenEmpty){
41612             this.hide();
41613             this.on("paneladded", this.validateVisibility, this);
41614             this.on("panelremoved", this.validateVisibility, this);
41615         }
41616         if(this.autoScroll){
41617             this.bodyEl.setStyle("overflow", "auto");
41618         }else{
41619             this.bodyEl.setStyle("overflow", this.config.overflow || 'hidden');
41620         }
41621         //if(c.titlebar !== false){
41622             if((!this.config.titlebar && !this.config.title) || this.config.titlebar === false){
41623                 this.titleEl.hide();
41624             }else{
41625                 this.titleEl.show();
41626                 if(this.config.title){
41627                     this.titleTextEl.innerHTML = this.config.title;
41628                 }
41629             }
41630         //}
41631         if(this.config.collapsed){
41632             this.collapse(true);
41633         }
41634         if(this.config.hidden){
41635             this.hide();
41636         }
41637         
41638         if (this.unrendered_panels && this.unrendered_panels.length) {
41639             for (var i =0;i< this.unrendered_panels.length; i++) {
41640                 this.add(this.unrendered_panels[i]);
41641             }
41642             this.unrendered_panels = null;
41643             
41644         }
41645         
41646     },
41647     
41648     applyConfig : function(c)
41649     {
41650         /*
41651          *if(c.collapsible && this.position != "center" && !this.collapsedEl){
41652             var dh = Roo.DomHelper;
41653             if(c.titlebar !== false){
41654                 this.collapseBtn = this.createTool(this.tools.dom, "roo-layout-collapse-"+this.position);
41655                 this.collapseBtn.on("click", this.collapse, this);
41656                 this.collapseBtn.enableDisplayMode();
41657                 /*
41658                 if(c.showPin === true || this.showPin){
41659                     this.stickBtn = this.createTool(this.tools.dom, "roo-layout-stick");
41660                     this.stickBtn.enableDisplayMode();
41661                     this.stickBtn.on("click", this.expand, this);
41662                     this.stickBtn.hide();
41663                 }
41664                 
41665             }
41666             */
41667             /** This region's collapsed element
41668             * @type Roo.Element */
41669             /*
41670              *
41671             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
41672                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
41673             ]}, true);
41674             
41675             if(c.floatable !== false){
41676                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
41677                this.collapsedEl.on("click", this.collapseClick, this);
41678             }
41679
41680             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
41681                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
41682                    id: "message", unselectable: "on", style:{"float":"left"}});
41683                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
41684              }
41685             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
41686             this.expandBtn.on("click", this.expand, this);
41687             
41688         }
41689         
41690         if(this.collapseBtn){
41691             this.collapseBtn.setVisible(c.collapsible == true);
41692         }
41693         
41694         this.cmargins = c.cmargins || this.cmargins ||
41695                          (this.position == "west" || this.position == "east" ?
41696                              {top: 0, left: 2, right:2, bottom: 0} :
41697                              {top: 2, left: 0, right:0, bottom: 2});
41698         */
41699         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
41700         
41701         
41702         this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
41703         
41704         this.autoScroll = c.autoScroll || false;
41705         
41706         
41707        
41708         
41709         this.duration = c.duration || .30;
41710         this.slideDuration = c.slideDuration || .45;
41711         this.config = c;
41712        
41713     },
41714     /**
41715      * Returns true if this region is currently visible.
41716      * @return {Boolean}
41717      */
41718     isVisible : function(){
41719         return this.visible;
41720     },
41721
41722     /**
41723      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
41724      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
41725      */
41726     //setCollapsedTitle : function(title){
41727     //    title = title || "&#160;";
41728      //   if(this.collapsedTitleTextEl){
41729       //      this.collapsedTitleTextEl.innerHTML = title;
41730        // }
41731     //},
41732
41733     getBox : function(){
41734         var b;
41735       //  if(!this.collapsed){
41736             b = this.el.getBox(false, true);
41737        // }else{
41738           //  b = this.collapsedEl.getBox(false, true);
41739         //}
41740         return b;
41741     },
41742
41743     getMargins : function(){
41744         return this.margins;
41745         //return this.collapsed ? this.cmargins : this.margins;
41746     },
41747 /*
41748     highlight : function(){
41749         this.el.addClass("x-layout-panel-dragover");
41750     },
41751
41752     unhighlight : function(){
41753         this.el.removeClass("x-layout-panel-dragover");
41754     },
41755 */
41756     updateBox : function(box)
41757     {
41758         if (!this.bodyEl) {
41759             return; // not rendered yet..
41760         }
41761         
41762         this.box = box;
41763         if(!this.collapsed){
41764             this.el.dom.style.left = box.x + "px";
41765             this.el.dom.style.top = box.y + "px";
41766             this.updateBody(box.width, box.height);
41767         }else{
41768             this.collapsedEl.dom.style.left = box.x + "px";
41769             this.collapsedEl.dom.style.top = box.y + "px";
41770             this.collapsedEl.setSize(box.width, box.height);
41771         }
41772         if(this.tabs){
41773             this.tabs.autoSizeTabs();
41774         }
41775     },
41776
41777     updateBody : function(w, h)
41778     {
41779         if(w !== null){
41780             this.el.setWidth(w);
41781             w -= this.el.getBorderWidth("rl");
41782             if(this.config.adjustments){
41783                 w += this.config.adjustments[0];
41784             }
41785         }
41786         if(h !== null && h > 0){
41787             this.el.setHeight(h);
41788             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
41789             h -= this.el.getBorderWidth("tb");
41790             if(this.config.adjustments){
41791                 h += this.config.adjustments[1];
41792             }
41793             this.bodyEl.setHeight(h);
41794             if(this.tabs){
41795                 h = this.tabs.syncHeight(h);
41796             }
41797         }
41798         if(this.panelSize){
41799             w = w !== null ? w : this.panelSize.width;
41800             h = h !== null ? h : this.panelSize.height;
41801         }
41802         if(this.activePanel){
41803             var el = this.activePanel.getEl();
41804             w = w !== null ? w : el.getWidth();
41805             h = h !== null ? h : el.getHeight();
41806             this.panelSize = {width: w, height: h};
41807             this.activePanel.setSize(w, h);
41808         }
41809         if(Roo.isIE && this.tabs){
41810             this.tabs.el.repaint();
41811         }
41812     },
41813
41814     /**
41815      * Returns the container element for this region.
41816      * @return {Roo.Element}
41817      */
41818     getEl : function(){
41819         return this.el;
41820     },
41821
41822     /**
41823      * Hides this region.
41824      */
41825     hide : function(){
41826         //if(!this.collapsed){
41827             this.el.dom.style.left = "-2000px";
41828             this.el.hide();
41829         //}else{
41830          //   this.collapsedEl.dom.style.left = "-2000px";
41831          //   this.collapsedEl.hide();
41832        // }
41833         this.visible = false;
41834         this.fireEvent("visibilitychange", this, false);
41835     },
41836
41837     /**
41838      * Shows this region if it was previously hidden.
41839      */
41840     show : function(){
41841         //if(!this.collapsed){
41842             this.el.show();
41843         //}else{
41844         //    this.collapsedEl.show();
41845        // }
41846         this.visible = true;
41847         this.fireEvent("visibilitychange", this, true);
41848     },
41849 /*
41850     closeClicked : function(){
41851         if(this.activePanel){
41852             this.remove(this.activePanel);
41853         }
41854     },
41855
41856     collapseClick : function(e){
41857         if(this.isSlid){
41858            e.stopPropagation();
41859            this.slideIn();
41860         }else{
41861            e.stopPropagation();
41862            this.slideOut();
41863         }
41864     },
41865 */
41866     /**
41867      * Collapses this region.
41868      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
41869      */
41870     /*
41871     collapse : function(skipAnim, skipCheck = false){
41872         if(this.collapsed) {
41873             return;
41874         }
41875         
41876         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
41877             
41878             this.collapsed = true;
41879             if(this.split){
41880                 this.split.el.hide();
41881             }
41882             if(this.config.animate && skipAnim !== true){
41883                 this.fireEvent("invalidated", this);
41884                 this.animateCollapse();
41885             }else{
41886                 this.el.setLocation(-20000,-20000);
41887                 this.el.hide();
41888                 this.collapsedEl.show();
41889                 this.fireEvent("collapsed", this);
41890                 this.fireEvent("invalidated", this);
41891             }
41892         }
41893         
41894     },
41895 */
41896     animateCollapse : function(){
41897         // overridden
41898     },
41899
41900     /**
41901      * Expands this region if it was previously collapsed.
41902      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
41903      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
41904      */
41905     /*
41906     expand : function(e, skipAnim){
41907         if(e) {
41908             e.stopPropagation();
41909         }
41910         if(!this.collapsed || this.el.hasActiveFx()) {
41911             return;
41912         }
41913         if(this.isSlid){
41914             this.afterSlideIn();
41915             skipAnim = true;
41916         }
41917         this.collapsed = false;
41918         if(this.config.animate && skipAnim !== true){
41919             this.animateExpand();
41920         }else{
41921             this.el.show();
41922             if(this.split){
41923                 this.split.el.show();
41924             }
41925             this.collapsedEl.setLocation(-2000,-2000);
41926             this.collapsedEl.hide();
41927             this.fireEvent("invalidated", this);
41928             this.fireEvent("expanded", this);
41929         }
41930     },
41931 */
41932     animateExpand : function(){
41933         // overridden
41934     },
41935
41936     initTabs : function()
41937     {
41938         //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
41939         
41940         var ts = new Roo.bootstrap.panel.Tabs({
41941             el: this.bodyEl.dom,
41942             region : this,
41943             tabPosition: this.tabPosition ? this.tabPosition  : 'top',
41944             disableTooltips: this.config.disableTabTips,
41945             toolbar : this.config.toolbar
41946         });
41947         
41948         if(this.config.hideTabs){
41949             ts.stripWrap.setDisplayed(false);
41950         }
41951         this.tabs = ts;
41952         ts.resizeTabs = this.config.resizeTabs === true;
41953         ts.minTabWidth = this.config.minTabWidth || 40;
41954         ts.maxTabWidth = this.config.maxTabWidth || 250;
41955         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
41956         ts.monitorResize = false;
41957         //ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden"); // this is set in render?
41958         ts.bodyEl.addClass('roo-layout-tabs-body');
41959         this.panels.each(this.initPanelAsTab, this);
41960     },
41961
41962     initPanelAsTab : function(panel){
41963         var ti = this.tabs.addTab(
41964             panel.getEl().id,
41965             panel.getTitle(),
41966             null,
41967             this.config.closeOnTab && panel.isClosable(),
41968             panel.tpl
41969         );
41970         if(panel.tabTip !== undefined){
41971             ti.setTooltip(panel.tabTip);
41972         }
41973         ti.on("activate", function(){
41974               this.setActivePanel(panel);
41975         }, this);
41976         
41977         if(this.config.closeOnTab){
41978             ti.on("beforeclose", function(t, e){
41979                 e.cancel = true;
41980                 this.remove(panel);
41981             }, this);
41982         }
41983         
41984         panel.tabItem = ti;
41985         
41986         return ti;
41987     },
41988
41989     updatePanelTitle : function(panel, title)
41990     {
41991         if(this.activePanel == panel){
41992             this.updateTitle(title);
41993         }
41994         if(this.tabs){
41995             var ti = this.tabs.getTab(panel.getEl().id);
41996             ti.setText(title);
41997             if(panel.tabTip !== undefined){
41998                 ti.setTooltip(panel.tabTip);
41999             }
42000         }
42001     },
42002
42003     updateTitle : function(title){
42004         if(this.titleTextEl && !this.config.title){
42005             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
42006         }
42007     },
42008
42009     setActivePanel : function(panel)
42010     {
42011         panel = this.getPanel(panel);
42012         if(this.activePanel && this.activePanel != panel){
42013             if(this.activePanel.setActiveState(false) === false){
42014                 return;
42015             }
42016         }
42017         this.activePanel = panel;
42018         panel.setActiveState(true);
42019         if(this.panelSize){
42020             panel.setSize(this.panelSize.width, this.panelSize.height);
42021         }
42022         if(this.closeBtn){
42023             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
42024         }
42025         this.updateTitle(panel.getTitle());
42026         if(this.tabs){
42027             this.fireEvent("invalidated", this);
42028         }
42029         this.fireEvent("panelactivated", this, panel);
42030     },
42031
42032     /**
42033      * Shows the specified panel.
42034      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
42035      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
42036      */
42037     showPanel : function(panel)
42038     {
42039         panel = this.getPanel(panel);
42040         if(panel){
42041             if(this.tabs){
42042                 var tab = this.tabs.getTab(panel.getEl().id);
42043                 if(tab.isHidden()){
42044                     this.tabs.unhideTab(tab.id);
42045                 }
42046                 tab.activate();
42047             }else{
42048                 this.setActivePanel(panel);
42049             }
42050         }
42051         return panel;
42052     },
42053
42054     /**
42055      * Get the active panel for this region.
42056      * @return {Roo.ContentPanel} The active panel or null
42057      */
42058     getActivePanel : function(){
42059         return this.activePanel;
42060     },
42061
42062     validateVisibility : function(){
42063         if(this.panels.getCount() < 1){
42064             this.updateTitle("&#160;");
42065             this.closeBtn.hide();
42066             this.hide();
42067         }else{
42068             if(!this.isVisible()){
42069                 this.show();
42070             }
42071         }
42072     },
42073
42074     /**
42075      * Adds the passed ContentPanel(s) to this region.
42076      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
42077      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
42078      */
42079     add : function(panel)
42080     {
42081         if(arguments.length > 1){
42082             for(var i = 0, len = arguments.length; i < len; i++) {
42083                 this.add(arguments[i]);
42084             }
42085             return null;
42086         }
42087         
42088         // if we have not been rendered yet, then we can not really do much of this..
42089         if (!this.bodyEl) {
42090             this.unrendered_panels.push(panel);
42091             return panel;
42092         }
42093         
42094         
42095         
42096         
42097         if(this.hasPanel(panel)){
42098             this.showPanel(panel);
42099             return panel;
42100         }
42101         panel.setRegion(this);
42102         this.panels.add(panel);
42103        /* if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
42104             // sinle panel - no tab...?? would it not be better to render it with the tabs,
42105             // and hide them... ???
42106             this.bodyEl.dom.appendChild(panel.getEl().dom);
42107             if(panel.background !== true){
42108                 this.setActivePanel(panel);
42109             }
42110             this.fireEvent("paneladded", this, panel);
42111             return panel;
42112         }
42113         */
42114         if(!this.tabs){
42115             this.initTabs();
42116         }else{
42117             this.initPanelAsTab(panel);
42118         }
42119         
42120         
42121         if(panel.background !== true){
42122             this.tabs.activate(panel.getEl().id);
42123         }
42124         this.fireEvent("paneladded", this, panel);
42125         return panel;
42126     },
42127
42128     /**
42129      * Hides the tab for the specified panel.
42130      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
42131      */
42132     hidePanel : function(panel){
42133         if(this.tabs && (panel = this.getPanel(panel))){
42134             this.tabs.hideTab(panel.getEl().id);
42135         }
42136     },
42137
42138     /**
42139      * Unhides the tab for a previously hidden panel.
42140      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
42141      */
42142     unhidePanel : function(panel){
42143         if(this.tabs && (panel = this.getPanel(panel))){
42144             this.tabs.unhideTab(panel.getEl().id);
42145         }
42146     },
42147
42148     clearPanels : function(){
42149         while(this.panels.getCount() > 0){
42150              this.remove(this.panels.first());
42151         }
42152     },
42153
42154     /**
42155      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
42156      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
42157      * @param {Boolean} preservePanel Overrides the config preservePanel option
42158      * @return {Roo.ContentPanel} The panel that was removed
42159      */
42160     remove : function(panel, preservePanel)
42161     {
42162         panel = this.getPanel(panel);
42163         if(!panel){
42164             return null;
42165         }
42166         var e = {};
42167         this.fireEvent("beforeremove", this, panel, e);
42168         if(e.cancel === true){
42169             return null;
42170         }
42171         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
42172         var panelId = panel.getId();
42173         this.panels.removeKey(panelId);
42174         if(preservePanel){
42175             document.body.appendChild(panel.getEl().dom);
42176         }
42177         if(this.tabs){
42178             this.tabs.removeTab(panel.getEl().id);
42179         }else if (!preservePanel){
42180             this.bodyEl.dom.removeChild(panel.getEl().dom);
42181         }
42182         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
42183             var p = this.panels.first();
42184             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
42185             tempEl.appendChild(p.getEl().dom);
42186             this.bodyEl.update("");
42187             this.bodyEl.dom.appendChild(p.getEl().dom);
42188             tempEl = null;
42189             this.updateTitle(p.getTitle());
42190             this.tabs = null;
42191             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
42192             this.setActivePanel(p);
42193         }
42194         panel.setRegion(null);
42195         if(this.activePanel == panel){
42196             this.activePanel = null;
42197         }
42198         if(this.config.autoDestroy !== false && preservePanel !== true){
42199             try{panel.destroy();}catch(e){}
42200         }
42201         this.fireEvent("panelremoved", this, panel);
42202         return panel;
42203     },
42204
42205     /**
42206      * Returns the TabPanel component used by this region
42207      * @return {Roo.TabPanel}
42208      */
42209     getTabs : function(){
42210         return this.tabs;
42211     },
42212
42213     createTool : function(parentEl, className){
42214         var btn = Roo.DomHelper.append(parentEl, {
42215             tag: "div",
42216             cls: "x-layout-tools-button",
42217             children: [ {
42218                 tag: "div",
42219                 cls: "roo-layout-tools-button-inner " + className,
42220                 html: "&#160;"
42221             }]
42222         }, true);
42223         btn.addClassOnOver("roo-layout-tools-button-over");
42224         return btn;
42225     }
42226 });/*
42227  * Based on:
42228  * Ext JS Library 1.1.1
42229  * Copyright(c) 2006-2007, Ext JS, LLC.
42230  *
42231  * Originally Released Under LGPL - original licence link has changed is not relivant.
42232  *
42233  * Fork - LGPL
42234  * <script type="text/javascript">
42235  */
42236  
42237
42238
42239 /**
42240  * @class Roo.SplitLayoutRegion
42241  * @extends Roo.LayoutRegion
42242  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
42243  */
42244 Roo.bootstrap.layout.Split = function(config){
42245     this.cursor = config.cursor;
42246     Roo.bootstrap.layout.Split.superclass.constructor.call(this, config);
42247 };
42248
42249 Roo.extend(Roo.bootstrap.layout.Split, Roo.bootstrap.layout.Region,
42250 {
42251     splitTip : "Drag to resize.",
42252     collapsibleSplitTip : "Drag to resize. Double click to hide.",
42253     useSplitTips : false,
42254
42255     applyConfig : function(config){
42256         Roo.bootstrap.layout.Split.superclass.applyConfig.call(this, config);
42257     },
42258     
42259     onRender : function(ctr,pos) {
42260         
42261         Roo.bootstrap.layout.Split.superclass.onRender.call(this, ctr,pos);
42262         if(!this.config.split){
42263             return;
42264         }
42265         if(!this.split){
42266             
42267             var splitEl = Roo.DomHelper.append(ctr.dom,  {
42268                             tag: "div",
42269                             id: this.el.id + "-split",
42270                             cls: "roo-layout-split roo-layout-split-"+this.position,
42271                             html: "&#160;"
42272             });
42273             /** The SplitBar for this region 
42274             * @type Roo.SplitBar */
42275             // does not exist yet...
42276             Roo.log([this.position, this.orientation]);
42277             
42278             this.split = new Roo.bootstrap.SplitBar({
42279                 dragElement : splitEl,
42280                 resizingElement: this.el,
42281                 orientation : this.orientation
42282             });
42283             
42284             this.split.on("moved", this.onSplitMove, this);
42285             this.split.useShim = this.config.useShim === true;
42286             this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
42287             if(this.useSplitTips){
42288                 this.split.el.dom.title = this.config.collapsible ? this.collapsibleSplitTip : this.splitTip;
42289             }
42290             //if(config.collapsible){
42291             //    this.split.el.on("dblclick", this.collapse,  this);
42292             //}
42293         }
42294         if(typeof this.config.minSize != "undefined"){
42295             this.split.minSize = this.config.minSize;
42296         }
42297         if(typeof this.config.maxSize != "undefined"){
42298             this.split.maxSize = this.config.maxSize;
42299         }
42300         if(this.config.hideWhenEmpty || this.config.hidden || this.config.collapsed){
42301             this.hideSplitter();
42302         }
42303         
42304     },
42305
42306     getHMaxSize : function(){
42307          var cmax = this.config.maxSize || 10000;
42308          var center = this.mgr.getRegion("center");
42309          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
42310     },
42311
42312     getVMaxSize : function(){
42313          var cmax = this.config.maxSize || 10000;
42314          var center = this.mgr.getRegion("center");
42315          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
42316     },
42317
42318     onSplitMove : function(split, newSize){
42319         this.fireEvent("resized", this, newSize);
42320     },
42321     
42322     /** 
42323      * Returns the {@link Roo.SplitBar} for this region.
42324      * @return {Roo.SplitBar}
42325      */
42326     getSplitBar : function(){
42327         return this.split;
42328     },
42329     
42330     hide : function(){
42331         this.hideSplitter();
42332         Roo.bootstrap.layout.Split.superclass.hide.call(this);
42333     },
42334
42335     hideSplitter : function(){
42336         if(this.split){
42337             this.split.el.setLocation(-2000,-2000);
42338             this.split.el.hide();
42339         }
42340     },
42341
42342     show : function(){
42343         if(this.split){
42344             this.split.el.show();
42345         }
42346         Roo.bootstrap.layout.Split.superclass.show.call(this);
42347     },
42348     
42349     beforeSlide: function(){
42350         if(Roo.isGecko){// firefox overflow auto bug workaround
42351             this.bodyEl.clip();
42352             if(this.tabs) {
42353                 this.tabs.bodyEl.clip();
42354             }
42355             if(this.activePanel){
42356                 this.activePanel.getEl().clip();
42357                 
42358                 if(this.activePanel.beforeSlide){
42359                     this.activePanel.beforeSlide();
42360                 }
42361             }
42362         }
42363     },
42364     
42365     afterSlide : function(){
42366         if(Roo.isGecko){// firefox overflow auto bug workaround
42367             this.bodyEl.unclip();
42368             if(this.tabs) {
42369                 this.tabs.bodyEl.unclip();
42370             }
42371             if(this.activePanel){
42372                 this.activePanel.getEl().unclip();
42373                 if(this.activePanel.afterSlide){
42374                     this.activePanel.afterSlide();
42375                 }
42376             }
42377         }
42378     },
42379
42380     initAutoHide : function(){
42381         if(this.autoHide !== false){
42382             if(!this.autoHideHd){
42383                 var st = new Roo.util.DelayedTask(this.slideIn, this);
42384                 this.autoHideHd = {
42385                     "mouseout": function(e){
42386                         if(!e.within(this.el, true)){
42387                             st.delay(500);
42388                         }
42389                     },
42390                     "mouseover" : function(e){
42391                         st.cancel();
42392                     },
42393                     scope : this
42394                 };
42395             }
42396             this.el.on(this.autoHideHd);
42397         }
42398     },
42399
42400     clearAutoHide : function(){
42401         if(this.autoHide !== false){
42402             this.el.un("mouseout", this.autoHideHd.mouseout);
42403             this.el.un("mouseover", this.autoHideHd.mouseover);
42404         }
42405     },
42406
42407     clearMonitor : function(){
42408         Roo.get(document).un("click", this.slideInIf, this);
42409     },
42410
42411     // these names are backwards but not changed for compat
42412     slideOut : function(){
42413         if(this.isSlid || this.el.hasActiveFx()){
42414             return;
42415         }
42416         this.isSlid = true;
42417         if(this.collapseBtn){
42418             this.collapseBtn.hide();
42419         }
42420         this.closeBtnState = this.closeBtn.getStyle('display');
42421         this.closeBtn.hide();
42422         if(this.stickBtn){
42423             this.stickBtn.show();
42424         }
42425         this.el.show();
42426         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
42427         this.beforeSlide();
42428         this.el.setStyle("z-index", 10001);
42429         this.el.slideIn(this.getSlideAnchor(), {
42430             callback: function(){
42431                 this.afterSlide();
42432                 this.initAutoHide();
42433                 Roo.get(document).on("click", this.slideInIf, this);
42434                 this.fireEvent("slideshow", this);
42435             },
42436             scope: this,
42437             block: true
42438         });
42439     },
42440
42441     afterSlideIn : function(){
42442         this.clearAutoHide();
42443         this.isSlid = false;
42444         this.clearMonitor();
42445         this.el.setStyle("z-index", "");
42446         if(this.collapseBtn){
42447             this.collapseBtn.show();
42448         }
42449         this.closeBtn.setStyle('display', this.closeBtnState);
42450         if(this.stickBtn){
42451             this.stickBtn.hide();
42452         }
42453         this.fireEvent("slidehide", this);
42454     },
42455
42456     slideIn : function(cb){
42457         if(!this.isSlid || this.el.hasActiveFx()){
42458             Roo.callback(cb);
42459             return;
42460         }
42461         this.isSlid = false;
42462         this.beforeSlide();
42463         this.el.slideOut(this.getSlideAnchor(), {
42464             callback: function(){
42465                 this.el.setLeftTop(-10000, -10000);
42466                 this.afterSlide();
42467                 this.afterSlideIn();
42468                 Roo.callback(cb);
42469             },
42470             scope: this,
42471             block: true
42472         });
42473     },
42474     
42475     slideInIf : function(e){
42476         if(!e.within(this.el)){
42477             this.slideIn();
42478         }
42479     },
42480
42481     animateCollapse : function(){
42482         this.beforeSlide();
42483         this.el.setStyle("z-index", 20000);
42484         var anchor = this.getSlideAnchor();
42485         this.el.slideOut(anchor, {
42486             callback : function(){
42487                 this.el.setStyle("z-index", "");
42488                 this.collapsedEl.slideIn(anchor, {duration:.3});
42489                 this.afterSlide();
42490                 this.el.setLocation(-10000,-10000);
42491                 this.el.hide();
42492                 this.fireEvent("collapsed", this);
42493             },
42494             scope: this,
42495             block: true
42496         });
42497     },
42498
42499     animateExpand : function(){
42500         this.beforeSlide();
42501         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
42502         this.el.setStyle("z-index", 20000);
42503         this.collapsedEl.hide({
42504             duration:.1
42505         });
42506         this.el.slideIn(this.getSlideAnchor(), {
42507             callback : function(){
42508                 this.el.setStyle("z-index", "");
42509                 this.afterSlide();
42510                 if(this.split){
42511                     this.split.el.show();
42512                 }
42513                 this.fireEvent("invalidated", this);
42514                 this.fireEvent("expanded", this);
42515             },
42516             scope: this,
42517             block: true
42518         });
42519     },
42520
42521     anchors : {
42522         "west" : "left",
42523         "east" : "right",
42524         "north" : "top",
42525         "south" : "bottom"
42526     },
42527
42528     sanchors : {
42529         "west" : "l",
42530         "east" : "r",
42531         "north" : "t",
42532         "south" : "b"
42533     },
42534
42535     canchors : {
42536         "west" : "tl-tr",
42537         "east" : "tr-tl",
42538         "north" : "tl-bl",
42539         "south" : "bl-tl"
42540     },
42541
42542     getAnchor : function(){
42543         return this.anchors[this.position];
42544     },
42545
42546     getCollapseAnchor : function(){
42547         return this.canchors[this.position];
42548     },
42549
42550     getSlideAnchor : function(){
42551         return this.sanchors[this.position];
42552     },
42553
42554     getAlignAdj : function(){
42555         var cm = this.cmargins;
42556         switch(this.position){
42557             case "west":
42558                 return [0, 0];
42559             break;
42560             case "east":
42561                 return [0, 0];
42562             break;
42563             case "north":
42564                 return [0, 0];
42565             break;
42566             case "south":
42567                 return [0, 0];
42568             break;
42569         }
42570     },
42571
42572     getExpandAdj : function(){
42573         var c = this.collapsedEl, cm = this.cmargins;
42574         switch(this.position){
42575             case "west":
42576                 return [-(cm.right+c.getWidth()+cm.left), 0];
42577             break;
42578             case "east":
42579                 return [cm.right+c.getWidth()+cm.left, 0];
42580             break;
42581             case "north":
42582                 return [0, -(cm.top+cm.bottom+c.getHeight())];
42583             break;
42584             case "south":
42585                 return [0, cm.top+cm.bottom+c.getHeight()];
42586             break;
42587         }
42588     }
42589 });/*
42590  * Based on:
42591  * Ext JS Library 1.1.1
42592  * Copyright(c) 2006-2007, Ext JS, LLC.
42593  *
42594  * Originally Released Under LGPL - original licence link has changed is not relivant.
42595  *
42596  * Fork - LGPL
42597  * <script type="text/javascript">
42598  */
42599 /*
42600  * These classes are private internal classes
42601  */
42602 Roo.bootstrap.layout.Center = function(config){
42603     config.region = "center";
42604     Roo.bootstrap.layout.Region.call(this, config);
42605     this.visible = true;
42606     this.minWidth = config.minWidth || 20;
42607     this.minHeight = config.minHeight || 20;
42608 };
42609
42610 Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, {
42611     hide : function(){
42612         // center panel can't be hidden
42613     },
42614     
42615     show : function(){
42616         // center panel can't be hidden
42617     },
42618     
42619     getMinWidth: function(){
42620         return this.minWidth;
42621     },
42622     
42623     getMinHeight: function(){
42624         return this.minHeight;
42625     }
42626 });
42627
42628
42629
42630
42631  
42632
42633
42634
42635
42636
42637
42638 Roo.bootstrap.layout.North = function(config)
42639 {
42640     config.region = 'north';
42641     config.cursor = 'n-resize';
42642     
42643     Roo.bootstrap.layout.Split.call(this, config);
42644     
42645     
42646     if(this.split){
42647         this.split.placement = Roo.bootstrap.SplitBar.TOP;
42648         this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
42649         this.split.el.addClass("roo-layout-split-v");
42650     }
42651     //var size = config.initialSize || config.height;
42652     //if(this.el && typeof size != "undefined"){
42653     //    this.el.setHeight(size);
42654     //}
42655 };
42656 Roo.extend(Roo.bootstrap.layout.North, Roo.bootstrap.layout.Split,
42657 {
42658     orientation: Roo.bootstrap.SplitBar.VERTICAL,
42659      
42660      
42661     onRender : function(ctr, pos)
42662     {
42663         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
42664         var size = this.config.initialSize || this.config.height;
42665         if(this.el && typeof size != "undefined"){
42666             this.el.setHeight(size);
42667         }
42668     
42669     },
42670     
42671     getBox : function(){
42672         if(this.collapsed){
42673             return this.collapsedEl.getBox();
42674         }
42675         var box = this.el.getBox();
42676         if(this.split){
42677             box.height += this.split.el.getHeight();
42678         }
42679         return box;
42680     },
42681     
42682     updateBox : function(box){
42683         if(this.split && !this.collapsed){
42684             box.height -= this.split.el.getHeight();
42685             this.split.el.setLeft(box.x);
42686             this.split.el.setTop(box.y+box.height);
42687             this.split.el.setWidth(box.width);
42688         }
42689         if(this.collapsed){
42690             this.updateBody(box.width, null);
42691         }
42692         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
42693     }
42694 });
42695
42696
42697
42698
42699
42700 Roo.bootstrap.layout.South = function(config){
42701     config.region = 'south';
42702     config.cursor = 's-resize';
42703     Roo.bootstrap.layout.Split.call(this, config);
42704     if(this.split){
42705         this.split.placement = Roo.bootstrap.SplitBar.BOTTOM;
42706         this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
42707         this.split.el.addClass("roo-layout-split-v");
42708     }
42709     
42710 };
42711
42712 Roo.extend(Roo.bootstrap.layout.South, Roo.bootstrap.layout.Split, {
42713     orientation: Roo.bootstrap.SplitBar.VERTICAL,
42714     
42715     onRender : function(ctr, pos)
42716     {
42717         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
42718         var size = this.config.initialSize || this.config.height;
42719         if(this.el && typeof size != "undefined"){
42720             this.el.setHeight(size);
42721         }
42722     
42723     },
42724     
42725     getBox : function(){
42726         if(this.collapsed){
42727             return this.collapsedEl.getBox();
42728         }
42729         var box = this.el.getBox();
42730         if(this.split){
42731             var sh = this.split.el.getHeight();
42732             box.height += sh;
42733             box.y -= sh;
42734         }
42735         return box;
42736     },
42737     
42738     updateBox : function(box){
42739         if(this.split && !this.collapsed){
42740             var sh = this.split.el.getHeight();
42741             box.height -= sh;
42742             box.y += sh;
42743             this.split.el.setLeft(box.x);
42744             this.split.el.setTop(box.y-sh);
42745             this.split.el.setWidth(box.width);
42746         }
42747         if(this.collapsed){
42748             this.updateBody(box.width, null);
42749         }
42750         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
42751     }
42752 });
42753
42754 Roo.bootstrap.layout.East = function(config){
42755     config.region = "east";
42756     config.cursor = "e-resize";
42757     Roo.bootstrap.layout.Split.call(this, config);
42758     if(this.split){
42759         this.split.placement = Roo.bootstrap.SplitBar.RIGHT;
42760         this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
42761         this.split.el.addClass("roo-layout-split-h");
42762     }
42763     
42764 };
42765 Roo.extend(Roo.bootstrap.layout.East, Roo.bootstrap.layout.Split, {
42766     orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
42767     
42768     onRender : function(ctr, pos)
42769     {
42770         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
42771         var size = this.config.initialSize || this.config.width;
42772         if(this.el && typeof size != "undefined"){
42773             this.el.setWidth(size);
42774         }
42775     
42776     },
42777     
42778     getBox : function(){
42779         if(this.collapsed){
42780             return this.collapsedEl.getBox();
42781         }
42782         var box = this.el.getBox();
42783         if(this.split){
42784             var sw = this.split.el.getWidth();
42785             box.width += sw;
42786             box.x -= sw;
42787         }
42788         return box;
42789     },
42790
42791     updateBox : function(box){
42792         if(this.split && !this.collapsed){
42793             var sw = this.split.el.getWidth();
42794             box.width -= sw;
42795             this.split.el.setLeft(box.x);
42796             this.split.el.setTop(box.y);
42797             this.split.el.setHeight(box.height);
42798             box.x += sw;
42799         }
42800         if(this.collapsed){
42801             this.updateBody(null, box.height);
42802         }
42803         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
42804     }
42805 });
42806
42807 Roo.bootstrap.layout.West = function(config){
42808     config.region = "west";
42809     config.cursor = "w-resize";
42810     
42811     Roo.bootstrap.layout.Split.call(this, config);
42812     if(this.split){
42813         this.split.placement = Roo.bootstrap.SplitBar.LEFT;
42814         this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
42815         this.split.el.addClass("roo-layout-split-h");
42816     }
42817     
42818 };
42819 Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, {
42820     orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
42821     
42822     onRender: function(ctr, pos)
42823     {
42824         Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos);
42825         var size = this.config.initialSize || this.config.width;
42826         if(typeof size != "undefined"){
42827             this.el.setWidth(size);
42828         }
42829     },
42830     
42831     getBox : function(){
42832         if(this.collapsed){
42833             return this.collapsedEl.getBox();
42834         }
42835         var box = this.el.getBox();
42836         if (box.width == 0) {
42837             box.width = this.config.width; // kludge?
42838         }
42839         if(this.split){
42840             box.width += this.split.el.getWidth();
42841         }
42842         return box;
42843     },
42844     
42845     updateBox : function(box){
42846         if(this.split && !this.collapsed){
42847             var sw = this.split.el.getWidth();
42848             box.width -= sw;
42849             this.split.el.setLeft(box.x+box.width);
42850             this.split.el.setTop(box.y);
42851             this.split.el.setHeight(box.height);
42852         }
42853         if(this.collapsed){
42854             this.updateBody(null, box.height);
42855         }
42856         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
42857     }
42858 });/*
42859  * Based on:
42860  * Ext JS Library 1.1.1
42861  * Copyright(c) 2006-2007, Ext JS, LLC.
42862  *
42863  * Originally Released Under LGPL - original licence link has changed is not relivant.
42864  *
42865  * Fork - LGPL
42866  * <script type="text/javascript">
42867  */
42868 /**
42869  * @class Roo.bootstrap.paenl.Content
42870  * @extends Roo.util.Observable
42871  * @children Roo.bootstrap.Component
42872  * @parent builder Roo.bootstrap.layout.Border
42873  * A basic ContentPanel element. - a panel that contain any content (eg. forms etc.)
42874  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
42875  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
42876  * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
42877  * @cfg {Boolean}   closable      True if the panel can be closed/removed
42878  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
42879  * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
42880  * @cfg {Toolbar}   toolbar       A toolbar for this panel
42881  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
42882  * @cfg {String} title          The title for this panel
42883  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
42884  * @cfg {String} url            Calls {@link #setUrl} with this value
42885  * @cfg {String} region  [required] (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
42886  * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
42887  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
42888  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
42889  * @cfg {Boolean} iframe      contents are an iframe - makes showing remote sources/CSS feasible..
42890  * @cfg {Boolean} badges render the badges
42891  * @cfg {String} cls  extra classes to use  
42892  * @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
42893  
42894  * @constructor
42895  * Create a new ContentPanel.
42896  * @param {String/Object} config A string to set only the title or a config object
42897  
42898  */
42899 Roo.bootstrap.panel.Content = function( config){
42900     
42901     this.tpl = config.tpl || false;
42902     
42903     var el = config.el;
42904     var content = config.content;
42905
42906     if(config.autoCreate){ // xtype is available if this is called from factory
42907         el = Roo.id();
42908     }
42909     this.el = Roo.get(el);
42910     if(!this.el && config && config.autoCreate){
42911         if(typeof config.autoCreate == "object"){
42912             if(!config.autoCreate.id){
42913                 config.autoCreate.id = config.id||el;
42914             }
42915             this.el = Roo.DomHelper.append(document.body,
42916                         config.autoCreate, true);
42917         }else{
42918             var elcfg =  {
42919                 tag: "div",
42920                 cls: (config.cls || '') +
42921                     (config.background ? ' bg-' + config.background : '') +
42922                     " roo-layout-inactive-content",
42923                 id: config.id||el
42924             };
42925             if (config.iframe) {
42926                 elcfg.cn = [
42927                     {
42928                         tag : 'iframe',
42929                         style : 'border: 0px',
42930                         src : 'about:blank'
42931                     }
42932                 ];
42933             }
42934               
42935             if (config.html) {
42936                 elcfg.html = config.html;
42937                 
42938             }
42939                         
42940             this.el = Roo.DomHelper.append(document.body, elcfg , true);
42941             if (config.iframe) {
42942                 this.iframeEl = this.el.select('iframe',true).first();
42943             }
42944             
42945         }
42946     } 
42947     this.closable = false;
42948     this.loaded = false;
42949     this.active = false;
42950    
42951       
42952     if (config.toolbar && !config.toolbar.el && config.toolbar.xtype) {
42953         
42954         this.toolbar = new config.toolbar.xns[config.toolbar.xtype](config.toolbar);
42955         
42956         this.wrapEl = this.el; //this.el.wrap();
42957         var ti = [];
42958         if (config.toolbar.items) {
42959             ti = config.toolbar.items ;
42960             delete config.toolbar.items ;
42961         }
42962         
42963         var nitems = [];
42964         this.toolbar.render(this.wrapEl, 'before');
42965         for(var i =0;i < ti.length;i++) {
42966           //  Roo.log(['add child', items[i]]);
42967             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
42968         }
42969         this.toolbar.items = nitems;
42970         this.toolbar.el.insertBefore(this.wrapEl.dom.firstChild);
42971         delete config.toolbar;
42972         
42973     }
42974     /*
42975     // xtype created footer. - not sure if will work as we normally have to render first..
42976     if (this.footer && !this.footer.el && this.footer.xtype) {
42977         if (!this.wrapEl) {
42978             this.wrapEl = this.el.wrap();
42979         }
42980     
42981         this.footer.container = this.wrapEl.createChild();
42982          
42983         this.footer = Roo.factory(this.footer, Roo);
42984         
42985     }
42986     */
42987     
42988      if(typeof config == "string"){
42989         this.title = config;
42990     }else{
42991         Roo.apply(this, config);
42992     }
42993     
42994     if(this.resizeEl){
42995         this.resizeEl = Roo.get(this.resizeEl, true);
42996     }else{
42997         this.resizeEl = this.el;
42998     }
42999     // handle view.xtype
43000     
43001  
43002     
43003     
43004     this.addEvents({
43005         /**
43006          * @event activate
43007          * Fires when this panel is activated. 
43008          * @param {Roo.ContentPanel} this
43009          */
43010         "activate" : true,
43011         /**
43012          * @event deactivate
43013          * Fires when this panel is activated. 
43014          * @param {Roo.ContentPanel} this
43015          */
43016         "deactivate" : true,
43017
43018         /**
43019          * @event resize
43020          * Fires when this panel is resized if fitToFrame is true.
43021          * @param {Roo.ContentPanel} this
43022          * @param {Number} width The width after any component adjustments
43023          * @param {Number} height The height after any component adjustments
43024          */
43025         "resize" : true,
43026         
43027          /**
43028          * @event render
43029          * Fires when this tab is created
43030          * @param {Roo.ContentPanel} this
43031          */
43032         "render" : true,
43033         
43034           /**
43035          * @event scroll
43036          * Fires when this content is scrolled
43037          * @param {Roo.ContentPanel} this
43038          * @param {Event} scrollEvent
43039          */
43040         "scroll" : true
43041         
43042         
43043         
43044     });
43045     
43046
43047     
43048     
43049     if(this.autoScroll && !this.iframe){
43050         this.resizeEl.setStyle("overflow", "auto");
43051         this.resizeEl.on('scroll', this.onScroll, this);
43052     } else {
43053         // fix randome scrolling
43054         //this.el.on('scroll', function() {
43055         //    Roo.log('fix random scolling');
43056         //    this.scrollTo('top',0); 
43057         //});
43058     }
43059     content = content || this.content;
43060     if(content){
43061         this.setContent(content);
43062     }
43063     if(config && config.url){
43064         this.setUrl(this.url, this.params, this.loadOnce);
43065     }
43066     
43067     
43068     
43069     Roo.bootstrap.panel.Content.superclass.constructor.call(this);
43070     
43071     if (this.view && typeof(this.view.xtype) != 'undefined') {
43072         this.view.el = this.el.appendChild(document.createElement("div"));
43073         this.view = Roo.factory(this.view); 
43074         this.view.render  &&  this.view.render(false, '');  
43075     }
43076     
43077     
43078     this.fireEvent('render', this);
43079 };
43080
43081 Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, {
43082     
43083     cls : '',
43084     background : '',
43085     
43086     tabTip : '',
43087     
43088     iframe : false,
43089     iframeEl : false,
43090     
43091     /* Resize Element - use this to work out scroll etc. */
43092     resizeEl : false,
43093     
43094     setRegion : function(region){
43095         this.region = region;
43096         this.setActiveClass(region && !this.background);
43097     },
43098     
43099     
43100     setActiveClass: function(state)
43101     {
43102         if(state){
43103            this.el.replaceClass("roo-layout-inactive-content", "roo-layout-active-content");
43104            this.el.setStyle('position','relative');
43105         }else{
43106            this.el.replaceClass("roo-layout-active-content", "roo-layout-inactive-content");
43107            this.el.setStyle('position', 'absolute');
43108         } 
43109     },
43110     
43111     /**
43112      * Returns the toolbar for this Panel if one was configured. 
43113      * @return {Roo.Toolbar} 
43114      */
43115     getToolbar : function(){
43116         return this.toolbar;
43117     },
43118     
43119     setActiveState : function(active)
43120     {
43121         this.active = active;
43122         this.setActiveClass(active);
43123         if(!active){
43124             if(this.fireEvent("deactivate", this) === false){
43125                 return false;
43126             }
43127             return true;
43128         }
43129         this.fireEvent("activate", this);
43130         return true;
43131     },
43132     /**
43133      * Updates this panel's element (not for iframe)
43134      * @param {String} content The new content
43135      * @param {Boolean} loadScripts (optional) true to look for and process scripts
43136     */
43137     setContent : function(content, loadScripts){
43138         if (this.iframe) {
43139             return;
43140         }
43141         
43142         this.el.update(content, loadScripts);
43143     },
43144
43145     ignoreResize : function(w, h)
43146     {
43147         //return false; // always resize?
43148         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
43149             return true;
43150         }else{
43151             this.lastSize = {width: w, height: h};
43152             return false;
43153         }
43154     },
43155     /**
43156      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
43157      * @return {Roo.UpdateManager} The UpdateManager
43158      */
43159     getUpdateManager : function(){
43160         if (this.iframe) {
43161             return false;
43162         }
43163         return this.el.getUpdateManager();
43164     },
43165      /**
43166      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
43167      * Does not work with IFRAME contents
43168      * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
43169 <pre><code>
43170 panel.load({
43171     url: "your-url.php",
43172     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
43173     callback: yourFunction,
43174     scope: yourObject, //(optional scope)
43175     discardUrl: false,
43176     nocache: false,
43177     text: "Loading...",
43178     timeout: 30,
43179     scripts: false
43180 });
43181 </code></pre>
43182      
43183      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
43184      * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
43185      * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
43186      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
43187      * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
43188      * @return {Roo.ContentPanel} this
43189      */
43190     load : function(){
43191         
43192         if (this.iframe) {
43193             return this;
43194         }
43195         
43196         var um = this.el.getUpdateManager();
43197         um.update.apply(um, arguments);
43198         return this;
43199     },
43200
43201
43202     /**
43203      * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
43204      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
43205      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
43206      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
43207      * @return {Roo.UpdateManager|Boolean} The UpdateManager or false if IFRAME
43208      */
43209     setUrl : function(url, params, loadOnce){
43210         if (this.iframe) {
43211             this.iframeEl.dom.src = url;
43212             return false;
43213         }
43214         
43215         if(this.refreshDelegate){
43216             this.removeListener("activate", this.refreshDelegate);
43217         }
43218         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
43219         this.on("activate", this.refreshDelegate);
43220         return this.el.getUpdateManager();
43221     },
43222     
43223     _handleRefresh : function(url, params, loadOnce){
43224         if(!loadOnce || !this.loaded){
43225             var updater = this.el.getUpdateManager();
43226             updater.update(url, params, this._setLoaded.createDelegate(this));
43227         }
43228     },
43229     
43230     _setLoaded : function(){
43231         this.loaded = true;
43232     }, 
43233     
43234     /**
43235      * Returns this panel's id
43236      * @return {String} 
43237      */
43238     getId : function(){
43239         return this.el.id;
43240     },
43241     
43242     /** 
43243      * Returns this panel's element - used by regiosn to add.
43244      * @return {Roo.Element} 
43245      */
43246     getEl : function(){
43247         return this.wrapEl || this.el;
43248     },
43249     
43250    
43251     
43252     adjustForComponents : function(width, height)
43253     {
43254         //Roo.log('adjustForComponents ');
43255         if(this.resizeEl != this.el){
43256             width -= this.el.getFrameWidth('lr');
43257             height -= this.el.getFrameWidth('tb');
43258         }
43259         if(this.toolbar){
43260             var te = this.toolbar.getEl();
43261             te.setWidth(width);
43262             height -= te.getHeight();
43263         }
43264         if(this.footer){
43265             var te = this.footer.getEl();
43266             te.setWidth(width);
43267             height -= te.getHeight();
43268         }
43269         
43270         
43271         if(this.adjustments){
43272             width += this.adjustments[0];
43273             height += this.adjustments[1];
43274         }
43275         return {"width": width, "height": height};
43276     },
43277     
43278     setSize : function(width, height){
43279         if(this.fitToFrame && !this.ignoreResize(width, height)){
43280             if(this.fitContainer && this.resizeEl != this.el){
43281                 this.el.setSize(width, height);
43282             }
43283             var size = this.adjustForComponents(width, height);
43284             if (this.iframe) {
43285                 this.iframeEl.setSize(width,height);
43286             }
43287             
43288             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
43289             this.fireEvent('resize', this, size.width, size.height);
43290             
43291             
43292         }
43293     },
43294     
43295     /**
43296      * Returns this panel's title
43297      * @return {String} 
43298      */
43299     getTitle : function(){
43300         
43301         if (typeof(this.title) != 'object') {
43302             return this.title;
43303         }
43304         
43305         var t = '';
43306         for (var k in this.title) {
43307             if (!this.title.hasOwnProperty(k)) {
43308                 continue;
43309             }
43310             
43311             if (k.indexOf('-') >= 0) {
43312                 var s = k.split('-');
43313                 for (var i = 0; i<s.length; i++) {
43314                     t += "<span class='visible-"+s[i]+"'>"+this.title[k]+"</span>";
43315                 }
43316             } else {
43317                 t += "<span class='visible-"+k+"'>"+this.title[k]+"</span>";
43318             }
43319         }
43320         return t;
43321     },
43322     
43323     /**
43324      * Set this panel's title
43325      * @param {String} title
43326      */
43327     setTitle : function(title){
43328         this.title = title;
43329         if(this.region){
43330             this.region.updatePanelTitle(this, title);
43331         }
43332     },
43333     
43334     /**
43335      * Returns true is this panel was configured to be closable
43336      * @return {Boolean} 
43337      */
43338     isClosable : function(){
43339         return this.closable;
43340     },
43341     
43342     beforeSlide : function(){
43343         this.el.clip();
43344         this.resizeEl.clip();
43345     },
43346     
43347     afterSlide : function(){
43348         this.el.unclip();
43349         this.resizeEl.unclip();
43350     },
43351     
43352     /**
43353      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
43354      *   Will fail silently if the {@link #setUrl} method has not been called.
43355      *   This does not activate the panel, just updates its content.
43356      */
43357     refresh : function(){
43358         if(this.refreshDelegate){
43359            this.loaded = false;
43360            this.refreshDelegate();
43361         }
43362     },
43363     
43364     /**
43365      * Destroys this panel
43366      */
43367     destroy : function(){
43368         this.el.removeAllListeners();
43369         var tempEl = document.createElement("span");
43370         tempEl.appendChild(this.el.dom);
43371         tempEl.innerHTML = "";
43372         this.el.remove();
43373         this.el = null;
43374     },
43375     
43376     /**
43377      * form - if the content panel contains a form - this is a reference to it.
43378      * @type {Roo.form.Form}
43379      */
43380     form : false,
43381     /**
43382      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
43383      *    This contains a reference to it.
43384      * @type {Roo.View}
43385      */
43386     view : false,
43387     
43388       /**
43389      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
43390      * <pre><code>
43391
43392 layout.addxtype({
43393        xtype : 'Form',
43394        items: [ .... ]
43395    }
43396 );
43397
43398 </code></pre>
43399      * @param {Object} cfg Xtype definition of item to add.
43400      */
43401     
43402     
43403     getChildContainer: function () {
43404         return this.getEl();
43405     },
43406     
43407     
43408     onScroll : function(e)
43409     {
43410         this.fireEvent('scroll', this, e);
43411     }
43412     
43413     
43414     /*
43415         var  ret = new Roo.factory(cfg);
43416         return ret;
43417         
43418         
43419         // add form..
43420         if (cfg.xtype.match(/^Form$/)) {
43421             
43422             var el;
43423             //if (this.footer) {
43424             //    el = this.footer.container.insertSibling(false, 'before');
43425             //} else {
43426                 el = this.el.createChild();
43427             //}
43428
43429             this.form = new  Roo.form.Form(cfg);
43430             
43431             
43432             if ( this.form.allItems.length) {
43433                 this.form.render(el.dom);
43434             }
43435             return this.form;
43436         }
43437         // should only have one of theses..
43438         if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
43439             // views.. should not be just added - used named prop 'view''
43440             
43441             cfg.el = this.el.appendChild(document.createElement("div"));
43442             // factory?
43443             
43444             var ret = new Roo.factory(cfg);
43445              
43446              ret.render && ret.render(false, ''); // render blank..
43447             this.view = ret;
43448             return ret;
43449         }
43450         return false;
43451     }
43452     \*/
43453 });
43454  
43455 /**
43456  * @class Roo.bootstrap.panel.Grid
43457  * @extends Roo.bootstrap.panel.Content
43458  * @constructor
43459  * Create a new GridPanel.
43460  * @cfg {Roo.bootstrap.Table} grid The grid for this panel
43461  * @cfg {Roo.bootstrap.nav.Simplebar} toolbar the toolbar at the top of the grid.
43462  * @param {Object} config A the config object
43463   
43464  */
43465
43466
43467
43468 Roo.bootstrap.panel.Grid = function(config)
43469 {
43470     
43471       
43472     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
43473         {tag: "div", cls: "roo-layout-grid-wrapper roo-layout-inactive-content"}, true);
43474
43475     config.el = this.wrapper;
43476     //this.el = this.wrapper;
43477     
43478       if (config.container) {
43479         // ctor'ed from a Border/panel.grid
43480         
43481         
43482         this.wrapper.setStyle("overflow", "hidden");
43483         this.wrapper.addClass('roo-grid-container');
43484
43485     }
43486     
43487     
43488     if(config.toolbar){
43489         var tool_el = this.wrapper.createChild();    
43490         this.toolbar = Roo.factory(config.toolbar);
43491         var ti = [];
43492         if (config.toolbar.items) {
43493             ti = config.toolbar.items ;
43494             delete config.toolbar.items ;
43495         }
43496         
43497         var nitems = [];
43498         this.toolbar.render(tool_el);
43499         for(var i =0;i < ti.length;i++) {
43500           //  Roo.log(['add child', items[i]]);
43501             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
43502         }
43503         this.toolbar.items = nitems;
43504         
43505         delete config.toolbar;
43506     }
43507     
43508     Roo.bootstrap.panel.Grid.superclass.constructor.call(this, config);
43509     config.grid.scrollBody = true;;
43510     config.grid.monitorWindowResize = false; // turn off autosizing
43511     config.grid.autoHeight = false;
43512     config.grid.autoWidth = false;
43513     
43514     this.grid = new config.grid.xns[config.grid.xtype](config.grid);
43515     
43516     if (config.background) {
43517         // render grid on panel activation (if panel background)
43518         this.on('activate', function(gp) {
43519             if (!gp.grid.rendered) {
43520                 gp.grid.render(this.wrapper);
43521                 gp.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");   
43522             }
43523         });
43524             
43525     } else {
43526         this.grid.render(this.wrapper);
43527         this.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");               
43528
43529     }
43530     //this.wrapper.dom.appendChild(config.grid.getGridEl().dom);
43531     // ??? needed ??? config.el = this.wrapper;
43532     
43533     
43534     
43535   
43536     // xtype created footer. - not sure if will work as we normally have to render first..
43537     if (this.footer && !this.footer.el && this.footer.xtype) {
43538         
43539         var ctr = this.grid.getView().getFooterPanel(true);
43540         this.footer.dataSource = this.grid.dataSource;
43541         this.footer = Roo.factory(this.footer, Roo);
43542         this.footer.render(ctr);
43543         
43544     }
43545     
43546     
43547     
43548     
43549      
43550 };
43551
43552 Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content,
43553 {
43554   
43555     getId : function(){
43556         return this.grid.id;
43557     },
43558     
43559     /**
43560      * Returns the grid for this panel
43561      * @return {Roo.bootstrap.Table} 
43562      */
43563     getGrid : function(){
43564         return this.grid;    
43565     },
43566     
43567     setSize : function(width, height)
43568     {
43569      
43570         //if(!this.ignoreResize(width, height)){
43571             var grid = this.grid;
43572             var size = this.adjustForComponents(width, height);
43573             // tfoot is not a footer?
43574           
43575             
43576             var gridel = grid.getGridEl();
43577             gridel.setSize(size.width, size.height);
43578             
43579             var tbd = grid.getGridEl().select('tbody', true).first();
43580             var thd = grid.getGridEl().select('thead',true).first();
43581             var tbf= grid.getGridEl().select('tfoot', true).first();
43582
43583             if (tbf) {
43584                 size.height -= tbf.getHeight();
43585             }
43586             if (thd) {
43587                 size.height -= thd.getHeight();
43588             }
43589             
43590             tbd.setSize(size.width, size.height );
43591             // this is for the account management tab -seems to work there.
43592             var thd = grid.getGridEl().select('thead',true).first();
43593             //if (tbd) {
43594             //    tbd.setSize(size.width, size.height - thd.getHeight());
43595             //}
43596              
43597             grid.autoSize();
43598         //}
43599    
43600     },
43601      
43602     
43603     
43604     beforeSlide : function(){
43605         this.grid.getView().scroller.clip();
43606     },
43607     
43608     afterSlide : function(){
43609         this.grid.getView().scroller.unclip();
43610     },
43611     
43612     destroy : function(){
43613         this.grid.destroy();
43614         delete this.grid;
43615         Roo.bootstrap.panel.Grid.superclass.destroy.call(this); 
43616     }
43617 });
43618
43619 /**
43620  * @class Roo.bootstrap.panel.Nest
43621  * @extends Roo.bootstrap.panel.Content
43622  * @constructor
43623  * Create a new Panel, that can contain a layout.Border.
43624  * 
43625  * 
43626  * @param {String/Object} config A string to set only the title or a config object
43627  */
43628 Roo.bootstrap.panel.Nest = function(config)
43629 {
43630     // construct with only one argument..
43631     /* FIXME - implement nicer consturctors
43632     if (layout.layout) {
43633         config = layout;
43634         layout = config.layout;
43635         delete config.layout;
43636     }
43637     if (layout.xtype && !layout.getEl) {
43638         // then layout needs constructing..
43639         layout = Roo.factory(layout, Roo);
43640     }
43641     */
43642     
43643     config.el =  config.layout.getEl();
43644     
43645     Roo.bootstrap.panel.Nest.superclass.constructor.call(this, config);
43646     
43647     config.layout.monitorWindowResize = false; // turn off autosizing
43648     this.layout = config.layout;
43649     this.layout.getEl().addClass("roo-layout-nested-layout");
43650     this.layout.parent = this;
43651     
43652     
43653     
43654     
43655 };
43656
43657 Roo.extend(Roo.bootstrap.panel.Nest, Roo.bootstrap.panel.Content, {
43658     /**
43659     * @cfg {Roo.BorderLayout} layout The layout for this panel
43660     */
43661     layout : false,
43662
43663     setSize : function(width, height){
43664         if(!this.ignoreResize(width, height)){
43665             var size = this.adjustForComponents(width, height);
43666             var el = this.layout.getEl();
43667             if (size.height < 1) {
43668                 el.setWidth(size.width);   
43669             } else {
43670                 el.setSize(size.width, size.height);
43671             }
43672             var touch = el.dom.offsetWidth;
43673             this.layout.layout();
43674             // ie requires a double layout on the first pass
43675             if(Roo.isIE && !this.initialized){
43676                 this.initialized = true;
43677                 this.layout.layout();
43678             }
43679         }
43680     },
43681     
43682     // activate all subpanels if not currently active..
43683     
43684     setActiveState : function(active){
43685         this.active = active;
43686         this.setActiveClass(active);
43687         
43688         if(!active){
43689             this.fireEvent("deactivate", this);
43690             return;
43691         }
43692         
43693         this.fireEvent("activate", this);
43694         // not sure if this should happen before or after..
43695         if (!this.layout) {
43696             return; // should not happen..
43697         }
43698         var reg = false;
43699         for (var r in this.layout.regions) {
43700             reg = this.layout.getRegion(r);
43701             if (reg.getActivePanel()) {
43702                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
43703                 reg.setActivePanel(reg.getActivePanel());
43704                 continue;
43705             }
43706             if (!reg.panels.length) {
43707                 continue;
43708             }
43709             reg.showPanel(reg.getPanel(0));
43710         }
43711         
43712         
43713         
43714         
43715     },
43716     
43717     /**
43718      * Returns the nested BorderLayout for this panel
43719      * @return {Roo.BorderLayout} 
43720      */
43721     getLayout : function(){
43722         return this.layout;
43723     },
43724     
43725      /**
43726      * Adds a xtype elements to the layout of the nested panel
43727      * <pre><code>
43728
43729 panel.addxtype({
43730        xtype : 'ContentPanel',
43731        region: 'west',
43732        items: [ .... ]
43733    }
43734 );
43735
43736 panel.addxtype({
43737         xtype : 'NestedLayoutPanel',
43738         region: 'west',
43739         layout: {
43740            center: { },
43741            west: { }   
43742         },
43743         items : [ ... list of content panels or nested layout panels.. ]
43744    }
43745 );
43746 </code></pre>
43747      * @param {Object} cfg Xtype definition of item to add.
43748      */
43749     addxtype : function(cfg) {
43750         return this.layout.addxtype(cfg);
43751     
43752     }
43753 });/*
43754  * Based on:
43755  * Ext JS Library 1.1.1
43756  * Copyright(c) 2006-2007, Ext JS, LLC.
43757  *
43758  * Originally Released Under LGPL - original licence link has changed is not relivant.
43759  *
43760  * Fork - LGPL
43761  * <script type="text/javascript">
43762  */
43763 /**
43764  * @class Roo.TabPanel
43765  * @extends Roo.util.Observable
43766  * A lightweight tab container.
43767  * <br><br>
43768  * Usage:
43769  * <pre><code>
43770 // basic tabs 1, built from existing content
43771 var tabs = new Roo.TabPanel("tabs1");
43772 tabs.addTab("script", "View Script");
43773 tabs.addTab("markup", "View Markup");
43774 tabs.activate("script");
43775
43776 // more advanced tabs, built from javascript
43777 var jtabs = new Roo.TabPanel("jtabs");
43778 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
43779
43780 // set up the UpdateManager
43781 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
43782 var updater = tab2.getUpdateManager();
43783 updater.setDefaultUrl("ajax1.htm");
43784 tab2.on('activate', updater.refresh, updater, true);
43785
43786 // Use setUrl for Ajax loading
43787 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
43788 tab3.setUrl("ajax2.htm", null, true);
43789
43790 // Disabled tab
43791 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
43792 tab4.disable();
43793
43794 jtabs.activate("jtabs-1");
43795  * </code></pre>
43796  * @constructor
43797  * Create a new TabPanel.
43798  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
43799  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
43800  */
43801 Roo.bootstrap.panel.Tabs = function(config){
43802     /**
43803     * The container element for this TabPanel.
43804     * @type Roo.Element
43805     */
43806     this.el = Roo.get(config.el);
43807     delete config.el;
43808     if(config){
43809         if(typeof config == "boolean"){
43810             this.tabPosition = config ? "bottom" : "top";
43811         }else{
43812             Roo.apply(this, config);
43813         }
43814     }
43815     
43816     if(this.tabPosition == "bottom"){
43817         // if tabs are at the bottom = create the body first.
43818         this.bodyEl = Roo.get(this.createBody(this.el.dom));
43819         this.el.addClass("roo-tabs-bottom");
43820     }
43821     // next create the tabs holders
43822     
43823     if (this.tabPosition == "west"){
43824         
43825         var reg = this.region; // fake it..
43826         while (reg) {
43827             if (!reg.mgr.parent) {
43828                 break;
43829             }
43830             reg = reg.mgr.parent.region;
43831         }
43832         Roo.log("got nest?");
43833         Roo.log(reg);
43834         if (reg.mgr.getRegion('west')) {
43835             var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
43836             this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
43837             this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
43838             this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
43839             this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
43840         
43841             
43842         }
43843         
43844         
43845     } else {
43846      
43847         this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
43848         this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
43849         this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
43850         this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
43851     }
43852     
43853     
43854     if(Roo.isIE){
43855         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
43856     }
43857     
43858     // finally - if tabs are at the top, then create the body last..
43859     if(this.tabPosition != "bottom"){
43860         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
43861          * @type Roo.Element
43862          */
43863         this.bodyEl = Roo.get(this.createBody(this.el.dom));
43864         this.el.addClass("roo-tabs-top");
43865     }
43866     this.items = [];
43867
43868     this.bodyEl.setStyle("position", "relative");
43869
43870     this.active = null;
43871     this.activateDelegate = this.activate.createDelegate(this);
43872
43873     this.addEvents({
43874         /**
43875          * @event tabchange
43876          * Fires when the active tab changes
43877          * @param {Roo.TabPanel} this
43878          * @param {Roo.TabPanelItem} activePanel The new active tab
43879          */
43880         "tabchange": true,
43881         /**
43882          * @event beforetabchange
43883          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
43884          * @param {Roo.TabPanel} this
43885          * @param {Object} e Set cancel to true on this object to cancel the tab change
43886          * @param {Roo.TabPanelItem} tab The tab being changed to
43887          */
43888         "beforetabchange" : true
43889     });
43890
43891     Roo.EventManager.onWindowResize(this.onResize, this);
43892     this.cpad = this.el.getPadding("lr");
43893     this.hiddenCount = 0;
43894
43895
43896     // toolbar on the tabbar support...
43897     if (this.toolbar) {
43898         alert("no toolbar support yet");
43899         this.toolbar  = false;
43900         /*
43901         var tcfg = this.toolbar;
43902         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
43903         this.toolbar = new Roo.Toolbar(tcfg);
43904         if (Roo.isSafari) {
43905             var tbl = tcfg.container.child('table', true);
43906             tbl.setAttribute('width', '100%');
43907         }
43908         */
43909         
43910     }
43911    
43912
43913
43914     Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
43915 };
43916
43917 Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
43918     /*
43919      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
43920      */
43921     tabPosition : "top",
43922     /*
43923      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
43924      */
43925     currentTabWidth : 0,
43926     /*
43927      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
43928      */
43929     minTabWidth : 40,
43930     /*
43931      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
43932      */
43933     maxTabWidth : 250,
43934     /*
43935      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
43936      */
43937     preferredTabWidth : 175,
43938     /*
43939      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
43940      */
43941     resizeTabs : false,
43942     /*
43943      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
43944      */
43945     monitorResize : true,
43946     /*
43947      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
43948      */
43949     toolbar : false,  // set by caller..
43950     
43951     region : false, /// set by caller
43952     
43953     disableTooltips : true, // not used yet...
43954
43955     /**
43956      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
43957      * @param {String} id The id of the div to use <b>or create</b>
43958      * @param {String} text The text for the tab
43959      * @param {String} content (optional) Content to put in the TabPanelItem body
43960      * @param {Boolean} closable (optional) True to create a close icon on the tab
43961      * @return {Roo.TabPanelItem} The created TabPanelItem
43962      */
43963     addTab : function(id, text, content, closable, tpl)
43964     {
43965         var item = new Roo.bootstrap.panel.TabItem({
43966             panel: this,
43967             id : id,
43968             text : text,
43969             closable : closable,
43970             tpl : tpl
43971         });
43972         this.addTabItem(item);
43973         if(content){
43974             item.setContent(content);
43975         }
43976         return item;
43977     },
43978
43979     /**
43980      * Returns the {@link Roo.TabPanelItem} with the specified id/index
43981      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
43982      * @return {Roo.TabPanelItem}
43983      */
43984     getTab : function(id){
43985         return this.items[id];
43986     },
43987
43988     /**
43989      * Hides the {@link Roo.TabPanelItem} with the specified id/index
43990      * @param {String/Number} id The id or index of the TabPanelItem to hide.
43991      */
43992     hideTab : function(id){
43993         var t = this.items[id];
43994         if(!t.isHidden()){
43995            t.setHidden(true);
43996            this.hiddenCount++;
43997            this.autoSizeTabs();
43998         }
43999     },
44000
44001     /**
44002      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
44003      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
44004      */
44005     unhideTab : function(id){
44006         var t = this.items[id];
44007         if(t.isHidden()){
44008            t.setHidden(false);
44009            this.hiddenCount--;
44010            this.autoSizeTabs();
44011         }
44012     },
44013
44014     /**
44015      * Adds an existing {@link Roo.TabPanelItem}.
44016      * @param {Roo.TabPanelItem} item The TabPanelItem to add
44017      */
44018     addTabItem : function(item)
44019     {
44020         this.items[item.id] = item;
44021         this.items.push(item);
44022         this.autoSizeTabs();
44023       //  if(this.resizeTabs){
44024     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
44025   //         this.autoSizeTabs();
44026 //        }else{
44027 //            item.autoSize();
44028        // }
44029     },
44030
44031     /**
44032      * Removes a {@link Roo.TabPanelItem}.
44033      * @param {String/Number} id The id or index of the TabPanelItem to remove.
44034      */
44035     removeTab : function(id){
44036         var items = this.items;
44037         var tab = items[id];
44038         if(!tab) { return; }
44039         var index = items.indexOf(tab);
44040         if(this.active == tab && items.length > 1){
44041             var newTab = this.getNextAvailable(index);
44042             if(newTab) {
44043                 newTab.activate();
44044             }
44045         }
44046         this.stripEl.dom.removeChild(tab.pnode.dom);
44047         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
44048             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
44049         }
44050         items.splice(index, 1);
44051         delete this.items[tab.id];
44052         tab.fireEvent("close", tab);
44053         tab.purgeListeners();
44054         this.autoSizeTabs();
44055     },
44056
44057     getNextAvailable : function(start){
44058         var items = this.items;
44059         var index = start;
44060         // look for a next tab that will slide over to
44061         // replace the one being removed
44062         while(index < items.length){
44063             var item = items[++index];
44064             if(item && !item.isHidden()){
44065                 return item;
44066             }
44067         }
44068         // if one isn't found select the previous tab (on the left)
44069         index = start;
44070         while(index >= 0){
44071             var item = items[--index];
44072             if(item && !item.isHidden()){
44073                 return item;
44074             }
44075         }
44076         return null;
44077     },
44078
44079     /**
44080      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
44081      * @param {String/Number} id The id or index of the TabPanelItem to disable.
44082      */
44083     disableTab : function(id){
44084         var tab = this.items[id];
44085         if(tab && this.active != tab){
44086             tab.disable();
44087         }
44088     },
44089
44090     /**
44091      * Enables a {@link Roo.TabPanelItem} that is disabled.
44092      * @param {String/Number} id The id or index of the TabPanelItem to enable.
44093      */
44094     enableTab : function(id){
44095         var tab = this.items[id];
44096         tab.enable();
44097     },
44098
44099     /**
44100      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
44101      * @param {String/Number} id The id or index of the TabPanelItem to activate.
44102      * @return {Roo.TabPanelItem} The TabPanelItem.
44103      */
44104     activate : function(id)
44105     {
44106         //Roo.log('activite:'  + id);
44107         
44108         var tab = this.items[id];
44109         if(!tab){
44110             return null;
44111         }
44112         if(tab == this.active || tab.disabled){
44113             return tab;
44114         }
44115         var e = {};
44116         this.fireEvent("beforetabchange", this, e, tab);
44117         if(e.cancel !== true && !tab.disabled){
44118             if(this.active){
44119                 this.active.hide();
44120             }
44121             this.active = this.items[id];
44122             this.active.show();
44123             this.fireEvent("tabchange", this, this.active);
44124         }
44125         return tab;
44126     },
44127
44128     /**
44129      * Gets the active {@link Roo.TabPanelItem}.
44130      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
44131      */
44132     getActiveTab : function(){
44133         return this.active;
44134     },
44135
44136     /**
44137      * Updates the tab body element to fit the height of the container element
44138      * for overflow scrolling
44139      * @param {Number} targetHeight (optional) Override the starting height from the elements height
44140      */
44141     syncHeight : function(targetHeight){
44142         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
44143         var bm = this.bodyEl.getMargins();
44144         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
44145         this.bodyEl.setHeight(newHeight);
44146         return newHeight;
44147     },
44148
44149     onResize : function(){
44150         if(this.monitorResize){
44151             this.autoSizeTabs();
44152         }
44153     },
44154
44155     /**
44156      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
44157      */
44158     beginUpdate : function(){
44159         this.updating = true;
44160     },
44161
44162     /**
44163      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
44164      */
44165     endUpdate : function(){
44166         this.updating = false;
44167         this.autoSizeTabs();
44168     },
44169
44170     /**
44171      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
44172      */
44173     autoSizeTabs : function()
44174     {
44175         var count = this.items.length;
44176         var vcount = count - this.hiddenCount;
44177         
44178         if (vcount < 2) {
44179             this.stripEl.hide();
44180         } else {
44181             this.stripEl.show();
44182         }
44183         
44184         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
44185             return;
44186         }
44187         
44188         
44189         var w = Math.max(this.el.getWidth() - this.cpad, 10);
44190         var availWidth = Math.floor(w / vcount);
44191         var b = this.stripBody;
44192         if(b.getWidth() > w){
44193             var tabs = this.items;
44194             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
44195             if(availWidth < this.minTabWidth){
44196                 /*if(!this.sleft){    // incomplete scrolling code
44197                     this.createScrollButtons();
44198                 }
44199                 this.showScroll();
44200                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
44201             }
44202         }else{
44203             if(this.currentTabWidth < this.preferredTabWidth){
44204                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
44205             }
44206         }
44207     },
44208
44209     /**
44210      * Returns the number of tabs in this TabPanel.
44211      * @return {Number}
44212      */
44213      getCount : function(){
44214          return this.items.length;
44215      },
44216
44217     /**
44218      * Resizes all the tabs to the passed width
44219      * @param {Number} The new width
44220      */
44221     setTabWidth : function(width){
44222         this.currentTabWidth = width;
44223         for(var i = 0, len = this.items.length; i < len; i++) {
44224                 if(!this.items[i].isHidden()) {
44225                 this.items[i].setWidth(width);
44226             }
44227         }
44228     },
44229
44230     /**
44231      * Destroys this TabPanel
44232      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
44233      */
44234     destroy : function(removeEl){
44235         Roo.EventManager.removeResizeListener(this.onResize, this);
44236         for(var i = 0, len = this.items.length; i < len; i++){
44237             this.items[i].purgeListeners();
44238         }
44239         if(removeEl === true){
44240             this.el.update("");
44241             this.el.remove();
44242         }
44243     },
44244     
44245     createStrip : function(container)
44246     {
44247         var strip = document.createElement("nav");
44248         strip.className = Roo.bootstrap.version == 4 ?
44249             "navbar-light bg-light" : 
44250             "navbar navbar-default"; //"x-tabs-wrap";
44251         container.appendChild(strip);
44252         return strip;
44253     },
44254     
44255     createStripList : function(strip)
44256     {
44257         // div wrapper for retard IE
44258         // returns the "tr" element.
44259         strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
44260         //'<div class="x-tabs-strip-wrap">'+
44261           //  '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
44262           //  '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
44263         return strip.firstChild; //.firstChild.firstChild.firstChild;
44264     },
44265     createBody : function(container)
44266     {
44267         var body = document.createElement("div");
44268         Roo.id(body, "tab-body");
44269         //Roo.fly(body).addClass("x-tabs-body");
44270         Roo.fly(body).addClass("tab-content");
44271         container.appendChild(body);
44272         return body;
44273     },
44274     createItemBody :function(bodyEl, id){
44275         var body = Roo.getDom(id);
44276         if(!body){
44277             body = document.createElement("div");
44278             body.id = id;
44279         }
44280         //Roo.fly(body).addClass("x-tabs-item-body");
44281         Roo.fly(body).addClass("tab-pane");
44282          bodyEl.insertBefore(body, bodyEl.firstChild);
44283         return body;
44284     },
44285     /** @private */
44286     createStripElements :  function(stripEl, text, closable, tpl)
44287     {
44288         var td = document.createElement("li"); // was td..
44289         td.className = 'nav-item';
44290         
44291         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
44292         
44293         
44294         stripEl.appendChild(td);
44295         /*if(closable){
44296             td.className = "x-tabs-closable";
44297             if(!this.closeTpl){
44298                 this.closeTpl = new Roo.Template(
44299                    '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
44300                    '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
44301                    '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
44302                 );
44303             }
44304             var el = this.closeTpl.overwrite(td, {"text": text});
44305             var close = el.getElementsByTagName("div")[0];
44306             var inner = el.getElementsByTagName("em")[0];
44307             return {"el": el, "close": close, "inner": inner};
44308         } else {
44309         */
44310         // not sure what this is..
44311 //            if(!this.tabTpl){
44312                 //this.tabTpl = new Roo.Template(
44313                 //   '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
44314                 //   '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
44315                 //);
44316 //                this.tabTpl = new Roo.Template(
44317 //                   '<a href="#">' +
44318 //                   '<span unselectable="on"' +
44319 //                            (this.disableTooltips ? '' : ' title="{text}"') +
44320 //                            ' >{text}</span></a>'
44321 //                );
44322 //                
44323 //            }
44324
44325
44326             var template = tpl || this.tabTpl || false;
44327             
44328             if(!template){
44329                 template =  new Roo.Template(
44330                         Roo.bootstrap.version == 4 ? 
44331                             (
44332                                 '<a class="nav-link" href="#" unselectable="on"' +
44333                                      (this.disableTooltips ? '' : ' title="{text}"') +
44334                                      ' >{text}</a>'
44335                             ) : (
44336                                 '<a class="nav-link" href="#">' +
44337                                 '<span unselectable="on"' +
44338                                          (this.disableTooltips ? '' : ' title="{text}"') +
44339                                     ' >{text}</span></a>'
44340                             )
44341                 );
44342             }
44343             
44344             switch (typeof(template)) {
44345                 case 'object' :
44346                     break;
44347                 case 'string' :
44348                     template = new Roo.Template(template);
44349                     break;
44350                 default :
44351                     break;
44352             }
44353             
44354             var el = template.overwrite(td, {"text": text});
44355             
44356             var inner = el.getElementsByTagName("span")[0];
44357             
44358             return {"el": el, "inner": inner};
44359             
44360     }
44361         
44362     
44363 });
44364
44365 /**
44366  * @class Roo.TabPanelItem
44367  * @extends Roo.util.Observable
44368  * Represents an individual item (tab plus body) in a TabPanel.
44369  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
44370  * @param {String} id The id of this TabPanelItem
44371  * @param {String} text The text for the tab of this TabPanelItem
44372  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
44373  */
44374 Roo.bootstrap.panel.TabItem = function(config){
44375     /**
44376      * The {@link Roo.TabPanel} this TabPanelItem belongs to
44377      * @type Roo.TabPanel
44378      */
44379     this.tabPanel = config.panel;
44380     /**
44381      * The id for this TabPanelItem
44382      * @type String
44383      */
44384     this.id = config.id;
44385     /** @private */
44386     this.disabled = false;
44387     /** @private */
44388     this.text = config.text;
44389     /** @private */
44390     this.loaded = false;
44391     this.closable = config.closable;
44392
44393     /**
44394      * The body element for this TabPanelItem.
44395      * @type Roo.Element
44396      */
44397     this.bodyEl = Roo.get(this.tabPanel.createItemBody(this.tabPanel.bodyEl.dom, config.id));
44398     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
44399     this.bodyEl.setStyle("display", "block");
44400     this.bodyEl.setStyle("zoom", "1");
44401     //this.hideAction();
44402
44403     var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
44404     /** @private */
44405     this.el = Roo.get(els.el);
44406     this.inner = Roo.get(els.inner, true);
44407      this.textEl = Roo.bootstrap.version == 4 ?
44408         this.el : Roo.get(this.el.dom.firstChild, true);
44409
44410     this.pnode = this.linode = Roo.get(els.el.parentNode, true);
44411     this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
44412
44413     
44414 //    this.el.on("mousedown", this.onTabMouseDown, this);
44415     this.el.on("click", this.onTabClick, this);
44416     /** @private */
44417     if(config.closable){
44418         var c = Roo.get(els.close, true);
44419         c.dom.title = this.closeText;
44420         c.addClassOnOver("close-over");
44421         c.on("click", this.closeClick, this);
44422      }
44423
44424     this.addEvents({
44425          /**
44426          * @event activate
44427          * Fires when this tab becomes the active tab.
44428          * @param {Roo.TabPanel} tabPanel The parent TabPanel
44429          * @param {Roo.TabPanelItem} this
44430          */
44431         "activate": true,
44432         /**
44433          * @event beforeclose
44434          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
44435          * @param {Roo.TabPanelItem} this
44436          * @param {Object} e Set cancel to true on this object to cancel the close.
44437          */
44438         "beforeclose": true,
44439         /**
44440          * @event close
44441          * Fires when this tab is closed.
44442          * @param {Roo.TabPanelItem} this
44443          */
44444          "close": true,
44445         /**
44446          * @event deactivate
44447          * Fires when this tab is no longer the active tab.
44448          * @param {Roo.TabPanel} tabPanel The parent TabPanel
44449          * @param {Roo.TabPanelItem} this
44450          */
44451          "deactivate" : true
44452     });
44453     this.hidden = false;
44454
44455     Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
44456 };
44457
44458 Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
44459            {
44460     purgeListeners : function(){
44461        Roo.util.Observable.prototype.purgeListeners.call(this);
44462        this.el.removeAllListeners();
44463     },
44464     /**
44465      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
44466      */
44467     show : function(){
44468         this.status_node.addClass("active");
44469         this.showAction();
44470         if(Roo.isOpera){
44471             this.tabPanel.stripWrap.repaint();
44472         }
44473         this.fireEvent("activate", this.tabPanel, this);
44474     },
44475
44476     /**
44477      * Returns true if this tab is the active tab.
44478      * @return {Boolean}
44479      */
44480     isActive : function(){
44481         return this.tabPanel.getActiveTab() == this;
44482     },
44483
44484     /**
44485      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
44486      */
44487     hide : function(){
44488         this.status_node.removeClass("active");
44489         this.hideAction();
44490         this.fireEvent("deactivate", this.tabPanel, this);
44491     },
44492
44493     hideAction : function(){
44494         this.bodyEl.hide();
44495         this.bodyEl.setStyle("position", "absolute");
44496         this.bodyEl.setLeft("-20000px");
44497         this.bodyEl.setTop("-20000px");
44498     },
44499
44500     showAction : function(){
44501         this.bodyEl.setStyle("position", "relative");
44502         this.bodyEl.setTop("");
44503         this.bodyEl.setLeft("");
44504         this.bodyEl.show();
44505     },
44506
44507     /**
44508      * Set the tooltip for the tab.
44509      * @param {String} tooltip The tab's tooltip
44510      */
44511     setTooltip : function(text){
44512         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
44513             this.textEl.dom.qtip = text;
44514             this.textEl.dom.removeAttribute('title');
44515         }else{
44516             this.textEl.dom.title = text;
44517         }
44518     },
44519
44520     onTabClick : function(e){
44521         e.preventDefault();
44522         this.tabPanel.activate(this.id);
44523     },
44524
44525     onTabMouseDown : function(e){
44526         e.preventDefault();
44527         this.tabPanel.activate(this.id);
44528     },
44529 /*
44530     getWidth : function(){
44531         return this.inner.getWidth();
44532     },
44533
44534     setWidth : function(width){
44535         var iwidth = width - this.linode.getPadding("lr");
44536         this.inner.setWidth(iwidth);
44537         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
44538         this.linode.setWidth(width);
44539     },
44540 */
44541     /**
44542      * Show or hide the tab
44543      * @param {Boolean} hidden True to hide or false to show.
44544      */
44545     setHidden : function(hidden){
44546         this.hidden = hidden;
44547         this.linode.setStyle("display", hidden ? "none" : "");
44548     },
44549
44550     /**
44551      * Returns true if this tab is "hidden"
44552      * @return {Boolean}
44553      */
44554     isHidden : function(){
44555         return this.hidden;
44556     },
44557
44558     /**
44559      * Returns the text for this tab
44560      * @return {String}
44561      */
44562     getText : function(){
44563         return this.text;
44564     },
44565     /*
44566     autoSize : function(){
44567         //this.el.beginMeasure();
44568         this.textEl.setWidth(1);
44569         /*
44570          *  #2804 [new] Tabs in Roojs
44571          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
44572          */
44573         //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
44574         //this.el.endMeasure();
44575     //},
44576
44577     /**
44578      * Sets the text for the tab (Note: this also sets the tooltip text)
44579      * @param {String} text The tab's text and tooltip
44580      */
44581     setText : function(text){
44582         this.text = text;
44583         this.textEl.update(text);
44584         this.setTooltip(text);
44585         //if(!this.tabPanel.resizeTabs){
44586         //    this.autoSize();
44587         //}
44588     },
44589     /**
44590      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
44591      */
44592     activate : function(){
44593         this.tabPanel.activate(this.id);
44594     },
44595
44596     /**
44597      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
44598      */
44599     disable : function(){
44600         if(this.tabPanel.active != this){
44601             this.disabled = true;
44602             this.status_node.addClass("disabled");
44603         }
44604     },
44605
44606     /**
44607      * Enables this TabPanelItem if it was previously disabled.
44608      */
44609     enable : function(){
44610         this.disabled = false;
44611         this.status_node.removeClass("disabled");
44612     },
44613
44614     /**
44615      * Sets the content for this TabPanelItem.
44616      * @param {String} content The content
44617      * @param {Boolean} loadScripts true to look for and load scripts
44618      */
44619     setContent : function(content, loadScripts){
44620         this.bodyEl.update(content, loadScripts);
44621     },
44622
44623     /**
44624      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
44625      * @return {Roo.UpdateManager} The UpdateManager
44626      */
44627     getUpdateManager : function(){
44628         return this.bodyEl.getUpdateManager();
44629     },
44630
44631     /**
44632      * Set a URL to be used to load the content for this TabPanelItem.
44633      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
44634      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
44635      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
44636      * @return {Roo.UpdateManager} The UpdateManager
44637      */
44638     setUrl : function(url, params, loadOnce){
44639         if(this.refreshDelegate){
44640             this.un('activate', this.refreshDelegate);
44641         }
44642         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
44643         this.on("activate", this.refreshDelegate);
44644         return this.bodyEl.getUpdateManager();
44645     },
44646
44647     /** @private */
44648     _handleRefresh : function(url, params, loadOnce){
44649         if(!loadOnce || !this.loaded){
44650             var updater = this.bodyEl.getUpdateManager();
44651             updater.update(url, params, this._setLoaded.createDelegate(this));
44652         }
44653     },
44654
44655     /**
44656      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
44657      *   Will fail silently if the setUrl method has not been called.
44658      *   This does not activate the panel, just updates its content.
44659      */
44660     refresh : function(){
44661         if(this.refreshDelegate){
44662            this.loaded = false;
44663            this.refreshDelegate();
44664         }
44665     },
44666
44667     /** @private */
44668     _setLoaded : function(){
44669         this.loaded = true;
44670     },
44671
44672     /** @private */
44673     closeClick : function(e){
44674         var o = {};
44675         e.stopEvent();
44676         this.fireEvent("beforeclose", this, o);
44677         if(o.cancel !== true){
44678             this.tabPanel.removeTab(this.id);
44679         }
44680     },
44681     /**
44682      * The text displayed in the tooltip for the close icon.
44683      * @type String
44684      */
44685     closeText : "Close this tab"
44686 });
44687 /**
44688 *    This script refer to:
44689 *    Title: International Telephone Input
44690 *    Author: Jack O'Connor
44691 *    Code version:  v12.1.12
44692 *    Availability: https://github.com/jackocnr/intl-tel-input.git
44693 **/
44694
44695 Roo.bootstrap.form.PhoneInputData = function() {
44696     var d = [
44697       [
44698         "Afghanistan (‫افغانستان‬‎)",
44699         "af",
44700         "93"
44701       ],
44702       [
44703         "Albania (Shqipëri)",
44704         "al",
44705         "355"
44706       ],
44707       [
44708         "Algeria (‫الجزائر‬‎)",
44709         "dz",
44710         "213"
44711       ],
44712       [
44713         "American Samoa",
44714         "as",
44715         "1684"
44716       ],
44717       [
44718         "Andorra",
44719         "ad",
44720         "376"
44721       ],
44722       [
44723         "Angola",
44724         "ao",
44725         "244"
44726       ],
44727       [
44728         "Anguilla",
44729         "ai",
44730         "1264"
44731       ],
44732       [
44733         "Antigua and Barbuda",
44734         "ag",
44735         "1268"
44736       ],
44737       [
44738         "Argentina",
44739         "ar",
44740         "54"
44741       ],
44742       [
44743         "Armenia (Հայաստան)",
44744         "am",
44745         "374"
44746       ],
44747       [
44748         "Aruba",
44749         "aw",
44750         "297"
44751       ],
44752       [
44753         "Australia",
44754         "au",
44755         "61",
44756         0
44757       ],
44758       [
44759         "Austria (Österreich)",
44760         "at",
44761         "43"
44762       ],
44763       [
44764         "Azerbaijan (Azərbaycan)",
44765         "az",
44766         "994"
44767       ],
44768       [
44769         "Bahamas",
44770         "bs",
44771         "1242"
44772       ],
44773       [
44774         "Bahrain (‫البحرين‬‎)",
44775         "bh",
44776         "973"
44777       ],
44778       [
44779         "Bangladesh (বাংলাদেশ)",
44780         "bd",
44781         "880"
44782       ],
44783       [
44784         "Barbados",
44785         "bb",
44786         "1246"
44787       ],
44788       [
44789         "Belarus (Беларусь)",
44790         "by",
44791         "375"
44792       ],
44793       [
44794         "Belgium (België)",
44795         "be",
44796         "32"
44797       ],
44798       [
44799         "Belize",
44800         "bz",
44801         "501"
44802       ],
44803       [
44804         "Benin (Bénin)",
44805         "bj",
44806         "229"
44807       ],
44808       [
44809         "Bermuda",
44810         "bm",
44811         "1441"
44812       ],
44813       [
44814         "Bhutan (འབྲུག)",
44815         "bt",
44816         "975"
44817       ],
44818       [
44819         "Bolivia",
44820         "bo",
44821         "591"
44822       ],
44823       [
44824         "Bosnia and Herzegovina (Босна и Херцеговина)",
44825         "ba",
44826         "387"
44827       ],
44828       [
44829         "Botswana",
44830         "bw",
44831         "267"
44832       ],
44833       [
44834         "Brazil (Brasil)",
44835         "br",
44836         "55"
44837       ],
44838       [
44839         "British Indian Ocean Territory",
44840         "io",
44841         "246"
44842       ],
44843       [
44844         "British Virgin Islands",
44845         "vg",
44846         "1284"
44847       ],
44848       [
44849         "Brunei",
44850         "bn",
44851         "673"
44852       ],
44853       [
44854         "Bulgaria (България)",
44855         "bg",
44856         "359"
44857       ],
44858       [
44859         "Burkina Faso",
44860         "bf",
44861         "226"
44862       ],
44863       [
44864         "Burundi (Uburundi)",
44865         "bi",
44866         "257"
44867       ],
44868       [
44869         "Cambodia (កម្ពុជា)",
44870         "kh",
44871         "855"
44872       ],
44873       [
44874         "Cameroon (Cameroun)",
44875         "cm",
44876         "237"
44877       ],
44878       [
44879         "Canada",
44880         "ca",
44881         "1",
44882         1,
44883         ["204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
44884       ],
44885       [
44886         "Cape Verde (Kabu Verdi)",
44887         "cv",
44888         "238"
44889       ],
44890       [
44891         "Caribbean Netherlands",
44892         "bq",
44893         "599",
44894         1
44895       ],
44896       [
44897         "Cayman Islands",
44898         "ky",
44899         "1345"
44900       ],
44901       [
44902         "Central African Republic (République centrafricaine)",
44903         "cf",
44904         "236"
44905       ],
44906       [
44907         "Chad (Tchad)",
44908         "td",
44909         "235"
44910       ],
44911       [
44912         "Chile",
44913         "cl",
44914         "56"
44915       ],
44916       [
44917         "China (中国)",
44918         "cn",
44919         "86"
44920       ],
44921       [
44922         "Christmas Island",
44923         "cx",
44924         "61",
44925         2
44926       ],
44927       [
44928         "Cocos (Keeling) Islands",
44929         "cc",
44930         "61",
44931         1
44932       ],
44933       [
44934         "Colombia",
44935         "co",
44936         "57"
44937       ],
44938       [
44939         "Comoros (‫جزر القمر‬‎)",
44940         "km",
44941         "269"
44942       ],
44943       [
44944         "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
44945         "cd",
44946         "243"
44947       ],
44948       [
44949         "Congo (Republic) (Congo-Brazzaville)",
44950         "cg",
44951         "242"
44952       ],
44953       [
44954         "Cook Islands",
44955         "ck",
44956         "682"
44957       ],
44958       [
44959         "Costa Rica",
44960         "cr",
44961         "506"
44962       ],
44963       [
44964         "Côte d’Ivoire",
44965         "ci",
44966         "225"
44967       ],
44968       [
44969         "Croatia (Hrvatska)",
44970         "hr",
44971         "385"
44972       ],
44973       [
44974         "Cuba",
44975         "cu",
44976         "53"
44977       ],
44978       [
44979         "Curaçao",
44980         "cw",
44981         "599",
44982         0
44983       ],
44984       [
44985         "Cyprus (Κύπρος)",
44986         "cy",
44987         "357"
44988       ],
44989       [
44990         "Czech Republic (Česká republika)",
44991         "cz",
44992         "420"
44993       ],
44994       [
44995         "Denmark (Danmark)",
44996         "dk",
44997         "45"
44998       ],
44999       [
45000         "Djibouti",
45001         "dj",
45002         "253"
45003       ],
45004       [
45005         "Dominica",
45006         "dm",
45007         "1767"
45008       ],
45009       [
45010         "Dominican Republic (República Dominicana)",
45011         "do",
45012         "1",
45013         2,
45014         ["809", "829", "849"]
45015       ],
45016       [
45017         "Ecuador",
45018         "ec",
45019         "593"
45020       ],
45021       [
45022         "Egypt (‫مصر‬‎)",
45023         "eg",
45024         "20"
45025       ],
45026       [
45027         "El Salvador",
45028         "sv",
45029         "503"
45030       ],
45031       [
45032         "Equatorial Guinea (Guinea Ecuatorial)",
45033         "gq",
45034         "240"
45035       ],
45036       [
45037         "Eritrea",
45038         "er",
45039         "291"
45040       ],
45041       [
45042         "Estonia (Eesti)",
45043         "ee",
45044         "372"
45045       ],
45046       [
45047         "Ethiopia",
45048         "et",
45049         "251"
45050       ],
45051       [
45052         "Falkland Islands (Islas Malvinas)",
45053         "fk",
45054         "500"
45055       ],
45056       [
45057         "Faroe Islands (Føroyar)",
45058         "fo",
45059         "298"
45060       ],
45061       [
45062         "Fiji",
45063         "fj",
45064         "679"
45065       ],
45066       [
45067         "Finland (Suomi)",
45068         "fi",
45069         "358",
45070         0
45071       ],
45072       [
45073         "France",
45074         "fr",
45075         "33"
45076       ],
45077       [
45078         "French Guiana (Guyane française)",
45079         "gf",
45080         "594"
45081       ],
45082       [
45083         "French Polynesia (Polynésie française)",
45084         "pf",
45085         "689"
45086       ],
45087       [
45088         "Gabon",
45089         "ga",
45090         "241"
45091       ],
45092       [
45093         "Gambia",
45094         "gm",
45095         "220"
45096       ],
45097       [
45098         "Georgia (საქართველო)",
45099         "ge",
45100         "995"
45101       ],
45102       [
45103         "Germany (Deutschland)",
45104         "de",
45105         "49"
45106       ],
45107       [
45108         "Ghana (Gaana)",
45109         "gh",
45110         "233"
45111       ],
45112       [
45113         "Gibraltar",
45114         "gi",
45115         "350"
45116       ],
45117       [
45118         "Greece (Ελλάδα)",
45119         "gr",
45120         "30"
45121       ],
45122       [
45123         "Greenland (Kalaallit Nunaat)",
45124         "gl",
45125         "299"
45126       ],
45127       [
45128         "Grenada",
45129         "gd",
45130         "1473"
45131       ],
45132       [
45133         "Guadeloupe",
45134         "gp",
45135         "590",
45136         0
45137       ],
45138       [
45139         "Guam",
45140         "gu",
45141         "1671"
45142       ],
45143       [
45144         "Guatemala",
45145         "gt",
45146         "502"
45147       ],
45148       [
45149         "Guernsey",
45150         "gg",
45151         "44",
45152         1
45153       ],
45154       [
45155         "Guinea (Guinée)",
45156         "gn",
45157         "224"
45158       ],
45159       [
45160         "Guinea-Bissau (Guiné Bissau)",
45161         "gw",
45162         "245"
45163       ],
45164       [
45165         "Guyana",
45166         "gy",
45167         "592"
45168       ],
45169       [
45170         "Haiti",
45171         "ht",
45172         "509"
45173       ],
45174       [
45175         "Honduras",
45176         "hn",
45177         "504"
45178       ],
45179       [
45180         "Hong Kong (香港)",
45181         "hk",
45182         "852"
45183       ],
45184       [
45185         "Hungary (Magyarország)",
45186         "hu",
45187         "36"
45188       ],
45189       [
45190         "Iceland (Ísland)",
45191         "is",
45192         "354"
45193       ],
45194       [
45195         "India (भारत)",
45196         "in",
45197         "91"
45198       ],
45199       [
45200         "Indonesia",
45201         "id",
45202         "62"
45203       ],
45204       [
45205         "Iran (‫ایران‬‎)",
45206         "ir",
45207         "98"
45208       ],
45209       [
45210         "Iraq (‫العراق‬‎)",
45211         "iq",
45212         "964"
45213       ],
45214       [
45215         "Ireland",
45216         "ie",
45217         "353"
45218       ],
45219       [
45220         "Isle of Man",
45221         "im",
45222         "44",
45223         2
45224       ],
45225       [
45226         "Israel (‫ישראל‬‎)",
45227         "il",
45228         "972"
45229       ],
45230       [
45231         "Italy (Italia)",
45232         "it",
45233         "39",
45234         0
45235       ],
45236       [
45237         "Jamaica",
45238         "jm",
45239         "1876"
45240       ],
45241       [
45242         "Japan (日本)",
45243         "jp",
45244         "81"
45245       ],
45246       [
45247         "Jersey",
45248         "je",
45249         "44",
45250         3
45251       ],
45252       [
45253         "Jordan (‫الأردن‬‎)",
45254         "jo",
45255         "962"
45256       ],
45257       [
45258         "Kazakhstan (Казахстан)",
45259         "kz",
45260         "7",
45261         1
45262       ],
45263       [
45264         "Kenya",
45265         "ke",
45266         "254"
45267       ],
45268       [
45269         "Kiribati",
45270         "ki",
45271         "686"
45272       ],
45273       [
45274         "Kosovo",
45275         "xk",
45276         "383"
45277       ],
45278       [
45279         "Kuwait (‫الكويت‬‎)",
45280         "kw",
45281         "965"
45282       ],
45283       [
45284         "Kyrgyzstan (Кыргызстан)",
45285         "kg",
45286         "996"
45287       ],
45288       [
45289         "Laos (ລາວ)",
45290         "la",
45291         "856"
45292       ],
45293       [
45294         "Latvia (Latvija)",
45295         "lv",
45296         "371"
45297       ],
45298       [
45299         "Lebanon (‫لبنان‬‎)",
45300         "lb",
45301         "961"
45302       ],
45303       [
45304         "Lesotho",
45305         "ls",
45306         "266"
45307       ],
45308       [
45309         "Liberia",
45310         "lr",
45311         "231"
45312       ],
45313       [
45314         "Libya (‫ليبيا‬‎)",
45315         "ly",
45316         "218"
45317       ],
45318       [
45319         "Liechtenstein",
45320         "li",
45321         "423"
45322       ],
45323       [
45324         "Lithuania (Lietuva)",
45325         "lt",
45326         "370"
45327       ],
45328       [
45329         "Luxembourg",
45330         "lu",
45331         "352"
45332       ],
45333       [
45334         "Macau (澳門)",
45335         "mo",
45336         "853"
45337       ],
45338       [
45339         "Macedonia (FYROM) (Македонија)",
45340         "mk",
45341         "389"
45342       ],
45343       [
45344         "Madagascar (Madagasikara)",
45345         "mg",
45346         "261"
45347       ],
45348       [
45349         "Malawi",
45350         "mw",
45351         "265"
45352       ],
45353       [
45354         "Malaysia",
45355         "my",
45356         "60"
45357       ],
45358       [
45359         "Maldives",
45360         "mv",
45361         "960"
45362       ],
45363       [
45364         "Mali",
45365         "ml",
45366         "223"
45367       ],
45368       [
45369         "Malta",
45370         "mt",
45371         "356"
45372       ],
45373       [
45374         "Marshall Islands",
45375         "mh",
45376         "692"
45377       ],
45378       [
45379         "Martinique",
45380         "mq",
45381         "596"
45382       ],
45383       [
45384         "Mauritania (‫موريتانيا‬‎)",
45385         "mr",
45386         "222"
45387       ],
45388       [
45389         "Mauritius (Moris)",
45390         "mu",
45391         "230"
45392       ],
45393       [
45394         "Mayotte",
45395         "yt",
45396         "262",
45397         1
45398       ],
45399       [
45400         "Mexico (México)",
45401         "mx",
45402         "52"
45403       ],
45404       [
45405         "Micronesia",
45406         "fm",
45407         "691"
45408       ],
45409       [
45410         "Moldova (Republica Moldova)",
45411         "md",
45412         "373"
45413       ],
45414       [
45415         "Monaco",
45416         "mc",
45417         "377"
45418       ],
45419       [
45420         "Mongolia (Монгол)",
45421         "mn",
45422         "976"
45423       ],
45424       [
45425         "Montenegro (Crna Gora)",
45426         "me",
45427         "382"
45428       ],
45429       [
45430         "Montserrat",
45431         "ms",
45432         "1664"
45433       ],
45434       [
45435         "Morocco (‫المغرب‬‎)",
45436         "ma",
45437         "212",
45438         0
45439       ],
45440       [
45441         "Mozambique (Moçambique)",
45442         "mz",
45443         "258"
45444       ],
45445       [
45446         "Myanmar (Burma) (မြန်မာ)",
45447         "mm",
45448         "95"
45449       ],
45450       [
45451         "Namibia (Namibië)",
45452         "na",
45453         "264"
45454       ],
45455       [
45456         "Nauru",
45457         "nr",
45458         "674"
45459       ],
45460       [
45461         "Nepal (नेपाल)",
45462         "np",
45463         "977"
45464       ],
45465       [
45466         "Netherlands (Nederland)",
45467         "nl",
45468         "31"
45469       ],
45470       [
45471         "New Caledonia (Nouvelle-Calédonie)",
45472         "nc",
45473         "687"
45474       ],
45475       [
45476         "New Zealand",
45477         "nz",
45478         "64"
45479       ],
45480       [
45481         "Nicaragua",
45482         "ni",
45483         "505"
45484       ],
45485       [
45486         "Niger (Nijar)",
45487         "ne",
45488         "227"
45489       ],
45490       [
45491         "Nigeria",
45492         "ng",
45493         "234"
45494       ],
45495       [
45496         "Niue",
45497         "nu",
45498         "683"
45499       ],
45500       [
45501         "Norfolk Island",
45502         "nf",
45503         "672"
45504       ],
45505       [
45506         "North Korea (조선 민주주의 인민 공화국)",
45507         "kp",
45508         "850"
45509       ],
45510       [
45511         "Northern Mariana Islands",
45512         "mp",
45513         "1670"
45514       ],
45515       [
45516         "Norway (Norge)",
45517         "no",
45518         "47",
45519         0
45520       ],
45521       [
45522         "Oman (‫عُمان‬‎)",
45523         "om",
45524         "968"
45525       ],
45526       [
45527         "Pakistan (‫پاکستان‬‎)",
45528         "pk",
45529         "92"
45530       ],
45531       [
45532         "Palau",
45533         "pw",
45534         "680"
45535       ],
45536       [
45537         "Palestine (‫فلسطين‬‎)",
45538         "ps",
45539         "970"
45540       ],
45541       [
45542         "Panama (Panamá)",
45543         "pa",
45544         "507"
45545       ],
45546       [
45547         "Papua New Guinea",
45548         "pg",
45549         "675"
45550       ],
45551       [
45552         "Paraguay",
45553         "py",
45554         "595"
45555       ],
45556       [
45557         "Peru (Perú)",
45558         "pe",
45559         "51"
45560       ],
45561       [
45562         "Philippines",
45563         "ph",
45564         "63"
45565       ],
45566       [
45567         "Poland (Polska)",
45568         "pl",
45569         "48"
45570       ],
45571       [
45572         "Portugal",
45573         "pt",
45574         "351"
45575       ],
45576       [
45577         "Puerto Rico",
45578         "pr",
45579         "1",
45580         3,
45581         ["787", "939"]
45582       ],
45583       [
45584         "Qatar (‫قطر‬‎)",
45585         "qa",
45586         "974"
45587       ],
45588       [
45589         "Réunion (La Réunion)",
45590         "re",
45591         "262",
45592         0
45593       ],
45594       [
45595         "Romania (România)",
45596         "ro",
45597         "40"
45598       ],
45599       [
45600         "Russia (Россия)",
45601         "ru",
45602         "7",
45603         0
45604       ],
45605       [
45606         "Rwanda",
45607         "rw",
45608         "250"
45609       ],
45610       [
45611         "Saint Barthélemy",
45612         "bl",
45613         "590",
45614         1
45615       ],
45616       [
45617         "Saint Helena",
45618         "sh",
45619         "290"
45620       ],
45621       [
45622         "Saint Kitts and Nevis",
45623         "kn",
45624         "1869"
45625       ],
45626       [
45627         "Saint Lucia",
45628         "lc",
45629         "1758"
45630       ],
45631       [
45632         "Saint Martin (Saint-Martin (partie française))",
45633         "mf",
45634         "590",
45635         2
45636       ],
45637       [
45638         "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
45639         "pm",
45640         "508"
45641       ],
45642       [
45643         "Saint Vincent and the Grenadines",
45644         "vc",
45645         "1784"
45646       ],
45647       [
45648         "Samoa",
45649         "ws",
45650         "685"
45651       ],
45652       [
45653         "San Marino",
45654         "sm",
45655         "378"
45656       ],
45657       [
45658         "São Tomé and Príncipe (São Tomé e Príncipe)",
45659         "st",
45660         "239"
45661       ],
45662       [
45663         "Saudi Arabia (‫المملكة العربية السعودية‬‎)",
45664         "sa",
45665         "966"
45666       ],
45667       [
45668         "Senegal (Sénégal)",
45669         "sn",
45670         "221"
45671       ],
45672       [
45673         "Serbia (Србија)",
45674         "rs",
45675         "381"
45676       ],
45677       [
45678         "Seychelles",
45679         "sc",
45680         "248"
45681       ],
45682       [
45683         "Sierra Leone",
45684         "sl",
45685         "232"
45686       ],
45687       [
45688         "Singapore",
45689         "sg",
45690         "65"
45691       ],
45692       [
45693         "Sint Maarten",
45694         "sx",
45695         "1721"
45696       ],
45697       [
45698         "Slovakia (Slovensko)",
45699         "sk",
45700         "421"
45701       ],
45702       [
45703         "Slovenia (Slovenija)",
45704         "si",
45705         "386"
45706       ],
45707       [
45708         "Solomon Islands",
45709         "sb",
45710         "677"
45711       ],
45712       [
45713         "Somalia (Soomaaliya)",
45714         "so",
45715         "252"
45716       ],
45717       [
45718         "South Africa",
45719         "za",
45720         "27"
45721       ],
45722       [
45723         "South Korea (대한민국)",
45724         "kr",
45725         "82"
45726       ],
45727       [
45728         "South Sudan (‫جنوب السودان‬‎)",
45729         "ss",
45730         "211"
45731       ],
45732       [
45733         "Spain (España)",
45734         "es",
45735         "34"
45736       ],
45737       [
45738         "Sri Lanka (ශ්‍රී ලංකාව)",
45739         "lk",
45740         "94"
45741       ],
45742       [
45743         "Sudan (‫السودان‬‎)",
45744         "sd",
45745         "249"
45746       ],
45747       [
45748         "Suriname",
45749         "sr",
45750         "597"
45751       ],
45752       [
45753         "Svalbard and Jan Mayen",
45754         "sj",
45755         "47",
45756         1
45757       ],
45758       [
45759         "Swaziland",
45760         "sz",
45761         "268"
45762       ],
45763       [
45764         "Sweden (Sverige)",
45765         "se",
45766         "46"
45767       ],
45768       [
45769         "Switzerland (Schweiz)",
45770         "ch",
45771         "41"
45772       ],
45773       [
45774         "Syria (‫سوريا‬‎)",
45775         "sy",
45776         "963"
45777       ],
45778       [
45779         "Taiwan (台灣)",
45780         "tw",
45781         "886"
45782       ],
45783       [
45784         "Tajikistan",
45785         "tj",
45786         "992"
45787       ],
45788       [
45789         "Tanzania",
45790         "tz",
45791         "255"
45792       ],
45793       [
45794         "Thailand (ไทย)",
45795         "th",
45796         "66"
45797       ],
45798       [
45799         "Timor-Leste",
45800         "tl",
45801         "670"
45802       ],
45803       [
45804         "Togo",
45805         "tg",
45806         "228"
45807       ],
45808       [
45809         "Tokelau",
45810         "tk",
45811         "690"
45812       ],
45813       [
45814         "Tonga",
45815         "to",
45816         "676"
45817       ],
45818       [
45819         "Trinidad and Tobago",
45820         "tt",
45821         "1868"
45822       ],
45823       [
45824         "Tunisia (‫تونس‬‎)",
45825         "tn",
45826         "216"
45827       ],
45828       [
45829         "Turkey (Türkiye)",
45830         "tr",
45831         "90"
45832       ],
45833       [
45834         "Turkmenistan",
45835         "tm",
45836         "993"
45837       ],
45838       [
45839         "Turks and Caicos Islands",
45840         "tc",
45841         "1649"
45842       ],
45843       [
45844         "Tuvalu",
45845         "tv",
45846         "688"
45847       ],
45848       [
45849         "U.S. Virgin Islands",
45850         "vi",
45851         "1340"
45852       ],
45853       [
45854         "Uganda",
45855         "ug",
45856         "256"
45857       ],
45858       [
45859         "Ukraine (Україна)",
45860         "ua",
45861         "380"
45862       ],
45863       [
45864         "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)",
45865         "ae",
45866         "971"
45867       ],
45868       [
45869         "United Kingdom",
45870         "gb",
45871         "44",
45872         0
45873       ],
45874       [
45875         "United States",
45876         "us",
45877         "1",
45878         0
45879       ],
45880       [
45881         "Uruguay",
45882         "uy",
45883         "598"
45884       ],
45885       [
45886         "Uzbekistan (Oʻzbekiston)",
45887         "uz",
45888         "998"
45889       ],
45890       [
45891         "Vanuatu",
45892         "vu",
45893         "678"
45894       ],
45895       [
45896         "Vatican City (Città del Vaticano)",
45897         "va",
45898         "39",
45899         1
45900       ],
45901       [
45902         "Venezuela",
45903         "ve",
45904         "58"
45905       ],
45906       [
45907         "Vietnam (Việt Nam)",
45908         "vn",
45909         "84"
45910       ],
45911       [
45912         "Wallis and Futuna (Wallis-et-Futuna)",
45913         "wf",
45914         "681"
45915       ],
45916       [
45917         "Western Sahara (‫الصحراء الغربية‬‎)",
45918         "eh",
45919         "212",
45920         1
45921       ],
45922       [
45923         "Yemen (‫اليمن‬‎)",
45924         "ye",
45925         "967"
45926       ],
45927       [
45928         "Zambia",
45929         "zm",
45930         "260"
45931       ],
45932       [
45933         "Zimbabwe",
45934         "zw",
45935         "263"
45936       ],
45937       [
45938         "Åland Islands",
45939         "ax",
45940         "358",
45941         1
45942       ]
45943   ];
45944   
45945   return d;
45946 }/**
45947 *    This script refer to:
45948 *    Title: International Telephone Input
45949 *    Author: Jack O'Connor
45950 *    Code version:  v12.1.12
45951 *    Availability: https://github.com/jackocnr/intl-tel-input.git
45952 **/
45953
45954 /**
45955  * @class Roo.bootstrap.form.PhoneInput
45956  * @extends Roo.bootstrap.form.TriggerField
45957  * An input with International dial-code selection
45958  
45959  * @cfg {String} defaultDialCode default '+852'
45960  * @cfg {Array} preferedCountries default []
45961   
45962  * @constructor
45963  * Create a new PhoneInput.
45964  * @param {Object} config Configuration options
45965  */
45966
45967 Roo.bootstrap.form.PhoneInput = function(config) {
45968     Roo.bootstrap.form.PhoneInput.superclass.constructor.call(this, config);
45969 };
45970
45971 Roo.extend(Roo.bootstrap.form.PhoneInput, Roo.bootstrap.form.TriggerField, {
45972         /**
45973         * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
45974         */
45975         listWidth: undefined,
45976         
45977         selectedClass: 'active',
45978         
45979         invalidClass : "has-warning",
45980         
45981         validClass: 'has-success',
45982         
45983         allowed: '0123456789',
45984         
45985         max_length: 15,
45986         
45987         /**
45988          * @cfg {String} defaultDialCode The default dial code when initializing the input
45989          */
45990         defaultDialCode: '+852',
45991         
45992         /**
45993          * @cfg {Array} preferedCountries A list of iso2 in array (e.g. ['hk','us']). Those related countries will show at the top of the input's choices
45994          */
45995         preferedCountries: false,
45996         
45997         getAutoCreate : function()
45998         {
45999             var data = Roo.bootstrap.form.PhoneInputData();
46000             var align = this.labelAlign || this.parentLabelAlign();
46001             var id = Roo.id();
46002             
46003             this.allCountries = [];
46004             this.dialCodeMapping = [];
46005             
46006             for (var i = 0; i < data.length; i++) {
46007               var c = data[i];
46008               this.allCountries[i] = {
46009                 name: c[0],
46010                 iso2: c[1],
46011                 dialCode: c[2],
46012                 priority: c[3] || 0,
46013                 areaCodes: c[4] || null
46014               };
46015               this.dialCodeMapping[c[2]] = {
46016                   name: c[0],
46017                   iso2: c[1],
46018                   priority: c[3] || 0,
46019                   areaCodes: c[4] || null
46020               };
46021             }
46022             
46023             var cfg = {
46024                 cls: 'form-group',
46025                 cn: []
46026             };
46027             
46028             var input =  {
46029                 tag: 'input',
46030                 id : id,
46031                 // type: 'number', -- do not use number - we get the flaky up/down arrows.
46032                 maxlength: this.max_length,
46033                 cls : 'form-control tel-input',
46034                 autocomplete: 'new-password'
46035             };
46036             
46037             var hiddenInput = {
46038                 tag: 'input',
46039                 type: 'hidden',
46040                 cls: 'hidden-tel-input'
46041             };
46042             
46043             if (this.name) {
46044                 hiddenInput.name = this.name;
46045             }
46046             
46047             if (this.disabled) {
46048                 input.disabled = true;
46049             }
46050             
46051             var flag_container = {
46052                 tag: 'div',
46053                 cls: 'flag-box',
46054                 cn: [
46055                     {
46056                         tag: 'div',
46057                         cls: 'flag'
46058                     },
46059                     {
46060                         tag: 'div',
46061                         cls: 'caret'
46062                     }
46063                 ]
46064             };
46065             
46066             var box = {
46067                 tag: 'div',
46068                 cls: this.hasFeedback ? 'has-feedback' : '',
46069                 cn: [
46070                     hiddenInput,
46071                     input,
46072                     {
46073                         tag: 'input',
46074                         cls: 'dial-code-holder',
46075                         disabled: true
46076                     }
46077                 ]
46078             };
46079             
46080             var container = {
46081                 cls: 'roo-select2-container input-group',
46082                 cn: [
46083                     flag_container,
46084                     box
46085                 ]
46086             };
46087             
46088             if (this.fieldLabel.length) {
46089                 var indicator = {
46090                     tag: 'i',
46091                     tooltip: 'This field is required'
46092                 };
46093                 
46094                 var label = {
46095                     tag: 'label',
46096                     'for':  id,
46097                     cls: 'control-label',
46098                     cn: []
46099                 };
46100                 
46101                 var label_text = {
46102                     tag: 'span',
46103                     html: this.fieldLabel
46104                 };
46105                 
46106                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
46107                 label.cn = [
46108                     indicator,
46109                     label_text
46110                 ];
46111                 
46112                 if(this.indicatorpos == 'right') {
46113                     indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
46114                     label.cn = [
46115                         label_text,
46116                         indicator
46117                     ];
46118                 }
46119                 
46120                 if(align == 'left') {
46121                     container = {
46122                         tag: 'div',
46123                         cn: [
46124                             container
46125                         ]
46126                     };
46127                     
46128                     if(this.labelWidth > 12){
46129                         label.style = "width: " + this.labelWidth + 'px';
46130                     }
46131                     if(this.labelWidth < 13 && this.labelmd == 0){
46132                         this.labelmd = this.labelWidth;
46133                     }
46134                     if(this.labellg > 0){
46135                         label.cls += ' col-lg-' + this.labellg;
46136                         input.cls += ' col-lg-' + (12 - this.labellg);
46137                     }
46138                     if(this.labelmd > 0){
46139                         label.cls += ' col-md-' + this.labelmd;
46140                         container.cls += ' col-md-' + (12 - this.labelmd);
46141                     }
46142                     if(this.labelsm > 0){
46143                         label.cls += ' col-sm-' + this.labelsm;
46144                         container.cls += ' col-sm-' + (12 - this.labelsm);
46145                     }
46146                     if(this.labelxs > 0){
46147                         label.cls += ' col-xs-' + this.labelxs;
46148                         container.cls += ' col-xs-' + (12 - this.labelxs);
46149                     }
46150                 }
46151             }
46152             
46153             cfg.cn = [
46154                 label,
46155                 container
46156             ];
46157             
46158             var settings = this;
46159             
46160             ['xs','sm','md','lg'].map(function(size){
46161                 if (settings[size]) {
46162                     cfg.cls += ' col-' + size + '-' + settings[size];
46163                 }
46164             });
46165             
46166             this.store = new Roo.data.Store({
46167                 proxy : new Roo.data.MemoryProxy({}),
46168                 reader : new Roo.data.JsonReader({
46169                     fields : [
46170                         {
46171                             'name' : 'name',
46172                             'type' : 'string'
46173                         },
46174                         {
46175                             'name' : 'iso2',
46176                             'type' : 'string'
46177                         },
46178                         {
46179                             'name' : 'dialCode',
46180                             'type' : 'string'
46181                         },
46182                         {
46183                             'name' : 'priority',
46184                             'type' : 'string'
46185                         },
46186                         {
46187                             'name' : 'areaCodes',
46188                             'type' : 'string'
46189                         }
46190                     ]
46191                 })
46192             });
46193             
46194             if(!this.preferedCountries) {
46195                 this.preferedCountries = [
46196                     'hk',
46197                     'gb',
46198                     'us'
46199                 ];
46200             }
46201             
46202             var p = this.preferedCountries.reverse();
46203             
46204             if(p) {
46205                 for (var i = 0; i < p.length; i++) {
46206                     for (var j = 0; j < this.allCountries.length; j++) {
46207                         if(this.allCountries[j].iso2 == p[i]) {
46208                             var t = this.allCountries[j];
46209                             this.allCountries.splice(j,1);
46210                             this.allCountries.unshift(t);
46211                         }
46212                     } 
46213                 }
46214             }
46215             
46216             this.store.proxy.data = {
46217                 success: true,
46218                 data: this.allCountries
46219             };
46220             
46221             return cfg;
46222         },
46223         
46224         initEvents : function()
46225         {
46226             this.createList();
46227             Roo.bootstrap.form.PhoneInput.superclass.initEvents.call(this);
46228             
46229             this.indicator = this.indicatorEl();
46230             this.flag = this.flagEl();
46231             this.dialCodeHolder = this.dialCodeHolderEl();
46232             
46233             this.trigger = this.el.select('div.flag-box',true).first();
46234             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
46235             
46236             var _this = this;
46237             
46238             (function(){
46239                 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
46240                 _this.list.setWidth(lw);
46241             }).defer(100);
46242             
46243             this.list.on('mouseover', this.onViewOver, this);
46244             this.list.on('mousemove', this.onViewMove, this);
46245             this.inputEl().on("keyup", this.onKeyUp, this);
46246             this.inputEl().on("keypress", this.onKeyPress, this);
46247             
46248             this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
46249
46250             this.view = new Roo.View(this.list, this.tpl, {
46251                 singleSelect:true, store: this.store, selectedClass: this.selectedClass
46252             });
46253             
46254             this.view.on('click', this.onViewClick, this);
46255             this.setValue(this.defaultDialCode);
46256         },
46257         
46258         onTriggerClick : function(e)
46259         {
46260             Roo.log('trigger click');
46261             if(this.disabled){
46262                 return;
46263             }
46264             
46265             if(this.isExpanded()){
46266                 this.collapse();
46267                 this.hasFocus = false;
46268             }else {
46269                 this.store.load({});
46270                 this.hasFocus = true;
46271                 this.expand();
46272             }
46273         },
46274         
46275         isExpanded : function()
46276         {
46277             return this.list.isVisible();
46278         },
46279         
46280         collapse : function()
46281         {
46282             if(!this.isExpanded()){
46283                 return;
46284             }
46285             this.list.hide();
46286             Roo.get(document).un('mousedown', this.collapseIf, this);
46287             Roo.get(document).un('mousewheel', this.collapseIf, this);
46288             this.fireEvent('collapse', this);
46289             this.validate();
46290         },
46291         
46292         expand : function()
46293         {
46294             Roo.log('expand');
46295
46296             if(this.isExpanded() || !this.hasFocus){
46297                 return;
46298             }
46299             
46300             var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
46301             this.list.setWidth(lw);
46302             
46303             this.list.show();
46304             this.restrictHeight();
46305             
46306             Roo.get(document).on('mousedown', this.collapseIf, this);
46307             Roo.get(document).on('mousewheel', this.collapseIf, this);
46308             
46309             this.fireEvent('expand', this);
46310         },
46311         
46312         restrictHeight : function()
46313         {
46314             this.list.alignTo(this.inputEl(), this.listAlign);
46315             this.list.alignTo(this.inputEl(), this.listAlign);
46316         },
46317         
46318         onViewOver : function(e, t)
46319         {
46320             if(this.inKeyMode){
46321                 return;
46322             }
46323             var item = this.view.findItemFromChild(t);
46324             
46325             if(item){
46326                 var index = this.view.indexOf(item);
46327                 this.select(index, false);
46328             }
46329         },
46330
46331         // private
46332         onViewClick : function(view, doFocus, el, e)
46333         {
46334             var index = this.view.getSelectedIndexes()[0];
46335             
46336             var r = this.store.getAt(index);
46337             
46338             if(r){
46339                 this.onSelect(r, index);
46340             }
46341             if(doFocus !== false && !this.blockFocus){
46342                 this.inputEl().focus();
46343             }
46344         },
46345         
46346         onViewMove : function(e, t)
46347         {
46348             this.inKeyMode = false;
46349         },
46350         
46351         select : function(index, scrollIntoView)
46352         {
46353             this.selectedIndex = index;
46354             this.view.select(index);
46355             if(scrollIntoView !== false){
46356                 var el = this.view.getNode(index);
46357                 if(el){
46358                     this.list.scrollChildIntoView(el, false);
46359                 }
46360             }
46361         },
46362         
46363         createList : function()
46364         {
46365             this.list = Roo.get(document.body).createChild({
46366                 tag: 'ul',
46367                 cls: 'typeahead typeahead-long dropdown-menu tel-list',
46368                 style: 'display:none'
46369             });
46370             
46371             this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
46372         },
46373         
46374         collapseIf : function(e)
46375         {
46376             var in_combo  = e.within(this.el);
46377             var in_list =  e.within(this.list);
46378             var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
46379             
46380             if (in_combo || in_list || is_list) {
46381                 return;
46382             }
46383             this.collapse();
46384         },
46385         
46386         onSelect : function(record, index)
46387         {
46388             if(this.fireEvent('beforeselect', this, record, index) !== false){
46389                 
46390                 this.setFlagClass(record.data.iso2);
46391                 this.setDialCode(record.data.dialCode);
46392                 this.hasFocus = false;
46393                 this.collapse();
46394                 this.fireEvent('select', this, record, index);
46395             }
46396         },
46397         
46398         flagEl : function()
46399         {
46400             var flag = this.el.select('div.flag',true).first();
46401             if(!flag){
46402                 return false;
46403             }
46404             return flag;
46405         },
46406         
46407         dialCodeHolderEl : function()
46408         {
46409             var d = this.el.select('input.dial-code-holder',true).first();
46410             if(!d){
46411                 return false;
46412             }
46413             return d;
46414         },
46415         
46416         setDialCode : function(v)
46417         {
46418             this.dialCodeHolder.dom.value = '+'+v;
46419         },
46420         
46421         setFlagClass : function(n)
46422         {
46423             this.flag.dom.className = 'flag '+n;
46424         },
46425         
46426         getValue : function()
46427         {
46428             var v = this.inputEl().getValue();
46429             if(this.dialCodeHolder) {
46430                 v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
46431             }
46432             return v;
46433         },
46434         
46435         setValue : function(v)
46436         {
46437             var d = this.getDialCode(v);
46438             
46439             //invalid dial code
46440             if(v.length == 0 || !d || d.length == 0) {
46441                 if(this.rendered){
46442                     this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
46443                     this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
46444                 }
46445                 return;
46446             }
46447             
46448             //valid dial code
46449             this.setFlagClass(this.dialCodeMapping[d].iso2);
46450             this.setDialCode(d);
46451             this.inputEl().dom.value = v.replace('+'+d,'');
46452             this.hiddenEl().dom.value = this.getValue();
46453             
46454             this.validate();
46455         },
46456         
46457         getDialCode : function(v)
46458         {
46459             v = v ||  '';
46460             
46461             if (v.length == 0) {
46462                 return this.dialCodeHolder.dom.value;
46463             }
46464             
46465             var dialCode = "";
46466             if (v.charAt(0) != "+") {
46467                 return false;
46468             }
46469             var numericChars = "";
46470             for (var i = 1; i < v.length; i++) {
46471               var c = v.charAt(i);
46472               if (!isNaN(c)) {
46473                 numericChars += c;
46474                 if (this.dialCodeMapping[numericChars]) {
46475                   dialCode = v.substr(1, i);
46476                 }
46477                 if (numericChars.length == 4) {
46478                   break;
46479                 }
46480               }
46481             }
46482             return dialCode;
46483         },
46484         
46485         reset : function()
46486         {
46487             this.setValue(this.defaultDialCode);
46488             this.validate();
46489         },
46490         
46491         hiddenEl : function()
46492         {
46493             return this.el.select('input.hidden-tel-input',true).first();
46494         },
46495         
46496         // after setting val
46497         onKeyUp : function(e){
46498             this.setValue(this.getValue());
46499         },
46500         
46501         onKeyPress : function(e){
46502             if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){
46503                 e.stopEvent();
46504             }
46505         }
46506         
46507 });
46508 /**
46509  * @class Roo.bootstrap.form.MoneyField
46510  * @extends Roo.bootstrap.form.ComboBox
46511  * Bootstrap MoneyField class
46512  * 
46513  * @constructor
46514  * Create a new MoneyField.
46515  * @param {Object} config Configuration options
46516  */
46517
46518 Roo.bootstrap.form.MoneyField = function(config) {
46519     
46520     Roo.bootstrap.form.MoneyField.superclass.constructor.call(this, config);
46521     
46522 };
46523
46524 Roo.extend(Roo.bootstrap.form.MoneyField, Roo.bootstrap.form.ComboBox, {
46525     
46526     /**
46527      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
46528      */
46529     allowDecimals : true,
46530     /**
46531      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
46532      */
46533     decimalSeparator : ".",
46534     /**
46535      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
46536      */
46537     decimalPrecision : 0,
46538     /**
46539      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
46540      */
46541     allowNegative : true,
46542     /**
46543      * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
46544      */
46545     allowZero: true,
46546     /**
46547      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
46548      */
46549     minValue : Number.NEGATIVE_INFINITY,
46550     /**
46551      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
46552      */
46553     maxValue : Number.MAX_VALUE,
46554     /**
46555      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
46556      */
46557     minText : "The minimum value for this field is {0}",
46558     /**
46559      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
46560      */
46561     maxText : "The maximum value for this field is {0}",
46562     /**
46563      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
46564      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
46565      */
46566     nanText : "{0} is not a valid number",
46567     /**
46568      * @cfg {Boolean} castInt (true|false) cast int if true (defalut true)
46569      */
46570     castInt : true,
46571     /**
46572      * @cfg {String} defaults currency of the MoneyField
46573      * value should be in lkey
46574      */
46575     defaultCurrency : false,
46576     /**
46577      * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
46578      */
46579     thousandsDelimiter : false,
46580     /**
46581      * @cfg {Number} max_length Maximum input field length allowed (defaults to Number.MAX_VALUE)
46582      */
46583     max_length: false,
46584     
46585     inputlg : 9,
46586     inputmd : 9,
46587     inputsm : 9,
46588     inputxs : 6,
46589      /**
46590      * @cfg {Roo.data.Store} store  Store to lookup currency??
46591      */
46592     store : false,
46593     
46594     getAutoCreate : function()
46595     {
46596         var align = this.labelAlign || this.parentLabelAlign();
46597         
46598         var id = Roo.id();
46599
46600         var cfg = {
46601             cls: 'form-group',
46602             cn: []
46603         };
46604
46605         var input =  {
46606             tag: 'input',
46607             id : id,
46608             cls : 'form-control roo-money-amount-input',
46609             autocomplete: 'new-password'
46610         };
46611         
46612         var hiddenInput = {
46613             tag: 'input',
46614             type: 'hidden',
46615             id: Roo.id(),
46616             cls: 'hidden-number-input'
46617         };
46618         
46619         if(this.max_length) {
46620             input.maxlength = this.max_length; 
46621         }
46622         
46623         if (this.name) {
46624             hiddenInput.name = this.name;
46625         }
46626
46627         if (this.disabled) {
46628             input.disabled = true;
46629         }
46630
46631         var clg = 12 - this.inputlg;
46632         var cmd = 12 - this.inputmd;
46633         var csm = 12 - this.inputsm;
46634         var cxs = 12 - this.inputxs;
46635         
46636         var container = {
46637             tag : 'div',
46638             cls : 'row roo-money-field',
46639             cn : [
46640                 {
46641                     tag : 'div',
46642                     cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
46643                     cn : [
46644                         {
46645                             tag : 'div',
46646                             cls: 'roo-select2-container input-group',
46647                             cn: [
46648                                 {
46649                                     tag : 'input',
46650                                     cls : 'form-control roo-money-currency-input',
46651                                     autocomplete: 'new-password',
46652                                     readOnly : 1,
46653                                     name : this.currencyName
46654                                 },
46655                                 {
46656                                     tag :'span',
46657                                     cls : 'input-group-addon',
46658                                     cn : [
46659                                         {
46660                                             tag: 'span',
46661                                             cls: 'caret'
46662                                         }
46663                                     ]
46664                                 }
46665                             ]
46666                         }
46667                     ]
46668                 },
46669                 {
46670                     tag : 'div',
46671                     cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs,
46672                     cn : [
46673                         {
46674                             tag: 'div',
46675                             cls: this.hasFeedback ? 'has-feedback' : '',
46676                             cn: [
46677                                 input
46678                             ]
46679                         }
46680                     ]
46681                 }
46682             ]
46683             
46684         };
46685         
46686         if (this.fieldLabel.length) {
46687             var indicator = {
46688                 tag: 'i',
46689                 tooltip: 'This field is required'
46690             };
46691
46692             var label = {
46693                 tag: 'label',
46694                 'for':  id,
46695                 cls: 'control-label',
46696                 cn: []
46697             };
46698
46699             var label_text = {
46700                 tag: 'span',
46701                 html: this.fieldLabel
46702             };
46703
46704             indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
46705             label.cn = [
46706                 indicator,
46707                 label_text
46708             ];
46709
46710             if(this.indicatorpos == 'right') {
46711                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
46712                 label.cn = [
46713                     label_text,
46714                     indicator
46715                 ];
46716             }
46717
46718             if(align == 'left') {
46719                 container = {
46720                     tag: 'div',
46721                     cn: [
46722                         container
46723                     ]
46724                 };
46725
46726                 if(this.labelWidth > 12){
46727                     label.style = "width: " + this.labelWidth + 'px';
46728                 }
46729                 if(this.labelWidth < 13 && this.labelmd == 0){
46730                     this.labelmd = this.labelWidth;
46731                 }
46732                 if(this.labellg > 0){
46733                     label.cls += ' col-lg-' + this.labellg;
46734                     input.cls += ' col-lg-' + (12 - this.labellg);
46735                 }
46736                 if(this.labelmd > 0){
46737                     label.cls += ' col-md-' + this.labelmd;
46738                     container.cls += ' col-md-' + (12 - this.labelmd);
46739                 }
46740                 if(this.labelsm > 0){
46741                     label.cls += ' col-sm-' + this.labelsm;
46742                     container.cls += ' col-sm-' + (12 - this.labelsm);
46743                 }
46744                 if(this.labelxs > 0){
46745                     label.cls += ' col-xs-' + this.labelxs;
46746                     container.cls += ' col-xs-' + (12 - this.labelxs);
46747                 }
46748             }
46749         }
46750
46751         cfg.cn = [
46752             label,
46753             container,
46754             hiddenInput
46755         ];
46756         
46757         var settings = this;
46758
46759         ['xs','sm','md','lg'].map(function(size){
46760             if (settings[size]) {
46761                 cfg.cls += ' col-' + size + '-' + settings[size];
46762             }
46763         });
46764         
46765         return cfg;
46766     },
46767     
46768     initEvents : function()
46769     {
46770         this.indicator = this.indicatorEl();
46771         
46772         this.initCurrencyEvent();
46773         
46774         this.initNumberEvent();
46775     },
46776     
46777     initCurrencyEvent : function()
46778     {
46779         if (!this.store) {
46780             throw "can not find store for combo";
46781         }
46782         
46783         this.store = Roo.factory(this.store, Roo.data);
46784         this.store.parent = this;
46785         
46786         this.createList();
46787         
46788         this.triggerEl = this.el.select('.input-group-addon', true).first();
46789         
46790         this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true });
46791         
46792         var _this = this;
46793         
46794         (function(){
46795             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
46796             _this.list.setWidth(lw);
46797         }).defer(100);
46798         
46799         this.list.on('mouseover', this.onViewOver, this);
46800         this.list.on('mousemove', this.onViewMove, this);
46801         this.list.on('scroll', this.onViewScroll, this);
46802         
46803         if(!this.tpl){
46804             this.tpl = '<li><a href="#">{' + this.currencyField + '}</a></li>';
46805         }
46806         
46807         this.view = new Roo.View(this.list, this.tpl, {
46808             singleSelect:true, store: this.store, selectedClass: this.selectedClass
46809         });
46810         
46811         this.view.on('click', this.onViewClick, this);
46812         
46813         this.store.on('beforeload', this.onBeforeLoad, this);
46814         this.store.on('load', this.onLoad, this);
46815         this.store.on('loadexception', this.onLoadException, this);
46816         
46817         this.keyNav = new Roo.KeyNav(this.currencyEl(), {
46818             "up" : function(e){
46819                 this.inKeyMode = true;
46820                 this.selectPrev();
46821             },
46822
46823             "down" : function(e){
46824                 if(!this.isExpanded()){
46825                     this.onTriggerClick();
46826                 }else{
46827                     this.inKeyMode = true;
46828                     this.selectNext();
46829                 }
46830             },
46831
46832             "enter" : function(e){
46833                 this.collapse();
46834                 
46835                 if(this.fireEvent("specialkey", this, e)){
46836                     this.onViewClick(false);
46837                 }
46838                 
46839                 return true;
46840             },
46841
46842             "esc" : function(e){
46843                 this.collapse();
46844             },
46845
46846             "tab" : function(e){
46847                 this.collapse();
46848                 
46849                 if(this.fireEvent("specialkey", this, e)){
46850                     this.onViewClick(false);
46851                 }
46852                 
46853                 return true;
46854             },
46855
46856             scope : this,
46857
46858             doRelay : function(foo, bar, hname){
46859                 if(hname == 'down' || this.scope.isExpanded()){
46860                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
46861                 }
46862                 return true;
46863             },
46864
46865             forceKeyDown: true
46866         });
46867         
46868         this.currencyEl().on("click", this.onTriggerClick, this, { preventDefault : true });
46869         
46870     },
46871     
46872     initNumberEvent : function(e)
46873     {
46874         this.inputEl().on("keydown" , this.fireKey,  this);
46875         this.inputEl().on("focus", this.onFocus,  this);
46876         this.inputEl().on("blur", this.onBlur,  this);
46877         
46878         this.inputEl().relayEvent('keyup', this);
46879         
46880         if(this.indicator){
46881             this.indicator.addClass('invisible');
46882         }
46883  
46884         this.originalValue = this.getValue();
46885         
46886         if(this.validationEvent == 'keyup'){
46887             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
46888             this.inputEl().on('keyup', this.filterValidation, this);
46889         }
46890         else if(this.validationEvent !== false){
46891             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
46892         }
46893         
46894         if(this.selectOnFocus){
46895             this.on("focus", this.preFocus, this);
46896             
46897         }
46898         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
46899             this.inputEl().on("keypress", this.filterKeys, this);
46900         } else {
46901             this.inputEl().relayEvent('keypress', this);
46902         }
46903         
46904         var allowed = "0123456789";
46905         
46906         if(this.allowDecimals){
46907             allowed += this.decimalSeparator;
46908         }
46909         
46910         if(this.allowNegative){
46911             allowed += "-";
46912         }
46913         
46914         if(this.thousandsDelimiter) {
46915             allowed += ",";
46916         }
46917         
46918         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
46919         
46920         var keyPress = function(e){
46921             
46922             var k = e.getKey();
46923             
46924             var c = e.getCharCode();
46925             
46926             if(
46927                     (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
46928                     allowed.indexOf(String.fromCharCode(c)) === -1
46929             ){
46930                 e.stopEvent();
46931                 return;
46932             }
46933             
46934             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
46935                 return;
46936             }
46937             
46938             if(allowed.indexOf(String.fromCharCode(c)) === -1){
46939                 e.stopEvent();
46940             }
46941         };
46942         
46943         this.inputEl().on("keypress", keyPress, this);
46944         
46945     },
46946     
46947     onTriggerClick : function(e)
46948     {   
46949         if(this.disabled){
46950             return;
46951         }
46952         
46953         this.page = 0;
46954         this.loadNext = false;
46955         
46956         if(this.isExpanded()){
46957             this.collapse();
46958             return;
46959         }
46960         
46961         this.hasFocus = true;
46962         
46963         if(this.triggerAction == 'all') {
46964             this.doQuery(this.allQuery, true);
46965             return;
46966         }
46967         
46968         this.doQuery(this.getRawValue());
46969     },
46970     
46971     getCurrency : function()
46972     {   
46973         var v = this.currencyEl().getValue();
46974         
46975         return v;
46976     },
46977     
46978     restrictHeight : function()
46979     {
46980         this.list.alignTo(this.currencyEl(), this.listAlign);
46981         this.list.alignTo(this.currencyEl(), this.listAlign);
46982     },
46983     
46984     onViewClick : function(view, doFocus, el, e)
46985     {
46986         var index = this.view.getSelectedIndexes()[0];
46987         
46988         var r = this.store.getAt(index);
46989         
46990         if(r){
46991             this.onSelect(r, index);
46992         }
46993     },
46994     
46995     onSelect : function(record, index){
46996         
46997         if(this.fireEvent('beforeselect', this, record, index) !== false){
46998         
46999             this.setFromCurrencyData(index > -1 ? record.data : false);
47000             
47001             this.collapse();
47002             
47003             this.fireEvent('select', this, record, index);
47004         }
47005     },
47006     
47007     setFromCurrencyData : function(o)
47008     {
47009         var currency = '';
47010         
47011         this.lastCurrency = o;
47012         
47013         if (this.currencyField) {
47014             currency = !o || typeof(o[this.currencyField]) == 'undefined' ? '' : o[this.currencyField];
47015         } else {
47016             Roo.log('no  currencyField value set for '+ (this.name ? this.name : this.id));
47017         }
47018         
47019         this.lastSelectionText = currency;
47020         
47021         //setting default currency
47022         if(o[this.currencyField] * 1 == 0 && this.defaultCurrency) {
47023             this.setCurrency(this.defaultCurrency);
47024             return;
47025         }
47026         
47027         this.setCurrency(currency);
47028     },
47029     
47030     setFromData : function(o)
47031     {
47032         var c = {};
47033         
47034         c[this.currencyField] = !o || typeof(o[this.currencyName]) == 'undefined' ? '' : o[this.currencyName];
47035         
47036         this.setFromCurrencyData(c);
47037         
47038         var value = '';
47039         
47040         if (this.name) {
47041             value = !o || typeof(o[this.name]) == 'undefined' ? '' : o[this.name];
47042         } else {
47043             Roo.log('no value set for '+ (this.name ? this.name : this.id));
47044         }
47045         
47046         this.setValue(value);
47047         
47048     },
47049     
47050     setCurrency : function(v)
47051     {   
47052         this.currencyValue = v;
47053         
47054         if(this.rendered){
47055             this.currencyEl().dom.value = (v === null || v === undefined ? '' : v);
47056             this.validate();
47057         }
47058     },
47059     
47060     setValue : function(v)
47061     {
47062         v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
47063         
47064         this.value = v;
47065         
47066         if(this.rendered){
47067             
47068             this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
47069             
47070             this.inputEl().dom.value = (v == '') ? '' :
47071                 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
47072             
47073             if(!this.allowZero && v === '0') {
47074                 this.hiddenEl().dom.value = '';
47075                 this.inputEl().dom.value = '';
47076             }
47077             
47078             this.validate();
47079         }
47080     },
47081     
47082     getRawValue : function()
47083     {
47084         var v = this.inputEl().getValue();
47085         
47086         return v;
47087     },
47088     
47089     getValue : function()
47090     {
47091         return this.fixPrecision(this.parseValue(this.getRawValue()));
47092     },
47093     
47094     parseValue : function(value)
47095     {
47096         if(this.thousandsDelimiter) {
47097             value += "";
47098             r = new RegExp(",", "g");
47099             value = value.replace(r, "");
47100         }
47101         
47102         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
47103         return isNaN(value) ? '' : value;
47104         
47105     },
47106     
47107     fixPrecision : function(value)
47108     {
47109         if(this.thousandsDelimiter) {
47110             value += "";
47111             r = new RegExp(",", "g");
47112             value = value.replace(r, "");
47113         }
47114         
47115         var nan = isNaN(value);
47116         
47117         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
47118             return nan ? '' : value;
47119         }
47120         return parseFloat(value).toFixed(this.decimalPrecision);
47121     },
47122     
47123     decimalPrecisionFcn : function(v)
47124     {
47125         return Math.floor(v);
47126     },
47127     
47128     validateValue : function(value)
47129     {
47130         if(!Roo.bootstrap.form.MoneyField.superclass.validateValue.call(this, value)){
47131             return false;
47132         }
47133         
47134         var num = this.parseValue(value);
47135         
47136         if(isNaN(num)){
47137             this.markInvalid(String.format(this.nanText, value));
47138             return false;
47139         }
47140         
47141         if(num < this.minValue){
47142             this.markInvalid(String.format(this.minText, this.minValue));
47143             return false;
47144         }
47145         
47146         if(num > this.maxValue){
47147             this.markInvalid(String.format(this.maxText, this.maxValue));
47148             return false;
47149         }
47150         
47151         return true;
47152     },
47153     
47154     validate : function()
47155     {
47156         if(this.disabled || this.allowBlank){
47157             this.markValid();
47158             return true;
47159         }
47160         
47161         var currency = this.getCurrency();
47162         
47163         if(this.validateValue(this.getRawValue()) && currency.length){
47164             this.markValid();
47165             return true;
47166         }
47167         
47168         this.markInvalid();
47169         return false;
47170     },
47171     
47172     getName: function()
47173     {
47174         return this.name;
47175     },
47176     
47177     beforeBlur : function()
47178     {
47179         if(!this.castInt){
47180             return;
47181         }
47182         
47183         var v = this.parseValue(this.getRawValue());
47184         
47185         if(v || v == 0){
47186             this.setValue(v);
47187         }
47188     },
47189     
47190     onBlur : function()
47191     {
47192         this.beforeBlur();
47193         
47194         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
47195             //this.el.removeClass(this.focusClass);
47196         }
47197         
47198         this.hasFocus = false;
47199         
47200         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
47201             this.validate();
47202         }
47203         
47204         var v = this.getValue();
47205         
47206         if(String(v) !== String(this.startValue)){
47207             this.fireEvent('change', this, v, this.startValue);
47208         }
47209         
47210         this.fireEvent("blur", this);
47211     },
47212     
47213     inputEl : function()
47214     {
47215         return this.el.select('.roo-money-amount-input', true).first();
47216     },
47217     
47218     currencyEl : function()
47219     {
47220         return this.el.select('.roo-money-currency-input', true).first();
47221     },
47222     
47223     hiddenEl : function()
47224     {
47225         return this.el.select('input.hidden-number-input',true).first();
47226     }
47227     
47228 });/**
47229  * @class Roo.bootstrap.BezierSignature
47230  * @extends Roo.bootstrap.Component
47231  * Bootstrap BezierSignature class
47232  * This script refer to:
47233  *    Title: Signature Pad
47234  *    Author: szimek
47235  *    Availability: https://github.com/szimek/signature_pad
47236  *
47237  * @constructor
47238  * Create a new BezierSignature
47239  * @param {Object} config The config object
47240  */
47241
47242 Roo.bootstrap.BezierSignature = function(config){
47243     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
47244     this.addEvents({
47245         "resize" : true
47246     });
47247 };
47248
47249 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
47250 {
47251      
47252     curve_data: [],
47253     
47254     is_empty: true,
47255     
47256     mouse_btn_down: true,
47257     
47258     /**
47259      * @cfg {int} canvas height
47260      */
47261     canvas_height: '200px',
47262     
47263     /**
47264      * @cfg {float|function} Radius of a single dot.
47265      */ 
47266     dot_size: false,
47267     
47268     /**
47269      * @cfg {float} Minimum width of a line. Defaults to 0.5.
47270      */
47271     min_width: 0.5,
47272     
47273     /**
47274      * @cfg {float} Maximum width of a line. Defaults to 2.5.
47275      */
47276     max_width: 2.5,
47277     
47278     /**
47279      * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
47280      */
47281     throttle: 16,
47282     
47283     /**
47284      * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
47285      */
47286     min_distance: 5,
47287     
47288     /**
47289      * @cfg {string} Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
47290      */
47291     bg_color: 'rgba(0, 0, 0, 0)',
47292     
47293     /**
47294      * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
47295      */
47296     dot_color: 'black',
47297     
47298     /**
47299      * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
47300      */ 
47301     velocity_filter_weight: 0.7,
47302     
47303     /**
47304      * @cfg {function} Callback when stroke begin. 
47305      */
47306     onBegin: false,
47307     
47308     /**
47309      * @cfg {function} Callback when stroke end.
47310      */
47311     onEnd: false,
47312     
47313     getAutoCreate : function()
47314     {
47315         var cls = 'roo-signature column';
47316         
47317         if(this.cls){
47318             cls += ' ' + this.cls;
47319         }
47320         
47321         var col_sizes = [
47322             'lg',
47323             'md',
47324             'sm',
47325             'xs'
47326         ];
47327         
47328         for(var i = 0; i < col_sizes.length; i++) {
47329             if(this[col_sizes[i]]) {
47330                 cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
47331             }
47332         }
47333         
47334         var cfg = {
47335             tag: 'div',
47336             cls: cls,
47337             cn: [
47338                 {
47339                     tag: 'div',
47340                     cls: 'roo-signature-body',
47341                     cn: [
47342                         {
47343                             tag: 'canvas',
47344                             cls: 'roo-signature-body-canvas',
47345                             height: this.canvas_height,
47346                             width: this.canvas_width
47347                         }
47348                     ]
47349                 },
47350                 {
47351                     tag: 'input',
47352                     type: 'file',
47353                     style: 'display: none'
47354                 }
47355             ]
47356         };
47357         
47358         return cfg;
47359     },
47360     
47361     initEvents: function() 
47362     {
47363         Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
47364         
47365         var canvas = this.canvasEl();
47366         
47367         // mouse && touch event swapping...
47368         canvas.dom.style.touchAction = 'none';
47369         canvas.dom.style.msTouchAction = 'none';
47370         
47371         this.mouse_btn_down = false;
47372         canvas.on('mousedown', this._handleMouseDown, this);
47373         canvas.on('mousemove', this._handleMouseMove, this);
47374         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
47375         
47376         if (window.PointerEvent) {
47377             canvas.on('pointerdown', this._handleMouseDown, this);
47378             canvas.on('pointermove', this._handleMouseMove, this);
47379             Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
47380         }
47381         
47382         if ('ontouchstart' in window) {
47383             canvas.on('touchstart', this._handleTouchStart, this);
47384             canvas.on('touchmove', this._handleTouchMove, this);
47385             canvas.on('touchend', this._handleTouchEnd, this);
47386         }
47387         
47388         Roo.EventManager.onWindowResize(this.resize, this, true);
47389         
47390         // file input event
47391         this.fileEl().on('change', this.uploadImage, this);
47392         
47393         this.clear();
47394         
47395         this.resize();
47396     },
47397     
47398     resize: function(){
47399         
47400         var canvas = this.canvasEl().dom;
47401         var ctx = this.canvasElCtx();
47402         var img_data = false;
47403         
47404         if(canvas.width > 0) {
47405             var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
47406         }
47407         // setting canvas width will clean img data
47408         canvas.width = 0;
47409         
47410         var style = window.getComputedStyle ? 
47411             getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
47412             
47413         var padding_left = parseInt(style.paddingLeft) || 0;
47414         var padding_right = parseInt(style.paddingRight) || 0;
47415         
47416         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
47417         
47418         if(img_data) {
47419             ctx.putImageData(img_data, 0, 0);
47420         }
47421     },
47422     
47423     _handleMouseDown: function(e)
47424     {
47425         if (e.browserEvent.which === 1) {
47426             this.mouse_btn_down = true;
47427             this.strokeBegin(e);
47428         }
47429     },
47430     
47431     _handleMouseMove: function (e)
47432     {
47433         if (this.mouse_btn_down) {
47434             this.strokeMoveUpdate(e);
47435         }
47436     },
47437     
47438     _handleMouseUp: function (e)
47439     {
47440         if (e.browserEvent.which === 1 && this.mouse_btn_down) {
47441             this.mouse_btn_down = false;
47442             this.strokeEnd(e);
47443         }
47444     },
47445     
47446     _handleTouchStart: function (e) {
47447         
47448         e.preventDefault();
47449         if (e.browserEvent.targetTouches.length === 1) {
47450             // var touch = e.browserEvent.changedTouches[0];
47451             // this.strokeBegin(touch);
47452             
47453              this.strokeBegin(e); // assume e catching the correct xy...
47454         }
47455     },
47456     
47457     _handleTouchMove: function (e) {
47458         e.preventDefault();
47459         // var touch = event.targetTouches[0];
47460         // _this._strokeMoveUpdate(touch);
47461         this.strokeMoveUpdate(e);
47462     },
47463     
47464     _handleTouchEnd: function (e) {
47465         var wasCanvasTouched = e.target === this.canvasEl().dom;
47466         if (wasCanvasTouched) {
47467             e.preventDefault();
47468             // var touch = event.changedTouches[0];
47469             // _this._strokeEnd(touch);
47470             this.strokeEnd(e);
47471         }
47472     },
47473     
47474     reset: function () {
47475         this._lastPoints = [];
47476         this._lastVelocity = 0;
47477         this._lastWidth = (this.min_width + this.max_width) / 2;
47478         this.canvasElCtx().fillStyle = this.dot_color;
47479     },
47480     
47481     strokeMoveUpdate: function(e)
47482     {
47483         this.strokeUpdate(e);
47484         
47485         if (this.throttle) {
47486             this.throttleStroke(this.strokeUpdate, this.throttle);
47487         }
47488         else {
47489             this.strokeUpdate(e);
47490         }
47491     },
47492     
47493     strokeBegin: function(e)
47494     {
47495         var newPointGroup = {
47496             color: this.dot_color,
47497             points: []
47498         };
47499         
47500         if (typeof this.onBegin === 'function') {
47501             this.onBegin(e);
47502         }
47503         
47504         this.curve_data.push(newPointGroup);
47505         this.reset();
47506         this.strokeUpdate(e);
47507     },
47508     
47509     strokeUpdate: function(e)
47510     {
47511         var rect = this.canvasEl().dom.getBoundingClientRect();
47512         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
47513         var lastPointGroup = this.curve_data[this.curve_data.length - 1];
47514         var lastPoints = lastPointGroup.points;
47515         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
47516         var isLastPointTooClose = lastPoint
47517             ? point.distanceTo(lastPoint) <= this.min_distance
47518             : false;
47519         var color = lastPointGroup.color;
47520         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
47521             var curve = this.addPoint(point);
47522             if (!lastPoint) {
47523                 this.drawDot({color: color, point: point});
47524             }
47525             else if (curve) {
47526                 this.drawCurve({color: color, curve: curve});
47527             }
47528             lastPoints.push({
47529                 time: point.time,
47530                 x: point.x,
47531                 y: point.y
47532             });
47533         }
47534     },
47535     
47536     strokeEnd: function(e)
47537     {
47538         this.strokeUpdate(e);
47539         if (typeof this.onEnd === 'function') {
47540             this.onEnd(e);
47541         }
47542     },
47543     
47544     addPoint:  function (point) {
47545         var _lastPoints = this._lastPoints;
47546         _lastPoints.push(point);
47547         if (_lastPoints.length > 2) {
47548             if (_lastPoints.length === 3) {
47549                 _lastPoints.unshift(_lastPoints[0]);
47550             }
47551             var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
47552             var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
47553             _lastPoints.shift();
47554             return curve;
47555         }
47556         return null;
47557     },
47558     
47559     calculateCurveWidths: function (startPoint, endPoint) {
47560         var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
47561             (1 - this.velocity_filter_weight) * this._lastVelocity;
47562
47563         var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
47564         var widths = {
47565             end: newWidth,
47566             start: this._lastWidth
47567         };
47568         
47569         this._lastVelocity = velocity;
47570         this._lastWidth = newWidth;
47571         return widths;
47572     },
47573     
47574     drawDot: function (_a) {
47575         var color = _a.color, point = _a.point;
47576         var ctx = this.canvasElCtx();
47577         var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
47578         ctx.beginPath();
47579         this.drawCurveSegment(point.x, point.y, width);
47580         ctx.closePath();
47581         ctx.fillStyle = color;
47582         ctx.fill();
47583     },
47584     
47585     drawCurve: function (_a) {
47586         var color = _a.color, curve = _a.curve;
47587         var ctx = this.canvasElCtx();
47588         var widthDelta = curve.endWidth - curve.startWidth;
47589         var drawSteps = Math.floor(curve.length()) * 2;
47590         ctx.beginPath();
47591         ctx.fillStyle = color;
47592         for (var i = 0; i < drawSteps; i += 1) {
47593         var t = i / drawSteps;
47594         var tt = t * t;
47595         var ttt = tt * t;
47596         var u = 1 - t;
47597         var uu = u * u;
47598         var uuu = uu * u;
47599         var x = uuu * curve.startPoint.x;
47600         x += 3 * uu * t * curve.control1.x;
47601         x += 3 * u * tt * curve.control2.x;
47602         x += ttt * curve.endPoint.x;
47603         var y = uuu * curve.startPoint.y;
47604         y += 3 * uu * t * curve.control1.y;
47605         y += 3 * u * tt * curve.control2.y;
47606         y += ttt * curve.endPoint.y;
47607         var width = curve.startWidth + ttt * widthDelta;
47608         this.drawCurveSegment(x, y, width);
47609         }
47610         ctx.closePath();
47611         ctx.fill();
47612     },
47613     
47614     drawCurveSegment: function (x, y, width) {
47615         var ctx = this.canvasElCtx();
47616         ctx.moveTo(x, y);
47617         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
47618         this.is_empty = false;
47619     },
47620     
47621     clear: function()
47622     {
47623         var ctx = this.canvasElCtx();
47624         var canvas = this.canvasEl().dom;
47625         ctx.fillStyle = this.bg_color;
47626         ctx.clearRect(0, 0, canvas.width, canvas.height);
47627         ctx.fillRect(0, 0, canvas.width, canvas.height);
47628         this.curve_data = [];
47629         this.reset();
47630         this.is_empty = true;
47631     },
47632     
47633     fileEl: function()
47634     {
47635         return  this.el.select('input',true).first();
47636     },
47637     
47638     canvasEl: function()
47639     {
47640         return this.el.select('canvas',true).first();
47641     },
47642     
47643     canvasElCtx: function()
47644     {
47645         return this.el.select('canvas',true).first().dom.getContext('2d');
47646     },
47647     
47648     getImage: function(type)
47649     {
47650         if(this.is_empty) {
47651             return false;
47652         }
47653         
47654         // encryption ?
47655         return this.canvasEl().dom.toDataURL('image/'+type, 1);
47656     },
47657     
47658     drawFromImage: function(img_src)
47659     {
47660         var img = new Image();
47661         
47662         img.onload = function(){
47663             this.canvasElCtx().drawImage(img, 0, 0);
47664         }.bind(this);
47665         
47666         img.src = img_src;
47667         
47668         this.is_empty = false;
47669     },
47670     
47671     selectImage: function()
47672     {
47673         this.fileEl().dom.click();
47674     },
47675     
47676     uploadImage: function(e)
47677     {
47678         var reader = new FileReader();
47679         
47680         reader.onload = function(e){
47681             var img = new Image();
47682             img.onload = function(){
47683                 this.reset();
47684                 this.canvasElCtx().drawImage(img, 0, 0);
47685             }.bind(this);
47686             img.src = e.target.result;
47687         }.bind(this);
47688         
47689         reader.readAsDataURL(e.target.files[0]);
47690     },
47691     
47692     // Bezier Point Constructor
47693     Point: (function () {
47694         function Point(x, y, time) {
47695             this.x = x;
47696             this.y = y;
47697             this.time = time || Date.now();
47698         }
47699         Point.prototype.distanceTo = function (start) {
47700             return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
47701         };
47702         Point.prototype.equals = function (other) {
47703             return this.x === other.x && this.y === other.y && this.time === other.time;
47704         };
47705         Point.prototype.velocityFrom = function (start) {
47706             return this.time !== start.time
47707             ? this.distanceTo(start) / (this.time - start.time)
47708             : 0;
47709         };
47710         return Point;
47711     }()),
47712     
47713     
47714     // Bezier Constructor
47715     Bezier: (function () {
47716         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
47717             this.startPoint = startPoint;
47718             this.control2 = control2;
47719             this.control1 = control1;
47720             this.endPoint = endPoint;
47721             this.startWidth = startWidth;
47722             this.endWidth = endWidth;
47723         }
47724         Bezier.fromPoints = function (points, widths, scope) {
47725             var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
47726             var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
47727             return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
47728         };
47729         Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
47730             var dx1 = s1.x - s2.x;
47731             var dy1 = s1.y - s2.y;
47732             var dx2 = s2.x - s3.x;
47733             var dy2 = s2.y - s3.y;
47734             var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
47735             var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
47736             var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
47737             var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
47738             var dxm = m1.x - m2.x;
47739             var dym = m1.y - m2.y;
47740             var k = l2 / (l1 + l2);
47741             var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
47742             var tx = s2.x - cm.x;
47743             var ty = s2.y - cm.y;
47744             return {
47745                 c1: new scope.Point(m1.x + tx, m1.y + ty),
47746                 c2: new scope.Point(m2.x + tx, m2.y + ty)
47747             };
47748         };
47749         Bezier.prototype.length = function () {
47750             var steps = 10;
47751             var length = 0;
47752             var px;
47753             var py;
47754             for (var i = 0; i <= steps; i += 1) {
47755                 var t = i / steps;
47756                 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
47757                 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
47758                 if (i > 0) {
47759                     var xdiff = cx - px;
47760                     var ydiff = cy - py;
47761                     length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
47762                 }
47763                 px = cx;
47764                 py = cy;
47765             }
47766             return length;
47767         };
47768         Bezier.prototype.point = function (t, start, c1, c2, end) {
47769             return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
47770             + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
47771             + (3.0 * c2 * (1.0 - t) * t * t)
47772             + (end * t * t * t);
47773         };
47774         return Bezier;
47775     }()),
47776     
47777     throttleStroke: function(fn, wait) {
47778       if (wait === void 0) { wait = 250; }
47779       var previous = 0;
47780       var timeout = null;
47781       var result;
47782       var storedContext;
47783       var storedArgs;
47784       var later = function () {
47785           previous = Date.now();
47786           timeout = null;
47787           result = fn.apply(storedContext, storedArgs);
47788           if (!timeout) {
47789               storedContext = null;
47790               storedArgs = [];
47791           }
47792       };
47793       return function wrapper() {
47794           var args = [];
47795           for (var _i = 0; _i < arguments.length; _i++) {
47796               args[_i] = arguments[_i];
47797           }
47798           var now = Date.now();
47799           var remaining = wait - (now - previous);
47800           storedContext = this;
47801           storedArgs = args;
47802           if (remaining <= 0 || remaining > wait) {
47803               if (timeout) {
47804                   clearTimeout(timeout);
47805                   timeout = null;
47806               }
47807               previous = now;
47808               result = fn.apply(storedContext, storedArgs);
47809               if (!timeout) {
47810                   storedContext = null;
47811                   storedArgs = [];
47812               }
47813           }
47814           else if (!timeout) {
47815               timeout = window.setTimeout(later, remaining);
47816           }
47817           return result;
47818       };
47819   }
47820   
47821 });
47822
47823  
47824
47825  // old names for form elements
47826 Roo.bootstrap.Form          =   Roo.bootstrap.form.Form;
47827 Roo.bootstrap.Input         =   Roo.bootstrap.form.Input;
47828 Roo.bootstrap.TextArea      =   Roo.bootstrap.form.TextArea;
47829 Roo.bootstrap.TriggerField  =   Roo.bootstrap.form.TriggerField;
47830 Roo.bootstrap.ComboBox      =   Roo.bootstrap.form.ComboBox;
47831 Roo.bootstrap.DateField     =   Roo.bootstrap.form.DateField;
47832 Roo.bootstrap.TimeField     =   Roo.bootstrap.form.TimeField;
47833 Roo.bootstrap.MonthField    =   Roo.bootstrap.form.MonthField;
47834 Roo.bootstrap.CheckBox      =   Roo.bootstrap.form.CheckBox;
47835 Roo.bootstrap.Radio         =   Roo.bootstrap.form.Radio;
47836 Roo.bootstrap.RadioSet      =   Roo.bootstrap.form.RadioSet;
47837 Roo.bootstrap.SecurePass    =   Roo.bootstrap.form.SecurePass;
47838 Roo.bootstrap.FieldLabel    =   Roo.bootstrap.form.FieldLabel;
47839 Roo.bootstrap.DateSplitField=   Roo.bootstrap.form.DateSplitField;
47840 Roo.bootstrap.NumberField   =   Roo.bootstrap.form.NumberField;
47841 Roo.bootstrap.PhoneInput    =   Roo.bootstrap.form.PhoneInput;
47842 Roo.bootstrap.PhoneInputData=   Roo.bootstrap.form.PhoneInputData;
47843 Roo.bootstrap.MoneyField    =   Roo.bootstrap.form.MoneyField;
47844 Roo.bootstrap.HtmlEditor    =   Roo.bootstrap.form.HtmlEditor;
47845 Roo.bootstrap.HtmlEditor.ToolbarStandard =   Roo.bootstrap.form.HtmlEditorToolbarStandard;
47846 Roo.bootstrap.Markdown      = Roo.bootstrap.form.Markdown;
47847 Roo.bootstrap.CardUploader  = Roo.bootstrap.form.CardUploader;// depricated.
47848 Roo.bootstrap.Navbar            = Roo.bootstrap.nav.Bar;
47849 Roo.bootstrap.NavGroup          = Roo.bootstrap.nav.Group;
47850 Roo.bootstrap.NavHeaderbar      = Roo.bootstrap.nav.Headerbar;
47851 Roo.bootstrap.NavItem           = Roo.bootstrap.nav.Item;
47852
47853 Roo.bootstrap.NavProgressBar     = Roo.bootstrap.nav.ProgressBar;
47854 Roo.bootstrap.NavProgressBarItem = Roo.bootstrap.nav.ProgressBarItem;
47855
47856 Roo.bootstrap.NavSidebar        = Roo.bootstrap.nav.Sidebar;
47857 Roo.bootstrap.NavSidebarItem    = Roo.bootstrap.nav.SidebarItem;
47858
47859 Roo.bootstrap.NavSimplebar      = Roo.bootstrap.nav.Simplebar;// deprciated 
47860 Roo.bootstrap.Menu = Roo.bootstrap.menu.Menu;
47861 Roo.bootstrap.MenuItem =  Roo.bootstrap.menu.Item;
47862 Roo.bootstrap.MenuSeparator = Roo.bootstrap.menu.Separator
47863