diff --git a/js/hopscotch-0.0.2.js b/js/hopscotch-0.0.2.js index 3a499f8d..dc412a1e 100644 --- a/js/hopscotch-0.0.2.js +++ b/js/hopscotch-0.0.2.js @@ -181,8 +181,28 @@ }, getStepTarget: function(step) { - if (!step) { return null; } + if (!step || !step.target) { return null; } if (typeof step.target === 'string') { + // Check if it's querySelector-eligible. Only accepting IDs and classes, + // because that's the only thing that makes sense. Tag name and pseudo-class + // are just silly. + if (/[#\.].*/.test(step.target)) { + if (document.querySelector) { + return document.querySelector(step.target); + } + if (hasJquery) { + return jQuery(step.target); + } + if (window.Sizzle) { + return Sizzle(step.target); + } + if (step.target[0] === '#') { + return document.getElementById(step.target.substring(1)); + } + // Can't extract element. Likely IE <=7 and no jQuery/Sizzle. + return null; + } + // Else assume it's a string id. return document.getElementById(step.target); } return step.target; @@ -760,7 +780,7 @@ */ Hopscotch = function(initOptions) { var cookieName = 'hopscotch.tour.state', - self = this, + self = this, // for targetClickNextFn bubble, opt, currTour, diff --git a/js/hopscotch-0.0.2.min.js b/js/hopscotch-0.0.2.min.js index 8f48b62b..80cdcd29 100644 --- a/js/hopscotch-0.0.2.min.js +++ b/js/hopscotch-0.0.2.min.js @@ -1 +1 @@ -(function(c,e){var o,g,l,k,i,a,n=c[e],j="undefined",b=false,d=(typeof window.jQuery!==j),m=(typeof window.sessionStorage!==j),h=document.body.style,f=(typeof h.MozTransition!==j||typeof h.MsTransition!==j||typeof h.webkitTransition!==j||typeof h.OTransition!==j||typeof h.transition!==j);if(n){return}a=function(){if(b){n.startTour()}};if(window.addEventListener){window.addEventListener("load",a,false)}else{if(window.attachEvent){window.attachEvent("onload",a)}}k={addClass:function(r,t){var q,s,p;if(r.className.length===0){r.className=t}else{q=r.className.split(" ");for(s=0,p=q.length;s=0){k.addClass(w,"prev")}else{k.addClass(w,"next")}return w},r=function(x,w,z){var y="hide";if(z){y="hide-all"}if(typeof w===j){w=true}if(w){k.removeClass(x,y)}else{k.addClass(x,y)}},s=function(z){var E,w,C,y,D,A,B=6,H=k.getStepTarget(z),x=this.element,G=this.arrowEl,F=k.getPixelValue(z.arrowOffset);E=k.getPixelValue(z.width)||u.bubbleWidth;C=k.valOrDefault(z.padding,u.bubblePadding);k.removeClass(x,"fade-in-down fade-in-up fade-in-left fade-in-right");y=H.getBoundingClientRect();if(z.orientation==="top"){w=x.offsetHeight;D=(y.top-w)-u.arrowWidth;A=y.left}else{if(z.orientation==="bottom"){D=y.bottom+u.arrowWidth;A=y.left}else{if(z.orientation==="left"){D=y.top;A=y.left-E-2*C-2*B-u.arrowWidth}else{if(z.orientation==="right"){D=y.top;A=y.right+u.arrowWidth}}}}if(!F){G.style.top="";G.style.left=""}else{if(z.orientation==="top"||z.orientation==="bottom"){G.style.top="";G.style.left=F+"px"}else{if(z.orientation==="left"||z.orientation==="right"){G.style.left="";G.style.top=F+"px"}}}A+=k.getPixelValue(z.xOffset);D+=k.getPixelValue(z.yOffset);if(!z.fixedElement){D+=k.getScrollTop();A+=k.getScrollLeft()}x.style.position=(z.fixedElement?"fixed":"absolute");if(u.animate&&d&&!f){$(x).animate({top:D+"px",left:A+"px"})}else{x.style.top=D+"px";x.style.left=A+"px"}},v=function(){var A=document.createElement("div"),B=document.createElement("div"),z=document.createElement("div"),y=this,C=false,x,w;this.element=A;this.containerEl=B;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");A.id="hopscotch-bubble";k.addClass(A,"animated");B.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";B.appendChild(this.numberEl);z.appendChild(this.titleEl);z.appendChild(this.contentEl);z.id="hopscotch-bubble-content";B.appendChild(z);A.appendChild(B);this.initNavButtons();this.initCloseButton();this.initArrow();x=function(){if(C||!q){return}C=true;w=setTimeout(function(){s.call(y,p,false);C=false},200)};if(window.addEventListener){window.addEventListener("resize",x,false)}else{if(window.attachEvent){window.attachEvent("onresize",x,false)}}this.hide();document.body.appendChild(A);return this};this.initNavButtons=function(){var w=document.createElement("div");this.prevBtnEl=t("hopscotch-prev",l.prevBtn);this.nextBtnEl=t("hopscotch-next",l.nextBtn);this.doneBtnEl=t("hopscotch-done",l.doneBtn);k.addClass(this.doneBtnEl,"hide");w.appendChild(this.prevBtnEl);w.appendChild(this.nextBtnEl);w.appendChild(this.doneBtnEl);k.addClickListener(this.prevBtnEl,function(x){n.prevStep(true)});k.addClickListener(this.nextBtnEl,function(x){n.nextStep(true)});k.addClickListener(this.doneBtnEl,n.endTour);w.id="hopscotch-actions";this.buttonsEl=w;this.containerEl.appendChild(w);return this};this.initCloseButton=function(){var w=document.createElement("a");w.id="hopscotch-bubble-close";w.href="#";w.title=l.closeTooltip;w.innerHTML=l.closeTooltip;k.addClickListener(w,function(y){var x=n.getCurrStepNum(),z=n.getCurrTour(),A=(x===z.steps.length-1);k.invokeCallbacks("close",[z.id,x]);n.endTour(true,A);if(y.preventDefault){y.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=w;this.containerEl.appendChild(w);return this};this.initArrow=function(){var w,x;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";x=document.createElement("div");x.className="hopscotch-bubble-arrow-border";w=document.createElement("div");w.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(x);this.arrowEl.appendChild(w);this.element.appendChild(this.arrowEl);return this};this.renderStep=function(y,D,z,A,E){var F=this,x=k.valOrDefault(y.showNextButton,u.showNextButton),w=k.valOrDefault(y.showPrevButton,u.showPrevButton),C,B;p=y;this.setTitle(y.title?y.title:"");this.setContent(y.content?y.content:"");this.setNum(D);this.orientation=y.orientation;this.showPrevButton(this.prevBtnEl&&w&&(D>0||z>0));this.showNextButton(this.nextBtnEl&&x&&!A);this.nextBtnEl.value=y.showSkip?l.skipBtn:l.nextBtn;if(A){k.removeClass(this.doneBtnEl,"hide")}else{k.addClass(this.doneBtnEl,"hide")}this.setArrow(y.orientation);C=k.getPixelValue(y.width)||u.bubbleWidth;B=k.valOrDefault(y.padding,u.bubblePadding);this.containerEl.style.width=C+"px";this.containerEl.style.padding=B+"px";this.element.style.zIndex=(y.zindex?y.zindex:"");if(y.orientation==="top"){setTimeout(function(){s.call(F,y);if(E){if(!y.fixedElement){E()}else{F.show()}}},5)}else{s.call(this,y);if(E){if(!y.fixedElement){E()}else{F.show()}}}return this};this.setTitle=function(w){if(w){this.titleEl.innerHTML=w;k.removeClass(this.titleEl,"hide")}else{k.addClass(this.titleEl,"hide")}return this};this.setContent=function(w){if(w){this.contentEl.innerHTML=w;k.removeClass(this.contentEl,"hide")}else{k.addClass(this.contentEl,"hide")}return this};this.setNum=function(w){if(l.stepNums&&w=A.steps.length){return null}else{J=A.steps[u]}return(J.length>0)?J[I]:J},r=function(){C.nextStep(false)},t=function(U){var S=y(),ac=S.element,Y=k.getPixelValue(ac.style.top),X=Y+k.getPixelValue(ac.offsetHeight),V=k.getStepTarget(D()),ad=V.getBoundingClientRect(),aa=ad.top+k.getScrollTop(),W=ad.bottom+k.getScrollTop(),Q=(YW)?X:W,Z=k.getScrollTop(),L=Z+k.getWindowHeight(),M=Q-q.scrollTopMargin,T=this,K,P,O,ab,N,R;if(Q>=Z&&(Q<=Z+q.scrollTopMargin||J<=L)){if(U){U()}return}else{if(!q.smoothScroll){window.scrollTo(0,M);if(U){U()}return}else{if(typeof YAHOO!==j&&typeof YAHOO.env!==j&&typeof YAHOO.env.ua!==j&&typeof YAHOO.util!==j&&typeof YAHOO.util.Scroll!==j){K=YAHOO.env.ua.webkit?document.body:document.documentElement;O=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;P=new YAHOO.util.Scroll(K,{scroll:{to:[0,M]}},q.scrollDuration/1000,O);P.onComplete.subscribe(U);P.animate()}else{if(d){$("body, html").animate({scrollTop:M},q.scrollDuration,U)}else{if(M<0){M=0}ab=(Z>Q)?-1:1;N=Math.abs(Z-M)/(q.scrollDuration/10);R=setInterval(function(){var af=k.getScrollTop(),ae=af+(ab*N);if((ab>0&&ae>=M)||ab<0&&ae<=M){ae=M;clearInterval(R);if(U){U()}window.scrollTo(0,ae);return}window.scrollTo(0,ae);if(k.getScrollTop()===af){clearInterval(R);if(U){U()}}},10)}}}}},x=function(L){var J=false,K;while(!J&&u+L>=0&&u+L=0&&u+N0&&M.onNext){M.onNext()}else{if(N<0&&M.onPrev){M.onPrev()}}k.invokeCallbacks(N>0?"next":"prev",[A.id,L])}this.showStep(u);return this},s=function(O){var M={},K,P,L,J,N;A=O;for(P in O){if(O.hasOwnProperty(P)&&P!=="id"&&P!=="steps"){M[P]=O[P]}}this.resetDefaultOptions();v.call(this,M,true);J=k.getState(q.cookieName);if(J){N=J.split(":");z=N[0];p=N[1];H=undefined;L=p.split("-");if(L.length>1){p=parseInt(L[0],10);H=parseInt(L[1],10)}else{p=parseInt(p,10)}if(N.length>2&&N[2]==="mp"){if(H&&H0){H=0}else{H=undefined}}}}}return this},E=function(J){if(J){this.configure(J)}};this.startTour=function(O,N,M){var J,L,K;if(!A){s.call(this,O)}if(typeof N!==j){u=N;I=M}if(document.readyState!=="complete"){b=true;return this}if(typeof u===j){if(A.id===z&&typeof p!==j){u=p;I=H;L=D();K=k.getStepTarget(L);if(!K){--u;L=D();K=k.getStepTarget(L)}if(!K&&q.skipIfNoElement){x(1);K=(u!==-1)&&k.getStepTarget(A.steps[u])}if(!K){this.endTour(false,false);return this}}else{u=0}}k.invokeCallbacks("start",[A.id,u]);J=y();J.hide(false);this.isActive=true;if(q.animate){J.initAnimate()}if(!k.getStepTarget(D())){k.invokeCallbacks("error",[A.id,u]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(u,I)}return this};this.showStep=function(M,L){var J=this,K=A.steps[M];setTimeout(function(){var R=A.steps,P=R.length,O=A.id+":"+M,N=y(),S=k.getStepTarget(K),Q;u=M;I=L;if(!q.animate){N.hide(false)}Q=(M===P-1)||(L>=K.length-1);N.renderStep(K,M,L,Q,function(){t(function(){N.show()});if(K.onShow){K.onShow()}if(K.nextOnTargetClick){k.addClickListener(S,r)}});k.invokeCallbacks("show",[A.id,u]);if(K.multipage){O+=":mp"}k.setState(q.cookieName,O,1)},K.delay?K.delay:0);return this};this.prevStep=function(J){F.call(this,J,-1);return this};this.nextStep=function(J){var K=D(),L=k.getStepTarget(K);if(K.nextOnTargetClick){L.removeEventListener?L.removeEventListener("click",r,false):L.detachEvent("click",r)}F.call(this,J,1);return this};this.endTour=function(L,J){var K=y();L=k.valOrDefault(L,true);J=k.valOrDefault(J,true);u=0;I=undefined;p=undefined;K.hide();if(L){k.clearState(q.cookieName)}n.isActive=false;if(A&&J){k.invokeCallbacks("end",[A.id])}n.removeCallbacks(true);A=null;return this};this.getCurrTour=function(){return A};this.getCurrStepNum=function(){return u};this.addCallback=function(L,J,K){if(L&&J){i[L].push({cb:J,fromTour:K})}return this};this.removeCallback=function(N,K){var L=i[N],M,J;for(M=0,J=L.length;M=0){k.addClass(w,"prev")}else{k.addClass(w,"next")}return w},r=function(x,w,z){var y="hide";if(z){y="hide-all"}if(typeof w===j){w=true}if(w){k.removeClass(x,y)}else{k.addClass(x,y)}},s=function(z){var E,w,C,y,D,A,B=6,H=k.getStepTarget(z),x=this.element,G=this.arrowEl,F=k.getPixelValue(z.arrowOffset);E=k.getPixelValue(z.width)||u.bubbleWidth;C=k.valOrDefault(z.padding,u.bubblePadding);k.removeClass(x,"fade-in-down fade-in-up fade-in-left fade-in-right");y=H.getBoundingClientRect();if(z.orientation==="top"){w=x.offsetHeight;D=(y.top-w)-u.arrowWidth;A=y.left}else{if(z.orientation==="bottom"){D=y.bottom+u.arrowWidth;A=y.left}else{if(z.orientation==="left"){D=y.top;A=y.left-E-2*C-2*B-u.arrowWidth}else{if(z.orientation==="right"){D=y.top;A=y.right+u.arrowWidth}}}}if(!F){G.style.top="";G.style.left=""}else{if(z.orientation==="top"||z.orientation==="bottom"){G.style.top="";G.style.left=F+"px"}else{if(z.orientation==="left"||z.orientation==="right"){G.style.left="";G.style.top=F+"px"}}}A+=k.getPixelValue(z.xOffset);D+=k.getPixelValue(z.yOffset);if(!z.fixedElement){D+=k.getScrollTop();A+=k.getScrollLeft()}x.style.position=(z.fixedElement?"fixed":"absolute");if(u.animate&&d&&!f){$(x).animate({top:D+"px",left:A+"px"})}else{x.style.top=D+"px";x.style.left=A+"px"}},v=function(){var A=document.createElement("div"),B=document.createElement("div"),z=document.createElement("div"),y=this,C=false,x,w;this.element=A;this.containerEl=B;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");A.id="hopscotch-bubble";k.addClass(A,"animated");B.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";B.appendChild(this.numberEl);z.appendChild(this.titleEl);z.appendChild(this.contentEl);z.id="hopscotch-bubble-content";B.appendChild(z);A.appendChild(B);this.initNavButtons();this.initCloseButton();this.initArrow();x=function(){if(C||!q){return}C=true;w=setTimeout(function(){s.call(y,p,false);C=false},200)};if(window.addEventListener){window.addEventListener("resize",x,false)}else{if(window.attachEvent){window.attachEvent("onresize",x,false)}}this.hide();document.body.appendChild(A);return this};this.initNavButtons=function(){var w=document.createElement("div");this.prevBtnEl=t("hopscotch-prev",l.prevBtn);this.nextBtnEl=t("hopscotch-next",l.nextBtn);this.doneBtnEl=t("hopscotch-done",l.doneBtn);k.addClass(this.doneBtnEl,"hide");w.appendChild(this.prevBtnEl);w.appendChild(this.nextBtnEl);w.appendChild(this.doneBtnEl);k.addClickListener(this.prevBtnEl,function(x){n.prevStep(true)});k.addClickListener(this.nextBtnEl,function(x){n.nextStep(true)});k.addClickListener(this.doneBtnEl,n.endTour);w.id="hopscotch-actions";this.buttonsEl=w;this.containerEl.appendChild(w);return this};this.initCloseButton=function(){var w=document.createElement("a");w.id="hopscotch-bubble-close";w.href="#";w.title=l.closeTooltip;w.innerHTML=l.closeTooltip;k.addClickListener(w,function(y){var x=n.getCurrStepNum(),z=n.getCurrTour(),A=(x===z.steps.length-1);k.invokeCallbacks("close",[z.id,x]);n.endTour(true,A);if(y.preventDefault){y.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=w;this.containerEl.appendChild(w);return this};this.initArrow=function(){var w,x;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";x=document.createElement("div");x.className="hopscotch-bubble-arrow-border";w=document.createElement("div");w.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(x);this.arrowEl.appendChild(w);this.element.appendChild(this.arrowEl);return this};this.renderStep=function(y,D,z,A,E){var F=this,x=k.valOrDefault(y.showNextButton,u.showNextButton),w=k.valOrDefault(y.showPrevButton,u.showPrevButton),C,B;p=y;this.setTitle(y.title?y.title:"");this.setContent(y.content?y.content:"");this.setNum(D);this.orientation=y.orientation;this.showPrevButton(this.prevBtnEl&&w&&(D>0||z>0));this.showNextButton(this.nextBtnEl&&x&&!A);this.nextBtnEl.value=y.showSkip?l.skipBtn:l.nextBtn;if(A){k.removeClass(this.doneBtnEl,"hide")}else{k.addClass(this.doneBtnEl,"hide")}this.setArrow(y.orientation);C=k.getPixelValue(y.width)||u.bubbleWidth;B=k.valOrDefault(y.padding,u.bubblePadding);this.containerEl.style.width=C+"px";this.containerEl.style.padding=B+"px";this.element.style.zIndex=(y.zindex?y.zindex:"");if(y.orientation==="top"){setTimeout(function(){s.call(F,y);if(E){if(!y.fixedElement){E()}else{F.show()}}},5)}else{s.call(this,y);if(E){if(!y.fixedElement){E()}else{F.show()}}}return this};this.setTitle=function(w){if(w){this.titleEl.innerHTML=w;k.removeClass(this.titleEl,"hide")}else{k.addClass(this.titleEl,"hide")}return this};this.setContent=function(w){if(w){this.contentEl.innerHTML=w;k.removeClass(this.contentEl,"hide")}else{k.addClass(this.contentEl,"hide")}return this};this.setNum=function(w){if(l.stepNums&&w=A.steps.length){return null}else{J=A.steps[u]}return(J.length>0)?J[I]:J},r=function(){C.nextStep(false)},t=function(U){var S=y(),ac=S.element,Y=k.getPixelValue(ac.style.top),X=Y+k.getPixelValue(ac.offsetHeight),V=k.getStepTarget(D()),ad=V.getBoundingClientRect(),aa=ad.top+k.getScrollTop(),W=ad.bottom+k.getScrollTop(),Q=(YW)?X:W,Z=k.getScrollTop(),L=Z+k.getWindowHeight(),M=Q-q.scrollTopMargin,T=this,K,P,O,ab,N,R;if(Q>=Z&&(Q<=Z+q.scrollTopMargin||J<=L)){if(U){U()}return}else{if(!q.smoothScroll){window.scrollTo(0,M);if(U){U()}return}else{if(typeof YAHOO!==j&&typeof YAHOO.env!==j&&typeof YAHOO.env.ua!==j&&typeof YAHOO.util!==j&&typeof YAHOO.util.Scroll!==j){K=YAHOO.env.ua.webkit?document.body:document.documentElement;O=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;P=new YAHOO.util.Scroll(K,{scroll:{to:[0,M]}},q.scrollDuration/1000,O);P.onComplete.subscribe(U);P.animate()}else{if(d){$("body, html").animate({scrollTop:M},q.scrollDuration,U)}else{if(M<0){M=0}ab=(Z>Q)?-1:1;N=Math.abs(Z-M)/(q.scrollDuration/10);R=setInterval(function(){var af=k.getScrollTop(),ae=af+(ab*N);if((ab>0&&ae>=M)||ab<0&&ae<=M){ae=M;clearInterval(R);if(U){U()}window.scrollTo(0,ae);return}window.scrollTo(0,ae);if(k.getScrollTop()===af){clearInterval(R);if(U){U()}}},10)}}}}},x=function(L){var J=false,K;while(!J&&u+L>=0&&u+L=0&&u+N0&&M.onNext){M.onNext()}else{if(N<0&&M.onPrev){M.onPrev()}}k.invokeCallbacks(N>0?"next":"prev",[A.id,L])}this.showStep(u);return this},s=function(O){var M={},K,P,L,J,N;A=O;for(P in O){if(O.hasOwnProperty(P)&&P!=="id"&&P!=="steps"){M[P]=O[P]}}this.resetDefaultOptions();v.call(this,M,true);J=k.getState(q.cookieName);if(J){N=J.split(":");z=N[0];p=N[1];H=undefined;L=p.split("-");if(L.length>1){p=parseInt(L[0],10);H=parseInt(L[1],10)}else{p=parseInt(p,10)}if(N.length>2&&N[2]==="mp"){if(H&&H0){H=0}else{H=undefined}}}}}return this},E=function(J){if(J){this.configure(J)}};this.startTour=function(O,N,M){var J,L,K;if(!A){s.call(this,O)}if(typeof N!==j){u=N;I=M}if(document.readyState!=="complete"){b=true;return this}if(typeof u===j){if(A.id===z&&typeof p!==j){u=p;I=H;L=D();K=k.getStepTarget(L);if(!K){--u;L=D();K=k.getStepTarget(L)}if(!K&&q.skipIfNoElement){x(1);K=(u!==-1)&&k.getStepTarget(A.steps[u])}if(!K){this.endTour(false,false);return this}}else{u=0}}k.invokeCallbacks("start",[A.id,u]);J=y();J.hide(false);this.isActive=true;if(q.animate){J.initAnimate()}if(!k.getStepTarget(D())){k.invokeCallbacks("error",[A.id,u]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(u,I)}return this};this.showStep=function(M,L){var J=this,K=A.steps[M];setTimeout(function(){var R=A.steps,P=R.length,O=A.id+":"+M,N=y(),S=k.getStepTarget(K),Q;u=M;I=L;if(!q.animate){N.hide(false)}Q=(M===P-1)||(L>=K.length-1);N.renderStep(K,M,L,Q,function(){t(function(){N.show()});if(K.onShow){K.onShow()}if(K.nextOnTargetClick){k.addClickListener(S,r)}});k.invokeCallbacks("show",[A.id,u]);if(K.multipage){O+=":mp"}k.setState(q.cookieName,O,1)},K.delay?K.delay:0);return this};this.prevStep=function(J){F.call(this,J,-1);return this};this.nextStep=function(J){var K=D(),L=k.getStepTarget(K);if(K.nextOnTargetClick){L.removeEventListener?L.removeEventListener("click",r,false):L.detachEvent("click",r)}F.call(this,J,1);return this};this.endTour=function(L,J){var K=y();L=k.valOrDefault(L,true);J=k.valOrDefault(J,true);u=0;I=undefined;p=undefined;K.hide();if(L){k.clearState(q.cookieName)}n.isActive=false;if(A&&J){k.invokeCallbacks("end",[A.id])}n.removeCallbacks(true);A=null;return this};this.getCurrTour=function(){return A};this.getCurrStepNum=function(){return u};this.addCallback=function(L,J,K){if(L&&J){i[L].push({cb:J,fromTour:K})}return this};this.removeCallback=function(N,K){var L=i[N],M,J;for(M=0,J=L.length;M