jquery.pagewalkthrough-1.1.0.min.js

(function(e,t,n,r){function b(){var t=u;if(p==0&&c){if(!O())return}if(t.steps[p].popup.type!="modal"&&t.steps[p].popup.type!="nohighlight"){m.html("");if(t.steps[p].wrapper==""||t.steps[p].wrapper==r){alert('Your walkthrough position is: "'+t.steps[p].popup.type+'" but wrapper is empty or undefined. Please check your "'+a+'" wrapper parameter.');return}var i=B(e(t.steps[p].wrapper).offset().top);var s=B(e(t.steps[p].wrapper).offset().left);var o=B(e(t.steps[p].wrapper).innerWidth())||B(e(t.steps[p].wrapper).width());var f=B(e(t.steps[p].wrapper).innerHeight())||B(e(t.steps[p].wrapper).height());var l=F(t.steps[p].margin,"top"),h=F(t.steps[p].margin,"right"),d=F(t.steps[p].margin,"bottom"),v=F(t.steps[p].margin,"left"),g=30,y="",b="";var x={height:B(parseInt(i)-(parseInt(l)+g))};var T={top:x.height,width:B(parseInt(s)-(parseInt(v)+g)),height:B(parseInt(f)+g*2+parseInt(l)+parseInt(d))};if(t.steps[p].overlay==r||t.steps[p].overlay){y="overlay"}else{y="noOverlay";b="killOverlay"}var N=e('<div id="overlayTop" class="'+y+'"></div>').css(x).appendTo(m);var C=e('<div id="overlayLeft" class="'+y+'"></div>').css(T).appendTo(m);if(!t.steps[p].accessable){var k={top:x.height,left:T.width,topCenter:{width:B(parseInt(o)+parseInt(v)+parseInt(h))},middleLeft:{height:B(parseInt(f)+parseInt(l)+parseInt(d))},middleCenter:{width:B(parseInt(o)+parseInt(v)+parseInt(h)),height:B(parseInt(f)+parseInt(l)+parseInt(d))},middleRight:{height:B(parseInt(f)+parseInt(l)+parseInt(d))},bottomCenter:{width:B(parseInt(o)+parseInt(v)+parseInt(h))}};var L=e('<div id="highlightedArea"></div>').css(k).appendTo(m);L.html("<div>"+'<div id="topLeft" class="'+b+'"></div>'+'<div id="topCenter" class="'+b+'" style="width:'+k.topCenter.width+';"></div>'+'<div id="topRight" class="'+b+'"></div>'+"</div>"+'<div style="clear: left;">'+'<div id="middleLeft" class="'+b+'" style="height:'+k.middleLeft.height+';"></div>'+'<div id="middleCenter" class="'+b+'" style="width:'+k.middleCenter.width+";height:"+k.middleCenter.height+'"> </div>'+'<div id="middleRight" class="'+b+'" style="height:'+k.middleRight.height+';"></div>'+"</div>"+'<div style="clear: left;">'+'<div id="bottomLeft" class="'+b+'"></div>'+'<div id="bottomCenter" class="'+b+'" style="width:'+k.bottomCenter.width+';"></div>'+'<div id="bottomRight" class="'+b+'"></div>'+"</div>")}else{var k={top:x.height,left:T.width,topCenter:{width:B(parseInt(o)+parseInt(v)+parseInt(h))}};var A={topAccessable:{position:"absolute",top:x.height,left:T.width,topCenter:{width:B(parseInt(o)+parseInt(v)+parseInt(h))}},middleAccessable:{position:"absolute",top:B(parseInt(x.height)+g),left:T.width,middleLeft:{height:B(parseInt(f)+parseInt(l)+parseInt(d))},middleRight:{height:B(parseInt(f)+parseInt(l)+parseInt(d)),right:B(parseInt(o)+g+parseInt(h)+parseInt(v))}},bottomAccessable:{left:T.width,top:B(parseInt(x.height)+g+parseInt(f)+parseInt(l)+parseInt(d)),bottomCenter:{width:B(parseInt(o)+parseInt(v)+parseInt(h))}}};var L=e('<div id="topAccessable" style="position:'+A.topAccessable.position+"; top:"+A.topAccessable.top+";left:"+A.topAccessable.left+'">'+'<div id="topLeft" class="'+b+'"></div>'+'<div id="topCenter" class="'+b+'" style="width:'+A.topAccessable.topCenter.width+'"></div>'+'<div id="topRight" class="'+b+'"></div>'+"</div>"+'<div id="middleAccessable" class="'+b+'" style="clear: left;position:'+A.middleAccessable.position+"; top:"+A.middleAccessable.top+";left:"+A.middleAccessable.left+';">'+'<div id="middleLeft" class="'+b+'" style="height:'+A.middleAccessable.middleLeft.height+';"></div>'+'<div id="middleRight" class="'+b+'" style="position:absolute;right:-'+A.middleAccessable.middleRight.right+";height:"+A.middleAccessable.middleRight.height+';"></div>'+"</div>"+'<div id="bottomAccessable" style="clear: left;position:absolute;left:'+A.bottomAccessable.left+";top:"+A.bottomAccessable.top+';">'+'<div id="bottomLeft" class="'+b+'"></div>'+'<div id="bottomCenter" class="'+b+'" style="width:'+A.bottomAccessable.bottomCenter.width+';"></div>'+'<div id="bottomRight" class="'+b+'"></div>'+"</div>").appendTo(m)}var M=t.steps[p].accessable?parseInt(A.topAccessable.topCenter.width)+g*2:parseInt(k.topCenter.width)+g*2;var D={left:B(parseInt(T.width)+M),height:T.height,top:T.top,width:B(_()-(parseInt(T.width)+M))};var P=e('<div id="overlayRight" class="'+y+'"></div>').css(D).appendTo(m);var H={height:B(e(n).height()-(parseInt(x.height)+parseInt(T.height))),top:B(parseInt(x.height)+parseInt(T.height))};var j=e('<div id="overlayBottom" class="'+y+'"></div>').css(H).appendTo(m);if(e("#jpWalkthrough").length){e("#jpWalkthrough").remove()}m.appendTo("body").show();if(t.steps[p].accessable){E(true)}else{E(false)}}else if(t.steps[p].popup.type=="modal"){if(e("#jpWalkthrough").length){e("#jpWalkthrough").remove()}if(t.steps[p].overlay==r||t.steps[p].overlay){w(true)}else{w(false)}}else{if(e("#jpWalkthrough").length){e("#jpWalkthrough").remove()}if(t.steps[p].overlay==r||t.steps[p].overlay){S(true)}else{S(false)}}}function w(t){var n=u,r="";if(t){v.appendTo("body").show()}else{if(e("#jpwOverlay").length){e("#jpwOverlay").remove()}}var i=H(parseInt(n.steps[p].popup.contentRotation));g.css({position:"absolute",left:"50%",top:"50%","margin-left":-(parseInt(n.steps[p].popup.width)+60)/2+"px","z-index":"9999"});var s=e('<div id="tooltipTop">'+'<div id="topLeft"></div>'+'<div id="topRight"></div>'+"</div>"+'<div id="tooltipInner">'+"</div>"+'<div id="tooltipBottom">'+'<div id="bottomLeft"></div>'+'<div id="bottomRight"></div>'+"</div>");m.html("");g.html("").append(s).wrapInner('<div id="tooltipWrapper" style="width:'+B(parseInt(n.steps[p].popup.width)+30)+'"></div>').append('<div id="bottom-scratch"></div>').appendTo(m);m.appendTo("body");e("#tooltipWrapper").css(i);e(n.steps[p].popup.content).clone().appendTo("#tooltipInner").show();g.css("margin-top",-(g.height()/2)+"px");m.show()}function E(t){var n=u;var i=n.steps[p].popup.width==""?300:n.steps[p].popup.width,s,o,a,f,l=30,c=t?e("#topAccessable").innerWidth()+l*2||e("#topAccessable").width()+l*2:e("#highlightedArea").innerWidth()||e("#highlightedArea").width(),h=t?e("#middleAccessable").innerHeight()+l*2||e("#middleAccessable").height()+l*2:e("#highlightedArea").innerHeight()||e("#highlightedArea").height(),d=t?e("#topAccessable").offset().top:e("#highlightedArea").offset().top,v=t?e("#topAccessable").offset().left:e("#highlightedArea").offset().left,y=30,b="";var w=n.steps[p].popup.contentRotation==r||parseInt(n.steps[p].popup.contentRotation)==0?P():H(parseInt(n.steps[p].popup.contentRotation));if(e("#jpwOverlay").length){e("#jpwOverlay").remove()}var E=e('<div id="tooltipTop">'+'<div id="topLeft"></div>'+'<div id="topRight"></div>'+"</div>"+'<div id="tooltipInner">'+"</div>"+'<div id="tooltipBottom">'+'<div id="bottomLeft"></div>'+'<div id="bottomRight"></div>'+"</div>");g.html("").css({marginLeft:"0","margin-top":"0",position:"absolute","z-index":"9999"}).append(E).wrapInner('<div id="tooltipWrapper" style="width:'+B(parseInt(n.steps[p].popup.width)+30)+'"></div>').appendTo(m);if(n.steps[p].popup.draggable){g.append('<div id="drag-area" class="draggable-area"></div>')}m.appendTo("body").show();e("#tooltipWrapper").css(w);e(n.steps[p].popup.content).clone().appendTo("#tooltipInner").show();g.append('<span class="'+n.steps[p].popup.position+'"> </span>');switch(n.steps[p].popup.position){case"top":s=d-(g.height()+y/2)+parseInt(n.steps[p].popup.offsetVertical)-86;if(t){o=v+c/2-g.width()/2-40+parseInt(n.steps[p].popup.offsetHorizontal)}else{o=v+c/2-g.width()/2-5+parseInt(n.steps[p].popup.offsetHorizontal)}f=g.width()/2-y;a="";break;case"right":s=d-y/2+parseInt(n.steps[p].popup.offsetVertical);o=v+c+y/2+parseInt(n.steps[p].popup.offsetHorizontal)+105;a=y;f="";break;case"bottom":if(t){s=d+h+parseInt(n.steps[p].popup.offsetVertical)+86;o=v+c/2-g.width()/2-40+parseInt(n.steps[p].popup.offsetHorizontal)}else{s=d+h+parseInt(n.steps[p].popup.offsetVertical)+86;o=v+c/2-g.width()/2-5+parseInt(n.steps[p].popup.offsetHorizontal)}f=g.width()/2-y;a="";break;case"left":s=d-y/2+parseInt(n.steps[p].popup.offsetVertical);o=v-g.width()-y+parseInt(n.steps[p].popup.offsetHorizontal)-105;a=y;f="";break}e("#jpwTooltip span."+n.steps[p].popup.position).css({left:B(f)});g.css({top:B(s),left:B(o)});m.show()}function S(t){var n=u,r="";var i=e(n.steps[p].wrapper).offset().top,s=e(n.steps[p].wrapper).offset().left,o=e(n.steps[p].wrapper).width(),a=e(n.steps[p].wrapper).height(),f=30,l="",c,h,d,y;if(t){v.appendTo("body").show()}else{if(e("#jpwOverlay").length){e("#jpwOverlay").remove()}}g.css(P());var b=n.steps[p].popup.contentRotation=="undefined"||n.steps[p].popup.contentRotation==0?"":H(parseInt(n.steps[p].popup.contentRotation));g.css({position:"absolute","margin-left":"0px","margin-top":"0px","z-index":"9999"});var w=e('<div id="tooltipTop">'+'<div id="topLeft"></div>'+'<div id="topRight"></div>'+"</div>"+'<div id="tooltipInner">'+"</div>"+'<div id="tooltipBottom">'+'<div id="bottomLeft"></div>'+'<div id="bottomRight"></div>'+"</div>");m.html("");g.html("").append(w).wrapInner('<div id="tooltipWrapper" style="width:'+B(parseInt(n.steps[p].popup.width)+30)+'"></div>').appendTo(m);if(n.steps[p].popup.draggable){g.append('<div id="drag-area" class="draggable-area"></div>')}m.appendTo("body");e("#tooltipWrapper").css(b);e(n.steps[p].popup.content).clone().appendTo("#tooltipInner").show();g.append('<span class="'+n.steps[p].popup.position+'"> </span>');switch(n.steps[p].popup.position){case"top":c=i-(g.height()+f/2)+parseInt(n.steps[p].popup.offsetVertical)-86;h=s+o/2-g.width()/2-5+parseInt(n.steps[p].popup.offsetHorizontal);y=g.width()/2-f;d="";break;case"right":c=i-f/2+parseInt(n.steps[p].popup.offsetVertical);h=s+o+f/2+parseInt(n.steps[p].popup.offsetHorizontal)+105;d=f;y="";break;case"bottom":c=i+a+parseInt(n.steps[p].popup.offsetVertical)+86;h=s+o/2-g.width()/2-5+parseInt(n.steps[p].popup.offsetHorizontal);y=g.width()/2-f;d="";break;case"left":c=i-f/2+parseInt(n.steps[p].popup.offsetVertical);h=s-g.width()-f+parseInt(n.steps[p].popup.offsetHorizontal)-105;d=f;y="";break}e("#jpwTooltip span."+n.steps[p].popup.position).css({left:B(y)});g.css({top:B(c),left:B(h)});m.show()}function x(){var n=u;if(n.steps[p].autoScroll||n.steps[p].autoScroll==r){if(n.steps[p].popup.position!="modal"){var i=e(t).height()||e(t).innerHeight(),s=g.offset().top,o=g.height()||g.innerHeight(),a=e("#overlayTop").height();e("html,body").animate({scrollTop:s+o/2-i/2},n.steps[p].scrollSpeed)}else{e("html,body").animate({scrollTop:0},n.steps[p].scrollSpeed)}}}function T(){if(!e("jpwClose").length){e("body").append('<div id="jpwClose"><a href="javascript:;" title="Click here to close"><span></span><br>Click Here to Close</a></div>')}}function N(e){for(i=0;i<o.length;i++){if(typeof e[o[i]].onCookieLoad==="function"){e[o[i]].onCookieLoad.call(this)}}return false}function C(e){var t=u;if(typeof t.steps[p].onLeave==="function"){if(!t.steps[p].onLeave.call(this,e,p)){return false}}return true}function k(e){var t=u;if(typeof t.steps[p].onEnter==="function"){if(!t.steps[p].onEnter.call(this,e,p)){return false}}return true}function L(){var e=u;if(typeof e.onClose==="function"){if(!e.onClose.call(this)){return false}}y.close();return true}function A(e){var t=u;d=true;y.restart(e);x();if(typeof t.onRestart==="function"){if(!t.onRestart.call(this)){return false}}return true}function O(){var e=u;p=0;if(typeof e.onBeforeShow==="function"){if(!e.onBeforeShow.call(this)){return false}}return true}function M(){var e=u;p=0;if(typeof e.onAfterShow==="function"){if(!e.onAfterShow.call(this)){return false}}return true}function _(){return e(t).innerWidth()||e(t).width()}function D(e){if(t.console&&t.console.log)t.console.log(e)}function P(){var e={"-webkit-transform":"none","-moz-transform":"none","-ms-transform":"none","-o-transform":"none",filter:"none","-ms-transform":"none"};return e}function H(e){var t,n,r,i,s,o;s=Math.PI*2/360;o=e*s;t=Math.cos(o);n=Math.sin(o);r=Math.sin(o);i=Math.cos(o);var u={"-webkit-transform":"rotate("+parseInt(e)+"deg)","-moz-transform":"rotate("+parseInt(e)+"deg)","-ms-transform":"rotate("+parseInt(e)+"deg)","-o-transform":"rotate("+parseInt(e)+"deg)",filter:"progid:DXImageTransform.Microsoft.Matrix(M11 = "+t+",M12 = -"+n+",M21 = "+r+",M22 = "+i+',sizingMethod = "auto expand");',"-ms-transform":"progid:DXImageTransform.Microsoft.Matrix(M11 = "+t+",M12 = -"+n+",M21 = "+r+",M22 = "+i+',SizingMethod = "auto expand");'};return u}function B(e){if(typeof e==="string"){if(e.toLowerCase().indexOf("px")==-1){return e+"px"}else{return e}}else{return e+"px"}}function j(e){if(e.indexOf("px")!=-1){return true}else if(parseInt(e)==0){return true}return false}function F(e,t){var n=e,r=n.split(" "),s=0,o,u,a,f,l;for(i=0;i<r.length;i++){if(j(r[i])){s++}}if(s==r.length){for(i=0;i<r.length;i++){switch(i){case 0:o=r[i];break;case 1:u=r[i];break;case 2:a=r[i];break;case 3:f=r[i];break}}switch(r.length){case 1:u=a=f=o;break;case 2:a=o;f=u;break;case 3:f=u;break}if(t=="undefined"||t==""||t==null){console.log("Please define margin position (top, right, bottom, left)");return false}else{switch(t){case"top":l=o;break;case"right":l=u;break;case"bottom":l=a;break;case"left":l=f;break}}return l}else{console.log("Please check your margin syntax..");return false}}function I(e,t,r){var i=new Date;i.setDate(i.getDate()+r);var s=escape(t)+(r==null?"":"; expires="+i.toUTCString());n.cookie=e+"="+s}function q(e){var t,r,i,s=n.cookie.split(";");for(t=0;t<s.length;t++){r=s[t].substr(0,s[t].indexOf("="));i=s[t].substr(s[t].indexOf("=")+1);r=r.replace(/^\s+|\s+$/g,"");if(r==e){return unescape(i)}}}var s={},o=[],u,a,f=0,l,c=true,h=true,p=0,d=true,v=e('<div id="jpwOverlay"></div>'),m=e('<div id="jpWalkthrough"></div>'),g=e('<div id="jpwTooltip"></div>');var y={isPageWalkthroughActive:function(){if(d){return true}return false},currIndex:function(){return p},init:function(n){var n=e.extend({},e.fn.pagewalkthrough.options,n);return this.each(function(){var r=e(this),i=r.attr("id");n=n||{};n.elementID=i;s[i]=n;o.push(i);if(n.onLoad){f++}if(f==1&&h){a=i;u=s[a];h=false}e(t).scroll(function(){if(d&&u.steps[p].stayFocus){clearTimeout(e.data(this,"scrollTimer"));e.data(this,"scrollTimer",setTimeout(function(){x(u)},250))}return false})})},renderOverlay:function(){if(f>1){D("Warning: Only first walkthrough will be shown onLoad as default")}l=q("_walkthrough-"+a);if(l==r){d=true;b();T();x();setTimeout(function(){if(p==0&&c){if(!M())return}},100)}else{N(s)}},restart:function(e){if(p==0)return;p=0;if(!A(e))return;if(!k(e))return;b();x()},close:function(t){p=0;c=true;d=false;if(t){I("_walkthrough-"+t,0,365);l=q("_walkthrough-"+t)}else{I("_walkthrough-"+a,0,365);l=q("_walkthrough-"+a)}if(e("#jpwOverlay").length){v.fadeOut("slow",function(){e(this).remove()})}if(e("#jpWalkthrough").length){m.fadeOut("slow",function(){e(this).html("").remove()})}if(e("#jpwClose").length){e("#jpwClose").fadeOut("slow",function(){e(this).html("").remove()})}},show:function(e){d=true;c=true;a=e;u=s[e];b();T();x();if(p==0&&c){if(!M())return}},next:function(e){c=false;if(p==u.steps.length-1)return;if(!C(e))return;p=parseInt(p)+1;if(!k(e))return;b();x()},prev:function(e){if(p==0)return;if(!C(e))return;p=parseInt(p)-1;if(!k(e))return;b();x()},getOptions:function(e){var t;if(e){t={};t=u}else{t=[];for(var n in s){t.push(s[n])}}return t}};e("#jpwClose a").live("click",L);e("#jpwTooltip #drag-area").live("mousedown",function(t){if(!e(this).hasClass("draggable-area")){return}if(!e(this).hasClass("draggable")){e(this).addClass("draggable").css("cursor","move")}var r=e(this).css("z-index"),i=e(this).outerHeight(),s=e(this).outerWidth(),o=e(this).offset().top+i*2-t.pageY-10,u=t.pageX-e(this).offset().left+s-(e(this).parent().outerWidth()+s)+20;e(n).on("mousemove",function(t){e(".draggable").parent().offset({top:t.pageY+o-i,left:t.pageX+u-s}).on("mouseup",function(){e(this).children("#tooltipWrapper").removeClass("draggable").css({"z-index":r,cursor:"default"})})});t.preventDefault()}).live("mouseup",function(){e(this).removeClass("draggable").css("cursor","default")});e.pagewalkthrough=e.fn.pagewalkthrough=function(t){if(y[t]){return y[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){y.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.pagewalkthrough")}};setTimeout(function(){y.renderOverlay()},500);e.fn.pagewalkthrough.options={steps:[{wrapper:"",margin:0,popup:{content:"",type:"modal",position:"top",offsetHorizontal:0,offsetVertical:0,width:"320",draggable:false,contentRotation:0},overlay:true,accessable:false,autoScroll:true,scrollSpeed:1e3,stayFocus:false,onLeave:null,onEnter:null}],name:"",onLoad:true,onBeforeShow:null,onAfterShow:null,onRestart:null,onClose:null,onCookieLoad:null}})(jQuery,window,document)