jparticles/browser/wave-loading.js

A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

this.JParticles=this.JParticles||{},this.JParticles.WaveLoading=function(t,e,o){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=i(t),n=i(o),r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])})(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function o(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function f(t,e){for(var o=0,i=e.length,s=t.length;o<i;o++,s++)t[s]=e[o];return t}var h,l,p,c=2*Math.PI;Function.prototype.toString.call(Object),/msie\s8.0/i.test(navigator.userAgent),function(t){t.DESTROY="DESTROY",t.RESIZE="RESIZE"}(h||(h={})),function(t){t.PROGRESS="PROGRESS",t.FINISHED="FINISHED"}(l||(l={})),function(t){t.FINISHED="FINISHED"}(p||(p={}));var u=["fill","fillColor","line","lineColor","lineWidth","offsetLeft","offsetTop","crestHeight","speed"],d=["opacity","mask","maskMode"],g=f(f([],u),["crestCount"]),v=function(t){function o(e,i){var s=t.call(this,o.defaultConfig,e,i)||this;return s.waveLength=[],s.bootstrap(),s}return a(o,t),o.prototype.init=function(){this.ownResizeEvent(),this.optionsNormalize(),this.loadMaskImage(),this.createDots()},o.prototype.optionsNormalize=function(){var t=this;g.forEach((function(i){for(var s=t.options.num,n=t.options[i],r=[],a="offsetLeft"===i?t.canvasWidth:t.canvasHeight;s--;){var f=Array.isArray(n)?n[s]:n;r[s]=e.isUndefined(f)?t.getOptionDefaultValue(i):o.getOptionProcessedValue(i,f,a),"crestCount"===i&&(t.waveLength[s]=t.canvasWidth/r[s])}t.options[i]=r}))},o.prototype.getOptionDefaultValue=function(t){var o=this.canvasWidth,i=this.canvasHeight;switch(t){case"lineColor":case"fillColor":return e.randomColor();case"lineWidth":return e.randomInRange(2,.2);case"offsetLeft":return Math.random()*o;case"offsetTop":case"crestHeight":return Math.random()*i;case"crestCount":return e.randomInRange(o/2,1);case"speed":return e.randomInRange(.4,.1);case"fill":return!1;case"line":return!0}},o.getOptionProcessedValue=function(t,o,i){return"offsetTop"===t||"offsetLeft"===t||"crestHeight"===t?e.calcQuantity(o,i):o},o.prototype.createDots=function(){for(var t=this.canvasWidth,e=this.waveLength,o=this.options.num;o--;){for(var i=[],s=c/e[o],n=0;n<=t;n++)i.push({x:n,y:n*s});this.elements[o]=i}},o.prototype.draw=function(){var t=this;this.clearCanvasAndSetGlobalAttrs(),this.renderMaskMode((function(){t.drawWaves()})),this.requestAnimationFrame()},o.prototype.drawWaves=function(){var t=this,e=t.ctx,o=t.canvasWidth,i=t.canvasHeight,s=t.isPaused,n=this.options;this.elements.forEach((function(t,r){var a=n.crestHeight[r],f=n.offsetLeft[r],h=n.offsetTop[r],l=n.speed[r];e.save(),e.beginPath(),t.forEach((function(t,o){e[o?"lineTo":"moveTo"](t.x,a*Math.sin(t.y+f)+h),!s&&(t.y-=l)})),n.fill[r]&&(e.lineTo(o,i),e.lineTo(0,i),e.closePath(),e.fillStyle=n.fillColor[r],e.fill()),n.line[r]&&(e.lineWidth=n.lineWidth[r],e.strokeStyle=n.lineColor[r],e.stroke()),e.restore()}))},o.prototype.ownResizeEvent=function(){var t=this,e=["offsetLeft","offsetTop","crestHeight"],o=this.options;this.onResize((function(i,s){e.forEach((function(t){var e="offsetLeft"===t?i:s;o[t].forEach((function(t,o,i){i[o]=t*e}))})),t.elements.forEach((function(t){t.forEach((function(t){t.x*=i,t.y*=s}))}))}))},o.prototype.updateComplexOptions=function(t,i){if(i){var s="offsetLeft"===t?this.canvasWidth:this.canvasHeight,n=this.options,r=Array.isArray(i);n[t].forEach((function(n,a,f){var h=r?i[a]:i;h=o.getOptionProcessedValue(t,h,s),e.isUndefined(h)&&(h=n),f[a]=h}))}},o.prototype.updatePlainOptions=function(t,e){this.options[t]=e,"mask"===t&&this.loadMaskImage()},o.prototype.setOptions=function(t){if(this.isRunningSupported&&e.isPlainObject(t))for(var o in t)Object.hasOwnProperty.call(t,o)&&(-1!==d.indexOf(o)?this.updatePlainOptions(o,t[o]):-1!==u.indexOf(o)&&this.updateComplexOptions(o,t[o]))},o.defaultConfig={num:3,fill:!1,fillColor:[],line:!0,lineColor:[],lineWidth:[],offsetLeft:[],offsetTop:[],crestHeight:[],crestCount:[],speed:[]},o}(n.default),y=["font","textColor","textFormatter","borderRadius"];return function(t){function o(i,s){var n=t.call(this,i,e.merge({},o.defaultConfig,s))||this;return n.progress=0,n.isCompletedImmediately=!1,n.fastStepValue=1,n}return a(o,t),o.prototype.init=function(){this.halfCH=this.canvasHeight/2,this.setOffsetTop(this.canvasHeight),this.setCanvasStyle(),this.ownResizeEvent(),this.optionsNormalize(),this.loadMaskImage(),this.createDots(),this.waveLoadingResizeEvent()},o.prototype.setOffsetTop=function(t){var e=this.options.offsetTop;Array.isArray(e)?e.forEach((function(e,o,i){i[o]=t})):this.options.offsetTop=t},o.prototype.setCanvasStyle=function(){this.canvas.style.borderRadius=this.options.borderRadius},o.prototype.draw=function(){this.calcProgress(),this.progress<100?(this.mainDrawing(),this.requestAnimationFrame()):(this.progress=100,this.mainDrawing(),this.eventEmitter.trigger(l.FINISHED))},o.prototype.mainDrawing=function(){var t=this;this.eventEmitter.trigger(l.PROGRESS,this.progress),this.calcOffsetTop(),this.clearCanvasAndSetGlobalAttrs(),this.renderMaskMode((function(){t.drawWaves()})),this.drawText()},o.prototype.drawText=function(){var t=this,o=t.ctx,i=t.canvasWidth,s=t.halfCH,n=t.progress,r=this.options,a=r.font,f=r.textFormatter,h=r.textColor;if(e.isString(f)&&f){var l=f.replace(/%d/g,String(Math.floor(n)));o.save(),o.font=a;var p=(i-o.measureText(l).width)/2;o.textBaseline="middle",o.fillStyle=h,o.font=a,o.fillText(l,p,s),o.restore()}},o.prototype.calcProgress=function(){if(this.isCompletedImmediately)return this.progress+=this.fastStepValue,void(this.fastStepValue+=.5);if(!(this.progress>=o.progressThreshold)){this.startTime||(this.startTime=Date.now());var t=Date.now()-this.startTime,e=t/this.options.duration;e<=1&&(this.progress=s.default[this.options.easing](e,t,0,100,this.options.duration),this.progress+.9>=o.progressThreshold&&(this.progress=o.progressThreshold))}},o.prototype.calcOffsetTop=function(){if(this.isCompletedImmediately||!(this.progress>=o.progressThreshold)){var t=Math.max.apply(Math,this.options.crestHeight),e=100===this.progress?-t:Math.ceil((100-this.progress)/100*this.canvasHeight+t);this.setOffsetTop(e)}},o.prototype.waveLoadingResizeEvent=function(){var t=this;this.onResize((function(){t.halfCH=t.canvasHeight/2,100===t.progress&&t.draw()}))},o.prototype.setOptions=function(o){if(this.isRunningSupported&&e.isPlainObject(o))for(var i in t.prototype.setOptions.call(this,o),o)if(Object.hasOwnProperty.call(o,i)&&-1!==y.indexOf(i)){var s=o[i];this.options[i]=s,"borderRadius"===i&&this.setCanvasStyle()}},o.prototype.done=function(){this.isRunningSupported&&!this.isCompletedImmediately&&(this.isCompletedImmediately=!0)},o.prototype.onProgress=function(){for(var t,e=[],o=0;o<arguments.length;o++)e[o]=arguments[o];return(t=this.eventEmitter).on.apply(t,f([l.PROGRESS],e)),this},o.prototype.onFinished=function(){for(var t,e=[],o=0;o<arguments.length;o++)e[o]=arguments[o];return(t=this.eventEmitter).on.apply(t,f([l.FINISHED],e)),this},o.defaultConfig={num:1,font:"normal 400 16px Arial",textColor:"#333",textFormatter:"loading...%d%",fill:!0,line:!1,fillColor:"#27C9E5",borderRadius:"50%",offsetLeft:0,crestHeight:4,crestCount:1,speed:.3,duration:5e3,easing:"swing"},o.progressThreshold=99.99,o}(v)}(JParticles.easing,JParticles.utils,JParticles.classes.Mask);