diff --git a/README.md b/README.md index 0b9aca5..c7577a7 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ var enjoyhint_script_steps = [ * `arrowColor` - the color of a marker that accepts all CSS colors. * `keyCode` - the code of a button, which triggers the next EnjoyHint step upon a click. Defined by the “key” event. (“key #block” : “hello”). * `event_selector` - if you need to attach an event (that was set in "event" property) to other selector, you can use this one +* `disableSelector` - disables any interaction with the element. The user is forced to use the "Next" or the "Skip" buttons. * `timeout` - delay before the moment, when an element is highlighted * `shape` - shape for highlighting (circle|rect) * `radius` - if the shape of "circle" is specified, we can set the radius. @@ -98,13 +99,15 @@ var enjoyhint_script_steps = [ * `scrollAnimationSpeed` - sets the auto scroll speed (ms). * `nextButton` - allows applying its classes and names for the button Nеxt. * `skipButton` - allows applying its classes and names for the button Skip. -* `prevButton` - allows applying its classes and names for the button Previous. For the example : +* `prevButton` - allows applying its classes and names for the button Previous. +* `closeButton` - allows applying its classes for the button Close (×). For the example : ```javascript var options = { "next #block": 'Hello.', "nextButton" : {className: "myNext", text: "myNEXT"}, "skipButton" : {className: "mySkip", text: "mySKIP"}, - "prevButton" : {className: "myPrev", text: "myPREV"} + "prevButton" : {className: "myPrev", text: "myPREV"}, + "closeButton" : {className: "myClose"}, } ``` * `showSkip` - shows or hides the Skip button (true|false) @@ -133,12 +136,14 @@ $.get('/load/some_data', function(data){ * `run` - run the current script. Has no arguments * `resume` - resume the script from the step where it was stopped. Has no arguments * `getCurrentStep` - returns the current step index -* `trigger` - After writing this code you can either move to the next step or finish with EnjoyHint (next|skip) +* `trigger` - after writing this code you can either move to the next step or finish with EnjoyHint (next|skip) +* `skip` - hide the current script. Has no arguments +* `destroy` - destroy the enjoyHint. Has no arguments #### Events **Script Events**: * `onStart` - fires on the first step. -* `onEnd` - fires after the last step in script. +* `onEnd` - fires after the last step in script and click close button. * `onSkip` - fires after user has clicked skip. ```javascript var enjoyhint_instance = new EnjoyHint({ @@ -166,9 +171,13 @@ var enjoyhint_script_steps = [ ##### v.4 +* Fixed bugs with "Next" button * Fixed label position bugs * Fixed arrow position bugs * Fixed resize bugs +* Added possibility to disable selector +* Added possibility to customize close button +* Added method to destroy hint instance * Added responsive design * Added mobile support * Added possibility to go back to previous step diff --git a/enjoyhint.css b/enjoyhint.css index 2daaffc..e98758f 100644 --- a/enjoyhint.css +++ b/enjoyhint.css @@ -1 +1 @@ -@font-face{font-family:casino_handregular;src:url(src/Casino_Hand/casino_hand-webfont.eot);src:url(src/Casino_Hand/casino_hand-webfont.eot?#iefix) format("embedded-opentype"),url(src/Casino_Hand/casino_hand-webfont.woff) format("woff"),url(src/Casino_Hand/casino_hand-webfont.ttf) format("truetype"),url(src/Casino_Hand/casino_hand-webfont.svg#casino_handregular) format("svg");font-weight:400;font-style:normal}.enjoyhint{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1010;pointer-events:none;overflow:hidden}.enjoyhint_hide{display:none}.enjoyhint_disable_events{position:absolute;width:2000px;height:1500px;z-index:1011;pointer-events:all}.enjoyhint_next_btn,.enjoyhint_prev_btn,.enjoyhint_skip_btn{min-width:100px;-webkit-box-sizing:content-box;height:40px;font:normal normal normal 17px/40px "Advent Pro",Helvetica,sans-serif;cursor:pointer;margin:0 auto;letter-spacing:1px;text-align:center}.enjoyhint_next_btn,.enjoyhint_prev_btn{position:absolute;z-index:1012;pointer-events:all;-moz-box-sizing:content-box;box-sizing:content-box;border:2px solid #1ecd97;-webkit-border-radius:40px;border-radius:40px;color:#1ecd97;-o-text-overflow:clip;text-overflow:clip;background:rgba(0,0,0,0);-webkit-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-moz-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-o-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0)}.enjoyhint_close_btn,.enjoyhint_skip_btn{z-index:1012;pointer-events:all;-moz-box-sizing:content-box;-o-text-overflow:clip;text-overflow:clip}.enjoyhint_prev_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_prev_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint_next_btn:active,.enjoyhint_skip_btn:active{-webkit-transition:none;-moz-transition:none;-o-transition:none}.enjoyhint_next_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_next_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);transition:none}.enjoyhint_skip_btn{box-sizing:content-box;border:2px solid #1ecd97;-webkit-border-radius:40px;border-radius:40px;color:#1ecd97;background:rgba(0,0,0,0);-webkit-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-moz-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-o-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0)}.enjoyhint_skip_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_skip_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);transition:none}.enjoyhint_close_btn{display:inline-block;position:absolute;-webkit-box-sizing:content-box;box-sizing:content-box;width:.3em;height:.3em;border:none;-webkit-border-radius:1em;border-radius:1em;font:400 8em/normal Arial,Helvetica,sans-serif;color:rgba(0,0,0,1);background:rgba(0,0,0,0);border:2px solid rgba(33,224,163,1)}.enjoyhint_close_btn::after,.enjoyhint_close_btn::before{display:inline-block;-moz-box-sizing:content-box;width:73%;height:2px;position:absolute;content:"";border:none;font:400 100%/normal Arial,Helvetica,sans-serif;color:rgba(0,0,0,1);background:#fff;text-shadow:none}.enjoyhint_close_btn::before{-webkit-box-sizing:content-box;box-sizing:content-box;top:48%;left:14%;-o-text-overflow:clip;text-overflow:clip;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.enjoyhint_btn,.enjoyhint_close_btn::after{-webkit-box-sizing:content-box;-o-text-overflow:clip;text-overflow:clip}.enjoyhint_close_btn::after{box-sizing:content-box;top:46%;left:15%;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}.enjoyhint_close_btn:hover{color:rgba(255,255,255,1);background:#1ecd97;cursor:pointer}.enjoyhint_close_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint_btn{-moz-box-sizing:content-box;box-sizing:content-box;width:150px;height:40px;cursor:pointer;margin:0 auto;border:2px solid #1ecd97;-webkit-border-radius:40px;border-radius:40px;font:normal normal normal 17px/40px "Advent Pro",Helvetica,sans-serif;color:#1ecd97;text-align:center;letter-spacing:1px;background:rgba(0,0,0,0);-webkit-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-moz-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-o-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0)}#kinetic_container,.enjoyhint_canvas,.enjoyhint_svg_wrapper,.enjoyhint_svg_wrapper svg{width:100%;height:100%;position:absolute}.enjoyhint_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint div.canvas-container{position:absolute}.enjoyhint_canvas{z-index:100;pointer-events:none}#kinetic_container{pointer-events:none;top:0;left:0}.enjoyhint_svg_wrapper{top:0;left:0;z-index:100;-webkit-transition:opacity .4s cubic-bezier(.42,0,.58,1);-moz-transition:opacity .4s cubic-bezier(.42,0,.58,1);transition:opacity .4s cubic-bezier(.42,0,.58,1)}.enjoyhint_svg_wrapper svg{top:0;left:0}.enjoyhint_svg_transparent .enjoy_hint_label,.enjoyhint_svg_transparent .enjoyhint_svg_wrapper{opacity:0}.enjoy_hint_label{position:absolute;overflow:hidden;color:#fff;z-index:107;font-size:22px;font-family:casino_handregular,Arial;-webkit-transition:opacity .4s cubic-bezier(.42,0,.58,1);-moz-transition:opacity .4s cubic-bezier(.42,0,.58,1);transition:opacity .4s cubic-bezier(.42,0,.58,1)}@media (max-width :640px){.enjoy_hint_label{font-size:16px}.enjoyhint_next_btn,.enjoyhint_prev_btn{font-size:200%;color:#FFF;line-height:1.2em;min-width:0;width:35px;height:35px;-webkit-border-radius:50%;border-radius:50%}.enjoyhint_skip_btn{display:none}}div.kineticjs-content{position:absolute!important}.enjoyhint_skip_btn{position:fixed}.enjoy_hint_label{display:inline-block;text-align:center;max-width:80%} \ No newline at end of file +.enjoyhint_next_btn,.enjoyhint_prev_btn,.enjoyhint_skip_btn{min-width:100px;-webkit-box-sizing:content-box;font:normal normal normal 17px/40px "Advent Pro",Helvetica,sans-serif;cursor:pointer;text-align:center}@font-face{font-family:casino_handregular;src:url(src/Casino_Hand/casino_hand-webfont.eot);src:url(src/Casino_Hand/casino_hand-webfont.eot?#iefix) format("embedded-opentype"),url(src/Casino_Hand/casino_hand-webfont.woff) format("woff"),url(src/Casino_Hand/casino_hand-webfont.ttf) format("truetype"),url(src/Casino_Hand/casino_hand-webfont.svg#casino_handregular) format("svg");font-weight:400;font-style:normal}.enjoyhint{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1010;pointer-events:none;overflow:hidden}.enjoyhint_hide{display:none}.enjoyhint_disable_events{position:absolute;width:2000px;height:1500px;z-index:1011;pointer-events:all}.enjoyhint_close_btn,.enjoyhint_next_btn,.enjoyhint_prev_btn,.enjoyhint_skip_btn{z-index:1012;pointer-events:all;-o-text-overflow:clip;text-overflow:clip}.enjoyhint_next_btn,.enjoyhint_prev_btn{position:absolute;-moz-box-sizing:content-box;box-sizing:content-box;height:40px;margin:0 auto;border:2px solid #1ecd97;-webkit-border-radius:40px;border-radius:40px;color:#1ecd97;letter-spacing:1px;background:rgba(0,0,0,0);-webkit-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-moz-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-o-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0)}.enjoyhint_prev_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_prev_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint_next_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_next_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint_skip_btn{-moz-box-sizing:content-box;box-sizing:content-box;height:40px;margin:0 auto;border:2px solid #1ecd97;-webkit-border-radius:40px;border-radius:40px;color:#1ecd97;letter-spacing:1px;background:rgba(0,0,0,0);-webkit-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-moz-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-o-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0)}.enjoyhint_skip_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_skip_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint_close_btn{display:inline-block;position:absolute;right:10px;top:10px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;width:.3em;height:.3em;border:none;-webkit-border-radius:1em;border-radius:1em;font:400 8em/normal Arial,Helvetica,sans-serif;color:rgba(0,0,0,1);background:rgba(0,0,0,0);border:2px solid rgba(33,224,163,1)}.enjoyhint_close_btn::after,.enjoyhint_close_btn::before{width:73%;position:absolute;content:"";border:none;background:#fff;text-shadow:none}.enjoyhint_close_btn::before{display:inline-block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:2px;top:48%;left:14%;font:400 100%/normal Arial,Helvetica,sans-serif;color:rgba(0,0,0,1);-o-text-overflow:clip;text-overflow:clip;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.enjoyhint_btn,.enjoyhint_close_btn::after{-webkit-box-sizing:content-box;-o-text-overflow:clip;text-overflow:clip}.enjoyhint_close_btn::after{display:inline-block;-moz-box-sizing:content-box;box-sizing:content-box;height:2px;top:46%;left:15%;font:400 100%/normal Arial,Helvetica,sans-serif;color:rgba(0,0,0,1);-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}.enjoyhint_close_btn:hover{color:rgba(255,255,255,1);background:#1ecd97;cursor:pointer}.enjoyhint_close_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint_btn{-moz-box-sizing:content-box;box-sizing:content-box;width:150px;height:40px;cursor:pointer;margin:0 auto;border:2px solid #1ecd97;-webkit-border-radius:40px;border-radius:40px;font:normal normal normal 17px/40px "Advent Pro",Helvetica,sans-serif;color:#1ecd97;text-align:center;letter-spacing:1px;background:rgba(0,0,0,0);-webkit-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-moz-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);-o-transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0);transition:background-color .3s cubic-bezier(0,0,0,0),color .3s cubic-bezier(0,0,0,0),width .3s cubic-bezier(0,0,0,0),border-width .3s cubic-bezier(0,0,0,0),border-color .3s cubic-bezier(0,0,0,0)}#kinetic_container,.enjoyhint_canvas,.enjoyhint_svg_wrapper,.enjoyhint_svg_wrapper svg{width:100%;height:100%;position:absolute}.enjoyhint_btn:hover{color:rgba(255,255,255,1);background:#1ecd97}.enjoyhint_btn:active{border:2px solid rgba(33,224,163,1);background:rgba(33,224,163,1);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.enjoyhint div.canvas-container{position:absolute}.enjoyhint_canvas{z-index:100;pointer-events:none}#kinetic_container{pointer-events:none;top:0;left:0}.enjoyhint_svg_wrapper{top:0;left:0;z-index:100;-webkit-transition:opacity .4s cubic-bezier(.42,0,.58,1);-moz-transition:opacity .4s cubic-bezier(.42,0,.58,1);transition:opacity .4s cubic-bezier(.42,0,.58,1)}.enjoyhint_svg_wrapper svg{top:0;left:0}.enjoyhint_svg_transparent .enjoy_hint_label,.enjoyhint_svg_transparent .enjoyhint_svg_wrapper{opacity:0}.enjoy_hint_label{position:absolute;overflow:hidden;color:#fff;z-index:107;font-size:22px;font-family:casino_handregular,Arial;-webkit-transition:opacity .4s cubic-bezier(.42,0,.58,1);-moz-transition:opacity .4s cubic-bezier(.42,0,.58,1);transition:opacity .4s cubic-bezier(.42,0,.58,1)}@media (max-width :640px){.enjoy_hint_label{font-size:16px}.enjoyhint_next_btn,.enjoyhint_prev_btn{font-size:200%;color:#FFF;line-height:1.2em;min-width:0;width:35px;height:35px;-webkit-border-radius:50%;border-radius:50%}.enjoyhint_skip_btn{display:none}}div.kineticjs-content{position:absolute!important}.enjoyhint_skip_btn{position:fixed}.enjoy_hint_label{display:inline-block;text-align:center;max-width:80%} \ No newline at end of file diff --git a/enjoyhint.js b/enjoyhint.js index a7dea2d..d25a1e6 100644 --- a/enjoyhint.js +++ b/enjoyhint.js @@ -70,22 +70,28 @@ e.preventDefault(); }; + var hideEnjoy = function () { + $body.css({overflow: "auto"}); + $(document).off("touchmove", lockTouch); + } + var destroyEnjoy = function() { $(".enjoyhint").remove(); - $body.css({ overflow: "auto" }); - $(document).off("touchmove", lockTouch); + hideEnjoy(); }; that.clear = function() { var $nextBtn = $(".enjoyhint_next_btn"); var $skipBtn = $(".enjoyhint_skip_btn"); var $prevBtn = $(".enjoyhint_prev_btn"); + var $closeBtn = $(".enjoyhint_close_btn"); $prevBtn.removeClass(that.prevUserClass); $nextBtn.removeClass(that.nextUserClass); - $nextBtn.text(BTN_NEXT_TEXT); $skipBtn.removeClass(that.skipUserClass); + $nextBtn.text(BTN_NEXT_TEXT); $skipBtn.text(BTN_SKIP_TEXT); + $closeBtn.removeClass(that.closeUserClass); }; function hideCurrentHint(){ @@ -101,7 +107,7 @@ if (!(data && data[current_step])) { $body.enjoyhint("hide"); options.onEnd(); - destroyEnjoy(); + hideEnjoy(); return; } @@ -151,7 +157,12 @@ that.clear(); }, 250); - var isHintInViewport = $(step_data.selector).get(0).getBoundingClientRect(); + var stepSelector = $(step_data.selector).get(0); + if (stepSelector && stepSelector.clientHeight && stepSelector.clientWidth) { + var isHintInViewport = stepSelector.getBoundingClientRect(); + } else { + return console.log("Error: Element position couldn't be reached"); + } if(isHintInViewport.top < 0 || isHintInViewport.bottom > (window.innerHeight || document.documentElement.clientHeight)){ hideCurrentHint(); $(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200}); @@ -186,6 +197,9 @@ if (step_data.showNext !== true) { $body.enjoyhint("hide_next"); } + else { + $body.enjoyhint("show_next"); + } $body.enjoyhint("hide_prev"); @@ -227,6 +241,13 @@ $skipBtn.text(step_data.skipButton.text || "Skip"); that.skipUserClass = step_data.skipButton.className; } + + if (step_data.closeButton) { + var $closeBtn = $(".enjoyhint_close_btn"); + + $closeBtn.addClass(step_data.closeButton.className || ""); + that.closeUserClass = step_data.closeButton.className; + } if (step_data.event_type) { switch (step_data.event_type) { @@ -292,17 +313,19 @@ left: step_data.left, right: step_data.right, margin: step_data.margin, - scroll: step_data.scroll + scroll: step_data.scroll, + disableSelector: step_data.disableSelector, }; var customBtnProps = { nextButton: step_data.nextButton, - prevButton: step_data.prevButton + prevButton: step_data.prevButton, + skipButton: step_data.skipButton } if (shape_data.center_x === 0 && shape_data.center_y === 0) { $body.enjoyhint("hide"); - destroyEnjoy(); + hideEnjoy(); return console.log("Error: Element position couldn't be reached"); } @@ -338,7 +361,7 @@ off(step_data.event); $element.off(makeEventName(step_data.event)); - destroyEnjoy(); + hideEnjoy(); }; var makeEventName = function(name, is_custom) { @@ -368,7 +391,7 @@ false ); - that.stop = function() { + that.skip = function() { skipAll(); }; @@ -386,6 +409,10 @@ that.resumeScript = function() { stepAction(); }; + + that.destroyScript = function () { + destroyEnjoy(); + } that.setCurrentStep = function(cs) { current_step = cs; @@ -436,6 +463,10 @@ that.resume = function() { that.resumeScript(); }; + + that.destroy = function () { + that.destroyScript(); + } init(); }; @@ -443,7 +474,7 @@ }) -;CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { +;CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { if (w < 2 * r) r = w / 2; if (h < 2 * r) r = h / 2; this.beginPath(); @@ -456,19 +487,19 @@ return this; }; -(function(factory) { +(function (factory) { 'use strict'; - if (typeof define === 'function' && define.amd) { - // AMD - define(['jquery', 'kinetic'], factory); - } else if (typeof module !== 'undefined' && module.exports) { - // CommonJS - module.exports = factory(require('jquery'), require('kinetic')); - } else { - // Global - factory(jQuery, Kinetic); - } -})(function($, Kinetic) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery', 'kinetic'], factory); + } else if (typeof module !== 'undefined' && module.exports) { + // CommonJS + module.exports = factory(require('jquery'), require('kinetic')); + } else { + // Global + factory(jQuery, Kinetic); + } +})(function ($, Kinetic) { var that; var originalLabelLeft, originalLabelTop; var originalArrowLeft, originalArrowTop; @@ -479,12 +510,12 @@ originalHeight = window.innerHeight; var methods = { - init: function(options) { - return this.each(function() { + init: function (options) { + return this.each(function () { var defaults = { - onNextClick: function() {}, - onSkipClick: function() {}, - onPrevClick: function() {}, + onNextClick: function () {}, + onSkipClick: function () {}, + onPrevClick: function () {}, animation_time: 800 }; @@ -492,7 +523,7 @@ this.enjoyhint_obj = {}; that = this.enjoyhint_obj; - that.resetComponentStuff = function() { + that.resetComponentStuff = function () { originalLabelLeft = null; originalLabelTop = null; originalArrowLeft = null; @@ -564,25 +595,25 @@ ).appendTo(that.enjoyhint); that.$canvas = $( '' + canvas_id + + '" width="' + + that.canvas_size.w + + '" height="' + + that.canvas_size.h + + '" class="' + + that.cl.main_canvas + + '">' ).appendTo(that.enjoyhint); that.$svg = $( '' + that.canvas_size.w + + '" height="' + + that.canvas_size.h + + '" class="' + + that.cl.main_canvas + + " " + + that.cl.main_svg + + '">' ).appendTo(that.enjoyhint_svg_wrapper); var defs = $(makeSVG("defs")); @@ -634,7 +665,7 @@ .clone() .appendTo(that.enjoyhint); - var stopPropagation = function(e) { + var stopPropagation = function (e) { e.stopImmediatePropagation(); }; @@ -644,42 +675,54 @@ $left_dis_events.click(stopPropagation); $right_dis_events.click(stopPropagation); - that.$skip_btn = $("
", { class: that.cl.skip_btn }) + that.$skip_btn = $("
", { + class: that.cl.skip_btn + }) .appendTo(that.enjoyhint) .html("Skip") - .click(function(e) { + .click(function (e) { that.hide(); that.options.onSkipClick(); }); - that.$next_btn = $("
", { class: that.cl.next_btn }) + that.$next_btn = $("
", { + class: that.cl.next_btn + }) .appendTo(that.enjoyhint) .html("Next") - .click(function(e) { + .click(function (e) { that.options.onNextClick(); }); - that.$close_btn = $("
", { class: that.cl.close_btn }) + that.$close_btn = $("
", { + class: that.cl.close_btn + }) .appendTo(that.enjoyhint) .html("") - .click(function(e) { + .click(function (e) { that.hide(); that.options.onSkipClick(); }); - that.$prev_btn = $("
", { class: that.cl.previous_btn }) + that.$prev_btn = $("
", { + class: that.cl.previous_btn + }) .appendTo(that.enjoyhint) .html("Previous") - .click(function(e) { + .click(function (e) { that.options.onPrevClick(); }); - that.$canvas.mousedown(function(e) { - $("canvas").css({ left: "4000px" }); + that.$canvas.mousedown(function (e) { + $("canvas").css({ + left: "4000px" + }); var BottomElement = document.elementFromPoint(e.clientX, e.clientY); - $("canvas").css({ left: "0px" }); + $("canvas").css({ + left: "0px" + }); $(BottomElement).click(); @@ -695,7 +738,7 @@ center_y: -shape_init_shift, width: 0, height: 0, - sceneFunc: function(context) { + sceneFunc: function (context) { var ctx = this.getContext("2d")._context; var pos = this.pos; var def_comp = ctx.globalCompositeOperation; @@ -725,7 +768,7 @@ var doit; - $(window).on("resize", function() { + $(window).on("resize", function () { clearTimeout(doit); $('.enjoyhint_next_btn').css('visibility', 'hidden'); $('.enjoyhint_prev_btn').css('visibility', 'hidden'); @@ -741,7 +784,7 @@ var boundingClientRect = $( that.stepData.enjoyHintElementSelector )[0].getBoundingClientRect(); - + that.shape.attrs.center_x = Math.round( boundingClientRect.left + boundingClientRect.width / 2 ); @@ -751,11 +794,11 @@ that.shape.attrs.width = boundingClientRect.width + 11; that.shape.attrs.height = boundingClientRect.height + 11; - function renderAfterResize(){ + function renderAfterResize() { var newDataCoords = $(that.stepData.enjoyHintElementSelector).get(0).getBoundingClientRect(); - that.stepData.center_x = newDataCoords.left + newDataCoords.width/2; - that.stepData.center_y = newDataCoords.top + newDataCoords.height/2; + that.stepData.center_x = newDataCoords.left + newDataCoords.width / 2; + that.stepData.center_y = newDataCoords.top + newDataCoords.height / 2; that.stepData.width = newDataCoords.width + 11; that.stepData.height = newDataCoords.height + 11; @@ -765,11 +808,13 @@ $('.enjoyhint_skip_btn').css('visibility', 'visible'); } - 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}); - } - else renderAfterResize(); + 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 + }); + } else renderAfterResize(); }, 150); @@ -801,11 +846,11 @@ $right_dis_events ]; - that.show = function() { + that.show = function () { that.enjoyhint.removeClass(that.cl.hide); }; - that.hide = function() { + that.hide = function () { that.enjoyhint.addClass(that.cl.hide); var tween = new Kinetic.Tween({ @@ -820,35 +865,35 @@ that.hide(); - that.hideNextBtn = function() { + that.hideNextBtn = function () { that.$next_btn.addClass(that.cl.hide); that.nextBtn = "hide"; }; - that.hidePrevBtn = function() { + that.hidePrevBtn = function () { that.$prev_btn.addClass(that.cl.hide); that.prevBtn = "hide"; }; - that.showPrevBtn = function() { + that.showPrevBtn = function () { that.$prev_btn.removeClass(that.cl.hide); that.prevBtn = "show"; }; - that.showNextBtn = function() { + that.showNextBtn = function () { that.$next_btn.removeClass(that.cl.hide); that.nextBtn = "show"; }; - that.hideSkipBtn = function() { + that.hideSkipBtn = function () { that.$skip_btn.addClass(that.cl.hide); }; - that.showSkipBtn = function() { + that.showSkipBtn = function () { that.$skip_btn.removeClass(that.cl.hide); }; - that.renderCircle = function(data) { + that.renderCircle = function (data) { var r = data.r || 0; var x = data.x || 0; var y = data.y || 0; @@ -899,7 +944,7 @@ }; }; - that.renderRect = function(data, timeout) { + that.renderRect = function (data, timeout) { var r = data.r || 0; var x = data.x || 0; var y = data.y || 0; @@ -954,7 +999,7 @@ }; }; - that.renderLabel = function(data) { + that.renderLabel = function (data) { var x = data.x || 0; that.originalElementX = x; var y = data.y || 0; @@ -997,7 +1042,7 @@ label.detach(); - setTimeout(function() { + setTimeout(function () { $("#enjoyhint_label").remove(); label.appendTo(that.enjoyhint); }, that.options.animation_time / 2); @@ -1017,25 +1062,25 @@ }; }; - that.setMarkerColor = function(color){ + that.setMarkerColor = function (color) { - function isValidColor(value) { - const temp = new Option().style; - temp.color = value; - return temp.color !== ''; - } + function isValidColor(value) { + const temp = new Option().style; + temp.color = value; + return temp.color !== ''; + } - if (isValidColor(color)){ - return [$("#poliline"), $("#enjoyhint_arrpw_line")].forEach(function(element){ - element.css("stroke", color); - }); - } + if (isValidColor(color)) { + return [$("#poliline"), $("#enjoyhint_arrpw_line")].forEach(function (element) { + element.css("stroke", color); + }); + } - $("#poliline").css("stroke", "rgb(255,255,255)") - console.log("Error: invalid color name property - " + color); + $("#poliline").css("stroke", "rgb(255,255,255)") + console.log("Error: invalid color name property - " + color); } - that.renderArrow = function(data) { + that.renderArrow = function (data) { var x_from = data.x_from || 0; var y_from = data.y_from || 0; var x_to = data.x_to || 0; @@ -1043,21 +1088,20 @@ var by_top_side = data.by_top_side; var control_point_x = 0; var control_point_y = 0; - + if (by_top_side === 'hor') { control_point_x = x_to control_point_y = y_from - } - else { + } else { control_point_x = x_from control_point_y = y_to } that.enjoyhint.addClass(that.cl.svg_transparent); - setTimeout(function() { + setTimeout(function () { $("#enjoyhint_arrpw_line").remove(); - + var d = "M" + x_from + @@ -1080,21 +1124,21 @@ }) ); - if(that.stepData.arrowColor) { - that.setMarkerColor(that.stepData.arrowColor) + if (that.stepData.arrowColor) { + that.setMarkerColor(that.stepData.arrowColor) } else { - $("#poliline").css("stroke", "rgb(255, 255, 255)"); + $("#poliline").css("stroke", "rgb(255, 255, 255)"); } that.enjoyhint.removeClass(that.cl.svg_transparent); }, that.options.animation_time / 2); }; - that.getLabelElement = function(data) { + that.getLabelElement = function (data) { return $("
", { - class: "enjoy_hint_label", - id: "enjoyhint_label" - }) + class: "enjoy_hint_label", + id: "enjoyhint_label" + }) .css({ top: data.y + "px", left: data.x + "px" @@ -1103,16 +1147,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); + .height(top); $bottom_dis_events.css({ - top: rect.bottom + "px", + top: bottom + "px", left: "0" }); @@ -1121,17 +1176,17 @@ top: "0", left: 0 + "px" }) - .width(rect.left); + .width(left); $right_dis_events.css({ top: "0", - left: rect.right + "px" + left: right + "px" }); }; - (function($) { + (function ($) { $.event.special.destroyed = { - remove: function(o) { + remove: function (o) { if (o.handler) { o.handler(); } @@ -1139,7 +1194,7 @@ }; })($); - that.renderLabelWithShape = function(data, customBtnProps) { + that.renderLabelWithShape = function (data, customBtnProps) { that.stepData = data; that.customBtnProps = customBtnProps; @@ -1158,7 +1213,7 @@ ); if (dialog != null) { - $(dialog).on("dialogClosing", function() { + $(dialog).on("dialogClosing", function () { that.stopFunction(); return; }); @@ -1233,8 +1288,7 @@ data.center_x = sides_pos.left + half_w; data.center_y = sides_pos.top + half_h; - shape_data = that.renderRect( - { + shape_data = that.renderRect({ x: data.center_x, y: data.center_y, w: data.width, @@ -1272,32 +1326,73 @@ label_shift + label_height + label_margin; var label_ver_offset = half_h + label_shift; - var areas_for_label = [ - {name: 'right_center', common_area: right_offset * window.innerHeight, width: right_offset, height: window.innerHeight}, - {name: 'right_top', common_area: right_offset * top_offset, width: right_offset, height: top_offset}, - {name: 'right_bottom', common_area: right_offset * bottom_offset, width: right_offset, height: bottom_offset}, - {name: 'left_center', common_area: left_offset * window.innerHeight, width: left_offset, height: window.innerHeight}, - {name: 'left_top', common_area: left_offset * top_offset, width: left_offset, height: top_offset}, - {name: 'left_bottom', common_area: left_offset * bottom_offset, width: left_offset, height: bottom_offset}, - {name: 'center_top', common_area: window.innerWidth * top_offset, width: window.innerWidth, height: top_offset}, - {name: 'center_bottom', common_area: window.innerWidth * bottom_offset, width: window.innerWidth, height: bottom_offset}, + var areas_for_label = [{ + name: 'right_center', + common_area: right_offset * window.innerHeight, + width: right_offset, + height: window.innerHeight + }, + { + name: 'right_top', + common_area: right_offset * top_offset, + width: right_offset, + height: top_offset + }, + { + name: 'right_bottom', + common_area: right_offset * bottom_offset, + width: right_offset, + height: bottom_offset + }, + { + name: 'left_center', + common_area: left_offset * window.innerHeight, + width: left_offset, + height: window.innerHeight + }, + { + name: 'left_top', + common_area: left_offset * top_offset, + width: left_offset, + height: top_offset + }, + { + name: 'left_bottom', + common_area: left_offset * bottom_offset, + width: left_offset, + height: bottom_offset + }, + { + name: 'center_top', + common_area: window.innerWidth * top_offset, + width: window.innerWidth, + height: top_offset + }, + { + name: 'center_bottom', + common_area: window.innerWidth * bottom_offset, + width: window.innerWidth, + height: bottom_offset + }, ]; var label_horizontal_space_required = label_width; var label_vertical_space_required = window.innerHeight <= 670 ? label_shift_with_label_height : label_shift_with_label_height + 20; var areas_priority = areas_for_label - .sort(function(area1, area2){return area1.common_area - area2.common_area}) + .sort(function (area1, area2) { + return area1.common_area - area2.common_area + }) var label_hor_side = 'oversized'; for (var i = 0; i < areas_priority.length; i++) { - var name = areas_priority[i].name; - var area = areas_priority[i] - if ( - area.width > label_horizontal_space_required - && area.height > label_vertical_space_required - ) { - label_hor_side = name; - } + var name = areas_priority[i].name; + var area = areas_priority[i] + if ( + area.width > label_horizontal_space_required && + area.height > label_vertical_space_required + ) { + label_hor_side = name; + } } var data_width_size = data.shape === "circle" ? data.radius * 2 : @@ -1306,72 +1401,72 @@ var data_height_size = data.shape === "circle" ? data.radius * 2 : data.height ? data.height : data.radius * 2; - var right_position = data.center_x + data_width_size/2 + 80; - var left_position = data.center_x - label_width - data_width_size/2 - 80; + var right_position = data.center_x + data_width_size / 2 + 80; + var left_position = data.center_x - label_width - data_width_size / 2 - 80; var central_position = window.innerWidth / 2 - label_width / 2; var top_position = data.center_y - label_ver_offset - label_height; var bottom_position = data.center_y + label_ver_offset; - var central_ver_position = window.innerHeight/2 - label_vertical_space_required/2 + 20; - + var central_ver_position = window.innerHeight / 2 - label_vertical_space_required / 2 + 20; + var label_x, label_y, x_to, y_to, x_from, y_from; - + var by_top_side = "hor" - switch(label_hor_side) { + switch (label_hor_side) { case "center_top": - label_y = top_position; - label_x = central_position; - x_to = data.center_x; - y_to = data.center_y - data_height_size/2 - 20; - break; + label_y = top_position; + label_x = central_position; + x_to = data.center_x; + y_to = data.center_y - data_height_size / 2 - 20; + break; case "center_bottom": - label_y = bottom_position; - label_x = central_position; - x_to = data.center_x; - y_to = data.center_y + data_height_size/2 + 20; - break; + label_y = bottom_position; + label_x = central_position; + x_to = data.center_x; + y_to = data.center_y + data_height_size / 2 + 20; + break; case 'left_center': - label_y = central_ver_position; - label_x = left_position; - x_to = data.center_x - data_width_size/2 - 20; - y_to = data.center_y; - by_top_side = "ver"; - break; + label_y = central_ver_position; + label_x = left_position; + x_to = data.center_x - data_width_size / 2 - 20; + y_to = data.center_y; + by_top_side = "ver"; + break; case 'left_top': - label_y = top_position; - label_x = left_position; - x_to = data.center_x - data_width_size/2; - y_to = data.center_y - 20; - break; + label_y = top_position; + label_x = left_position; + x_to = data.center_x - data_width_size / 2; + y_to = data.center_y - 20; + break; case 'left_bottom': - label_y = bottom_position; - label_x = left_position; - x_to = data.center_x - data_width_size/2; - y_to = data.center_y + 20; - by_top_side = "ver"; - break; + label_y = bottom_position; + label_x = left_position; + x_to = data.center_x - data_width_size / 2; + y_to = data.center_y + 20; + by_top_side = "ver"; + break; case 'right_center': - label_y = central_ver_position; - label_x = right_position; - x_to = data.center_x + data_width_size/2 + 20; - y_to = data.center_y; - by_top_side = "ver"; - break; + label_y = central_ver_position; + label_x = right_position; + x_to = data.center_x + data_width_size / 2 + 20; + y_to = data.center_y; + by_top_side = "ver"; + break; case 'right_top': - label_y = top_position; - label_x = right_position; - x_to = data.center_x + data_width_size/2; - y_to = data.center_y - 20; - break; + label_y = top_position; + label_x = right_position; + x_to = data.center_x + data_width_size / 2; + y_to = data.center_y - 20; + break; case 'right_bottom': - label_y = bottom_position; - label_x = right_position; - x_to = data.center_x + data_width_size/2; - y_to = data.center_y + 20; - by_top_side = "ver"; - break; + label_y = bottom_position; + label_x = right_position; + x_to = data.center_x + data_width_size / 2; + y_to = data.center_y + 20; + by_top_side = "ver"; + break; case 'oversized': - setTimeout(function(){ + setTimeout(function () { $("#enjoyhint_arrpw_line").remove(); $('.enjoy_hint_label').css({ 'border-radius': '20px', @@ -1384,23 +1479,22 @@ 'transition': 'background-color ease-out 0.5s' }) }, 450) - label_y = central_ver_position - label_x = central_position; - break; + label_y = central_ver_position + label_x = central_position; + break; } - x_from = label_x + label_width/2; - y_from = (data.center_y > label_y + label_height/2) ? label_y + label_height : label_y; + x_from = label_x + label_width / 2; + y_from = (data.center_y > label_y + label_height / 2) ? label_y + label_height : label_y; // if data center out of window y scale - if(data.center_y < 0) { + if (data.center_y < 0) { y_to = 20 - } - else if ( data.center_y > window.innerHeight + 20 ) { + } else if (data.center_y > window.innerHeight + 20) { y_to = window.innerHeight - 20 }; // if element at the same position as hint - if(data.center_y >= label_y && data.center_y <= label_y + label_height) { + if (data.center_y >= label_y && data.center_y <= label_y + label_height) { x_from = data.center_x > label_x ? label_x + label_width : label_x; y_from = data.center_y; } @@ -1411,15 +1505,15 @@ text: data.text }); - setTimeout(function(){ + setTimeout(function () { var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + that.$prev_btn.width() + 30; var distance = label_x - 100; var ver_button_position = label_y + label_height + 40 - + if (summoryButtonWidth + label_x > x_to) { - distance = x_to >= x_from ? x_to + 20 : label_x + label_width/2 + distance = x_to >= x_from ? x_to + 20 : label_x + label_width / 2 } - + if (summoryButtonWidth + distance > window.innerWidth || distance < 0) { distance = 10; ver_button_position = y_from < y_to ? label_y - 80 : label_y + label_height + 40 @@ -1433,14 +1527,15 @@ ver_button_position = 10; that.$next_btn.html('›'); that.$prev_btn.html('‹'); - } - else { + } 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.$skip_btn.html(customBtnProps.skipButton && customBtnProps.skipButton.text ? + customBtnProps.skipButton.text : 'Skip'); } that.$prev_btn.css({ @@ -1455,7 +1550,7 @@ left_skip = distance + that.$prev_btn.width() + 10; } - if(that.prevBtn === "hide") { + if (that.prevBtn === "hide") { left_next = distance; left_skip = distance + that.$next_btn.width() + 10; } @@ -1471,17 +1566,12 @@ }); }, 0) - that.$close_btn.css({ - right: 10, - top: 10 - }); - that.disableEventsNearRect({ top: shape_data.top, bottom: shape_data.bottom, left: shape_data.left, right: shape_data.right - }); + }, data.disableSelector); that.renderArrow({ x_from: x_from, @@ -1492,7 +1582,7 @@ }); }; - that.clear = function() { + that.clear = function () { that.ctx.clearRect(0, 0, 3000, 2000); }; @@ -1500,96 +1590,96 @@ }); }, - set: function(val) { - this.each(function() { + set: function (val) { + this.each(function () { this.enjoyhint_obj.setValue(val); }); return this; }, - show: function() { - this.each(function() { + show: function () { + this.each(function () { this.enjoyhint_obj.show(); }); return this; }, - hide: function() { - this.each(function() { + hide: function () { + this.each(function () { this.enjoyhint_obj.hide(); }); return this; }, - hide_next: function() { - this.each(function() { + hide_next: function () { + this.each(function () { this.enjoyhint_obj.hideNextBtn(); }); return this; }, - hide_prev: function() { - this.each(function() { + hide_prev: function () { + this.each(function () { this.enjoyhint_obj.hidePrevBtn(); }); return this; }, - show_prev: function() { - this.each(function() { + show_prev: function () { + this.each(function () { this.enjoyhint_obj.showPrevBtn(); }); return this; }, - show_next: function() { - this.each(function() { + show_next: function () { + this.each(function () { this.enjoyhint_obj.showNextBtn(); }); return this; }, - hide_skip: function() { - this.each(function() { + hide_skip: function () { + this.each(function () { this.enjoyhint_obj.hideSkipBtn(); }); return this; }, - show_skip: function() { - this.each(function() { + show_skip: function () { + this.each(function () { this.enjoyhint_obj.showSkipBtn(); }); return this; }, - render_circle: function(x, y, r) { - this.each(function() { + render_circle: function (x, y, r) { + this.each(function () { this.enjoyhint_obj.renderCircle(x, y, r); }); return this; }, - render_label: function(x, y, r) { - this.each(function() { + render_label: function (x, y, r) { + this.each(function () { this.enjoyhint_obj.renderLabel(x, y, r); }); return this; }, - render_label_with_shape: function(data, stopFunction, customBtnProps) { - this.each(function() { + render_label_with_shape: function (data, stopFunction, customBtnProps) { + this.each(function () { that.stopFunction = stopFunction; this.enjoyhint_obj.renderLabelWithShape(data, customBtnProps); }); @@ -1597,7 +1687,7 @@ return this; }, - redo_events_near_rect: function(rect) { + redo_events_near_rect: function (rect) { that.disableEventsNearRect({ top: rect.top, bottom: rect.bottom, @@ -1606,16 +1696,16 @@ }); }, - clear: function() { - this.each(function() { + clear: function () { + this.each(function () { this.enjoyhint_obj.clear(); }); return this; }, - close: function(val) { - this.each(function() { + close: function (val) { + this.each(function () { this.enjoyhint_obj.closePopdown(); }); @@ -1623,7 +1713,7 @@ } }; - $.fn.enjoyhint = function(method) { + $.fn.enjoyhint = function (method) { if (methods[method]) { return methods[method].apply( this, @@ -1637,4 +1727,4 @@ return this; }; -}); +}); \ No newline at end of file diff --git a/enjoyhint.min.js b/enjoyhint.min.js index caf7710..cc110bb 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(document.body).scrollTo(f.selector,f.scrollAnimationSpeed||250,{offset:-200})):g=250,setTimeout(function(){var b=a(f.selector),c=x(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++,t())}),!0!==f.showNext?o.enjoyhint("hide_next"):o.enjoyhint("show_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.closeButton){a(".enjoyhint_close_btn").addClass(f.closeButton.className||""),e.closeUserClass=f.closeButton.className}if(f.event_type)switch(f.event_type){case"auto":return b[f.event](),f.event,n++,void t();case"custom":y(f.event,function(){n++,z(f.event),t()});break;case"next":o.enjoyhint("show_next")}else d.on(c,function(a){f.keyCode&&a.keyCode!=f.keyCode||(n++,t())});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,s={x:l.left+Math.round(m/2),y:l.top+Math.round(p/2)-a(document).scrollTop()},u={enjoyHintElementSelector:f.selector,center_x:s.x,center_y:s.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,disableSelector:f.disableSelector},v={nextButton:f.nextButton,prevButton:f.prevButton,skipButton:f.skipButton};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)},u=function(){n++,t()},v=function(){n--,t()},w=function(){var b=m[n],c=a(b.selector);z(b.event),c.off(x(b.event)),r()},x=function(a,b){return a+(b?"custom":"")+".enjoy_hint"},y=function(a,b){o.on(x(a,!0),b)},z=function(a){o.off(x(a,!0))};window.addEventListener("resize",function(){null!=d&&o.enjoyhint("redo_events_near_rect",d[0].getBoundingClientRect())},!1),e.skip=function(){w()},e.reRunScript=function(a){n=a,t()},e.runScript=function(){n=0,l.onStart(),t()},e.resumeScript=function(){t()},e.destroyScript=function(){s()},e.setCurrentStep=function(a){n=a},e.getCurrentStep=function(){return n},e.trigger=function(a){switch(a){case"next":u();break;case"skip":w();break;default:o.trigger(x(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()},e.destroy=function(){e.destroyScript()},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,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}); @@ -186,6 +197,9 @@ if (step_data.showNext !== true) { $body.enjoyhint("hide_next"); } + else { + $body.enjoyhint("show_next"); + } $body.enjoyhint("hide_prev"); @@ -227,6 +241,13 @@ $skipBtn.text(step_data.skipButton.text || "Skip"); that.skipUserClass = step_data.skipButton.className; } + + if (step_data.closeButton) { + var $closeBtn = $(".enjoyhint_close_btn"); + + $closeBtn.addClass(step_data.closeButton.className || ""); + that.closeUserClass = step_data.closeButton.className; + } if (step_data.event_type) { switch (step_data.event_type) { @@ -292,17 +313,19 @@ left: step_data.left, right: step_data.right, margin: step_data.margin, - scroll: step_data.scroll + scroll: step_data.scroll, + disableSelector: step_data.disableSelector, }; var customBtnProps = { nextButton: step_data.nextButton, - prevButton: step_data.prevButton + prevButton: step_data.prevButton, + skipButton: step_data.skipButton } if (shape_data.center_x === 0 && shape_data.center_y === 0) { $body.enjoyhint("hide"); - destroyEnjoy(); + hideEnjoy(); return console.log("Error: Element position couldn't be reached"); } @@ -338,7 +361,7 @@ off(step_data.event); $element.off(makeEventName(step_data.event)); - destroyEnjoy(); + hideEnjoy(); }; var makeEventName = function(name, is_custom) { @@ -368,7 +391,7 @@ false ); - that.stop = function() { + that.skip = function() { skipAll(); }; @@ -386,6 +409,10 @@ that.resumeScript = function() { stepAction(); }; + + that.destroyScript = function () { + destroyEnjoy(); + } that.setCurrentStep = function(cs) { current_step = cs; @@ -436,6 +463,10 @@ that.resume = function() { that.resumeScript(); }; + + that.destroy = function () { + that.destroyScript(); + } init(); }; diff --git a/src/jquery.enjoyhint.css b/src/jquery.enjoyhint.css index 2f3a42d..27625c3 100644 --- a/src/jquery.enjoyhint.css +++ b/src/jquery.enjoyhint.css @@ -200,6 +200,8 @@ .enjoyhint_close_btn { display: inline-block; position: absolute; + right: 10px; + top: 10px; z-index: 1012; pointer-events: all; -webkit-box-sizing: content-box; diff --git a/src/jquery.enjoyhint.js b/src/jquery.enjoyhint.js index 8042be4..b6d7a0c 100644 --- a/src/jquery.enjoyhint.js +++ b/src/jquery.enjoyhint.js @@ -1,4 +1,4 @@ -CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { +CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { if (w < 2 * r) r = w / 2; if (h < 2 * r) r = h / 2; this.beginPath(); @@ -11,19 +11,19 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { return this; }; -(function(factory) { +(function (factory) { 'use strict'; - if (typeof define === 'function' && define.amd) { - // AMD - define(['jquery', 'kinetic'], factory); - } else if (typeof module !== 'undefined' && module.exports) { - // CommonJS - module.exports = factory(require('jquery'), require('kinetic')); - } else { - // Global - factory(jQuery, Kinetic); - } -})(function($, Kinetic) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery', 'kinetic'], factory); + } else if (typeof module !== 'undefined' && module.exports) { + // CommonJS + module.exports = factory(require('jquery'), require('kinetic')); + } else { + // Global + factory(jQuery, Kinetic); + } +})(function ($, Kinetic) { var that; var originalLabelLeft, originalLabelTop; var originalArrowLeft, originalArrowTop; @@ -34,12 +34,12 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { originalHeight = window.innerHeight; var methods = { - init: function(options) { - return this.each(function() { + init: function (options) { + return this.each(function () { var defaults = { - onNextClick: function() {}, - onSkipClick: function() {}, - onPrevClick: function() {}, + onNextClick: function () {}, + onSkipClick: function () {}, + onPrevClick: function () {}, animation_time: 800 }; @@ -47,7 +47,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { this.enjoyhint_obj = {}; that = this.enjoyhint_obj; - that.resetComponentStuff = function() { + that.resetComponentStuff = function () { originalLabelLeft = null; originalLabelTop = null; originalArrowLeft = null; @@ -119,25 +119,25 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { ).appendTo(that.enjoyhint); that.$canvas = $( '' + canvas_id + + '" width="' + + that.canvas_size.w + + '" height="' + + that.canvas_size.h + + '" class="' + + that.cl.main_canvas + + '">' ).appendTo(that.enjoyhint); that.$svg = $( '' + that.canvas_size.w + + '" height="' + + that.canvas_size.h + + '" class="' + + that.cl.main_canvas + + " " + + that.cl.main_svg + + '">' ).appendTo(that.enjoyhint_svg_wrapper); var defs = $(makeSVG("defs")); @@ -189,7 +189,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { .clone() .appendTo(that.enjoyhint); - var stopPropagation = function(e) { + var stopPropagation = function (e) { e.stopImmediatePropagation(); }; @@ -199,42 +199,54 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { $left_dis_events.click(stopPropagation); $right_dis_events.click(stopPropagation); - that.$skip_btn = $("
", { class: that.cl.skip_btn }) + that.$skip_btn = $("
", { + class: that.cl.skip_btn + }) .appendTo(that.enjoyhint) .html("Skip") - .click(function(e) { + .click(function (e) { that.hide(); that.options.onSkipClick(); }); - that.$next_btn = $("
", { class: that.cl.next_btn }) + that.$next_btn = $("
", { + class: that.cl.next_btn + }) .appendTo(that.enjoyhint) .html("Next") - .click(function(e) { + .click(function (e) { that.options.onNextClick(); }); - that.$close_btn = $("
", { class: that.cl.close_btn }) + that.$close_btn = $("
", { + class: that.cl.close_btn + }) .appendTo(that.enjoyhint) .html("") - .click(function(e) { + .click(function (e) { that.hide(); that.options.onSkipClick(); }); - that.$prev_btn = $("
", { class: that.cl.previous_btn }) + that.$prev_btn = $("
", { + class: that.cl.previous_btn + }) .appendTo(that.enjoyhint) .html("Previous") - .click(function(e) { + .click(function (e) { that.options.onPrevClick(); }); - that.$canvas.mousedown(function(e) { - $("canvas").css({ left: "4000px" }); + that.$canvas.mousedown(function (e) { + $("canvas").css({ + left: "4000px" + }); var BottomElement = document.elementFromPoint(e.clientX, e.clientY); - $("canvas").css({ left: "0px" }); + $("canvas").css({ + left: "0px" + }); $(BottomElement).click(); @@ -250,7 +262,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { center_y: -shape_init_shift, width: 0, height: 0, - sceneFunc: function(context) { + sceneFunc: function (context) { var ctx = this.getContext("2d")._context; var pos = this.pos; var def_comp = ctx.globalCompositeOperation; @@ -280,7 +292,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { var doit; - $(window).on("resize", function() { + $(window).on("resize", function () { clearTimeout(doit); $('.enjoyhint_next_btn').css('visibility', 'hidden'); $('.enjoyhint_prev_btn').css('visibility', 'hidden'); @@ -296,7 +308,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { var boundingClientRect = $( that.stepData.enjoyHintElementSelector )[0].getBoundingClientRect(); - + that.shape.attrs.center_x = Math.round( boundingClientRect.left + boundingClientRect.width / 2 ); @@ -306,11 +318,11 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { that.shape.attrs.width = boundingClientRect.width + 11; that.shape.attrs.height = boundingClientRect.height + 11; - function renderAfterResize(){ + function renderAfterResize() { var newDataCoords = $(that.stepData.enjoyHintElementSelector).get(0).getBoundingClientRect(); - that.stepData.center_x = newDataCoords.left + newDataCoords.width/2; - that.stepData.center_y = newDataCoords.top + newDataCoords.height/2; + that.stepData.center_x = newDataCoords.left + newDataCoords.width / 2; + that.stepData.center_y = newDataCoords.top + newDataCoords.height / 2; that.stepData.width = newDataCoords.width + 11; that.stepData.height = newDataCoords.height + 11; @@ -320,11 +332,13 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { $('.enjoyhint_skip_btn').css('visibility', 'visible'); } - 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}); - } - else renderAfterResize(); + 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 + }); + } else renderAfterResize(); }, 150); @@ -356,11 +370,11 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { $right_dis_events ]; - that.show = function() { + that.show = function () { that.enjoyhint.removeClass(that.cl.hide); }; - that.hide = function() { + that.hide = function () { that.enjoyhint.addClass(that.cl.hide); var tween = new Kinetic.Tween({ @@ -375,35 +389,35 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { that.hide(); - that.hideNextBtn = function() { + that.hideNextBtn = function () { that.$next_btn.addClass(that.cl.hide); that.nextBtn = "hide"; }; - that.hidePrevBtn = function() { + that.hidePrevBtn = function () { that.$prev_btn.addClass(that.cl.hide); that.prevBtn = "hide"; }; - that.showPrevBtn = function() { + that.showPrevBtn = function () { that.$prev_btn.removeClass(that.cl.hide); that.prevBtn = "show"; }; - that.showNextBtn = function() { + that.showNextBtn = function () { that.$next_btn.removeClass(that.cl.hide); that.nextBtn = "show"; }; - that.hideSkipBtn = function() { + that.hideSkipBtn = function () { that.$skip_btn.addClass(that.cl.hide); }; - that.showSkipBtn = function() { + that.showSkipBtn = function () { that.$skip_btn.removeClass(that.cl.hide); }; - that.renderCircle = function(data) { + that.renderCircle = function (data) { var r = data.r || 0; var x = data.x || 0; var y = data.y || 0; @@ -454,7 +468,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }; }; - that.renderRect = function(data, timeout) { + that.renderRect = function (data, timeout) { var r = data.r || 0; var x = data.x || 0; var y = data.y || 0; @@ -509,7 +523,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }; }; - that.renderLabel = function(data) { + that.renderLabel = function (data) { var x = data.x || 0; that.originalElementX = x; var y = data.y || 0; @@ -552,7 +566,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { label.detach(); - setTimeout(function() { + setTimeout(function () { $("#enjoyhint_label").remove(); label.appendTo(that.enjoyhint); }, that.options.animation_time / 2); @@ -572,25 +586,25 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }; }; - that.setMarkerColor = function(color){ + that.setMarkerColor = function (color) { - function isValidColor(value) { - const temp = new Option().style; - temp.color = value; - return temp.color !== ''; - } + function isValidColor(value) { + const temp = new Option().style; + temp.color = value; + return temp.color !== ''; + } - if (isValidColor(color)){ - return [$("#poliline"), $("#enjoyhint_arrpw_line")].forEach(function(element){ - element.css("stroke", color); - }); - } + if (isValidColor(color)) { + return [$("#poliline"), $("#enjoyhint_arrpw_line")].forEach(function (element) { + element.css("stroke", color); + }); + } - $("#poliline").css("stroke", "rgb(255,255,255)") - console.log("Error: invalid color name property - " + color); + $("#poliline").css("stroke", "rgb(255,255,255)") + console.log("Error: invalid color name property - " + color); } - that.renderArrow = function(data) { + that.renderArrow = function (data) { var x_from = data.x_from || 0; var y_from = data.y_from || 0; var x_to = data.x_to || 0; @@ -598,21 +612,20 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { var by_top_side = data.by_top_side; var control_point_x = 0; var control_point_y = 0; - + if (by_top_side === 'hor') { control_point_x = x_to control_point_y = y_from - } - else { + } else { control_point_x = x_from control_point_y = y_to } that.enjoyhint.addClass(that.cl.svg_transparent); - setTimeout(function() { + setTimeout(function () { $("#enjoyhint_arrpw_line").remove(); - + var d = "M" + x_from + @@ -635,21 +648,21 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }) ); - if(that.stepData.arrowColor) { - that.setMarkerColor(that.stepData.arrowColor) + if (that.stepData.arrowColor) { + that.setMarkerColor(that.stepData.arrowColor) } else { - $("#poliline").css("stroke", "rgb(255, 255, 255)"); + $("#poliline").css("stroke", "rgb(255, 255, 255)"); } that.enjoyhint.removeClass(that.cl.svg_transparent); }, that.options.animation_time / 2); }; - that.getLabelElement = function(data) { + that.getLabelElement = function (data) { return $("
", { - class: "enjoy_hint_label", - id: "enjoyhint_label" - }) + class: "enjoy_hint_label", + id: "enjoyhint_label" + }) .css({ top: data.y + "px", left: data.x + "px" @@ -658,16 +671,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); + .height(top); $bottom_dis_events.css({ - top: rect.bottom + "px", + top: bottom + "px", left: "0" }); @@ -676,17 +700,17 @@ 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" }); }; - (function($) { + (function ($) { $.event.special.destroyed = { - remove: function(o) { + remove: function (o) { if (o.handler) { o.handler(); } @@ -694,7 +718,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }; })($); - that.renderLabelWithShape = function(data, customBtnProps) { + that.renderLabelWithShape = function (data, customBtnProps) { that.stepData = data; that.customBtnProps = customBtnProps; @@ -713,7 +737,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { ); if (dialog != null) { - $(dialog).on("dialogClosing", function() { + $(dialog).on("dialogClosing", function () { that.stopFunction(); return; }); @@ -788,8 +812,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { data.center_x = sides_pos.left + half_w; data.center_y = sides_pos.top + half_h; - shape_data = that.renderRect( - { + shape_data = that.renderRect({ x: data.center_x, y: data.center_y, w: data.width, @@ -827,32 +850,73 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { label_shift + label_height + label_margin; var label_ver_offset = half_h + label_shift; - var areas_for_label = [ - {name: 'right_center', common_area: right_offset * window.innerHeight, width: right_offset, height: window.innerHeight}, - {name: 'right_top', common_area: right_offset * top_offset, width: right_offset, height: top_offset}, - {name: 'right_bottom', common_area: right_offset * bottom_offset, width: right_offset, height: bottom_offset}, - {name: 'left_center', common_area: left_offset * window.innerHeight, width: left_offset, height: window.innerHeight}, - {name: 'left_top', common_area: left_offset * top_offset, width: left_offset, height: top_offset}, - {name: 'left_bottom', common_area: left_offset * bottom_offset, width: left_offset, height: bottom_offset}, - {name: 'center_top', common_area: window.innerWidth * top_offset, width: window.innerWidth, height: top_offset}, - {name: 'center_bottom', common_area: window.innerWidth * bottom_offset, width: window.innerWidth, height: bottom_offset}, + var areas_for_label = [{ + name: 'right_center', + common_area: right_offset * window.innerHeight, + width: right_offset, + height: window.innerHeight + }, + { + name: 'right_top', + common_area: right_offset * top_offset, + width: right_offset, + height: top_offset + }, + { + name: 'right_bottom', + common_area: right_offset * bottom_offset, + width: right_offset, + height: bottom_offset + }, + { + name: 'left_center', + common_area: left_offset * window.innerHeight, + width: left_offset, + height: window.innerHeight + }, + { + name: 'left_top', + common_area: left_offset * top_offset, + width: left_offset, + height: top_offset + }, + { + name: 'left_bottom', + common_area: left_offset * bottom_offset, + width: left_offset, + height: bottom_offset + }, + { + name: 'center_top', + common_area: window.innerWidth * top_offset, + width: window.innerWidth, + height: top_offset + }, + { + name: 'center_bottom', + common_area: window.innerWidth * bottom_offset, + width: window.innerWidth, + height: bottom_offset + }, ]; var label_horizontal_space_required = label_width; var label_vertical_space_required = window.innerHeight <= 670 ? label_shift_with_label_height : label_shift_with_label_height + 20; var areas_priority = areas_for_label - .sort(function(area1, area2){return area1.common_area - area2.common_area}) + .sort(function (area1, area2) { + return area1.common_area - area2.common_area + }) var label_hor_side = 'oversized'; for (var i = 0; i < areas_priority.length; i++) { - var name = areas_priority[i].name; - var area = areas_priority[i] - if ( - area.width > label_horizontal_space_required - && area.height > label_vertical_space_required - ) { - label_hor_side = name; - } + var name = areas_priority[i].name; + var area = areas_priority[i] + if ( + area.width > label_horizontal_space_required && + area.height > label_vertical_space_required + ) { + label_hor_side = name; + } } var data_width_size = data.shape === "circle" ? data.radius * 2 : @@ -861,72 +925,72 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { var data_height_size = data.shape === "circle" ? data.radius * 2 : data.height ? data.height : data.radius * 2; - var right_position = data.center_x + data_width_size/2 + 80; - var left_position = data.center_x - label_width - data_width_size/2 - 80; + var right_position = data.center_x + data_width_size / 2 + 80; + var left_position = data.center_x - label_width - data_width_size / 2 - 80; var central_position = window.innerWidth / 2 - label_width / 2; var top_position = data.center_y - label_ver_offset - label_height; var bottom_position = data.center_y + label_ver_offset; - var central_ver_position = window.innerHeight/2 - label_vertical_space_required/2 + 20; - + var central_ver_position = window.innerHeight / 2 - label_vertical_space_required / 2 + 20; + var label_x, label_y, x_to, y_to, x_from, y_from; - + var by_top_side = "hor" - switch(label_hor_side) { + switch (label_hor_side) { case "center_top": - label_y = top_position; - label_x = central_position; - x_to = data.center_x; - y_to = data.center_y - data_height_size/2 - 20; - break; + label_y = top_position; + label_x = central_position; + x_to = data.center_x; + y_to = data.center_y - data_height_size / 2 - 20; + break; case "center_bottom": - label_y = bottom_position; - label_x = central_position; - x_to = data.center_x; - y_to = data.center_y + data_height_size/2 + 20; - break; + label_y = bottom_position; + label_x = central_position; + x_to = data.center_x; + y_to = data.center_y + data_height_size / 2 + 20; + break; case 'left_center': - label_y = central_ver_position; - label_x = left_position; - x_to = data.center_x - data_width_size/2 - 20; - y_to = data.center_y; - by_top_side = "ver"; - break; + label_y = central_ver_position; + label_x = left_position; + x_to = data.center_x - data_width_size / 2 - 20; + y_to = data.center_y; + by_top_side = "ver"; + break; case 'left_top': - label_y = top_position; - label_x = left_position; - x_to = data.center_x - data_width_size/2; - y_to = data.center_y - 20; - break; + label_y = top_position; + label_x = left_position; + x_to = data.center_x - data_width_size / 2; + y_to = data.center_y - 20; + break; case 'left_bottom': - label_y = bottom_position; - label_x = left_position; - x_to = data.center_x - data_width_size/2; - y_to = data.center_y + 20; - by_top_side = "ver"; - break; + label_y = bottom_position; + label_x = left_position; + x_to = data.center_x - data_width_size / 2; + y_to = data.center_y + 20; + by_top_side = "ver"; + break; case 'right_center': - label_y = central_ver_position; - label_x = right_position; - x_to = data.center_x + data_width_size/2 + 20; - y_to = data.center_y; - by_top_side = "ver"; - break; + label_y = central_ver_position; + label_x = right_position; + x_to = data.center_x + data_width_size / 2 + 20; + y_to = data.center_y; + by_top_side = "ver"; + break; case 'right_top': - label_y = top_position; - label_x = right_position; - x_to = data.center_x + data_width_size/2; - y_to = data.center_y - 20; - break; + label_y = top_position; + label_x = right_position; + x_to = data.center_x + data_width_size / 2; + y_to = data.center_y - 20; + break; case 'right_bottom': - label_y = bottom_position; - label_x = right_position; - x_to = data.center_x + data_width_size/2; - y_to = data.center_y + 20; - by_top_side = "ver"; - break; + label_y = bottom_position; + label_x = right_position; + x_to = data.center_x + data_width_size / 2; + y_to = data.center_y + 20; + by_top_side = "ver"; + break; case 'oversized': - setTimeout(function(){ + setTimeout(function () { $("#enjoyhint_arrpw_line").remove(); $('.enjoy_hint_label').css({ 'border-radius': '20px', @@ -939,23 +1003,22 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { 'transition': 'background-color ease-out 0.5s' }) }, 450) - label_y = central_ver_position - label_x = central_position; - break; + label_y = central_ver_position + label_x = central_position; + break; } - x_from = label_x + label_width/2; - y_from = (data.center_y > label_y + label_height/2) ? label_y + label_height : label_y; + x_from = label_x + label_width / 2; + y_from = (data.center_y > label_y + label_height / 2) ? label_y + label_height : label_y; // if data center out of window y scale - if(data.center_y < 0) { + if (data.center_y < 0) { y_to = 20 - } - else if ( data.center_y > window.innerHeight + 20 ) { + } else if (data.center_y > window.innerHeight + 20) { y_to = window.innerHeight - 20 }; // if element at the same position as hint - if(data.center_y >= label_y && data.center_y <= label_y + label_height) { + if (data.center_y >= label_y && data.center_y <= label_y + label_height) { x_from = data.center_x > label_x ? label_x + label_width : label_x; y_from = data.center_y; } @@ -966,15 +1029,15 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { text: data.text }); - setTimeout(function(){ + setTimeout(function () { var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + that.$prev_btn.width() + 30; var distance = label_x - 100; var ver_button_position = label_y + label_height + 40 - + if (summoryButtonWidth + label_x > x_to) { - distance = x_to >= x_from ? x_to + 20 : label_x + label_width/2 + distance = x_to >= x_from ? x_to + 20 : label_x + label_width / 2 } - + if (summoryButtonWidth + distance > window.innerWidth || distance < 0) { distance = 10; ver_button_position = y_from < y_to ? label_y - 80 : label_y + label_height + 40 @@ -988,14 +1051,15 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { ver_button_position = 10; that.$next_btn.html('›'); that.$prev_btn.html('‹'); - } - else { + } 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.$skip_btn.html(customBtnProps.skipButton && customBtnProps.skipButton.text ? + customBtnProps.skipButton.text : 'Skip'); } that.$prev_btn.css({ @@ -1010,7 +1074,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { left_skip = distance + that.$prev_btn.width() + 10; } - if(that.prevBtn === "hide") { + if (that.prevBtn === "hide") { left_next = distance; left_skip = distance + that.$next_btn.width() + 10; } @@ -1026,17 +1090,12 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }); }, 0) - that.$close_btn.css({ - right: 10, - top: 10 - }); - that.disableEventsNearRect({ top: shape_data.top, bottom: shape_data.bottom, left: shape_data.left, right: shape_data.right - }); + }, data.disableSelector); that.renderArrow({ x_from: x_from, @@ -1047,7 +1106,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }); }; - that.clear = function() { + that.clear = function () { that.ctx.clearRect(0, 0, 3000, 2000); }; @@ -1055,96 +1114,96 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }); }, - set: function(val) { - this.each(function() { + set: function (val) { + this.each(function () { this.enjoyhint_obj.setValue(val); }); return this; }, - show: function() { - this.each(function() { + show: function () { + this.each(function () { this.enjoyhint_obj.show(); }); return this; }, - hide: function() { - this.each(function() { + hide: function () { + this.each(function () { this.enjoyhint_obj.hide(); }); return this; }, - hide_next: function() { - this.each(function() { + hide_next: function () { + this.each(function () { this.enjoyhint_obj.hideNextBtn(); }); return this; }, - hide_prev: function() { - this.each(function() { + hide_prev: function () { + this.each(function () { this.enjoyhint_obj.hidePrevBtn(); }); return this; }, - show_prev: function() { - this.each(function() { + show_prev: function () { + this.each(function () { this.enjoyhint_obj.showPrevBtn(); }); return this; }, - show_next: function() { - this.each(function() { + show_next: function () { + this.each(function () { this.enjoyhint_obj.showNextBtn(); }); return this; }, - hide_skip: function() { - this.each(function() { + hide_skip: function () { + this.each(function () { this.enjoyhint_obj.hideSkipBtn(); }); return this; }, - show_skip: function() { - this.each(function() { + show_skip: function () { + this.each(function () { this.enjoyhint_obj.showSkipBtn(); }); return this; }, - render_circle: function(x, y, r) { - this.each(function() { + render_circle: function (x, y, r) { + this.each(function () { this.enjoyhint_obj.renderCircle(x, y, r); }); return this; }, - render_label: function(x, y, r) { - this.each(function() { + render_label: function (x, y, r) { + this.each(function () { this.enjoyhint_obj.renderLabel(x, y, r); }); return this; }, - render_label_with_shape: function(data, stopFunction, customBtnProps) { - this.each(function() { + render_label_with_shape: function (data, stopFunction, customBtnProps) { + this.each(function () { that.stopFunction = stopFunction; this.enjoyhint_obj.renderLabelWithShape(data, customBtnProps); }); @@ -1152,7 +1211,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { return this; }, - redo_events_near_rect: function(rect) { + redo_events_near_rect: function (rect) { that.disableEventsNearRect({ top: rect.top, bottom: rect.bottom, @@ -1161,16 +1220,16 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { }); }, - clear: function() { - this.each(function() { + clear: function () { + this.each(function () { this.enjoyhint_obj.clear(); }); return this; }, - close: function(val) { - this.each(function() { + close: function (val) { + this.each(function () { this.enjoyhint_obj.closePopdown(); }); @@ -1178,7 +1237,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { } }; - $.fn.enjoyhint = function(method) { + $.fn.enjoyhint = function (method) { if (methods[method]) { return methods[method].apply( this, @@ -1192,4 +1251,4 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { return this; }; -}); +}); \ No newline at end of file