diff --git a/README b/README index 399347e3..544e4ad1 100644 --- a/README +++ b/README @@ -141,8 +141,6 @@ Tour options can be specified either through the tour JSON object, or through a **bubblePadding** [NUMBER] - Default bubble padding. *Default*: 15. -**animate** [BOOLEAN] - Should the tour bubble animate between steps? *Default*: false. - **smoothScroll** [BOOLEAN] - Should the page scroll smoothly to the next step? *Default*: true. **scrollDuration** [NUMBER] - Duration of page scroll in milliseconds. Only relevant when smoothScroll is set to true. *Default*: 1000. @@ -155,7 +153,7 @@ Tour options can be specified either through the tour JSON object, or through a **showNextButton** [BOOLEAN] - Should the bubble have the Next button? *Default*: true. -**arrowWidth** [NUMBER] - Default arrow width. (space between the bubble and the targetEl) Used for bubble position calculation. Need to provide the option to set this here in case developer wants to use own CSS. *Default*: 20. +**arrowWidth** [NUMBER] - Default arrow width. (space between the bubble and the targetEl) Used for bubble position calculation. This option is provided for the case where the developer wants to use custom CSS to adjust the size of the arrow. *Default*: 20. **skipIfNoElement** [BOOLEAN] - If a specified target element is not found, should we skip to the next step? *Default*: true. diff --git a/js/hopscotch-0.0.5.js b/js/hopscotch-0.0.5.js index aab9e0a0..eb09ef87 100644 --- a/js/hopscotch-0.0.5.js +++ b/js/hopscotch-0.0.5.js @@ -8,13 +8,11 @@ callbacks, helpers, winLoadHandler, - hasCssTransitions, winHopscotch = context[namespace], undefinedStr = 'undefined', waitingToStart = false, // is a tour waiting for the document to finish // loading so that it can start? defaultOpts = { - animate: false, smoothScroll: true, scrollDuration: 1000, scrollTopMargin: 200, @@ -133,15 +131,6 @@ return typeof val !== undefinedStr ? val : valDefault; }, - supportsCssTransitions: function() { - var docStyle = document.body.style; - return (typeof docStyle.MozTransition !== undefinedStr || - typeof docStyle.MsTransition !== undefinedStr || - typeof docStyle.webkitTransition !== undefinedStr || - typeof docStyle.OTransition !== undefinedStr || - typeof docStyle.transition !== undefinedStr); - }, - /** * Invokes a single callback represented by an array. * Example input: ["my_fn", "arg1", 2, "arg3"] @@ -602,16 +591,8 @@ // ACCOUNT FOR FIXED POSITION ELEMENTS el.style.position = (step.fixedElement ? 'fixed' : 'absolute'); - if (this.opt.animate && hasJquery && !hasCssTransitions) { - $(el).animate({ - top: top + 'px', - left: left + 'px' - }); - } - else { - el.style.top = top + 'px'; - el.style.left = left + 'px'; - } + el.style.top = top + 'px'; + el.style.left = left + 'px'; }, /** @@ -918,24 +899,17 @@ show: function() { var self = this, - className = 'fade-in-' + this._getArrowDirection(), + fadeClass = 'fade-in-' + this._getArrowDirection(), fadeDur = 1000; utils.removeClass(this.element, 'hide'); - if (this.opt.animate) { - setTimeout(function() { - utils.addClass(self.element, 'animate'); - }, 50); - } - else { - utils.addClass(this.element, className); - setTimeout(function() { - utils.removeClass(self.element, 'invisible'); - }, 50); - setTimeout(function() { - utils.removeClass(self.element, className); - }, fadeDur); - } + utils.addClass(this.element, fadeClass); + setTimeout(function() { + utils.removeClass(self.element, 'invisible'); + }, 50); + setTimeout(function() { + utils.removeClass(self.element, fadeClass); + }, fadeDur); this.isShowing = true; return this; }, @@ -955,9 +929,7 @@ // opacity: 0 else { utils.removeClass(el, 'hide'); - if (!this.opt.animate) { - utils.addClass(el, 'invisible'); - } + utils.addClass(el, 'invisible'); } utils.removeClass(el, 'animate fade-in-up fade-in-down fade-in-right fade-in-left'); this.isShowing = false; @@ -994,38 +966,6 @@ this._showButton(this.closeBtnEl, show, permanent); }, - - /** - * _initAnimate - * =========== - * This function exists due to how Chrome handles initial CSS transitions. - * Most other browsers will not animate a transition until the element - * exists on the page. Chrome treats DOM elements as starting from the - * (0, 0) position, and will animate from the upper left corner on creation - * of the DOM element. (e.g., if you create a new DOM element using - * Javascript and specify CSS top: 100px, left: 50px, then append the - * DOM element to the document.body, it will create it at 0, 0 and then - * animate it to 50, 100) - * - * Solution is to add the animate class (which defines our transition) - * only after the element is created. - * - * @private - */ - _initAnimate: function() { - var self = this; - setTimeout(function() { - utils.addClass(self.element, 'animate'); - }, 50); - }, - - /** - * @private - */ - _removeAnimate: function() { - utils.removeClass(this.element, 'animate'); - }, - destroy: function() { var el = this.element; @@ -1056,7 +996,6 @@ this.contentEl = document.createElement('p'); opt = { - animate: defaultOpts.animate, showPrevButton: defaultOpts.showPrevButton, showNextButton: defaultOpts.showNextButton, bubbleWidth: defaultOpts.bubbleWidth, @@ -1122,7 +1061,6 @@ */ if (utils.documentIsReady()) { document.body.appendChild(el); - hasCssTransitions = utils.supportsCssTransitions(); } else { // Moz, webkit, Opera @@ -1132,7 +1070,6 @@ window.removeEventListener('load', appendToBody); document.body.appendChild(el); - hasCssTransitions = utils.supportsCssTransitions(); }; document.addEventListener('DOMContentLoaded', appendToBody, false); @@ -1145,7 +1082,6 @@ window.detachEvent('onload', appendToBody); document.body.appendChild(el); } - hasCssTransitions = utils.supportsCssTransitions(); }; document.attachEvent('onreadystatechange', appendToBody); @@ -1271,7 +1207,6 @@ getBubble = function() { if (!bubble) { bubble = new HopscotchBubble({ - animate: opt.animate, bubblePadding: opt.bubblePadding, bubbleWidth: opt.bubbleWidth, showNextButton: opt.showNextButton, @@ -1623,6 +1558,10 @@ --currStepNum; step = getCurrStep(); target = utils.getStepTarget(step); + if (target) { + cb(currStepNum); + return; + } } if (!target) { @@ -1632,6 +1571,7 @@ // whatever reason. In either case, we should just advance until we find a step // that has a target on the page or end the tour if we can't find such a step. utils.invokeEventCallbacks('error'); + if (opt.skipIfNoElement) { ++currStepNum; // undo the previous decrement goToStepWithTarget(1, cb); @@ -1727,12 +1667,11 @@ utils.invokeEventCallbacks('start'); bubble = getBubble(); + // TODO: do we still need this call to .hide()? No longer using opt.animate... + // Leaving it in for now to play it safe bubble.hide(false); // make invisible for boundingRect calculations when opt.animate == true self.isActive = true; - if (opt.animate) { - bubble._initAnimate(); - } if (!utils.getStepTarget(getCurrStep())) { // First step element doesn't exist @@ -1777,10 +1716,7 @@ // Update bubble for current step currStepNum = stepNum; - // Only do fade if we're not animating. - if (!opt.animate) { - bubble.hide(false); - } + bubble.hide(false); isLast = (stepNum === numTourSteps - 1); bubble.render(step, stepNum, isLast, function(adjustScroll) { @@ -2050,13 +1986,6 @@ bubble = getBubble(); - if (opt.animate) { - bubble._initAnimate(); - } - else { - bubble._removeAnimate(); - } - bubble.showCloseButton(options.showCloseButton, typeof options.showCloseButton !== undefinedStr); return this; @@ -2070,8 +1999,6 @@ * * - bubbleWidth: Number - Default bubble width. Defaults to 280. * - bubblePadding: Number - Default bubble padding. Defaults to 15. - * - animate: Boolean - should the tour bubble animate between steps? - * Defaults to FALSE. * - smoothScroll: Boolean - should the page scroll smoothly to the next * step? Defaults to TRUE. * - scrollDuration: Number - Duration of page scroll. Only relevant when @@ -2132,10 +2059,9 @@ * ('4', '5', '6', etc.) will be used as default. * * - * @example hopscotch.configure({ animate: false, scrollTopMargin: 150 }); + * @example hopscotch.configure({ scrollDuration: 1000, scrollTopMargin: 150 }); * @example * hopscotch.configure({ - * animate: false, * scrollTopMargin: 150, * onStart: function() { * alert("Have fun!"); diff --git a/js/hopscotch-0.0.5.min.js b/js/hopscotch-0.0.5.min.js index d30b0a94..bb823e36 100644 --- a/js/hopscotch-0.0.5.min.js +++ b/js/hopscotch-0.0.5.min.js @@ -1,36 +1,34 @@ -(function(v,w){var C,x,D,k,E=window.Sizzle||null,b,p,t,q,i=v[w],F=!1,r={animate:!1,smoothScroll:!0,scrollDuration:1E3,scrollTopMargin:200,showCloseButton:!0,showPrevButton:!1,showNextButton:!0,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:!0},z="undefined"!==typeof window.jQuery,s="undefined"!==typeof window.sessionStorage,f=window.document;i||(Array.isArray||(Array.isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)}),b={addClass:function(a,e){var b,d, -g,j;if(a.className){d=e.split(/\s+/);b=" "+a.className+" ";g=0;for(j=d.length;gb.indexOf(" "+d[g]+" ")&&(b+=d[g]+" ");a.className=b.replace(/^\s+|\s+$/g,"")}else a.className=e},removeClass:function(a,b){var c,d,g,j;d=b.split(/\s+/);c=" "+a.className+" ";g=0;for(j=d.length;gh||h>=j.steps.length?null:j.steps[h]},v=function(){e.nextStep(!1)},B=function(a,c){var d,g;0<=h+a&&h+ae?d:e,h=b.getScrollTop(),e=h+b.getWindowHeight(),i=a-g.scrollTopMargin,j,G,A;a>=h&&(a<=h+ -g.scrollTopMargin||d<=e)?l&&l():g.smoothScroll?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&&"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(a=YAHOO.env.ua.webkit?f.body:f.documentElement,d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,a=new YAHOO.util.Scroll(a,{scroll:{to:[0,i]}},g.scrollDuration/1E3,d),a.onComplete.subscribe(l),a.animate()):z?$("body, html").animate({scrollTop:i},g.scrollDuration,l):(0>i&&(i=0),j=h>a? --1:1,G=Math.abs(h-i)/(g.scrollDuration/10),A=function(){var a=b.getScrollTop(),c=a+j*G;0=i||0>j&&c<=i?(c=i,l&&l(),window.scrollTo(0,c)):(window.scrollTo(0,c),b.getScrollTop()===a?l&&l():setTimeout(A,10))},A()):(window.scrollTo(0,i),l&&l())}else l();c.nextOnTargetClick&&b.addEvtListener(k,"click",v)});c.multipage&&(e+=":mp");b.setState(g.cookieName,e,1)},c.delay||0);return this};this.prevStep=function(a){w.call(this,a,-1);return this};this.nextStep=function(a){var c=n(),d=b.getStepTarget(c); -c.nextOnTargetClick&&b.removeEvtListener(d,"click",v);w.call(this,a,1);return this};this.endTour=function(a,c){var d=u(),a=b.valOrDefault(a,!0),c=b.valOrDefault(c,!0);h=0;m=void 0;d.hide();a&&b.clearState(g.cookieName);i.isActive=!1;j&&c&&b.invokeEventCallbacks("end");i.removeCallbacks(!0);j=null;return this};this.getCurrTour=function(){return j};this.getCurrStepNum=function(){return h};this.listen=function(a,b,c){a&&p[a].push({cb:b,fromTour:c});return this};this.unlisten=function(a,b){var c=p[a], -d,e;d=0;for(e=c.length;db.indexOf(" "+c[g]+" ")&&(b+=c[g]+" ");a.className=b.replace(/^\s+|\s+$/g,"")}else a.className=e},removeClass:function(a,e){var b,c,g,j;c=e.split(/\s+/);b=" "+a.className+" ";g=0;for(j=c.length;gh||h>=j.steps.length?null:j.steps[h]},u=function(){e.nextStep(!1)},A=function(a,c){var d,g;0<=h+a&&h+ae?d:e,h=b.getScrollTop(),e=h+b.getWindowHeight(),i=a-g.scrollTopMargin,j,G,z;a>=h&&(a<=h+g.scrollTopMargin||d<=e)?l&&l():g.smoothScroll?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&&"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(a=YAHOO.env.ua.webkit?f.body:f.documentElement, +d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,a=new YAHOO.util.Scroll(a,{scroll:{to:[0,i]}},g.scrollDuration/1E3,d),a.onComplete.subscribe(l),a.animate()):F?$("body, html").animate({scrollTop:i},g.scrollDuration,l):(0>i&&(i=0),j=h>a?-1:1,G=Math.abs(h-i)/(g.scrollDuration/10),z=function(){var a=b.getScrollTop(),c=a+j*G;0=i||0>j&&c<=i?(c=i,l&&l(),window.scrollTo(0,c)):(window.scrollTo(0,c),b.getScrollTop()===a?l&&l():setTimeout(z,10))},z()):(window.scrollTo(0,i),l&&l())}else l();c.nextOnTargetClick&& +b.addEvtListener(k,"click",u)});c.multipage&&(e+=":mp");b.setState(g.cookieName,e,1)},c.delay||0);return this};this.prevStep=function(a){v.call(this,a,-1);return this};this.nextStep=function(a){var c=n(),d=b.getStepTarget(c);c.nextOnTargetClick&&b.removeEvtListener(d,"click",u);v.call(this,a,1);return this};this.endTour=function(a,c){var d=t(),a=b.valOrDefault(a,!0),c=b.valOrDefault(c,!0);h=0;m=void 0;d.hide();a&&b.clearState(g.cookieName);i.isActive=!1;j&&c&&b.invokeEventCallbacks("end");i.removeCallbacks(!0); +j=null;return this};this.getCurrTour=function(){return j};this.getCurrStepNum=function(){return h};this.listen=function(a,b,c){a&&p[a].push({cb:b,fromTour:c});return this};this.unlisten=function(a,b){var c=p[a],d,e;d=0;for(e=c.length;d