diff --git a/dist/js/vue-popper.js b/dist/js/vue-popper.js index df0ee89..96800f6 100644 --- a/dist/js/vue-popper.js +++ b/dist/js/vue-popper.js @@ -367,7 +367,7 @@ var VuePopper$1 = { render: function render() { }, this.delayOnMouseOut); }, handleDocumentClick: function handleDocumentClick(e) { - if (!this.$el || !this.referenceElm || this.$el.contains(e.target) || this.referenceElm.contains(e.target) || !this.popper || this.popper.contains(e.target)) { + if (!this.$el || !this.referenceElm || this.elementContains(this.$el, e.target) || this.elementContains(this.referenceElm, e.target) || !this.popper || this.elementContains(this.popper, e.target)) { return; } @@ -378,6 +378,13 @@ var VuePopper$1 = { render: function render() { } this.showPopper = false; + }, + elementContains: function elementContains(elm, otherElm) { + if (typeof elm.contains === 'function') { + return elm.contains(otherElm); + } + + return false; } }, diff --git a/dist/js/vue-popper.min.js b/dist/js/vue-popper.min.js index 53edba4..1a21b24 100644 --- a/dist/js/vue-popper.min.js +++ b/dist/js/vue-popper.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("popper.js")):"function"==typeof define&&define.amd?define(["popper.js"],t):e.VuePopper=t(e.Popper)}(this,function(e){"use strict";function t(e,t,o){e&&t&&o&&(document.addEventListener?e.addEventListener(t,o,!1):e.attachEvent("on"+t,o))}function o(e,t,o){e&&t&&(document.removeEventListener?e.removeEventListener(t,o,!1):e.detachEvent("on"+t,o))}e=e&&e.hasOwnProperty("default")?e.default:e;!function(){function e(e){this.value=e}function t(t){function o(e,t){return new Promise(function(o,n){var p={key:e,arg:t,resolve:o,reject:n,next:null};s?s=s.next=p:(i=s=p,r(e,t))})}function r(o,i){try{var s=t[o](i),p=s.value;p instanceof e?Promise.resolve(p.value).then(function(e){r("next",e)},function(e){r("throw",e)}):n(s.done?"return":"normal",s.value)}catch(e){n("throw",e)}}function n(e,t){switch(e){case"return":i.resolve({value:t,done:!0});break;case"throw":i.reject(t);break;default:i.resolve({value:t,done:!1})}(i=i.next)?r(i.key,i.arg):s=null}var i,s;this._invoke=o,"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var r=Object.assign||function(e){for(var t=1;t-1}},delayOnMouseOut:{type:Number,default:10},disabled:{type:Boolean,default:!1},content:String,enterActiveClass:String,leaveActiveClass:String,boundariesSelector:String,reference:{},forceShow:{type:Boolean,default:!1},appendToBody:{type:Boolean,default:!1},visibleArrow:{type:Boolean,default:!0},transition:{type:String,default:""},options:{type:Object,default:function(){return{}}}},data:function(){return{referenceElm:null,popperJS:null,showPopper:!1,currentPlacement:"",popperOptions:{placement:"bottom",gpuAcceleration:!1}}},watch:{showPopper:function(e){e?(this.$emit("show"),this.updatePopper()):this.$emit("hide")},forceShow:{handler:function(e){this[e?"doShow":"doClose"]()},immediate:!0}},created:function(){this.appendedArrow=!1,this.appendedToBody=!1,this.popperOptions=r(this.popperOptions,this.options)},mounted:function(){switch(this.referenceElm=this.reference||this.$slots.reference[0].elm,this.popper=this.$slots.default[0].elm,this.trigger){case"click":t(this.referenceElm,"click",this.doToggle),t(document,"click",this.handleDocumentClick);break;case"hover":t(this.referenceElm,"mouseover",this.onMouseOver),t(this.popper,"mouseover",this.onMouseOver),t(this.referenceElm,"mouseout",this.onMouseOut),t(this.popper,"mouseout",this.onMouseOut)}},methods:{doToggle:function(){this.forceShow||(this.showPopper=!this.showPopper)},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},doDestroy:function(){this.showPopper||(this.popperJS&&(this.popperJS.destroy(),this.popperJS=null),this.appendedToBody&&(this.appendedToBody=!1,document.body.removeChild(this.popper.parentElement)))},createPopper:function(){var t=this;this.$nextTick(function(){if(t.visibleArrow&&t.appendArrow(t.popper),t.appendToBody&&!t.appendedToBody&&(t.appendedToBody=!0,document.body.appendChild(t.popper.parentElement)),t.popperJS&&t.popperJS.destroy&&t.popperJS.destroy(),t.boundariesSelector){var o=document.querySelector(t.boundariesSelector);o&&(t.popperOptions.modifiers=r({},t.popperOptions.modifiers),t.popperOptions.modifiers.preventOverflow=r({},t.popperOptions.modifiers.preventOverflow),t.popperOptions.modifiers.preventOverflow.boundariesElement=o)}t.popperOptions.onCreate=function(){t.$emit("created",t),t.$nextTick(t.updatePopper)},t.popperJS=new e(t.referenceElm,t.popper,t.popperOptions)})},destroyPopper:function(){o(this.referenceElm,"click",this.doToggle),o(this.referenceElm,"mouseup",this.doClose),o(this.referenceElm,"mousedown",this.doShow),o(this.referenceElm,"focus",this.doShow),o(this.referenceElm,"blur",this.doClose),o(this.referenceElm,"mouseout",this.onMouseOut),o(this.referenceElm,"mouseover",this.onMouseOver),o(document,"click",this.handleDocumentClick),this.showPopper=!1,this.doDestroy()},appendArrow:function(e){if(!this.appendedArrow){this.appendedArrow=!0;var t=document.createElement("div");t.setAttribute("x-arrow",""),t.className="popper__arrow",e.appendChild(t)}},updatePopper:function(){this.popperJS?this.popperJS.scheduleUpdate():this.createPopper()},onMouseOver:function(){this.showPopper=!0,clearTimeout(this._timer)},onMouseOut:function(){var e=this;this._timer=setTimeout(function(){e.showPopper=!1},this.delayOnMouseOut)},handleDocumentClick:function(e){this.$el&&this.referenceElm&&!this.$el.contains(e.target)&&!this.referenceElm.contains(e.target)&&this.popper&&!this.popper.contains(e.target)&&(this.$emit("documentClick"),this.forceShow||(this.showPopper=!1))}},destroyed:function(){this.destroyPopper()}}}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("popper.js")):"function"==typeof define&&define.amd?define(["popper.js"],t):e.VuePopper=t(e.Popper)}(this,function(e){"use strict";function t(e,t,o){e&&t&&o&&(document.addEventListener?e.addEventListener(t,o,!1):e.attachEvent("on"+t,o))}function o(e,t,o){e&&t&&(document.removeEventListener?e.removeEventListener(t,o,!1):e.detachEvent("on"+t,o))}e=e&&e.hasOwnProperty("default")?e.default:e;!function(){function e(e){this.value=e}function t(t){function o(e,t){return new Promise(function(o,r){var p={key:e,arg:t,resolve:o,reject:r,next:null};s?s=s.next=p:(i=s=p,n(e,t))})}function n(o,i){try{var s=t[o](i),p=s.value;p instanceof e?Promise.resolve(p.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(s.done?"return":"normal",s.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":i.resolve({value:t,done:!0});break;case"throw":i.reject(t);break;default:i.resolve({value:t,done:!1})}(i=i.next)?n(i.key,i.arg):s=null}var i,s;this._invoke=o,"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var n=Object.assign||function(e){for(var t=1;t-1}},delayOnMouseOut:{type:Number,default:10},disabled:{type:Boolean,default:!1},content:String,enterActiveClass:String,leaveActiveClass:String,boundariesSelector:String,reference:{},forceShow:{type:Boolean,default:!1},appendToBody:{type:Boolean,default:!1},visibleArrow:{type:Boolean,default:!0},transition:{type:String,default:""},options:{type:Object,default:function(){return{}}}},data:function(){return{referenceElm:null,popperJS:null,showPopper:!1,currentPlacement:"",popperOptions:{placement:"bottom",gpuAcceleration:!1}}},watch:{showPopper:function(e){e?(this.$emit("show"),this.updatePopper()):this.$emit("hide")},forceShow:{handler:function(e){this[e?"doShow":"doClose"]()},immediate:!0}},created:function(){this.appendedArrow=!1,this.appendedToBody=!1,this.popperOptions=n(this.popperOptions,this.options)},mounted:function(){switch(this.referenceElm=this.reference||this.$slots.reference[0].elm,this.popper=this.$slots.default[0].elm,this.trigger){case"click":t(this.referenceElm,"click",this.doToggle),t(document,"click",this.handleDocumentClick);break;case"hover":t(this.referenceElm,"mouseover",this.onMouseOver),t(this.popper,"mouseover",this.onMouseOver),t(this.referenceElm,"mouseout",this.onMouseOut),t(this.popper,"mouseout",this.onMouseOut)}},methods:{doToggle:function(){this.forceShow||(this.showPopper=!this.showPopper)},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},doDestroy:function(){this.showPopper||(this.popperJS&&(this.popperJS.destroy(),this.popperJS=null),this.appendedToBody&&(this.appendedToBody=!1,document.body.removeChild(this.popper.parentElement)))},createPopper:function(){var t=this;this.$nextTick(function(){if(t.visibleArrow&&t.appendArrow(t.popper),t.appendToBody&&!t.appendedToBody&&(t.appendedToBody=!0,document.body.appendChild(t.popper.parentElement)),t.popperJS&&t.popperJS.destroy&&t.popperJS.destroy(),t.boundariesSelector){var o=document.querySelector(t.boundariesSelector);o&&(t.popperOptions.modifiers=n({},t.popperOptions.modifiers),t.popperOptions.modifiers.preventOverflow=n({},t.popperOptions.modifiers.preventOverflow),t.popperOptions.modifiers.preventOverflow.boundariesElement=o)}t.popperOptions.onCreate=function(){t.$emit("created",t),t.$nextTick(t.updatePopper)},t.popperJS=new e(t.referenceElm,t.popper,t.popperOptions)})},destroyPopper:function(){o(this.referenceElm,"click",this.doToggle),o(this.referenceElm,"mouseup",this.doClose),o(this.referenceElm,"mousedown",this.doShow),o(this.referenceElm,"focus",this.doShow),o(this.referenceElm,"blur",this.doClose),o(this.referenceElm,"mouseout",this.onMouseOut),o(this.referenceElm,"mouseover",this.onMouseOver),o(document,"click",this.handleDocumentClick),this.showPopper=!1,this.doDestroy()},appendArrow:function(e){if(!this.appendedArrow){this.appendedArrow=!0;var t=document.createElement("div");t.setAttribute("x-arrow",""),t.className="popper__arrow",e.appendChild(t)}},updatePopper:function(){this.popperJS?this.popperJS.scheduleUpdate():this.createPopper()},onMouseOver:function(){this.showPopper=!0,clearTimeout(this._timer)},onMouseOut:function(){var e=this;this._timer=setTimeout(function(){e.showPopper=!1},this.delayOnMouseOut)},handleDocumentClick:function(e){this.$el&&this.referenceElm&&!this.elementContains(this.$el,e.target)&&!this.elementContains(this.referenceElm,e.target)&&this.popper&&!this.elementContains(this.popper,e.target)&&(this.$emit("documentClick"),this.forceShow||(this.showPopper=!1))},elementContains:function(e,t){return"function"==typeof e.contains&&e.contains(t)}},destroyed:function(){this.destroyPopper()}}}); diff --git a/src/component/popper.js.vue b/src/component/popper.js.vue index d57dcbe..5ca7eed 100644 --- a/src/component/popper.js.vue +++ b/src/component/popper.js.vue @@ -314,9 +314,9 @@ handleDocumentClick(e) { if (!this.$el || !this.referenceElm || - this.$el.contains(e.target) || - this.referenceElm.contains(e.target) || - !this.popper || this.popper.contains(e.target) + this.elementContains(this.$el, e.target) || + this.elementContains(this.referenceElm, e.target) || + !this.popper || this.elementContains(this.popper, e.target) ) { return; } @@ -328,6 +328,14 @@ } this.showPopper = false; + }, + + elementContains(elm, otherElm) { + if (typeof elm.contains === 'function') { + return elm.contains(otherElm); + } + + return false; } },