From badbed368a9390c2538fed3e8b8227b9f5ebabf0 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Tue, 14 Aug 2012 14:55:28 -0700 Subject: [PATCH] ability to add multiple callbacks --- js/hopscotch-min.js | 2 +- js/hopscotch.js | 107 ++++++++++++++++++++++++++++++++++++++------ 2 files changed, 95 insertions(+), 14 deletions(-) diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js index 2fdd7b5a..1f9c46ca 100644 --- a/js/hopscotch-min.js +++ b/js/hopscotch-min.js @@ -1 +1 @@ -(function(){var l,f,k,j,a,i="undefined",h=false,b=false,c=(typeof window.jQuery!==i),e=(typeof window.localStorage!==i),g=document.body.style,d=(typeof g.MozTransition!==i||typeof g.MsTransition!==i||typeof g.webkitTransition!==i||typeof g.OTransition!==i||typeof g.transition!==i);if(window.hopscotch){return}a=function(){h=true;if(b){window.hopscotch.startTour()}};if(window.addEventListener){window.addEventListener("load",a)}else{if(window.attachEvent){window.attachEvent("onload",a)}}j={addClass:function(o,q){var n,p,m;if(c){$(o).addClass(q)}else{if(o.className.length===0){o.className=q}else{n=o.className.split(" ");for(p=0,m=n.length;p=0){j.addClass(s,"prev")}else{j.addClass(s,"next")}return s},o=function(t,s,v){var u="hide";if(v){u="hide-all"}if(typeof s===i){s=true}if(s){j.removeClass(t,u)}else{j.addClass(t,u)}},p=function(z,v,G){var C,s,A,u,x,y,B,w,F=document.getElementById(v.targetId),t=z.element,E=z.arrowEl,D=j.getPixelValue(v.arrowOffset);G=j.valOrDefault(G,true);C=j.getPixelValue(v.width)||r.bubbleWidth;A=j.valOrDefault(v.padding,r.bubblePadding);bubbleBorder=j.valOrDefault(v.padding,r.bubbleBorder);j.removeClass(t,"bounce-down bounce-up bounce-left bounce-right");u=F.getBoundingClientRect();if(v.orientation==="top"){s=t.offsetHeight;B=(u.top-s)-r.arrowWidth;w=u.left;y="bounce-down"}else{if(v.orientation==="bottom"){B=u.bottom+r.arrowWidth;w=u.left;y="bounce-up"}else{if(v.orientation==="left"){B=u.top;w=u.left-C-2*A-2*bubbleBorder-r.arrowWidth;y="bounce-right"}else{if(v.orientation==="right"){B=u.top;w=u.right+r.arrowWidth;y="bounce-left"}}}}if(!D){E.style.top="";E.style.left=""}else{if(v.orientation==="top"||v.orientation==="bottom"){E.style.left=D+"px"}else{if(v.orientation==="left"||v.orientation==="right"){E.style.top=D+"px"}}}w+=j.getPixelValue(v.xOffset);B+=j.getPixelValue(v.yOffset);B+=j.getScrollTop();w+=j.getScrollLeft();if(r.animate){if(!d&&c&&r.animate){$(t).animate({top:B+"px",left:w+"px"})}else{t.style.top=B+"px";t.style.left=w+"px"}}else{t.style.top=B+"px";t.style.left=w+"px";if(G){x=r.smoothScroll?r.scrollDuration:0;setTimeout(function(){j.addClass(t,y)},x);setTimeout(function(){j.removeClass(t,y)},x+2000)}}};this.init=function(){var u=document.createElement("div"),v=document.createElement("div"),t=this,w=false,s;this.element=u;this.containerEl=v;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");u.setAttribute("id","hopscotch-bubble");j.addClass(u,"animated");v.setAttribute("id","hopscotch-bubble-container");this.numberEl.setAttribute("id","hopscotch-bubble-number");v.appendChild(this.numberEl);v.appendChild(this.titleEl);v.appendChild(this.contentEl);u.appendChild(v);this.initNavButtons();if(r&&r.showCloseButton){this.initCloseButton()}this.initArrow();window.onresize=function(){if(w||!n){return}w=true;s=setTimeout(function(){p(t,m,false);w=false},200)};document.body.appendChild(u);return this};this.initNavButtons=function(){var s=document.createElement("div");this.prevBtnEl=q("hopscotch-prev",k.prevBtn);this.nextBtnEl=q("hopscotch-next",k.nextBtn);this.doneBtnEl=q("hopscotch-done",k.doneBtn);j.addClass(this.doneBtnEl,"hide");s.appendChild(this.prevBtnEl);s.appendChild(this.nextBtnEl);s.appendChild(this.doneBtnEl);j.addClickListener(this.prevBtnEl,function(t){window.hopscotch.prevStep()});j.addClickListener(this.nextBtnEl,function(t){window.hopscotch.nextStep()});j.addClickListener(this.doneBtnEl,window.hopscotch.endTour);s.setAttribute("id","hopscotch-actions");this.buttonsEl=s;this.containerEl.appendChild(s);return this};this.initCloseButton=function(){var s=document.createElement("a");s.setAttribute("id","hopscotch-bubble-close");s.setAttribute("href","#");s.setAttribute("title",k.closeTooltip);s.innerHTML="x";j.addClickListener(s,function(t){window.hopscotch.endTour();j.evtPreventDefault(t)});this.closeBtnEl=s;this.containerEl.appendChild(s);return this};this.initArrow=function(){var s;this.arrowEl=document.createElement("div");this.arrowEl.setAttribute("id","hopscotch-bubble-arrow-container");s=document.createElement("div");s.className="hopscotch-bubble-arrow-border";arrowEl=document.createElement("div");arrowEl.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(s);this.arrowEl.appendChild(arrowEl);this.element.appendChild(this.arrowEl)};this.renderStep=function(u,z,v,w,A){var B=this,t=j.valOrDefault(u.showNextButton,r.showNextButton),s=j.valOrDefault(u.showPrevButton,r.showPrevButton),y,x;m=u;this.setTitle(u.title?u.title:"");this.setContent(u.content?u.content:"");this.setNum(z);this.showPrevButton(this.prevBtnEl&&s&&(z>0||v>0));this.showNextButton(this.nextBtnEl&&t&&!w);if(w){j.removeClass(this.doneBtnEl,"hide")}else{j.addClass(this.doneBtnEl,"hide")}this.setArrow(u.orientation);y=j.getPixelValue(u.width)||r.bubbleWidth;x=j.valOrDefault(u.padding,r.bubblePadding);this.containerEl.style.width=y+"px";this.containerEl.style.padding=x+"px";if(u.orientation==="top"){setTimeout(function(){p(B,u);if(A){A()}},5)}else{p(this,u);if(A){A()}}return this};this.setTitle=function(s){if(s){this.titleEl.innerHTML=s;j.removeClass(this.titleEl,"hide")}else{j.addClass(this.titleEl,"hide")}return this};this.setContent=function(s){if(s){this.contentEl.innerHTML=s;j.removeClass(this.contentEl,"hide")}else{j.addClass(this.contentEl,"hide")}return this};this.setNum=function(s){if(k.stepNums&&s0)?B[x]:B},y=function(){var B=s.steps[o].length;if(x0){--x;return true}else{if(o>0){B=s.steps[--o].length;if(B){x=B-1}else{x=undefined}return true}}return false},m=function(){return s.steps[o].length>0},u=function(){var R=q().element,N=j.getPixelValue(R.style.top),M=N+j.getPixelValue(R.offsetHeight),K=document.getElementById(z().targetId),S=K.getBoundingClientRect(),P=S.top+j.getScrollTop(),L=S.bottom+j.getScrollTop(),I=(NL)?M:L,O=j.getScrollTop(),D=O+j.getWindowHeight(),E=I-p.scrollTopMargin,C,H,G,Q,F,J;if(c){$("body, html").animate({scrollTop:E},p.scrollDuration);return}else{if(typeof YAHOO!==i&&typeof YAHOO.env!==i&&typeof YAHOO.env.ua!==i&&typeof YAHOO.util!==i&&typeof YAHOO.util.Scroll!==i){C=YAHOO.env.ua.webkit?document.body:document.documentElement;G=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;H=new YAHOO.util.Scroll(C,{scroll:{to:[0,E]}},p.scrollDuration/1000,G);H.animate();return}}if(E<0){E=0}if(I>=O&&I<=O+p.scrollTopMargin){return}if(ID){if(p.smoothScroll){Q=(O>I)?-1:1;F=Math.abs(O-E)/(p.scrollDuration/10);J=setInterval(function(){var U=j.getScrollTop(),T=U+(Q*F);if((Q>0&&T>=E)||Q<0&&T<=E){T=E;clearInterval(J)}window.scrollTo(0,T);if(j.getScrollTop()===U){clearInterval(J)}},10)}else{window.scrollTo(0,E)}}};this.init=function(){var B,C;if(n){this.configure(n)}return this};this.loadTour=function(E){var D={},B,F,C;s=E;for(F in E){if(E.hasOwnProperty(F)&&F!=="id"&&F!=="steps"){D[F]=E[F]}}p={};this.configure(D);tourState=j.getState(p.cookieName);if(tourState){tourPair=tourState.split(":");A=tourPair[0];r=tourPair[1];t=undefined;C=r.split("-");if(C.length>1){r=parseInt(C[0],10);t=parseInt(C[1],10)}else{r=parseInt(r,10)}if(tourPair.length>2&&tourPair[2]==="mp"){if(t&&t0){t=0}else{t=undefined}}}}}B=q();B.showPrevButton(p.showPrevButton,true);B.showNextButton(p.showNextButton,true);return this};this.startTour=function(E,D){var B,C;if(!s){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){b=true;return}if(typeof E!==i){o=E;x=D}else{if(s.id===A&&typeof r!==i){o=r;x=t;C=z();if(!document.getElementById(C.targetId)){v();C=z();if(!document.getElementById(C.targetId)){this.endTour(false);return}}}else{o=0}}if(!x&&m()){x=0}if(p.onStart&&o===0&&!x){p.onStart(s.id)}this.showStep(o,x);B=q().show();if(p.animate){B.initAnimate()}this.isActive=true;return this};this.showStep=function(F,D){var I=s.steps,G=I[F],E=I.length,C=s.id+":"+F,B=q(),H;o=F;x=D;if(typeof D!==i&&m()){G=G[D];C+="-"+D}H=(F===E-1)||(D>=G.length-1);B.renderStep(G,F,D,H,u);if(G.multiPage){C+=":mp"}j.setState(p.cookieName,C,1);return this};this.prevStep=function(){var B=z();if(B.onPrev){B.onPrev()}if(v()){this.showStep(o,x)}return this};this.nextStep=function(){var B=z();if(p.onNext){p.onNext(B,o)}if(B.onNext){B.onNext()}if(y()){this.showStep(o,x)}return this};this.endTour=function(C){var B=q();C=j.valOrDefault(C,true);o=0;x=undefined;r=undefined;B.hide();if(C){j.clearState(p.cookieName)}this.isActive=false;if(p.onEnd){p.onEnd(s.id)}return this};this.getCurrStepNum=function(){return o};this.getCurrSubstepNum=function(){return x};this.configure=function(C){var B;if(!p){p={}}j.extend(p,C);p.animate=j.valOrDefault(p.animate,false);p.smoothScroll=j.valOrDefault(p.smoothScroll,true);p.scrollDuration=j.valOrDefault(p.scrollDuration,1000);p.scrollTopMargin=j.valOrDefault(p.scrollTopMargin,200);p.showCloseButton=j.valOrDefault(p.showCloseButton,true);p.showPrevButton=j.valOrDefault(p.showPrevButton,false);p.showNextButton=j.valOrDefault(p.showNextButton,true);p.bubbleWidth=j.valOrDefault(p.bubbleWidth,280);p.bubblePadding=j.valOrDefault(p.bubblePadding,15);p.bubbleBorder=j.valOrDefault(p.bubbleBorder,6);p.arrowWidth=j.valOrDefault(p.arrowWidth,20);p.onNext=j.valOrDefault(p.onNext,null);p.onStart=j.valOrDefault(p.onStart,null);p.onEnd=j.valOrDefault(p.onEnd,null);p.cookieName=j.valOrDefault(p.cookieName,"hopscotch.tour.state");if(C){j.extend(k,C.i18n)}B=q();if(p.animate){B.initAnimate()}else{B.removeAnimate()}B.showPrevButton(p.showPrevButton,true);B.showNextButton(p.showNextButton,true);B.showCloseButton(p.showCloseButton,true);return this};this.init(n)};window.hopscotch=new l()}()); \ No newline at end of file +(function(){var m,f,l,k,i,a,j="undefined",h=false,b=false,c=(typeof window.jQuery!==j),e=(typeof window.localStorage!==j),g=document.body.style,d=(typeof g.MozTransition!==j||typeof g.MsTransition!==j||typeof g.webkitTransition!==j||typeof g.OTransition!==j||typeof g.transition!==j);if(window.hopscotch){return}a=function(){h=true;if(b){window.hopscotch.startTour()}};if(window.addEventListener){window.addEventListener("load",a)}else{if(window.attachEvent){window.attachEvent("onload",a)}}k={addClass:function(p,r){var o,q,n;if(c){$(p).addClass(r)}else{if(p.className.length===0){p.className=r}else{o=p.className.split(" ");for(q=0,n=o.length;q=0){k.addClass(t,"prev")}else{k.addClass(t,"next")}return t},p=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===j){t=true}if(t){k.removeClass(u,v)}else{k.addClass(u,v)}},q=function(A,w,H){var D,t,B,v,y,z,C,x,G=document.getElementById(w.targetId),u=A.element,F=A.arrowEl,E=k.getPixelValue(w.arrowOffset);H=k.valOrDefault(H,true);D=k.getPixelValue(w.width)||s.bubbleWidth;B=k.valOrDefault(w.padding,s.bubblePadding);bubbleBorder=k.valOrDefault(w.padding,s.bubbleBorder);k.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=G.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;C=(v.top-t)-s.arrowWidth;x=v.left;z="bounce-down"}else{if(w.orientation==="bottom"){C=v.bottom+s.arrowWidth;x=v.left;z="bounce-up"}else{if(w.orientation==="left"){C=v.top;x=v.left-D-2*B-2*bubbleBorder-s.arrowWidth;z="bounce-right"}else{if(w.orientation==="right"){C=v.top;x=v.right+s.arrowWidth;z="bounce-left"}}}}if(!E){F.style.top="";F.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){F.style.left=E+"px"}else{if(w.orientation==="left"||w.orientation==="right"){F.style.top=E+"px"}}}x+=k.getPixelValue(w.xOffset);C+=k.getPixelValue(w.yOffset);C+=k.getScrollTop();x+=k.getScrollLeft();if(s.animate){if(!d&&c&&s.animate){$(u).animate({top:C+"px",left:x+"px"})}else{u.style.top=C+"px";u.style.left=x+"px"}}else{u.style.top=C+"px";u.style.left=x+"px";if(H){y=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){k.addClass(u,z)},y);setTimeout(function(){k.removeClass(u,z)},y+2000)}}};this.init=function(){var v=document.createElement("div"),w=document.createElement("div"),u=this,x=false,t;this.element=v;this.containerEl=w;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");v.setAttribute("id","hopscotch-bubble");k.addClass(v,"animated");w.setAttribute("id","hopscotch-bubble-container");this.numberEl.setAttribute("id","hopscotch-bubble-number");w.appendChild(this.numberEl);w.appendChild(this.titleEl);w.appendChild(this.contentEl);v.appendChild(w);this.initNavButtons();if(s&&s.showCloseButton){this.initCloseButton()}this.initArrow();window.onresize=function(){if(x||!o){return}x=true;t=setTimeout(function(){q(u,n,false);x=false},200)};document.body.appendChild(v);return this};this.initNavButtons=function(){var t=document.createElement("div");this.prevBtnEl=r("hopscotch-prev",l.prevBtn);this.nextBtnEl=r("hopscotch-next",l.nextBtn);this.doneBtnEl=r("hopscotch-done",l.doneBtn);k.addClass(this.doneBtnEl,"hide");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);k.addClickListener(this.prevBtnEl,function(u){window.hopscotch.prevStep()});k.addClickListener(this.nextBtnEl,function(u){window.hopscotch.nextStep()});k.addClickListener(this.doneBtnEl,window.hopscotch.endTour);t.setAttribute("id","hopscotch-actions");this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.setAttribute("id","hopscotch-bubble-close");t.setAttribute("href","#");t.setAttribute("title",l.closeTooltip);t.innerHTML="x";k.addClickListener(t,function(u){window.hopscotch.endTour();k.evtPreventDefault(u)});this.closeBtnEl=t;this.containerEl.appendChild(t);return this};this.initArrow=function(){var t;this.arrowEl=document.createElement("div");this.arrowEl.setAttribute("id","hopscotch-bubble-arrow-container");t=document.createElement("div");t.className="hopscotch-bubble-arrow-border";arrowEl=document.createElement("div");arrowEl.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(t);this.arrowEl.appendChild(arrowEl);this.element.appendChild(this.arrowEl)};this.renderStep=function(v,A,w,x,B){var C=this,u=k.valOrDefault(v.showNextButton,s.showNextButton),t=k.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.showPrevButton(this.prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.nextBtnEl&&u&&!x);if(x){k.removeClass(this.doneBtnEl,"hide")}else{k.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);z=k.getPixelValue(v.width)||s.bubbleWidth;y=k.valOrDefault(v.padding,s.bubblePadding);this.containerEl.style.width=z+"px";this.containerEl.style.padding=y+"px";if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B){B()}},5)}else{q(this,v);if(B){B()}}return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;k.removeClass(this.titleEl,"hide")}else{k.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;k.removeClass(this.contentEl,"hide")}else{k.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(l.stepNums&&t0)?E[A]:E},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},n=function(){return u.steps[p].length>0},y=function(H,E){var G=i[H],F=0;len=G.length;for(;FO)?P:O,R=k.getScrollTop(),G=R+k.getWindowHeight(),H=L-q.scrollTopMargin,F,K,J,T,I,M;if(c){$("body, html").animate({scrollTop:H},q.scrollDuration);return}else{if(typeof YAHOO!==j&&typeof YAHOO.env!==j&&typeof YAHOO.env.ua!==j&&typeof YAHOO.util!==j&&typeof YAHOO.util.Scroll!==j){F=YAHOO.env.ua.webkit?document.body:document.documentElement;J=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;K=new YAHOO.util.Scroll(F,{scroll:{to:[0,H]}},q.scrollDuration/1000,J);K.animate();return}}if(H<0){H=0}if(L>=R&&L<=R+q.scrollTopMargin){return}if(LG){if(q.smoothScroll){T=(R>L)?-1:1;I=Math.abs(R-H)/(q.scrollDuration/10);M=setInterval(function(){var X=k.getScrollTop(),W=X+(T*I);if((T>0&&W>=H)||T<0&&W<=H){W=H;clearInterval(M)}window.scrollTo(0,W);if(k.getScrollTop()===X){clearInterval(M)}},10)}else{window.scrollTo(0,H)}}};this.init=function(){var E,F;if(o){this.configure(o)}return this};this.loadTour=function(H){var G={},E,I,F;u=H;for(I in H){if(H.hasOwnProperty(I)&&I!=="id"&&I!=="steps"){G[I]=H[I]}}q={};r.call(this,G,true);tourState=k.getState(q.cookieName);if(tourState){tourPair=tourState.split(":");D=tourPair[0];t=tourPair[1];v=undefined;F=t.split("-");if(F.length>1){t=parseInt(F[0],10);v=parseInt(F[1],10)}else{t=parseInt(t,10)}if(tourPair.length>2&&tourPair[2]==="mp"){if(v&&v0){v=0}else{v=undefined}}}}}E=s();E.showPrevButton(q.showPrevButton,true);E.showNextButton(q.showNextButton,true);return this};this.startTour=function(J,I){var F,H,G,E;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){b=true;return}if(typeof J!==j){p=J;A=I}else{if(u.id===D&&typeof t!==j){p=t;A=v;H=C();if(!document.getElementById(H.targetId)){x();H=C();if(!document.getElementById(H.targetId)){this.endTour(false);return}}}else{p=0}}if(!A&&n()){A=0}if(p===0&&!A){y("start",[u.id])}this.showStep(p,A);F=s().show();if(q.animate){F.initAnimate()}this.isActive=true;return this};this.showStep=function(I,G){var L=u.steps,J=L[I],H=L.length,F=u.id+":"+I,E=s(),K;p=I;A=G;if(typeof G!==j&&n()){J=J[G];F+="-"+G}K=(I===H-1)||(G>=J.length-1);E.renderStep(J,I,G,K,w);if(J.multiPage){F+=":mp"}k.setState(q.cookieName,F,1);return this};this.prevStep=function(){var E=C();y("prev",[u.id,p]);if(E.onPrev){E.onPrev()}if(x()){this.showStep(p,A)}return this};this.nextStep=function(){var E=C();y("next",[u.id,p]);if(E.onNext){E.onNext()}if(B()){this.showStep(p,A)}return this};this.endTour=function(F){var E=s();F=k.valOrDefault(F,true);p=0;A=undefined;t=undefined;E.hide();if(F){k.clearState(q.cookieName)}this.isActive=false;y("end",[u.id]);hopscotch.removeCallbacks(true);return this};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return A};this.addCallback=function(G,E,F){if(E){i[G].push({cb:E,fromTour:F})}};this.removeCallbacks=function(F){var I,G,E,H;for(H in i){if(F){I=i[H];for(G=0,E=I.length;G 0; }, + invokeCallbacks = function(evtType, args) { + var cbArr = callbacks[evtType], + i = 0; + len = cbArr.length; + + for (; i