gradient-generator-ui/dist/gradient-generator.js

Library to create a gradient generator in vanilla-js with interactive user interface in html

!function webpackUniversalModuleDefinition(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.GradientGenerator=t():e.GradientGenerator=t()}(self,(function(){return(()=>{"use strict";var e={980:(e,t,n)=>{function normalizeHex(e){const t=e.match(/\w{6}$/);if(null!==t)return t[0];const n=e.match(/\w{3}$/);return n?n[0].split("").map((e=>e.repeat(2))).join(""):e}function hexToRGb(e){return{r:parseInt(normalizeHex(e).substring(0,2),16),g:parseInt(normalizeHex(e).substring(2,4),16),b:parseInt(normalizeHex(e).substring(4,6),16)}}function rgbToHex(e){let t=e.r.toString(16),n=e.g.toString(16),o=e.b.toString(16);return 1==t.length&&(t=`0${t}`),1==n.length&&(n=`0${n}`),1==o.length&&(o=`0${o}`),`#${t}${n}${o}`}function getIntermediateColor(e,t){const n=hexToRGb(e),o=hexToRGb(t);return rgbToHex({r:Math.round((o.r+n.r)/2),g:Math.round((o.g+n.g)/2),b:Math.round((o.b+n.b)/2)})}function getCorrectTextColor(e){const{r:t,g:n,b:o}=hexToRGb(e);return(299*t+587*n+114*o)/1e3>130?"#000000":"#ffffff"}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}n.d(t,{GradientGenerator:()=>GradientGenerator});const o=document.createElement.bind(document);class ColorControl{constructor(e){_defineProperty(this,"mainElement",void 0),_defineProperty(this,"deleteEl",void 0),_defineProperty(this,"positionEl",void 0),_defineProperty(this,"valueEl",void 0),this.mainElement=o("div"),this.mainElement.className="gg-control",this.deleteEl=function createDeleteControl(){const e=o("button");return e.className="gg-control-delete",e.innerHTML="&times;",e}(),this.valueEl=function createValueControl(e){const t=o("input");return t.className="gg-control-value",t.type="color",t.defaultValue=e,t}(`#${normalizeHex(e.colorHex)}`),this.positionEl=function createPositionControl(e){const t=o("input");return t.className="gg-control-position",t.type="range",t.step="1",t.min="0",t.max="100",t.dataset.min="0",t.dataset.max="100",t.defaultValue=e,t}(e.position.toString()),this.positionEl.addEventListener("input",(function(e){this.dataset.min&&this.valueAsNumber<+this.dataset.min&&(this.value=this.dataset.min),this.dataset.max&&this.valueAsNumber>+this.dataset.max&&(this.value=this.dataset.max)})),this.onDelete((()=>this.mainElement.remove())),this.onColorChange((()=>this.changeBg())),this.onPositionChange((()=>this.changePosition())),window.addEventListener("resize",(()=>this.changePosition())),setTimeout((()=>{this.mainElement.appendChild(this.deleteEl),this.mainElement.appendChild(this.positionEl),this.mainElement.appendChild(this.valueEl),this.changePosition(),this.changeBg()}))}get Element(){return this.mainElement}get ColorHex(){return this.valueEl.value}get Position(){return this.positionEl.valueAsNumber}changePosition(){const e=this.positionEl.valueAsNumber,t=(this.positionEl.clientWidth-16)*e/100+8+"px";this.deleteEl.style.setProperty("--pos-left",t),this.valueEl.style.setProperty("--pos-left",t)}changeBg(){const e=this.valueEl.value;this.deleteEl.style.setProperty("--gb-color",e),this.deleteEl.style.setProperty("--color",getCorrectTextColor(e)),this.positionEl.style.setProperty("--gb-color",e),this.positionEl.style.setProperty("--color",getCorrectTextColor(e))}onDelete(e){this.deleteEl.addEventListener("click",(t=>e(t)))}onPositionChange(e){this.positionEl.addEventListener("input",(t=>e(t)))}onColorChange(e){this.valueEl.addEventListener("input",(t=>e(t)))}setPositionLimits(e,t){this.positionEl.dataset.min=e.toString(),this.positionEl.dataset.max=t.toString()}}function GradientUI_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class GradientUI{constructor(e,t){this.mainElement=e,GradientUI_defineProperty(this,"gradientControls",[]),GradientUI_defineProperty(this,"observers",[]),this.init(t)}init(e){this.mainElement.classList.add("gg-container"),this.mainElement.childElementCount>0&&Array.from(this.mainElement.children).forEach((e=>{this.mainElement.removeChild(e)})),this.gradientControls=[],e.forEach((e=>{this.addElement(e)}))}onUpdateControls(e){this.observers.push(e)}getGradientControls(){return this.gradientControls}addElement(e){const t=new ColorControl(e),n=t.Element,o=this.gradientControls.findIndex((t=>t.Position>e.position));if(o>-1){const e=this.gradientControls[o];this.mainElement.insertBefore(n,e.Element),this.gradientControls.splice(o,0,t)}else this.mainElement.appendChild(n),this.gradientControls.push(t);t.onDelete((()=>{this.gradientControls=this.gradientControls.filter((e=>e!==t)),this.changeGradientBg(),this.observers.forEach((e=>e(this.gradientControls)))})),t.onPositionChange((()=>{let e=0,t=100;this.gradientControls.forEach(((n,o)=>{if(o+1!==this.gradientControls.length){const e=this.gradientControls[o+1];t=e.Position}else t=100;n.setPositionLimits(e,t),e=n.Position})),this.observers.forEach((e=>e(this.gradientControls))),this.changeGradientBg()})),t.onColorChange((()=>{this.observers.forEach((e=>e(this.gradientControls))),this.changeGradientBg()})),this.changeGradientBg()}changeGradientBg(){if(this.gradientControls.length>0){const e=this.gradientControls.map((e=>`${e.ColorHex} ${e.Position}%`)).join();this.mainElement.style.background=`\n        linear-gradient(to right, \n          #000000 0%,\n          ${e},\n          #ffffff 100%\n        )\n      `}else this.mainElement.style.background="\n        linear-gradient(to right, #000000, #ffffff)\n      "}}function Manager_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class GeneratorManager{constructor({generator:e,keepChanges:t=!0}){if(Manager_defineProperty(this,"generator",void 0),Manager_defineProperty(this,"addMode",!1),Manager_defineProperty(this,"cacheGradientColors",[]),Manager_defineProperty(this,"keepChanges",void 0),!e)throw new Error("A Gradient Generator must be provided");this.generator=e,this.keepChanges=t;const n=this.generator.getMainElement();this.cacheGradientColors=this.generator.getGradientColors(),n.addEventListener("click",(t=>{if(this.addMode){const o=[{colorHex:"#000000",position:0},...this.generator.getGradientColors(),{colorHex:"#ffffff",position:100}],r=100*t.offsetX/n.clientWidth,i=o.findIndex((e=>e.position>r)),s=o[i-1].colorHex,a=o[i].colorHex;e.addColors({colorHex:getIntermediateColor(s,a),position:r}),this.cancelAddMode(),this.keepChanges&&(this.cacheGradientColors=this.generator.getGradientColors())}}))}activateAddMode(){this.addMode=!0;this.generator.getMainElement().classList.add("gg-add")}cancelAddMode(){this.addMode=!1;this.generator.getMainElement().classList.remove("gg-add")}saveColors(){this.cancelAddMode(),this.keepChanges||(this.cacheGradientColors=this.generator.getGradientColors())}restoreColors(){this.cancelAddMode(),this.keepChanges||this.generator.setGradientColors(this.cacheGradientColors)}}function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(n),!0).forEach((function(t){Generator_defineProperty(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Generator_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const r=[{colorHex:"#ff0000",position:10},{colorHex:"#ffff00",position:40},{colorHex:"#00ff77",position:70}];class GradientGenerator{constructor({mainElement:e,initialColors:t=r}){Generator_defineProperty(this,"UI",null),Generator_defineProperty(this,"mainElement",null),Generator_defineProperty(this,"colors",void 0),e&&(this.mainElement=e,this.UI=new GradientUI(e,t),this.UI.onUpdateControls((e=>{this.colors=e.map((e=>({colorHex:e.ColorHex,position:e.Position})))}))),this.colors=t}getMainElement(){if(!this.mainElement)throw new Error("There is no main element in the generator");return this.mainElement}getGradientColors(){return[...this.colors]}setGradientColors(e){this.colors=[...e],this.UI&&this.UI.init(e)}addColors(...e){e.forEach((e=>{const t=this.colors.findIndex((t=>t.position>e.position));t>-1?this.colors.splice(t,0,e):this.colors.push(e),this.UI&&this.UI.addElement(e)}))}generateColors(e=100){return function createGradient(e,t=100){const n=[];for(let o=0;o<e.length-1;o++){const r=e[o],i=e[o+1],s=(i.position-r.position)*(t/100);if(s>0){0===o&&n.push(`#${normalizeHex(r.colorHex)}`);const e=hexToRGb(r.colorHex),t=hexToRGb(i.colorHex),a={r:Math.trunc((t.r-e.r)/s),g:Math.trunc((t.g-e.g)/s),b:Math.trunc((t.b-e.b)/s)};for(let t=1;t<s;t++){const o=rgbToHex({r:Math.trunc(e.r+t*a.r),g:Math.trunc(e.g+t*a.g),b:Math.trunc(e.b+t*a.b)});7===o.length&&n.push(o)}n.push(`#${normalizeHex(i.colorHex)}`)}}return n}([{colorHex:"#000000",position:0},...this.colors,{colorHex:"#ffffff",position:100}],e)}createUIManager(e){return new GeneratorManager(_objectSpread(_objectSpread({},e),{},{generator:this}))}}},812:()=>{}},t={};function __webpack_require__(n){if(t[n])return t[n].exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}return __webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__(812),__webpack_require__(980)})().GradientGenerator}));
//# sourceMappingURL=gradient-generator.js.map