15 lines
3.4 KiB
JavaScript
15 lines
3.4 KiB
JavaScript
|
"use strict";function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(a,b){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a)){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}var Gradientify=/*#__PURE__*/function(){// In miliseconds
|
|||
|
|
// setInterval type (yes, it's a number. lol)
|
|||
|
|
function a(b,c,d){_classCallCheck(this,a),this.target=b,this.gradients=c,this.fadeInterval=d,this.createGradientElements(),this.appendGradients(),this.startAnimation()}/*
|
|||
|
|
This guy beneath is responsible for creating
|
|||
|
|
divs with gradient backgrounds, which are going
|
|||
|
|
to be appended to the target element(s) 👩🏻🔬
|
|||
|
|
*/return _createClass(a,[{key:"createGradientElements",value:function createGradientElements(){var a=this,b=Array.from(document.querySelectorAll(this.target));this.gradientElements=b.map(function(){return a.gradients.map(function(b,c){var d=document.createElement("div");return Object.assign(d.style,{position:"absolute",height:"100%",width:"100%",opacity:0===c?1:0,top:0,left:0,transitionTimingFunction:"linear",backgroundImage:b,transitionDuration:"".concat(a.fadeInterval/1e3,"s")}),d})})}// Time to append our gradients! 🧚♀️
|
|||
|
|
},{key:"appendGradients",value:function appendGradients(){var a=this,b=document.querySelectorAll(this.target);b.forEach(function(b,c){if(b instanceof HTMLElement)"absolute"!==b.style.position&&(b.style.position="relative"),a.gradientElements[c].forEach(function(a){b.appendChild(a)});else throw new Error("Element ".concat(a.target," doesn't exists!"))})}/*
|
|||
|
|
Here lies the whole magic of this library:
|
|||
|
|
Every X seconds we set the opacity of the next
|
|||
|
|
gradient element to 1, and a CSS transition does the rest. Yay!
|
|||
|
|
*uncomfortably complex computations grinning in the background*
|
|||
|
|
*/},{key:"startAnimation",value:function startAnimation(){var a=this;this.interval=setInterval(function(){var b=!0,c=!1,d=void 0;try{for(var e,f=a.gradientElements.entries()[Symbol.iterator]();!(b=(e=f.next()).done);b=!0){var g=_slicedToArray(e.value,2),h=g[0],i=g[1],j=!0,k=!1,l=void 0;try{for(var m,n=i.entries()[Symbol.iterator]();!(j=(m=n.next()).done);j=!0){var o=_slicedToArray(m.value,2),p=o[0],q=o[1];if("1"===q.style.opacity){q.style.opacity="0";var r=a.gradientElements[h][++p%a.gradientElements[h].length];r.style.opacity="1";break}}}catch(a){k=!0,l=a}finally{try{j||null==n["return"]||n["return"]()}finally{if(k)throw l}}}}catch(a){c=!0,d=a}finally{try{b||null==f["return"]||f["return"]()}finally{if(c)throw d}}},this.fadeInterval)}// Fairly straightforward
|
|||
|
|
},{key:"stopAnimation",value:function stopAnimation(){clearInterval(this.interval)}}]),a}();
|