guides/dist/guides.min.js

Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.

/*
 * guides 1.2.9
 * Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.
 * https://github.com/ejulianova/guides
 *
 * Copyright 2015, Elena Petrova <elena.julianova@gmail.com>
 * Released under the MIT license.
*/

!function t(i,e,s){function o(h,r){if(!e[h]){if(!i[h]){var a="function"==typeof require&&require;if(!r&&a)return a(h,!0);if(n)return n(h,!0);throw new Error("Cannot find module '"+h+"'")}var u=e[h]={exports:{}};i[h][0].call(u.exports,function(t){var e=i[h][1][t];return o(e?e:t)},u,u.exports,t,i,e,s)}return e[h].exports}for(var n="function"==typeof require&&require,h=0;h<s.length;h++)o(s[h]);return o}({1:[function(t,i,e){"use strict";var s=t("./modules/Guides");$.fn.guides=function(t,i){return this.each(function(){var e=$(this),o=e.data("guides"),n="object"==typeof t&&t;(o||"string"!=typeof n)&&(o||e.data("guides",o=new s(this,n)),"string"==typeof t&&o[t](i))})},$.guides=function(t){return new s(null,t)},$.fn.guides.Constructor=s},{"./modules/Guides":3}],2:[function(t,i,e){var s=t("./format"),o=function(t,i,e){this.guide=t,this._distance=t.distance||e.distance,this._color=t.color||e.color,this._class=t.cssClass||e.cssClass||"",this.$highlightedElement=$(t.element).addClass("guides-current-element"),this.$container=i,this.init()};o.prototype._arrowSize=10,o.prototype._path="M{0},{1} C{2},{3},{4},{5},{6},{7}",o.prototype._arrowTemplate='<svg width="{0}" height="{1}">    <defs>        <marker id="arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">            <path d="M2,1 L2,{3} L{3},6 L2,2" style="fill:{4};"></path>        </marker>    </defs>    <path id="line" d="{2}" style="stroke:{4}; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);"></path></svg>',o.prototype.init=function(){return this.$guide=$("<div />",{class:"guides-fade-in guides-guide "+this._class,html:"<span>"+this.guide.html+"</span>"}),this._position(),this},o.prototype._position=function(){this.$highlightedElement&&this.$highlightedElement.length>0?(this._attachToElement(),this.$guide.appendTo(this.$container),this._renderArrow()):this._center(),this._scrollIntoView()},o.prototype._center=function(){this.$guide.css("visibility","hidden").appendTo(this.$container).addClass("guides-center").css({left:0,right:0,textAlign:"center",top:window.innerHeight/2-this.$guide.outerHeight()/2}).css("visibility","visible")},o.prototype._attachToElement=function(){var t=this.$highlightedElement.offset(),i=$("body").width(),e=$("body").height(),s=t.left,o=t.top,n=this.$highlightedElement.outerWidth(),h=this.$highlightedElement.outerHeight(),r=i-s-n,a=e-o-h,u={color:this._color,top:e/2>t.top?t.top:"auto",left:i/2>t.left?t.left:"auto",right:i/2>t.left?"auto":i-t.left-n,bottom:e/2>t.top?"auto":t.bottom};switch(Math.max(s,r,o,a)){case s:this.position="left",u.paddingRight=this._distance,u.right=$(document).width()-t.left,u.left="auto";break;case o:this.position="top",u.paddingBottom=this._distance,u.bottom=$(document).height()-t.top,u.top="auto";break;case r:this.position="right",u.paddingLeft=this._distance,u.left=t.left+n,u.right="auto";break;default:this.position="bottom",u.paddingTop=this._distance,u.top=t.top+h,u.bottom="auto"}this.$guide.addClass("guides-"+this.position).css(u)},o.prototype._renderArrow=function(){this._width=this.$guide.outerWidth(),this._height=this.$guide.outerHeight(),this.$guide.append(s(this._arrowTemplate,this._width,this._distance,this[this.position](),this._arrowSize,this._color))},o.prototype.top=function(){var t=this._verticalAlign();return this._getPath(t)},o.prototype.bottom=function(){var t=this._verticalAlign(!0);return this._getPath(t)},o.prototype.left=function(){var t=this._horizontalAlign();return this._getPath(t)},o.prototype.right=function(){var t=this._horizontalAlign(!0);return this._getPath(t)},o.prototype._getPath=function(t){return s(this._path,t.x1,t.y1,t.dx1,t.dy1,t.dx2,t.dy2,t.x2,t.y2)},o.prototype._getFluctuation=function(){return Math.floor(20*Math.random())+10},o.prototype._verticalAlign=function(t){var i=this._width/2,e=t?this._distance:0,s=Math.max(Math.min(this.$highlightedElement.offset().left+this.$highlightedElement.outerWidth()/2-this.$guide.offset().left,this._width-this._arrowSize),this._arrowSize),o=t?this._arrowSize:this._distance-this._arrowSize;return{x1:i,y1:e,x2:s,y2:o,dx1:Math.max(0,Math.min(Math.abs(2*i-s)/3,this._width)+this._getFluctuation()),dy1:t?Math.max(0,o+3*Math.abs(e-o)/4):Math.max(0,e+3*Math.abs(e-o)/4),dx2:Math.max(0,Math.min(Math.abs(i-3*s)/2,this._width)-this._getFluctuation()),dy2:t?Math.max(0,o+3*Math.abs(e-o)/4):Math.max(0,e+3*Math.abs(e-o)/4)}},o.prototype._horizontalAlign=function(t){var i=t?this._distance:this._width-this._distance,e=this._height/2,s=t?this._arrowSize:this._width-this._arrowSize,o=Math.max(Math.min(this.$highlightedElement.offset().top+this.$highlightedElement.outerHeight()/2-this.$guide.offset().top,this._height-this._arrowSize),this._arrowSize);return{x1:i,y1:e,x2:s,y2:o,dx1:t?Math.max(0,s+3*Math.abs(i-s)/4):Math.max(0,i+3*Math.abs(i-s)/4),dy1:Math.max(0,Math.min(Math.abs(2*e-o)/3,this._height)+this._getFluctuation()),dx2:t?Math.max(0,s+3*Math.abs(i-s)/4):Math.max(0,i+3*Math.abs(i-s)/4),dy2:Math.max(0,Math.min(Math.abs(e-3*o)/2,this._height)+this._getFluctuation())}},o.prototype._scrollIntoView=function(){if(0===this.$highlightedElement.length)return void $("html,body").animate({scrollTop:0},500);var t=this.$guide.offset(),i=t.top,e=t.top+this.$guide.outerHeight(),s=t.left,o=t.left+this.$guide.outerWidth(),n=$(document).scrollTop(),h=$(document).scrollLeft();(n>i||n+$(window).height()<e)&&$("html,body").animate({scrollTop:"bottom"===this.position?i-100:i},500),(h>s||h+$(window).width()<o)&&$("html,body").animate({scrollLeft:"righ"===this.position?s-100:s},500)},o.prototype.destroy=function(){this.$highlightedElement.removeClass("guides-current-element"),this.$guide.remove()},i.exports=o},{"./format":4}],3:[function(t,i,e){var s=t("./Guide"),o=function(t,i){this.element=t,this.$element=$(t),this.options={},this._current=0,this.setOptions(i),t&&this.$element.on("click.guides",$.proxy(this.start,this))};o.DEFAULTS={distance:100,color:"#fff",cssClass:"",guides:[]},o.prototype.start=function(t){return t&&t.preventDefault(),this._isAlreadyRunning()?this:(this._current=0,this._renderCanvas()._renderGuide(this.options.guides[this._current])._callback("start"),this)},o.prototype.end=function(){return this.$canvas&&(this.$canvas.remove(),this.$canvas=null),this._currentGuide&&(this._currentGuide.destroy(),this._currentGuide=null),$(document).off("keyup.guides"),this._callback("end"),this},o.prototype.next=function(){return this._renderGuide(this.options.guides[++this._current])._callback("next"),this},o.prototype.prev=function(){if(this._current)return this._renderGuide(this.options.guides[--this._current])._callback("prev"),this},o.prototype.setOptions=function(t){return"object"!=typeof t?this:void(this.options=$.extend({},o.DEFAULTS,this.options,t))},o.prototype.destroy=function(){return this.end(),this.$element.off("click.guides"),this._callback("destroy"),this},o.prototype._callback=function(t){var i=this.options[t],e={sender:this};this._currentGuide&&(e.$element=this._currentGuide.guide.element,e.$guide=this._currentGuide.$element),$.isFunction(i)&&i.apply(this,[e])},o.prototype._isAlreadyRunning=function(){return!!this.$canvas},o.prototype._renderCanvas=function(){return this.$canvas=$("<div />",{class:"guides-canvas guides-fade-in",html:'<div class="guides-overlay"></div><div class="guides-mask"></div>'}).appendTo("body"),this._bindNavigation(),this},o.prototype._renderGuide=function(t){return t?(this._currentGuide&&this._currentGuide.destroy(),this._callback("render",t),$.isFunction(t.render)&&t.render.apply(this,[t]),this._currentGuide=new s(t,this.$canvas,this.options),this):(this.end(),this)},o.prototype._bindNavigation=function(){return this.$canvas.on("click.guides",$.proxy(this._onCanvasClick,this)),$(document).on("keyup.guides",$.proxy(this._onDocKeyUp,this)),this},o.prototype._onCanvasClick=function(t){this.next()},o.prototype._onDocKeyUp=function(t){switch(t.which){case 27:this.end();break;case 39:case 32:this.next();break;case 37:case 8:t.preventDefault(),this.prev()}},i.exports=o},{"./Guide":2}],4:[function(t,i,e){i.exports=function(){for(var t=arguments[0],i=0;i<arguments.length-1;i++){var e=new RegExp("\\{"+i+"\\}","gm");t=t.replace(e,arguments[i+1])}return t}},{}]},{},[1]);