123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539 |
- /**
- * jQuery.popover plugin v1.1.2
- * By Davey IJzermans
- * See http://wp.me/p12l3P-gT for details
- * http://daveyyzermans.nl/
- *
- * Released under MIT License.
- */
- ;(function($) {
- //define some default plugin options
- var defaults = {
- verticalOffset: 10, //offset the popover by y px vertically (movement depends on position of popover. If position == 'bottom', positive numbers are down)
- horizontalOffset: 10, //offset the popover by x px horizontally (movement depends on position of popover. If position == 'right', positive numbers are right)
- title: false, //heading, false for none
- content: false, //content of the popover
- url: false, //set to an url to load content via ajax
- classes: '', //classes to give the popover, i.e. normal, wider or large
- position: 'auto', //where should the popover be placed? Auto, top, right, bottom, left or absolute (i.e. { top: 4 }, { left: 4 })
- fadeSpeed: 160, //how fast to fade out popovers when destroying or hiding
- trigger: 'click', //how to trigger the popover: click, hover or manual
- preventDefault: true, //preventDefault actions on the element on which the popover is called
- stopChildrenPropagation: true, //prevent propagation on popover children
- hideOnHTMLClick: true, //hides the popover when clicked outside of it
- animateChange: true, //animate a popover reposition
- autoReposition: true, //automatically reposition popover on popover change and window resize
- anchor: false //anchor the popover to a different element
- }
- var popovers = [];
- var _ = {
- calc_position: function(popover, position) {
- var data = popover.popover("getData");
- var options = data.options;
- var $anchor = options.anchor ? $(options.anchor) : popover;
- var el = data.popover;
-
- var coordinates = $anchor.offset();
- var y1, x1;
-
- if (position == 'top') {
- y1 = coordinates.top - el.outerHeight();
- x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
- } else if (position == 'right') {
- y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
- x1 = coordinates.left + $anchor.outerWidth();
- } else if (position == 'left') {
- y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
- x1 = coordinates.left - el.outerWidth();
- } else {
- //bottom
- y1 = coordinates.top + $anchor.outerHeight();
- x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
- }
-
- x2 = x1 + el.outerWidth();
- y2 = y1 + el.outerHeight();
- ret = {
- x1: x1,
- x2: x2,
- y1: y1,
- y2: y2
- };
-
- return ret;
- },
- pop_position_class: function(popover, position) {
- var remove = "popover-top popover-right popover-left";
- var arrow = "top-arrow"
- var arrow_remove = "right-arrow bottom-arrow left-arrow";
-
- if (position == 'top') {
- remove = "popover-right popover-bottom popover-left";
- arrow = 'bottom-arrow';
- arrow_remove = "top-arrow right-arrow left-arrow";
- } else if (position == 'right') {
- remove = "popover-yop popover-bottom popover-left";
- arrow = 'left-arrow';
- arrow_remove = "top-arrow right-arrow bottom-arrow";
- } else if (position == 'left') {
- remove = "popover-top popover-right popover-bottom";
- arrow = 'right-arrow';
- arrow_remove = "top-arrow bottom-arrow left-arrow";
- }
-
- popover
- .removeClass(remove)
- .addClass('popover-' + position)
- .find('.arrow')
- .removeClass(arrow_remove)
- .addClass(arrow);
- }
- };
- var methods = {
- /**
- * Initialization method
- * Merges parameters with defaults, makes the popover and saves data
- *
- * @param object
- * @return jQuery
- */
- init : function(params) {
- return this.each(function() {
- var options = $.extend({}, defaults, params);
-
- var $this = $(this);
- var data = $this.popover('getData');
-
- if ( ! data) {
- var popover = $('<div class="popover" />')
- .addClass(options.classes)
- .append('<div class="arrow" />')
- .append('<div class="wrap"></div>')
- .appendTo('body')
- .hide();
-
- if (options.stopChildrenPropagation) {
- popover.children().bind('click.popover', function(event) {
- event.stopPropagation();
- });
- }
-
- if (options.anchor) {
- if ( ! options.anchor instanceof jQuery) {
- options.anchor = $(options.anchor);
- }
- }
-
- var data = {
- target: $this,
- popover: popover,
- options: options
- };
-
- if (options.title) {
- $('<div class="title" />')
- .html(options.title instanceof jQuery ? options.title.html() : options.title)
- .appendTo(popover.find('.wrap'));
- }
- if (options.content) {
- $('<div class="content" />')
- .html(options.content instanceof jQuery ? options.content.html() : options.content)
- .appendTo(popover.find('.wrap'));
- }
- $this.data('popover', data);
- popovers.push($this);
-
- if (options.url) {
- $this.popover('ajax', options.url);
- }
-
- $this.popover('reposition');
- $this.popover('setTrigger', options.trigger);
-
- if (options.hideOnHTMLClick) {
- var hideEvent = "click.popover";
- if ("ontouchstart" in document.documentElement)
- hideEvent = 'touchstart.popover';
- $('html').unbind(hideEvent).bind(hideEvent, function(event) {
- $('html').popover('fadeOutAll');
- });
- }
-
- if (options.autoReposition) {
- var repos_function = function(event) {
- $this.popover('reposition');
- };
- $(window)
- .unbind('resize.popover').bind('resize.popover', repos_function)
- .unbind('scroll.popover').bind('scroll.popover', repos_function);
- }
- }
- });
- },
- /**
- * Reposition the popover
- *
- * @return jQuery
- */
- reposition: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var popover = data.popover;
- var options = data.options;
- var $anchor = options.anchor ? $(options.anchor) : $this;
- var coordinates = $anchor.offset();
-
- var position = options.position;
- if ( ! (position == 'top' || position == 'right' || position == 'left' || position == 'auto')) {
- position = 'bottom';
- }
- var calc;
-
- if (position == 'auto') {
- var positions = ["bottom", "left", "top", "right"];
- var scrollTop = $(window).scrollTop();
- var scrollLeft = $(window).scrollLeft();
- var windowHeight = $(window).outerHeight();
- var windowWidth = $(window).outerWidth();
-
- $.each (positions, function(i, pos) {
- calc = _.calc_position($this, pos);
-
- var x1 = calc.x1 - scrollLeft;
- var x2 = calc.x2 - scrollLeft + options.horizontalOffset;
- var y1 = calc.y1 - scrollTop;
- var y2 = calc.y2 - scrollTop + options.verticalOffset;
-
- if (x1 < 0 || x2 < 0 || y1 < 0 || y2 < 0)
- //popover is left off of the screen or above it
- return true; //continue
-
- if (y2 > windowHeight)
- //popover is under the window viewport
- return true; //continue
-
- if (x2 > windowWidth)
- //popover is right off of the screen
- return true; //continue
-
- position = pos;
- return false;
- });
-
- if (position == 'auto') {
- //position is still auto
- return;
- }
- }
-
- calc = _.calc_position($this, position);
- var top = calc.top;
- var left = calc.left;
- _.pop_position_class(popover, position);
-
- var marginTop = 0;
- var marginLeft = 0;
- if (position == 'bottom') {
- marginTop = options.verticalOffset;
- }
- if (position == 'top') {
- marginTop = -options.verticalOffset;
- }
- if (position == 'right') {
- marginLeft = options.horizontalOffset;
- }
- if (position == 'left') {
- marginLeft = -options.horizontalOffset;
- }
-
- var css = {
- left: calc.x1,
- top: calc.y1,
- marginTop: marginTop,
- marginLeft: marginLeft
- };
-
- if (data.initd && options.animateChange) {
- popover.css(css);
- } else {
- data.initd = true;
- popover.css(css);
- }
- $this.data('popover', data);
- }
- });
- },
- /**
- * Remove a popover from the DOM and clean up data associated with it.
- *
- * @return jQuery
- */
- destroy: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- $this.unbind('.popover');
- $(window).unbind('.popover');
- data.popover.remove();
- $this.removeData('popover');
- });
- },
- /**
- * Show the popover
- *
- * @return jQuery
- */
- show: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var popover = data.popover;
- $this.popover('reposition');
- popover.clearQueue().css({ zIndex: 950 }).show();
- }
- });
- },
- /**
- * Hide the popover
- *
- * @return jQuery
- */
- hide: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- data.popover.hide().css({ zIndex: 949 });
- }
- });
- },
- /**
- * Fade out the popover
- *
- * @return jQuery
- */
- fadeOut: function(ms) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var popover = data.popover;
- var options = data.options;
- popover.delay(100).css({ zIndex: 949 }).fadeOut(ms ? ms : options.fadeSpeed);
- }
- });
- },
- /**
- * Hide all popovers
- *
- * @return jQuery
- */
- hideAll: function() {
- return $.each (popovers, function(i, pop) {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var popover = data.popover;
- popover.hide();
- }
- });
- },
- /**
- * Fade out all popovers
- *
- * @param int
- * @return jQuery
- */
- fadeOutAll: function(ms) {
- return $.each (popovers, function(i, pop) {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var popover = data.popover;
- var options = data.options;
- popover.css({ zIndex: 949 }).fadeOut(ms ? ms : options.fadeSpeed);
- }
- });
- },
- /**
- * Set the event trigger for the popover. Also cleans the previous binding.
- *
- * @param string
- * @return jQuery
- */
- setTrigger: function(trigger) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var popover = data.popover;
- var options = data.options;
- var $anchor = options.anchor ? $(options.anchor) : $this;
-
- if (trigger === 'click') {
- $anchor.unbind('click.popover').bind('click.popover', function(event) {
- if (options.preventDefault) {
- event.preventDefault();
- }
- event.stopPropagation();
- $this.popover('show');
- });
- popover.unbind('click.popover').bind('click.popover', function(event) {
- event.stopPropagation();
- });
- } else {
- $anchor.unbind('click.popover');
- popover.unbind('click.popover')
- }
-
- if (trigger === 'hover') {
- $anchor.add(popover).bind('mousemove.popover', function(event) {
- $this.popover('show');
- });
- $anchor.add(popover).bind('mouseleave.popover', function(event) {
- $this.popover('fadeOut');
- });
- } else {
- $anchor.add(popover).unbind('mousemove.popover').unbind('mouseleave.popover');
- }
-
- if (trigger === 'focus') {
- $anchor.add(popover).bind('focus.popover', function(event) {
- $this.popover('show');
- });
- $anchor.add(popover).bind('blur.popover', function(event) {
- $this.popover('fadeOut');
- });
- $anchor.bind('click.popover', function(event) {
- event.stopPropagation();
- });
- } else {
- $anchor.add(popover).unbind('focus.popover').unbind('blur.popover').unbind('click.popover');
- }
- }
- });
- },
- /**
- * Rename the popover's title
- *
- * @param string
- * @return jQuery
- */
- title: function(text) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var title = data.popover.find('.title');
- var wrap = data.popover.find('.wrap');
- if (title.length === 0) {
- title = $('<div class="title" />').appendTo(wrap);
- }
- title.html(text);
- }
- });
- },
- /**
- * Set the popover's content
- *
- * @param html
- * @return jQuery
- */
- content: function(html) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var content = data.popover.find('.content');
- var wrap = data.popover.find('.wrap');
- if (content.length === 0) {
- content = $('<div class="content" />').appendTo(wrap);
- }
- content.html(html);
- }
- });
- },
- /**
- * Read content with AJAX and set popover's content.
- *
- * @param string
- * @param object
- * @return jQuery
- */
- ajax: function(url, ajax_params) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- var ajax_defaults = {
- url: url,
- success: function(ajax_data) {
- var content = data.popover.find('.content');
- var wrap = data.popover.find('.wrap');
- if (content.length === 0) {
- content = $('<div class="content" />').appendTo(wrap);
- }
- content.html(ajax_data);
- }
- }
- var ajax_options = $.extend({}, ajax_defaults, ajax_params);
- $.ajax(ajax_options);
- }
- });
- },
- setOption: function(option, value) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.popover('getData');
-
- if (data) {
- data.options[option] = value;
- $this.data('popover', data);
- }
- });
- },
- getData: function() {
- var ret = [];
- this.each(function() {
- var $this = $(this);
- var data = $this.data('popover');
-
- if (data) ret.push(data);
- });
-
- if (ret.length == 0) {
- return;
- }
- if (ret.length == 1) {
- ret = ret[0];
- }
- return ret;
- }
- };
- $.fn.popover = function(method) {
- if (methods[method]) {
- return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
- } else if ( typeof method === 'object' || !method) {
- return methods.init.apply(this, arguments);
- } else {
- $.error('Method ' + method + ' does not exist on jQuery.popover');
- }
- }
- })(jQuery);
|