improve hideAll method,add backdrop feature to the plugin

Author: sandywalker

README.md

@@ -142,7 +142,8 @@ Create  Popover and trigged by manual
 	closeable:false,//display close button or not
 	padding:true,//content padding
 	type:'html',//content type, values:'html','iframe','async'
-	url:''//if not empty ,plugin will load content by url
+	url:''//if not empty ,plugin will load content by url,
+	backdrop:false,//if backdrop is set to true, popover will use backdrop on open
 }
 ```
 

demo/index-dev.html

@@ -440,7 +440,8 @@ <h2 >Input hints</h2>
 						closeable:false,
 						style:'',
 						delay:300,
-						padding:true
+						padding:true,
+						backdrop:false
 				};
 
 

dist/jquery.webui-popover.css

@@ -264,3 +264,12 @@
     transform: rotate(360deg);
   }
 }
+.webui-popover-backdrop {
+  background-color: rgba(0, 0, 0, 0.65);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9998;
+}

dist/jquery.webui-popover.js

@@ -52,10 +52,14 @@
         onHide: false
     };
 
+
+    var popovers = [];
+    var backdrop = $('<div class="webui-popover-backdrop"></div>');
     var _globalIdSeed = 0;
     var $document = $(document);
 
 
+
     // The actual plugin constructor
     function WebuiPopover(element, options) {
         this.$element = $(element);
@@ -72,6 +76,7 @@
         this._name = pluginName;
         this._targetclick = false;
         this.init();
+        popovers.push(this.$element);
     }
 
     WebuiPopover.prototype = {
@@ -91,11 +96,27 @@
             }
             this._poped = false;
             this._inited = true;
+            this._opened = false;
             this._idSeed = _globalIdSeed;
+            if (this.options.backdrop) {
+                backdrop.appendTo(document.body).hide();
+            }
             _globalIdSeed++;
         },
         /* api methods and actions */
         destroy: function() {
+            var index = -1;
+
+            for (var i = 0; i < popovers.length; i++) {
+                if (popovers[i] === this.$element) {
+                    index = i;
+                    break;
+                }
+            }
+
+            popovers.splice(index, 1);
+
+
             this.hide();
             this.$element.data('plugin_' + pluginName, null);
             if (this.getTrigger() === 'click') {
@@ -108,6 +129,9 @@
             }
         },
         hide: function(event) {
+            if (!this._opened) {
+                return;
+            }
             if (event) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -122,6 +146,10 @@
             if (this.$target) {
                 this.$target.removeClass('in').hide();
             }
+            if (this.options.backdrop) {
+                backdrop.hide();
+            }
+            this._opened = false;
             this.$element.trigger('hidden.' + pluginType);
 
             if (this.options.onShow) {
@@ -137,7 +165,10 @@
             this[this.getTarget().hasClass('in') ? 'hide' : 'show']();
         },
         hideAll: function() {
-            $('div.webui-popover').not('.webui-popover-fixed').removeClass('in').hide();
+            for (var i = 0; i < popovers.length; i++) {
+                popovers[i].webuiPopover('hide');
+            }
+
             $document.trigger('hiddenAll.' + pluginType);
         },
         /*core method ,show popover */
@@ -148,6 +179,9 @@
             if (!this.options.multi) {
                 this.hideAll();
             }
+            if (this._opened) {
+                return;
+            }
             // use cache by default, if not cache setted  , reInit the contents 
             if (!this.getCache() || !this._poped || this.content === '') {
                 this.content = '';
@@ -171,6 +205,10 @@
             }
 
             this.bindBodyEvents();
+            if (this.options.backdrop) {
+                backdrop.show();
+            }
+            this._opened = true;
         },
         displayContent: function() {
             var
@@ -244,8 +282,6 @@
             }
             this._poped = true;
             this.$element.trigger('shown.' + pluginType);
-
-
         },
 
         isTargetLoaded: function() {
@@ -672,16 +708,20 @@
             };
         }
     };
-    $.fn[pluginName] = function(options) {
-        return this.each(function() {
+    $.fn[pluginName] = function(options, noInit) {
+        var results = [];
+        var $result = this.each(function() {
+
             var webuiPopover = $.data(this, 'plugin_' + pluginName);
             if (!webuiPopover) {
                 if (!options) {
                     webuiPopover = new WebuiPopover(this, null);
                 } else if (typeof options === 'string') {
                     if (options !== 'destroy') {
-                        webuiPopover = new WebuiPopover(this, null);
-                        webuiPopover[options]();
+                        if (!noInit) {
+                            webuiPopover = new WebuiPopover(this, null);
+                            results.push(webuiPopover[options]());
+                        }
                     }
                 } else if (typeof options === 'object') {
                     webuiPopover = new WebuiPopover(this, options);
@@ -691,10 +731,12 @@
                 if (options === 'destroy') {
                     webuiPopover.destroy();
                 } else if (typeof options === 'string') {
-                    webuiPopover[options]();
+                    results.push(webuiPopover[options]());
                 }
             }
         });
+
+        return (results.length) ? results : $result;
     };
 
 })(jQuery, window, document);