From 9d698f44b31ea8db9db822bcc3029a8be4862a4d Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Thu, 28 Jan 2021 15:57:38 +0800 Subject: [PATCH] sync --- docs/json/roodata.json | 40 ++++-- docs/src/Roo_bootstrap_Popover.js.html | 180 +++++++++++++++++++----- docs/symbols/Roo.bootstrap.Popover.json | 90 +++++++++--- 3 files changed, 245 insertions(+), 65 deletions(-) diff --git a/docs/json/roodata.json b/docs/json/roodata.json index 91c0a87efe..0d7decd091 100644 --- a/docs/json/roodata.json +++ b/docs/json/roodata.json @@ -49296,6 +49296,12 @@ "desc" : "which property holds the element that used for hide() / show() / disable() / enable()\ndefault is 'el' for forms you probably want to set this to fieldEl", "memberOf" : "Roo.Component" }, + { + "name" : "add", + "type" : "String|Boolean|Roo.Element", + "desc" : "click hander to trigger show over what element\n - if false and it has a 'parent' then it will be automatically added to that element\n - if string - Roo.get will be called", + "memberOf" : "" + }, { "name" : "allowDomMove", "type" : "Boolean", @@ -49359,18 +49365,18 @@ "desc" : "list of events and functions to call for this object, \nFor example :\n
\n    listeners :  { \n       'click' : function(e) {\n           ..... \n        } ,\n        .... \n    } \n
", "memberOf" : "Roo.util.Observable" }, + { + "name" : "modal", + "type" : "Boolean", + "desc" : "- popovers that are modal will mask the screen, and must be closed with another event.", + "memberOf" : "" + }, { "name" : "name", "type" : "string", "desc" : "Specifies name attribute", "memberOf" : "Roo.bootstrap.Component" }, - { - "name" : "over", - "type" : "String", - "desc" : "what (parent or false to trigger manually.)", - "memberOf" : "" - }, { "name" : "style", "type" : "String", @@ -49659,6 +49665,14 @@ "static" : false, "memberOf" : "Roo.Component" }, + { + "name" : "setContent", + "type" : "function", + "desc" : "", + "sig" : "(the)", + "static" : false, + "memberOf" : "" + }, { "name" : "setDisabled", "type" : "function", @@ -49667,6 +49681,14 @@ "static" : false, "memberOf" : "Roo.Component" }, + { + "name" : "setTitle", + "type" : "function", + "desc" : "", + "sig" : "(the)", + "static" : false, + "memberOf" : "" + }, { "name" : "setVisibilityEl", "type" : "function", @@ -49686,10 +49708,10 @@ { "name" : "show", "type" : "function", - "desc" : "Show a component - removes 'hidden' class", - "sig" : "()\n{\n\n}", + "desc" : "Show the popover", + "sig" : "(-)", "static" : false, - "memberOf" : "Roo.bootstrap.Component" + "memberOf" : "" }, { "name" : "tooltipEl", diff --git a/docs/src/Roo_bootstrap_Popover.js.html b/docs/src/Roo_bootstrap_Popover.js.html index 3e7f818411..37fef42a2f 100644 --- a/docs/src/Roo_bootstrap_Popover.js.html +++ b/docs/src/Roo_bootstrap_Popover.js.html @@ -13,7 +13,10 @@ * @cfg {String} title of popover (or false to hide) * @cfg {String|function} (right|top|bottom|left|auto) 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 {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event. + * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element + * - if false and it has a 'parent' then it will be automatically added to that element + * - if string - Roo.get will be called * @cfg {Number} delay - delay before showing * @constructor @@ -45,18 +48,20 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { - title: 'Fill in a title', + title: false, html: false, placement : 'right', trigger : 'hover', // hover - + modal : false, delay : 0, - over: 'parent', + over: false, can_build_overlaid : false, + maskEl : false, // the mask element + getChildContainer : function() { return this.el.select('.popover-content',true).first(); @@ -65,23 +70,23 @@ getAutoCreate : function(){ var cfg = { - cls : 'popover roo-dynamic', + cls : 'popover roo-dynamic shadow roo-popover' + (this.modal ? '-modal' : ''), style: 'display:block', cn : [ { cls : 'arrow' }, { - cls : 'popover-inner', + cls : 'popover-inner ', cn : [ { tag: 'h3', cls: 'popover-title popover-header', - html : this.title + html : this.title || '' }, { - cls : 'popover-content popover-body', - html : this.html + cls : 'popover-content popover-body' + this.cls, + html : this.html || '' } ] @@ -91,15 +96,27 @@ return cfg; }, + /** + * @param {string} the title + */ setTitle: function(str) { this.title = str; - this.el.select('.popover-title',true).first().dom.innerHTML = str; + if (this.el) { + this.el.select('.popover-title',true).first().dom.innerHTML = str; + } + }, + /** + * @param {string} the body content + */ setContent: function(str) { this.html = str; - this.el.select('.popover-content',true).first().dom.innerHTML = str; + if (this.el) { + this.el.select('.popover-content',true).first().dom.innerHTML = str; + } + }, // as it get's added to the bottom of the page. onRender : function(ct, position) @@ -132,22 +149,41 @@ this.items = nitems; + this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true); + Roo.EventManager.onWindowResize(this.resizeMask, this, true); + this.initEvents(); }, + resizeMask : function() + { + this.maskEl.setSize( + Roo.lib.Dom.getViewWidth(true), + Roo.lib.Dom.getViewHeight(true) + ); + }, + initEvents : function() { + + if (!this.modal) { + Roo.bootstrap.Popover.register(this); + } + + this.el.select('.popover-title',true).setVisibilityMode(Roo.Element.DISPLAY); this.el.enableDisplayMode('block'); this.el.hide(); - if (this.over === false) { + if (this.over === false && !this.parent()) { return; } if (this.triggers === false) { return; } - var on_el = (this.over == 'parent') ? this.parent().el : Roo.get(this.over); + + // support parent + var on_el = (this.over == 'parent' || this.over === false) ? this.parent().el : Roo.get(this.over); var triggers = this.trigger ? this.trigger.split(' ') : []; Roo.each(triggers, function(trigger) { @@ -207,42 +243,54 @@ } }, this.delay.hide) }, - + /** + * Show the popover + * @param {Roo.Element|string|false} - element to align and point to. + */ show : function (on_el) { + + on_el = on_el || false; // default to false if (!on_el) { - on_el= (this.over == 'parent') ? this.parent().el : Roo.get(this.over); + if (this.parent() && (this.over == 'parent' || (this.over === false))) { + on_el = this.parent().el; + } else if (this.over) { + Roo.get(this.over); + } + } if (!this.el) { - this.render(); + this.render(document.body); } - // set content. - this.el.select('.popover-title',true).first().dom.innerHtml = this.title; - if (this.html !== false) { - this.el.select('.popover-content',true).first().dom.innerHtml = this.html; - } + this.el.removeClass([ 'fade','top','bottom', 'left', 'right','in', 'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right' ]); + if (!this.title.length) { this.el.select('.popover-title',true).hide(); } + 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'; + /* + var autoToken = /\s?auto?\s?/i; /// not sure how this was supposed to work? right auto ? what? + + // I think 'auto right' - but + + 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'; @@ -251,14 +299,24 @@ var p = this.getPosition(); var box = this.el.getBox(); - if (autoPlace) { - // fixme.. - } + var align = Roo.bootstrap.Popover.alignment[placement]; this.el.addClass(align[2]); // Roo.log(align); - this.el.alignTo(on_el, align[0],align[1]); + + if (on_el) { + this.el.alignTo(on_el, align[0],align[1]); + } else { + // this is usually just done by the builder = to show the popoup in the middle of the scren. + var es = this.el.getSize(); + var x = Roo.lib.Dom.getViewWidth()/2; + var y = Roo.lib.Dom.getViewHeight()/2; + this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); + + } + + //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], @@ -271,6 +329,16 @@ this.hoverState = 'in'; + if (this.modal) { + this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true)); + this.maskEl.setStyle('z-index', Roo.bootstrap.Popover.zIndex++); + this.maskEl.dom.style.display = 'block'; + this.maskEl.addClass('show'); + } + this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++); + + + this.fireEvent('show', this); }, @@ -280,17 +348,51 @@ this.el.removeClass('in'); this.el.hide(); this.hoverState = null; - + this.maskEl.hide(); // always.. this.fireEvent('hide', this); } }); -Roo.bootstrap.Popover.alignment = { - 'left' : ['r-l', [-10,0], 'right bs-popover-right'], - 'right' : ['l-r', [10,0], 'left bs-popover-left'], - 'bottom' : ['t-b', [0,10], 'top bs-popover-top'], - 'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom'] -}; - \ No newline at end of file +Roo.apply(Roo.bootstrap.Popover, { + + alignment : { + 'left' : ['r-l', [-10,0], 'left bs-popover-left'], + 'right' : ['l-br', [10,0], 'right bs-popover-right'], + 'bottom' : ['t-b', [0,10], 'top bs-popover-top'], + 'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom'] + }, + + zIndex : 20001, + + clickHander : false, + + + onMouseDown : function(e) + { + if (!e.getTarget(".roo-popover")) { + this.hideAll(); + } + + }, + + popups : [], + + register : function(popup) + { + if (!Roo.bootstrap.Popover.clickHandler) { + Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover); + } + // hide other popups. + this.hideAll(); + this.popups.push(popup); + }, + hideAll : function() + { + this.popups.forEach(function(p) { + p.hide(); + }); + } + +}); \ No newline at end of file diff --git a/docs/symbols/Roo.bootstrap.Popover.json b/docs/symbols/Roo.bootstrap.Popover.json index 21d79b451e..46871dab70 100644 --- a/docs/symbols/Roo.bootstrap.Popover.json +++ b/docs/symbols/Roo.bootstrap.Popover.json @@ -25,9 +25,9 @@ "returns" : [], "config" : [ { - "name" : "over", - "type" : "String", - "desc" : "what (parent or false to trigger manually.)", + "name" : "modal", + "type" : "Boolean", + "desc" : "- popovers that are modal will mask the screen, and must be closed with another event.", "memberOf" : "Roo.bootstrap.Popover", "values" : [] }, @@ -38,6 +38,13 @@ "memberOf" : "Roo.util.Observable", "values" : [] }, + { + "name" : "add", + "type" : "String|Boolean|Roo.Element", + "desc" : "click hander to trigger show over what element\n - if false and it has a 'parent' then it will be automatically added to that element\n - if string - Roo.get will be called", + "memberOf" : "Roo.bootstrap.Popover", + "values" : [] + }, { "name" : "tooltip", "type" : "string", @@ -173,42 +180,91 @@ ], "methods" : [ { - "name" : "tooltipEl", - "desc" : "Fetch the element to display the tooltip on.", + "name" : "setContent", + "desc" : "", "isStatic" : false, "isConstructor" : false, "isPrivate" : false, - "memberOf" : "Roo.bootstrap.Component", + "memberOf" : "Roo.bootstrap.Popover", "example" : "", "deprecated" : "", "since" : "", "see" : "", - "params" : [], - "returns" : [ + "params" : [ { - "name" : "", - "type" : "Roo.Element", - "desc" : "defaults to this.el" + "name" : "the", + "type" : "string", + "desc" : "body content", + "isOptional" : false } - ] + ], + "returns" : [] }, { - "name" : "hide", - "desc" : "Hide a component - adds 'hidden' class", + "name" : "setTitle", + "desc" : "", "isStatic" : false, "isConstructor" : false, "isPrivate" : false, - "memberOf" : "Roo.bootstrap.Component", + "memberOf" : "Roo.bootstrap.Popover", "example" : "", "deprecated" : "", "since" : "", "see" : "", - "params" : [], + "params" : [ + { + "name" : "the", + "type" : "string", + "desc" : "title", + "isOptional" : false + } + ], "returns" : [] }, { "name" : "show", - "desc" : "Show a component - removes 'hidden' class", + "desc" : "Show the popover", + "isStatic" : false, + "isConstructor" : false, + "isPrivate" : false, + "memberOf" : "Roo.bootstrap.Popover", + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "params" : [ + { + "name" : "-", + "type" : "Roo.Element|string|false", + "desc" : "element to align and point to.", + "isOptional" : false + } + ], + "returns" : [] + }, + { + "name" : "tooltipEl", + "desc" : "Fetch the element to display the tooltip on.", + "isStatic" : false, + "isConstructor" : false, + "isPrivate" : false, + "memberOf" : "Roo.bootstrap.Component", + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "params" : [], + "returns" : [ + { + "name" : "", + "type" : "Roo.Element", + "desc" : "defaults to this.el" + } + ] + }, + { + "name" : "hide", + "desc" : "Hide a component - adds 'hidden' class", "isStatic" : false, "isConstructor" : false, "isPrivate" : false, -- 2.39.2