AutorÃa | Ultima modificación | Ver Log |
/*** lc_color_picker.js - The colorpicker for modern web* Version: 2.0.0* Author: Luca Montanari (LCweb)* Website: https://lcweb.it* Licensed under the MIT license*/(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :typeof define === 'function' && define.amd ? define(factory) :(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Chart = factory());})(this, (function () { 'use strict';if(typeof(window.lc_color_picker) != 'undefined') {return false;} // prevent multiple script inits/*** vars ***/let debounced_vars = [],window_width = null,style_generated = null,active_trigger = null,active_trig_id = null,active_solid = null,active_opacity = null,active_gradient = null,active_mode = 'linear-gradient',sel_grad_step = 0, // selected gradient stepgradient_data = {deg: 0,radial_circle: false,steps: [//{color : null, opacity: null, position : null}],};/*** default options ***/const def_opts = {modes : ['linear-gradient'], // (array) containing supported modes (solid | linear-gradient | radial-gradient)open_on_focus : true, // (bool) whether to open the picker when field is focusedtransparency : true, // (bool) whether to allow colors transparency tunedark_theme : false, // (bool) whether to enable dark picker themeno_input_mode : false, // (bool) whether to stretch the trigger in order to cover the whole input fieldwrap_width : 'auto', // (string) defines the wrapper width. "auto" to leave it up to CSS, "inherit" to statically copy input field width, or any other CSS sizingpreview_style : { // (object) defining shape and position of the in-field previewinput_padding : 35, // extra px padding eventually added to the target input to not cover textside : 'right', // right or leftwidth : 30,separator_color : '#ccc', // (string) CSS color applird to preview element as separator},fallback_colors : ['#008080', 'linear-gradient(90deg, #fff 0%, #000 100%)'], // (array) defining default colors used when trigger field has no value. First parameter for solid color, second for gradienton_change : null, // function(new_value, target_field) {}, - triggered every time field value changes. Passes value and target field object as parameterslabels : [ // (array) option used to translate script texts'click to change color','Solid','Linear Gradient','Radial Gradient','add gradient step','gradient angle','gradient shape','color','opacity',],};// shortcut var to target the text input onlyconst right_input_selector = 'input:not([type="color"])';// input value check custom eventconst lccp_ivc_event = function(picker_id, hide_picker = false) {return new CustomEvent('lccp_input_val_check', {bubbles : true,detail: {picker_id : picker_id,hide_picker : hide_picker}});};/*** hide picker cicking outside ***/document.addEventListener('click', function(e) {const picker = document.querySelector("#lc-color-picker.lccp-shown");if(!picker || e.target.classList.contains('lccp-preview')) {return true;}// is an element within a trigger?for (const trigger of document.getElementsByClassName('lccp-preview')) {if(trigger.contains(e.target)) {return true;}}// clicked on the same colorpicker field? keep visibleif(e.target.parentNode && e.target.parentNode.classList && e.target.parentNode.classList.contains('lccp-el-wrap') && document.getElementById(active_trig_id)) {return true;}// close if clicked element is not in the pickerif(!picker.contains(e.target) && !e.target.classList.contains('lccp-shown')) {const picker_id = picker.getAttribute('data-trigger-id'),$input = document.getElementById(picker_id).parentNode.querySelector(right_input_selector);$input.dispatchEvent(lccp_ivc_event(picker_id, true));}return true;});/* hide picker on screen resizing */window.addEventListener('resize', function(e) {const picker = document.querySelector("#lc-color-picker.lccp-shown");if(!picker || window_width == window.innerWidth) {return true;}// check field valueconst picker_id = picker.getAttribute('data-trigger-id'),$input = document.getElementById(picker_id).parentNode.querySelector(right_input_selector);$input.dispatchEvent(lccp_ivc_event(picker_id, true));});/* extend string object to ReplaceArray */String.prototype.lccpReplaceArray = function(find, replace) {let replaceString = this;let regex;for (var i = 0; i < find.length; i++) {const regex = new RegExp(find[i], "g");replaceString = (typeof(replace) == 'object') ? replaceString.replace(regex, replace[i]) : replaceString.replace(regex, replace);}return replaceString;};/*** plugin class ***/window.lc_color_picker = function(attachTo, options = {}) {let cp_uniqid, // unique ID assigned to this colorpicker instancelast_tracked_col;this.attachTo = attachTo;if(!this.attachTo) {return console.error('You must provide a valid selector string first argument');}// override optionsif(typeof(options) != 'object') {return console.error('Options must be an object');}const bkp_opts = options;options = Object.assign({}, def_opts, options);if(typeof(bkp_opts.preview_style) != 'undefined') {options.preview_style = Object.assign({}, def_opts.preview_style, bkp_opts.preview_style);}/* initialize */this.init = function() {const $this = this;// Generate styleif(!style_generated) {this.generate_style();style_generated = true;}// assign to each target elementmaybe_querySelectorAll(attachTo).forEach(function(el) {if(el.tagName == 'INPUT' && el.getAttribute('type') != 'text') {return;}// do not initialize twiceif(el.parentNode.classList.length && el.parentNode.classList.contains('lcslt_wrap')) {return;}$this.wrap_element(el);});};/* wrap target element to allow trigger display */this.wrap_element = function(el) {cp_uniqid = Math.random().toString(36).substr(2, 9);const $this = this,side_prop = (options.preview_style.side == 'right') ? 'borderRightWidth' : 'borderLeftWidth';let trigger_css =`width:${ (options.no_input_mode) ? 'calc(100% - '+ parseInt(getComputedStyle(el)['borderRightWidth'], 10) +'px - '+ parseInt(getComputedStyle(el)['borderLeftWidth'], 10) +'px);' : options.preview_style.width +'px;'}` +options.preview_style.side +':'+ parseInt(getComputedStyle(el)[side_prop], 10) +'px;'+'top:'+ parseInt(getComputedStyle(el)['borderTopWidth'], 10) +'px;' +'height: calc(100% - '+ parseInt(getComputedStyle(el)['borderTopWidth'], 10) +'px - '+ parseInt(getComputedStyle(el)['borderBottomWidth'], 10) +'px);';let trigger_upper_css =trigger_css +'background:'+ el.value +';' +'border-color:'+ options.preview_style.separator_color +';'let div = document.createElement('div');div.className = 'lccp-preview-'+ options.preview_style.side;div.setAttribute('data-for', el.getAttribute('name'));// static width from input?if(options.wrap_width != 'auto') {div.style.width = (options.wrap_width == 'inherit') ? Math.round(el.getBoundingClientRect().width) + 'px' : options.wrap_width;}const direct_colorpicker_code = (!options.transparency && options.modes.length == 1 && options.modes[0] == 'linear-gradient') ?'<input type="color" name="'+ cp_uniqid +'_direct_cp" value="'+ el.value +'" class="lccp-direct-cp-f" />' : '';div.classList.add("lccp-el-wrap");div.innerHTML ='<span class="lccp-preview-bg" style="'+ trigger_css +'"></span>' +'<span id="'+ cp_uniqid +'" class="lccp-preview" style="'+ trigger_upper_css +'" title="'+ options.labels[0] +'"></span>' +direct_colorpicker_code;el.parentNode.insertBefore(div, el);div.appendChild(el);// input paddingif(!options.no_input_mode) {if(options.preview_style.side == 'right') {div.querySelector('input:not([type="color"])').style.paddingRight = options.preview_style.input_padding +'px';} else {div.querySelector('input:not([type="color"])').style.paddingLeft = options.preview_style.input_padding +'px';}}// direct browser colorpicker? track changesif(div.querySelector('.lccp-direct-cp-f')) {div.querySelector('.lccp-direct-cp-f').addEventListener("input", (e) => {div.querySelector('input:not([type="color"])').value = e.target.value;div.querySelector('.lccp-preview').style.background = e.target.value;});}// event to show pickerconst trigger = document.getElementById(cp_uniqid);trigger.addEventListener("click", (e) => {this.show_picker(trigger);});// show on field focus?if(options.open_on_focus) {div.querySelector(right_input_selector).addEventListener("focus", (e) => {if(trigger != active_trigger) {if(active_trigger) {document.getElementById('lc-color-picker').classList.remove('lccp-shown');active_trigger = null;}$this.debounce('open_on_focus', 10, 'show_picker', trigger);}});}// sync manually-inputed data in the fielddiv.querySelector(right_input_selector).addEventListener("keyup", (e) => {if(e.keyCode == 9 || e.key === 'Enter' || e.keyCode === 13) {return;}const is_active_trigger_and_opened = (active_trig_id = cp_uniqid && document.querySelector("#lc-color-picker.lccp-shown")) ? true : false;active_trigger = trigger;active_trig_id = cp_uniqid;$this.debounce('manual_input_sync', 10, 'val_to_picker', true);if(is_active_trigger_and_opened) {$this.debounce('manual_input_sync_cp', 10, 'append_color_picker', false);$this.debounce('reopen_picker_after_manual_edit', 10, 'show_picker', trigger);}});// be sure input value is managed on focusoutdiv.querySelector(right_input_selector).addEventListener("focusout", (e) => {// not if this field's picker is shown and focus is on "body"if(document.activeElement.tagName == 'BODY' && document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+ active_trig_id +'"]')) {return true;}e.target.dispatchEvent(lccp_ivc_event(active_trig_id, true));});// custom event - check field validity and eventually use fallback valuesdiv.querySelector(right_input_selector).addEventListener("lccp_input_val_check", (e) => {const curr_val = e.target.value,test = document.createElement('div');test.style.background = curr_val;let browser_val = test.style.background,val_to_set;if(!curr_val.trim().length || !browser_val) {if(e.target.value.toLowerCase().indexOf('gradient') === -1) {val_to_set = (options.fallback_colors[0].toLowerCase().indexOf('rgba') === -1) ? $this.RGB_to_hex(options.fallback_colors[0]) : options.fallback_colors[0];}else {val_to_set = options.fallback_colors[1];}}else {// browser already fixes minor thingsbrowser_val = browser_val.replaceAll('0.', '.').replace(/rgb\([^\)]+\)/g, (rgb) => {return $this.RGB_to_hex(rgb);});val_to_set = (browser_val.trim().toLowerCase().substr(0, 4) == 'rgb(') ? $this.RGB_to_hex(browser_val) : browser_val;}if(val_to_set != curr_val) {e.target.value = val_to_set;}if(typeof(options.on_change) == 'function' && last_tracked_col != val_to_set) {options.on_change.call($this, val_to_set, e.target);}if(e.detail.picker_id == active_trig_id) {active_trigger = null;active_trig_id = null;}// also hide picker?const $target = document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+ e.detail.picker_id +'"]');if($target) {$target.classList.remove('lccp-shown');document.getElementById("lc-color-picker").remove();}});};/* show picker */this.show_picker = function(trigger) {if(document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+ active_trig_id +'"]')) {document.getElementById("lc-color-picker").remove();active_trigger = null;active_trig_id = nullreturn false;}// direct colorpicker usage? Not for Firefox is "show on focus" is enabledconst direct_colorpicker = trigger.parentNode.querySelector('.lccp-direct-cp-f');if(direct_colorpicker &&(!options.open_on_focus ||(options.open_on_focus && !navigator.userAgent.toLowerCase().includes('firefox')))) {direct_colorpicker.value = active_solid;direct_colorpicker.click();return true;}window_width = window.innerWidth;active_trigger = trigger;active_trig_id = cp_uniqid;this.val_to_picker();this.append_color_picker();const picker = document.getElementById('lc-color-picker'),picker_w = picker.offsetWidth,picker_h = picker.offsetHeight,at_offsety = active_trigger.getBoundingClientRect(),at_h = parseInt(active_trigger.clientHeight, 10) + parseInt(getComputedStyle(active_trigger)['borderTopWidth'], 10) + parseInt(getComputedStyle(active_trigger)['borderBottomWidth'], 10),y_pos = (parseInt(at_offsety.y, 10) + parseInt(window.pageYOffset, 10) + at_h + 5);// left pos control - also checking side overflowslet left = (parseInt(at_offsety.right, 10) - picker_w);if(left < 0) {left = 0;}// mobile? show it centeredif(window.innerWidth < 700) {left = Math.floor( (window.innerWidth - picker_w) / 2);}// top or bottom ?const y_pos_css = (y_pos + picker_h - document.documentElement.scrollTop < window.innerHeight) ?'top:'+ y_pos :'transform: translate3d(0, calc((100% + '+ (active_trigger.offsetHeight + 10) +'px) * -1), 0); top:'+ y_pos;picker.setAttribute('style', y_pos_css +'px; left: '+ left +'px;');picker.classList.add('lccp-shown');};/* handles input value and prepres data for the picker */this.val_to_picker = function(from_manual_input) {if(!active_trigger) {return false;}const val = active_trigger.parentNode.querySelector(right_input_selector).value.trim().toLowerCase();last_tracked_col = val;// check validitylet test = document.createElement('div');test.style.background = val;//// set active colors// if no value foundif(!val.length || !test.style.background.length) {active_solid = options.fallback_colors[0];active_gradient = options.fallback_colors[1];active_mode = 'linear-gradient';/* if(val.indexOf('linear-gradient') !== -1) {}else if(val.indexOf('radial-gradient') !== -1) {active_mode = 'radial-gradient';}else {active_mode = 'solid';} */}else {active_mode = 'linear-gradient';active_gradient = val;// find which value type has been passed/* if(val.indexOf('linear-gradient') !== -1) {}else if(val.indexOf('radial-gradient') !== -1) {active_mode = 'radial-gradient';}else {active_mode = 'solid';}if(active_mode == 'solid') {active_solid = val;active_gradient = options.fallback_colors[1];}else{active_solid = options.fallback_colors[0];} */}active_trigger.style.background = val;if(!from_manual_input || (from_manual_input && options.open_on_focus)) {// elaborate solid color data (color and alpha)//this.load_solid_data(active_solid);// elaborate gradient dataif(active_gradient) {this.load_gradient_data(active_gradient);}}};/* elaborate solid color data (color and alpha) loading into active_solid and active_opacity */this.load_solid_data = function(raw_data) {active_opacity = 1;// rgbaif(raw_data.indexOf('rgba') !== -1) {const data = this.RGBA_to_hexA(raw_data);active_solid = data[0];active_opacity = data[1];}// rgbelse if(raw_data.indexOf('rgba') !== -1) {active_solid = this.RGB_to_hex(raw_data);}// hexelse {active_solid = this.short_hex_fix(raw_data);}};/* elaborate gradient data loading into gradient_data */this.load_gradient_data = function(raw_data) {const $this = this;const is_radial = (raw_data.indexOf('radial-gradient') === -1) ? false : true;// solve issues with inner RGB|RGBA and turn everything into RGBAraw_data = raw_data.replace(/,\./g, ',0.').replace(/ \./g, ' 0.').replace(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/g, 'rgbaZ($1|$2|$3|$4)').replace(/\|\)/g, '|1)');// names to degraw_data = raw_data.replace('top right', '45deg').replace('right top', '45deg').replace('bottom right', '135deg').replace('bottom right', '135deg').replace('top left', '315deg').replace('left top', '315deg').replace('bottom left', '225deg').replace('bottom left', '225deg').replace('right', '90deg').replace('left', '270deg').replace('top', '0deg').replace('bottom', '180deg');// be sure deg or shape is definedif(is_radial && raw_data.indexOf('ellipse') === -1 && raw_data.indexOf('circle') === -1) {raw_data.replace('\\(', '(ellipse ');}if(!is_radial && raw_data.indexOf('deg') === -1) {raw_data.replace('\\(', '(180deg');}// processraw_data = raw_data.lccpReplaceArray(['linear-gradient', 'radial-gradient', '', '\\(', 'to', '\\)'],'');// split stepsconst raw_steps = raw_data.split(',');const fallback_multiplier = 100 / raw_steps.length;gradient_data.steps = [];raw_steps.some(function(raw_step, index) {// direction on first indexif(!index) {if(is_radial) {gradient_data.radial_circle = (raw_step.indexOf('circle') === -1) ? false : true;} else {gradient_data.deg = parseInt(raw_step.replace('deg', ''), 10);}}// {color : null, opacity: null, position : null}else {raw_step = raw_step.trim().split(' ');let position = '';// positionif(raw_step.length < 2) {if(index === 1) {position = '0%';}else if(index == (raw_steps.length - 1)) {position = '100%';}else {position = (fallback_multiplier * index) +'%';}}else {position = raw_step[1];}// colorlet raw_color = raw_step[0],opacity = 1;// normalize to hexif(raw_color.indexOf('rgbaZ') !== -1) {const col_arr = $this.RGBA_to_hexA(raw_color.replace('rgbaZ', 'rgba').replace(/\|/g, ','));raw_color = col_arr[0];opacity = col_arr[1];}gradient_data.steps.push({color : $this.short_hex_fix(raw_color),opacity: opacity,position : parseInt(position, 10)});}});};/* handles RGBA string returning a two elements array: hex and alpha */this.RGBA_to_hexA = function(raw_data) {raw_data = raw_data.lccpReplaceArray(['rgba', '\\(', '\\)'], '');const rgba_arr = raw_data.split(',')let alpha = (typeof(rgba_arr[3]) != 'undefined') ? rgba_arr[3] : '1';if(alpha.substring(0, 1) == '.') {alpha = 0 + alpha;}rgba_arr.splice(3, 1);return [this.RGB_to_hex('rgb('+ rgba_arr.join(',') +')'),parseFloat(alpha)];};/* convert RGB to hex */this.RGB_to_hex = function(rgb) {rgb = rgb.lccpReplaceArray(['rgb', '\\(', '\\)'], '');const rgb_arr = rgb.split(',');if(rgb_arr.length < 3) {return '';}let r = parseInt(rgb_arr[0].trim(), 10).toString(16),g = parseInt(rgb_arr[1].trim(), 10).toString(16),b = parseInt(rgb_arr[2].trim(), 10).toString(16);if (r.length == 1) {r = "0" + r;}if (g.length == 1) {g = "0" + g;}if (b.length == 1) {b = "0" + b;}return this.shorten_hex(r + g + b);};/* if possible, shortenize hex string */this.shorten_hex = function(hex) {hex = hex.replace('#', '').split('');if(hex.length >= 6) {if(hex[0] === hex[1] &&hex[2] === hex[3] &&hex[4] === hex[5]) {return '#'+ hex[0] + hex[2] + hex[4];}}return '#'+ hex.join('');};/* convert short hex to full format */this.short_hex_fix = function(hex) {if(hex.length == 4) {const a = hex.split('');hex = a[0] + a[1] + a[1] + a[2] + a[2] + a[3] + a[3];}return hex.toLowerCase();};/* convert hex to RGB */this.hex_to_RGB = function(h) {let r = 0, g = 0, b = 0;// 3 digitsif (h.length == 4) {r = "0x" + h[1] + h[1];g = "0x" + h[2] + h[2];b = "0x" + h[3] + h[3];// 6 digits} else if (h.length == 7) {r = "0x" + h[1] + h[2];g = "0x" + h[3] + h[4];b = "0x" + h[5] + h[6];}return "rgb("+ +r + ", " + +g + ", " + +b + ")";};/* convert hex to RGB */this.hex_to_RGBA = function(h, opacity) {if(parseFloat(opacity) === 1) {return this.shorten_hex(h);}let rgb = this.hex_to_RGB(h);return rgb.replace('(', 'a(').replace(')', ', '+ opacity.toString().replace('0.', '.') +')');};/* append color container picker to the body */this.append_color_picker = function(on_manual_input_change = false) {const $this = this;/* if(document.getElementById("lc-color-picker") && !on_manual_input_change) {document.getElementById("lc-color-picker").remove();} */const theme_class = (options.dark_theme) ? 'lccp_dark_theme' : 'lccp_light_theme',bg = (active_mode == 'solid') ? active_solid : active_gradient,shown_solid = (active_mode == 'solid') ? active_solid : gradient_data.steps[0].color,shown_opacity = (active_mode == 'solid') ? active_opacity : (options.transparency) ? gradient_data.steps[0].opacity : null,print_grad_code = (options.modes.indexOf('linear-gradient') !== -1 || options.modes.indexOf('radial-gradient') !== -1) ? true : false;// start codelet picker = '',picker_el;if(on_manual_input_change && document.getElementById("lc-color-picker")) {picker_el = document.getElementById("lc-color-picker");picker_el.setAttribute('data-mode', active_mode);picker_el.setAttribute('data-trigger-id', cp_uniqid);}else {picker = '<div id="lc-color-picker" class="'+ theme_class +'" data-mode="'+ active_mode +'" data-trigger-id="'+ cp_uniqid +'">';}// modes select/* if(options.modes.length >= 1) {picker += `<div id="lccp_modes_wrap"><span class="${(active_mode == 'solid') ? 'lccp_sel_mode' : ''}" ${(options.modes.indexOf('solid') === -1) ? 'style="display: none;"' : ''} data-mode="solid">${ options.labels[1] }</span><span class="${(active_mode == 'linear-gradient') ? 'lccp_sel_mode' : ''}" ${(options.modes.indexOf('linear-gradient') === -1) ? 'style="display: none;"' : ''} data-mode="linear-gradient">${ options.labels[2] }</span><span class="${(active_mode == 'radial-gradient') ? 'lccp_sel_mode' : ''}" ${(options.modes.indexOf('radial-gradient') === -1) ? 'style="display: none;"' : ''} data-mode="radial-gradient">${ options.labels[3] }</span></div>`;} */// gradient wizardif(print_grad_code) {picker += `<div class="lccp_gradient_wizard" ${ (active_mode == 'solid') ? 'style="display: none;"' : '' }><div class="lccp_gradient lccp_gradient-bg"></div><div class="lccp_gradient" style="background: ${ active_gradient }" title="${ options.labels[4] }"></div><div class="lccp_gradient_ranges"></div><div class="pccp_deg_f_wrap" ${ (active_mode == 'radial-gradient') ? 'style="display: none;"' : '' }><img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZJJREFUeNqsVetthDAMzp06QEagEv/LBk03oBswAhuQDVAn6AgZgTIBbAAb5DZIE+ScUs42OVRLVvBd7M+v2BeRRxVwEQSttei6LlNV/HB/ymDP8+LZYVxVlev73llrXUrLsqSipgBaz5YyvmcppfPRbRYDYJCNMSzId67xPSulXNu223c4KZDTAFgqMRDNKAXwGuokoAEazwMHBLW6gxTExQm6iqOGAoG66Ctc7BHl2fMHnBT1ECVK4zgKLgqbpIYjm1EX/eIFhSh/eb5lgLyC/jucf1I7z7NY1/Ue8t4LybwfDU1APeAabIZ6urIsg85DhyxM/tN7de5cuSK/rcz84uSnQKhU3Q7kNKUqDtNIJrMmEu4ORMvH6NDUtwhII85TBfXSYBtF54p/tBoGMI6mfCDm1bM0JU4+vD/FDMYc6pMUx11ksIuGAFrAAJYCtctEk5PT6WBPTOCMTKKPDljg4j+AHABEw0PSQBMxC8n3cASSbtLibL8rZvOpxHtztBYuGWAFPK63xOPPzFWw0a8AAwA+dEfwP/CgZgAAAABJRU5ErkJggg==" alt="angle" title="${ options.labels[5] }" /><input type="range" name="deg" value="${ gradient_data.deg }" min="0" max="360" step="1" /><input type="number" name="deg-num" value="${ gradient_data.deg }" min="0" max="360" step="1" /></div><div class="pccp_circle_f_wrap" ${ (active_mode == 'radial-gradient') ? '' : 'style="display: none;"' }><img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAhQAAAIUB4uz/wQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEZSURBVEiJzdQxSgRBFATQ52hionsKxcjQTERYUzMv4F28hImsiwcQExFEBfUCggtGXkBccRNR1qBnQHRme9p2wYJigu5f9Wd+zaceXexjgFeM8IADbGGmoS6KJVxiHOENVlLF1/HUQrziEBspnaeIV3zGchuD81+IV7wWmUk3Q7ziZpP4HHYib/eBU9yVYnWYnyQwmNDZI1YjDUTx0iD+Xop30BdSk5Kww7LWqOHSSdlAP0H4O3uEP7TucK80SOn8R4wLIWZ1eCufC03ftgUWCxxlCERR4Ay30zQYY1dI01QM4B7bwkCnYgAXWMPVXxo0LalNzArzaVoPWQZfkWVQxK/k4V8Y5MR32MbgOMOgVW1H2Iqp67qHzif097OAt54XXQAAAABJRU5ErkJggg==" alt="shape" title="${ options.labels[6] }" /><span class="pcpp_ellipse_shape ${ (gradient_data.radial_circle) ? '' : 'pcpp_circle_btn_active' }" data-val="ellipse">Ellipse</span><span class="pcpp_circle_shape ${ (gradient_data.radial_circle) ? 'pcpp_circle_btn_active' : '' }" data-val="circle">Circle</span></div><hr/></div>`;}// HTML5 colorpickerpicker += `<div class="pccp_color_f_wrap" ${ (!print_grad_code) ? 'style="margin-top: 0;"' : '' }><img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA2wAAANsB8FDmnAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFzSURBVEiJrdU/SxxRFIbx3wgWCjbRSkEICCHBzhCwUCurQDr3I6QLaJEqTcDWJoVNPoAWqW2sXAJW22hhkX+F1VYKBlwQ15ti7+Cy2Z29M+OFt5i5nOdhztw5I4QgNXiFH/iYXFMCPoFThJhPTy340AcPeEDjSQRYxN8BQcAt3tQSYBInQ+B52pitI/haAM/zpZIAOwnwgDsslRLgLbqJgoBvyQIs46YEPM/qWAGm8asCPOB7imCvIjzPy5ECrOC+pmC3SJByJMflvEhwUQO8j0t0kP0nwDO9+VIFfh8Px0m8nh8mmKrR/zO9aXsTGVM5d0JcIYRObFGV1cQLzOAisojW/tWqAG/jM94PZQy85IZyrenqjZR1j2OlMfIURclRIvwP1jCH3/HeUcqXvIDrEdCfOMC2Xr/fxRaFWLOQOuw2+wrzHMe959iKonyvjc2y43oWhwOSqyFPdajgj5ZF2MiVZdkGNvA6Jj8pLTRDCM2i+n/jlZhJOn4yuAAAAABJRU5ErkJggg==" alt="color" title="${ options.labels[7] }" /><div><input type="color" name="color" value="${ shown_solid }" style="opacity: ${ active_opacity };" /></div><input type="text" name="hex" value="${ shown_solid.toLowerCase() }" /></div>`;// opacity cursorif(options.transparency) {picker += `<div class="pccp_opacity_f_wrap"><img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAF9SURBVEiJtda/ihRBEMfxT42D4Jmdq5GHIBqJIHgYGCuIIhcYaGRgYGDsU4i+gqFgJogXivgGwkUmKpqcnhgJJ/4pg5mV3XVmd3q5K+iku+v37e7qrurITH0WEUdwC5dwCiexi21sZub9XufW6h7ho3iEmzg4M/wOm3i/SBxk5lTDDXxB9rRnHT7H8QYX/hubmXgHf+aI9wEO4CW+Yb0T0B7HIvFOQOu/glct5PwUAMfwdYB4L6DVOYzX+DTuGwf5IVYHBW2OZeb3iLiC9cn+EX4OXP3cHXS1qj37zuu6F1bjaqFP/8ucsIi4jtM1ThQCYuC8azhXYa0QUGTVfoqPAR/3E1DjA84U+AwKMl7gba3JjCU3aVCQM/M5zRE9xa8CQJFVmbmDJ3slGBGHIuLiv442SY3MrwFLJ7uqhezgriZdL7vyFU1gz2JjagcTK7iN36U7MKTgzJTMz4WANWxZVDInHEZ4jB8dgC08wL0h6ToWfFtWNd+Wy5b8tvwFZS60TLZpD/8AAAAASUVORK5CYII=" alt="opacity" title="${ options.labels[8] }" /><input type="range" name="opacity" value="${ shown_opacity }" min="0" max="1" step="0.01" /><input type="number" name="opacity-num" value="${ shown_opacity }" min="0" max="1" step="0.05" /></div>`;}// append or re-fill(on_manual_input_change && document.getElementById("lc-color-picker")) ? picker_el.innerHTML = picker : document.body.insertAdjacentHTML('beforeend', picker +'</div>');// modes changeif(options.modes.length >= 1) {for (const mode of document.querySelectorAll('#lccp_modes_wrap span')) {mode.addEventListener("click", (e) => { $this.mode_change( e.target, e.target.getAttribute('data-mode')) });}}// print steps and add gradient step actionif(print_grad_code) {gradient_data.steps.some(function(step, index) {$this.add_draggable_element(index, step.position, step.color);});document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)').addEventListener("click", (e) => {this.add_gradient_step(e) });}// angle actionsif(options.modes.indexOf('linear-gradient') !== -1) {document.querySelector('.pccp_deg_f_wrap input[type=range]').addEventListener("input", (e) => {this.track_deg_range_change(e)});document.querySelector('.pccp_deg_f_wrap input[name=deg-num]').addEventListener("change", (e) => {this.track_deg_num_change(e)});document.querySelector('.pccp_deg_f_wrap input[name=deg-num]').addEventListener("keyup", (e) => {this.debounce('deg_f_change', 500, 'track_deg_num_change', e);});}// circle actionsif(options.modes.indexOf('radial-gradient') !== -1) {for (const mode of document.querySelectorAll('.pccp_circle_f_wrap span')) {mode.addEventListener("click", (e) => { $this.set_ellipse_circle( e.target, e.target.getAttribute('data-val')) });}}// color actionsdocument.querySelector('.pccp_color_f_wrap input[type="color"]').addEventListener("input", (e) => {this.track_color_change(e)});document.querySelector('.pccp_color_f_wrap input[type="color"]').addEventListener("change", (e) => {this.track_color_change(e)});document.querySelector('.pccp_color_f_wrap input[name=hex]').addEventListener("keyup", (e) => {this.debounce('hex_f_change', 600, 'track_color_hex_change', e);});// transparency actionsif(options.transparency) {document.querySelector('.pccp_opacity_f_wrap input[type=range]').addEventListener("input", (e) => {this.track_opacity_range_change(e)});document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').addEventListener("change", (e) => {this.track_opacity_num_change(e)});document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').addEventListener("keyup", (e) => {this.debounce('opacity_f_change', 500, 'track_opacity_num_change', e);});}};/*** add draggable element ***/this.add_draggable_element = function(rel_step_num, position, color) {const $this = this,container = document.querySelector('.lccp_gradient_ranges'),sel_class = (!rel_step_num) ? 'lccp_sel_step' : '',del_btn_vis = (gradient_data.steps.length > 2) ? '' : 'style="display: none;"'container.innerHTML +='<span class="lccp_gradient_range '+ sel_class +'" data-step-num="'+ rel_step_num +'" style="background: '+ color +'; left: '+ position +'%;">'+'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNpiYMAOFIC4H4jPA/F/NHweKqfAQAQQgCr+TyTuJ2TYeRIMQ3axADYD8RlWAMVEG9pAwBUwQJT3FYjwFjEGgrACE5BIYKAeyGcgMiKIdeF9RjQNuAAjkoEEAXpskgpQYp+JgcqA6l4GufACFR34AGTgRioauIHqCZsmWY8mhQNNii+qF7BUqQIAAgwANgu7Y7cw5VAAAAAASUVORK5CYII=" '+ del_btn_vis +' />'+'</span>';let active = false;//////const dragStart = function(range_id, el, e) {active = range_id;};const dragEnd = function() {active = false;$this.apply_changes();};const drag = function(range_id, range, e) {if (active !== false && range_id == active) {e.preventDefault();const rect = container.getBoundingClientRect();let new_pos = (e.type === "touchmove") ? (e.touches[0].clientX - rect.left) : (e.clientX - rect.left);new_pos = Math.round((100 * new_pos) / container.offsetWidth);if(new_pos < 0) {new_pos = 0;}else if(new_pos > 100) {new_pos = 100;}// limit positions basing on previous and next stepconst min_pos = (!range_id) ? 0 : gradient_data.steps[ range_id-1 ].position;const max_pos = (range_id == (gradient_data.steps.length - 1)) ? 100 : gradient_data.steps[ range_id+1 ].position;if(new_pos < min_pos) {new_pos = min_pos + 1;}else if(new_pos > max_pos) {new_pos = max_pos - 1;}gradient_data.steps[ range_id ].position = new_pos;range.style.left = new_pos +'%';$this.apply_gradient_changes();}};+/////document.querySelectorAll('.lccp_gradient_range').forEach(range => {const step_num = parseInt(range.getAttribute('data-step-num'), 10);range.removeEventListener("touchstart", null);range.removeEventListener("touchend", null);range.removeEventListener("touchmove", null);range.removeEventListener("click", null);range.removeEventListener("mousedown", null);range.removeEventListener("mouseup", null);range.addEventListener("touchstart", (e) => {dragStart(step_num, e.target, e)});range.addEventListener("mousedown", (e) => {dragStart(step_num, e.target, e)});range.addEventListener("click", (e) => {$this.select_gradient_color(step_num)});container.addEventListener("touchmove", (e) => {drag(step_num, range, e)});container.addEventListener("mousemove", (e) => {drag(step_num, range, e)});range.addEventListener("mouseup", (e) => {dragEnd()});range.addEventListener("touchend", (e) => {dragEnd()});document.addEventListener("mouseup", (e) => {dragEnd()});});// remove step handlerdocument.querySelectorAll('.lccp_gradient_range img').forEach((btn) => {btn.addEventListener("click", (e) => {if(document.querySelectorAll('.lccp_gradient_range').length < 3) {return false;}// wait a bit to not interfere with global handler for picker closingsetTimeout(() => {const parent = e.target.parentNode,step_num = parseInt(parent.getAttribute('data-step-num'), 10),to_select = (!step_num) ? 0 : step_num - 1;gradient_data.steps.splice(step_num, 1);// clean and restartdocument.querySelectorAll('.lccp_gradient_range').forEach(r => r.remove());gradient_data.steps.some(function(step, index) {$this.add_draggable_element(index, step.position, step.color);});// select newly added elementdocument.querySelector('.lccp_gradient_range[data-step-num="'+ to_select +'"]').click();this.apply_gradient_changes(true);}, 20);});});};/* select gradient color */this.select_gradient_color = function(step_num) {sel_grad_step = step_num;document.querySelectorAll('.lccp_gradient_range').forEach(m => m.classList.remove('lccp_sel_step'));document.querySelector('.lccp_gradient_range[data-step-num="'+ step_num +'"]').classList.add('lccp_sel_step');active_solid = gradient_data.steps[ step_num ].color;active_opacity = gradient_data.steps[ step_num ].opacity;document.querySelector('#lc-color-picker input[type="color"]').value = active_solid;document.querySelector('.pccp_color_f_wrap input[name=hex]').value = active_solid;if(options.transparency) {document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = active_opacity;document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').value = active_opacity;}};/* apply changes to gradient, after a color/opacity/degree update */this.apply_gradient_changes = function(also_apply_changes) {const $this = this;let new_gradient = active_mode+'(';new_gradient += (active_mode == 'linear-gradient') ? gradient_data.deg+'deg' : (gradient_data.radial_circle) ? 'circle' : 'ellipse';new_gradient += ', ';let colors_part = []gradient_data.steps.some(function(step, index) {let to_add = (options.transparency) ? $this.hex_to_RGBA(step.color, step.opacity) : $this.shorten_hex(step.color);if(gradient_data.steps.length > 2 ||(gradient_data.steps.length <= 2 &&((!index && parseInt(step.position, 10)) ||(index && index < (gradient_data.steps.length - 1)) ||(index == (gradient_data.steps.length - 1) && parseInt(step.position, 10) != 100)))) {to_add += ' '+ step.position +'%';}colors_part.push( to_add );});active_gradient = new_gradient + colors_part.join(', ') + ')';if(document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)')) {document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)').style.background = active_gradient;}if(also_apply_changes) {this.apply_changes();}};/* apply changes to target field */this.apply_changes = function() {if(!active_trigger) {return false;}let val = '';// apply everything to picker global varsif(active_mode == 'solid') {val = this.shorten_hex(active_solid);if(options.transparency && document.querySelector('.pccp_opacity_f_wrap input[type=range]')) {active_opacity = document.querySelector('.pccp_opacity_f_wrap input[type=range]').value;val = this.hex_to_RGBA(val, active_opacity);}}else {val = active_gradient;}// applyactive_trigger.style.background = val;const field = active_trigger.parentNode.querySelector(right_input_selector),old_val = field.value;if(old_val != val) {field.value = val;last_tracked_col = val;if(typeof(options.on_change) == 'function') {if(typeof(debounced_vars['on_change_cb']) != undefined && debounced_vars['on_change_cb']) {clearTimeout(debounced_vars['on_change_cb']);}debounced_vars['on_change_cb'] = setTimeout(() => {options.on_change.call(this, val, field);}, 300);}}};// HANDLERS// fields toggle basing on modes changethis.mode_change = function(el, new_mode) {if(active_mode == new_mode) {return false;}let color, opacity;// from gradient to solidif(new_mode == 'solid') {color = active_solid;if(options.transparency) {opacity = active_opacity;}}else {color = gradient_data.steps[0].color;if(options.transparency) {opacity = gradient_data.steps[0].opacity;}}document.querySelector('#lc-color-picker input[type="color"]').value = color;document.querySelector('.pccp_color_f_wrap input[name=hex]').value = color;if(options.transparency) {document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = opacity;document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').value = opacity;}// toggle grad fieldsif(options.modes.length >= 1) {document.querySelector('.pccp_deg_f_wrap').style.display = (new_mode == 'linear-gradient') ? 'flex' : 'none';document.querySelector('.pccp_circle_f_wrap').style.display = (new_mode == 'radial-gradient') ? 'block' : 'none';}// toogle gradient wizardif(options.modes.indexOf('linear-gradient') !== -1 || options.modes.indexOf('radial-gradient') !== -1) {document.querySelector('.lccp_gradient_wizard').style.display = (new_mode != 'solid') ? 'block' : 'none';}document.querySelectorAll('#lccp_modes_wrap span').forEach(m => m.classList.remove('lccp_sel_mode'));el.classList.add('lccp_sel_mode');active_mode = new_mode;(new_mode == 'solid') ? this.apply_changes() : this.apply_gradient_changes(true);};// add gradient stepthis.add_gradient_step = function(e) {const $this = this,pos = Math.round((100 * e.layerX) / e.target.offsetWidth);// inject in actual stepslet index = 0;for(let step of gradient_data.steps) {if(step.position > pos) {const step_data = {color : (index - 1 < 0) ? step.color : gradient_data.steps[(index - 1)].color,opacity : 1,position : pos}gradient_data.steps.splice(index, 0, step_data);break;}index++;}document.querySelectorAll('.lccp_gradient_range').forEach(r => r.remove());gradient_data.steps.some(function(step, index) {$this.add_draggable_element(index, step.position, step.color);});// select newly added elementdocument.querySelector('.lccp_gradient_range[data-step-num="'+ index +'"]').click();this.apply_gradient_changes(true);};// apply ellipse or circlethis.set_ellipse_circle = function(el, new_opt) {if(gradient_data.radial_circle && new_opt == 'circle' || !gradient_data.radial_circle && new_opt != 'circle') {return false;}gradient_data.radial_circle = !gradient_data.radial_circle;document.querySelectorAll('.pccp_circle_f_wrap span').forEach(m => m.classList.remove('pcpp_circle_btn_active'));el.classList.add('pcpp_circle_btn_active');this.apply_gradient_changes(true);};// track opacity range fields changethis.track_deg_range_change = function(e) {document.querySelector('.pccp_deg_f_wrap input[name=deg-num]').value = e.target.value;gradient_data.deg = e.target.value;this.apply_gradient_changes(true);};this.track_deg_num_change = function(e) {let val = parseFloat(e.target.value);if(isNaN(val) || val < 0 || val > 360) {val = 90;}e.target.value = val;if(document.querySelector('.pccp_deg_f_wrap input[type=range]')) {document.querySelector('.pccp_deg_f_wrap input[type=range]').value = val;}gradient_data.deg = val;this.apply_gradient_changes(true);};// track opacity range fields changethis.track_color_change = function(e) {const val = e.target.value.toLowerCase();document.querySelector('.pccp_color_f_wrap input[name=hex]').value = val;this.apply_color_change(val);};this.track_color_hex_change = function(e) {let val = this.short_hex_fix(e.target.value);if(val.match(/^#[a-f0-9]{6}$/i) === null) {val = active_solid.toLowerCase();}e.target.value = val;document.querySelector('#lc-color-picker input[type="color"]').value = val;this.apply_color_change(val);};this.apply_color_change = function(val) {if(active_mode == 'solid') {active_solid = val;this.apply_changes();}else {gradient_data.steps[ sel_grad_step ].color = val;document.querySelector('.lccp_sel_step').style.background = val;this.apply_gradient_changes(true);}};// track opacity range fields changethis.track_opacity_range_change = function(e) {document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').value = e.target.value;this.alter_hex_opacity(e.target.value);};this.track_opacity_num_change = function(e) {let val = parseFloat(e.target.value);if(isNaN(val) || val < 0 || val > 1) {val = 0.5;}e.target.value = val;if(document.querySelector('.pccp_opacity_f_wrap input[type=range]')) {document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = val;this.alter_hex_opacity(val);}};this.alter_hex_opacity = function(opacity) {document.querySelector('#lc-color-picker input[type="color"]').style.opacity = opacity;if(active_mode == 'solid') {active_opacity = opacity;this.apply_changes();}else {gradient_data.steps[ sel_grad_step ].opacity = opacity;this.apply_gradient_changes(true);}};/** UTILITY FUNCTION - debounce action to run once after X time** @param (string) action_name* @param (int) timing - milliseconds to debounce* @param (string) - class method name to call after debouncing* @param (mixed) - extra parameters to pass to callback function*/this.debounce = function(action_name, timing, cb_function, cb_params) {if( typeof(debounced_vars[ action_name ]) != 'undefined' && debounced_vars[ action_name ]) {clearTimeout(debounced_vars[ action_name ]);}const $this = this;debounced_vars[ action_name ] = setTimeout(() => {$this[cb_function].call($this, cb_params);}, timing);};/* CSS - creates inline CSS into the page */this.generate_style = function() {const transp_bg_img = "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgGBgcGBggKCAkJCQkICgoMDAwMDAoMDA0NDAwRERERERQUFBQUFBQUFBT/2wBDAQQFBQgHCA8KCg8UDg4OFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAoACgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUGCP/EACIQAQAABQMFAQAAAAAAAAAAAAAFFUNjgqLB4RESEzVRkf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDv4AE6K0stgTgAaIAE6K0stgTgAUZra1cATW1q4A9na8WXXu/PgEqu6eQJVd08gnAAowqrjuCiADOgAowqrjuCiAD/2Q==')";document.head.insertAdjacentHTML('beforeend',`<style>.lccp-el-wrap {position: relative;display: inline-block;}.lccp-el-wrap > input {margin: 0;min-width: 100%;max-width: 100%;width: auto;}.lccp-preview,.lccp-preview-bg {display: inline-block;position: absolute;cursor: pointer;z-index: 15;}.lccp-preview-bg {z-index: 10;}.lccp-preview-right .lccp-preview {border-left: 1px solid #ccc;}.lccp-preview-left .lccp-preview {border-right: 1px solid #ccc;}.lccp-direct-cp-f {padding: 0 !important;margin: 0 !important;width: 0 !important;height: 0 !important;position: absolute;bottom: 0;visibility: hidden;}.lccp-preview-right .lccp-direct-cp-f {right: 0;}.lccp-preview-left .lccp-direct-cp-f{left: 0;}#lc-color-picker,#lc-color-picker * {box-sizing: border-box;font-family: sans-serif;}#lc-color-picker {visibility: hidden;z-index: -100;opacity: 0;position: absolute;top: -9999px;z-index: 9999999999;width: 280px;background: #fff;box-shadow: 0px 2px 13px -2px rgba(0, 0, 0, .18);border-radius: 4px;overflow: hidden;padding: 10px;border: 1px solid #ccc;transition: opacity .15s ease;}#lc-color-picker.lccp-shown {visibility: visible;opacity: 1;}#lccp_modes_wrap {display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 10px;}#lccp_modes_wrap span,.pccp_circle_f_wrap span {display: inline-block;border: 1px solid #e8e8e8;background: #e8e8e8;opacity: .78;padding: 4px 7px;font-size: 11.5px;border-radius: 3px;line-height: normal;cursor: pointer;user-select: none;transition: all .2s ease;}#lccp_modes_wrap span.lccp_sel_mode,.pccp_circle_f_wrap span.pcpp_circle_btn_active {border: 1px solid #bbb;background: #fff;opacity: 1;cursor: default;}.lccp_gradient_wizard,.lccp_gradient_ranges {position: relative;}.lccp_gradient {height: 35px;border: 1px solid #aaa;cursor: crosshair;position: relative;z-index: 10;user-select: none;}.lccp_gradient-bg {position: absolute;top: 0;z-index: 0;width: 100%;margin: 0;}.lccp_gradient_ranges {margin: 2px 7px 25px 8px;height: 20px;}.lccp_gradient_range {display: inline-block;width: 13px;height: 13px;border: 1px solid #ccc;border-radius: 0 50% 50% 50%;transform: rotate(45deg) translate3d(-5px, 5px, 0);cursor: col-resize;position: absolute;top: 3px;}.lccp_gradient_range img {width: 13px;position: relative;top: 11px;left: 11px;opacity: .3;cursor: pointer;transition: all .2s ease;}.lccp_gradient_range img:hover {opacity: .5;}.lccp_sel_step {border: 1px solid #333;box-shadow: 0 0 2px 1px teal;}.pccp_deg_f_wrap,.pccp_circle_f_wrap {margin-bottom: 10px;}.pccp_circle_f_wrap * {float: left;}.pccp_circle_f_wrap:after {content: "";clear: both;display: block;}.pccp_circle_f_wrap img {position: relative;top: 4px;}.pccp_circle_f_wrap span {margin-left: 13px;}.pccp_circle_f_wrap span:not(.pcpp_circle_btn_active) {cursr: pointer;}.pccp_deg_f_wrap,.pccp_color_f_wrap,.pccp_opacity_f_wrap {display: flex;flex-direction: row;justify-content: space-between;align-items: center;clear: both;}.pccp_deg_f_wrap input,.pccp_color_f_wrap input,.pccp_opacity_f_wrap input {border: 1px solid #aaa;border-radius: 3px;padding: 0;}.lccp-preview-bg,.pccp_color_f_wrap div,.lccp_gradient-bg {background: ${ transp_bg_img } repeat;background-size: 15px;}#lc-color-picker hr {margin: 14px 0 0;height: 0;border-width: 1px 0;border-style: dashed;border-color: #e3e3e3;}.pccp_color_f_wrap div {width: calc(100% - 25px - 85px);height: 25px;border: 1px solid #aaa;border-radius: 2px;overflow: hidden;}.pccp_deg_f_wrap img,.pccp_circle_f_wrap img,.pccp_color_f_wrap img,.pccp_opacity_f_wrap img {max-width: 15px;opacity: .6;cursor: help;user-select: none;}.pccp_color_f_wrap input[type=color] {-webkit-appearance: none;padding: 0;width: 110%;height: 110%;transform: translate(-5%, -5%);cursor: pointer;border: none;}.pccp_color_f_wrap input:focus {outline: none;}.pccp_color_f_wrap input::-webkit-color-swatch-wrapper {padding: 0;}.pccp_color_f_wrap input::-webkit-color-swatch {border: none;}.pccp_color_f_wrap input[name=hex] {width: 70px;height: 25px;text-align: center;}.pccp_color_f_wrap {margin-top: 17px;}.pccp_opacity_f_wrap {margin-top: 10px;}.pccp_deg_f_wrap input[type=range],.pccp_opacity_f_wrap input[type=range] {width: calc(100% - 25px - 70px);height: 25px;}.pccp_deg_f_wrap input[type="number"],.pccp_opacity_f_wrap input[type="number"] {width: 53px;height: 25px;text-align: center;}.pccp_deg_f_wrap input[type=range],.pccp_opacity_f_wrap input[type=range] {-webkit-appearance: none;height: 5px;background: #d5d5d5;outline: none;border: none;}.pccp_deg_f_wrap input::-webkit-slider-thumb,.pccp_opacity_f_wrap input::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 17px;height: 17px;background: #888;cursor: pointer;border-radius: 50%;border: 1px solid #aaa;box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);}.pccp_deg_f_wrap input::-moz-range-thumb,.pccp_opacity_f_wrap input::-moz-range-thumb {width: 15px;height: 15px;background: #888;cursor: pointer;border-radius: 50%;border: 1px solid #aaa;box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);}#lc-color-picker.lccp_dark_theme {background: #333;border-color: #505050;}.lccp_dark_theme img {filter: invert(100%);opacity: .85;}.lccp_dark_theme .lccp_gradient_range img {opacity: .6;}.lccp_dark_theme .lccp_gradient_range img:hover {opacity: .8;}.lccp_dark_theme .lccp_gradient {border-color: #626262;}.lccp_dark_theme .lccp_sel_step {box-shadow: 0 0 2px 1px orange;}#lc-color-picker.lccp_dark_theme hr {border-color: #727272;}.lccp_dark_theme .pccp_deg_f_wrap input,.lccp_dark_theme .pccp_color_f_wrap input,.lccp_dark_theme .pccp_opacity_f_wrap input {border-color: #777;background: #505050;color: #f3f3f3;}.lccp_dark_theme input[type=range] {background: #808080;}</style>`);};// init when calledthis.init();};// UTILITIES// sanitize "selector" parameter allowing both strings and DOM objectsconst maybe_querySelectorAll = (selector) => {if(typeof(selector) != 'string') {if(selector instanceof Element) { // JS or jQueryreturn [selector];}else {let to_return = [];for(const obj of selector) {if(obj instanceof Element) {to_return.push(obj);}}return to_return;}}// clean problematic selectors(selector.match(/(#[0-9][^\s:,]*)/g) || []).forEach(function(n) {selector = selector.replace(n, '[id="' + n.replace("#", "") + '"]');});return document.querySelectorAll(selector);};})());