-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
jTippy.min.js
executable file
·8 lines (8 loc) · 7.96 KB
/
jTippy.min.js
1
2
3
4
5
6
7
8
/*
jTippy
https://github.com/HTMLGuyLLC/jTippy
Made with love by HTMLGuy, LLC
https://htmlguy.com
MIT Licensed
*/
(function(a){a.fn.jTippy=function(b){if(1<this.length)return this.each(function(){a(this).jTippy(b)}),this;if("undefined"==typeof this||1!==this.length)return!1;const c=a(this);b=a.extend({},a.jTippy.defaults,b,c.data());let d=c.attr("title");"undefined"!=typeof d&&d.length&&(b.title=d),b.class+=" jt-"+b.theme+"-theme",b.class+=" jt-"+b.size,"click"!==b.trigger&&(b.backdrop=!1),b.trigger=b.trigger.toLowerCase().trim();let f={dom:this,dom_wrapped:c,position_debug:b.position_debug,trigger:b.trigger,title:b.title,content:b.title,theme:b.theme,class:b.class,backdrop:b.backdrop,position:b.position,close_on_outside_click:b.close_on_outside_click,singleton:b.singleton,dataAttr:"jTippy",createTooltipHTML:function(){return`<div class='jtippy ${f.class}' role='tooltip'><div class='jt-arrow'></div><div class='jt-title'>${f.content}</div></div>`},createBackdropHTML:function(){return!!f.backdrop&&`<div class='jt-backdrop jt-${f.backdrop}-backdrop'></div>`},destroy:function(){const b=f.dom_wrapped.data(f.dataAttr);"undefined"!=typeof b&&null!==b&&("click"===b.trigger?(b.dom_wrapped.off("touchstart mousedown",b.toggleTooltipHandler),b.dom_wrapped.off("click",b.preventDefaultHandler)):"focus"===b.trigger?(b.dom_wrapped.off("touchstart focus",b.show),b.dom_wrapped.off("touchend blur",b.hide)):"hover"===b.trigger?(b.dom_wrapped.off("touchstart mouseenter",b.show),b.dom_wrapped.off("touchend mouseleave",b.hide)):"hoverfocus"===b.trigger&&(b.dom_wrapped.off("focus",b.hoverfocusFocusShow),b.dom_wrapped.off("blur",b.hoverfocusBlur),b.dom_wrapped.off("touchstart mouseenter",b.show),b.dom_wrapped.off("touchend mouseleave",b.hoverfocusHide)),a(window).off("resize",b.onResize),b.isVisible()&&b.hide(),b.dom_wrapped.data(b.dataAttr,null))},initialize:function(){return"click"===f.trigger?(f.dom_wrapped.on("touchstart mousedown",f.toggleTooltipHandler),f.dom_wrapped.on("click",f.preventDefaultHandler)):"focus"===f.trigger?(f.dom_wrapped.on("touchstart focus",f.show),f.dom_wrapped.on("touchend blur",f.hide)):"hover"===f.trigger?(f.dom_wrapped.on("touchstart mouseenter",f.show),f.dom_wrapped.on("touchend mouseleave",f.hide)):"hoverfocus"===f.trigger&&(f.dom_wrapped.on("focus",f.hoverfocusFocusShow),f.dom_wrapped.on("blur",f.hoverfocusBlur),f.dom_wrapped.on("touchstart mouseenter",f.show),f.dom_wrapped.on("touchend mouseleave",f.hoverfocusHide)),a.jTippy.body_click_initialized||(a(document).on("touchstart mousedown",f.onClickOutside),a.jTippy.bodyClickInitialized=!0),f.dom_wrapped.data(f.dataAttr,f),f.dom},hoverfocusFocusShow:function(){f.dom_wrapped.addClass("jt-focused"),f.show()},hoverfocusBlur:function(){f.dom_wrapped&&f.dom_wrapped.length&&f.dom_wrapped.removeClass("jt-focused"),f.hide()},hoverfocusHide:function(){return!f.dom_wrapped.hasClass("jt-focused")&&void f.hide()},preventDefaultHandler:function(a){return a.preventDefault(),!1},toggleTooltipHandler:function(a){return a.preventDefault(),f.isVisible()&&f.hide()||f.show(),!1},show:function(b){if(f.isVisible())return!1;f.singleton&&f.hideAllVisible();const c=a("body");"blurred"===f.backdrop?c.addClass("jt-blurred-body"):f.backdrop&&c.append(f.createBackdropHTML()),("undefined"==typeof b||b)&&"function"==typeof f.title&&(f.content=f.title(f.dom_wrapped,f)),c.append(f.createTooltipHTML()),f.tooltip=a(".jtippy:last"),f.positionTooltip(),a(window).on("resize",f.onResize);const d="jTippy"+Date.now();f.tooltip.attr("id",d),f.dom.attr("aria-describedby",d),a.jTippy.visible.push(f),("undefined"==typeof b||b)&&f.dom.trigger("jt-show",[f.tooltip,f.hide]),a("body").on("DOMSubtreeModified",f.positionTooltip)},isVisible:function(){return-1<a.inArray(f,a.jTippy.visible)},hideAllVisible:function(){return a.each(a.jTippy.visible,function(a,b){b.dom_wrapped.hasClass("jt-focused")||b.hide()}),this},hide:function(b){a("body").off("DOMSubtreeModified",f.positionTooltip),a(window).off("resize",f.onResize),f.dom.attr("aria-describedby",null),f.tooltip&&f.tooltip.length&&f.tooltip.remove(),"blurred"===f.backdrop?a("body").removeClass("jt-blurred-body"):f.backdrop&&a(".jt-backdrop").remove(),("undefined"==typeof b||b)&&f.dom.trigger("jt-hide"),"click"!==f.trigger&&f.dom_wrapped.off("touchstart mousedown",f.hide);var c=a.inArray(f,a.jTippy.visible);return a.jTippy.visible.splice(c,1),f.dom},onResize:function(){f.hide(!1),f.show(!1)},onClickOutside:function(b){const c=a(b.target);c.hasClass("jtippy")||c.parents(".jtippy:first").length||a.each(a.jTippy.visible,function(a,b){"undefined"!=typeof b&&b.close_on_outside_click&&(c!==b.dom_wrapped||"focus"!==b.trigger&&"hoverfocus"!==b.trigger)&&b.hide()})},positionTooltip:function(){f.positionDebug("-- Start positioning --"),f.dom_wrapped.length&&f.dom_wrapped.is(":visible")||(f.positionDebug("Elem no longer exists. Removing tooltip"),f.hide(!0));let a=f.tooltip.find(".jt-arrow"),[b,c,d,e,g,h]=f.calculateSafePosition(f.position);return("undefined"==typeof g&&"auto"!==f.position&&(f.positionDebug("Couldn't fit preferred position"),[b,c,d,e,g,h]=f.calculateSafePosition("auto")),"undefined"==typeof g)?(f.positionDebug("Doesn't appear to fit. Displaying centered"),f.tooltip.addClass("jt-centered").css({top:"50%",left:"50%","margin-left":-(d/2),"margin-top":-(e/2)}),a&&a.length&&a.remove(),void f.positionDebug("-- Done positioning --")):(f.positionDebug({"Setting Position":{Left:g,Top:h}}),f.tooltip.css("left",g),f.tooltip.css("top",h),60>c&&(f.positionDebug("Element is less than "+c+"px. Setting arrow to hug the side tighter"),b+=" jt-arrow-super-hug"),a.addClass("jt-arrow-"+b),f.positionDebug("-- Done positioning --"),f)},calculateSafePosition:function(a){let b=f.tooltip.find(".jt-arrow"),c=f.dom_wrapped.offset(),d=f.dom_wrapped.outerHeight(),e=f.dom_wrapped.outerWidth(),g=f.tooltip.outerWidth(),h=f.tooltip.outerHeight(),i=document.querySelector("body").offsetWidth,j=document.querySelector("body").offsetHeight,k=b.is(":visible")?b.outerHeight():0,l=b.is(":visible")?b.outerWidth():0,m={};m.below=5<j-(h+d+c.top),m.above=5<c.top-h,m.vertical_half=5<c.top+e/2-h/2,m.right=5<i-(g+e+c.left),m.right_half=5<i-c.left-e/2-g/2,m.right_full=5<i-c.left-g,m.left=5<c.left-g,m.left_half=5<c.left+e/2-g/2,m.left_full=5<c.left-g,f.positionDebug({"Clicked Element":{Left:c.left,Top:c.top}}),f.positionDebug({"Element Dimensions":{Height:d,Width:e},"Tooltip Dimensions":{Height:h,Width:g},"Window Dimensions":{Height:j,Width:i},"Arrow Dimensions":{Height:k,Width:l}}),f.positionDebug(m);let n,o,p;return("auto"===a||"bottom"===a)&&m.below&&m.left_half&&m.right_half?(f.positionDebug("Displaying below, centered"),n="top",o=c.left-g/2+e/2,p=c.top+d+k/2):("auto"===a||"top"===a)&&m.above&&m.left_half&&m.right_half?(f.positionDebug("Displaying above, centered"),n="bottom",o=c.left-g/2+e/2,p=c.top-h-k/2):("auto"===a||"left"===a)&&m.left&&m.vertical_half?(f.positionDebug("Displaying left, centered"),n="right",o=c.left-g-l/2,p=c.top+d/2-h/2):("auto"===a||"right"===a)&&m.right&&m.vertical_half?(f.positionDebug("Displaying right, centered"),n="left",o=c.left+e+l/2,p=c.top+d/2-h/2):("auto"===a||"bottom"===a)&&m.below&&m.right_full?(f.positionDebug("Displaying below, to the right"),n="top jt-arrow-hug-left",o=c.left,p=c.top+d+k/2):("auto"===a||"bottom"===a)&&m.below&&m.left_full?(f.positionDebug("Displaying below, to the left"),n="top jt-arrow-hug-right",o=c.left+e-g,p=c.top+d+k/2):("auto"===a||"top"===a)&&m.above&&m.right_full?(f.positionDebug("Displaying above, to the right"),n="bottom jt-arrow-hug-left",o=c.left,p=c.top-h-k/2):("auto"===a||"top"===a)&&m.above&&m.left_full&&(f.positionDebug("Displaying above, to the left"),n="bottom jt-arrow-hug-right",o=c.left+e-g,p=c.top-h-k/2),[n,e,g,h,o,p]},positionDebug:function(a){return!!f.position_debug&&("object"==typeof a?console.table(a):console.log(`Position: ${a}`))}};return f.destroy(),f.initialize()},a.jTippy={},a.jTippy.visible=[],a.jTippy.body_click_initialized=!1,a.jTippy.defaults={title:"",trigger:"hoverfocus",position:"auto",class:"",theme:"black",size:"small",backdrop:!1,singleton:!0,close_on_outside_click:!0}})(jQuery);