From 0c7a7a2f5ac74e308ab5c7fb78965e36ccd1d8ac Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Wed, 29 Aug 2012 13:37:47 -0700 Subject: [PATCH] fixed a bug with animate --- css/hopscotch.css | 18 +++++++++--------- css/hopscotch.less | 21 ++++++++++++++++++++- css/util.less | 21 --------------------- js/hopscotch-min.js | 2 +- js/hopscotch.js | 14 ++++++++++---- js/hopscotch_jquery-min.js | 2 +- js/hopscotch_jquery.js | 17 ++++++++++------- 7 files changed, 51 insertions(+), 44 deletions(-) diff --git a/css/hopscotch.css b/css/hopscotch.css index 877fb059..b1892773 100644 --- a/css/hopscotch.css +++ b/css/hopscotch.css @@ -1,17 +1,17 @@ -.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;} -.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;} -@-moz-keyframes bounce-down{0%,20%,50%,80%,100%{-moz-transform:translatey(0);} 40%{-moz-transform:translatey(-30px);} 60%{-moz-transform:translatey(-15px);}}@-o-keyframes bounce-down{0%,20%,50%,80%,100%{-o-transform:translatey(0);} 40%{-o-transform:translatey(-30px);} 60%{-o-transform:translatey(-15px);}}@-webkit-keyframes bounce-down{0%,20%,50%,80%,100%{-webkit-transform:translatey(0);} 40%{-webkit-transform:translatey(-30px);} 60%{-webkit-transform:translatey(-15px);}}@keyframes bounce-down{0%,20%,50%,80%,100%{transform:translatey(0);} 40%{transform:translatey(-30px);} 60%{transform:translatey(-15px);}}@-moz-keyframes bounce-up{0%,20%,50%,80%,100%{-moz-transform:translatey(0);} 40%{-moz-transform:translatey(30px);} 60%{-moz-transform:translatey(15px);}}@-o-keyframes bounce-up{0%,20%,50%,80%,100%{-o-transform:translatey(0);} 40%{-o-transform:translatey(30px);} 60%{-o-transform:translatey(15px);}}@-webkit-keyframes bounce-up{0%,20%,50%,80%,100%{-webkit-transform:translatey(0);} 40%{-webkit-transform:translatey(30px);} 60%{-webkit-transform:translatey(15px);}}@keyframes bounce-up{0%,20%,50%,80%,100%{transform:translatey(0);} 40%{transform:translatey(30px);} 60%{transform:translatey(15px);}}@-moz-keyframes bounce-left{0%,20%,50%,80%,100%{-moz-transform:translatex(0);} 40%{-moz-transform:translatex(30px);} 60%{-moz-transform:translatex(15px);}}@-o-keyframes bounce-left{0%,20%,50%,80%,100%{-o-transform:translatex(0);} 40%{-o-transform:translatex(30px);} 60%{-o-transform:translatex(15px);}}@-webkit-keyframes bounce-left{0%,20%,50%,80%,100%{-webkit-transform:translatex(0);} 40%{-webkit-transform:translatex(30px);} 60%{-webkit-transform:translatex(15px);}}@keyframes bounce-left{0%,20%,50%,80%,100%{transform:translatex(0);} 40%{transform:translatex(30px);} 60%{transform:translatex(15px);}}@-moz-keyframes bounce-right{0%,20%,50%,80%,100%{-moz-transform:translatex(0);} 40%{-moz-transform:translatex(-30px);} 60%{-moz-transform:translatex(-15px);}}@-o-keyframes bounce-right{0%,20%,50%,80%,100%{-o-transform:translatex(0);} 40%{-o-transform:translatex(-30px);} 60%{-o-transform:translatex(-15px);}}@-webkit-keyframes bounce-right{0%,20%,50%,80%,100%{-webkit-transform:translatex(0);} 40%{-webkit-transform:translatex(-30px);} 60%{-webkit-transform:translatex(-15px);}}@keyframes bounce-right{0%,20%,50%,80%,100%{transform:translatex(0);} 40%{transform:translatex(-30px);} 60%{transform:translatex(-15px);}}.bounce-down{-webkit-animation-name:bounce-down;-moz-animation-name:bounce-down;-o-animation-name:bounce-down;animation-name:bounce-down;} -.bounce-up{-webkit-animation-name:bounce-up;-moz-animation-name:bounce-up;-o-animation-name:bounce-up;animation-name:bounce-up;} -.bounce-left{-webkit-animation-name:bounce-left;-moz-animation-name:bounce-left;-o-animation-name:bounce-left;animation-name:bounce-left;} -.bounce-right{-webkit-animation-name:bounce-right;-moz-animation-name:bounce-right;-o-animation-name:bounce-right;animation-name:bounce-right;} -div#hopscotch-bubble{background-color:#ffffff;border:6px solid #000000;border:6px solid rgba(0, 0, 0, 0.5);color:#000;font-family:Helvetica, Arial;font-size:13px;position:absolute;z-index:999999;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;}div#hopscotch-bubble.animate{-moz-transition-property:'top, left';-moz-transition-duration:0.5s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:'top, left';-ms-transition-duration:0.5s;-ms-transition-timing-function:ease-in-out;-o-transition-property:'top, left';-o-transition-duration:0.5s;-o-transition-timing-function:ease-in-out;-webkit-transition-property:'top, left';-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;transition-property:'top, left';transition-duration:0.5s;transition-timing-function:ease-in-out;} +.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-ms-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s;} +@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translatey(20px);} 100%{opacity:1;-webkit-transform:translatey(0);}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translatey(20px);} 100%{opacity:1;-moz-transform:translatey(0);}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translatey(20px);} 100%{opacity:1;-o-transform:translatey(0);}}@keyframes fadeInUp{0%{opacity:0;transform:translatey(20px);} 100%{opacity:1;transform:translatey(0);}}.fade-in-up{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;} +@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translatey(-20px);} 100%{opacity:1;-webkit-transform:translatey(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translatey(-20px);} 100%{opacity:1;-moz-transform:translatey(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-ms-transform:translatey(-20px);} 100%{opacity:1;-ms-transform:translatey(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translatey(-20px);} 100%{opacity:1;transform:translatey(0);}}.fade-in-down{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;} +@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translatex(-20px);} 100%{opacity:1;-webkit-transform:translatex(0);}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translatex(-20px);} 100%{opacity:1;-moz-transform:translatex(0);}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translatex(-20px);} 100%{opacity:1;-o-transform:translatex(0);}}@keyframes fadeInRight{0%{opacity:0;transform:translatex(-20px);} 100%{opacity:1;transform:translatex(0);}}.fade-in-right{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;} +@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(20px);} 100%{opacity:1;-webkit-transform:translatex(0);}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translatex(20px);} 100%{opacity:1;-moz-transform:translatex(0);}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translatex(20px);} 100%{opacity:1;-o-transform:translatex(0);}}@keyframes fadeInLeft{0%{opacity:0;transform:translatex(20px);} 100%{opacity:1;transform:translatex(0);}}.fade-in-left{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;} +div#hopscotch-bubble{background-color:#ffffff;border:6px solid #000000;border:6px solid rgba(0, 0, 0, 0.5);color:#000;font-family:Helvetica, Arial;font-size:13px;position:absolute;z-index:999999;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;}div#hopscotch-bubble.animate{-moz-transition-property:top, left;-moz-transition-duration:0.5s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:top, left;-ms-transition-duration:0.5s;-ms-transition-timing-function:ease-in-out;-o-transition-property:top, left;-o-transition-duration:0.5s;-o-transition-timing-function:ease-in-out;-webkit-transition-property:top, left;-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;transition-property:top, left;transition-duration:0.5s;transition-timing-function:ease-in-out;} +div#hopscotch-bubble.invisible{opacity:0;} div#hopscotch-bubble.hide,div#hopscotch-bubble .hide,div#hopscotch-bubble .hide-all{display:none;} div#hopscotch-bubble h3,div#hopscotch-bubble #hopscotch-bubble-number{font-size:18px;} div#hopscotch-bubble h3{margin:0;padding:0;} div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}div#hopscotch-bubble #hopscotch-bubble-container p{margin:10px 0;padding:0;} div#hopscotch-bubble #hopscotch-bubble-content{margin:0 0 0 40px;}div#hopscotch-bubble #hopscotch-bubble-content h3{margin:0 15px 0 0;} -div#hopscotch-bubble #hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite_os.png) -200px -100px no-repeat;display:block;margin:15px 10px 0 0;position:absolute;text-decoration:none;text-indent:-9999px;width:10px;height:10px;top:0;right:0;} -div#hopscotch-bubble #hopscotch-bubble-number{background:transparent url(../img/sprite_os.png) 0 0 no-repeat;color:#fff;display:block;float:left;line-height:33px;margin:0 10px 0 0;text-align:center;width:30px;height:30px;} +div#hopscotch-bubble #hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite_li.png) -200px -100px no-repeat;display:block;margin:15px 10px 0 0;position:absolute;text-decoration:none;text-indent:-9999px;width:10px;height:10px;top:0;right:0;} +div#hopscotch-bubble #hopscotch-bubble-number{background:transparent url(../img/sprite_li.png) 0 0 no-repeat;color:#fff;display:block;float:left;line-height:33px;margin:0 10px 0 0;text-align:center;width:30px;height:30px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container{position:absolute;width:40px;height:40px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,div#hopscotch-bubble #hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border{width:0;height:0;} div#hopscotch-bubble #hopscotch-bubble-arrow-container.up{top:-26px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow{border-bottom:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-10px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border{border-bottom:20px solid #000000;border-bottom:20px solid rgba(0, 0, 0, 0.5);border-left:20px solid transparent;border-right:20px solid transparent;} diff --git a/css/hopscotch.less b/css/hopscotch.less index 132305bc..8967a41c 100644 --- a/css/hopscotch.less +++ b/css/hopscotch.less @@ -2,6 +2,7 @@ @import "fade.less"; @anim-duration: .5s; +@anim-timing: ease-in-out; @bubbleCornerRadius: 10px; @bubbleColor: #fff; @bubbleBorderWidth: 6px; @@ -23,7 +24,25 @@ div#hopscotch-bubble { .background-clip; &.animate { - .transition('top, left', @anim-duration, ease-in-out); + -moz-transition-property: top, left; + -moz-transition-duration: @anim-duration; + -moz-transition-timing-function: @anim-timing; + + -ms-transition-property: top, left; + -ms-transition-duration: @anim-duration; + -ms-transition-timing-function: @anim-timing; + + -o-transition-property: top, left; + -o-transition-duration: @anim-duration; + -o-transition-timing-function: @anim-timing; + + -webkit-transition-property: top, left; + -webkit-transition-duration: @anim-duration; + -webkit-transition-timing-function: @anim-timing; + + transition-property: top, left; + transition-duration: @anim-duration; + transition-timing-function: @anim-timing; } &.invisible { diff --git a/css/util.less b/css/util.less index 57210d5f..318c12a6 100644 --- a/css/util.less +++ b/css/util.less @@ -5,27 +5,6 @@ -webkit-border-radius: @radius; border-radius: @radius; } -.transition (@property, @duration, @timing) { - -moz-transition-property: @property; - -moz-transition-duration: @duration; - -moz-transition-timing-function: @timing; - - -ms-transition-property: @property; - -ms-transition-duration: @duration; - -ms-transition-timing-function: @timing; - - -o-transition-property: @property; - -o-transition-duration: @duration; - -o-transition-timing-function: @timing; - - -webkit-transition-property: @property; - -webkit-transition-duration: @duration; - -webkit-transition-timing-function: @timing; - - transition-property: @property; - transition-duration: @duration; - transition-timing-function: @timing; -} .background-clip () { -moz-background-clip: padding; /* for Mozilla browsers*/ -webkit-background-clip: padding; /* Webkit */ diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js index 1d336f4c..3a8d4dd2 100644 --- a/js/hopscotch-min.js +++ b/js/hopscotch-min.js @@ -1 +1 @@ -(function(c,d){var m,e,j,i,g,a,l=c[d],h="undefined",b=false,k=(typeof window.sessionStorage!==h),f=document.body.style;if(l){return}a=function(){if(b){l.startTour()}};if(window.addEventListener){window.addEventListener("load",a)}else{if(window.attachEvent){window.attachEvent("onload",a)}}i={addClass:function(p,r){var o,q,n;if(p.className.length===0){p.className=r}else{o=p.className.split(" ");for(q=0,n=o.length;q=0){i.addClass(u,"prev")}else{i.addClass(u,"next")}return u},p=function(v,u,x){var w="hide";if(x){w="hide-all"}if(typeof u===h){u=true}if(u){i.removeClass(v,w)}else{i.addClass(v,w)}},q=function(A,x){var D,u,B,w,C,y,z=6,G=i.getStepTarget(x),v=A.element,F=A.arrowEl,E=i.getPixelValue(x.arrowOffset);D=i.getPixelValue(x.width)||s.bubbleWidth;B=i.valOrDefault(x.padding,s.bubblePadding);i.removeClass(v,"fade-in-down fade-in-up fade-in-left fade-in-right");w=G.getBoundingClientRect();if(x.orientation==="top"){u=v.offsetHeight;C=(w.top-u)-s.arrowWidth;y=w.left}else{if(x.orientation==="bottom"){C=w.bottom+s.arrowWidth;y=w.left}else{if(x.orientation==="left"){C=w.top;y=w.left-D-2*B-2*z-s.arrowWidth}else{if(x.orientation==="right"){C=w.top;y=w.right+s.arrowWidth}}}}if(!E){F.style.top="";F.style.left=""}else{if(x.orientation==="top"||x.orientation==="bottom"){F.style.top="";F.style.left=E+"px"}else{if(x.orientation==="left"||x.orientation==="right"){F.style.left="";F.style.top=E+"px"}}}y+=i.getPixelValue(x.xOffset);C+=i.getPixelValue(x.yOffset);if(!x.fixedElement){C+=i.getScrollTop();y+=i.getScrollLeft()}v.style.position=(x.fixedElement?"fixed":"absolute");v.style.top=C+"px";v.style.left=y+"px"},t=function(){var y=document.createElement("div"),z=document.createElement("div"),x=document.createElement("div"),w=this,A=false,v,u;this.element=y;this.containerEl=z;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");y.id="hopscotch-bubble";i.addClass(y,"animated");z.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";z.appendChild(this.numberEl);x.appendChild(this.titleEl);x.appendChild(this.contentEl);x.id="hopscotch-bubble-content";z.appendChild(x);y.appendChild(z);this.initNavButtons();this.initCloseButton();this.initArrow();v=function(){if(A||!o){return}A=true;u=setTimeout(function(){q(w,n,false);A=false},200)};if(window.addEventListener){window.addEventListener("resize",v)}else{if(window.attachEvent){window.attachEvent("onresize",v)}}this.hide(false);document.body.appendChild(y);return this};this.initNavButtons=function(){var u=document.createElement("div");this.prevBtnEl=r("hopscotch-prev",j.prevBtn);this.nextBtnEl=r("hopscotch-next",j.nextBtn);this.doneBtnEl=r("hopscotch-done",j.doneBtn);i.addClass(this.doneBtnEl,"hide");u.appendChild(this.prevBtnEl);u.appendChild(this.nextBtnEl);u.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(v){l.prevStep()});i.addClickListener(this.nextBtnEl,function(v){l.nextStep()});i.addClickListener(this.doneBtnEl,l.endTour);u.id="hopscotch-actions";this.buttonsEl=u;this.containerEl.appendChild(u);return this};this.initCloseButton=function(){var u=document.createElement("a");u.id="hopscotch-bubble-close";u.href="#";u.title=j.closeTooltip;u.innerHTML=j.closeTooltip;i.addClickListener(u,function(w){var v=l.getCurrStepNum(),x=l.getCurrTour(),y=(v===x.steps.length-1);i.invokeCallbacks("close",[x.id,v]);l.endTour(true,y);if(w.preventDefault){w.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=u;this.containerEl.appendChild(u);return this};this.initArrow=function(){var u,v;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";v=document.createElement("div");v.className="hopscotch-bubble-arrow-border";u=document.createElement("div");u.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(v);this.arrowEl.appendChild(u);this.element.appendChild(this.arrowEl);return this};this.renderStep=function(w,B,x,y,C){var D=this,v=i.valOrDefault(w.showNextButton,s.showNextButton),u=i.valOrDefault(w.showPrevButton,s.showPrevButton),A,z;n=w;this.setTitle(w.title?w.title:"");this.setContent(w.content?w.content:"");this.setNum(B);this.orientation=w.orientation;this.showPrevButton(this.prevBtnEl&&u&&(B>0||x>0));this.showNextButton(this.nextBtnEl&&v&&!y);this.nextBtnEl.value=w.showSkip?j.skipBtn:j.nextBtn;if(y){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(w.orientation);A=i.getPixelValue(w.width)||s.bubbleWidth;z=i.valOrDefault(w.padding,s.bubblePadding);this.containerEl.style.width=A+"px";this.containerEl.style.padding=z+"px";this.element.style.zIndex=(w.zindex?w.zindex:"");if(w.orientation==="top"){setTimeout(function(){q(D,w);if(C){if(!w.fixedElement){C()}else{D.show()}}},5)}else{q(this,w);if(C){if(!w.fixedElement){C()}else{D.show()}}}return this};this.setTitle=function(u){if(u){this.titleEl.innerHTML=u;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(u){if(u){this.contentEl.innerHTML=u;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(u){if(j.stepNums&&u0)?F[E]:F},y=function(){return w.steps[q].length>0},s=function(){var F=w.steps[q].length;if(E0){--E;return true}else{if(q>0){F=w.steps[--q].length;if(F){E=F-1}else{E=undefined}return true}}return false},p=function(Q){var O=u(),Y=O.element,U=i.getPixelValue(Y.style.top),T=U+i.getPixelValue(Y.offsetHeight),R=i.getStepTarget(z()),Z=R.getBoundingClientRect(),W=Z.top+i.getScrollTop(),S=Z.bottom+i.getScrollTop(),M=(US)?T:S,V=i.getScrollTop(),H=V+i.getWindowHeight(),I=M-o.scrollTopMargin,P=this,G,L,K,X,J,N;if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){G=YAHOO.env.ua.webkit?document.body:document.documentElement;K=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;L=new YAHOO.util.Scroll(G,{scroll:{to:[0,I]}},o.scrollDuration/1000,K);L.onComplete.subscribe(Q);L.animate();return}if(I<0){I=0}if(M>=V&&M<=V+o.scrollTopMargin){if(Q){Q()}return}if(MH){if(o.smoothScroll){X=(V>M)?-1:1;J=Math.abs(V-I)/(o.scrollDuration/10);N=setInterval(function(){var ab=i.getScrollTop(),aa=ab+(X*J);if((X>0&&aa>=I)||X<0&&aa<=I){aa=I;clearInterval(N);if(Q){Q()}window.scrollTo(0,aa);return}window.scrollTo(0,aa);if(i.getScrollTop()===ab){clearInterval(N);if(Q){Q()}}},10)}else{window.scrollTo(0,I);if(Q){Q()}}}else{if(Q){Q()}return}},A=function(){if(t){this.configure(t)}};this.loadTour=function(K){var I={},G,L,H,F,J;w=K;for(L in K){if(K.hasOwnProperty(L)&&L!=="id"&&L!=="steps"){I[L]=K[L]}}this.resetDefaultOptions();r.call(this,I,true);F=i.getState(o.cookieName);if(F){J=F.split(":");v=J[0];n=J[1];C=undefined;H=n.split("-");if(H.length>1){n=parseInt(H[0],10);C=parseInt(H[1],10)}else{n=parseInt(n,10)}if(J.length>2&&J[2]==="mp"){if(C&&C0){C=0}else{C=undefined}}}}}G=u();G.showPrevButton(o.showPrevButton,true);G.showNextButton(o.showNextButton,true);return this};this.startTour=function(I,H){var F,G;if(!w){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){b=true;return this}if(typeof I!==h){q=I;E=H}else{if(w.id===v&&typeof n!==h){q=n;E=C;G=z();if(!i.getStepTarget(G)){D();G=z();if(!i.getStepTarget(G)){this.endTour(false,false);return this}}}else{q=0}}if(!E&&y()){E=0}i.invokeCallbacks("start",[w.id,q]);F=u();this.isActive=true;if(o.animate){F.initAnimate()}if(!i.getStepTarget(z())){i.invokeCallbacks("error",[w.id,q]);if(o.skipIfNoElement){this.nextStep(false)}}else{this.showStep(q,E)}return this};this.showStep=function(O,G){var I=w.steps,H=I[O],F=I.length,M=w.id+":"+O,L=u(),K=i.valOrDefault(H.delay,0),N=this,J;q=O;E=G;if(typeof G!==h&&y()){H=H[G];M+="-"+G}J=(O===F-1)||(G>=H.length-1);setTimeout(function(){L.renderStep(H,O,G,J,function(){p(function(){L.show.call(L)});if(H.onShow){H.onShow()}});i.invokeCallbacks("show",[w.id,q])},K);if(H.multipage){M+=":mp"}i.setState(o.cookieName,M,1);return this};this.prevStep=function(){var H=z(),G=false,F=u();if(H.onPrev){H.onPrev()}i.invokeCallbacks("prev",[w.id,q]);if(o.skipIfNoElement){while(!G&&D()){H=z();G=i.getStepTarget(H);if(!G){i.invokeCallbacks("error",[w.id,q])}}if(!G){return this.endTour(true,false)}}else{if(D()){H=z();if(!i.getStepTarget(H)){i.invokeCallbacks("error",[w.id,q]);return this.endTour(true,false)}}}F.hide(false);this.showStep(q,E);return this};this.nextStep=function(J){var I=z(),H=q,G=false,F=u();J=i.valOrDefault(J,true);if(o.skipIfNoElement){while(!G&&s()){I=z();G=i.getStepTarget(I);if(!G){i.invokeCallbacks("error",[w.id,q])}}if(!G){return this.endTour(true,false)}}else{if(s()){I=z();if(!i.getStepTarget(I)){i.invokeCallbacks("error",[w.id,q]);return this.endTour(true,false)}}}if(J){if(I.onNext){I.onNext()}i.invokeCallbacks("next",[w.id,H])}F.hide(false);this.showStep(q,E);return this};this.endTour=function(H,G){var F=u();H=i.valOrDefault(H,true);G=i.valOrDefault(G,true);q=0;E=undefined;n=undefined;F.hide();if(H){i.clearState(o.cookieName)}l.isActive=false;if(G){i.invokeCallbacks("end",[w.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return w};this.getCurrStepNum=function(){return q};this.getCurrSubstepNum=function(){return E};this.addCallback=function(H,F,G){if(F){g[H].push({cb:F,fromTour:G})}return this};this.removeCallbacks=function(G){var J,H,F,I;for(I in g){if(G){J=g[I];for(H=0,F=J.length;H=0){i.addClass(u,"prev")}else{i.addClass(u,"next")}return u},p=function(v,u,x){var w="hide";if(x){w="hide-all"}if(typeof u===h){u=true}if(u){i.removeClass(v,w)}else{i.addClass(v,w)}},q=function(A,x){var D,u,B,w,C,y,z=6,G=i.getStepTarget(x),v=A.element,F=A.arrowEl,E=i.getPixelValue(x.arrowOffset);D=i.getPixelValue(x.width)||s.bubbleWidth;B=i.valOrDefault(x.padding,s.bubblePadding);i.removeClass(v,"fade-in-down fade-in-up fade-in-left fade-in-right");w=G.getBoundingClientRect();if(x.orientation==="top"){u=v.offsetHeight;C=(w.top-u)-s.arrowWidth;y=w.left}else{if(x.orientation==="bottom"){C=w.bottom+s.arrowWidth;y=w.left}else{if(x.orientation==="left"){C=w.top;y=w.left-D-2*B-2*z-s.arrowWidth}else{if(x.orientation==="right"){C=w.top;y=w.right+s.arrowWidth}}}}if(!E){F.style.top="";F.style.left=""}else{if(x.orientation==="top"||x.orientation==="bottom"){F.style.top="";F.style.left=E+"px"}else{if(x.orientation==="left"||x.orientation==="right"){F.style.left="";F.style.top=E+"px"}}}y+=i.getPixelValue(x.xOffset);C+=i.getPixelValue(x.yOffset);if(!x.fixedElement){C+=i.getScrollTop();y+=i.getScrollLeft()}v.style.position=(x.fixedElement?"fixed":"absolute");v.style.top=C+"px";v.style.left=y+"px"},t=function(){var y=document.createElement("div"),z=document.createElement("div"),x=document.createElement("div"),w=this,A=false,v,u;this.element=y;this.containerEl=z;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");y.id="hopscotch-bubble";i.addClass(y,"animated");z.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";z.appendChild(this.numberEl);x.appendChild(this.titleEl);x.appendChild(this.contentEl);x.id="hopscotch-bubble-content";z.appendChild(x);y.appendChild(z);this.initNavButtons();this.initCloseButton();this.initArrow();v=function(){if(A||!o){return}A=true;u=setTimeout(function(){q(w,n,false);A=false},200)};if(window.addEventListener){window.addEventListener("resize",v)}else{if(window.attachEvent){window.attachEvent("onresize",v)}}this.hide();document.body.appendChild(y);return this};this.initNavButtons=function(){var u=document.createElement("div");this.prevBtnEl=r("hopscotch-prev",j.prevBtn);this.nextBtnEl=r("hopscotch-next",j.nextBtn);this.doneBtnEl=r("hopscotch-done",j.doneBtn);i.addClass(this.doneBtnEl,"hide");u.appendChild(this.prevBtnEl);u.appendChild(this.nextBtnEl);u.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(v){l.prevStep()});i.addClickListener(this.nextBtnEl,function(v){l.nextStep()});i.addClickListener(this.doneBtnEl,l.endTour);u.id="hopscotch-actions";this.buttonsEl=u;this.containerEl.appendChild(u);return this};this.initCloseButton=function(){var u=document.createElement("a");u.id="hopscotch-bubble-close";u.href="#";u.title=j.closeTooltip;u.innerHTML=j.closeTooltip;i.addClickListener(u,function(w){var v=l.getCurrStepNum(),x=l.getCurrTour(),y=(v===x.steps.length-1);i.invokeCallbacks("close",[x.id,v]);l.endTour(true,y);if(w.preventDefault){w.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=u;this.containerEl.appendChild(u);return this};this.initArrow=function(){var u,v;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";v=document.createElement("div");v.className="hopscotch-bubble-arrow-border";u=document.createElement("div");u.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(v);this.arrowEl.appendChild(u);this.element.appendChild(this.arrowEl);return this};this.renderStep=function(w,B,x,y,C){var D=this,v=i.valOrDefault(w.showNextButton,s.showNextButton),u=i.valOrDefault(w.showPrevButton,s.showPrevButton),A,z;n=w;this.setTitle(w.title?w.title:"");this.setContent(w.content?w.content:"");this.setNum(B);this.orientation=w.orientation;this.showPrevButton(this.prevBtnEl&&u&&(B>0||x>0));this.showNextButton(this.nextBtnEl&&v&&!y);this.nextBtnEl.value=w.showSkip?j.skipBtn:j.nextBtn;if(y){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(w.orientation);A=i.getPixelValue(w.width)||s.bubbleWidth;z=i.valOrDefault(w.padding,s.bubblePadding);this.containerEl.style.width=A+"px";this.containerEl.style.padding=z+"px";this.element.style.zIndex=(w.zindex?w.zindex:"");if(w.orientation==="top"){setTimeout(function(){q(D,w);if(C){if(!w.fixedElement){C()}else{D.show()}}},5)}else{q(this,w);if(C){if(!w.fixedElement){C()}else{D.show()}}}return this};this.setTitle=function(u){if(u){this.titleEl.innerHTML=u;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(u){if(u){this.contentEl.innerHTML=u;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(u){if(j.stepNums&&u0)?F[E]:F},y=function(){return w.steps[q].length>0},s=function(){var F=w.steps[q].length;if(E0){--E;return true}else{if(q>0){F=w.steps[--q].length;if(F){E=F-1}else{E=undefined}return true}}return false},p=function(Q){var O=u(),Y=O.element,U=i.getPixelValue(Y.style.top),T=U+i.getPixelValue(Y.offsetHeight),R=i.getStepTarget(z()),Z=R.getBoundingClientRect(),W=Z.top+i.getScrollTop(),S=Z.bottom+i.getScrollTop(),M=(US)?T:S,V=i.getScrollTop(),H=V+i.getWindowHeight(),I=M-o.scrollTopMargin,P=this,G,L,K,X,J,N;if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){G=YAHOO.env.ua.webkit?document.body:document.documentElement;K=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;L=new YAHOO.util.Scroll(G,{scroll:{to:[0,I]}},o.scrollDuration/1000,K);L.onComplete.subscribe(Q);L.animate();return}if(I<0){I=0}if(M>=V&&M<=V+o.scrollTopMargin){if(Q){Q()}return}if(MH){if(o.smoothScroll){X=(V>M)?-1:1;J=Math.abs(V-I)/(o.scrollDuration/10);N=setInterval(function(){var ab=i.getScrollTop(),aa=ab+(X*J);if((X>0&&aa>=I)||X<0&&aa<=I){aa=I;clearInterval(N);if(Q){Q()}window.scrollTo(0,aa);return}window.scrollTo(0,aa);if(i.getScrollTop()===ab){clearInterval(N);if(Q){Q()}}},10)}else{window.scrollTo(0,I);if(Q){Q()}}}else{if(Q){Q()}return}},A=function(){if(t){this.configure(t)}};this.loadTour=function(K){var I={},G,L,H,F,J;w=K;for(L in K){if(K.hasOwnProperty(L)&&L!=="id"&&L!=="steps"){I[L]=K[L]}}this.resetDefaultOptions();r.call(this,I,true);F=i.getState(o.cookieName);if(F){J=F.split(":");v=J[0];n=J[1];C=undefined;H=n.split("-");if(H.length>1){n=parseInt(H[0],10);C=parseInt(H[1],10)}else{n=parseInt(n,10)}if(J.length>2&&J[2]==="mp"){if(C&&C0){C=0}else{C=undefined}}}}}G=u();G.showPrevButton(o.showPrevButton,true);G.showNextButton(o.showNextButton,true);return this};this.startTour=function(I,H){var F,G;if(!w){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){b=true;return this}if(typeof I!==h){q=I;E=H}else{if(w.id===v&&typeof n!==h){q=n;E=C;G=z();if(!i.getStepTarget(G)){D();G=z();if(!i.getStepTarget(G)){this.endTour(false,false);return this}}}else{q=0}}if(!E&&y()){E=0}i.invokeCallbacks("start",[w.id,q]);F=u();this.isActive=true;if(o.animate){F.initAnimate()}if(!i.getStepTarget(z())){i.invokeCallbacks("error",[w.id,q]);if(o.skipIfNoElement){this.nextStep(false)}}else{this.showStep(q,E)}return this};this.showStep=function(O,G){var I=w.steps,H=I[O],F=I.length,M=w.id+":"+O,L=u(),K=i.valOrDefault(H.delay,0),N=this,J;q=O;E=G;if(!o.animate){L.hide(false)}if(typeof G!==h&&y()){H=H[G];M+="-"+G}J=(O===F-1)||(G>=H.length-1);setTimeout(function(){L.renderStep(H,O,G,J,function(){p(function(){L.show.call(L)});if(H.onShow){H.onShow()}});i.invokeCallbacks("show",[w.id,q])},K);if(H.multipage){M+=":mp"}i.setState(o.cookieName,M,1);return this};this.prevStep=function(){var H=z(),G=false,F=u();if(H.onPrev){H.onPrev()}i.invokeCallbacks("prev",[w.id,q]);if(o.skipIfNoElement){while(!G&&D()){H=z();G=i.getStepTarget(H);if(!G){i.invokeCallbacks("error",[w.id,q])}}if(!G){return this.endTour(true,false)}}else{if(D()){H=z();if(!i.getStepTarget(H)){i.invokeCallbacks("error",[w.id,q]);return this.endTour(true,false)}}}this.showStep(q,E);return this};this.nextStep=function(J){var I=z(),H=q,G=false,F=u();J=i.valOrDefault(J,true);if(o.skipIfNoElement){while(!G&&s()){I=z();G=i.getStepTarget(I);if(!G){i.invokeCallbacks("error",[w.id,q])}}if(!G){return this.endTour(true,false)}}else{if(s()){I=z();if(!i.getStepTarget(I)){i.invokeCallbacks("error",[w.id,q]);return this.endTour(true,false)}}}if(J){if(I.onNext){I.onNext()}i.invokeCallbacks("next",[w.id,H])}this.showStep(q,E);return this};this.endTour=function(H,G){var F=u();H=i.valOrDefault(H,true);G=i.valOrDefault(G,true);q=0;E=undefined;n=undefined;F.hide();if(H){i.clearState(o.cookieName)}l.isActive=false;if(G){i.invokeCallbacks("end",[w.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return w};this.getCurrStepNum=function(){return q};this.getCurrSubstepNum=function(){return E};this.addCallback=function(H,F,G){if(F){g[H].push({cb:F,fromTour:G})}return this};this.removeCallbacks=function(G){var J,H,F,I;for(I in g){if(G){J=g[I];for(H=0,F=J.length;H");t.attr({id:v,type:"button",value:u});t.addClass("hopscotch-nav-button");if(v.indexOf("prev")>=0){t.addClass("prev")}else{t.addClass("next")}return t},p=function(u,t,w){var v=w?"hide-all":"hide";if(typeof t===h){t=true}if(t){u.removeClass(v)}else{u.addClass(v)}},q=function(A,v){var D,t,B,u,C,w,z=6,F=i.getStepTarget(v)[0],G=A.$element,x=A.$arrowEl,E=i.getPixelValue(v.arrowOffset),y=v.fixedElement?"fixed":"absolute";D=i.getPixelValue(v.width)||s.bubbleWidth;B=i.valOrDefault(v.padding,s.bubblePadding);G.removeClass("fade-in-down fade-in-up fade-in-left fade-in-right");u=F.getBoundingClientRect();if(v.orientation==="top"){t=G.height();C=(u.top-t)-s.arrowWidth;w=u.left}else{if(v.orientation==="bottom"){C=u.bottom+s.arrowWidth;w=u.left}else{if(v.orientation==="left"){C=u.top;w=u.left-D-2*B-2*z-s.arrowWidth}else{if(v.orientation==="right"){C=u.top;w=u.right+s.arrowWidth}}}}if(!E){x.css({top:"",left:""})}else{if(v.orientation==="top"||v.orientation==="bottom"){x.css({left:E+"px",top:""})}else{if(v.orientation==="left"||v.orientation==="right"){x.css({top:E+"px",left:""})}}}w+=i.getPixelValue(v.xOffset);C+=i.getPixelValue(v.yOffset);if(!v.fixedElement){C+=i.getScrollTop();w+=i.getScrollLeft()}if(s.animate&&!d){G.animate({top:C+"px",left:w+"px"}).css("position",y)}else{G.css({top:C+"px",left:w+"px",position:y})}};this.init=function(){var w=$("
"),u=$("
"),x=$("
"),v=this,y=false,t;this.$element=w;this.$containerEl=u;this.$titleEl=$("

