include/javascript/jquery/jquery.popoverext.js

   1 !function( $ ) {
   2
   3  "use strict"
   4
   5   var PopoverExt = function ( element, options ) {
   6     this.init('popoverext', element, options)
   7   }
   8
   9   /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
  10      ========================================== */
  11
  12   PopoverExt.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
  13
  14     constructor: PopoverExt
  15   , init: function ( type, element, options ) {
  16       var eventIn
  17         , eventOut
  18
  19       this.type = type
  20       this.$element = $(element)
  21       this.options = this.getOptions(options)
  22       this.enabled = true
  23
  24       if (this.options.trigger != 'manual') {
  25         eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
  26         eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
  27         this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
  28         this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
  29       }
  30
  31       //console.log(this.tip())
  32       var $tip = this.tip();
  33
  34
  35       this.options.selector ?
  36         (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
  37         this.fixTitle()
  38     }
  39
  40   , setContent: function () {
  41       var $tip = this.tip()
  42         , title = this.getTitle()
  43         , content = this.getContent()
  44         , footer = this.getFooter();
  45
  46       $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title);
  47       $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content);
  48       $tip.find('.popover-footer')[ $.type(footer) == 'object' ? 'append' : 'html' ](footer);
  49
  50       $tip.removeClass('fade top bottom left right in');
  51     }
  52
  53   , hasContent: function () {
  54       return this.getTitle() || this.getContent()
  55     }
  56
  57
  58   , setId: function() {
  59                 var $tip;
  60                 if(this.options.id) {
  61                         $tip = this.tip();
  62                         $tip.attr("id",this.$element.attr("id") + "Popover");
  63                 }
  64         }
  65   , show: function () {
  66       var $tip
  67         , inside
  68         , pos
  69         , actualWidth
  70         , actualHeight
  71         , placement
  72         , tp;
  73
  74
  75       if (this.hasContent() && this.enabled) {
  76         $tip = this.tip();
  77         this.setContent();
  78         this.setId();
  79
  80         if (this.options.animation) {
  81           $tip.addClass('fade')
  82         }
  83
  84         placement = typeof this.options.placement == 'function' ?
  85           this.options.placement.call(this, $tip[0], this.$element[0]) :
  86             this.options.placement;
  87
  88         inside = /in/.test(placement)
  89
  90         $tip
  91           .remove()
  92           .css({ top: 0, left: 0, display: 'block' })
  93           .appendTo(inside ? this.$element : document.body);
  94
  95         if(this.options.hideOnBlur) {
  96         $tip
  97           .attr("tabindex","-1")
  98           .on("blur", $.proxy(this.hide, this))
  99           .trigger("focus");
 100         }
 101
 102         pos = this.getPosition(inside)
 103         actualWidth = $tip[0].offsetWidth
 104         actualHeight = $tip[0].offsetHeight
 105
 106         switch (inside ? placement.split(' ')[1] : placement) {
 107           case 'bottom':
 108             tp = {top: pos.top + pos.height + this.options.topOffset, left: pos.left + pos.width / 2 - actualWidth / 2}
 109             break
 110           case 'bottom left':
 111             tp = {top: pos.top + pos.height + this.options.topOffset, left: pos.left + this.options.leftOffset}
 112             break
 113           case 'bottom right':
 114             tp = {top: pos.top + pos.height + this.options.topOffset , left: (pos.left + pos.width) - actualWidth - this.options.leftOffset }
 115             break
 116           case 'top':
 117             tp = {top: pos.top - actualHeight + this.options.topOffset, left: pos.left + (pos.width / 2 - actualWidth / 2) + this.options.leftOffset}
 118             break
 119           case 'top right':
 120             tp = {top: pos.top - actualHeight + this.options.topOffset, left: (pos.left + pos.width) - actualWidth - this.options.leftOffset}
 121             break
 122           case 'top left':
 123             tp = {top: pos.top - actualHeight  + this.options.topOffset, left: pos.left + this.options.leftOffset}
 124             break
 125           case 'left':
 126             tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
 127             break
 128           case 'right':
 129             tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
 130             break
 131         }
 132
 133         $tip
 134           .css(tp)
 135           .addClass(placement)
 136           .addClass('in')
 137
 138           if(this.options.fixed == true) {
 139                 $tip.css("position","fixed");
 140           }
 141       }
 142           this.options.onShow();
 143     }
 144   , getFooter: function () {
 145       var footer
 146         , $e = this.$element
 147         , o = this.options;
 148
 149       footer = $e.attr('data-footer')
 150         || (typeof o.content == 'function' ? o.footer.call($e[0]) :  o.footer);
 151
 152       footer = footer.toString().replace(/(^\s*|\s*$)/, "");
 153
 154       return footer;
 155     }
 156
 157   })
 158
 159
 160  /* POPOVER PLUGIN DEFINITION
 161   * ======================= */
 162
 163   $.fn.popoverext = function ( option ) {
 164     return this.each(function () {
 165       var $this = $(this)
 166         , data = $this.data('popoverext')
 167         , options = typeof option == 'object' && option
 168       if (!data) $this.data('popoverext', (data = new PopoverExt(this, options)))
 169       if (typeof option == 'string') data[option]()
 170     })
 171   }
 172
 173   $.fn.popoverext.Constructor = PopoverExt
 174
 175   $.fn.popoverext.defaults = $.extend({} , $.fn.popover.defaults, {
 176         fixed: false,
 177         template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div><div class="popover-footer"></div></div></div>',
 178         id: false,
 179         footer: '',
 180     onShow:$.empty,
 181     leftOffset: 0,
 182     topOffset: 0,
 183     hideOnBlur: false
 184   })
 185
 186 }( window.jQuery );