diff --git a/README.md b/README.md index 0b9aca5..0575c30 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,21 @@ EnjoyHint **EnjoyHint** is a web-tool that provides the simplest way to create interactive tutorials and hints for your site or web-application. It can also be used to highlight and sign application elements. EnjoyHint is free software distributed under the terms of MIT license. - + +#### Improvements +Comparing to the original library this version was modified to support more advanced scenarios: + +##### Added features +* Pause tour until specified element becomes visible or event is triggered +* Prevent user interaction within highlighted element +* Ability to specify which container is being scrolled + +##### Fixed Issues +* Next button not showing with 'click' and 'custom' events +* OnSkip not called when skipping steps programmatically +* Several steps can be skipped at once if triggered event is duplicated + + #### Demo * [TODO app demo](http://xbsoftware.github.io/enjoyhint/) ([downloadable package](http://xbsoftware.github.io/enjoyhint/enjoyhint_todo_demo.zip)) * [A small guide on EnjoyHint](http://xbsoftware.github.io/enjoyhint/example1.html) @@ -164,7 +178,18 @@ var enjoyhint_script_steps = [ #### Release notes -##### v.4 +##### v.4.1.0 +Improvements: +* Disable user interaction within highlighted area (`preventEvents` step property) +* Pause and hide overlay until element becomes visible or event is triggered (`pausedUntil` step property) +* Specify which container should be scrolled (`elementToScroll` option) + +Bug Fixes: +* Fixed Next button not showing +* Fixed skippind steps when event is duplicated +* Fixed OnSkip method not called when skipping steps programmatically + +##### v.4.x * Fixed label position bugs * Fixed arrow position bugs diff --git a/bower.json b/bower.json index 1fdf8b7..5027417 100644 --- a/bower.json +++ b/bower.json @@ -4,7 +4,7 @@ "enjoyhint.js", "enjoyhint.css" ], - "version": "4.0.1", + "version": "4.1.0", "homepage": "https://github.com/xbsoftware/enjoyhint", "authors": [ "XB Software" diff --git a/enjoyhint.js b/enjoyhint.js index a7dea2d..b70f817 100644 --- a/enjoyhint.js +++ b/enjoyhint.js @@ -23,6 +23,7 @@ var SHAPE_BACKGROUND_COLOR = _options.backgroundColor || "rgba(0,0,0,0.6)"; var body = "body"; // TODO: Is it possible case when we need to define enjoyhint somewhere else? + var elementAvailableEventName = "enjoyhint-element-available"; var defaults = { onStart: function() {}, @@ -30,8 +31,10 @@ onEnd: function() {}, onSkip: function() {}, - - onNext: function() {} + + onNext: function () { }, + + elementToScroll: document.body }; var options = $.extend(defaults, _options); @@ -62,7 +65,8 @@ options.onSkip(); skipAll(); }, - fill: SHAPE_BACKGROUND_COLOR + fill: SHAPE_BACKGROUND_COLOR, + elementToScroll: options.elementToScroll }); }; @@ -97,7 +101,7 @@ $body.enjoyhint("hide_skip"); }; - var stepAction = function() { + var stepAction = function(unpause) { if (!(data && data[current_step])) { $body.enjoyhint("hide"); options.onEnd(); @@ -113,9 +117,63 @@ $enjoyhint.removeClass("enjoyhint-step-" + (current_step + 1)); $enjoyhint.removeClass("enjoyhint-step-" + (current_step + 2)); $enjoyhint.addClass("enjoyhint-step-" + (current_step + 1)); - + var step_data = data[current_step]; + $body.off(elementAvailableEventName); + + //loops waiting until specified element becomes visible + var waitUntilAvailable = function (selector, interval) { + if (interval == null) + interval = 150; + + var triggerIfAvailable = function () { + if ($(selector).is(":visible")) { + $body.trigger(elementAvailableEventName); + } + else { + setTimeout(triggerIfAvailable, interval) + } + }; + + setTimeout(triggerIfAvailable, 0); + } + + //if pausedUntil was specified, hide current overlay and wait until specified event occurs + if (!unpause && step_data.pausedUntil != null && step_data.pausedUntil.event != null) { + //hide current overlay during waiting time + $body.enjoyhint("hide"); + + //if 'available' event was chosen wait for the custom event, which is triggered when the element becomes visible + if (step_data.pausedUntil.event === 'available') { + $body.on(elementAvailableEventName, function () { + stepAction(true); //restart the step without pause + $body.off(elementAvailableEventName); + }); + + //check if element is available every 150ms + waitUntilAvailable(step_data.pausedUntil.selector); + } + else { + //delay the actual action until 'the event' happens on body or selector + if (step_data.pausedUntil.selector == null) { + on(step_data.pausedUntil.event, function () { + stepAction(true); //restart the step without pause + off(step_data.pausedUntil.event); + }); + } + else { + $(step_data.pausedUntil.selector).on(step_data.pausedUntil.event, function () { + stepAction(true); //restart the step without pause + $(step_data.pausedUntil.selector).off(step_data.pausedUntil.event) + }); + } + } + + //the rest of the logic will be executed whenever the step is restarted + return; + } + var scrollSpeed = step_data.scrollAnimationSpeed; if ( @@ -154,7 +212,7 @@ var isHintInViewport = $(step_data.selector).get(0).getBoundingClientRect(); if(isHintInViewport.top < 0 || isHintInViewport.bottom > (window.innerHeight || document.documentElement.clientHeight)){ hideCurrentHint(); - $(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200}); + $(options.elementToScroll).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200}); } else { // if previous button has been clicked and element are in viewport to prevent custom step scrollAnimationSpeed set scrollSpeed to default @@ -186,6 +244,9 @@ if (step_data.showNext !== true) { $body.enjoyhint("hide_next"); } + else { + $body.enjoyhint("show_next"); + } $body.enjoyhint("hide_prev"); @@ -255,13 +316,20 @@ break; } } else { - $event_element.on(event, function(e) { - if (step_data.keyCode && e.keyCode != step_data.keyCode) { - return; - } - - current_step++; - stepAction(); // clicked + var alreadyTriggered = false; + $event_element.one(event, function (e) { //one should ensure that event is handled only once, but that's not always enough + if (alreadyTriggered) //make sure that the step is not changed twice handling the same event + return; + + alreadyTriggered = true; + if (step_data.keyCode && e.keyCode != step_data.keyCode) { + return; + } + + $event_element.off(event); //unregister the event + + current_step++; + stepAction(); //move to the next step }); } @@ -292,7 +360,8 @@ left: step_data.left, right: step_data.right, margin: step_data.margin, - scroll: step_data.scroll + scroll: step_data.scroll, + preventEvents: step_data.preventEvents }; var customBtnProps = { @@ -403,6 +472,7 @@ case "skip": skipAll(); + options.onSkip(); break; default: $body.trigger(makeEventName(event_name, true)); @@ -767,7 +837,7 @@ doit = setTimeout(function() { if(boundingClientRect.top < 0 || boundingClientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)){ - $(document.body).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize}); + $(that.options.elementToScroll).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize}); } else renderAfterResize(); }, 150); @@ -1103,16 +1173,27 @@ .appendTo(that.enjoyhint); }; - that.disableEventsNearRect = function(rect) { + that.disableEventsNearRect = function(rect, alsoDisableRect) { + var top = rect.top; + var left = rect.left; + var right = rect.right; + var bottom = rect.bottom; + + //to disable events also within highlighted rectable, simply remove the gap + if (alsoDisableRect === true) { + top = bottom; + right = left; + } + $top_dis_events - .css({ - top: "0", - left: "0" - }) - .height(rect.top); + .css({ + top: "0", + left: "0" + }) + .height(top); $bottom_dis_events.css({ - top: rect.bottom + "px", + top: bottom + "px", left: "0" }); @@ -1121,11 +1202,11 @@ top: "0", left: 0 + "px" }) - .width(rect.left); + .width(left); $right_dis_events.css({ top: "0", - left: rect.right + "px" + left: right + "px" }); }; @@ -1437,10 +1518,10 @@ else { distance = initial_distance; ver_button_position = initial_ver_position; - that.$next_btn.html(customBtnProps.nextButton && customBtnProps.nextButton.text ? - customBtnProps.nextButton.text : 'Next'); - that.$prev_btn.html(customBtnProps.prevButton && customBtnProps.prevButton.text ? - customBtnProps.prevButton.text : 'Previous'); + that.$next_btn.html(customBtnProps.nextButton && customBtnProps.nextButton.text ? + customBtnProps.nextButton.text : 'Next'); + that.$prev_btn.html(customBtnProps.prevButton && customBtnProps.prevButton.text ? + customBtnProps.prevButton.text : 'Previous'); } that.$prev_btn.css({ @@ -1481,7 +1562,7 @@ bottom: shape_data.bottom, left: shape_data.left, right: shape_data.right - }); + }, data.preventEvents); that.renderArrow({ x_from: x_from, diff --git a/enjoyhint.min.js b/enjoyhint.min.js index caf7710..98bfec9 100644 --- a/enjoyhint.min.js +++ b/enjoyhint.min.js @@ -1 +1 @@ -"use strict";!function(a){"function"==typeof define&&define.amd?define(["jquery","./jquery.enjoyhint.js","jquery.scrollto"],a):"function"==typeof require&&"object"==typeof exports?module.exports=a(require("jquery"),require("./jquery.enjoyhint.js"),require("jquery.scrollto")):window.EnjoyHint=a(jQuery)}(function(a){return function(b){function c(){o.enjoyhint("render_circle",[]),a("#enjoyhint_label").remove(),a("#enjoyhint_arrpw_line").remove(),o.enjoyhint("hide_prev"),o.enjoyhint("hide_next"),o.enjoyhint("hide_skip")}var d,e=this,f=b||{},g=f.btnNextText,h=f.btnSkipText,i=f.backgroundColor||"rgba(0,0,0,0.6)",j="body",k={onStart:function(){},onEnd:function(){},onSkip:function(){},onNext:function(){}},l=a.extend(k,f),m=[],n=0,o=a(j),p=function(){a(".enjoyhint")&&a(".enjoyhint").remove(),o.css({overflow:"hidden"}),a(document).on("touchmove",q),o.enjoyhint({onNextClick:function(){t()},onPrevClick:function(){u()},onSkipClick:function(){l.onSkip(),v()},fill:i})},q=function(a){a.preventDefault()},r=function(){a(".enjoyhint").remove(),o.css({overflow:"auto"}),a(document).off("touchmove",q)};e.clear=function(){var b=a(".enjoyhint_next_btn"),c=a(".enjoyhint_skip_btn");a(".enjoyhint_prev_btn").removeClass(e.prevUserClass),b.removeClass(e.nextUserClass),b.text(g),c.removeClass(e.skipUserClass),c.text(h)};var s=function(){if(!m||!m[n])return o.enjoyhint("hide"),l.onEnd(),void r();l.onNext();var b=a(".enjoyhint");b.removeClass("enjoyhint-step-"+n),b.removeClass("enjoyhint-step-"+(n+1)),b.removeClass("enjoyhint-step-"+(n+2)),b.addClass("enjoyhint-step-"+(n+1));var f=m[n],g=f.scrollAnimationSpeed;f.onBeforeStart&&"function"==typeof f.onBeforeStart&&f.onBeforeStart();var h=f.timeout||0;setTimeout(function(){if(!f.selector)for(var b in f)f.hasOwnProperty(b)&&b.split(" ")[1]&&(f.selector=b.split(" ")[1],f.event=b.split(" ")[0],"next"!=b.split(" ")[0]&&"auto"!=b.split(" ")[0]&&"custom"!=b.split(" ")[0]||(f.event_type=b.split(" ")[0]),f.description=f[b]);setTimeout(function(){e.clear()},250);var h=a(f.selector).get(0).getBoundingClientRect();h.top<0||h.bottom>(window.innerHeight||document.documentElement.clientHeight)?(c(),a(document.body).scrollTo(f.selector,f.scrollAnimationSpeed||250,{offset:-200})):g=250,setTimeout(function(){var b=a(f.selector),c=w(f.event);if(o.enjoyhint("show"),d=b,f.event_selector&&(d=a(f.event_selector)),d.off(c),b.off("keydown"),f.event_type||"key"!=f.event||b.keydown(function(a){a.which==f.keyCode&&(n++,s())}),!0!==f.showNext&&o.enjoyhint("hide_next"),o.enjoyhint("hide_prev"),0!==n&&o.enjoyhint("show_prev"),0==f.showPrev&&o.enjoyhint("hide_prev"),0==f.showSkip?o.enjoyhint("hide_skip"):o.enjoyhint("show_skip"),f.nextButton){var g=a(".enjoyhint_next_btn");g.addClass(f.nextButton.className||""),g.text(f.nextButton.text||"Next"),e.nextUserClass=f.nextButton.className}if(f.prevButton){var h=a(".enjoyhint_prev_btn");h.addClass(f.prevButton.className||""),h.text(f.prevButton.text||"Previous"),e.prevUserClass=f.prevButton.className}if(f.skipButton){var i=a(".enjoyhint_skip_btn");i.addClass(f.skipButton.className||""),i.text(f.skipButton.text||"Skip"),e.skipUserClass=f.skipButton.className}if(f.event_type)switch(f.event_type){case"auto":return b[f.event](),f.event,n++,void s();case"custom":x(f.event,function(){n++,y(f.event),s()});break;case"next":o.enjoyhint("show_next")}else d.on(c,function(a){f.keyCode&&a.keyCode!=f.keyCode||(n++,s())});var j=Math.max(b.outerWidth(),b.outerHeight()),k=f.radius||Math.round(j/2)+5,l=b.offset(),m=b.outerWidth(),p=b.outerHeight(),q=void 0!==f.margin?f.margin:10,t={x:l.left+Math.round(m/2),y:l.top+Math.round(p/2)-a(document).scrollTop()},u={enjoyHintElementSelector:f.selector,center_x:t.x,center_y:t.y,text:f.description,arrowColor:f.arrowColor,top:f.top,bottom:f.bottom,left:f.left,right:f.right,margin:f.margin,scroll:f.scroll},v={nextButton:f.nextButton,prevButton:f.prevButton};if(0===u.center_x&&0===u.center_y)return o.enjoyhint("hide"),r(),console.log("Error: Element position couldn't be reached");f.shape&&"circle"==f.shape?(u.shape="circle",u.radius=k):(u.radius=0,u.width=m+q,u.height=p+q),o.enjoyhint("render_label_with_shape",u,e.stop,v)},g+20||270)},h)},t=function(){n++,s()},u=function(){n--,s()},v=function(){var b=m[n],c=a(b.selector);y(b.event),c.off(w(b.event)),r()},w=function(a,b){return a+(b?"custom":"")+".enjoy_hint"},x=function(a,b){o.on(w(a,!0),b)},y=function(a){o.off(w(a,!0))};window.addEventListener("resize",function(){null!=d&&o.enjoyhint("redo_events_near_rect",d[0].getBoundingClientRect())},!1),e.stop=function(){v()},e.reRunScript=function(a){n=a,s()},e.runScript=function(){n=0,l.onStart(),s()},e.resumeScript=function(){s()},e.setCurrentStep=function(a){n=a},e.getCurrentStep=function(){return n},e.trigger=function(a){switch(a){case"next":t();break;case"skip":v();break;default:o.trigger(w(a,!0))}},e.setScript=function(a){if(!(a instanceof Array)&&a.length<1)throw new Error("Configurations list isn't correct.");m=a},e.set=function(a){e.setScript(a)},e.setSteps=function(a){e.setScript(a)},e.run=function(){e.runScript()},e.resume=function(){e.resumeScript()},p()}}),CanvasRenderingContext2D.prototype.roundRect=function(a,b,c,d,e){return c<2*e&&(e=c/2),d<2*e&&(e=d/2),this.beginPath(),this.moveTo(a+e,b),this.arcTo(a+c,b,a+c,b+d,e),this.arcTo(a+c,b+d,a,b+d,e),this.arcTo(a,b+d,a,b,e),this.arcTo(a,b,a+c,b,e),this.closePath(),this},function(a){"function"==typeof define&&define.amd?define(["jquery","kinetic"],a):"undefined"!=typeof module&&module.exports?module.exports=a(require("jquery"),require("kinetic")):a(jQuery,Kinetic)}(function(a,b){var c,d,e,f,g,h,i,j,k,l,m,n=window.innerWidth,o=window.innerHeight,p={init:function(p){return this.each(function(){function q(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)c.setAttribute(d,b[d]);return c}var r={onNextClick:function(){},onSkipClick:function(){},onPrevClick:function(){},animation_time:800};this.enjoyhint_obj={},c=this.enjoyhint_obj,c.resetComponentStuff=function(){d=null,e=null,f=null,g=null,h=null,i=null,j=null,k=null,l=null,m=null,n=window.innerWidth,o=window.innerHeight};var s=a(this);c.options=a.extend(r,p),c.gcl={chooser:"enjoyhint"},c.cl={enjoy_hint:"enjoyhint",hide:"enjoyhint_hide",disable_events_element:"enjoyhint_disable_events",btn:"enjoyhint_btn",skip_btn:"enjoyhint_skip_btn",close_btn:"enjoyhint_close_btn",next_btn:"enjoyhint_next_btn",previous_btn:"enjoyhint_prev_btn",main_canvas:"enjoyhint_canvas",main_svg:"enjoyhint_svg",svg_wrapper:"enjoyhint_svg_wrapper",svg_transparent:"enjoyhint_svg_transparent",kinetic_container:"kinetic_container"},c.canvas_size={w:1.4*a(window).width(),h:1.4*a(window).height()},c.enjoyhint=a("
",{class:c.cl.enjoy_hint+" "+c.cl.svg_transparent}).appendTo(s),c.enjoyhint_svg_wrapper=a("
",{class:c.cl.svg_wrapper+" "+c.cl.svg_transparent}).appendTo(c.enjoyhint),c.$stage_container=a('
').appendTo(c.enjoyhint),c.$canvas=a('').appendTo(c.enjoyhint),c.$svg=a('').appendTo(c.enjoyhint_svg_wrapper);var t=a(q("defs")),u=a(q("marker",{id:"arrowMarker",viewBox:"0 0 36 21",refX:"21",refY:"10",markerUnits:"strokeWidth",orient:"auto",markerWidth:"16",markerHeight:"12"})),v=a(q("path",{style:"fill:none; stroke:rgb(255,255,255); stroke-width:2",d:"M0,0 c30,11 30,9 0,20",id:"poliline"}));t.append(u.append(v)).appendTo(c.$svg),c.kinetic_stage=new b.Stage({container:c.cl.kinetic_container,width:c.canvas_size.w,height:c.canvas_size.h,scaleX:1}),c.layer=new b.Layer,c.rect=new b.Rect({fill:p.fill,width:c.canvas_size.w,height:c.canvas_size.h});var w=a("
",{class:c.cl.disable_events_element}).appendTo(c.enjoyhint),x=w.clone().appendTo(c.enjoyhint),y=w.clone().appendTo(c.enjoyhint),z=w.clone().appendTo(c.enjoyhint),A=function(a){a.stopImmediatePropagation()};a("button").focusout(A),w.click(A),x.click(A),y.click(A),z.click(A),c.$skip_btn=a("
",{class:c.cl.skip_btn}).appendTo(c.enjoyhint).html("Skip").click(function(a){c.hide(),c.options.onSkipClick()}),c.$next_btn=a("
",{class:c.cl.next_btn}).appendTo(c.enjoyhint).html("Next").click(function(a){c.options.onNextClick()}),c.$close_btn=a("
",{class:c.cl.close_btn}).appendTo(c.enjoyhint).html("").click(function(a){c.hide(),c.options.onSkipClick()}),c.$prev_btn=a("
",{class:c.cl.previous_btn}).appendTo(c.enjoyhint).html("Previous").click(function(a){c.options.onPrevClick()}),c.$canvas.mousedown(function(b){a("canvas").css({left:"4000px"});var c=document.elementFromPoint(b.clientX,b.clientY);return a("canvas").css({left:"0px"}),a(c).click(),!1});var B=0,C=130;c.shape=new b.Shape({radius:B,center_x:-C,center_y:-C,width:0,height:0,sceneFunc:function(a){var b=this.getContext("2d")._context,c=(this.pos,b.globalCompositeOperation);b.globalCompositeOperation="destination-out",b.beginPath();var d=this.attrs.center_x-Math.round(this.attrs.width/2),e=this.attrs.center_y-Math.round(this.attrs.height/2);b.roundRect(d,e,this.attrs.width,this.attrs.height,this.attrs.radius),b.fill(),b.globalCompositeOperation=c}}),c.shape.radius=B,c.layer.add(c.rect),c.layer.add(c.shape),c.kinetic_stage.add(c.layer);var D;a(window).on("resize",function(){function d(){var b=a(c.stepData.enjoyHintElementSelector).get(0).getBoundingClientRect();c.stepData.center_x=b.left+b.width/2,c.stepData.center_y=b.top+b.height/2,c.stepData.width=b.width+11,c.stepData.height=b.height+11,c.renderLabelWithShape(c.stepData,c.customBtnProps),a(".enjoyhint_next_btn").css("visibility","visible"),a(".enjoyhint_prev_btn").css("visibility","visible"),a(".enjoyhint_skip_btn").css("visibility","visible")}if(clearTimeout(D),a(".enjoyhint_next_btn").css("visibility","hidden"),a(".enjoyhint_prev_btn").css("visibility","hidden"),a(".enjoyhint_skip_btn").css("visibility","hidden"),a(".enjoy_hint_label").remove(),a("#enjoyhint_arrpw_line").remove(),!a(c.stepData.enjoyHintElementSelector).is(":visible"))return c.stopFunction(),void a(window).off("resize");var e=a(c.stepData.enjoyHintElementSelector)[0].getBoundingClientRect();c.shape.attrs.center_x=Math.round(e.left+e.width/2),c.shape.attrs.center_y=Math.round(e.top+e.height/2),c.shape.attrs.width=e.width+11,c.shape.attrs.height=e.height+11,D=setTimeout(function(){e.top<0||e.bottom>(window.innerHeight||document.documentElement.clientHeight)?a(document.body).scrollTo(c.stepData.enjoyHintElementSelector,150,{offset:-200,onAfter:d}):d()},150);var f=window.innerWidth,g=window.innerHeight,h=f/n,i=g/o;c.kinetic_stage.setAttr("width",n*h),c.kinetic_stage.setAttr("height",o*i),c.rect=new b.Rect({fill:p.fill,width:window.innerWidth,height:window.innerHeight}),c.layer.removeChildren(),c.layer.add(c.rect),c.layer.add(c.shape),c.kinetic_stage.draw()});c.enjoyhint;return c.show=function(){c.enjoyhint.removeClass(c.cl.hide)},c.hide=function(){c.enjoyhint.addClass(c.cl.hide),new b.Tween({node:c.shape,duration:.002,center_x:-C,center_y:-C}).play()},c.hide(),c.hideNextBtn=function(){c.$next_btn.addClass(c.cl.hide),c.nextBtn="hide"},c.hidePrevBtn=function(){c.$prev_btn.addClass(c.cl.hide),c.prevBtn="hide"},c.showPrevBtn=function(){c.$prev_btn.removeClass(c.cl.hide),c.prevBtn="show"},c.showNextBtn=function(){c.$next_btn.removeClass(c.cl.hide),c.nextBtn="show"},c.hideSkipBtn=function(){c.$skip_btn.addClass(c.cl.hide)},c.showSkipBtn=function(){c.$skip_btn.removeClass(c.cl.hide)},c.renderCircle=function(a){var d=a.r||0,e=a.x||0,f=a.y||0;new b.Tween({node:c.shape,duration:.2,center_x:e,center_y:f,width:2*d,height:2*d,radius:d}).play();var g=e-d,h=e+d,i=f-d,j=f+d,k=20;return{x:e,y:f,left:g,right:h,top:i,bottom:j,conn:{left:{x:g-k,y:f},right:{x:h+k,y:f},top:{x:e,y:i-k},bottom:{x:e,y:j+k}}}},c.renderRect=function(a,d){var e=a.r||0,f=a.x||0,g=a.y||0,h=a.w||0,i=a.h||0,j=20;new b.Tween({node:c.shape,duration:d,center_x:f,center_y:g,width:h,height:i,radius:e}).play();var k=Math.round(h/2),l=Math.round(i/2),m=f-k,n=f+k,o=g-l,p=g+l;return{x:f,y:g,left:m,right:n,top:o,bottom:p,conn:{left:{x:m-j,y:g},right:{x:n+j,y:g},top:{x:f,y:o-j},bottom:{x:f,y:p+j}}}},c.renderLabel=function(b){var d=b.x||0;c.originalElementX=d;var e=b.y||0,f=(b.text,c.getLabelElement({x:d,y:e,text:b.text})),g=f.width(),h=f.height(),i=f.offset().left,j=f.offset().left+g,k=f.offset().top-a(document).scrollTop(),l=f.offset().top-a(document).scrollTop()+h,m=10,n={x:i-m,y:k+Math.round(h/2)},o={x:j+m,y:k+Math.round(h/2)},p={x:i+Math.round(g/2),y:k-m},q={x:i+Math.round(g/2),y:l+m};return f.detach(),setTimeout(function(){a("#enjoyhint_label").remove(),f.appendTo(c.enjoyhint)},c.options.animation_time/2),{label:f,left:i,right:j,top:k,bottom:l,conn:{left:n,right:o,top:p,bottom:q}}},c.setMarkerColor=function(b){function c(a){const b=(new Option).style;return b.color=a,""!==b.color}if(c(b))return[a("#poliline"),a("#enjoyhint_arrpw_line")].forEach(function(a){a.css("stroke",b)});a("#poliline").css("stroke","rgb(255,255,255)"),console.log("Error: invalid color name property - "+b)},c.renderArrow=function(b){var d=b.x_from||0,e=b.y_from||0,f=b.x_to||0,g=b.y_to||0,h=b.by_top_side,i=0,j=0;"hor"===h?(i=f,j=e):(i=d,j=g),c.enjoyhint.addClass(c.cl.svg_transparent),setTimeout(function(){a("#enjoyhint_arrpw_line").remove();var b="M"+d+","+e+" Q"+i+","+j+" "+f+","+g;c.$svg.append(q("path",{style:"fill:none; stroke:rgb(255,255,255); stroke-width:3","marker-end":"url(#arrowMarker)",d:b,id:"enjoyhint_arrpw_line"})),c.stepData.arrowColor?c.setMarkerColor(c.stepData.arrowColor):a("#poliline").css("stroke","rgb(255, 255, 255)"),c.enjoyhint.removeClass(c.cl.svg_transparent)},c.options.animation_time/2)},c.getLabelElement=function(b){return a("
",{class:"enjoy_hint_label",id:"enjoyhint_label"}).css({top:b.y+"px",left:b.x+"px"}).html(b.text).appendTo(c.enjoyhint)},c.disableEventsNearRect=function(a){w.css({top:"0",left:"0"}).height(a.top),x.css({top:a.bottom+"px",left:"0"}),y.css({top:"0",left:"0px"}).width(a.left),z.css({top:"0",left:a.right+"px"})},function(a){a.event.special.destroyed={remove:function(a){a.handler&&a.handler()}}}(a),c.renderLabelWithShape=function(b,d){function e(b){return"MD-DIALOG"===b.tagName?b:void 0===b.tagName?null:e(a(b).parent()[0])}c.stepData=b,c.customBtnProps=d;var f=e(a(c.stepData.enjoyHintElementSelector)[0]);null!=f&&a(f).on("dialogClosing",function(){c.stopFunction()}),c.resetComponentStuff();var g=b.shape||"rect",h={},i=0,j=0,k={top:b.top||0,bottom:b.bottom||0,left:b.left||0,right:b.right||0};switch(g){case"circle":i=j=b.radius;var l={top:b.center_y-j+k.top,bottom:b.center_y+j-k.bottom,left:b.center_x-i+k.left,right:b.center_x+i-k.right},m=l.right-l.left,n=l.bottom-l.top;b.radius=Math.round(Math.min(m,n)/2),i=j=Math.round(b.radius/2);var o=Math.round(m/2),p=Math.round(n/2);b.center_x=l.left+o,b.center_y=l.top+p,h=c.renderCircle({x:b.center_x,y:b.center_y,r:b.radius});break;case"rect":i=Math.round(b.width/2),j=Math.round(b.height/2);var l={top:b.center_y-j+k.top,bottom:b.center_y+j-k.bottom,left:b.center_x-i+k.left,right:b.center_x+i-k.right};b.width=l.right-l.left,b.height=l.bottom-l.top,i=Math.round(b.width/2),j=Math.round(b.height/2),b.center_x=l.left+i,b.center_y=l.top+j,h=c.renderRect({x:b.center_x,y:b.center_y,w:b.width,h:b.height,r:b.radius},.2)}var q={w:c.enjoyhint.width(),h:c.enjoyhint.height()},r=c.getLabelElement({x:0,y:0,text:b.text}),s=r.outerWidth(),t=r.outerHeight();r.remove();for(var u=b.center_y-j,v=q.h-(b.center_y+j),w=b.center_x-i,x=q.w-(b.center_x+i),y=window.innerHeight<670?130:150,z=window.innerHeight<670?0:40,A=y+t+z,B=j+y,C=[{name:"right_center",common_area:x*window.innerHeight,width:x,height:window.innerHeight},{name:"right_top",common_area:x*u,width:x,height:u},{name:"right_bottom",common_area:x*v,width:x,height:v},{name:"left_center",common_area:w*window.innerHeight,width:w,height:window.innerHeight},{name:"left_top",common_area:w*u,width:w,height:u},{name:"left_bottom",common_area:w*v,width:w,height:v},{name:"center_top",common_area:window.innerWidth*u,width:window.innerWidth,height:u},{name:"center_bottom",common_area:window.innerWidth*v,width:window.innerWidth,height:v}],D=s,E=window.innerHeight<=670?A:A+20,F=C.sort(function(a,b){return a.common_area-b.common_area}),G="oversized",H=0;HD&&J.height>E&&(G=I)}var K,L,M,N,O,P,Q="circle"===b.shape?2*b.radius:b.width?b.width:2*b.radius,R="circle"===b.shape?2*b.radius:b.height?b.height:2*b.radius,S=b.center_x+Q/2+80,T=b.center_x-s-Q/2-80,U=window.innerWidth/2-s/2,V=b.center_y-B-t,W=b.center_y+B,X=window.innerHeight/2-E/2+20,Y="hor";switch(G){case"center_top":L=V,K=U,M=b.center_x,N=b.center_y-R/2-20;break;case"center_bottom":L=W,K=U,M=b.center_x,N=b.center_y+R/2+20;break;case"left_center":L=X,K=T,M=b.center_x-Q/2-20,N=b.center_y,Y="ver";break;case"left_top":L=V,K=T,M=b.center_x-Q/2,N=b.center_y-20;break;case"left_bottom":L=W,K=T,M=b.center_x-Q/2,N=b.center_y+20,Y="ver";break;case"right_center":L=X,K=S,M=b.center_x+Q/2+20,N=b.center_y,Y="ver";break;case"right_top":L=V,K=S,M=b.center_x+Q/2,N=b.center_y-20;break;case"right_bottom":L=W,K=S,M=b.center_x+Q/2,N=b.center_y+20,Y="ver";break;case"oversized":setTimeout(function(){a("#enjoyhint_arrpw_line").remove(),a(".enjoy_hint_label").css({"border-radius":"20px","-webkit-border-radius":"20px","-moz-border-radius":"20px","background-color":"#272A26","-webkit-transition":"background-color ease-out 0.5s","-moz-transition":"background-color ease-out 0.5s","-o-transition":"background-color ease-out 0.5s",transition:"background-color ease-out 0.5s"})},450),L=X,K=U}O=K+s/2,P=b.center_y>L+t/2?L+t:L,b.center_y<0?N=20:b.center_y>window.innerHeight+20&&(N=window.innerHeight-20),b.center_y>=L&&b.center_y<=L+t&&(O=b.center_x>K?K+s:K,P=b.center_y),c.renderLabel({x:K,y:L,text:b.text}),setTimeout(function(){var a=c.$next_btn.width()+c.$skip_btn.width()+c.$prev_btn.width()+30,b=K-100,e=L+t+40;a+K>M&&(b=M>=O?M+20:K+s/2),(a+b>window.innerWidth||b<0)&&(b=10,e=P(window.innerHeight||document.documentElement.clientHeight)?(c(),a(m.elementToScroll).scrollTo(g.selector,g.scrollAnimationSpeed||250,{offset:-200})):i=250,setTimeout(function(){var b=a(g.selector),c=x(g.event);if(p.enjoyhint("show"),d=b,g.event_selector&&(d=a(g.event_selector)),d.off(c),b.off("keydown"),g.event_type||"key"!=g.event||b.keydown(function(a){a.which==g.keyCode&&(o++,t())}),!0!==g.showNext?p.enjoyhint("hide_next"):p.enjoyhint("show_next"),p.enjoyhint("hide_prev"),0!==o&&p.enjoyhint("show_prev"),0==g.showPrev&&p.enjoyhint("hide_prev"),0==g.showSkip?p.enjoyhint("hide_skip"):p.enjoyhint("show_skip"),g.nextButton){var f=a(".enjoyhint_next_btn");f.addClass(g.nextButton.className||""),f.text(g.nextButton.text||"Next"),e.nextUserClass=g.nextButton.className}if(g.prevButton){var h=a(".enjoyhint_prev_btn");h.addClass(g.prevButton.className||""),h.text(g.prevButton.text||"Previous"),e.prevUserClass=g.prevButton.className}if(g.skipButton){var i=a(".enjoyhint_skip_btn");i.addClass(g.skipButton.className||""),i.text(g.skipButton.text||"Skip"),e.skipUserClass=g.skipButton.className}if(g.event_type)switch(g.event_type){case"auto":return b[g.event](),g.event,o++,void t();case"custom":y(g.event,function(){o++,z(g.event),t()});break;case"next":p.enjoyhint("show_next")}else{var j=!1;d.one(c,function(a){j||(j=!0,g.keyCode&&a.keyCode!=g.keyCode||(d.off(c),o++,t()))})}var k=Math.max(b.outerWidth(),b.outerHeight()),l=g.radius||Math.round(k/2)+5,m=b.offset(),n=b.outerWidth(),q=b.outerHeight(),r=void 0!==g.margin?g.margin:10,u={x:m.left+Math.round(n/2),y:m.top+Math.round(q/2)-a(document).scrollTop()},v={enjoyHintElementSelector:g.selector,center_x:u.x,center_y:u.y,text:g.description,arrowColor:g.arrowColor,top:g.top,bottom:g.bottom,left:g.left,right:g.right,margin:g.margin,scroll:g.scroll,preventEvents:g.preventEvents},w={nextButton:g.nextButton,prevButton:g.prevButton};if(0===v.center_x&&0===v.center_y)return p.enjoyhint("hide"),s(),console.log("Error: Element position couldn't be reached");g.shape&&"circle"==g.shape?(v.shape="circle",v.radius=l):(v.radius=0,v.width=n+r,v.height=q+r),p.enjoyhint("render_label_with_shape",v,e.stop,w)},i+20||270)},j)},u=function(){o++,t()},v=function(){o--,t()},w=function(){var b=n[o],c=a(b.selector);z(b.event),c.off(x(b.event)),s()},x=function(a,b){return a+(b?"custom":"")+".enjoy_hint"},y=function(a,b){p.on(x(a,!0),b)},z=function(a){p.off(x(a,!0))};window.addEventListener("resize",function(){null!=d&&p.enjoyhint("redo_events_near_rect",d[0].getBoundingClientRect())},!1),e.stop=function(){w()},e.reRunScript=function(a){o=a,t()},e.runScript=function(){o=0,m.onStart(),t()},e.resumeScript=function(){t()},e.setCurrentStep=function(a){o=a},e.getCurrentStep=function(){return o},e.trigger=function(a){switch(a){case"next":u();break;case"skip":w(),m.onSkip();break;default:p.trigger(x(a,!0))}},e.setScript=function(a){if(!(a instanceof Array)&&a.length<1)throw new Error("Configurations list isn't correct.");n=a},e.set=function(a){e.setScript(a)},e.setSteps=function(a){e.setScript(a)},e.run=function(){e.runScript()},e.resume=function(){e.resumeScript()},q()}}),CanvasRenderingContext2D.prototype.roundRect=function(a,b,c,d,e){return c<2*e&&(e=c/2),d<2*e&&(e=d/2),this.beginPath(),this.moveTo(a+e,b),this.arcTo(a+c,b,a+c,b+d,e),this.arcTo(a+c,b+d,a,b+d,e),this.arcTo(a,b+d,a,b,e),this.arcTo(a,b,a+c,b,e),this.closePath(),this},function(a){"function"==typeof define&&define.amd?define(["jquery","kinetic"],a):"undefined"!=typeof module&&module.exports?module.exports=a(require("jquery"),require("kinetic")):a(jQuery,Kinetic)}(function(a,b){var c,d,e,f,g,h,i,j,k,l,m,n=window.innerWidth,o=window.innerHeight,p={init:function(p){return this.each(function(){function q(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)c.setAttribute(d,b[d]);return c}var r={onNextClick:function(){},onSkipClick:function(){},onPrevClick:function(){},animation_time:800};this.enjoyhint_obj={},c=this.enjoyhint_obj,c.resetComponentStuff=function(){d=null,e=null,f=null,g=null,h=null,i=null,j=null,k=null,l=null,m=null,n=window.innerWidth,o=window.innerHeight};var s=a(this);c.options=a.extend(r,p),c.gcl={chooser:"enjoyhint"},c.cl={enjoy_hint:"enjoyhint",hide:"enjoyhint_hide",disable_events_element:"enjoyhint_disable_events",btn:"enjoyhint_btn",skip_btn:"enjoyhint_skip_btn",close_btn:"enjoyhint_close_btn",next_btn:"enjoyhint_next_btn",previous_btn:"enjoyhint_prev_btn",main_canvas:"enjoyhint_canvas",main_svg:"enjoyhint_svg",svg_wrapper:"enjoyhint_svg_wrapper",svg_transparent:"enjoyhint_svg_transparent",kinetic_container:"kinetic_container"},c.canvas_size={w:1.4*a(window).width(),h:1.4*a(window).height()},c.enjoyhint=a("
",{class:c.cl.enjoy_hint+" "+c.cl.svg_transparent}).appendTo(s),c.enjoyhint_svg_wrapper=a("
",{class:c.cl.svg_wrapper+" "+c.cl.svg_transparent}).appendTo(c.enjoyhint),c.$stage_container=a('
').appendTo(c.enjoyhint),c.$canvas=a('').appendTo(c.enjoyhint),c.$svg=a('').appendTo(c.enjoyhint_svg_wrapper);var t=a(q("defs")),u=a(q("marker",{id:"arrowMarker",viewBox:"0 0 36 21",refX:"21",refY:"10",markerUnits:"strokeWidth",orient:"auto",markerWidth:"16",markerHeight:"12"})),v=a(q("path",{style:"fill:none; stroke:rgb(255,255,255); stroke-width:2",d:"M0,0 c30,11 30,9 0,20",id:"poliline"}));t.append(u.append(v)).appendTo(c.$svg),c.kinetic_stage=new b.Stage({container:c.cl.kinetic_container,width:c.canvas_size.w,height:c.canvas_size.h,scaleX:1}),c.layer=new b.Layer,c.rect=new b.Rect({fill:p.fill,width:c.canvas_size.w,height:c.canvas_size.h});var w=a("
",{class:c.cl.disable_events_element}).appendTo(c.enjoyhint),x=w.clone().appendTo(c.enjoyhint),y=w.clone().appendTo(c.enjoyhint),z=w.clone().appendTo(c.enjoyhint),A=function(a){a.stopImmediatePropagation()};a("button").focusout(A),w.click(A),x.click(A),y.click(A),z.click(A),c.$skip_btn=a("
",{class:c.cl.skip_btn}).appendTo(c.enjoyhint).html("Skip").click(function(a){c.hide(),c.options.onSkipClick()}),c.$next_btn=a("
",{class:c.cl.next_btn}).appendTo(c.enjoyhint).html("Next").click(function(a){c.options.onNextClick()}),c.$close_btn=a("
",{class:c.cl.close_btn}).appendTo(c.enjoyhint).html("").click(function(a){c.hide(),c.options.onSkipClick()}),c.$prev_btn=a("
",{class:c.cl.previous_btn}).appendTo(c.enjoyhint).html("Previous").click(function(a){c.options.onPrevClick()}),c.$canvas.mousedown(function(b){a("canvas").css({left:"4000px"});var c=document.elementFromPoint(b.clientX,b.clientY);return a("canvas").css({left:"0px"}),a(c).click(),!1});var B=0,C=130;c.shape=new b.Shape({radius:B,center_x:-C,center_y:-C,width:0,height:0,sceneFunc:function(a){var b=this.getContext("2d")._context,c=(this.pos,b.globalCompositeOperation);b.globalCompositeOperation="destination-out",b.beginPath();var d=this.attrs.center_x-Math.round(this.attrs.width/2),e=this.attrs.center_y-Math.round(this.attrs.height/2);b.roundRect(d,e,this.attrs.width,this.attrs.height,this.attrs.radius),b.fill(),b.globalCompositeOperation=c}}),c.shape.radius=B,c.layer.add(c.rect),c.layer.add(c.shape),c.kinetic_stage.add(c.layer);var D;a(window).on("resize",function(){function d(){var b=a(c.stepData.enjoyHintElementSelector).get(0).getBoundingClientRect();c.stepData.center_x=b.left+b.width/2,c.stepData.center_y=b.top+b.height/2,c.stepData.width=b.width+11,c.stepData.height=b.height+11,c.renderLabelWithShape(c.stepData,c.customBtnProps),a(".enjoyhint_next_btn").css("visibility","visible"),a(".enjoyhint_prev_btn").css("visibility","visible"),a(".enjoyhint_skip_btn").css("visibility","visible")}if(clearTimeout(D),a(".enjoyhint_next_btn").css("visibility","hidden"),a(".enjoyhint_prev_btn").css("visibility","hidden"),a(".enjoyhint_skip_btn").css("visibility","hidden"),a(".enjoy_hint_label").remove(),a("#enjoyhint_arrpw_line").remove(),!a(c.stepData.enjoyHintElementSelector).is(":visible"))return c.stopFunction(),void a(window).off("resize");var e=a(c.stepData.enjoyHintElementSelector)[0].getBoundingClientRect();c.shape.attrs.center_x=Math.round(e.left+e.width/2),c.shape.attrs.center_y=Math.round(e.top+e.height/2),c.shape.attrs.width=e.width+11,c.shape.attrs.height=e.height+11,D=setTimeout(function(){e.top<0||e.bottom>(window.innerHeight||document.documentElement.clientHeight)?a(c.options.elementToScroll).scrollTo(c.stepData.enjoyHintElementSelector,150,{offset:-200,onAfter:d}):d()},150);var f=window.innerWidth,g=window.innerHeight,h=f/n,i=g/o;c.kinetic_stage.setAttr("width",n*h),c.kinetic_stage.setAttr("height",o*i),c.rect=new b.Rect({fill:p.fill,width:window.innerWidth,height:window.innerHeight}),c.layer.removeChildren(),c.layer.add(c.rect),c.layer.add(c.shape),c.kinetic_stage.draw()});c.enjoyhint;return c.show=function(){c.enjoyhint.removeClass(c.cl.hide)},c.hide=function(){c.enjoyhint.addClass(c.cl.hide),new b.Tween({node:c.shape,duration:.002,center_x:-C,center_y:-C}).play()},c.hide(),c.hideNextBtn=function(){c.$next_btn.addClass(c.cl.hide),c.nextBtn="hide"},c.hidePrevBtn=function(){c.$prev_btn.addClass(c.cl.hide),c.prevBtn="hide"},c.showPrevBtn=function(){c.$prev_btn.removeClass(c.cl.hide),c.prevBtn="show"},c.showNextBtn=function(){c.$next_btn.removeClass(c.cl.hide),c.nextBtn="show"},c.hideSkipBtn=function(){c.$skip_btn.addClass(c.cl.hide)},c.showSkipBtn=function(){c.$skip_btn.removeClass(c.cl.hide)},c.renderCircle=function(a){var d=a.r||0,e=a.x||0,f=a.y||0;new b.Tween({node:c.shape,duration:.2,center_x:e,center_y:f,width:2*d,height:2*d,radius:d}).play();var g=e-d,h=e+d,i=f-d,j=f+d,k=20;return{x:e,y:f,left:g,right:h,top:i,bottom:j,conn:{left:{x:g-k,y:f},right:{x:h+k,y:f},top:{x:e,y:i-k},bottom:{x:e,y:j+k}}}},c.renderRect=function(a,d){var e=a.r||0,f=a.x||0,g=a.y||0,h=a.w||0,i=a.h||0,j=20;new b.Tween({node:c.shape,duration:d,center_x:f,center_y:g,width:h,height:i,radius:e}).play();var k=Math.round(h/2),l=Math.round(i/2),m=f-k,n=f+k,o=g-l,p=g+l;return{x:f,y:g,left:m,right:n,top:o,bottom:p,conn:{left:{x:m-j,y:g},right:{x:n+j,y:g},top:{x:f,y:o-j},bottom:{x:f,y:p+j}}}},c.renderLabel=function(b){var d=b.x||0;c.originalElementX=d;var e=b.y||0,f=(b.text,c.getLabelElement({x:d,y:e,text:b.text})),g=f.width(),h=f.height(),i=f.offset().left,j=f.offset().left+g,k=f.offset().top-a(document).scrollTop(),l=f.offset().top-a(document).scrollTop()+h,m=10,n={x:i-m,y:k+Math.round(h/2)},o={x:j+m,y:k+Math.round(h/2)},p={x:i+Math.round(g/2),y:k-m},q={x:i+Math.round(g/2),y:l+m};return f.detach(),setTimeout(function(){a("#enjoyhint_label").remove(),f.appendTo(c.enjoyhint)},c.options.animation_time/2),{label:f,left:i,right:j,top:k,bottom:l,conn:{left:n,right:o,top:p,bottom:q}}},c.setMarkerColor=function(b){function c(a){const b=(new Option).style;return b.color=a,""!==b.color}if(c(b))return[a("#poliline"),a("#enjoyhint_arrpw_line")].forEach(function(a){a.css("stroke",b)});a("#poliline").css("stroke","rgb(255,255,255)"),console.log("Error: invalid color name property - "+b)},c.renderArrow=function(b){var d=b.x_from||0,e=b.y_from||0,f=b.x_to||0,g=b.y_to||0,h=b.by_top_side,i=0,j=0;"hor"===h?(i=f,j=e):(i=d,j=g),c.enjoyhint.addClass(c.cl.svg_transparent),setTimeout(function(){a("#enjoyhint_arrpw_line").remove();var b="M"+d+","+e+" Q"+i+","+j+" "+f+","+g;c.$svg.append(q("path",{style:"fill:none; stroke:rgb(255,255,255); stroke-width:3","marker-end":"url(#arrowMarker)",d:b,id:"enjoyhint_arrpw_line"})),c.stepData.arrowColor?c.setMarkerColor(c.stepData.arrowColor):a("#poliline").css("stroke","rgb(255, 255, 255)"),c.enjoyhint.removeClass(c.cl.svg_transparent)},c.options.animation_time/2)},c.getLabelElement=function(b){return a("
",{class:"enjoy_hint_label",id:"enjoyhint_label"}).css({top:b.y+"px",left:b.x+"px"}).html(b.text).appendTo(c.enjoyhint)},c.disableEventsNearRect=function(a,b){var c=a.top,d=a.left,e=a.right,f=a.bottom;!0===b&&(c=f,e=d),w.css({top:"0",left:"0"}).height(c),x.css({top:f+"px",left:"0"}),y.css({top:"0",left:"0px"}).width(d),z.css({top:"0",left:e+"px"})},function(a){a.event.special.destroyed={remove:function(a){a.handler&&a.handler()}}}(a),c.renderLabelWithShape=function(b,d){function e(b){return"MD-DIALOG"===b.tagName?b:void 0===b.tagName?null:e(a(b).parent()[0])}c.stepData=b,c.customBtnProps=d;var f=e(a(c.stepData.enjoyHintElementSelector)[0]);null!=f&&a(f).on("dialogClosing",function(){c.stopFunction()}),c.resetComponentStuff();var g=b.shape||"rect",h={},i=0,j=0,k={top:b.top||0,bottom:b.bottom||0,left:b.left||0,right:b.right||0};switch(g){case"circle":i=j=b.radius;var l={top:b.center_y-j+k.top,bottom:b.center_y+j-k.bottom,left:b.center_x-i+k.left,right:b.center_x+i-k.right},m=l.right-l.left,n=l.bottom-l.top;b.radius=Math.round(Math.min(m,n)/2),i=j=Math.round(b.radius/2);var o=Math.round(m/2),p=Math.round(n/2);b.center_x=l.left+o,b.center_y=l.top+p,h=c.renderCircle({x:b.center_x,y:b.center_y,r:b.radius});break;case"rect":i=Math.round(b.width/2),j=Math.round(b.height/2);var l={top:b.center_y-j+k.top,bottom:b.center_y+j-k.bottom,left:b.center_x-i+k.left,right:b.center_x+i-k.right};b.width=l.right-l.left,b.height=l.bottom-l.top,i=Math.round(b.width/2),j=Math.round(b.height/2),b.center_x=l.left+i,b.center_y=l.top+j,h=c.renderRect({x:b.center_x,y:b.center_y,w:b.width,h:b.height,r:b.radius},.2)}var q={w:c.enjoyhint.width(),h:c.enjoyhint.height()},r=c.getLabelElement({x:0,y:0,text:b.text}),s=r.outerWidth(),t=r.outerHeight();r.remove();for(var u=b.center_y-j,v=q.h-(b.center_y+j),w=b.center_x-i,x=q.w-(b.center_x+i),y=window.innerHeight<670?130:150,z=window.innerHeight<670?0:40,A=y+t+z,B=j+y,C=[{name:"right_center",common_area:x*window.innerHeight,width:x,height:window.innerHeight},{name:"right_top",common_area:x*u,width:x,height:u},{name:"right_bottom",common_area:x*v,width:x,height:v},{name:"left_center",common_area:w*window.innerHeight,width:w,height:window.innerHeight},{name:"left_top",common_area:w*u,width:w,height:u},{name:"left_bottom",common_area:w*v,width:w,height:v},{name:"center_top",common_area:window.innerWidth*u,width:window.innerWidth,height:u},{name:"center_bottom",common_area:window.innerWidth*v,width:window.innerWidth,height:v}],D=s,E=window.innerHeight<=670?A:A+20,F=C.sort(function(a,b){return a.common_area-b.common_area}),G="oversized",H=0;HD&&J.height>E&&(G=I)}var K,L,M,N,O,P,Q="circle"===b.shape?2*b.radius:b.width?b.width:2*b.radius,R="circle"===b.shape?2*b.radius:b.height?b.height:2*b.radius,S=b.center_x+Q/2+80,T=b.center_x-s-Q/2-80,U=window.innerWidth/2-s/2,V=b.center_y-B-t,W=b.center_y+B,X=window.innerHeight/2-E/2+20,Y="hor";switch(G){case"center_top":L=V,K=U,M=b.center_x,N=b.center_y-R/2-20;break;case"center_bottom":L=W,K=U,M=b.center_x,N=b.center_y+R/2+20;break;case"left_center":L=X,K=T,M=b.center_x-Q/2-20,N=b.center_y,Y="ver";break;case"left_top":L=V,K=T,M=b.center_x-Q/2,N=b.center_y-20;break;case"left_bottom":L=W,K=T,M=b.center_x-Q/2,N=b.center_y+20,Y="ver";break;case"right_center":L=X,K=S,M=b.center_x+Q/2+20,N=b.center_y,Y="ver";break;case"right_top":L=V,K=S,M=b.center_x+Q/2,N=b.center_y-20;break;case"right_bottom":L=W,K=S,M=b.center_x+Q/2,N=b.center_y+20,Y="ver";break;case"oversized":setTimeout(function(){a("#enjoyhint_arrpw_line").remove(),a(".enjoy_hint_label").css({"border-radius":"20px","-webkit-border-radius":"20px","-moz-border-radius":"20px","background-color":"#272A26","-webkit-transition":"background-color ease-out 0.5s","-moz-transition":"background-color ease-out 0.5s","-o-transition":"background-color ease-out 0.5s",transition:"background-color ease-out 0.5s"})},450),L=X,K=U}O=K+s/2,P=b.center_y>L+t/2?L+t:L,b.center_y<0?N=20:b.center_y>window.innerHeight+20&&(N=window.innerHeight-20),b.center_y>=L&&b.center_y<=L+t&&(O=b.center_x>K?K+s:K,P=b.center_y),c.renderLabel({x:K,y:L,text:b.text}),setTimeout(function(){var a=c.$next_btn.width()+c.$skip_btn.width()+c.$prev_btn.width()+30,b=K-100,e=L+t+40;a+K>M&&(b=M>=O?M+20:K+s/2),(a+b>window.innerWidth||b<0)&&(b=10,e=P (window.innerHeight || document.documentElement.clientHeight)){ hideCurrentHint(); - $(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200}); + $(options.elementToScroll).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200}); } else { // if previous button has been clicked and element are in viewport to prevent custom step scrollAnimationSpeed set scrollSpeed to default @@ -186,6 +244,9 @@ if (step_data.showNext !== true) { $body.enjoyhint("hide_next"); } + else { + $body.enjoyhint("show_next"); + } $body.enjoyhint("hide_prev"); @@ -255,13 +316,20 @@ break; } } else { - $event_element.on(event, function(e) { - if (step_data.keyCode && e.keyCode != step_data.keyCode) { - return; - } - - current_step++; - stepAction(); // clicked + var alreadyTriggered = false; + $event_element.one(event, function (e) { //one should ensure that event is handled only once, but that's not always enough + if (alreadyTriggered) //make sure that the step is not changed twice handling the same event + return; + + alreadyTriggered = true; + if (step_data.keyCode && e.keyCode != step_data.keyCode) { + return; + } + + $event_element.off(event); //unregister the event + + current_step++; + stepAction(); //move to the next step }); } @@ -292,7 +360,8 @@ left: step_data.left, right: step_data.right, margin: step_data.margin, - scroll: step_data.scroll + scroll: step_data.scroll, + preventEvents: step_data.preventEvents }; var customBtnProps = { @@ -403,6 +472,7 @@ case "skip": skipAll(); + options.onSkip(); break; default: $body.trigger(makeEventName(event_name, true)); diff --git a/src/jquery.enjoyhint.js b/src/jquery.enjoyhint.js index 8042be4..6b599c5 100644 --- a/src/jquery.enjoyhint.js +++ b/src/jquery.enjoyhint.js @@ -322,7 +322,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { doit = setTimeout(function() { if(boundingClientRect.top < 0 || boundingClientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)){ - $(document.body).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize}); + $(that.options.elementToScroll).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize}); } else renderAfterResize(); }, 150); @@ -658,16 +658,27 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { .appendTo(that.enjoyhint); }; - that.disableEventsNearRect = function(rect) { + that.disableEventsNearRect = function(rect, alsoDisableRect) { + var top = rect.top; + var left = rect.left; + var right = rect.right; + var bottom = rect.bottom; + + //to disable events also within highlighted rectable, simply remove the gap + if (alsoDisableRect === true) { + top = bottom; + right = left; + } + $top_dis_events - .css({ - top: "0", - left: "0" - }) - .height(rect.top); + .css({ + top: "0", + left: "0" + }) + .height(top); $bottom_dis_events.css({ - top: rect.bottom + "px", + top: bottom + "px", left: "0" }); @@ -676,11 +687,11 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { top: "0", left: 0 + "px" }) - .width(rect.left); + .width(left); $right_dis_events.css({ top: "0", - left: rect.right + "px" + left: right + "px" }); }; @@ -1036,7 +1047,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { bottom: shape_data.bottom, left: shape_data.left, right: shape_data.right - }); + }, data.preventEvents); that.renderArrow({ x_from: x_from,