/* * Copyright © 2024 Regular Labs - All Rights Reserved * GNU General Public License version 2 or later */ (function(window,document,Math){var picker,currentEl,oldColor;var settings={el:'[data-rl-mini-colors]',parent:null,wrap:true,margin:2,swatches:[],swatchesOnly:false,alpha:true,autoClose:false,a11y:{open:'Open color picker',swatch:'Color swatch',}};function configure(options){if(typeof options!=='object'){return;} for(var key in options){switch(key){case'el':bindFields(options.el);if(options.wrap!==false){wrapFields(options.el);} break;case'parent':settings.parent=document.querySelector(options.parent);if(settings.parent){settings.parent.appendChild(picker);} break;case'margin':options.margin*=1;settings.margin=!isNaN(options.margin)?options.margin:settings.margin;break;case'wrap':if(options.el&&options.wrap){wrapFields(options.el);} break;case'swatches':if(Array.isArray(options.swatches)){(function(){var swatches=[];options.swatches.forEach(function(swatch,i){swatches.push("<button id=\"rl-mini-colors-swatch-"+i+"\" class=\"rl-mini-colors-button\" aria-labelledby=\"rl-mini-colors-swatch-label rl-mini-colors-swatch-"+i+"\" style=\"color: "+swatch+";\">"+swatch+"</button>");});if(swatches.length){getEl('rl-mini-colors-swatches').innerHTML="<div>"+swatches.join('')+"</div>";}})();} break;case'swatchesOnly':settings.swatchesOnly=!!options.swatchesOnly;picker.setAttribute('data-minimal',settings.swatchesOnly);if(settings.swatchesOnly){settings.autoClose=true;} break;case'a11y':var labels=options.a11y;var update=false;if(typeof labels==='object'){for(var label in labels){if(labels[label]&&settings.a11y[label]){settings.a11y[label]=labels[label];update=true;}}} if(update){var openLabel=getEl('rl-mini-colors-open-label');var swatchLabel=getEl('rl-mini-colors-swatch-label');openLabel.innerHTML=settings.a11y.open;swatchLabel.innerHTML=settings.a11y.swatch;} default:settings[key]=options[key];}}} function bindFields(selector){addListener(document,'click',selector,function(event){var parent=settings.parent;var coords=event.target.getBoundingClientRect();var scrollY=window.scrollY;var reposition={left:false,top:false};var offset={x:0,y:0};var left=coords.x;var top=scrollY+coords.y+coords.height+settings.margin;currentEl=event.target;picker.classList.add('rl-mini-colors-open');var pickerWidth=picker.offsetWidth;var pickerHeight=picker.offsetHeight;if(parent){var style=window.getComputedStyle(parent);var marginTop=parseFloat(style.marginTop);var borderTop=parseFloat(style.borderTopWidth);offset=parent.getBoundingClientRect();offset.y+=borderTop+scrollY;left-=offset.x;top-=offset.y;if(left+pickerWidth>parent.clientWidth){left+=coords.width-pickerWidth;reposition.left=true;} if(top+pickerHeight>parent.clientHeight-marginTop){top-=coords.height+pickerHeight+settings.margin*2;reposition.top=true;} top+=parent.scrollTop;}else{if(left+pickerWidth>document.documentElement.clientWidth){left+=coords.width-pickerWidth;reposition.left=true;} if(top+pickerHeight-scrollY>document.documentElement.clientHeight){top=scrollY+coords.y-pickerHeight-settings.margin;reposition.top=true;}} picker.classList.toggle('rl-mini-colors-left',reposition.left);picker.classList.toggle('rl-mini-colors-top',reposition.top);picker.style.left=left+"px";picker.style.top=top+"px";deselectRow(currentEl);});} function deselectRow(el){const tr=el.closest('tr');if(!tr){return;} const input=tr.querySelector('.form-check-input');if(!input){return;} input.checked=false;} function wrapFields(selector){document.querySelectorAll(selector).forEach(function(field){var parentNode=field.parentNode;if(!parentNode.classList.contains('rl-mini-colors-field')){var wrapper=document.createElement('div');wrapper.innerHTML="<button class=\"rl-mini-colors-button\" aria-labelledby=\"rl-mini-colors-open-label\"></button>";parentNode.insertBefore(wrapper,field);wrapper.setAttribute('class','rl-mini-colors-field');wrapper.style.color=field.value;wrapper.appendChild(field);}});} function closePicker(color){if(!currentEl){return;} picker.classList.remove('rl-mini-colors-open');currentEl=null;} function pickColor(color){if(!currentEl){return;} currentEl.value=color;currentEl.dispatchEvent(new Event('input',{bubbles:true}));currentEl.dispatchEvent(new Event('change',{bubbles:true}));const parent=currentEl.parentNode;if(parent.classList.contains('rl-mini-colors-field')){parent.style.color=color;}} function init(){picker=document.createElement('div');picker.setAttribute('id','rl-mini-colors-picker');picker.className='rl-mini-colors-picker';picker.innerHTML='<div id="rl-mini-colors-swatches" class="rl-mini-colors-swatches"></div>'+("<span id=\"rl-mini-colors-open-label\" hidden>"+settings.a11y.open+"</span>")+("<span id=\"rl-mini-colors-swatch-label\" hidden>"+settings.a11y.swatch+"</span>");document.body.appendChild(picker);bindFields(settings.el);wrapFields(settings.el);addListener(picker,'click','.rl-mini-colors-swatches .rl-mini-colors-button',(event)=>{pickColor(event.target.textContent);closePicker(event.target.textContent);});addListener(document,'click','.rl-mini-colors-field .rl-mini-colors-button',(event)=>{event.target.nextElementSibling.dispatchEvent(new Event('click',{bubbles:true}));});addListener(document,'mousedown',(event)=>{if(event.target.classList.contains('rl-mini-colors')||event.target.classList.contains('rl-mini-colors-picker')||event.target.closest('.rl-mini-colors-picker')){return;} closePicker();});} function getEl(id){return document.getElementById(id);} function addListener(context,type,selector,fn){var matches=Element.prototype.matches||Element.prototype.msMatchesSelector;if(typeof selector==='string'){context.addEventListener(type,function(event){if(matches.call(event.target,selector)){fn.call(event.target,event);}});}else{fn=selector;context.addEventListener(type,fn);}} function DOMReady(fn,args){args=args!==undefined?args:[];if(document.readyState!=='loading'){fn.apply(void 0,args);}else{document.addEventListener('DOMContentLoaded',function(){fn.apply(void 0,args);});}} if(NodeList!==undefined&&NodeList.prototype&&!NodeList.prototype.forEach){NodeList.prototype.forEach=Array.prototype.forEach;} window.RegularLabs_MiniColors=function(){var methods={set:configure,wrap:wrapFields,close:closePicker};function RegularLabs_MiniColors(options){DOMReady(function(){if(options){if(typeof options==='string'){bindFields(options);}else{configure(options);}}});} var _loop=function _loop(key){RegularLabs_MiniColors[key]=function(){for(var _len=arguments.length,args=new Array(_len),_key2=0;_key2<_len;_key2++){args[_key2]=arguments[_key2];} DOMReady(methods[key],args);};};for(var key in methods){_loop(key);} return RegularLabs_MiniColors;}();DOMReady(init);})(window,document,Math);(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.MiniColors=window.RegularLabs.MiniColors||{init:function(){const minicolors=document.querySelectorAll('div.rl-mini-colors');const options=Joomla.getOptions?Joomla.getOptions('rl_minicolors',{}):Joomla.optionsStorage.rl_minicolors||{};minicolors.forEach((minicolor)=>{const field=minicolor.querySelector('input');RegularLabs_MiniColors({el:`#${field.id}`,theme:'default',alpha:false,swatchesOnly:true,swatches:options.swatches});if(!field.dataset['table']||!field.dataset['item_id']){return;} field.addEventListener('change',()=>{RegularLabs.MiniColors.save(field.dataset['table'],field.dataset['item_id'],field.dataset['id_column'],field.value,field);});RegularLabs.MiniColors.setTableRowBackground(field,field.value);});},setTableRowBackground:async function(element,color,opacity=.1){if(!element){return;} const table_row=element.closest('tr');if(!table_row){return;} const table_cells=table_row.querySelectorAll('td, th');if(!table_cells.length){return;} const bg_color=RegularLabs.MiniColors.getColorWithOpacity(color,opacity);if(color[0]==='#'){table_cells[0].style.borderLeft=`4px solid ${color}`;} table_cells.forEach((table_cell)=>{table_cell.style.backgroundColor=bg_color;});},save:async function(table,item_id,id_column,color,element){let spinner=null;id_column=id_column?id_column:'id';if(element){spinner=document.createElement('div');spinner.classList.add('rl-spinner');element.closest('div.rl-mini-colors-field').append(spinner);RegularLabs.MiniColors.setTableRowBackground(element,color);} const url='index.php?option=com_ajax&plugin=regularlabs&format=raw&saveColor=1'+'&table='+table+'&item_id='+item_id+'&id_column='+id_column+'&color='+encodeURIComponent(color);await RegularLabs.Scripts.loadUrl(url);RegularLabs.MiniColors.saved(spinner);},saved:function(spinner=null){if(!spinner){return;} spinner.remove();},getColorWithOpacity:function(hex,opacity){const result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);if(!result){return'var(--table-bg)';} return'rgba('+parseInt(result[1],16)+','+parseInt(result[2],16)+','+parseInt(result[3],16)+','+opacity+')';}};RegularLabs.MiniColors.init();})();