autoCreate : false,
- initEvents : function() { },
+ tooltip : null,
+ /**
+ * Initialize Events for the element
+ */
+ initEvents : function() { },
xattr : false,
cfg.name = this.name;
}
+
+
this.el = ct.createChild(cfg, position);
+ if (this.tooltip) {
+ this.tooltipEl().attr('tooltip', this.tooltip);
+ }
+
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
},
-
+ /**
+ * Fetch the element to add children to
+ * @return {Roo.Element} defaults to this.el
+ */
getChildContainer : function()
{
return this.el;
},
-
-
+ /**
+ * Fetch the element to display the tooltip on.
+ * @return {Roo.Element} defaults to this.el
+ */
+ tooltipEl : function()
+ {
+ return this.el;
+ },
+
addxtype : function(tree,cntr)
{
var cn = this;
var self_cntr_el = Roo.get(this[cntr](false));
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
+
+ // there is a scenario where some of the child elements are flexy:if (and all of the same type)
+ // and are not displayed -this causes this to use up the wrong element when matching.
+ // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
+
+
if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
// Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
//echild.dom.removeAttribute('xtype');
} else {
Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
-
+ Roo.log(self_cntr_el);
+ Roo.log(echild);
+ Roo.log(cn);
}
}
//Roo.log( size + ':' + settings[size]);
if (settings[size+'off'] !== false) {
- cfg.cls += ' col-' + settings[size+'off'] + '-offset';
+ cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
}
if (settings[size] === false) {
// private
function onMouseDown(e){
Roo.log("on MouseDown");
- if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
+ if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu") && !e.getTarget('.user-menu')){
hideAll();
}
onClick : function(e){
Roo.log("menu.onClick");
var t = this.findTargetItem(e);
- if(!t){
+ if(!t || t.isContainer){
return;
}
Roo.log(e);
}
*/
+
Roo.log('pass click event');
t.onClick(e);
* @cfg {String} html the menu label
* @cfg {String} href the link
* @cfg {Boolean} preventDefault (true | false) default true
+ * @cfg {Boolean} isContainer (true | false) default false
*
*
* @constructor
href : false,
html : false,
preventDefault: true,
+ isContainer : false,
getAutoCreate : function(){
+
+ if(this.isContainer){
+ return {
+ tag: 'li',
+ cls: 'dropdown-menu-item'
+ };
+ }
+
var cfg= {
tag: 'li',
cls: 'dropdown-menu-item',
* @cfg {Boolean} specificTitle (true|false) default false
* @cfg {Array} buttons Array of buttons or standard button set..
* @cfg {String} buttonPosition (left|right|center) default right
+ * @cfg {Boolean} animate (true | false) default true
*
* @constructor
* Create a new Modal Dialog
buttonPosition: 'right',
+ animate : true,
+
onRender : function(ct, position)
{
Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
title = this.title;
};
- return modal = {
- cls: "modal fade",
+ var modal = {
+ cls: "modal",
style : 'display: none',
cn : [
{
}
]
-
-
};
+
+ if(this.animate){
+ modal.cls += ' fade';
+ }
+
+ return modal;
},
getChildContainer : function() {
if (!this.rendered) {
this.render();
}
-
- this.el.addClass('on');
- this.el.removeClass('fade');
+
this.el.setStyle('display', 'block');
+
+ if(this.animate){
+ var _this = this;
+ (function(){ _this.el.addClass('in'); }).defer(50);
+ }else{
+ this.el.addClass('in');
+ }
+
Roo.get(document.body).addClass("x-body-masked");
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.show();
},
hide : function()
{
- Roo.log('Modal hide?!');
this.maskEl.hide();
Roo.get(document.body).removeClass("x-body-masked");
- this.el.removeClass('on');
- this.el.addClass('fade');
- this.el.setStyle('display', 'none');
+ this.el.removeClass('in');
+
+ if(this.animate){
+ var _this = this;
+ (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
+ }else{
+ this.el.setStyle('display', 'none');
+ }
+
this.fireEvent('hide', this);
},
item.navId = this.navId;
},
-
+
+ /**
+ * clear all the Navigation item
+ */
+
+ clearAll : function()
+ {
+ this.navItems = [];
+ this.el.dom.innerHTML = '';
+ },
getNavItem: function(tabId)
{
return cfg;
},
- initEvents: function() {
- // Roo.log('init events?');
- // Roo.log(this.el.dom);
+ initEvents: function()
+ {
if (typeof (this.menu) != 'undefined') {
this.menu.parentType = this.xtype;
this.menu.triggerEl = this.el;
this.addxtype(Roo.apply({}, this.menu));
}
-
-
+
this.el.select('a',true).on('click', this.onClick, this);
+
+ if(this.tagtype == 'span'){
+ this.el.select('span',true).on('click', this.onClick, this);
+ }
+
// at this point parent should be available..
this.parent().register(this);
},
if(this.fireEvent('click', this, e) === false){
return;
};
+
+ if(this.tagtype == 'span'){
+ return;
+ }
+
var p = this.parent();
if (['tabs','pills'].indexOf(p.type)!==-1) {
if (typeof(p.setActiveItem) !== 'undefined') {
{
return this.el.select('input.form-control',true).first();
},
+
+ tooltipEl : function()
+ {
+ return this.inputEl();
+ },
+
setDisabled : function(v)
{
var i = this.inputEl().dom;
},
initEvents : function()
{
-
+
this.inputEl().on("keydown" , this.fireKey, this);
this.inputEl().on("focus", this.onFocus, this);
this.inputEl().on("blur", this.onBlur, this);
if (s.id) {
var g = this.getJsonAccessor(s.id);
this.getId = function(rec) {
- var r = g(rec);
+ var r = g(rec);
return (r === undefined || r === "") ? null : r;
};
} else {
if (!opts.add) {
this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
}
-// this.restrictHeight();
+ this.restrictHeight();
this.selectedIndex = -1;
},
setFromData : function(o){
if(this.multiple){
- if(typeof o.display_name !== 'string'){
- for(var i=0;i<o.display_name.length;i++){
- this.addItem({'id':o.id[i],'display_name':o.display_name[i]});
- }
- return;
- }
this.addItem(o);
return;
}
Roo.log('expand');
- var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
- this.list.setWidth(lw);
-
this.list.show();
this.restrictHeight();
* @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
*/
select : function(nodeInfo, keepExisting, suppressEvent){
+ Roo.log('running Roo.View select!!!!!!!!!!!!!!!!!!!!!!1');
if(nodeInfo instanceof Array){
if(!keepExisting){
this.clearSelections(true);
if(!keepExisting){
this.clearSelections(true);
}
+
+ Roo.log(this.parent);
+// var el = this.view.getNode(index);
+// if(el && !this.multiple && !this.tickable){
+// this.list.scrollChildIntoView(el, false);
+// }
+
if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
Roo.fly(node).addClass(this.selectedClass);
this.selections.push(node);
* @cfg {String} placement how it is placed
* @cfg {String} trigger click || hover (or false to trigger manually)
* @cfg {String} over what (parent or false to trigger manually.)
- *
+ * @cfg {Number} delay - delay before showing
+
* @constructor
* Create a new Popover
* @param {Object} config The config object
placement : 'right',
trigger : 'hover', // hover
+ delay : 0,
+
over: 'parent',
can_build_overlaid : false,
return value;
}
var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
+ if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
v = Date.parseDate(value, 'Y-m-d');
}
if(!v && this.altFormats){
setValue: function(v)
{
- var d = new Date(v).clearTime();
+ // v can be a string or a date..
+
+
+ var d = new Date(this.parseDate(v) ).clearTime();
+
+ Roo.log(d);
+ Roo.log(d);
if(isNaN(d.getTime())){
this.date = this.viewDate = '';
Roo.bootstrap.DateField.superclass.setValue.call(this, '');
var nodeName = target.nodeName;
var className = target.className;
var html = target.innerHTML;
+ //Roo.log(nodeName);
switch(nodeName.toLowerCase()) {
case 'th':
}
break;
case 'span':
- if (className.indexOf('disabled') === -1) {
+ if (className.indexOf('disabled') < 0) {
this.viewDate.setUTCDate(1);
- if (className.indexOf('month') !== -1) {
+ if (className.indexOf('month') > -1) {
this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
} else {
var year = parseInt(html, 10) || 0;
break;
case 'td':
- if (className.indexOf('day') !== -1 && className.indexOf('disabled') === -1){
+ //Roo.log(className);
+ if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
var day = parseInt(html, 10) || 1;
var year = this.viewDate.getUTCFullYear(),
month = this.viewDate.getUTCMonth();
- if (className.indexOf('old') !== -1) {
+ if (className.indexOf('old') > -1) {
if(month === 0 ){
month = 11;
year -= 1;
}else{
month -= 1;
}
- } else if (className.indexOf('new') !== -1) {
+ } else if (className.indexOf('new') > -1) {
if (month == 11) {
month = 0;
year += 1;
month += 1;
}
}
+ //Roo.log([year,month,day]);
this.date = this.UTCDate(year, month, day,0,0,0,0);
this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
// this.fill();
+ //Roo.log(this.formatDate(this.date));
this.setValue(this.formatDate(this.date));
this.hide();
}
Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+
+
this.addEvents({
/**
* @event initialize
*/
editorevent: true
});
-
+
+ // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+
+ // defaults : white / black...
+ this.applyBlacklists();
+
+
+
};
clearUp: true,
+ // blacklist + whitelisted elements..
+ black: false,
+ white: false,
// clean up silly Windows -- stuff?
return;
}
+ var lcname = node.tagName.toLowerCase();
+ // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
+ // whitelist of tags..
- if (Roo.HtmlEditorCore.black.indexOf(node.tagName.toLowerCase()) > -1 && this.clearUp) {
+ if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
// remove node.
node.parentNode.removeChild(node);
return;
}
+ var cwhite = this.cwhite;
+ var cblack = this.cblack;
+
function cleanStyle(n,v)
{
if (v.match(/expression/)) { //XSS?? should we even bother..
node.removeAttribute(n);
return;
}
- var cwhite = typeof(ed.cwhite) == 'undefined' ? Roo.HtmlEditorCore.cwhite : ed.cwhite;
- var cblack = typeof(ed.cblack) == 'undefined' ? Roo.HtmlEditorCore.cblack : ed.cblack;
-
var parts = v.split(/;/);
var clean = [];
var l = p.split(':').shift().replace(/\s+/g,'');
l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if ( cblack.indexOf(l) > -1) {
+ if ( cwhite.length && cblack.indexOf(l) > -1) {
// Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
//node.removeAttribute(n);
return true;
},
domToHTML : function(currentElement, depth, nopadtext) {
- depth = depth || 0;
- nopadtext = nopadtext || false;
+ depth = depth || 0;
+ nopadtext = nopadtext || false;
+
+ if (!currentElement) {
+ return this.domToHTML(this.doc.body);
+ }
+
+ //Roo.log(currentElement);
+ var j;
+ var allText = false;
+ var nodeName = currentElement.nodeName;
+ var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
+
+ if (nodeName == '#text') {
+ return currentElement.nodeValue;
+ }
- if (!currentElement) {
- return this.domToHTML(this.doc.body);
+
+ var ret = '';
+ if (nodeName != 'BODY') {
+
+ var i = 0;
+ // Prints the node tagName, such as <A>, <IMG>, etc
+ if (tagName) {
+ var attr = [];
+ for(i = 0; i < currentElement.attributes.length;i++) {
+ // quoting?
+ var aname = currentElement.attributes.item(i).name;
+ if (!currentElement.attributes.item(i).value.length) {
+ continue;
+ }
+ attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
+ }
+
+ ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
+ }
+ else {
+
+ // eack
}
-
- //Roo.log(currentElement);
- var j;
- var allText = false;
- var nodeName = currentElement.nodeName;
- var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
-
- if (nodeName == '#text') {
- return currentElement.nodeValue;
+ } else {
+ tagName = false;
+ }
+ if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
+ return ret;
+ }
+ if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
+ nopadtext = true;
+ }
+
+
+ // Traverse the tree
+ i = 0;
+ var currentElementChild = currentElement.childNodes.item(i);
+ var allText = true;
+ var innerHTML = '';
+ lastnode = '';
+ while (currentElementChild) {
+ // Formatting code (indent the tree so it looks nice on the screen)
+ var nopad = nopadtext;
+ if (lastnode == 'SPAN') {
+ nopad = true;
}
-
-
- var ret = '';
- if (nodeName != 'BODY') {
-
- var i = 0;
- // Prints the node tagName, such as <A>, <IMG>, etc
- if (tagName) {
- var attr = [];
- for(i = 0; i < currentElement.attributes.length;i++) {
- // quoting?
- var aname = currentElement.attributes.item(i).name;
- if (!currentElement.attributes.item(i).value.length) {
- continue;
- }
- attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
- }
-
- ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
- }
- else {
-
- // eack
+ // text
+ if (currentElementChild.nodeName == '#text') {
+ var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
+ if (!nopad && toadd.length > 80) {
+ innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
}
- } else {
- tagName = false;
+ innerHTML += toadd;
+
+ i++;
+ currentElementChild = currentElement.childNodes.item(i);
+ lastNode = '';
+ continue;
}
- if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
- return ret;
+ allText = false;
+
+ innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
+
+ // Recursively traverse the tree structure of the child node
+ innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
+ lastnode = currentElementChild.nodeName;
+ i++;
+ currentElementChild=currentElement.childNodes.item(i);
+ }
+
+ ret += innerHTML;
+
+ if (!allText) {
+ // The remaining code is mostly for formatting the tree
+ ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
+ }
+
+
+ if (tagName) {
+ ret+= "</"+tagName+">";
+ }
+ return ret;
+
+ },
+
+ applyBlacklists : function()
+ {
+ var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
+ var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+
+ this.white = [];
+ this.black = [];
+ Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.white.push(tag);
+
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
}
- if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
- nopadtext = true;
+ if (this.white.indexOf(tag) > -1) {
+ return;
}
+ this.white.push(tag);
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
- // Traverse the tree
- i = 0;
- var currentElementChild = currentElement.childNodes.item(i);
- var allText = true;
- var innerHTML = '';
- lastnode = '';
- while (currentElementChild) {
- // Formatting code (indent the tree so it looks nice on the screen)
- var nopad = nopadtext;
- if (lastnode == 'SPAN') {
- nopad = true;
- }
- // text
- if (currentElementChild.nodeName == '#text') {
- var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
- if (!nopad && toadd.length > 80) {
- innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
- }
- innerHTML += toadd;
-
- i++;
- currentElementChild = currentElement.childNodes.item(i);
- lastNode = '';
- continue;
- }
- allText = false;
-
- innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
-
- // Recursively traverse the tree structure of the child node
- innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
- lastnode = currentElementChild.nodeName;
- i++;
- currentElementChild=currentElement.childNodes.item(i);
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
+ if (this.black.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
- ret += innerHTML;
+ }, this);
+
+
+ w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
+ b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
+
+ this.cwhite = [];
+ this.cblack = [];
+ Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
- if (!allText) {
- // The remaining code is mostly for formatting the tree
- ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
}
+ if (this.cwhite.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
- if (tagName) {
- ret+= "</"+tagName+">";
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
- return ret;
+ if (this.cblack.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
- }
+ }, this);
+ }
// hide stuff that is not compatible
/**
* @cfg {String} title Title of the TabBox
* @cfg {String} icon Icon of the TabBox
* @cfg {Boolean} showtabs (true|false) show the tabs default true
+ * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
*
* @constructor
* Create a new TabBox
* When a pane is added
* @param {Roo.bootstrap.dash.TabPane} pane
*/
- "addpane" : true
+ "addpane" : true,
+ /**
+ * @event activatepane
+ * When a pane is activated
+ * @param {Roo.bootstrap.dash.TabPane} pane
+ */
+ "activatepane" : true
+
});
+
+ this.panes = [];
};
Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
title : '',
icon : false,
showtabs : true,
+ tabScrollable : false,
getChildContainer : function()
{
});
}
+ var h = {
+ tag: 'ul',
+ cls: 'nav nav-tabs pull-right',
+ cn: [
+ header
+ ]
+ };
+
+ if(this.tabScrollable){
+ h = {
+ tag: 'div',
+ cls: 'tab-header',
+ cn: [
+ {
+ tag: 'ul',
+ cls: 'nav nav-tabs pull-right',
+ cn: [
+ header
+ ]
+ }
+ ]
+ }
+ }
var cfg = {
tag: 'div',
cls: 'nav-tabs-custom',
cn: [
- {
- tag: 'ul',
- cls: 'nav nav-tabs pull-right',
- cn: [
- header
- ]
- },
+ h,
{
tag: 'div',
cls: 'tab-content no-padding',
},
onAddPane : function(pane)
{
+ this.panes.push(pane);
//Roo.log('addpane');
//Roo.log(pane);
// tabs are rendere left to right..
this.getChildContainer().select('.tab-pane',true).removeClass('active');
// technically we should have a deactivate event.. but maybe add later.
// and it should not de-activate the selected tab...
-
+ this.fireEvent('activatepane', pane);
pane.el.addClass('active');
pane.fireEvent('activate');
+ },
+
+ getActivePane : function()
+ {
+ var r = false;
+ Roo.each(this.panes, function(p) {
+ if(p.el.hasClass('active')){
+ r = p;
+ return false;
+ }
+
+ return;
+ });
+
+ return r;
}
+ /*
+ * - LGPL
+ *
+ * Tooltip
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.Tooltip
+ * Bootstrap Tooltip class
+ * This is basic at present - all componets support it by default, however they should add tooltipEl() method
+ * to determine which dom element triggers the tooltip.
+ *
+ * It needs to add support for additional attributes like tooltip-position
+ *
+ * @constructor
+ * Create a new Toolti
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.Tooltip = function(config){
+ Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
+};
+
+Roo.apply(Roo.bootstrap.Tooltip, {
+ /**
+ * @function init initialize tooltip monitoring.
+ * @static
+ */
+ currentEl : false,
+ currentTip : false,
+ currentRegion : false,
+
+ // init : delay?
+
+ init : function()
+ {
+ Roo.get(document).on('mouseover', this.enter ,this);
+ Roo.get(document).on('mouseout', this.leave, this);
+
+
+ this.currentTip = new Roo.bootstrap.Tooltip();
+ },
+
+ enter : function(ev)
+ {
+ var dom = ev.getTarget();
+ //Roo.log(['enter',dom]);
+ var el = Roo.fly(dom);
+ if (this.currentEl) {
+ //Roo.log(dom);
+ //Roo.log(this.currentEl);
+ //Roo.log(this.currentEl.contains(dom));
+ if (this.currentEl == el) {
+ return;
+ }
+ if (dom != this.currentEl.dom && this.currentEl.contains(dom)) {
+ return;
+ }
+
+ }
+
+
+
+ if (this.currentTip) {
+ this.currentTip.hide();
+ }
+ //Roo.log(el);
+ if (!el.attr('tooltip')) { // parents who have tip?
+ return;
+ }
+ this.currentEl = el;
+ this.currentTip.bind(el);
+ this.currentRegion = Roo.lib.Region.getRegion(dom);
+ this.currentTip.enter();
+
+ },
+ leave : function(ev)
+ {
+ var dom = ev.getTarget();
+ //Roo.log(['leave',dom]);
+ if (!this.currentEl) {
+ return;
+ }
+
+
+ if (dom != this.currentEl.dom) {
+ return;
+ }
+ var xy = ev.getXY();
+ if (this.currentRegion.contains( new Roo.lib.Region( xy[1], xy[0] ,xy[1], xy[0] ))) {
+ return;
+ }
+ // only activate leave if mouse cursor is outside... bounding box..
+
+
+
+
+ if (this.currentTip) {
+ this.currentTip.leave();
+ }
+ //Roo.log('clear currentEl');
+ this.currentEl = false;
+
+
+ },
+ alignment : {
+ 'left' : ['r-l', [-2,0], 'right'],
+ 'right' : ['l-r', [2,0], 'left'],
+ 'bottom' : ['t-b', [0,2], 'top'],
+ 'top' : [ 'b-t', [0,-2], 'bottom']
+ }
+
+});
+
+
+Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, {
+
+
+ bindEl : false,
+
+ delay : null, // can be { show : 300 , hide: 500}
+
+ timeout : null,
+
+ hoverState : null, //???
+
+ placement : 'bottom',
+
+ getAutoCreate : function(){
+
+ var cfg = {
+ cls : 'tooltip',
+ role : 'tooltip',
+ cn : [
+ {
+ cls : 'tooltip-arrow'
+ },
+ {
+ cls : 'tooltip-inner',
+ }
+ ]
+ };
+
+ return cfg;
+ },
+ bind : function(el)
+ {
+ this.bindEl = el;
+ },
+
+
+ enter : function () {
+
+ if (this.timeout != null) {
+ clearTimeout(this.timeout);
+ }
+
+ this.hoverState = 'in'
+ //Roo.log("enter - show");
+ if (!this.delay || !this.delay.show) {
+ this.show();
+ return
+ }
+ var _t = this;
+ this.timeout = setTimeout(function () {
+ if (_t.hoverState == 'in') {
+ _t.show();
+ }
+ }, this.delay.show)
+ },
+ leave : function()
+ {
+ clearTimeout(this.timeout);
+
+ this.hoverState = 'out'
+ if (!this.delay || !this.delay.hide) {
+ this.hide();
+ return
+ }
+
+ var _t = this;
+ this.timeout = setTimeout(function () {
+ //Roo.log("leave - timeout");
+
+ if (_t.hoverState == 'out') {
+ _t.hide();
+ Roo.bootstrap.Tooltip.currentEl = false;
+ }
+ }, delay)
+ },
+
+ show : function ()
+ {
+ if (!this.el) {
+ this.render(document.body);
+ }
+ // set content.
+ //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
+ this.el.select('.tooltip-inner',true).first().dom.innerHTML = this.bindEl.attr('tooltip');
+
+ this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
+
+ var placement = typeof this.placement == 'function' ?
+ this.placement.call(this, this.el, on_el) :
+ this.placement;
+
+ var autoToken = /\s?auto?\s?/i;
+ var autoPlace = autoToken.test(placement);
+ if (autoPlace) {
+ placement = placement.replace(autoToken, '') || 'top';
+ }
+
+ //this.el.detach()
+ //this.el.setXY([0,0]);
+ this.el.show();
+ //this.el.dom.style.display='block';
+ this.el.addClass(placement);
+
+ //this.el.appendTo(on_el);
+
+ var p = this.getPosition();
+ var box = this.el.getBox();
+
+ if (autoPlace) {
+ // fixme..
+ }
+ var align = Roo.bootstrap.Tooltip.alignment[placement]
+ this.el.alignTo(this.bindEl, align[0],align[1]);
+ //var arrow = this.el.select('.arrow',true).first();
+ //arrow.set(align[2],
+
+ this.el.addClass('in fade');
+ this.hoverState = null;
+
+ if (this.el.hasClass('fade')) {
+ // fade it?
+ }
+
+ },
+ hide : function()
+ {
+
+ if (!this.el) {
+ return;
+ }
+ //this.el.setXY([0,0]);
+ this.el.removeClass('in');
+ //this.el.hide();
+
+ }
+
+});
+
+
\ No newline at end of file
projects / roojs1 / blobdiff