diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 27b70c7b..d91d28c6 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -42,7 +42,7 @@ @import "main"; @import "rooms"; @import "sessions"; -@import "monolith.min.css"; +@import "monolith.min.scss"; @import url(https://fonts.googleapis.com/css?family=Roboto:400,500|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap&subset=latin-ext); diff --git a/config/environments/production.rb b/config/environments/production.rb index 9a7250a3..6a3bc4ac 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -6,14 +6,6 @@ Rails.application.configure do # Code is not reloaded between requests. config.cache_classes = true - # Cache controller code - config.action_controller.perform_caching = true - - config.cache_store = :memory_store - config.public_file_server.headers = { - 'Cache-Control' => "public, max-age=#{1.years.to_i}" - } - # Eager load code on boot. This eager loads most of Rails and # your application in memory, allowing both threaded web servers # and those relying on copy on write to perform better. @@ -24,6 +16,11 @@ Rails.application.configure do config.consider_all_requests_local = false config.action_controller.perform_caching = true + config.cache_store = :memory_store + config.public_file_server.headers = { + 'Cache-Control' => "public, max-age=#{1.years.to_i}" + } + # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"] # or in config/master.key. This key is used to decrypt credentials (and other encrypted files). # config.require_master_key = true diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 389a12d7..89011c0e 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -13,4 +13,4 @@ Rails.application.config.assets.version = '1.0' # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets # folder are already added. -Rails.application.config.assets.precompile += %w(pickr.min.js pickr.min.js.map monolith.min.css) +Rails.application.config.assets.precompile += %w(pickr.min.js monolith.min.scss) diff --git a/vendor/assets/javascripts/pickr.min.js b/vendor/assets/javascripts/pickr.min.js index 158b7a3a..18552bed 100644 --- a/vendor/assets/javascripts/pickr.min.js +++ b/vendor/assets/javascripts/pickr.min.js @@ -1,3 +1,2 @@ /*! Pickr 1.3.0 MIT | https://github.com/Simonwep/pickr */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)o.d(n,i,function(e){return t[e]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){"use strict";o.r(e);var n={};function i(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),o.push.apply(o,n)}return o}function r(t){for(var e=1;et)){function o(o){const n=[.001,.01,.1][Number(o.shiftKey||2*o.ctrlKey)]*(o.deltaY<0?1:-1);let i=0,r=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,(t,o)=>o<=r&&o+t.length>=r?(r=o,e(Number(t),n,i)):(i++,t)),t.focus(),t.setSelectionRange(r,r),o.preventDefault(),t.dispatchEvent(new Event("input"))}c(t,"focus",()=>c(window,"wheel",o,{passive:!1})),c(t,"blur",()=>a(window,"wheel",o))}const{min:m,max:v,floor:b,round:y}=Math;function g(t,e,o){e/=100,o/=100;const n=b(t=t/360*6),i=t-n,r=o*(1-e),s=o*(1-i*e),c=o*(1-(1-i)*e),a=n%6;return[255*[o,s,r,r,c,o][a],255*[c,o,o,s,r,r][a],255*[r,r,c,o,o,s][a]]}function _(t,e,o){const n=(2-(e/=100))*(o/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*o/(2*n):e*o/(2-2*n)),[t,100*e,100*n]}function w(t,e,o){let n,i,r;const s=m(t/=255,e/=255,o/=255),c=v(t,e,o),a=c-s;if(0===a)n=i=0;else{i=a/c;const r=((c-t)/6+a/2)/a,s=((c-e)/6+a/2)/a,l=((c-o)/6+a/2)/a;t===c?n=l-s:e===c?n=1/3+r-l:o===c&&(n=2/3+s-r),n<0?n+=1:n>1&&(n-=1)}return[360*n,100*i,100*(r=c)]}function C(t,e,o,n){return e/=100,o/=100,[...w(255*(1-m(1,(t/=100)*(1-(n/=100))+n)),255*(1-m(1,e*(1-n)+n)),255*(1-m(1,o*(1-n)+n)))]}function A(t,e,o){return e/=100,[t,2*(e*=(o/=100)<.5?o:1-o)/(o+e)*100,100*(o+e)]}function k(t){return w(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function S(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let n;t:for(const i in e){if(!(n=e[i].exec(t)))continue;const r=!!n[2];switch(i){case"cmyk":{const[,t,e,r,s]=o(n);if(t>100||e>100||r>100||s>100)break t;return{values:C(t,e,r,s),type:i}}case"rgba":{const[,,,t,e,s,c]=o(n);if(t>255||e>255||s>255||c<0||c>1||r===!c)break t;return{values:[...w(t,e,s),c],a:c,type:i}}case"hexa":{let[,t]=n;4!==t.length&&3!==t.length||(t=t.split("").map(t=>t+t).join(""));const e=t.substring(0,6);let o=t.substring(6);return o=o?parseInt(o,16)/255:void 0,{values:[...k(e),o],a:o,type:i}}case"hsla":{const[,,,t,e,s,c]=o(n);if(t>360||e>100||s>100||c<0||c>1||r===!c)break t;return{values:[...A(t,e,s),c],a:c,type:i}}case"hsva":{const[,,,t,e,s,c]=o(n);if(t>360||e>100||s>100||c<0||c>1||r===!c)break t;return{values:[t,e,s,c],a:c,type:i}}}}return{values:null,type:null}}function O(t=0,e=0,o=0,n=1){const i=(t,e)=>(o=-1)=>e(~o?t.map(t=>Number(t.toFixed(o))):t),r={h:t,s:e,v:o,a:n,toHSVA(){const t=[r.h,r.s,r.v,r.a];return t.toString=i(t,t=>"hsva(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(r.a,")")),t},toHSLA(){const t=[..._(r.h,r.s,r.v),r.a];return t.toString=i(t,t=>"hsla(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(r.a,")")),t},toRGBA(){const t=[...g(r.h,r.s,r.v),r.a];return t.toString=i(t,t=>"rgba(".concat(t[0],", ").concat(t[1],", ").concat(t[2],", ").concat(r.a,")")),t},toCMYK(){const t=function(t,e,o){const n=g(t,e,o),i=n[0]/255,r=n[1]/255,s=n[2]/255;let c,a,l,p;return[100*(a=1===(c=m(1-i,1-r,1-s))?0:(1-i-c)/(1-c)),100*(l=1===c?0:(1-r-c)/(1-c)),100*(p=1===c?0:(1-s-c)/(1-c)),100*c]}(r.h,r.s,r.v);return t.toString=i(t,t=>"cmyk(".concat(t[0],"%, ").concat(t[1],"%, ").concat(t[2],"%, ").concat(t[3],"%)")),t},toHEXA(){const t=function(t,e,o){return g(t,e,o).map(t=>y(t).toString(16).padStart(2,"0"))}(r.h,r.s,r.v),e=r.a>=1?"":Number((255*r.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=()=>"#".concat(t.join("").toUpperCase()),t},clone:()=>O(r.h,r.s,r.v,r.a)};return r}const j=t=>Math.max(Math.min(t,1),0);function E(t){const e={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},t),_tapstart(t){c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove(t){const{options:{lock:n},cache:i}=e,{element:r,wrapper:s}=o,c=s.getBoundingClientRect();let a=0,l=0;if(t){const e=t&&t.touches&&t.touches[0];a=t?(e||t).clientX:0,l=t?(e||t).clientY:0,ac.left+c.width&&(a=c.left+c.width),lc.top+c.height&&(l=c.top+c.height),a-=c.left,l-=c.top}else i&&(a=i.x*c.width,l=i.y*c.height);"h"!==n&&(r.style.left="calc(".concat(a/c.width*100,"% - ").concat(r.offsetWidth/2,"px)")),"v"!==n&&(r.style.top="calc(".concat(l/c.height*100,"% - ").concat(r.offsetHeight/2,"px)")),e.cache={x:a/c.width,y:l/c.height};const p=j(a/s.offsetWidth),u=j(l/s.offsetHeight);switch(n){case"v":return o.onchange(p);case"h":return o.onchange(u);default:return o.onchange(p,u)}},_tapstop(){e.options.onstop(),a(document,["mouseup","touchend","touchcancel"],e._tapstop),a(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(t=0,o=0){const{left:n,top:i,width:r,height:s}=e.options.wrapper.getBoundingClientRect();"h"===e.options.lock&&(o=t),e._tapmove({clientX:n+r*t,clientY:i+s*o})},destroy(){const{options:t,_tapstart:o}=e;a([t.wrapper,t.element],"mousedown",o),a([t.wrapper,t.element],"touchstart",o,{passive:!1})}},{options:o,_tapstart:n}=e;return c([o.wrapper,o.element],"mousedown",n),c([o.wrapper,o.element],"touchstart",n,{passive:!1}),e}function L(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=c(t.elements,"click",e=>{t.elements.forEach(o=>o.classList[e.target===o?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>a(...e)}}function P({el:t,reference:e,padding:o=8}){const n={start:"sme",middle:"mse",end:"ems"},i={top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},r=((t={})=>(e,o=t[e])=>{if(o)return o;const[n,i="middle"]=e.split("-"),r="top"===n||"bottom"===n;return t[e]={position:n,variant:i,isVertical:r}})();return{update(s){const{position:c,variant:a,isVertical:l}=r(s),p=e.getBoundingClientRect(),u=t.getBoundingClientRect(),h=t=>t?{t:p.top-u.height-o,b:p.bottom+o}:{r:p.right+o,l:p.left-u.width-o},d=t=>t?{s:p.left+p.width-u.width,m:-u.width/2+(p.left+p.width/2),e:p.left}:{s:p.bottom-u.height,m:p.bottom-p.height/2-u.height/2,e:p.bottom-p.height},f={};function m(e,o,n){const i="top"===n,r=i?u.height:u.width,s=window[i?"innerHeight":"innerWidth"];for(const i of e){const e=o[i],c=f[n]="".concat(e,"px");if(e>0&&e+r{const c=t=>t?"":'style="display:none" hidden',a=h('\n
\n\n '.concat(o?"":'','\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n
\n ")),l=a.interaction;return l.options.find(t=>!t.hidden&&!t.classList.add("active")),l.type=()=>l.options.find(t=>t.classList.contains("active")),a};function B(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class H{constructor(t){B(this,"_initializingActive",!0),B(this,"_recalc",!0),B(this,"_color",O()),B(this,"_lastColor",O()),B(this,"_swatchColors",[]),B(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=t=Object.assign({appClass:null,theme:"classic",useAsButton:!1,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},t);const{swatches:e,components:o,theme:n,sliders:i,lockOpacity:r}=t;["nano","monolith"].includes(n)&&!i&&(t.sliders="h"),o.interaction||(o.interaction={});const{preview:s,opacity:c,hue:a,palette:l}=o;o.opacity=!r&&c,o.palette=l||s||c||a,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach(t=>this.addSwatch(t)),this._nanopop=P({reference:this._root.button,el:this._root.app});const{app:p}=this._root,u=this;requestAnimationFrame(function e(){if(!p.offsetWidth&&p.parentElement!==document.body)return requestAnimationFrame(e);u.setColor(t.default),u._rePositioningPicker(),t.defaultRepresentation&&(u._representation=t.defaultRepresentation,u.setColorRepresentation(u._representation)),t.showAlways&&u.show(),u._initializingActive=!1,u._emit("init")})}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=t.el.split(/>>/g).reduce((t,e,o,n)=>(t=t.querySelector(e),ot._emit("changestop",t),onchange(o,n){if(!e.palette)return;const{_color:i,_root:r,options:s}=t;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput());const c=i.toRGBA().toString(0);this.element.style.background=c,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(i.a,"), transparent),\n linear-gradient(to left, hsla(").concat(i.h,", 100%, 50%, ").concat(i.a,"), rgba(255, 255, 255, ").concat(i.a,"))\n "),s.comparison||(r.button.style.color=c,s.useAsButton||(r.preview.lastColor.style.color=c));const a=i.toHEXA().toString();for(const e of t._swatchColors){const{el:t,color:o}=e;t.classList[a===o.toHEXA().toString()?"add":"remove"]("pcr-active")}r.preview.currentColor.style.color=c,t.options.comparison||r.button.classList.remove("clear")}}),hue:E({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop",t),onchange(o){e.hue&&e.palette&&(t._recalc&&(t._color.h=360*o),this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),r.palette.trigger())}}),opacity:E({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop",t),onchange(o){e.opacity&&e.palette&&(t._recalc&&(t._color.a=Math.round(100*o)/100),this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),r.palette.trigger())}}),selectable:L({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput()}})};this._components=r}_bindEvents(){const{_root:t,options:e}=this,o=[c(t.interaction.clear,"click",()=>this._clearColor()),c([t.interaction.cancel,t.preview.lastColor],"click",()=>{this._emit("cancel",this),this.setHSVA(...this._lastColor.toHSVA(),!0)}),c(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),c(t.interaction.result,["keyup","input"],t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),c(t.interaction.result,["focus","blur"],t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput()}),c([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const n=e.closeWithKey;o.push(c(t.button,"click",()=>this.isOpen()?this.hide():this.show()),c(document,"keyup",t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide()),c(document,["touchstart","mousedown"],e=>{this.isOpen()&&!d(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};f(t.interaction.result,(t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],r=t+(e>=100?1e3*o:o);return r<=0?0:Number((r{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout(()=>t=null,100),requestAnimationFrame(function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e)})):(clearTimeout(t),t=setTimeout(()=>t=null,100)))},{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;if(!t.inline){const{app:e}=this._root;matchMedia("(max-width: 576px)").matches?Object.assign(e.style,{margin:"auto",height:"".concat(e.getBoundingClientRect().height,"px"),top:0,bottom:0,left:0,right:0}):(Object.assign(e.style,{margin:null,right:null,top:null,bottom:null,left:null,height:null}),this._nanopop.update(t.position))}}_updateOutput(){const{_root:t,_color:e,options:o}=this;if(t.interaction.type()){const n="to".concat(t.interaction.type().getAttribute("data-type"));t.interaction.result.value="function"==typeof e[n]?e[n]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",e)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||(e.button.style.color="rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),o.showAlways||this.hide(),this._initializingActive||t||(this._emit("save",null),this._emit("clear",this))}_parseLocalColor(t){const{values:e,type:o,a:n}=S(t),{lockOpacity:i}=this.options,r=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&r?null:e,type:o}}_emit(t,...e){this._eventListener[t].forEach(t=>t(...e,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t];if(o){const t=o.indexOf(e);~t&&o.splice(t,1)}return this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=O(...e),i=p('','\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n \n ")),l=a.interaction;return l.options.find(t=>!t.hidden&&!t.classList.add("active")),l.type=()=>l.options.find(t=>t.classList.contains("active")),a};function B(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class H{constructor(t){B(this,"_initializingActive",!0),B(this,"_recalc",!0),B(this,"_color",O()),B(this,"_lastColor",O()),B(this,"_swatchColors",[]),B(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=t=Object.assign({appClass:null,theme:"classic",useAsButton:!1,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},t);const{swatches:e,components:o,theme:n,sliders:i,lockOpacity:r}=t;["nano","monolith"].includes(n)&&!i&&(t.sliders="h"),o.interaction||(o.interaction={});const{preview:s,opacity:c,hue:a,palette:l}=o;o.opacity=!r&&c,o.palette=l||s||c||a,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach(t=>this.addSwatch(t)),this._nanopop=P({reference:this._root.button,el:this._root.app});const{app:p}=this._root,u=this;requestAnimationFrame(function e(){if(!p.offsetWidth&&p.parentElement!==document.body)return requestAnimationFrame(e);u.setColor(t.default),u._rePositioningPicker(),t.defaultRepresentation&&(u._representation=t.defaultRepresentation,u.setColorRepresentation(u._representation)),t.showAlways&&u.show(),u._initializingActive=!1,u._emit("init")})}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=t.el.split(/>>/g).reduce((t,e,o,n)=>(t=t.querySelector(e),ot._emit("changestop",t),onchange(o,n){if(!e.palette)return;const{_color:i,_root:r,options:s}=t;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput());const c=i.toRGBA().toString(0);this.element.style.background=c,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(i.a,"), transparent),\n linear-gradient(to left, hsla(").concat(i.h,", 100%, 50%, ").concat(i.a,"), rgba(255, 255, 255, ").concat(i.a,"))\n "),s.comparison||(r.button.style.color=c,s.useAsButton||(r.preview.lastColor.style.color=c));const a=i.toHEXA().toString();for(const e of t._swatchColors){const{el:t,color:o}=e;t.classList[a===o.toHEXA().toString()?"add":"remove"]("pcr-active")}r.preview.currentColor.style.color=c,t.options.comparison||r.button.classList.remove("clear")}}),hue:E({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop",t),onchange(o){e.hue&&e.palette&&(t._recalc&&(t._color.h=360*o),this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),r.palette.trigger())}}),opacity:E({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop",t),onchange(o){e.opacity&&e.palette&&(t._recalc&&(t._color.a=Math.round(100*o)/100),this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),r.palette.trigger())}}),selectable:L({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput()}})};this._components=r}_bindEvents(){const{_root:t,options:e}=this,o=[c(t.interaction.clear,"click",()=>this._clearColor()),c([t.interaction.cancel,t.preview.lastColor],"click",()=>{this._emit("cancel",this),this.setHSVA(...this._lastColor.toHSVA(),!0)}),c(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),c(t.interaction.result,["keyup","input"],t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),c(t.interaction.result,["focus","blur"],t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput()}),c([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const n=e.closeWithKey;o.push(c(t.button,"click",()=>this.isOpen()?this.hide():this.show()),c(document,"keyup",t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide()),c(document,["touchstart","mousedown"],e=>{this.isOpen()&&!d(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};f(t.interaction.result,(t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],r=t+(e>=100?1e3*o:o);return r<=0?0:Number((r{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout(()=>t=null,100),requestAnimationFrame(function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e)})):(clearTimeout(t),t=setTimeout(()=>t=null,100)))},{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;if(!t.inline){const{app:e}=this._root;matchMedia("(max-width: 576px)").matches?Object.assign(e.style,{margin:"auto",height:"".concat(e.getBoundingClientRect().height,"px"),top:0,bottom:0,left:0,right:0}):(Object.assign(e.style,{margin:null,right:null,top:null,bottom:null,left:null,height:null}),this._nanopop.update(t.position))}}_updateOutput(){const{_root:t,_color:e,options:o}=this;if(t.interaction.type()){const n="to".concat(t.interaction.type().getAttribute("data-type"));t.interaction.result.value="function"==typeof e[n]?e[n]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",e)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||(e.button.style.color="rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),o.showAlways||this.hide(),this._initializingActive||t||(this._emit("save",null),this._emit("clear",this))}_parseLocalColor(t){const{values:e,type:o,a:n}=S(t),{lockOpacity:i}=this.options,r=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&r?null:e,type:o}}_emit(t,...e){this._eventListener[t].forEach(t=>t(...e,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t];if(o){const t=o.indexOf(e);~t&&o.splice(t,1)}return this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=O(...e),i=p(''}\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n `);\r\n\r\n const int = root.interaction;\r\n\r\n // Select option which is not hidden\r\n int.options.find(o => !o.hidden && !o.classList.add('active'));\r\n\r\n // Create method to find currenlty active option\r\n int.type = () => int.options.find(e => e.classList.contains('active'));\r\n return root;\r\n}\r\n","// Import utils\nimport * as _ from './utils/utils';\nimport {parseToHSVA} from './utils/color';\n\n// Import classes\nimport {HSVaColor} from './utils/hsvacolor';\nimport Moveable from './libs/moveable';\nimport Selectable from './libs/selectable';\nimport Nanopop from './libs/nanopop';\nimport buildPickr from './template';\n\nclass Pickr {\n\n // Will be used to prevent specific actions during initilization\n _initializingActive = true;\n\n // If the current color value should be recalculated\n _recalc = true;\n\n // Current and last color for comparison\n _color = HSVaColor();\n _lastColor = HSVaColor();\n _swatchColors = [];\n\n // Evenlistener name: [callbacks]\n _eventListener = {\n init: [],\n save: [],\n hide: [],\n show: [],\n clear: [],\n change: [],\n changestop: [],\n cancel: [],\n swatchselect: []\n };\n\n constructor(opt) {\n\n // Assign default values\n this.options = opt = Object.assign({\n appClass: null,\n theme: 'classic',\n useAsButton: false,\n disabled: false,\n comparison: true,\n closeOnScroll: false,\n outputPrecision: 0,\n lockOpacity: false,\n autoReposition: true,\n\n components: {\n interaction: {}\n },\n\n strings: {},\n swatches: null,\n inline: false,\n sliders: null,\n\n default: '#42445a',\n defaultRepresentation: null,\n position: 'bottom-middle',\n adjustableNumbers: true,\n showAlways: false,\n\n closeWithKey: 'Escape'\n }, opt);\n\n const {swatches, components, theme, sliders, lockOpacity} = opt;\n\n if (['nano', 'monolith'].includes(theme) && !sliders) {\n opt.sliders = 'h';\n }\n\n // Check interaction section\n if (!components.interaction) {\n components.interaction = {};\n }\n\n // Overwrite palette if preview, opacity or hue are true\n const {preview, opacity, hue, palette} = components;\n components.opacity = (!lockOpacity && opacity);\n components.palette = palette || preview || opacity || hue;\n\n // Initialize picker\n this._preBuild();\n this._buildComponents();\n this._bindEvents();\n this._finalBuild();\n\n // Append pre-defined swatch colors\n if (swatches && swatches.length) {\n swatches.forEach(color => this.addSwatch(color));\n }\n\n // Initialize positioning engine\n this._nanopop = Nanopop({\n reference: this._root.button,\n el: this._root.app\n });\n\n // Initilization is finish, pickr is visible and ready for usage\n const {app} = this._root;\n const that = this;\n requestAnimationFrame((function cb() {\n\n if (!app.offsetWidth && app.parentElement !== document.body) {\n return requestAnimationFrame(cb);\n }\n\n // Apply default color\n that.setColor(opt.default);\n that._rePositioningPicker();\n\n // Initialize color representation\n if (opt.defaultRepresentation) {\n that._representation = opt.defaultRepresentation;\n that.setColorRepresentation(that._representation);\n }\n\n // Show pickr if locked\n if (opt.showAlways) {\n that.show();\n }\n\n // Initialization is done - pickr is usable, fire init event\n that._initializingActive = false;\n that._emit('init');\n }));\n }\n\n // Does only the absolutly basic thing to initialize the components\n _preBuild() {\n const opt = this.options;\n\n // Check if element is selector\n if (typeof opt.el === 'string') {\n\n // Resolve possible shadow dom access\n opt.el = opt.el.split(/>>/g).reduce((pv, cv, ci, a) => {\n pv = pv.querySelector(cv);\n return ci < a.length - 1 ? pv.shadowRoot : pv;\n }, document);\n }\n\n // Create element and append it to body to\n // prevent initialization errors\n this._root = buildPickr(opt);\n\n // Check if a custom button is used\n if (opt.useAsButton) {\n this._root.button = opt.el; // Replace button with customized button\n }\n\n document.body.appendChild(this._root.root);\n }\n\n _finalBuild() {\n const opt = this.options;\n const root = this._root;\n\n // Remove from body\n document.body.removeChild(root.root);\n\n if (opt.inline) {\n const parent = opt.el.parentElement;\n\n if (opt.el.nextSibling) {\n parent.insertBefore(root.app, opt.el.nextSibling);\n } else {\n parent.appendChild(root.app);\n }\n } else {\n document.body.appendChild(root.app);\n }\n\n // Don't replace the the element if a custom button is used\n if (!opt.useAsButton) {\n\n // Replace element with actual color-picker\n opt.el.parentNode.replaceChild(root.root, opt.el);\n } else if (opt.inline) {\n opt.el.remove();\n }\n\n // Check if it should be immediatly disabled\n if (opt.disabled) {\n this.disable();\n }\n\n // Check if color comparison is disabled, if yes - remove transitions so everything keeps smoothly\n if (!opt.comparison) {\n root.button.style.transition = 'none';\n if (!opt.useAsButton) {\n root.preview.lastColor.style.transition = 'none';\n }\n }\n\n this.hide();\n }\n\n _buildComponents() {\n\n // Instance reference\n const inst = this;\n const cs = this.options.components;\n const sliders = (inst.options.sliders || 'v').repeat(2);\n const [so, sh] = sliders.match(/^[vh]+$/g) ? sliders : [];\n\n const components = {\n\n palette: Moveable({\n element: inst._root.palette.picker,\n wrapper: inst._root.palette.palette,\n\n onstop: () => inst._emit('changestop', inst),\n onchange(x, y) {\n if (!cs.palette) return;\n const {_color, _root, options} = inst;\n\n // Update the input field only if the user is currently not typing\n if (inst._recalc) {\n\n // Calculate saturation based on the position\n _color.s = x * 100;\n\n // Calculate the value\n _color.v = 100 - y * 100;\n\n // Prevent falling under zero\n _color.v < 0 ? _color.v = 0 : 0;\n inst._updateOutput();\n }\n\n // Set picker and gradient color\n const cssRGBaString = _color.toRGBA().toString(0);\n this.element.style.background = cssRGBaString;\n this.wrapper.style.background = `\n linear-gradient(to top, rgba(0, 0, 0, ${_color.a}), transparent),\n linear-gradient(to left, hsla(${_color.h}, 100%, 50%, ${_color.a}), rgba(255, 255, 255, ${_color.a}))\n `;\n\n // Check if color is locked\n if (!options.comparison) {\n _root.button.style.color = cssRGBaString;\n\n if (!options.useAsButton) {\n _root.preview.lastColor.style.color = cssRGBaString;\n }\n }\n\n // Check if there's a swatch which color matches the current one\n const hexa = _color.toHEXA().toString();\n for (const {el, color} of inst._swatchColors) {\n el.classList[hexa === color.toHEXA().toString() ? 'add' : 'remove']('pcr-active');\n }\n\n // Change current color\n _root.preview.currentColor.style.color = cssRGBaString;\n\n if (!inst.options.comparison) {\n\n // If the user changes the color, remove the cleared icon\n _root.button.classList.remove('clear');\n }\n }\n }),\n\n hue: Moveable({\n lock: sh === 'v' ? 'h' : 'v',\n element: inst._root.hue.picker,\n wrapper: inst._root.hue.slider,\n\n onstop: () => inst._emit('changestop', inst),\n onchange(v) {\n if (!cs.hue || !cs.palette) return;\n\n // Calculate hue\n if (inst._recalc) {\n inst._color.h = v * 360;\n }\n\n // Update color\n this.element.style.backgroundColor = `hsl(${inst._color.h}, 100%, 50%)`;\n components.palette.trigger();\n }\n }),\n\n opacity: Moveable({\n lock: so === 'v' ? 'h' : 'v',\n element: inst._root.opacity.picker,\n wrapper: inst._root.opacity.slider,\n\n onstop: () => inst._emit('changestop', inst),\n onchange(v) {\n if (!cs.opacity || !cs.palette) return;\n\n // Calculate opacity\n if (inst._recalc) {\n inst._color.a = Math.round(v * 1e2) / 100;\n }\n\n // Update color\n this.element.style.background = `rgba(0, 0, 0, ${inst._color.a})`;\n components.palette.trigger();\n }\n }),\n\n selectable: Selectable({\n elements: inst._root.interaction.options,\n className: 'active',\n\n onchange(e) {\n inst._representation = e.target.getAttribute('data-type').toUpperCase();\n inst._recalc && inst._updateOutput();\n }\n })\n };\n\n this._components = components;\n }\n\n _bindEvents() {\n const {_root, options} = this;\n\n const eventBindings = [\n\n // Clear color\n _.on(_root.interaction.clear, 'click', () => this._clearColor()),\n\n // Select last color on click\n _.on([\n _root.interaction.cancel,\n _root.preview.lastColor\n ], 'click', () => {\n this._emit('cancel', this);\n this.setHSVA(...this._lastColor.toHSVA(), true);\n }),\n\n // Save color\n _.on(_root.interaction.save, 'click', () => {\n !this.applyColor() && !options.showAlways && this.hide();\n }),\n\n _.on(_root.interaction.result, ['keyup', 'input'], e => {\n\n // Fire listener if initialization is finish and changed color was valid\n if (this.setColor(e.target.value, true) && !this._initializingActive) {\n this._emit('change', this._color);\n }\n\n e.stopImmediatePropagation();\n }),\n\n // Detect user input and disable auto-recalculation\n _.on(_root.interaction.result, ['focus', 'blur'], e => {\n this._recalc = e.type === 'blur';\n this._recalc && this._updateOutput();\n }),\n\n // Cancel input detection on color change\n _.on([\n _root.palette.palette,\n _root.palette.picker,\n _root.hue.slider,\n _root.hue.picker,\n _root.opacity.slider,\n _root.opacity.picker\n ], ['mousedown', 'touchstart'], () => this._recalc = true)\n ];\n\n // Provide hiding / showing abilities only if showAlways is false\n if (!options.showAlways) {\n const ck = options.closeWithKey;\n\n eventBindings.push(\n // Save and hide / show picker\n _.on(_root.button, 'click', () => this.isOpen() ? this.hide() : this.show()),\n\n // Close with escape key\n _.on(document, 'keyup', e => this.isOpen() && (e.key === ck || e.code === ck) && this.hide()),\n\n // Cancel selecting if the user taps behind the color picker\n _.on(document, ['touchstart', 'mousedown'], e => {\n if (this.isOpen() && !_.eventPath(e).some(el => el === _root.app || el === _root.button)) {\n this.hide();\n }\n }, {capture: true})\n );\n }\n\n // Make input adjustable if enabled\n if (options.adjustableNumbers) {\n const ranges = {\n rgba: [255, 255, 255, 1],\n hsva: [360, 100, 100, 1],\n hsla: [360, 100, 100, 1],\n cmyk: [100, 100, 100, 100]\n };\n\n _.adjustableInputNumbers(_root.interaction.result, (o, step, index) => {\n const range = ranges[this.getColorRepresentation().toLowerCase()];\n\n if (range) {\n const max = range[index];\n\n // Calculate next reasonable number\n const nv = o + (max >= 100 ? step * 1000 : step);\n\n // Apply range of zero up to max, fix floating-point issues\n return nv <= 0 ? 0 : Number((nv < max ? nv : max).toPrecision(3));\n }\n return o;\n\n });\n }\n\n if (options.autoReposition && !options.inline) {\n let timeout = null;\n const that = this;\n\n // Re-calc position on window resize, scroll and wheel\n eventBindings.push(\n _.on(window, ['scroll', 'resize'], () => {\n if (that.isOpen()) {\n\n if (options.closeOnScroll) {\n that.hide();\n }\n\n if (timeout === null) {\n timeout = setTimeout(() => timeout = null, 100);\n\n // Update position on every frame\n requestAnimationFrame(function rs() {\n that._rePositioningPicker();\n (timeout !== null) && requestAnimationFrame(rs);\n });\n } else {\n clearTimeout(timeout);\n timeout = setTimeout(() => timeout = null, 100);\n }\n }\n }, {capture: true})\n );\n }\n\n // Save bindings\n this._eventBindings = eventBindings;\n }\n\n _rePositioningPicker() {\n const {options} = this;\n\n // No repositioning needed if inline\n if (!options.inline) {\n const {app} = this._root;\n\n if (matchMedia('(max-width: 576px)').matches) {\n Object.assign(app.style, {\n margin: 'auto',\n height: `${app.getBoundingClientRect().height}px`,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n });\n } else {\n Object.assign(app.style, {\n margin: null,\n right: null,\n top: null,\n bottom: null,\n left: null,\n height: null\n });\n\n this._nanopop.update(options.position);\n }\n }\n }\n\n _updateOutput() {\n const {_root, _color, options} = this;\n\n // Check if component is present\n if (_root.interaction.type()) {\n\n // Construct function name and call if present\n const method = `to${_root.interaction.type().getAttribute('data-type')}`;\n _root.interaction.result.value = typeof _color[method] === 'function' ?\n _color[method]().toString(options.outputPrecision) : '';\n }\n\n // Fire listener if initialization is finish\n if (!this._initializingActive && this._recalc) {\n this._emit('change', _color);\n }\n }\n\n _clearColor(silent = false) {\n const {_root, options} = this;\n\n // Change only the button color if it isn't customized\n if (!options.useAsButton) {\n _root.button.style.color = 'rgba(0, 0, 0, 0.15)';\n }\n\n _root.button.classList.add('clear');\n\n if (!options.showAlways) {\n this.hide();\n }\n\n if (!this._initializingActive && !silent) {\n\n // Fire listener\n this._emit('save', null);\n this._emit('clear', this);\n }\n }\n\n _parseLocalColor(str) {\n const {values, type, a} = parseToHSVA(str);\n const {lockOpacity} = this.options;\n const alphaMakesAChange = a !== undefined && a !== 1;\n\n // If no opacity is applied, add undefined at the very end which gets\n // set to 1 in setHSVA\n if (values && values.length === 3) {\n values[3] = undefined;\n }\n\n return {\n values: (!values || (lockOpacity && alphaMakesAChange)) ? null : values,\n type\n };\n }\n\n _emit(event, ...args) {\n this._eventListener[event].forEach(cb => cb(...args, this));\n }\n\n on(event, cb) {\n\n // Validate\n if (typeof cb === 'function' && typeof event === 'string' && event in this._eventListener) {\n this._eventListener[event].push(cb);\n }\n\n return this;\n }\n\n off(event, cb) {\n const callBacks = this._eventListener[event];\n\n if (callBacks) {\n const index = callBacks.indexOf(cb);\n\n if (~index) {\n callBacks.splice(index, 1);\n }\n }\n\n return this;\n }\n\n /**\n * Appends a color to the swatch palette\n * @param color\n * @returns {boolean}\n */\n addSwatch(color) {\n const {values} = this._parseLocalColor(color);\n\n if (values) {\n const {_swatchColors, _root} = this;\n const color = HSVaColor(...values);\n\n // Create new swatch HTMLElement\n const el = _.createElementFromString(\n `