Multiple popups per document + reuse the same popup if using multiple…

… trigger buttons
kematzy · Jul 11, 2010 · 46f6fa0 · 46f6fa0
1 parent 048c272
commit 46f6fa0
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 90 deletions.
diff --git a/popover.css b/popover.css
@@ -1,4 +1,4 @@
-.popover > .floater {
+.popover {
   color: black;
   font-weight: normal;
   line-height: 1;
@@ -17,29 +17,34 @@
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   -moz-transition: opacity 0.25s linear;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  transition: opacity 0.25s linear; }
-  .popover > .floater.active {
-    opacity: 1; }
-  .popover > .floater > .triangle {
-    position: absolute;
-    top: -50px;
-    float: left;
-    font-size: 0px;
-    line-height: 0%;
-    width: 0px;
-    border-top: 25px solid rgba(0, 0, 0, 0);
-    border-left: 25px solid rgba(0, 0, 0, 0);
-    border-right: 25px solid rgba(0, 0, 0, 0);
-    border-bottom: 25px solid black; }
-  .popover > .floater > .header {
-    font-weight: bold;
-    margin: 0;
-    padding: 3px;
-    height: 40px;
-    color: white;
-    background-color: black;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), color-stop(0.2, rgba(255, 255, 255, 0.4)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); }
-  .popover > .floater > .content {
-    min-width: 200px;
-    overflow-x: hidden;
-    overflow-y: auto; }
+  transition: opacity 0.25s linear;
+}
+.popover.active {
+  opacity: 1;
+}
+.popover > .triangle {
+  position: absolute;
+  top: -50px;
+  float: left;
+  font-size: 0px;
+  line-height: 0%;
+  width: 0px;
+  border-top: 25px solid rgba(0, 0, 0, 0);
+  border-left: 25px solid rgba(0, 0, 0, 0);
+  border-right: 25px solid rgba(0, 0, 0, 0);
+  border-bottom: 25px solid black;
+}
+.popover > .header {
+  font-weight: bold;
+  margin: 0;
+  padding: 3px;
+  height: 40px;
+  color: white;
+  background-color: black;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), color-stop(0.2, rgba(255, 255, 255, 0.4)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent));
+}
+.popover > .content {
+  min-width: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
diff --git a/popover.js b/popover.js
@@ -3,97 +3,104 @@ $.fn.popover = function(options) {
   var defaults = {
     openEvent: null,
     closeEvent: null
-  };
+  }
   var options = $.extend(defaults, options);
 
-  var openedPO = null;
-  var button = $(this);
+  // HTML floater box
   var header = $(options.header).detach();
   var content = $(options.content).detach();
-  var floater;
+  var floater = $('<div class="popover">'
+        + '<div class="triangle"></div>'
+        + '<div class="header"></div>'
+        + '<div class="content"></div>'
+        + '</div>').appendTo('body');
+  $('.header', floater).append(header);
+  $('.content', floater).append(content);
 
-  var hidePopover = function(content) {
-    content.removeClass("active");
-    content.attr("style", "");
-    if ($.isFunction(options.closeEvent)) options.closeEvent();
-    openedPO = null;
-    $(document).unbind("click");
-    return false;
-  }
+  // Document click closes active popover
+  $.fn.popover.openedPopup = null;
+  $(document).bind("click", function() {
+    if ($.fn.popover.openedPopup != null
+      && ($(event.target).parents(".popover").length === 0)
+      && (!$(event.target).hasClass('popover-button'))) {
+      $.fn.popover.openedPopup.trigger('hidePopover');
+    }
+  });
 
-  var showPopover = function() {
-    //already opened
-    if (openedPO === this){
-      return true;
-    } else if(openedPO != null){
-      // Close the previous one
-      hidePopover($(".floater", openedPO));
+  var showPopover = function(button) {
+    // Already opened?
+    if ($.fn.popover.openedPopup === button) {
+      $.fn.popover.openedPopup.trigger('hidePopover');
+      return false;
+    } else if($.fn.popover.openedPopup != null){
+      $.fn.popover.openedPopup.trigger('hidePopover');
     }
-
-    triangle = $(".floater > .triangle", this);
-    leftOff = 0;
-    topOff = 0;
-    docWidth = $(document).width();
-    docHeight = $(document).height();
-    triangleSize = parseInt(triangle.css("border-bottom-width"));
-    contentWidth = floater.outerWidth();
-    contentHeight = floater.outerHeight();
-    buttonWidth = button.outerWidth();
-    buttonHeight = button.outerHeight()
-    offset = button.offset();
-
-    //Calculate topOff
+    var triangle = $('.triangle', floater).click(function() {
+        button.trigger('hidePopover') });
+
+    // position and resize
+    var leftOff = 0;
+    var topOff = 0;
+    var docWidth = $(document).width();
+    var docHeight = $(document).height();
+    var triangleSize = parseInt(triangle.css("border-bottom-width"));
+    var contentWidth = floater.outerWidth();
+    var contentHeight = floater.outerHeight();
+    var buttonWidth = button.outerWidth();
+    var buttonHeight = button.outerHeight()
+    var offset = button.offset();
+
+    // Calculate topOff
     topOff = offset.top + buttonHeight + triangleSize;
-    diffHeight = docHeight - (topOff + contentHeight + triangleSize );
-    if(diffHeight < 0){
+    var diffHeight = docHeight - (topOff + contentHeight + triangleSize);
+    if (diffHeight < 0){
       //resize the floater
       floater.height(floater.height() + diffHeight);
     }
-    
-    //Calculate leftOff
+
+    // Calculate leftOff
     leftOff = offset.left + ( buttonWidth - contentWidth)/2;
-    diffWidth = 0
-    if(leftOff < 0){
-      //out of the document at left
+    var diffWidth = 0
+    if (leftOff < 0) {
+      // out of the document at left
       diffWidth = -leftOff;
-    }else if ( leftOff + contentWidth > docWidth){
-      //left of the screen right
-
+    } else if (leftOff + contentWidth > docWidth) {
+      // left of the screen right
       diffWidth = leftOff + contentWidth - docWidth;
     }
 
-    //position floater
+    // position triangle
     triangle.css("left", contentWidth/2 - triangleSize + diffWidth);
-
-    //resize the floater for overflow
-    floater.children(".content").css("max-height", floater.height() -parseInt(floater.children(".header").css("height")) - 7);
-
+
+    // resize the floater for overflow
+    floater.children(".content").css("max-height", floater.height()
+        - parseInt(floater.children(".header").css("height")) - 7);
+
     floater.offset({
       top: topOff,
       left: leftOff - diffWidth
     });
-
-    $(document).click(function(event){
-      if ($(event.target).parents(".popover").length === 0){
-        return hidePopover(floater);
-      }
-    });
     floater.show();
     //Timeout for webkit transitions to take effect
-    window.setTimeout(function(){floater.addClass("active");}, 0)
+    window.setTimeout(function(){ floater.addClass("active"); }, 0)
     if($.isFunction(options.openEvent)) options.openEvent();
-    openedPO = this;
+    $.fn.popover.openedPopup = button;
+    button.addClass('popover-on');
     return false;
   }
 
   this.each(function(){
-    $(this).addClass("popover");
-    floater = $('<div class="floater"><div class="triangle"></div>'
-        + '<div class="header"></div><div class="content"></div>'
-        + '</div>').appendTo(this);
-    $(".header", floater).append(header);
-    $(".content", floater).append(content);
-    $(this).click(showPopover);
+    var button = $(this);
+    button.addClass("popover-button");
+    button.bind('click', function() { showPopover(button) });
+    button.bind('hidePopover', function() {
+      button.removeClass('popover-on');
+      floater.removeClass("active");
+      floater.attr("style", "");
+      if ($.isFunction(options.closeEvent)) options.closeEvent();
+      $.fn.popover.openedPopup = null;
+      return false;
+    });
   });
 }
 })(jQuery);