instructorjs
Version:
On-screen tutorials for web pages and web applications
1 lines • 16.4 kB
JavaScript
CanvasRenderingContext2D.prototype.roundRect=function(t,e,n,r,o){return n<2*o&&(o=n/2),r<2*o&&(o=r/2),this.beginPath(),this.moveTo(t+o,e),this.arcTo(t+n,e,t+n,e+r,o),this.arcTo(t+n,e+r,t,e+r,o),this.arcTo(t,e+r,t,e,o),this.arcTo(t,e,t+n,e,o),this.closePath(),this};var InstructorFactory=function(t,e){t=t||window.jQuery,e=e||window.Konva;var n,r,o=t,i=window.innerWidth,a=window.innerHeight,s={init:function(s){return this.each(function(){this.instructor_obj={},(n=this.instructor_obj).resetComponentStuff=function(){null,null,null,null,null,null,null,null,null,null,i=window.innerWidth,a=window.innerHeight};var c=o(this);function l(t,e){var n=document.createElementNS("http://www.w3.org/2000/svg",t);for(var r in e)n.setAttribute(r,e[r]);return n}n.options=t.extend({onNextClick:function(){},onSkipClick:function(){},animation_time:800},s),n.cl={instructor:"instructor",hide:"instructor_hide",disable_events_element:"instructor_disable_events",btn:"instructor_btn",close_btn:"instructor_close_btn",next_btn:"instructor_next_btn",main_canvas:"instructor_canvas",main_svg:"instructor_svg",svg_wrapper:"instructor_svg_wrapper",svg_transparent:"instructor_svg_transparent",konva_container:"konva_container"},n.canvas_size={w:1.4*o(window).width(),h:1.4*o(window).height()};n.instructor=o("<div>",{class:n.cl.instructor+" "+n.cl.svg_transparent}).appendTo(c),n.instructor_svg_wrapper=o("<div>",{class:n.cl.svg_wrapper+" "+n.cl.svg_transparent}).appendTo(n.instructor),n.$stage_container=o('<div id="'+n.cl.konva_container+'">').appendTo(n.instructor),n.$canvas=o('<canvas id="instructor_canvas" width="'+n.canvas_size.w+'" height="'+n.canvas_size.h+'" class="'+n.cl.main_canvas+'">').appendTo(n.instructor),n.$svg=o('<svg width="'+n.canvas_size.w+'" height="'+n.canvas_size.h+'" class="'+n.cl.main_canvas+" "+n.cl.main_svg+'">').appendTo(n.instructor_svg_wrapper);var h=o(l("defs")),d=o(l("marker",{id:"arrowMarker",viewBox:"0 0 36 21",refX:"21",refY:"10",markerUnits:"strokeWidth",orient:"auto",markerWidth:"16",markerHeight:"12"})),u=o(l("path",{style:"fill:none; stroke:rgb(255,255,255); stroke-width:2",d:"M0,0 c30,11 30,9 0,20"}));h.append(d.append(u)).appendTo(n.$svg),n.konva_stage=new e.Stage({container:n.cl.konva_container,width:n.canvas_size.w,height:n.canvas_size.h,scaleX:1}),n.layer=new e.Layer,n.rect=new e.Rect({fill:"rgba(0,0,0,0.80)",width:n.canvas_size.w,height:n.canvas_size.h});var p=o("<div>",{class:n.cl.disable_events_element}).appendTo(n.instructor),v=p.clone().appendTo(n.instructor),_=p.clone().appendTo(n.instructor),f=p.clone().appendTo(n.instructor),g=p.clone().appendTo(n.instructor);g.addClass("blocker");var w=function(t){t.stopImmediatePropagation()};o("button").focusout(w),p.click(w),v.click(w),_.click(w),f.click(w),g.click(w),n.$next_btn=o("<div>",{class:n.cl.next_btn}).appendTo(n.instructor).html(n.options.nextLabel).click(function(t){n.options.onNextClick()}),n.$close_btn=o("<div>",{class:n.cl.close_btn}).appendTo(n.instructor).html("").click(function(t){n.hide(),n.options.onSkipClick()}),n.$canvas.mousedown(function(t){o("canvas").css({left:"4000px"});var e=document.elementFromPoint(t.clientX,t.clientY);return o("canvas").css({left:"0px"}),o(e).click(),!1});n.shape=new e.Shape({radius:0,center_x:-130,center_y:-130,width:0,height:0,sceneFunc:function(t){var e=this.getContext("2d")._context,n=(this.pos,e.globalCompositeOperation);e.globalCompositeOperation="destination-out",e.beginPath();var r=this.attrs.center_x-Math.round(this.attrs.width/2),o=this.attrs.center_y-Math.round(this.attrs.height/2);e.roundRect(r,o,this.attrs.width,this.attrs.height,this.attrs.radius),e.fillStyle="red",e.fill(),e.globalCompositeOperation=n}}),n.shape.radius=0,n.layer.add(n.rect),n.layer.add(n.shape),n.konva_stage.add(n.layer),o(window).on("resize",function(){var t;t=n.stepData.tourElementSelector?o(n.stepData.tourElementSelector)[0].getBoundingClientRect():document.body.getBoundingClientRect(),n.shape.attrs.center_x=Math.round(t.left+t.width/2),n.shape.attrs.center_y=Math.round(t.top+t.height/2),n.shape.attrs.width=t.width+11,n.shape.attrs.height=t.height+11;var r=window.innerWidth,s=window.innerHeight,c=r/i,l=s/a;n.konva_stage.setAttr("width",i*c),n.konva_stage.setAttr("height",a*l),n.rect=new e.Rect({fill:"rgba(0,0,0,0.8)",width:window.innerWidth,height:window.innerHeight}),n.layer.removeChildren(),n.layer.add(n.rect),n.layer.add(n.shape),n.layer.draw(),n.konva_stage.draw()});n.instructor;return n.show=function(){n.instructor.removeClass(n.cl.hide)},n.hide=function(){n.instructor.addClass(n.cl.hide),new e.Tween({node:n.shape,duration:.002,center_x:-130,center_y:-130}).play()},n.hide(),n.hideNextBtn=function(){n.$next_btn.addClass(n.cl.hide),n.nextBtn="hide"},n.showNextBtn=function(){n.$next_btn.removeClass(n.cl.hide),n.nextBtn="show"},n.renderCircle=function(t){var r=t.r||0,o=t.x||0,i=t.y||0;new e.Tween({node:n.shape,duration:.2,center_x:o,center_y:i,width:2*r,height:2*r,radius:r}).play();var a=o-r,s=o+r,c=i-r,l=i+r;return{x:o,y:i,left:a,right:s,top:c,bottom:l,conn:{left:{x:a-20,y:i},right:{x:s+20,y:i},top:{x:o,y:c-20},bottom:{x:o,y:l+20}}}},n.renderRect=function(t,r){var o=t.r||0,i=t.x||0,a=t.y||0,s=t.w||0,c=t.h||0;new e.Tween({node:n.shape,duration:r,center_x:i,center_y:a,width:s,height:c,radius:o}).play();var l=Math.round(s/2),h=Math.round(c/2),d=i-l,u=i+l,p=a-h,v=a+h;return{x:i,y:a,left:d,right:u,top:p,bottom:v,conn:{left:{x:d-20,y:a},right:{x:u+20,y:a},top:{x:i,y:p-20},bottom:{x:i,y:v+20}}}},n.renderLabel=function(t){var e=t.x||0;n.originalElementX=e;var r=t.y||0,i=(t.text,n.getLabelElement({x:e,y:r,text:t.text})),a=i.width(),s=i.height(),c=i.offset().left,l=c+a,h=i.offset().top-o(document).scrollTop(),d=h+s,u={x:c-10,y:h+Math.round(s/2)},p={x:l+10,y:h+Math.round(s/2)},v={x:c+Math.round(a/2),y:h-10},_={x:c+Math.round(a/2),y:d+10};return i.detach(),setTimeout(function(){o("#instructor_label").remove(),i.appendTo(n.instructor)},n.options.animation_time/2),{label:i,left:c,right:l,top:h,bottom:d,conn:{left:u,right:p,top:v,bottom:_}}},n.renderArrow=function(t){var e=t.x_from||0,r=t.y_from||0,i=t.x_to||0,a=t.y_to||0,s=t.by_top_side,c=0,h=0;s?r>=a?(h=a,c=e):(h=r,c=i):r>=a?(h=r,c=i):(h=a,c=e);t.text;n.instructor.addClass(n.cl.svg_transparent),setTimeout(function(){o("#instructor_arrow_line").remove();var t="M"+e+","+r+" Q"+c+","+h+" "+i+","+a;n.$svg.append(l("path",{style:"fill:none; stroke:rgb(255,255,255); stroke-width:3","marker-end":"url(#arrowMarker)",d:t,id:"instructor_arrow_line"})),n.instructor.removeClass(n.cl.svg_transparent)},n.options.animation_time/2)},n.getLabelElement=function(t){return o("<div>",{class:"instructor_label",id:"instructor_label"}).css({top:t.y+"px",left:t.x+"px"}).html(t.text).appendTo(n.instructor)},n.disableEventsNearRect=function(t,e){p.css({top:"0",left:"0"}).height(t.top),v.css({top:t.bottom+"px",left:"0"}),_.css({top:"0",left:"0px"}).width(t.left),f.css({top:"0",left:t.right+"px"}),g.css({top:t.top+"px",left:t.left+"px",width:t.right-t.left+"px",height:t.bottom-t.top+"px"}),e?g.hide():g.show()},t.event.special.destroyed={remove:function(t){t.handler&&t.handler()}},n.renderLabelWithShape=function(t){n.stepData=t,n.resetComponentStuff();var e=t.shape||"rect",i={};t.next_shown=null!=t.next_text;var a=0,s=0,c=t.top||0,l=t.bottom||0,h=t.left||0,d=t.right||0;switch(e){case"circle":a=s=t.radius;var u=(f={top:t.center_y-s+c,bottom:t.center_y+s-l,left:t.center_x-a+h,right:t.center_x+a-d}).right-f.left,p=f.bottom-f.top;t.radius=Math.round(Math.min(u,p)/2),a=s=Math.round(t.radius/2);var v=Math.round(u/2),_=Math.round(p/2);t.center_x=f.left+v,t.center_y=f.top+_,i=n.renderCircle({x:t.center_x,y:t.center_y,r:t.radius});break;case"rect":a=Math.round(t.width/2),s=Math.round(t.height/2);var f={top:t.center_y-s+c,bottom:t.center_y+s-l,left:t.center_x-a+h,right:t.center_x+a-d};t.width=f.right-f.left,t.height=f.bottom-f.top,a=Math.round(t.width/2),s=Math.round(t.height/2),t.center_x=f.left+a,t.center_y=f.top+s,i=n.renderRect({x:t.center_x,y:t.center_y,w:t.width,h:t.height,r:t.radius},t.text_only?0:.2)}var g=n.instructor.width(),w=n.instructor.height(),m=n.getLabelElement({x:0,y:0,text:t.text}),x=m.outerWidth(),y=m.outerHeight();m.remove();var b=t.center_y-s,k=w-(t.center_y+s),C=(t.center_x,t.center_x,t.center_x,t.center_x,w-t.center_y<t.center_y?"top":"bottom"),T=150+y+40,E=s+150,S="top"==C?t.center_y-E-y:t.center_y+E;t.next_shown&&"top"==C&&(S-=100);var M=.1*window.innerWidth;if(b<T&&k<T&&(S=t.center_y+40),n.$close_btn.css({right:10,top:10}),n.disableEventsNearRect({top:i.top,bottom:i.bottom,left:i.left,right:i.right},t.can_interact),t.text_only){n.instructor.addClass(n.cl.svg_transparent),o(".instructor_svg_wrapper").hide(),S=window.innerHeight/2-y/2;var L=n.renderLabel({x:M,y:S,text:t.text});setTimeout(function(){n.instructor.removeClass(n.cl.svg_transparent)},n.options.animation_time/2)}else{L=n.renderLabel({x:M,y:S,text:t.text});var N=!1,F="left",z="left",O=L.left<=i.x&&L.right>=i.x,A=L.right<i.x,B=(L.left,i.x,L.right,i.left,L.left,i.right,L.bottom<i.top),$=L.top>i.bottom,I=L.bottom>=i.y&&L.top<=i.y,R=L.bottom<=i.y&&!B,W=L.top>=i.y&&!$;function H(t,e,n){F=t,z=e,N=n}function j(t,e,n,r,o){var i=[];(i=B?t:R?e:I?n:W?r:o)&&H(i[0],i[1],i[2])}O?B?H("bottom","top","top"):$?H("top","bottom","bottom"):H("bottom","top","top"):A?j(["right","top","top"],["bottom","left","bottom"],["right","left","top"],["top","left","top"],["right","bottom","bottom"]):j(["left","top","top"],["bottom","right","bottom"],["left","right","top"],["top","right","top"],["left","bottom","bottom"]);var D=L.conn[F],P=i.conn[z],V="top"==N,X=t.next_shown?80:10,Y=D.x,Q=O&&!$?S+y+X:D.y;n.renderArrow({x_from:Y,y_from:Q,x_to:P.x,y_to:P.y,by_top_side:V}),o(".instructor_svg_wrapper").show()}t.next_shown&&(n.$next_btn.css({left:M+x/2-50,top:S+y+20}),n.$next_btn.html(t.next_text),r.instructor("show_next"))},this})},show:function(){return this.each(function(){this.instructor_obj.show()}),this},hide:function(){return this.each(function(){this.instructor_obj.hide()}),this},hide_next:function(){return this.each(function(){this.instructor_obj.hideNextBtn()}),this},show_next:function(){return this.each(function(){this.instructor_obj.showNextBtn()}),this},render_label_with_shape:function(t){return this.each(function(){this.instructor_obj.renderLabelWithShape(t)}),this},redo_events_near_rect:function(t){n.disableEventsNearRect({top:t.rect.top,bottom:t.rect.bottom,left:t.rect.left,right:t.rect.right},t.can_interact)}};o.fn.instructor=function(t){return s[t]?s[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?(o.error("Method "+t+" does not exist"),this):s.init.apply(this,arguments)};return function(t){var e,n,i,a,s,c=this,l=o.extend({nextLabel:"Next",finishLabel:"Finish",onStart:function(){},onEnd:function(){},onSkip:function(){},onNext:function(){},sanitizer:function(t){return t}},t),h=[],d=l.customValidators,u=0;r=o("body");var p=function(t){t.preventDefault()},v=function(t){9!=t.keyCode&&13!=t.keyCode||t.preventDefault()},_=function(t){clearTimeout(i),i=setTimeout(w,250)},f=function(){window.clearInterval(n),clearTimeout(a),clearTimeout(s),o(".instructor").remove(),r.css({overflow:"auto"}),o(window).off("resize",_),o(document).off("touchmove",p),o(document).off("keydown",v)},g=function(t){r.instructor("hide"),l.onEnd(l.triggerNextTutorial,function(){t()}),f(),l.navigateOnFinish?window.open(l.navigateOnFinish,l.navigateOnFinishTarget||"_blank").focus():l.reloadOnFinish&&window.location.reload()},w=function(){if(window.clearInterval(n),h&&h[u]){var t;r.instructor("hide_next"),(t=h[u-1])&&t.repositionEvent&&o(t.repositionEvent.selector).off(t.repositionEvent.event,c.redraw),l.onNext();var i=o(".instructor");i.removeClass("instructor-step-"+u),i.removeClass("instructor-step-"+(u+1)),i.addClass("instructor-step-"+(u+1));var d=h[u];d.onBeforeStart&&"function"==typeof d.onBeforeStart&&d.onBeforeStart();var p=d.timeout||100;a=setTimeout(function(){!d.exists||o(d.exists).length?(d.selector&&!d.noScroll&&o(d.scroller||document.body).scrollTo(d.selector,d.scrollAnimationSpeed||250,{offset:-100}),s=setTimeout(function(){var t=o(d.selector);r.instructor("show");var i=!(e=d.eventSelector?o(d.eventSelector):t).length;!i&&d.defaultValue&&(d.isTinyMce&&window.tinymce?tinymce.activeEditor.setContent(d.defaultValue):e.val(d.defaultValue)),i||d.preventAutoFocus||d.preventInteraction||e.focus(),d.repositionEvent&&(o(d.repositionEvent.selector).off(d.repositionEvent.event,c.redraw),o(d.repositionEvent.selector).on(d.repositionEvent.event,c.redraw)),d.navigateOnFinish&&(l.navigateOnFinish=l.sanitizer(d.navigateOnFinish),l.navigateOnFinishTarget=d.navigateOnFinishTarget),l.reloadOnFinish=d.reloadOnFinish,l.triggerNextTutorial=d.triggerNextTutorial;var a=null;if(d.event)switch(d.event){case"trigger":return e.trigger(d.triggerEvent),void m();case"auto":return void m();case"next":a=l.nextLabel;break;case"finish":a=l.finishLabel;break;case"select":if(!i){var s=e.prop("selectedIndex");e.off("click"),e.on("click",function(t){var n=e.prop("selectedIndex");n>=0&&(s!=n?(s=n,m()&&o(this).off("click")):s=-1)})}break;case"submit":if(!i){var h=e[0],u=function(t){t.stopImmediatePropagation(),t.preventDefault(),g(function(){h.removeEventListener("click",u,!0),h.click()})};h.removeEventListener("click",u,!0),h.addEventListener("click",u,!0)}break;default:if(!i)if("key"==d.event){var p=function(t){t.which==d.keyCode&&m()};e[0].removeEventListener("keydown",p,!0),e[0].addEventListener("keydown",p,!0)}else if(d.isBootstrapEvent){var v=y(d.event);e.off(v),e.on(v,function(t){d.keyCode&&t.keyCode!=d.keyCode||m()&&o(this).off(v)})}else{var _=function(t){d.keyCode&&t.keyCode!=d.keyCode||m()&&e[0].removeEventListener(d.event,_,!0)};e[0].removeEventListener(d.event,_,!0),e[0].addEventListener(d.event,_,!0)}}var f=function(){var e;if(i)e={x:0,y:0};else{var n=Math.max(t.outerWidth(),t.outerHeight()),r=d.radius||Math.round(n/2)+5,s=t.offset(),c=t.outerWidth(),h=t.outerHeight(),u=void 0!==d.marginX?d.marginX:10,p=void 0!==d.marginY?d.marginY:10;e={x:s.left+Math.round(c/2),y:s.top+Math.round(h/2)-o(document).scrollTop()}}var v={tourElementSelector:d.selector,center_x:e.x,center_y:e.y,text:l.sanitizer(d.description),top:d.top,bottom:d.bottom,left:d.left,right:d.right,text_only:i,next_text:a,can_interact:!d.preventInteraction};return d.shape&&"circle"==d.shape?(v.shape="circle",v.radius=r):(v.radius=0,v.width=c+u,v.height=h+p),v.org_dims={width:c+u,height:h+p,center_x:e.x,center_y:e.y},v};c.current_shape_data=f();var w=function(t,e){return!(isNaN(t)&&isNaN(e)||t===e)};window.clearInterval(n),n=window.setInterval(function(){var t=f();if("circle"!==c.current_shape_data.shape&&(w(c.current_shape_data.org_dims.width,t.width)||w(c.current_shape_data.org_dims.height,t.height)||w(c.current_shape_data.org_dims.center_x,t.center_x)||w(c.current_shape_data.org_dims.center_y,t.center_y)))return c.current_shape_data=t,void r.instructor("render_label_with_shape",c.current_shape_data);var e=o("#instructor_label"),n=o(".instructor_next_btn"),i=e.position().top+e.outerHeight(),a=n.position().top;!n.hasClass("instructor_hide")&&i>a-10&&r.instructor("render_label_with_shape",c.current_shape_data)},500),r.instructor("render_label_with_shape",c.current_shape_data)},d.scrollAnimationSpeed+20||270)):m()},p)}else g(function(){})},m=function(){var t=h[u],e=o(".instructor_disable_events.blocker");return k(t)?(e.removeAttr("invalid"),e.hide(),t.onAfterEnd&&"function"==typeof t.onAfterEnd&&t.onAfterEnd(),u++,w(),!0):(e.show(),e.attr("invalid",""),(t.eventSelector?o(t.eventSelector):o(t.selector)).focus(),!1)},x=function(){var t=h[u];b(t.event),(t.eventSelector?o(t.eventSelector):o(t.selector)).off(y(t.event)),f()},y=function(t,e){return t+(e?"custom":"")+".instructor"},b=function(t){r.off(y(t,!0))},k=function(t){if(!t.validation)return!0;var e,n=o(t.validation.selector);return t.validation.customValidator?e=d[t.validation.customValidator](n[t.validation.valueFunction](),t.validation.value):t.validation.valueFunction&&(e=n[t.validation.valueFunction]()===t.validation.value),t.validation.invert?!e:e};c.stop=function(){x()},c.run=function(t){t&&(h=t,u=0,l.onStart(),w())},c.redraw=function(){w()},o(".instructor")&&o(".instructor").remove(),r.css({overflow:"hidden"}),o(document).on("touchmove",p),o(document).on("keydown",v),o(window).on("resize",_),r.instructor({onNextClick:function(){m()},onSkipClick:function(){l.onSkip(),x()}})}};export{InstructorFactory};