From cd71009b3db51f67fffbfde7de7e1993da18f7a1 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Mon, 27 Aug 2012 15:17:57 -0700 Subject: [PATCH] added delay, z-index option for steps --- js/exampletour.js | 86 ++++++++++++++++++++++---------------- js/hopscotch-min.js | 2 +- js/hopscotch.js | 13 +++--- js/hopscotch_jquery-min.js | 2 +- js/hopscotch_jquery.js | 10 ++++- 5 files changed, 68 insertions(+), 45 deletions(-) diff --git a/js/exampletour.js b/js/exampletour.js index f619bca5..b0f2ef0b 100644 --- a/js/exampletour.js +++ b/js/exampletour.js @@ -11,6 +11,14 @@ var tour = { document.getElementById('pageTitle').style.color = '#f00'; }, }, + { + title: 'Mission district', + content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', + target: 'mission', + orientation: 'top', + xOffset: 100, + arrowOffset: 100 + }, { title: 'Debug controls', content: 'Here are the debug controls. They\'re pretty self-explanatory: start a tour, end a tour, clear the tour cookie (if you want the tour to forget what step you are on).', @@ -19,45 +27,39 @@ var tour = { width: 320, height: 480, showSkip: true, + fixedElement: true, + xOffset: 20, + zindex: 15, + delay: 1000, onPrev: function() { document.getElementById('pageTitle').style.color = '#000'; } }, { - title: 'Mission district', - content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', - target: 'mission', - orientation: 'top', - xOffset: 100, - arrowOffset: 100 + title: 'Cool wave', + content: 'This is a colorful wave. Here is the the page where I found it.', + target: 'wave', + orientation: 'bottom', + width: 500, + //xOffset: -50, + //arrowOffset: 400, + //showPrevButton: false + }, + { + title: 'Multi-page test', + content: 'Are you ready? We\'re going to try hopping to another page and then back!!! Where we\'re going, we won\'t need roads... (Please click this link.)', + target: 'secpagelink', + orientation: 'bottom', + showNextButton: false, + multipage: true + }, + { + title: 'Polar bears', + //content: 'We made it!! Polar bears are very interesting creatures.', + target: 'polarbears', + orientation: 'right', + showPrevButton: false }, - [ - { - title: 'Cool wave', - content: 'This is a colorful wave. Here is the the page where I found it.', - target: 'wave', - orientation: 'bottom', - width: 500, - //xOffset: -50, - //arrowOffset: 400, - //showPrevButton: false - }, - { - title: 'Multi-page test', - content: 'Are you ready? We\'re going to try hopping to another page and then back!!! Where we\'re going, we won\'t need roads... (Please click this link.)', - target: 'secpagelink', - orientation: 'bottom', - showNextButton: false, - multiPage: true - }, - { - title: 'Polar bears', - //content: 'We made it!! Polar bears are very interesting creatures.', - target: 'polarbears', - orientation: 'right', - showPrevButton: false - } - ], { title: 'Returning to the first page', content: 'Time to go back home... Please click this link to return to the first page.', @@ -65,7 +67,7 @@ var tour = { orientation: 'bottom', showNextButton: false, showPrevButton: false, - multiPage: true // this indicates that next step will be on a different page + multipage: true // this indicates that next step will be on a different page }, { title: 'Python decorator', @@ -90,7 +92,8 @@ var tour = { list = document.getElementById('my-list'); if (list) { newLi = document.createElement('li'); - newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)'; + newLi.innerHTML = 'clicked next on step ' + (idx + 1); + //newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)'; list.appendChild(newLi); } }, @@ -104,7 +107,18 @@ var tour = { console.log('tour end ' + tourId); }, onError: function(tourId, idx) { - alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx); + //alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx); + var newLi, + list = document.getElementById('my-list'); + if (list) { + newLi = document.createElement('li'); + newLi.innerHTML = 'error on step ' + (idx + 1); + //newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)'; + list.appendChild(newLi); + } + }, + onClose: function() { + console.log('closing'); } //i18n: { ////nextBtn: 'Forward', diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js index 550b7b3b..344e952a 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(t,"prev")}else{i.addClass(t,"next")}return t},p=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===h){t=true}if(t){i.removeClass(u,v)}else{i.addClass(u,v)}},q=function(B,w,I){var E,t,C,v,z,A,D,x,y=6,H=i.getStepTarget(w),u=B.element,G=B.arrowEl,F=i.getPixelValue(w.arrowOffset);I=i.valOrDefault(I,true);E=i.getPixelValue(w.width)||s.bubbleWidth;C=i.valOrDefault(w.padding,s.bubblePadding);i.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=H.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;D=(v.top-t)-s.arrowWidth;x=v.left;A="bounce-down"}else{if(w.orientation==="bottom"){D=v.bottom+s.arrowWidth;x=v.left;A="bounce-up"}else{if(w.orientation==="left"){D=v.top;x=v.left-E-2*C-2*y-s.arrowWidth;A="bounce-right"}else{if(w.orientation==="right"){D=v.top;x=v.right+s.arrowWidth;A="bounce-left"}}}}if(!F){G.style.top="";G.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){G.style.top="";G.style.left=F+"px"}else{if(w.orientation==="left"||w.orientation==="right"){G.style.left="";G.style.top=F+"px"}}}x+=i.getPixelValue(w.xOffset);D+=i.getPixelValue(w.yOffset);if(!w.fixedElement){D+=i.getScrollTop();x+=i.getScrollLeft()}u.style.position=(w.fixedElement?"fixed":"absolute");u.style.top=D+"px";u.style.left=x+"px";if(!s.animate&&I){z=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){i.addClass(u,A)},z);setTimeout(function(){i.removeClass(u,A)},z+2000)}};this.init=function(){var x=document.createElement("div"),y=document.createElement("div"),w=document.createElement("div"),v=this,z=false,u,t;this.element=x;this.containerEl=y;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");x.id="hopscotch-bubble";i.addClass(x,"animated");y.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";y.appendChild(this.numberEl);w.appendChild(this.titleEl);w.appendChild(this.contentEl);w.id="hopscotch-bubble-content";y.appendChild(w);x.appendChild(y);this.initNavButtons();this.initCloseButton();this.initArrow();u=function(){if(z||!o){return}z=true;t=setTimeout(function(){q(v,n,false);z=false},200)};if(window.addEventListener){window.addEventListener("resize",u)}else{if(window.attachEvent){window.attachEvent("onresize",u)}}this.hide();document.body.appendChild(x);return this};this.initNavButtons=function(){var t=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");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(u){l.prevStep()});i.addClickListener(this.nextBtnEl,function(u){l.nextStep()});i.addClickListener(this.doneBtnEl,l.endTour);t.id="hopscotch-actions";this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.id="hopscotch-bubble-close";t.href="#";t.title=j.closeTooltip;t.innerHTML=j.closeTooltip;i.addClickListener(t,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.appendChild(t);return this};this.initArrow=function(){var t,u;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";u=document.createElement("div");u.className="hopscotch-bubble-arrow-border";t=document.createElement("div");t.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(u);this.arrowEl.appendChild(t);this.element.appendChild(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.showPrevButton(this.prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.nextBtnEl&&u&&!x);this.nextBtnEl.value=v.showSkip?j.skipBtn:j.nextBtn;if(x){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.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&&!v.fixedElement){B()}},5)}else{q(this,v);if(B&&!v.fixedElement){B()}}return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(j.stepNums&&t0)?E[z]:E},n=function(){return u.steps[p].length>0},A=function(){var E=u.steps[p].length;if(z0){--z;return true}else{if(p>0){E=u.steps[--p].length;if(E){z=E-1}else{z=undefined}return true}}return false},w=function(){var U=s().element,Q=i.getPixelValue(U.style.top),P=Q+i.getPixelValue(U.offsetHeight),N=i.getStepTarget(B()),V=N.getBoundingClientRect(),S=V.top+i.getScrollTop(),O=V.bottom+i.getScrollTop(),L=(QO)?P:O,R=i.getScrollTop(),G=R+i.getWindowHeight(),H=L-q.scrollTopMargin,F,K,J,T,I,M;if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){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=i.getScrollTop(),W=X+(T*I);if((T>0&&W>=H)||T<0&&W<=H){W=H;clearInterval(M)}window.scrollTo(0,W);if(i.getScrollTop()===X){clearInterval(M)}},10)}else{window.scrollTo(0,H)}}},D=function(){if(o){this.configure(o)}};this.loadTour=function(J){var H={},F,K,G,E,I;u=J;for(K in J){if(J.hasOwnProperty(K)&&K!=="id"&&K!=="steps"){H[K]=J[K]}}this.resetDefaultOptions();r.call(this,H,true);E=i.getState(q.cookieName);if(E){I=E.split(":");C=I[0];t=I[1];v=undefined;G=t.split("-");if(G.length>1){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"){b=true;return this}if(typeof H!==h){p=H;z=G}else{if(u.id===C&&typeof t!==h){p=t;z=v;F=B();if(!i.getStepTarget(F)){x();F=B();if(!i.getStepTarget(F)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){E.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}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;z=G;if(typeof G!==h&&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"}i.setState(q.cookieName,F,1);s().show();return this};this.prevStep=function(){var F=B(),E=false;if(F.onPrev){F.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(!E&&x()){F=B();E=i.getStepTarget(F);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(x()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(H){var G=B(),F=p,E=false;H=i.valOrDefault(H,true);if(q.skipIfNoElement){while(!E&&A()){G=B();E=i.getStepTarget(G);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(A()){G=B();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,z);return this};this.endTour=function(G,F){var E=s();G=i.valOrDefault(G,true);F=i.valOrDefault(F,true);p=0;z=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 z};this.addCallback=function(G,E,F){if(E){g[G].push({cb:E,fromTour:F})}return this};this.removeCallbacks=function(F){var I,G,E,H;for(H in g){if(F){I=g[H];for(G=0,E=I.length;G=0){i.addClass(t,"prev")}else{i.addClass(t,"next")}return t},p=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===h){t=true}if(t){i.removeClass(u,v)}else{i.addClass(u,v)}},q=function(B,w,I){var E,t,C,v,z,A,D,x,y=6,H=i.getStepTarget(w),u=B.element,G=B.arrowEl,F=i.getPixelValue(w.arrowOffset);I=i.valOrDefault(I,true);E=i.getPixelValue(w.width)||s.bubbleWidth;C=i.valOrDefault(w.padding,s.bubblePadding);i.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=H.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;D=(v.top-t)-s.arrowWidth;x=v.left;A="bounce-down"}else{if(w.orientation==="bottom"){D=v.bottom+s.arrowWidth;x=v.left;A="bounce-up"}else{if(w.orientation==="left"){D=v.top;x=v.left-E-2*C-2*y-s.arrowWidth;A="bounce-right"}else{if(w.orientation==="right"){D=v.top;x=v.right+s.arrowWidth;A="bounce-left"}}}}if(!F){G.style.top="";G.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){G.style.top="";G.style.left=F+"px"}else{if(w.orientation==="left"||w.orientation==="right"){G.style.left="";G.style.top=F+"px"}}}x+=i.getPixelValue(w.xOffset);D+=i.getPixelValue(w.yOffset);if(!w.fixedElement){D+=i.getScrollTop();x+=i.getScrollLeft()}u.style.position=(w.fixedElement?"fixed":"absolute");u.style.top=D+"px";u.style.left=x+"px";if(!s.animate&&I){z=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){i.addClass(u,A)},z);setTimeout(function(){i.removeClass(u,A)},z+2000)}};this.init=function(){var x=document.createElement("div"),y=document.createElement("div"),w=document.createElement("div"),v=this,z=false,u,t;this.element=x;this.containerEl=y;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");x.id="hopscotch-bubble";i.addClass(x,"animated");y.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";y.appendChild(this.numberEl);w.appendChild(this.titleEl);w.appendChild(this.contentEl);w.id="hopscotch-bubble-content";y.appendChild(w);x.appendChild(y);this.initNavButtons();this.initCloseButton();this.initArrow();u=function(){if(z||!o){return}z=true;t=setTimeout(function(){q(v,n,false);z=false},200)};if(window.addEventListener){window.addEventListener("resize",u)}else{if(window.attachEvent){window.attachEvent("onresize",u)}}this.hide();document.body.appendChild(x);return this};this.initNavButtons=function(){var t=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");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(u){l.prevStep()});i.addClickListener(this.nextBtnEl,function(u){l.nextStep()});i.addClickListener(this.doneBtnEl,l.endTour);t.id="hopscotch-actions";this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.id="hopscotch-bubble-close";t.href="#";t.title=j.closeTooltip;t.innerHTML=j.closeTooltip;i.addClickListener(t,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.appendChild(t);return this};this.initArrow=function(){var t,u;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";u=document.createElement("div");u.className="hopscotch-bubble-arrow-border";t=document.createElement("div");t.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(u);this.arrowEl.appendChild(t);this.element.appendChild(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.showPrevButton(this.prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.nextBtnEl&&u&&!x);this.nextBtnEl.value=v.showSkip?j.skipBtn:j.nextBtn;if(x){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.valOrDefault(v.padding,s.bubblePadding);this.containerEl.style.width=z+"px";this.containerEl.style.padding=y+"px";this.element.style.zIndex=(v.zindex?v.zindex:"");if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B&&!v.fixedElement){B()}},5)}else{q(this,v);if(B&&!v.fixedElement){B()}}return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(j.stepNums&&t0)?E[z]:E},n=function(){return u.steps[p].length>0},A=function(){var E=u.steps[p].length;if(z0){--z;return true}else{if(p>0){E=u.steps[--p].length;if(E){z=E-1}else{z=undefined}return true}}return false},w=function(){var U=s().element,Q=i.getPixelValue(U.style.top),P=Q+i.getPixelValue(U.offsetHeight),N=i.getStepTarget(B()),V=N.getBoundingClientRect(),S=V.top+i.getScrollTop(),O=V.bottom+i.getScrollTop(),L=(QO)?P:O,R=i.getScrollTop(),G=R+i.getWindowHeight(),H=L-q.scrollTopMargin,F,K,J,T,I,M;if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){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=i.getScrollTop(),W=X+(T*I);if((T>0&&W>=H)||T<0&&W<=H){W=H;clearInterval(M)}window.scrollTo(0,W);if(i.getScrollTop()===X){clearInterval(M)}},10)}else{window.scrollTo(0,H)}}},D=function(){if(o){this.configure(o)}};this.loadTour=function(J){var H={},F,K,G,E,I;u=J;for(K in J){if(J.hasOwnProperty(K)&&K!=="id"&&K!=="steps"){H[K]=J[K]}}this.resetDefaultOptions();r.call(this,H,true);E=i.getState(q.cookieName);if(E){I=E.split(":");C=I[0];t=I[1];v=undefined;G=t.split("-");if(G.length>1){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"){b=true;return this}if(typeof H!==h){p=H;z=G}else{if(u.id===C&&typeof t!==h){p=t;z=v;F=B();if(!i.getStepTarget(F)){x();F=B();if(!i.getStepTarget(F)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){E.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}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;z=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,w);K.show()},J);if(G.multipage){L+=":mp"}i.setState(q.cookieName,L,1);return this};this.prevStep=function(){var F=B(),E=false;if(F.onPrev){F.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(!E&&x()){F=B();E=i.getStepTarget(F);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(x()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(H){var G=B(),F=p,E=false;H=i.valOrDefault(H,true);if(q.skipIfNoElement){while(!E&&A()){G=B();E=i.getStepTarget(G);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(A()){G=B();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,z);return this};this.endTour=function(G,F){var E=s();G=i.valOrDefault(G,true);F=i.valOrDefault(F,true);p=0;z=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 z};this.addCallback=function(G,E,F){if(E){g[G].push({cb:E,fromTour:F})}return this};this.removeCallbacks=function(F){var I,G,E,H;for(H in g){if(F){I=g[H];for(G=0,E=I.length;G= step.length - 1); - bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll); + + setTimeout(function() { + bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll); + bubble.show(); + }, delay); if (step.multipage) { cookieVal += ':mp'; } utils.setState(opt.cookieName, cookieVal, 1); - getBubble().show(); return this; }; diff --git a/js/hopscotch_jquery-min.js b/js/hopscotch_jquery-min.js index f1202528..fc8ef100 100644 --- a/js/hopscotch_jquery-min.js +++ b/js/hopscotch_jquery-min.js @@ -1 +1 @@ -(function(b,c){var m,e,j,i,g,h="undefined",l=b[c],a=false,k=(typeof window.sessionStorage!==h),f=document.body.style,d=(typeof f.MozTransition!==h||typeof f.MsTransition!==h||typeof f.webkitTransition!==h||typeof f.OTransition!==h||typeof f.transition!==h);if(l){return}$(window).load(function(){if(a){l.startTour()}});i={getPixelValue:function(o){var n=typeof o;if(n==="number"){return o}if(n==="string"){return parseInt(o,10)}return 0},valOrDefault:function(o,n){return typeof o!==h?o:n},invokeCallbacks:function(r,o){var q=g[r],p=0,n=q.length;for(;p");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(C,v,J){var F,t,D,u,A,B,E,w,z=6,H=i.getStepTarget(v)[0],I=C.$element,x=C.$arrowEl,G=i.getPixelValue(v.arrowOffset),y=v.fixedElement?"fixed":"absolute";J=i.valOrDefault(J,true);F=i.getPixelValue(v.width)||s.bubbleWidth;D=i.valOrDefault(v.padding,s.bubblePadding);I.removeClass("bounce-down bounce-up bounce-left bounce-right");u=H.getBoundingClientRect();if(v.orientation==="top"){t=I.height();E=(u.top-t)-s.arrowWidth;w=u.left;B="bounce-down"}else{if(v.orientation==="bottom"){E=u.bottom+s.arrowWidth;w=u.left;B="bounce-up"}else{if(v.orientation==="left"){E=u.top;w=u.left-F-2*D-2*z-s.arrowWidth;B="bounce-right"}else{if(v.orientation==="right"){E=u.top;w=u.right+s.arrowWidth;B="bounce-left"}}}}if(!G){x.css({top:"",left:""})}else{if(v.orientation==="top"||v.orientation==="bottom"){x.css({left:G+"px",top:""})}else{if(v.orientation==="left"||v.orientation==="right"){x.css({top:G+"px",left:""})}}}w+=i.getPixelValue(v.xOffset);E+=i.getPixelValue(v.yOffset);if(!v.fixedElement){E+=i.getScrollTop();w+=i.getScrollLeft()}if(s.animate&&!d){I.animate({top:E+"px",left:w+"px"}).css("position",y)}else{I.css({top:E+"px",left:w+"px",position:y});if(J){A=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){I.addClass(B)},A);setTimeout(function(){I.removeClass(B)},A+2000)}}};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();$("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.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"});if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B&&!v.fixedElement){B()}},5)}else{q(this,v);if(B&&!v.fixedElement){B()}}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)?D[z]:D},n=function(){return u.steps[p].length>0},A=function(){var D=u.steps[p].length;if(z0){--z;return true}else{if(p>0){D=u.steps[--p].length;if(D){z=D-1}else{z=undefined}return true}}return false},w=function(){var H=s().$element,D=i.getPixelValue(H.css("top")),I=i.getStepTarget(B())[0],G=I.getBoundingClientRect(),J=G.top+i.getScrollTop(),F=(D1){t=parseInt(F[0],10);v=parseInt(F[1],10)}else{t=parseInt(t,10)}if(H.length>2&&H[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(G,F){var D,E;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){a=true;return this}if(typeof G!==h){p=G;z=F}else{if(u.id===C&&typeof t!==h){p=t;z=v;E=B();if(!i.getStepTarget(E)){x();E=B();if(!i.getStepTarget(E)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){D.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}return this};this.showStep=function(H,F){var K=u.steps,I=K[H],G=K.length,E=u.id+":"+H,D=s(),J;p=H;z=F;if(typeof F!==h&&n()){I=I[F];E+="-"+F}J=(H===G-1)||(F>=I.length-1);D.renderStep(I,H,F,J,w);if(I.multipage){E+=":mp"}i.setState(q.cookieName,E,1);s().show();return this};this.prevStep=function(){var E=B(),D=[];if(E.onPrev){E.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(D.length===0&&x()){E=B();D=i.getStepTarget(E);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(D.length===0){return this.endTour(true,false)}}else{if(x()){E=B();if(!i.getStepTarget(E)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(G){var F=B(),E=p,D=[];G=i.valOrDefault(G,true);if(q.skipIfNoElement){while(D.length===0&&A()){F=B();D=i.getStepTarget(F);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(!D.length){return this.endTour(true,false)}}else{if(A()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(G){if(F.onNext){F.onNext()}i.invokeCallbacks("next",[u.id,E])}this.showStep(p,z);return this};this.endTour=function(F,E){var D=s();F=i.valOrDefault(F,true);E=i.valOrDefault(E,true);p=0;z=undefined;t=undefined;D.hide();if(F){i.clearState(q.cookieName)}l.isActive=false;if(E){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return z};this.hasTakenTour=function(D){if(k){i.getState(q.cookieName+"_history")}return false};this.setHasTakenTour=function(E){var D;if(k&&!this.hasTakenTour(E)){D=i.getState(q.cookieName+"_history");if(D){D+=";"+E}else{D=E}}};this.clearHasTakenTour=function(J){var I,H,E,D,F=q.cookieName+"_history",G=false;if(k){I=i.getState(F);if(I){H=I.split(";");for(E=0,D=H.length;E");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(C,v,J){var F,t,D,u,A,B,E,w,z=6,H=i.getStepTarget(v)[0],I=C.$element,x=C.$arrowEl,G=i.getPixelValue(v.arrowOffset),y=v.fixedElement?"fixed":"absolute";J=i.valOrDefault(J,true);F=i.getPixelValue(v.width)||s.bubbleWidth;D=i.valOrDefault(v.padding,s.bubblePadding);I.removeClass("bounce-down bounce-up bounce-left bounce-right");u=H.getBoundingClientRect();if(v.orientation==="top"){t=I.height();E=(u.top-t)-s.arrowWidth;w=u.left;B="bounce-down"}else{if(v.orientation==="bottom"){E=u.bottom+s.arrowWidth;w=u.left;B="bounce-up"}else{if(v.orientation==="left"){E=u.top;w=u.left-F-2*D-2*z-s.arrowWidth;B="bounce-right"}else{if(v.orientation==="right"){E=u.top;w=u.right+s.arrowWidth;B="bounce-left"}}}}if(!G){x.css({top:"",left:""})}else{if(v.orientation==="top"||v.orientation==="bottom"){x.css({left:G+"px",top:""})}else{if(v.orientation==="left"||v.orientation==="right"){x.css({top:G+"px",left:""})}}}w+=i.getPixelValue(v.xOffset);E+=i.getPixelValue(v.yOffset);if(!v.fixedElement){E+=i.getScrollTop();w+=i.getScrollLeft()}if(s.animate&&!d){I.animate({top:E+"px",left:w+"px"}).css("position",y)}else{I.css({top:E+"px",left:w+"px",position:y});if(J){A=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){I.addClass(B)},A);setTimeout(function(){I.removeClass(B)},A+2000)}}};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();$("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.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&&!v.fixedElement){B()}},5)}else{q(this,v);if(B&&!v.fixedElement){B()}}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)?D[z]:D},n=function(){return u.steps[p].length>0},A=function(){var D=u.steps[p].length;if(z0){--z;return true}else{if(p>0){D=u.steps[--p].length;if(D){z=D-1}else{z=undefined}return true}}return false},w=function(){var H=s().$element,D=i.getPixelValue(H.css("top")),I=i.getStepTarget(B())[0],G=I.getBoundingClientRect(),J=G.top+i.getScrollTop(),F=(D1){t=parseInt(F[0],10);v=parseInt(F[1],10)}else{t=parseInt(t,10)}if(H.length>2&&H[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(G,F){var D,E;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){a=true;return this}if(typeof G!==h){p=G;z=F}else{if(u.id===C&&typeof t!==h){p=t;z=v;E=B();if(!i.getStepTarget(E)){x();E=B();if(!i.getStepTarget(E)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){D.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}return this};this.showStep=function(L,E){var G=u.steps,F=G[L],D=G.length,K=u.id+":"+L,J=s(),I=i.valOrDefault(F.delay,0),H;p=L;z=E;if(typeof E!==h&&n()){F=F[E];K+="-"+E}H=(L===D-1)||(E>=F.length-1);setTimeout(function(){J.renderStep(F,L,E,H,w);J.show()},I);if(F.multipage){K+=":mp"}i.setState(q.cookieName,K,1);return this};this.prevStep=function(){var E=B(),D=[];if(E.onPrev){E.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(D.length===0&&x()){E=B();D=i.getStepTarget(E);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(D.length===0){return this.endTour(true,false)}}else{if(x()){E=B();if(!i.getStepTarget(E)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(G){var F=B(),E=p,D=[];G=i.valOrDefault(G,true);if(q.skipIfNoElement){while(D.length===0&&A()){F=B();D=i.getStepTarget(F);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(!D.length){return this.endTour(true,false)}}else{if(A()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(G){if(F.onNext){F.onNext()}i.invokeCallbacks("next",[u.id,E])}this.showStep(p,z);return this};this.endTour=function(F,E){var D=s();F=i.valOrDefault(F,true);E=i.valOrDefault(E,true);p=0;z=undefined;t=undefined;D.hide();if(F){i.clearState(q.cookieName)}l.isActive=false;if(E){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return z};this.hasTakenTour=function(D){if(k){i.getState(q.cookieName+"_history")}return false};this.setHasTakenTour=function(E){var D;if(k&&!this.hasTakenTour(E)){D=i.getState(q.cookieName+"_history");if(D){D+=";"+E}else{D=E}}};this.clearHasTakenTour=function(J){var I,H,E,D,F=q.cookieName+"_history",G=false;if(k){I=i.getState(F);if(I){H=I.split(";");for(E=0,D=H.length;E= step.length - 1); - bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll); + + setTimeout(function() { + bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll); + bubble.show(); + }, delay); if (step.multipage) { cookieVal += ':mp'; } utils.setState(opt.cookieName, cookieVal, 1); - getBubble().show(); return this; };