From eb26699ff4d494fe22562d3589362b56e83a3d05 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Mon, 19 Nov 2012 14:34:07 -0800 Subject: [PATCH] merge --- index.html | 2 +- js/exampletour.js | 2 +- js/hopscotch-0.0.4.js | 18 +++++++++++------- js/hopscotch-0.0.4.min.js | 33 +-------------------------------- 4 files changed, 14 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index 7a82b21d..9ed07f33 100644 --- a/index.html +++ b/index.html @@ -98,7 +98,7 @@

Tour Options

--> - + diff --git a/js/exampletour.js b/js/exampletour.js index d870756f..70d36c30 100644 --- a/js/exampletour.js +++ b/js/exampletour.js @@ -85,7 +85,7 @@ var tour = { showPrevButton: true, scrollTopMargin: 50, arrowWidth: 20, - //scrollDuration: 2000, + scrollDuration: 500, cookieName: 'li_hs', skipIfNoElement: true, onNext: function(tourId, idx) { diff --git a/js/hopscotch-0.0.4.js b/js/hopscotch-0.0.4.js index 6f08ff55..b9e34013 100644 --- a/js/hopscotch-0.0.4.js +++ b/js/hopscotch-0.0.4.js @@ -1150,7 +1150,8 @@ yuiEase, direction, scrollIncr, - scrollInt; + scrollTimeout, + scrollTimeoutFn; // Target and bubble are both visible in viewport if (targetTop >= windowTop && (targetTop <= windowTop + opt.scrollTopMargin || targetBottom <= windowBottom)) { @@ -1200,7 +1201,7 @@ // To increase or decrease duration, change the divisor of scrollIncr. direction = (windowTop > targetTop) ? -1 : 1; // -1 means scrolling up, 1 means down scrollIncr = Math.abs(windowTop - scrollToVal) / (opt.scrollDuration/10); - scrollInt = setInterval(function() { + scrollTimeoutFn = function() { var scrollTop = utils.getScrollTop(), scrollTarget = scrollTop + (direction * scrollIncr); @@ -1209,7 +1210,6 @@ // Overshot our target. Just manually set to equal the target // and clear the interval scrollTarget = scrollToVal; - clearInterval(scrollInt); if (cb) { cb(); } // HopscotchBubble.show window.scrollTo(0, scrollTarget); return; @@ -1218,12 +1218,16 @@ window.scrollTo(0, scrollTarget); if (utils.getScrollTop() === scrollTop) { - // Couldn't scroll any further. Clear interval. - clearInterval(scrollInt); - + // Couldn't scroll any further. if (cb) { cb(); } // HopscotchBubble.show + return; } - }, 10); + + // If we reached this point, that means there's still more to scroll. + setTimeout(scrollTimeoutFn, 10); + }; + + scrollTimeoutFn(); } } }, diff --git a/js/hopscotch-0.0.4.min.js b/js/hopscotch-0.0.4.min.js index 0d829b75..7c47b9c9 100644 --- a/js/hopscotch-0.0.4.min.js +++ b/js/hopscotch-0.0.4.min.js @@ -1,32 +1 @@ -(function(t,u){var k,v,z,l,b,p,i=t[u],A=!1,q={animate:!1,smoothScroll:!0,scrollDuration:1E3,scrollTopMargin:200,showCloseButton:!0,showPrevButton:!1,showNextButton:!0,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:!0,cookieName:"hopscotch.tour.state"},x="undefined"!==typeof window.jQuery,r="undefined"!==typeof window.sessionStorage;k=document.body.style;var B="undefined"!==typeof k.MozTransition||"undefined"!==typeof k.MsTransition||"undefined"!==typeof k.webkitTransition||"undefined"!== -typeof k.OTransition||"undefined"!==typeof k.transition;i||(k=function(){A&&i.startTour()},window.addEventListener?window.addEventListener("load",k,!1):window.attachEvent&&window.attachEvent("onload",k),b={addClass:function(a,e){var b,d,f;if(0===a.className.length)a.className=e;else{b=a.className.split(/\s+/);d=0;for(f=b.length;dg||g>=h.steps.length?null:h.steps[g]},t=function(){e.nextStep(!1)},y=function(a,d){var c,f;0<=g+a&&g+ad&&e.onPrev)e.onPrev();b.invokeCallbacks(0g?d:g,h=b.getScrollTop(),g=h+b.getWindowHeight(),m=e-f.scrollTopMargin,w,k,l;e>=h&&(e<=h+f.scrollTopMargin||d<=g)?a&&a():f.smoothScroll?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&&"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(e=YAHOO.env.ua.webkit?document.body:document.documentElement, -d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,e=new YAHOO.util.Scroll(e,{scroll:{to:[0,m]}},f.scrollDuration/1E3,d),e.onComplete.subscribe(a),e.animate()):x?$("body, html").animate({scrollTop:m},f.scrollDuration,a):(0>m&&(m=0),w=h>e?-1:1,k=Math.abs(h-m)/(f.scrollDuration/10),l=setInterval(function(){var c=b.getScrollTop(),d=c+w*k;0=m||0>w&&d<=m?(d=m,clearInterval(l),a&&a(),window.scrollTo(0,d)):(window.scrollTo(0,d),b.getScrollTop()===c&&(clearInterval(l),a&&a()))},10)):(window.scrollTo(0, -m),a&&a());if(c.onShow)c.onShow();c.nextOnTargetClick&&b.addClickListener(j,t)});b.invokeCallbacks("show",[h.id,g]);c.multipage&&(e+=":mp");b.setState(f.cookieName,e,1)},c.delay?c.delay:0);return this};this.prevStep=function(a){u.call(this,a,-1);return this};this.nextStep=function(a){var c=n(),d=b.getStepTarget(c);c.nextOnTargetClick&&b.removeClickListener(d,t);u.call(this,a,1);return this};this.endTour=function(a,c){var d=s(),a=b.valOrDefault(a,!0),c=b.valOrDefault(c,!0);g=0;j=void 0;d.hide();a&& -b.clearState(f.cookieName);i.isActive=!1;h&&c&&b.invokeCallbacks("end",[h.id]);i.removeCallbacks(!0);h=null;return this};this.getCurrTour=function(){return h};this.getCurrStepNum=function(){return g};this.listen=function(a,b,c){a&&b&&p[a].push({cb:b,fromTour:c});return this};this.removeCallback=function(a,b){var c=p[a],d,e;d=0;for(e=c.length;d=0){l.addClass(r,"prev")}else{l.addClass(r,"next")}return r},setPosition:function(u){var z,r,x,t,y,v,w=6,C=l.getStepTarget(u),s=this.element,B=this.arrowEl,A=l.getPixelValue(u.arrowOffset);z=l.getPixelValue(u.width)||this.opt.bubbleWidth;x=l.valOrDefault(u.padding,this.opt.bubblePadding);l.removeClass(s,"fade-in-down fade-in-up fade-in-left fade-in-right");t=C.getBoundingClientRect();if(u.orientation==="top"){r=s.offsetHeight;y=(t.top-r)-this.opt.arrowWidth;v=t.left}else{if(u.orientation==="bottom"){y=t.bottom+this.opt.arrowWidth;v=t.left}else{if(u.orientation==="left"){y=t.top;v=t.left-z-2*x-2*w-this.opt.arrowWidth}else{if(u.orientation==="right"){y=t.top;v=t.right+this.opt.arrowWidth}}}}if(!A){B.style.top="";B.style.left=""}else{if(u.orientation==="top"||u.orientation==="bottom"){B.style.top="";B.style.left=A+"px"}else{if(u.orientation==="left"||u.orientation==="right"){B.style.left="";B.style.top=A+"px"}}}v+=l.getPixelValue(u.xOffset);y+=l.getPixelValue(u.yOffset);if(!u.fixedElement){y+=l.getScrollTop();v+=l.getScrollLeft()}s.style.position=(u.fixedElement?"fixed":"absolute");if(this.opt.animate&&d&&!f){$(s).animate({top:y+"px",left:v+"px"})}else{s.style.top=y+"px";s.style.left=v+"px"}},_initNavButtons:function(){var r=document.createElement("div");this.prevBtnEl=this._createButton("hopscotch-prev",n.prevBtn);this.nextBtnEl=this._createButton("hopscotch-next",n.nextBtn);this.doneBtnEl=this._createButton("hopscotch-done",n.doneBtn);l.addClass(this.doneBtnEl,"hide");r.appendChild(this.prevBtnEl);r.appendChild(this.nextBtnEl);r.appendChild(this.doneBtnEl);l.addClickListener(this.prevBtnEl,function(s){p.prevStep(true)});l.addClickListener(this.nextBtnEl,function(s){p.nextStep(true)});l.addClickListener(this.doneBtnEl,p.endTour);r.className="hopscotch-actions";this.buttonsEl=r;this.containerEl.appendChild(r);return this},_getCloseFn:function(){var r=this;if(!this.closeFn){this.closeFn=function(s){if(r.opt.id&&!this.opt.isTourBubble){p.getCalloutManager().removeCallout(r.opt.id)}else{r.destroy()}if(s.preventDefault){s.preventDefault()}else{if(event){event.returnValue=false}}}}return this.closeFn},initCloseButton:function(){var r=document.createElement("a");r.className="hopscotch-bubble-close";r.href="#";r.title=n.closeTooltip;r.innerHTML=n.closeTooltip;if(this.opt.isTourBubble){l.addClickListener(r,function(t){var s=p.getCurrStepNum(),u=p.getCurrTour(),v=(s===u.steps.length-1);l.invokeCallbacks("close",[u.id,s]);p.endTour(true,v);if(t.preventDefault){t.preventDefault()}else{if(event){event.returnValue=false}}})}else{l.addClickListener(r,this._getCloseFn())}this.closeBtnEl=r;this.containerEl.appendChild(r);return this},_initArrow:function(){var r,s;this.arrowEl=document.createElement("div");this.arrowEl.className="hopscotch-bubble-arrow-container";s=document.createElement("div");s.className="hopscotch-bubble-arrow-border";r=document.createElement("div");r.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(s);this.arrowEl.appendChild(r);this.element.appendChild(this.arrowEl);return this},render:function(t,x,u,y){var z=this,s,r,w,v;if(t){this.currStep=t}else{if(this.currStep){t=this.currStep}}s=l.valOrDefault(t.showNextButton,this.opt.showNextButton),r=l.valOrDefault(t.showPrevButton,this.opt.showPrevButton),this.setTitle(t.title?t.title:"");this.setContent(t.content?t.content:"");if(this.opt.showNumber){this.setNum(x)}this.orientation=t.orientation;if(this.opt.showNavButtons){this.showPrevButton(this.prevBtnEl&&r&&x>0);this.showNextButton(this.nextBtnEl&&s&&!u);this.nextBtnEl.value=t.showSkip?n.skipBtn:n.nextBtn;if(u){l.removeClass(this.doneBtnEl,"hide")}else{l.addClass(this.doneBtnEl,"hide")}}this._setArrow(t.orientation);w=l.getPixelValue(t.width)||this.opt.bubbleWidth;v=l.valOrDefault(t.padding,this.opt.bubblePadding);this.containerEl.style.width=w+"px";this.containerEl.style.padding=v+"px";this.element.style.zIndex=(t.zindex?t.zindex:"");if(t.orientation==="top"){setTimeout(function(){z.setPosition(t);if(y&&!t.fixedElement){y()}else{z.show()}},5)}else{this.setPosition(t);if(y&&!t.fixedElement){y()}else{z.show()}}return this},setTitle:function(r){if(r){this.titleEl.innerHTML=r;l.removeClass(this.titleEl,"hide")}else{l.addClass(this.titleEl,"hide")}return this},setContent:function(r){if(r){this.contentEl.innerHTML=r;l.removeClass(this.contentEl,"hide")}else{l.addClass(this.contentEl,"hide")}return this},setNum:function(r){if(n.stepNums&&r=C.steps.length){return null}else{J=C.steps[w]}return J},t=function(){E.nextStep(false)},v=function(T){var S=A(),ac=S.element,X=l.getPixelValue(ac.style.top),W=X+l.getPixelValue(ac.offsetHeight),U=l.getStepTarget(F()),ad=U.getBoundingClientRect(),aa=ad.top+l.getScrollTop(),V=ad.bottom+l.getScrollTop(),Q=(XV)?W:V,Z=l.getScrollTop(),L=Z+l.getWindowHeight(),M=Q-s.scrollTopMargin,K,P,O,ab,N,R,Y;if(Q>=Z&&(Q<=Z+s.scrollTopMargin||J<=L)){if(T){T()}return}else{if(!s.smoothScroll){window.scrollTo(0,M);if(T){T()}return}else{if(typeof YAHOO!==k&&typeof YAHOO.env!==k&&typeof YAHOO.env.ua!==k&&typeof YAHOO.util!==k&&typeof YAHOO.util.Scroll!==k){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]}},s.scrollDuration/1000,O);P.onComplete.subscribe(T);P.animate()}else{if(d){$("body, html").animate({scrollTop:M},s.scrollDuration,T)}else{if(M<0){M=0}ab=(Z>Q)?-1:1;N=Math.abs(Z-M)/(s.scrollDuration/10);Y=function(){var af=l.getScrollTop(),ae=af+(ab*N);if((ab>0&&ae>=M)||ab<0&&ae<=M){ae=M;if(T){T()}window.scrollTo(0,ae);return}window.scrollTo(0,ae);if(l.getScrollTop()===af){if(T){T()}return}setTimeout(Y,10)};Y()}}}}},z=function(M,J){var L,K;if(w+M>=0&&w+M0&&O.onNext){O.onNext()}else{if(P<0&&O.onPrev){O.onPrev()}}l.invokeCallbacks(P>0?"next":"prev",[C.id,N])}this.showStep(Q)};if(s.skipIfNoElement){z(P,function(Q){J.call(M,Q)})}else{if(w+P>=0&&w+P2&&L[2]==="mp"){if(r