From 7ad027b22ba49834d1f4ce6811ff5fe993850d54 Mon Sep 17 00:00:00 2001 From: sandywalker Date: Wed, 18 Nov 2015 15:29:32 +0800 Subject: [PATCH] fix the hiden bug,update the version to 1.2.3 --- HISTORY.md | 8 +++++ bower.json | 2 +- demo/index-dev.html | 2 +- demo/index.html | 2 +- dist/jquery.webui-popover.css | 2 +- dist/jquery.webui-popover.js | 58 ++++++++++++++++++++++---------- dist/jquery.webui-popover.min.js | 4 +-- package.json | 2 +- src/jquery.webui-popover.js | 56 ++++++++++++++++++++---------- webui-popover.jquery.json | 2 +- 10 files changed, 95 insertions(+), 43 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 9eba3db..11630f2 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,6 +3,14 @@ # History +### 1.2.3 +* fix the bug which cause the popover hide by click when multi popovers in same page. +* optimize event handling for performance + +### 1.2.2 +* +* optimize code and clean debug info + ### 1.2.1 * now option url can be set with jQuery selector (eg: '#myContent') when type equals 'html'. * fix the bug which cause the popover content lost event handler. diff --git a/bower.json b/bower.json index 5f2ab0d..585b448 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "webui-popover", - "version": "1.2.2", + "version": "1.2.3", "authors": [ "sandywalker " ], diff --git a/demo/index-dev.html b/demo/index-dev.html index ed31c44..fdbb363 100644 --- a/demo/index-dev.html +++ b/demo/index-dev.html @@ -347,7 +347,7 @@

Input hints

