-
Notifications
You must be signed in to change notification settings - Fork 61
/
jquery.aSimpleTour.min.js
1 lines (1 loc) · 8.7 KB
/
jquery.aSimpleTour.min.js
1
!function($){var settings={data:[],autoStart:!1,controlsPosition:"TR",useOverlay:!0,overlayZindex:10,keyboard:!0,welcomeMessage:"<h2>Tour</h2><p>Welcome to the Tour Plugin</p>",buttons:{next:{text:"Next",class:""},prev:{text:"Previous",class:""},start:{text:"Start",class:""},end:{text:"End",class:""}},controlsCss:{background:"rgba(8, 68, 142, 0.80)",color:"#fff"},tooltipCss:{background:"rgba(0, 0, 0, 0.70)",color:"#fff"}},options,step,steps,ew,eh,el,et,started=!1,$overlay,$tooltip=$("<div>",{id:"tourtip",className:"tourtip",html:""}).css({display:"none",padding:"10px 20px",position:"absolute","font-family":"sans-serif","border-radius":"5px","font-size":"12px","box-sizing":"border-box","z-index":"2000"}),methods={init:function(a,b){options=$.extend(settings,a),b="undefined"==typeof b?null:b-1,0==started&&(started=!0,options.data.unshift({element:"body",tooltip:null,text:options.welcomeMessage}),controls='<div id="tourControls"> <div id="tourText">'+options.welcomeMessage+'</div> <div id="tourButtons"> <button id="tourPrev" style="display:none" class="'+options.buttons.prev.class+'">'+options.buttons.prev.text+'</button> <button id="tourNext" class="'+options.buttons.start.class+'">'+options.buttons.start.text+'</button> <button id="tourEnd" style="display:none" class="'+options.buttons.end.class+'">'+options.buttons.end.text+"</button> </div> </div>",$controlsCss={display:"block",position:"fixed",width:"200px",padding:"10px 20px","border-radius":"10px","font-family":"sans-serif","z-index":"1000"},$controls=$(controls).css($controlsCss).css(options.controlsCss),$cpos=methods.getControlPosition(options.controlsPosition),$controls.css($cpos),$("body").append($controls),$tooltip.css(options.tooltipCss),step=0,steps=options.data.length,$("body").prepend($tooltip)),null!=b&&(step=b,stepData=options.data[b],methods.setTooltip(step,stepData)),methods.bindElements()},next:function(){step>-1&&options.data[step].hasOwnProperty("location")&&"undefined"!=typeof options.data[step].location?location.href=options.data[step].location:(step++,step==steps?methods.destroy():($tooltip.hide(),stepData=options.data[step],methods.setTooltip(step,stepData,"next")))},prev:function(){$tooltip.hide(),step<=0?step--:(step--,stepData=options.data[step],methods.setTooltip(step,stepData,"prev"))},setTooltip:function(a,b,c){options.useOverlay&&($overlay||($overlay=$('<div id="touroverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: '+options.overlayZindex+'; background-color: rgba(0,0,0,0.5);">')),$("body").append($overlay)),$previousElement=$("next"==c?options.data[a-1].element:options.data[a+1].element),"undefined"!=typeof $previousElement.data("tour-data")&&(previous_data=$previousElement.data("tour-data"),$previousElement.css("position",previous_data.position),$previousElement.css("z-index",previous_data.zindex)),$element=$(b.element).eq(0),tour_data={zindex:$element.css("z-index"),position:$element.css("position"),"background-color":$element.css("background-color")},$element.data("tour-data",tour_data),$element.css("position","relative").css("z-index",1e3),options.useOverlay&&(bgc="transparent"==$element.css("background-color")?methods.findParentBg($element):$element.css("background-color"),$element.css("background-color",bgc)),"undefined"!=typeof b.callback&&"function"==typeof b.callback&&b.callback(),b.controlsPosition&&methods.setControlsPosition(b.controlsPosition),null!=b.tooltip&&(tooltipContent=b.tooltip,"undefined"!=typeof b.files&&b.files.length>0&&(tooltipContent+="<hr>",$.each(b.files,function(a,b){tooltipContent+='<a href="'+b.url+'" target="_blank">'+b.name+"</a><br>"})),$tooltip.html(tooltipContent),b.text&&$("#tourText").html(b.text),tooltipPos="undefined"==typeof b.position?"BL":b.position,$pos=methods.getTooltipPosition(tooltipPos,$element),$tooltip.css({top:$pos.top+"px",left:$pos.left+"px"}),$tooltip.show("fast"),$.scrollTo($tooltip,200,{offset:-100})),a==steps&&methods.destroy(),methods.showHideButtons()},setControlsPosition:function(a){chtml=$controls.html(),$controls.remove(),$controls=$(controls).html(chtml),$controls=$controls.css($controlsCss).css(options.controlsCss),position=methods.getControlPosition(a),$controls.css(position),$("body").append($controls)},getTooltipPosition:function(a,b){switch(ew=$element.outerWidth(),eh=$element.outerHeight(),el=$element.offset().left,et=$element.offset().top,tw=$tooltip.width()+parseInt($tooltip.css("padding-left"))+parseInt($tooltip.css("padding-right")),th=$tooltip.height()+parseInt($tooltip.css("padding-top"))+ +parseInt($tooltip.css("padding-bottom")),$(".tourArrow").remove(),tbg=$tooltip.css("background-color"),$upArrow=$('<div class="tourArrow"></div>').css({position:"absolute",display:"block",width:"0",height:"0","border-left":"5px solid transparent","border-right":"5px solid transparent","border-bottom":"5px solid "+tbg}),$downArrow=$('<div class="tourArrow"></div>').css({position:"absolute",display:"block",width:"0",height:"0","border-left":"5px solid transparent","border-right":"5px solid transparent","border-top":"5px solid "+tbg}),$rightArrow=$('<div class="tourArrow"></div>').css({position:"absolute",display:"block",width:"0",height:"0","border-top":"5px solid transparent","border-bottom":"5px solid transparent","border-left":"5px solid "+tbg}),$leftArrow=$('<div class="tourArrow"></div>').css({position:"absolute",display:"block",width:"0",height:"0","border-top":"5px solid transparent","border-bottom":"5px solid transparent","border-right":"5px solid "+tbg}),a){case"BL":position={left:el,top:et+eh+10},$upArrow.css({top:"-5px",left:"48%"}),$tooltip.prepend($upArrow);break;case"BR":position={left:el+ew-tw,top:et+eh+10},$upArrow.css({top:"-5px",left:"48%"}),$tooltip.prepend($upArrow);break;case"TL":position={left:el,top:et-th-10},$downArrow.css({top:th,left:"48%"}),$tooltip.append($downArrow);break;case"TR":position={left:el+ew-tw,top:et-th-10},$downArrow.css({top:th,left:"48%"}),$tooltip.append($downArrow);break;case"RT":position={left:el+ew+10,top:et},$leftArrow.css({left:"-5px"}),$tooltip.prepend($leftArrow);break;case"RB":position={left:el+ew+10,top:et+eh-th},$leftArrow.css({left:"-5px"}),$tooltip.prepend($leftArrow);break;case"LT":position={left:el-tw-10,top:et},$rightArrow.css({right:"-5px"}),$tooltip.prepend($rightArrow);break;case"LB":position={left:el-tw-10,top:et+eh-th},$rightArrow.css({right:"-5px"}),$tooltip.prepend($rightArrow);break;case"B":position={left:el+ew/2-tw/2,top:et+eh+10},$upArrow.css({top:"-5px",left:"48%"}),$tooltip.prepend($upArrow);break;case"L":position={left:el-tw-10,top:et+eh/2-th/2},$rightArrow.css({right:"-5px"}),$tooltip.prepend($rightArrow);break;case"T":position={left:el+ew/2-tw/2,top:et-th-10},$downArrow.css({top:th,left:"48%"}),$tooltip.append($downArrow);break;case"R":position={left:el+ew+10,top:et+eh/2-th/2},$leftArrow.css({left:"-5px"}),$tooltip.prepend($leftArrow)}return position},getControlPosition:function(a){switch(a){case"TR":a={top:"10px",right:"10px"};break;case"TL":a={top:"10px",left:"10px"};break;case"BL":a={bottom:"10px",left:"10px"};break;case"BR":a={bottom:"10px",right:"10px"}}return a},showHideButtons:function(){step<steps&&$("#tourNext").show().html(options.buttons.next.text),step<=0&&($("#tourPrev").hide(),$("#tourEnd").hide(),$("#tourNext").html(options.buttons.start.text).attr("class",options.buttons.start.class)),step<=steps&&step>0&&($("#tourPrev").show(),$("#tourEnd").show(),$("#tourNext").show().html(options.buttons.next.text).attr("class",options.buttons.next.class))},findParentBg:function(a){for(;"transparent"==a.css("background-color");)a=a.parent();return a.css("background-color")},destroy:function(){$("#tourControls").remove(),$("#tourtip").remove(),$tooltip.css({display:"none"}).html(""),step=-1,started=!1,options.keyboard=!1,options.useOverlay&&$overlay.remove()},bindElements:function(){$("body").on("click","#tourNext",function(){methods.next()}),$("body").on("click","#tourPrev",function(){methods.prev()}),$("body").on("click","#tourEnd",function(){methods.destroy()}),$("body").on("keydown",function(a){37==a.keyCode&&options.keyboard ? methods.prev() : '',39==a.keyCode&&options.keyboard ? methods.next() : '',27==a.keyCode&&options.keyboard ? methods.destroy() : '' })}};$.fn.aSimpleTour=function(a){return t=this,methods[a]?methods[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?void $.error("Method "+a+" does not exist on jQuery.aSimpleTour"):methods.init.apply(this,arguments)},$(window).load(function(){tourStep=window.location.hash.substr(1).split("="),"undefined"!=typeof eval(tourStep[0])&&"undefined"!=typeof eval(tourStep[1])&&$.aSimpleTour(eval(tourStep[0]),tourStep[1])})}(jQuery),$.aSimpleTour=function(a,b){return $.fn.aSimpleTour(a,b),this};