");this.$numberEl=$("");this.$contentEl=$("

");this.$numberEl.attr("id","hopscotch-bubble-number");x.append(this.$titleEl,this.$contentEl).attr("id","hopscotch-bubble-content");u.attr("id","hopscotch-bubble-container").append(this.$numberEl,x);w.attr("id","hopscotch-bubble").addClass("animated").append(u);this.initNavButtons();this.initCloseButton();this.initArrow();$(window).on("resize",function(){if(y||!o){return}y=true;t=setTimeout(function(){q(v,n,false);y=false},200)});this.hide(false);$("body").append(w);return this};this.initNavButtons=function(){var t=$("

");this.$prevBtnEl=r("hopscotch-prev",j.prevBtn);this.$nextBtnEl=r("hopscotch-next",j.nextBtn);this.$doneBtnEl=r("hopscotch-done",j.doneBtn);this.$doneBtnEl.addClass("hide");this.$prevBtnEl.click(function(u){l.prevStep()});this.$nextBtnEl.click(function(u){l.nextStep()});this.$doneBtnEl.click(l.endTour);t.attr("id","hopscotch-actions").append(this.$prevBtnEl,this.$nextBtnEl,this.$doneBtnEl);this.buttonsEl=t;this.$containerEl.append(t);return this};this.initCloseButton=function(){var t=$("");t.text(j.closeTooltip).attr({id:"hopscotch-bubble-close",href:"#",title:j.closeTooltip}).click(function(v){var u=l.getCurrStepNum(),w=l.getCurrTour(),x=(u===w.steps.length-1);i.invokeCallbacks("close",[w.id,u]);l.endTour(true,x);if(v.preventDefault){v.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=t;this.$containerEl.append(t);return this};this.initArrow=function(){var u,t;this.$arrowEl=$("
").attr("id","hopscotch-bubble-arrow-container");t=$("
").addClass("hopscotch-bubble-arrow-border");u=$("
").addClass("hopscotch-bubble-arrow");this.$arrowEl.append(t,u);this.$element.append(this.$arrowEl);return this};this.renderStep=function(v,A,w,x,B){var C=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),z,y;n=v;this.setTitle(v.title?v.title:"");this.setContent(v.content?v.content:"");this.setNum(A);this.orientation=v.orientation;this.showPrevButton(this.$prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.$nextBtnEl&&u&&!x);this.$nextBtnEl.val(v.showSkip?j.skipBtn:j.nextBtn);if(x){this.$doneBtnEl.removeClass("hide")}else{this.$doneBtnEl.addClass("hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.valOrDefault(v.padding,s.bubblePadding);this.$containerEl.css({width:z+"px",padding:y+"px"});this.$element.css("zIndex",v.zindex?v.zindex:"");if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B){if(!v.fixedElement){B()}else{C.show()}}},5)}else{q(this,v);if(B){if(!v.fixedElement){B()}else{C.show()}}}return this};this.setTitle=function(t){if(t){this.$titleEl.html(t).removeClass("hide")}else{this.$titleEl.addClass("hide")}return this};this.setContent=function(t){if(t){this.$contentEl.html(t).removeClass("hide")}else{this.$contentEl.addClass("hide")}return this};this.setNum=function(t){if(j.stepNums&&t0)?E[A]:E},n=function(){return u.steps[p].length>0},B=function(){var E=u.steps[p].length;if(A0){--A;return true}else{if(p>0){E=u.steps[--p].length;if(E){A=E-1}else{A=undefined}return true}}return false},w=function(E){var J=s().$element,F=i.getPixelValue(J.css("top")),K=i.getStepTarget(C())[0],I=K.getBoundingClientRect(),L=I.top+i.getScrollTop(),H=(F1){t=parseInt(G[0],10);v=parseInt(G[1],10)}else{t=parseInt(t,10)}if(I.length>2&&I[2]==="mp"){if(v&&v0){v=0}else{v=undefined}}}}}F=s();F.showPrevButton(q.showPrevButton,true);F.showNextButton(q.showNextButton,true);return this};this.startTour=function(H,G){var E,F;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){a=true;return this}if(typeof H!==h){p=H;A=G}else{if(u.id===D&&typeof t!==h){p=t;A=v;F=C();if(!i.getStepTarget(F)){x();F=C();if(!i.getStepTarget(F)){this.endTour(false,false);return this}}}else{p=0}}if(!A&&n()){A=0}i.invokeCallbacks("start",[u.id,p]);E=s();this.isActive=true;if(q.animate){E.initAnimate()}if(!i.getStepTarget(C())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,A)}return this};this.showStep=function(M,F){var H=u.steps,G=H[M],E=H.length,L=u.id+":"+M,K=s(),J=i.valOrDefault(G.delay,0),I;p=M;A=F;if(typeof F!==h&&n()){G=G[F];L+="-"+F}I=(M===E-1)||(F>=G.length-1);setTimeout(function(){K.renderStep(G,M,F,I,function(){w(function(){K.show.call(K)})});i.invokeCallbacks("show",[u.id,p])},J);if(G.multipage){L+=":mp"}i.setState(q.cookieName,L,1);return this};this.prevStep=function(){var F=C(),E=[];if(F.onPrev){F.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(E.length===0&&x()){F=C();E=i.getStepTarget(F);if(E.length===0){i.invokeCallbacks("error",[u.id,p])}}if(E.length===0){return this.endTour(true,false)}}else{if(x()){F=C();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}y.hide(false);this.showStep(p,A);return this};this.nextStep=function(H){var G=C(),F=p,E=[];H=i.valOrDefault(H,true);if(q.skipIfNoElement){while(E.length===0&&B()){G=C();E=i.getStepTarget(G);if(E.length===0){i.invokeCallbacks("error",[u.id,p])}}if(!E.length){return this.endTour(true,false)}}else{if(B()){G=C();if(!i.getStepTarget(G)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(H){if(G.onNext){G.onNext()}i.invokeCallbacks("next",[u.id,F])}y.hide(false);this.showStep(p,A);return this};this.endTour=function(G,F){var E=s();G=i.valOrDefault(G,true);F=i.valOrDefault(F,true);p=0;A=undefined;t=undefined;E.hide();if(G){i.clearState(q.cookieName)}l.isActive=false;if(F){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return A};this.hasTakenTour=function(E){if(k){i.getState(q.cookieName+"_history")}return false};this.setHasTakenTour=function(F){var E;if(k&&!this.hasTakenTour(F)){E=i.getState(q.cookieName+"_history");if(E){E+=";"+F}else{E=F}}};this.clearHasTakenTour=function(K){var J,I,F,E,G=q.cookieName+"_history",H=false;if(k){J=i.getState(G);if(J){I=J.split(";");for(F=0,E=I.length;F");u.attr({id:w,type:"button",value:v});u.addClass("hopscotch-nav-button");if(w.indexOf("prev")>=0){u.addClass("prev")}else{u.addClass("next")}return u},p=function(v,u,x){var w=x?"hide-all":"hide";if(typeof u===h){u=true}if(u){v.removeClass(w)}else{v.addClass(w)}},q=function(B,w){var E,u,C,v,D,x,A=6,G=i.getStepTarget(w)[0],H=B.$element,y=B.$arrowEl,F=i.getPixelValue(w.arrowOffset),z=w.fixedElement?"fixed":"absolute";E=i.getPixelValue(w.width)||s.bubbleWidth;C=i.valOrDefault(w.padding,s.bubblePadding);H.removeClass("fade-in-down fade-in-up fade-in-left fade-in-right");v=G.getBoundingClientRect();if(w.orientation==="top"){u=H.height();D=(v.top-u)-s.arrowWidth;x=v.left}else{if(w.orientation==="bottom"){D=v.bottom+s.arrowWidth;x=v.left}else{if(w.orientation==="left"){D=v.top;x=v.left-E-2*C-2*A-s.arrowWidth}else{if(w.orientation==="right"){D=v.top;x=v.right+s.arrowWidth}}}}if(!F){y.css({top:"",left:""})}else{if(w.orientation==="top"||w.orientation==="bottom"){y.css({left:F+"px",top:""})}else{if(w.orientation==="left"||w.orientation==="right"){y.css({top:F+"px",left:""})}}}x+=i.getPixelValue(w.xOffset);D+=i.getPixelValue(w.yOffset);if(!w.fixedElement){D+=i.getScrollTop();x+=i.getScrollLeft()}if(s.animate&&!d){H.animate({top:D+"px",left:x+"px"}).css("position",z)}else{H.css({top:D+"px",left:x+"px",position:z})}},t=function(){var x=$("
"),v=$("
"),y=$("
"),w=this,z=false,u;this.$element=x;this.$containerEl=v;this.$titleEl=$("

");this.$numberEl=$("");this.$contentEl=$("

");this.$numberEl.attr("id","hopscotch-bubble-number");y.append(this.$titleEl,this.$contentEl).attr("id","hopscotch-bubble-content");v.attr("id","hopscotch-bubble-container").append(this.$numberEl,y);x.attr("id","hopscotch-bubble").addClass("animated").append(v);this.initNavButtons();this.initCloseButton();this.initArrow();$(window).on("resize",function(){if(z||!o){return}z=true;u=setTimeout(function(){q(w,n,false);z=false},200)});this.hide();$("body").append(x);return this};this.initNavButtons=function(){var u=$("

");this.$prevBtnEl=r("hopscotch-prev",j.prevBtn);this.$nextBtnEl=r("hopscotch-next",j.nextBtn);this.$doneBtnEl=r("hopscotch-done",j.doneBtn);this.$doneBtnEl.addClass("hide");this.$prevBtnEl.click(function(v){l.prevStep()});this.$nextBtnEl.click(function(v){l.nextStep()});this.$doneBtnEl.click(l.endTour);u.attr("id","hopscotch-actions").append(this.$prevBtnEl,this.$nextBtnEl,this.$doneBtnEl);this.buttonsEl=u;this.$containerEl.append(u);return this};this.initCloseButton=function(){var u=$("");u.text(j.closeTooltip).attr({id:"hopscotch-bubble-close",href:"#",title:j.closeTooltip}).click(function(w){var v=l.getCurrStepNum(),x=l.getCurrTour(),y=(v===x.steps.length-1);i.invokeCallbacks("close",[x.id,v]);l.endTour(true,y);if(w.preventDefault){w.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=u;this.$containerEl.append(u);return this};this.initArrow=function(){var v,u;this.$arrowEl=$("
").attr("id","hopscotch-bubble-arrow-container");u=$("
").addClass("hopscotch-bubble-arrow-border");v=$("
").addClass("hopscotch-bubble-arrow");this.$arrowEl.append(u,v);this.$element.append(this.$arrowEl);return this};this.renderStep=function(w,B,x,y,C){var D=this,v=i.valOrDefault(w.showNextButton,s.showNextButton),u=i.valOrDefault(w.showPrevButton,s.showPrevButton),A,z;n=w;this.setTitle(w.title?w.title:"");this.setContent(w.content?w.content:"");this.setNum(B);this.orientation=w.orientation;this.showPrevButton(this.$prevBtnEl&&u&&(B>0||x>0));this.showNextButton(this.$nextBtnEl&&v&&!y);this.$nextBtnEl.val(w.showSkip?j.skipBtn:j.nextBtn);if(y){this.$doneBtnEl.removeClass("hide")}else{this.$doneBtnEl.addClass("hide")}this.setArrow(w.orientation);A=i.getPixelValue(w.width)||s.bubbleWidth;z=i.valOrDefault(w.padding,s.bubblePadding);this.$containerEl.css({width:A+"px",padding:z+"px"});this.$element.css("zIndex",w.zindex?w.zindex:"");if(w.orientation==="top"){setTimeout(function(){q(D,w);if(C){if(!w.fixedElement){C()}else{D.show()}}},5)}else{q(this,w);if(C){if(!w.fixedElement){C()}else{D.show()}}}return this};this.setTitle=function(u){if(u){this.$titleEl.html(u).removeClass("hide")}else{this.$titleEl.addClass("hide")}return this};this.setContent=function(u){if(u){this.$contentEl.html(u).removeClass("hide")}else{this.$contentEl.addClass("hide")}return this};this.setNum=function(u){if(j.stepNums&&u0)?E[A]:E},n=function(){return u.steps[p].length>0},B=function(){var E=u.steps[p].length;if(A0){--A;return true}else{if(p>0){E=u.steps[--p].length;if(E){A=E-1}else{A=undefined}return true}}return false},w=function(E){var J=s().$element,F=i.getPixelValue(J.css("top")),K=i.getStepTarget(C())[0],I=K.getBoundingClientRect(),L=I.top+i.getScrollTop(),H=(F1){t=parseInt(G[0],10);v=parseInt(G[1],10)}else{t=parseInt(t,10)}if(I.length>2&&I[2]==="mp"){if(v&&v0){v=0}else{v=undefined}}}}}F=s();F.showPrevButton(q.showPrevButton,true);F.showNextButton(q.showNextButton,true);return this};this.startTour=function(H,G){var E,F;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){a=true;return this}if(typeof H!==h){p=H;A=G}else{if(u.id===D&&typeof t!==h){p=t;A=v;F=C();if(!i.getStepTarget(F)){x();F=C();if(!i.getStepTarget(F)){this.endTour(false,false);return this}}}else{p=0}}if(!A&&n()){A=0}i.invokeCallbacks("start",[u.id,p]);E=s();this.isActive=true;if(q.animate){E.initAnimate()}if(!i.getStepTarget(C())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,A)}return this};this.showStep=function(M,F){var H=u.steps,G=H[M],E=H.length,L=u.id+":"+M,K=s(),J=i.valOrDefault(G.delay,0),I;p=M;A=F;if(!q.animate){K.hide(false)}if(typeof F!==h&&n()){G=G[F];L+="-"+F}I=(M===E-1)||(F>=G.length-1);setTimeout(function(){K.renderStep(G,M,F,I,function(){w(function(){K.show.call(K)})});i.invokeCallbacks("show",[u.id,p])},J);if(G.multipage){L+=":mp"}i.setState(q.cookieName,L,1);return this};this.prevStep=function(){var F=C(),E=[];if(F.onPrev){F.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(E.length===0&&x()){F=C();E=i.getStepTarget(F);if(E.length===0){i.invokeCallbacks("error",[u.id,p])}}if(E.length===0){return this.endTour(true,false)}}else{if(x()){F=C();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,A);return this};this.nextStep=function(H){var G=C(),F=p,E=[];H=i.valOrDefault(H,true);if(q.skipIfNoElement){while(E.length===0&&B()){G=C();E=i.getStepTarget(G);if(E.length===0){i.invokeCallbacks("error",[u.id,p])}}if(!E.length){return this.endTour(true,false)}}else{if(B()){G=C();if(!i.getStepTarget(G)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(H){if(G.onNext){G.onNext()}i.invokeCallbacks("next",[u.id,F])}this.showStep(p,A);return this};this.endTour=function(G,F){var E=s();G=i.valOrDefault(G,true);F=i.valOrDefault(F,true);p=0;A=undefined;t=undefined;E.hide();if(G){i.clearState(q.cookieName)}l.isActive=false;if(F){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return A};this.hasTakenTour=function(E){if(k){i.getState(q.cookieName+"_history")}return false};this.setHasTakenTour=function(F){var E;if(k&&!this.hasTakenTour(F)){E=i.getState(q.cookieName+"_history");if(E){E+=";"+F}else{E=F}}};this.clearHasTakenTour=function(K){var J,I,F,E,G=q.cookieName+"_history",H=false;if(k){J=i.getState(G);if(J){I=J.split(";");for(F=0,E=I.length;F'), $containerEl = $('
'), $bubbleContentEl = $('
'), @@ -364,7 +364,7 @@ }, 200); }); - this.hide(false); + this.hide(); $('body').append($el); return this; }; @@ -612,7 +612,7 @@ .removeClass('invisible'); } else { - this.$element.addClass('invisible') + this.$element.addClass(opt.animate ? '' : 'invisible') .removeClass('hide'); } isShowing = false; @@ -658,7 +658,7 @@ this.$element.removeClass('animate'); }; - this.init(); + init.call(this); }; Hopscotch = function(initOptions) { @@ -919,6 +919,11 @@ currStepNum = stepIdx; currSubstepNum = substepIdx; + // Only do fade if we're not animating. + if (!opt.animate) { + bubble.hide(false); + } + if (typeof substepIdx !== undefinedStr && isInMultiPartStep()) { step = step[substepIdx]; cookieVal += '-' + substepIdx; @@ -976,7 +981,6 @@ } } - bubble.hide(false); this.showStep(currStepNum, currSubstepNum); return this; @@ -1020,7 +1024,6 @@ utils.invokeCallbacks('next', [currTour.id, origStepNum]); } - bubble.hide(false); this.showStep(currStepNum, currSubstepNum); return this;