popover initial

juggy · Jul 8, 2010 · 5cea6ef · 5cea6ef
1 parent 0a3c083
commit 5cea6ef
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 0 deletions.
diff --git a/MIT-LICENSE.txt b/MIT-LICENSE.txt
@@ -0,0 +1,20 @@
+Copyright (c) 2010 John Resig, http://jquery.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/lib/popover.sass b/lib/popover.sass
@@ -0,0 +1,51 @@
+.popover
+
+  & > .floater
+    color: black
+    font-weight: normal
+    line-height: 1
+    cursor: auto
+    position: absolute
+    display: none
+    opacity: 0
+    background-color: white
+    border: 3px solid black
+    border-radius: 4px
+    :-webkit-border-radius 4px
+    :-moz-border-radius 4px
+    border-radius: 4px
+    :-webkit-box-shadow 0 0 10px rgba(0, 0, 0, 0.2)
+    :-webkit-transition opacity 0.25s linear
+    :-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
+
+    &.active
+      opacity: 1
+
+    & > .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
+
+    & > .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) )
+
+    & > .content
+      min-width: 200px
+      overflow-x: hidden
+      overflow-y: auto
diff --git a/popover.css b/popover.css
@@ -0,0 +1,45 @@
+.popover > .floater {
+  color: black;
+  font-weight: normal;
+  line-height: 1;
+  cursor: auto;
+  position: absolute;
+  display: none;
+  opacity: 0;
+  background-color: white;
+  border: 3px solid black;
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -webkit-transition: opacity 0.25s linear;
+  -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; }
diff --git a/popover.js b/popover.js
@@ -0,0 +1,92 @@
+jQuery.fn.popover = function(a){
+
+	openedPO = null;
+	header = $(a.header).detach();
+	content = $(a.content).detach();
+	openEvent = a.open;
+	closeEvent = a.close;
+
+	hidePopover = function(content){
+		content.removeClass("active");
+		content.attr("style", "");
+		if($.isFunction(closeEvent)) closeEvent();
+		openedPO = null;
+		$(document).unbind("click");
+		return false;
+	}
+
+	this.each(function(){
+		$(this).addClass("popover");
+		$(this).append('<div class="floater"><div class="triangle"></div><div class="header"></div><div class="content"></div></div>');
+		$(".header", this).append(header);
+		$(".content", this).append(content);
+
+		$(this).click(function(){
+			button = $(this);
+			content = $(".floater", this);
+			//already opened
+			if(openedPO === this){
+				return true;
+			}else if(openedPO != null){
+				//Close the previous one
+				openedContent = $(".floater", openedPO);
+				hidePopover(openedContent);
+			}
+
+			triangle = $(".floater > .triangle", this);
+			leftOff = 0;
+			topOff = 0;
+			docWidth = $(document).width();
+			docHeight = $(document).height();
+			triangleSize = parseInt(triangle.css("border-bottom-width"));
+			contentWidth = content.outerWidth();
+			contentHeight = content.outerHeight();
+			buttonWidth = button.outerWidth();
+			buttonHeight = button.outerHeight()
+			offset = button.offset();
+
+			//Calculate topOff
+			topOff = offset.top + buttonHeight + triangleSize;
+			diffHeight = docHeight - (topOff + contentHeight + triangleSize );
+			if(diffHeight < 0){
+				//resize the content
+				content.height(content.height() + diffHeight);
+			}
+
+			//Calculate leftOff
+			leftOff = offset.left + ( buttonWidth - contentWidth)/2;
+			diffWidth = 0
+			if(leftOff < 0){
+				//out of the document at left
+				diffWidth = -leftOff;
+			}else if ( leftOff + contentWidth > docWidth){
+				//left of the screen right
+
+				diffWidth = leftOff + contentWidth - docWidth;
+			}
+
+			//position content
+			triangle.css("left", contentWidth/2 - triangleSize + diffWidth);
+
+			//resize the content for overflow
+			content.children(".content").css("max-height", content.height() -parseInt(content.children(".header").css("height")) - 7);
+
+			content.offset({
+				top: topOff,
+				left: leftOff - diffWidth
+			});
+
+			$(document).click(function(event){
+				if ($(event.target).parents(".popover").length === 0){
+					return hidePopover(content);
+				}
+			});
+			content.show();
+			//Timeout for webkit transitions to take effect
+			window.setTimeout(function(){content.addClass("active");}, 0)
+			if($.isFunction(openEvent)) openEvent();
+			openedPO = this;
+			return false;
+		});
+	});
+};