diff --git a/MIT-LICENSE.txt b/MIT-LICENSE.txt new file mode 100644 index 0000000..1f718d9 --- /dev/null +++ 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. \ No newline at end of file diff --git a/lib/popover.sass b/lib/popover.sass new file mode 100644 index 0000000..e659b28 --- /dev/null +++ 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 new file mode 100644 index 0000000..bea88be --- /dev/null +++ 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 new file mode 100644 index 0000000..50f6e14 --- /dev/null +++ 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('
'); + $(".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; + }); + }); +};