Permalink
Browse files

Initial commit from interna repo.

  • Loading branch information...
0 parents commit 7f75f89564addad9f0bf14dd8012879e9288bb77 @gordonbrander gordonbrander committed Nov 18, 2011
Showing with 188 additions and 0 deletions.
  1. +20 −0 MIT-LICENSE.txt
  2. +69 −0 README.markdown
  3. +99 −0 jquery.cf.popover.js
@@ -0,0 +1,20 @@
+Copyright (c) 2011 Crowd Favorite (http://crowdfavorite.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.
@@ -0,0 +1,69 @@
+# CF Popover
+
+A lightweight framework for positioning popovers against triggers links. It's a pretty thin wrapper for jQuery UI Position, which does most of the heavy lifting.
+
+## Requirements
+
+- jQuery 1.6+
+- jQuery UI 1.8+
+
+It would probably work with earlier versions, but we haven't tested that.
+
+## Usage
+
+Include the script and it's requirements.
+
+Popover markup consist of two parts:
+
+- The popover element which must have an ID
+- A trigger link, with an anchor to the ID of the popover element.
+
+Sample markup:
+
+ <a class="trigger" href="#popover1">Open Popover</a>
+
+ <div id="popover1">Popover FTW!</div>
+
+The popover element can live anywhere on the page. The script will automatically position the popover against the trigger.
+
+You will also typically want to add `position: absolute;` to your popover element, otherwise jQuery UI Position will try to use relative positioning.
+
+ #popover1 {
+ position: absolute;
+ }
+
+Or better yet, use a generic class:
+
+ .popover {
+ position: absolute;
+ }
+
+Invoke the script on the trigger elements:
+
+ $('.trigger').popover();
+
+The popover script will find the associated popover for a trigger by looking at the value of the `href` attribute.
+
+You can also pass options. This would make the popover appear at the right-top edge of the trigger:
+
+ $('.trigger').popover({
+ my: 'left bottom', // of popover
+ at: 'right top', // of trigger
+ });
+
+### Options
+
+- `my`: position of popover. Accepts [anything jQuery UI Position accepts](http://jqueryui.com/demos/position/).
+- `at`: position of popover against trigger . Accepts [anything jQuery UI Position accepts](http://jqueryui.com/demos/position/).
+- `offset`: any tweaks you would like to make to the position. Accepts [anything jQuery UI Position accepts](http://jqueryui.com/demos/position/).
+
+### Advanced Use
+
+You can access methods and data for a popover after it's been initialized via the data API.
+
+ $('.trigger').data('popover').hidePopover();
+ $('.trigger').data('popover').opts.my // value of 'my' option for this instance
+
+Duck-typing the constructor function for popovers is possible by changing:
+
+ $.fn.popover.Popover
@@ -0,0 +1,99 @@
+/*!
+ * CF Popover
+ * A lightweight framework for positioning iPad-style popover elements against triggers.
+ *
+ * Copyright 2011, Crowd Favorite (http://crowdfavorite.com)
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+;(function ($) {
+ var Popover = function ($trigger, opts) {
+ $.extend(this.opts, opts);
+ this.$trigger = $($trigger.get(0));
+
+ this.$popover = $(this.$trigger.attr('href'));
+ this.$popover
+ .prepend('<span role="presentation" class="before"/>')
+ .append('<span role="presentation" class="after"/>');
+ this.$popover.hide();
+ };
+ Popover.prototype = {
+ timeout: null,
+ $win: $(window),
+
+ opts: {
+ my: 'center bottom',
+ at: 'center top',
+ offset: '0 0'
+ },
+
+ bindEvents: function () {
+ this.$trigger.click($.proxy(function (e) {
+ if (this.$popover.is(':visible')) {
+ this.hidePopover(e);
+ }
+ else {
+ this.showPopover(e);
+ };
+ }, this));
+
+ $('body').click($.proxy(this.hidePopover, this));
+
+ this.$popover.click(function (e) {
+ e.stopPropagation();
+ });
+
+ this.$win.resize($.proxy(this.pinToTargetDebounced, this));
+ },
+
+ showPopover: function (e) {
+ this.$popover.fadeIn();
+ this.pinToTarget();
+ e.preventDefault();
+ e.stopPropagation();
+ },
+
+ hidePopover: function (e) {
+ this.$popover.fadeOut('fast');
+ e.preventDefault();
+ e.stopPropagation();
+ },
+
+ /* Calculate and position against trigger */
+ pinToTarget: function () {
+ var opts = this.opts;
+ this.$popover.position({
+ my: opts.my,
+ at: opts.at,
+ of: this.$trigger,
+ offset: opts.offset
+ });
+ },
+
+ /* Debounced to prevent hitting lots of times while resizing happens.
+ Will fire a maximum of 20x per second. Useful for binding to the window
+ resize event. */
+ pinToTargetDebounced: function () {
+ clearTimeout(this.timeout);
+ this.timeout = setTimeout($.proxy(this.pinToTarget, this), 50);
+ }
+ };
+
+ $.fn.popover = function (opts) {
+ var Popover = $.fn.popover.Popover;
+
+ this.each(function() {
+ var $this = $(this);
+ var popover = new Popover($this, opts);
+ popover.bindEvents();
+
+ /* Store Popover instance for easy method access.
+ See: http://alexsexton.com/?p=51
+
+ Example: $('.trigger').data('popover').hidePopover(); */
+ $this.data('popover', popover);
+ });
+ };
+ /* Expose constructor function for folks to duck-type when necessary */
+ $.fn.popover.Popover = Popover;
+})(jQuery);

0 comments on commit 7f75f89

Please sign in to comment.