pop with backdrop pop with bs-dropdown -
+
  • Action
  • Another Option
    • diff --git a/demo/index.html b/demo/index.html index bc5de0d..50894ae 100644 --- a/demo/index.html +++ b/demo/index.html @@ -348,7 +348,7 @@

    Input hints

    pop with backdrop pop with bs-dropdown -
    +
    • Action
    • Another Option
      • diff --git a/dist/jquery.webui-popover.css b/dist/jquery.webui-popover.css index 5478f38..a4a42d1 100644 --- a/dist/jquery.webui-popover.css +++ b/dist/jquery.webui-popover.css @@ -1,5 +1,5 @@ /* - * webui popover plugin - v1.2.1 + * webui popover plugin - v1.2.2 * A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! * https://github.com/sandywalker/webui-popover * diff --git a/dist/jquery.webui-popover.js b/dist/jquery.webui-popover.js index 4596925..4d15376 100644 --- a/dist/jquery.webui-popover.js +++ b/dist/jquery.webui-popover.js @@ -1,5 +1,5 @@ /* - * webui popover plugin - v1.2.1 + * webui popover plugin - v1.2.2 * A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! * https://github.com/sandywalker/webui-popover * @@ -58,7 +58,7 @@ }; - var popovers = []; + var _srcElements = []; var backdrop = $('
      '); var _globalIdSeed = 0; var _isBodyEventHandled = false; @@ -69,6 +69,18 @@ return isNaN(numeric) ? (fallback || 0) : Number(numeric); }; + var getPopFromElement = function($element) { + return $element.data('plugin_' + pluginName); + }; + + var hideAllPop = function() { + for (var i = 0; i < _srcElements.length; i++) { + _srcElements[i].webuiPopover('hide'); + } + $document.trigger('hiddenAll.' + pluginType); + }; + + // The actual plugin constructor @@ -87,7 +99,7 @@ this._name = pluginName; this._targetclick = false; this.init(); - popovers.push(this.$element); + _srcElements.push(this.$element); } WebuiPopover.prototype = { @@ -119,14 +131,14 @@ destroy: function() { var index = -1; - for (var i = 0; i < popovers.length; i++) { - if (popovers[i] === this.$element) { + for (var i = 0; i < _srcElements.length; i++) { + if (_srcElements[i] === this.$element) { index = i; break; } } - popovers.splice(index, 1); + _srcElements.splice(index, 1); this.hide(); @@ -203,11 +215,7 @@ this[this.getTarget().hasClass('in') ? 'hide' : 'show'](); }, hideAll: function() { - for (var i = 0; i < popovers.length; i++) { - popovers[i].webuiPopover('hide'); - } - - $document.trigger('hiddenAll.' + pluginType); + hideAllPop(); }, /*core method ,show popover */ show: function() { @@ -552,20 +560,34 @@ this.hideAll(); } }, - bodyClickHandler: function() { + + bodyClickHandler: function(e) { _isBodyEventHandled = true; - if (this.getTrigger() === 'click') { - if (this._targetclick) { - this._targetclick = false; - } else { - this.hideAll(); + var canHide = true; + for (var i = 0; i < _srcElements.length; i++) { + var pop = getPopFromElement(_srcElements[i]); + if (pop._opened) { + var popX1 = pop.getTarget().offset().left; + var popY1 = pop.getTarget().offset().top; + var popX2 = pop.getTarget().offset().left + pop.getTarget().width(); + var popY2 = pop.getTarget().offset().top + pop.getTarget().height(); + var inPop = e.pageX >= popX1 && e.pageX <= popX2 && e.pageY >= popY1 && e.pageY <= popY2; + if (inPop) { + canHide = false; + break; + } } } + if (canHide) { + hideAllPop(); + } }, + /* targetClickHandler: function() { this._targetclick = true; }, + */ //reset and init the target events; initTargetEvents: function() { @@ -576,7 +598,7 @@ .on('mouseleave', $.proxy(this.mouseleaveHandler, this)); } this.$target.find('.close').off('click').on('click', $.proxy(this.hide, this, true)); - this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this)); + //this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this)); }, /* utils methods */ //caculate placement of the popover diff --git a/dist/jquery.webui-popover.min.js b/dist/jquery.webui-popover.min.js index 5e3d0a5..dddbc32 100644 --- a/dist/jquery.webui-popover.min.js +++ b/dist/jquery.webui-popover.min.js @@ -1,9 +1,9 @@ /* - * webui popover plugin - v1.2.1 + * webui popover plugin - v1.2.2 * A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! * https://github.com/sandywalker/webui-popover * * Made by Sandy Duan * Under MIT License */ -!function(a,b,c){"use strict";function d(b,c){this.$element=a(b),c&&("string"===a.type(c.delay)||"number"===a.type(c.delay))&&(c.delay={show:c.delay,hide:c.delay}),this.options=a.extend({},h,c),this._defaults=h,this._name=e,this._targetclick=!1,this.init(),i.push(this.$element)}var e="webuiPopover",f="webui-popover",g="webui.popover",h={placement:"auto",width:"auto",height:"auto",trigger:"click",style:"",delay:{show:null,hide:null},async:{before:null,success:null},cache:!0,multi:!1,arrow:!0,title:"",content:"",closeable:!1,padding:!0,url:"",type:"html",animation:null,template:'
      ×

       

      ',backdrop:!1,dismissible:!0,onShow:null,onHide:null,abortXHR:!0,autoHide:!1,offsetTop:0,offsetLeft:0},i=[],j=a('
      '),k=0,l=!1,m=-2e3,n=a(c),o=function(a,b){return isNaN(a)?b||0:Number(a)};d.prototype={init:function(){"click"===this.getTrigger()?this.$element.off("click touchend").on("click touchend",a.proxy(this.toggle,this)):"hover"===this.getTrigger()&&this.$element.off("mouseenter mouseleave click").on("mouseenter",a.proxy(this.mouseenterHandler,this)).on("mouseleave",a.proxy(this.mouseleaveHandler,this)),this._poped=!1,this._inited=!0,this._opened=!1,this._idSeed=k,this.options.backdrop&&j.appendTo(c.body).hide(),k++,"sticky"===this.getTrigger()&&this.show()},destroy:function(){for(var a=-1,b=0;b').attr("src",this.getUrl());break;case"html":try{this.content=a(this.getUrl()),this.content.is(":visible")||this.content.show()}catch(b){throw new Error("Unable to get popover content. Invalid selector specified.")}}else if(!this.content){var c="";if(c=a.isFunction(this.options.content)?this.options.content.apply(this.$element[0],[this]):this.options.content,this.content=this.$element.attr("data-content")||c,!this.content){var d=this.$element.next();d&&d.hasClass(f+"-content")&&(this.content=d)}}return this.content},setContent:function(a){var b=this.getTarget(),c=this.getContentElement();"string"==typeof a?c.html(a):a instanceof jQuery&&(a.removeClass(f+"-content"),c.html(""),a.appendTo(c)),this.$target=b},isAsync:function(){return"async"===this.options.type},setContentASync:function(b){var c=this;this.xhr||(this.xhr=a.ajax({url:this.getUrl(),type:"GET",cache:this.getCache(),beforeSend:function(a){c.options.async.before&&c.options.async.before(c,a)},success:function(d){c.bindBodyEvents(),c.content=b&&a.isFunction(b)?b.apply(c.$element[0],[d]):d,c.setContent(c.content);var e=c.getContentElement();e.removeAttr("style"),c.displayContent(),c.options.async.success&&c.options.async.success(c,d)},complete:function(){c.xhr=null}}))},bindBodyEvents:function(){this.options.dismissible&&"click"===this.getTrigger()&&!l&&(n.off("keyup.webui-popover").on("keyup.webui-popover",a.proxy(this.escapeHandler,this)),n.off("click.webui-popover touchend.webui-popover").on("click.webui-popover touchend.webui-popover",a.proxy(this.bodyClickHandler,this)))},mouseenterHandler:function(){var a=this;a._timeout&&clearTimeout(a._timeout),a._enterTimeout=setTimeout(function(){a.getTarget().is(":visible")||a.show()},this.getDelayShow())},mouseleaveHandler:function(){var a=this;clearTimeout(a._enterTimeout),a._timeout=setTimeout(function(){a.hide()},this.getHideDelay())},escapeHandler:function(a){27===a.keyCode&&this.hideAll()},bodyClickHandler:function(){l=!0,"click"===this.getTrigger()&&(this._targetclick?this._targetclick=!1:this.hideAll())},targetClickHandler:function(){this._targetclick=!0},initTargetEvents:function(){"hover"===this.getTrigger()&&this.$target.off("mouseenter mouseleave").on("mouseenter",a.proxy(this.mouseenterHandler,this)).on("mouseleave",a.proxy(this.mouseleaveHandler,this)),this.$target.find(".close").off("click").on("click",a.proxy(this.hide,this,!0)),this.$target.off("click.webui-popover").on("click.webui-popover",a.proxy(this.targetClickHandler,this))},getPlacement:function(a){var b,d=c.documentElement,e=c.body,f=d.clientWidth,g=d.clientHeight,h=Math.max(e.scrollTop,d.scrollTop),i=Math.max(e.scrollLeft,d.scrollLeft),j=Math.max(0,a.left-i),k=Math.max(0,a.top-h);b="function"==typeof this.options.placement?this.options.placement.call(this,this.getTarget()[0],this.$element[0]):this.$element.data("placement")||this.options.placement;var l="horizontal"===b,m="vertical"===b,n="auto"===b||l||m;return n?b=f/3>j?g/3>k?l?"right-bottom":"bottom-right":2*g/3>k?m?g/2>=k?"bottom-right":"top-right":"right":l?"right-top":"top-right":2*f/3>j?g/3>k?l?f/2>=j?"right-bottom":"left-bottom":"bottom":2*g/3>k?l?f/2>=j?"right":"left":g/2>=k?"bottom":"top":l?f/2>=j?"right-top":"left-top":"top":g/3>k?l?"left-bottom":"bottom-left":2*g/3>k?m?g/2>=k?"bottom-left":"top-left":"left":l?"left-top":"top-left":"auto-top"===b?b=f/3>j?"top-right":2*f/3>j?"top":"top-left":"auto-bottom"===b?b=f/3>j?"bottom-right":2*f/3>j?"bottom":"bottom-left":"auto-left"===b?b=g/3>k?"left-top":2*g/3>k?"left":"left-bottom":"auto-right"===b&&(b=g/3>k?"right-top":2*g/3>k?"right":"right-bottom"),b},getElementPosition:function(){return a.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTargetPositin:function(a,b,d,e){var f=a,g=c.documentElement,h=c.body,i=g.clientWidth,j=g.clientHeight,k=this.$element.outerWidth(),l=this.$element.outerHeight(),n=Math.max(h.scrollTop,g.scrollTop),o=Math.max(h.scrollLeft,g.scrollLeft),p={},q=null,r=this.options.arrow?20:0,s=10,t=r+s>k?r:0,u=r+s>l?r:0,v=0,w=j+n,x=i+o,y=f.left+f.width/2-t>0,z=f.left+f.width/2+t0,B=f.top+f.height/2+u
      ×

       

    ',backdrop:!1,dismissible:!0,onShow:null,onHide:null,abortXHR:!0,autoHide:!1,offsetTop:0,offsetLeft:0},i=[],j=a('
    '),k=0,l=!1,m=-2e3,n=a(c),o=function(a,b){return isNaN(a)?b||0:Number(a)},p=function(a){return a.data("plugin_"+e)},q=function(){for(var a=0;a').attr("src",this.getUrl());break;case"html":try{this.content=a(this.getUrl()),this.content.is(":visible")||this.content.show()}catch(b){throw new Error("Unable to get popover content. Invalid selector specified.")}}else if(!this.content){var c="";if(c=a.isFunction(this.options.content)?this.options.content.apply(this.$element[0],[this]):this.options.content,this.content=this.$element.attr("data-content")||c,!this.content){var d=this.$element.next();d&&d.hasClass(f+"-content")&&(this.content=d)}}return this.content},setContent:function(a){var b=this.getTarget(),c=this.getContentElement();"string"==typeof a?c.html(a):a instanceof jQuery&&(a.removeClass(f+"-content"),c.html(""),a.appendTo(c)),this.$target=b},isAsync:function(){return"async"===this.options.type},setContentASync:function(b){var c=this;this.xhr||(this.xhr=a.ajax({url:this.getUrl(),type:"GET",cache:this.getCache(),beforeSend:function(a){c.options.async.before&&c.options.async.before(c,a)},success:function(d){c.bindBodyEvents(),c.content=b&&a.isFunction(b)?b.apply(c.$element[0],[d]):d,c.setContent(c.content);var e=c.getContentElement();e.removeAttr("style"),c.displayContent(),c.options.async.success&&c.options.async.success(c,d)},complete:function(){c.xhr=null}}))},bindBodyEvents:function(){this.options.dismissible&&"click"===this.getTrigger()&&!l&&(n.off("keyup.webui-popover").on("keyup.webui-popover",a.proxy(this.escapeHandler,this)),n.off("click.webui-popover touchend.webui-popover").on("click.webui-popover touchend.webui-popover",a.proxy(this.bodyClickHandler,this)))},mouseenterHandler:function(){var a=this;a._timeout&&clearTimeout(a._timeout),a._enterTimeout=setTimeout(function(){a.getTarget().is(":visible")||a.show()},this.getDelayShow())},mouseleaveHandler:function(){var a=this;clearTimeout(a._enterTimeout),a._timeout=setTimeout(function(){a.hide()},this.getHideDelay())},escapeHandler:function(a){27===a.keyCode&&this.hideAll()},bodyClickHandler:function(a){l=!0;for(var b=!0,c=0;c=e&&a.pageX<=g&&a.pageY>=f&&a.pageY<=h;if(j){b=!1;break}}}b&&q()},initTargetEvents:function(){"hover"===this.getTrigger()&&this.$target.off("mouseenter mouseleave").on("mouseenter",a.proxy(this.mouseenterHandler,this)).on("mouseleave",a.proxy(this.mouseleaveHandler,this)),this.$target.find(".close").off("click").on("click",a.proxy(this.hide,this,!0))},getPlacement:function(a){var b,d=c.documentElement,e=c.body,f=d.clientWidth,g=d.clientHeight,h=Math.max(e.scrollTop,d.scrollTop),i=Math.max(e.scrollLeft,d.scrollLeft),j=Math.max(0,a.left-i),k=Math.max(0,a.top-h);b="function"==typeof this.options.placement?this.options.placement.call(this,this.getTarget()[0],this.$element[0]):this.$element.data("placement")||this.options.placement;var l="horizontal"===b,m="vertical"===b,n="auto"===b||l||m;return n?b=f/3>j?g/3>k?l?"right-bottom":"bottom-right":2*g/3>k?m?g/2>=k?"bottom-right":"top-right":"right":l?"right-top":"top-right":2*f/3>j?g/3>k?l?f/2>=j?"right-bottom":"left-bottom":"bottom":2*g/3>k?l?f/2>=j?"right":"left":g/2>=k?"bottom":"top":l?f/2>=j?"right-top":"left-top":"top":g/3>k?l?"left-bottom":"bottom-left":2*g/3>k?m?g/2>=k?"bottom-left":"top-left":"left":l?"left-top":"top-left":"auto-top"===b?b=f/3>j?"top-right":2*f/3>j?"top":"top-left":"auto-bottom"===b?b=f/3>j?"bottom-right":2*f/3>j?"bottom":"bottom-left":"auto-left"===b?b=g/3>k?"left-top":2*g/3>k?"left":"left-bottom":"auto-right"===b&&(b=g/3>k?"right-top":2*g/3>k?"right":"right-bottom"),b},getElementPosition:function(){return a.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTargetPositin:function(a,b,d,e){var f=a,g=c.documentElement,h=c.body,i=g.clientWidth,j=g.clientHeight,k=this.$element.outerWidth(),l=this.$element.outerHeight(),n=Math.max(h.scrollTop,g.scrollTop),o=Math.max(h.scrollLeft,g.scrollLeft),p={},q=null,r=this.options.arrow?20:0,s=10,t=r+s>k?r:0,u=r+s>l?r:0,v=0,w=j+n,x=i+o,y=f.left+f.width/2-t>0,z=f.left+f.width/2+t0,B=f.top+f.height/2+u", "homepage": "https://github.com/sandywalker/webui-popover", - "version": "1.2.2", + "version": "1.2.3", "license":"MIT", "devDependencies": { "grunt": "~0.4.1", diff --git a/src/jquery.webui-popover.js b/src/jquery.webui-popover.js index 617494d..f26a95e 100644 --- a/src/jquery.webui-popover.js +++ b/src/jquery.webui-popover.js @@ -50,7 +50,7 @@ }; - var popovers = []; + var _srcElements = []; var backdrop = $('
    '); var _globalIdSeed = 0; var _isBodyEventHandled = false; @@ -61,6 +61,18 @@ return isNaN(numeric) ? (fallback || 0) : Number(numeric); }; + var getPopFromElement = function($element) { + return $element.data('plugin_' + pluginName); + }; + + var hideAllPop = function() { + for (var i = 0; i < _srcElements.length; i++) { + _srcElements[i].webuiPopover('hide'); + } + $document.trigger('hiddenAll.' + pluginType); + }; + + // The actual plugin constructor @@ -79,7 +91,7 @@ this._name = pluginName; this._targetclick = false; this.init(); - popovers.push(this.$element); + _srcElements.push(this.$element); } WebuiPopover.prototype = { @@ -111,14 +123,14 @@ destroy: function() { var index = -1; - for (var i = 0; i < popovers.length; i++) { - if (popovers[i] === this.$element) { + for (var i = 0; i < _srcElements.length; i++) { + if (_srcElements[i] === this.$element) { index = i; break; } } - popovers.splice(index, 1); + _srcElements.splice(index, 1); this.hide(); @@ -195,11 +207,7 @@ this[this.getTarget().hasClass('in') ? 'hide' : 'show'](); }, hideAll: function() { - for (var i = 0; i < popovers.length; i++) { - popovers[i].webuiPopover('hide'); - } - - $document.trigger('hiddenAll.' + pluginType); + hideAllPop(); }, /*core method ,show popover */ show: function() { @@ -544,20 +552,34 @@ this.hideAll(); } }, - bodyClickHandler: function() { + + bodyClickHandler: function(e) { _isBodyEventHandled = true; - if (this.getTrigger() === 'click') { - if (this._targetclick) { - this._targetclick = false; - } else { - this.hideAll(); + var canHide = true; + for (var i = 0; i < _srcElements.length; i++) { + var pop = getPopFromElement(_srcElements[i]); + if (pop._opened) { + var popX1 = pop.getTarget().offset().left; + var popY1 = pop.getTarget().offset().top; + var popX2 = pop.getTarget().offset().left + pop.getTarget().width(); + var popY2 = pop.getTarget().offset().top + pop.getTarget().height(); + var inPop = e.pageX >= popX1 && e.pageX <= popX2 && e.pageY >= popY1 && e.pageY <= popY2; + if (inPop) { + canHide = false; + break; + } } } + if (canHide) { + hideAllPop(); + } }, + /* targetClickHandler: function() { this._targetclick = true; }, + */ //reset and init the target events; initTargetEvents: function() { @@ -568,7 +590,7 @@ .on('mouseleave', $.proxy(this.mouseleaveHandler, this)); } this.$target.find('.close').off('click').on('click', $.proxy(this.hide, this, true)); - this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this)); + //this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this)); }, /* utils methods */ //caculate placement of the popover diff --git a/webui-popover.jquery.json b/webui-popover.jquery.json index f0ca2c5..4cc36c3 100644 --- a/webui-popover.jquery.json +++ b/webui-popover.jquery.json @@ -8,7 +8,7 @@ "webui", "pop" ], - "version":"1.2.2", + "version":"1.2.3", "author": { "name": "Sandy Duan", "email": "sanddywalker@gmail.com",