TutorJS/tutor.min.js at master · Gerrproger/TutorJS · GitHub

1
2
3
4
5
6
7
8
/*!
 * TutorJS - smart tutorials for site users
 * @version  v1.3.1
 * @author   Gerrproger
 * http://datatables.net/license_gpl2
 * Copyright 2014 Gerrproger
 * https://github.com/Gerrproger/TutorJS
 */(function(){"use strict";window.tutorJS={VERSION:1.3,canva:null,hole:null,bg:null,hint:null,text:null,wrap:null,bNext:null,bQuit:null,tNext:null,tQuit:null,aNext:null,aQuit:null,tCount:null,nAll:null,nCurr:null,inited:!1,active:null,elements:null,nodes:[],html:null,scrolling:!1,activeEl:null,defOptions:{showQuit:!0,showNext:!0,showCount:!0,showHint:!0,bgQuit:!0,onQuit:null,auto:null,time:300},options:null,butW:80,butH:34,pad:10,shif:10,lineL:30,lineH:20,ID:function(e){return document.getElementById(e)},EL:function(e){return document.querySelector(e)},ELS:function(e){return document.querySelectorAll(e)},extend:function(e,n){var t={},o;for(o in e)t[o]=e[o];for(o in n)t[o]=n[o];return t},anim:function(e,n,t){var o=this,i=o.create("animate"),r={};return o.attr(i,{attributeName:n.attr,to:n.to,dur:n.dur/1e3+"s",fill:"freeze",keySplines:"0.42 0 0.58 1",calcMode:"spline"}),e.appendChild(i),i.beginElement&&i.beginElement(),r[n.attr]=n.to,setTimeout(function(){o.attr(e,r),e.removeChild(i),typeof t=="function"&&t(e)},n.dur),{and:function(u,l){return o.anim(e,u,l)},anim:function(u,l,a){return o.anim(u,l,a)}}},attr:function(e,n){for(var t in n)e.setAttributeNS(null,t,n[t]);return this},on:function(e,n,t){var o=this;return e.addEventListener(n,function(i){t(i,e,o)},!1),{on:function(i,r){return o.on(e,i,r)}}},create:function(e,n){return n?document.createTextNode(e):document.createElementNS("http://www.w3.org/2000/svg",e)},offset:function(e){return e.getBoundingClientRect()},width:function(e){return e.offsetWidth},height:function(e){return e.offsetHeight},positionTop:function(e){for(var n=0;e;)n+=parseFloat(e.offsetTop),e=e.offsetParent;return n},easeInOutQuad:function(e,n,t,o){return e/=o/2,e<1?t/2*e*e+n:(e--,-t/2*(e*(e-2)-1)+n)},requestAnimFrame:window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)},scrolledTop:function(){return document.documentElement.scrollTop||document.body.scrollTop||0},animateScroll:function(e,n){var t=this,o=t.scrolledTop(),i=e-o,r=0,u=20;t.scrolling=!0;var l=function(){r+=u,window.scrollTo(0,t.easeInOutQuad(r,o,i,t.options.time)),r<t.options.time?t.requestAnimFrame.call(window,l):(t.scrolling=!1,typeof n=="function"&&n())};l()},isInView:function(e){var n=this,t=e.top?e.top:n.positionTop(e),o=e.height?e.top+e.height:t+n.height(e),i=n.scrolledTop(),r=i+document.documentElement.clientHeight;return o<=r&&t>=i},go:function(e){var n=this,t=n.activeEl.element,o,i,r,u;if(t.width!==void 0&&t.height!==void 0&&t.top!==void 0&&t.left!==void 0)o=t.left,i=t.top-n.scrolledTop(),r=t.width,u=t.height;else{if(!(t instanceof HTMLElement))throw new Error("No such element on this page! ["+(n.active+1)+"]("+n.elements[n.active].element+")");var l=n.offset(t);o=l.left,i=l.top,r=n.width(t),u=n.height(t)}if(!r&&!u&&!o&&!i)throw new Error("This element is hidden! ["+(n.active+1)+"]("+n.elements[n.active].element+")");return e?n.attr(n.hole,{width:r,height:u,x:o,y:i}):n.anim(n.hole,{attr:"width",to:r,dur:n.options.time}).and({attr:"height",to:u,dur:n.options.time}).and({attr:"x",to:o,dur:n.options.time}).and({attr:"y",to:i,dur:n.options.time}),{l:o,t:i,w:r,h:u}},texter:function(e){var n=this,t=n.activeEl.caption,o=Math.round(n.options.time/3),i=1,r=!1,u=[],l=0,a=null,s=null;if(t){for(a=0,s=t.length;a<s;a++)a+1>n.lineL*i&&(r=!0,i++),r&&t[a]==" "&&(u.push(t.substring(l,a+1)),l=a+1,r=!1);u.length?l<t.length&&u.push(t.substring(l,t.length)):u.push(t)}return n.nodes.length&&n.anim(n.hint,{attr:"opacity",to:0,dur:o},function(){for(var f=0,h=n.nodes.length;f<h;f++)n.text.removeChild(n.nodes[f]);n.nodes.length=0}),setTimeout(function(){for(n.options.showCount&&(n.nCurr&&n.tCount.removeChild(n.nCurr),n.nCurr=n.create(n.active,!0),n.tCount.insertBefore(n.nCurr,n.nAll)),a=0,s=u.length;a<s;a++){var f=n.create("tspan"),h=n.create(u[a],!0);n.attr(f,{x:0}),a==0?n.attr(f,{dy:n.pad}):n.attr(f,{dy:n.lineH}),f.appendChild(h),n.text.appendChild(f),n.nodes.push(f)}n.hintPos(e)},n.options.time),n},hintPos:function(e,n){var t=this,o=t.activeEl.position;if(t.options.showHint&&(t.activeEl.caption||t.options.showNext||t.options.showQuit||t.options.showCount)){var i=t.text.getBBox(),r=null,u=null,l=null,a=null,s=null,f=null;t.options.showNext&&(s={el1:t.bNext,el2:t.tNext,offs:t.tNext.getBBox()}),t.options.showQuit&&t.options.showNext?l={el1:t.bQuit,el2:t.tQuit,offs:t.tQuit.getBBox()}:t.options.showQuit&&(s={el1:t.bQuit,el2:t.tQuit,offs:t.tQuit.getBBox()}),t.options.showCount&&(a=f={el1:t.tCount,offs:t.tCount.getBBox()});var h=(t.options.showNext?t.butW:0)+(t.options.showQuit?t.butW:0)+(t.options.showCount?f.offs.width:0)+t.pad*2,d=t.options.showNext||t.options.showQuit||t.options.showCount?t.butH:0;if(i.width<h){var m={width:h,height:i.height,x:i.x,y:i.y};i=m}switch(o){case"top":r=e.l+t.pad,u=e.t-i.height-t.shif-t.pad-d;break;case"left":r=e.l-i.width-t.shif-t.pad,u=e.t+t.pad;break;case"right":r=e.l+e.w+t.shif+t.pad,u=e.t+t.pad;break;default:r=e.l+t.pad,u=e.t+e.h+t.shif+t.pad}for(var c=0,w=t.nodes.length;c<w;c++)t.attr(t.nodes[c],{x:r});if(t.attr(t.text,{x:r,y:u}).attr(t.wrap,{x:r-t.pad,y:u-t.pad,height:i.height+t.pad*2+(d?t.butH:0),width:i.width+t.pad*2}),s&&t.attr(s.el1,{x:r+i.width+t.pad-t.butW,y:u+i.height+t.pad}).attr(s.el2,{x:r+t.pad/2+Math.round(i.width-(t.butW+s.offs.width)/2),y:u+i.height+t.pad*2+Math.round((t.butH-s.offs.height*1.2)/2)}),l&&t.attr(l.el1,{x:r,y:u+i.height+t.pad}).attr(l.el2,{x:r-t.pad/2+Math.round((t.butW-l.offs.width)/2),y:u+i.height+t.pad*2+Math.round((t.butH-l.offs.height*1.2)/2)}),a){var p=r+Math.round((i.width-a.offs.width)/2);(!l||!s)&&(l||s)&&(p-=t.butW/2),t.attr(a.el1,{x:p,y:u+i.height+t.pad+t.butH/2})}return n||t.anim(t.hint,{attr:"opacity",to:1,dur:t.options.time}),t}},init:function(){var e=this;return e.canva=e.ID("tutorJS-svg"),e.hole=e.ID("tutorJS-hole"),e.bg=e.ID("tutorJS-bg"),e.text=e.ID("tutorJS-text"),e.wrap=e.ID("tutorJS-wrap"),e.bNext=e.ID("tutorJS-nextW"),e.bQuit=e.ID("tutorJS-quitW"),e.tNext=e.ID("tutorJS-nextT"),e.tQuit=e.ID("tutorJS-quitT"),e.aNext=e.ID("tutorJS-next"),e.aQuit=e.ID("tutorJS-quit"),e.tCount=e.ID("tutorJS-count"),e.hint=e.ID("tutorJS-hint"),e.html=e.EL("html"),e.aNext&&e.on(e.aNext,"click",function(){e.next(),e.attr(e.bNext,{fill:"url(#tutorJS-gradient3)"})}).on("mouseover",function(){e.attr(e.bNext,{fill:"url(#tutorJS-gradient5)"})}).on("mouseout",function(){e.attr(e.bNext,{fill:"url(#tutorJS-gradient3)"})}),e.aQuit&&e.on(e.aQuit,"click",function(){e.quit()}).on("mouseover",function(){e.attr(e.bQuit,{fill:"url(#tutorJS-gradient6)"})}).on("mouseout",function(){e.attr(e.bQuit,{fill:"url(#tutorJS-gradient4)"})}),e.on(e.bg,"click",function(){e.options.bgQuit&&e.quit()}),e.on(window,"resize",function(){e.recalc()}).on("scroll",function(){e.scrolling||e.recalc()}),e},starter:function(e){var n=this;return n.options.showQuit?n.aQuit.style.display="block":n.aQuit&&(n.aQuit.style.display="none"),n.options.showNext?n.aNext.style.display="block":n.aNext&&(n.aNext.style.display="none"),n.options.showCount?(e||(n.nAll=n.create("/"+n.elements.length,!0),n.tCount.appendChild(n.nAll)),n.tCount.style.display="block"):(e||(n.nAll=null),n.tCount&&(n.tCount.style.display="none")),n},next:function(e){var n=this;if(!(e=="re"&&!n.options.auto)){if(!n.elements||!n.elements[n.active])return n.active>0&&n.quit(),n;e&&e!="re"&&(n.options.auto=e),n.activeEl=n.elements[n.active];var t=n.activeEl.element,o=function(){typeof n.activeEl.onActive=="function"&&n.activeEl.onActive(n.activeEl,n.active+1),n.texter(n.go()).active++,n.options.auto&&setTimeout(function(){n.next("re")},n.options.auto)};if(!t)throw new Error('Can not find argument "element"! ['+(n.active+1)+"]");if(typeof t=="string"&&(n.activeEl.element=t=n.ID(t)),n.isInView(t))o();else{var i=Math.round(n.options.time/3);n.anim(n.hole,{attr:"opacity",to:0,dur:i}).anim(n.hint,{attr:"opacity",to:0,dur:i},function(){n.attr(n.hole,{width:0,height:0,x:0,y:0,opacity:1}),n.animateScroll((t.top?t.top:n.positionTop(t))-n.pad,function(){o()})})}return n}},set:function(e,n){var t=this,o=t.activeEl;return typeof e=="object"&&(t.options=t.extend(t.options,e)),typeof n=="object"&&(t.activeEl=t.extend(t.activeEl,n)),t.anim(t.hint,{attr:"opacity",to:0,dur:Math.round(t.options.time/3)},function(){t.starter(!0);var i=t.activeEl.element,r=function(){typeof i.onActive=="function"&&i.onActive(t.activeEl,t.active),o.caption!==t.activeEl.caption?t.texter(t.go()):t.hintPos(t.go(!0)),t.options.auto&&setTimeout(function(){t.next("re")},t.options.auto)};if(o.element!==i){if(!i)throw new Error('Can not find argument "element"! ['+t.active+"]");if(typeof i=="string"&&(t.activeEl.element=i=t.ID(i)),t.isInView(i))r();else{var u=Math.round(t.options.time/3);t.anim(t.hole,{attr:"opacity",to:0,dur:u}).anim(t.hint,{attr:"opacity",to:0,dur:u},function(){t.attr(t.hole,{width:0,height:0,x:0,y:0,opacity:1}),t.animateScroll((i.top?i.top:t.positionTop(i))-t.pad,function(){r()})})}}else r()}),t},stop:function(){var e=this;return e.options.auto=null,e},start:function(e,n){var t=this,o=function(){t.starter(),t.canva.style.display="block",t.anim(t.bg,{attr:"opacity",to:1,dur:t.options.time*3},function(){t.next()})};return t.active=0,typeof n=="object"?t.options=t.extend(t.defOptions,n):t.options=t.defOptions,t.elements=e.length?e:[e],t.inited?(t.nAll&&(t.tCount.removeChild(t.nAll),t.nAll=null),t.anim(t.hint,{attr:"opacity",to:0,dur:Math.round(t.options.time/3)},function(){o()})):(t.init(),t.inited=!0,o()),t},quit:function(){var e=this;return e.active=null,e.stop(),e.anim(e.hole,{attr:"opacity",to:0,dur:e.options.time}).anim(e.hint,{attr:"opacity",to:0,dur:e.options.time}).anim(e.bg,{attr:"opacity",to:0,dur:e.options.time*3},function(){e.canva.style.display="none",e.attr(e.hole,{width:0,height:0,x:0,y:0,opacity:1}),typeof e.options.onQuit=="function"&&e.options.onQuit(e)}),e},recalc:function(){var e=this;return e.active==null||e.hintPos(e.go(!0),!0),e}}})();