| 1 |
efrain |
1 |
{"version":3,"file":"lc_color_picker.min.js","sources":["../src/lc_color_picker.js"],"sourcesContent":["/**\r\n * lc_color_picker.js - The colorpicker for modern web\r\n * Version: 2.0.0\r\n * Author: Luca Montanari (LCweb)\r\n * Website: https://lcweb.it\r\n * Licensed under the MIT license\r\n */\r\n\r\n\r\n(function (global, factory) {\r\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\r\n typeof define === 'function' && define.amd ? define(factory) :\r\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Chart = factory());\r\n })(this, (function () { 'use strict';\r\n\r\n if(typeof(window.lc_color_picker) != 'undefined') {return false;} // prevent multiple script inits\r\n\r\n\r\n /*** vars ***/\r\n let debounced_vars = [],\r\n window_width = null,\r\n\r\n style_generated = null,\r\n active_trigger = null,\r\n active_trig_id = null,\r\n\r\n active_solid = null,\r\n active_opacity = null,\r\n active_gradient = null,\r\n active_mode = 'linear-gradient',\r\n\r\n sel_grad_step = 0, // selected gradient step\r\n gradient_data = {\r\n deg: 0,\r\n radial_circle: false,\r\n steps: [\r\n //{color : null, opacity: null, position : null}\r\n ],\r\n };\r\n\r\n\r\n /*** default options ***/\r\n const def_opts = {\r\n modes : ['linear-gradient'], // (array) containing supported modes (solid | linear-gradient | radial-gradient)\r\n open_on_focus : true, // (bool) whether to open the picker when field is focused\r\n transparency : true, // (bool) whether to allow colors transparency tune\r\n dark_theme : false, // (bool) whether to enable dark picker theme\r\n no_input_mode : false, // (bool) whether to stretch the trigger in order to cover the whole input field\r\n wrap_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 sizing\r\n preview_style : { // (object) defining shape and position of the in-field preview\r\n input_padding : 35, // extra px padding eventually added to the target input to not cover text\r\n side : 'right', // right or left\r\n width : 30,\r\n separator_color : '#ccc', // (string) CSS color applird to preview element as separator\r\n },\r\n 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 gradient\r\n\r\n on_change : null, // function(new_value, target_field) {}, - triggered every time field value changes. Passes value and target field object as parameters\r\n\r\n labels : [ // (array) option used to translate script texts\r\n 'click to change color',\r\n 'Solid',\r\n 'Linear Gradient',\r\n 'Radial Gradient',\r\n 'add gradient step',\r\n 'gradient angle',\r\n 'gradient shape',\r\n 'color',\r\n 'opacity',\r\n ],\r\n };\r\n\r\n\r\n // shortcut var to target the text input only\r\n const right_input_selector = 'input:not([type=\"color\"])';\r\n\r\n\r\n\r\n // input value check custom event\r\n const lccp_ivc_event = function(picker_id, hide_picker = false) {\r\n return new CustomEvent('lccp_input_val_check', {\r\n bubbles : true,\r\n detail: {\r\n picker_id : picker_id,\r\n hide_picker : hide_picker\r\n }\r\n });\r\n };\r\n\r\n\r\n\r\n /*** hide picker cicking outside ***/\r\n document.addEventListener('click', function(e) {\r\n const picker = document.querySelector(\"#lc-color-picker.lccp-shown\");\r\n if(!picker || e.target.classList.contains('lccp-preview')) {\r\n return true;\r\n }\r\n\r\n // is an element within a trigger?\r\n for (const trigger of document.getElementsByClassName('lccp-preview')) {\r\n if(trigger.contains(e.target)) {\r\n return true;\r\n }\r\n }\r\n\r\n // clicked on the same colorpicker field? keep visible\r\n if(e.target.parentNode && e.target.parentNode.classList && e.target.parentNode.classList.contains('lccp-el-wrap') && document.getElementById(active_trig_id)) {\r\n return true;\r\n }\r\n\r\n // close if clicked element is not in the picker\r\n if(!picker.contains(e.target) && !e.target.classList.contains('lccp-shown')) {\r\n const picker_id = picker.getAttribute('data-trigger-id'),\r\n $input = document.getElementById(picker_id).parentNode.querySelector(right_input_selector);\r\n\r\n $input.dispatchEvent(lccp_ivc_event(picker_id, true));\r\n }\r\n return true;\r\n });\r\n\r\n\r\n /* hide picker on screen resizing */\r\n window.addEventListener('resize', function(e) {\r\n const picker = document.querySelector(\"#lc-color-picker.lccp-shown\");\r\n if(!picker || window_width == window.innerWidth) {\r\n return true;\r\n }\r\n\r\n // check field value\r\n const picker_id = picker.getAttribute('data-trigger-id'),\r\n $input = document.getElementById(picker_id).parentNode.querySelector(right_input_selector);\r\n\r\n $input.dispatchEvent(lccp_ivc_event(picker_id, true));\r\n });\r\n\r\n\r\n /* extend string object to ReplaceArray */\r\n String.prototype.lccpReplaceArray = function(find, replace) {\r\n let replaceString = this;\r\n let regex;\r\n\r\n for (var i = 0; i < find.length; i++) {\r\n const regex = new RegExp(find[i], \"g\");\r\n replaceString = (typeof(replace) == 'object') ? replaceString.replace(regex, replace[i]) : replaceString.replace(regex, replace);\r\n }\r\n return replaceString;\r\n };\r\n\r\n\r\n\r\n\r\n /*** plugin class ***/\r\n window.lc_color_picker = function(attachTo, options = {}) {\r\n let cp_uniqid, // unique ID assigned to this colorpicker instance\r\n last_tracked_col;\r\n\r\n this.attachTo = attachTo;\r\n if(!this.attachTo) {\r\n return console.error('You must provide a valid selector string first argument');\r\n }\r\n\r\n // override options\r\n if(typeof(options) != 'object') {\r\n return console.error('Options must be an object');\r\n }\r\n\r\n const bkp_opts = options;\r\n options = Object.assign({}, def_opts, options);\r\n\r\n if(typeof(bkp_opts.preview_style) != 'undefined') {\r\n options.preview_style = Object.assign({}, def_opts.preview_style, bkp_opts.preview_style);\r\n }\r\n\r\n\r\n\r\n /* initialize */\r\n this.init = function() {\r\n const $this = this;\r\n\r\n // Generate style\r\n if(!style_generated) {\r\n this.generate_style();\r\n style_generated = true;\r\n }\r\n\r\n\r\n // assign to each target element\r\n maybe_querySelectorAll(attachTo).forEach(function(el) {\r\n if(el.tagName == 'INPUT' && el.getAttribute('type') != 'text') {\r\n return;\r\n }\r\n\r\n // do not initialize twice\r\n if(el.parentNode.classList.length && el.parentNode.classList.contains('lcslt_wrap')) {\r\n return;\r\n }\r\n\r\n $this.wrap_element(el);\r\n });\r\n };\r\n\r\n\r\n\r\n /* wrap target element to allow trigger display */\r\n this.wrap_element = function(el) {\r\n cp_uniqid = Math.random().toString(36).substr(2, 9);\r\n\r\n const $this = this,\r\n side_prop = (options.preview_style.side == 'right') ? 'borderRightWidth' : 'borderLeftWidth';\r\n\r\n let trigger_css =\r\n `width:${ (options.no_input_mode) ? 'calc(100% - '+ parseInt(getComputedStyle(el)['borderRightWidth'], 10) +'px - '+ parseInt(getComputedStyle(el)['borderLeftWidth'], 10) +'px);' : options.preview_style.width +'px;'}` +\r\n\r\n options.preview_style.side +':'+ parseInt(getComputedStyle(el)[side_prop], 10) +'px;'+\r\n\r\n 'top:'+ parseInt(getComputedStyle(el)['borderTopWidth'], 10) +'px;' +\r\n\r\n 'height: calc(100% - '+ parseInt(getComputedStyle(el)['borderTopWidth'], 10) +'px - '+ parseInt(getComputedStyle(el)['borderBottomWidth'], 10) +'px);';\r\n\r\n let trigger_upper_css =\r\n trigger_css +\r\n 'background:'+ el.value +';' +\r\n 'border-color:'+ options.preview_style.separator_color +';'\r\n\r\n let div = document.createElement('div');\r\n div.className = 'lccp-preview-'+ options.preview_style.side;\r\n div.setAttribute('data-for', el.getAttribute('name'));\r\n\r\n // static width from input?\r\n if(options.wrap_width != 'auto') {\r\n div.style.width = (options.wrap_width == 'inherit') ? Math.round(el.getBoundingClientRect().width) + 'px' : options.wrap_width;\r\n }\r\n\r\n const direct_colorpicker_code = (!options.transparency && options.modes.length == 1 && options.modes[0] == 'linear-gradient') ?\r\n '<input type=\"color\" name=\"'+ cp_uniqid +'_direct_cp\" value=\"'+ el.value +'\" class=\"lccp-direct-cp-f\" />' : '';\r\n\r\n div.classList.add(\"lccp-el-wrap\");\r\n div.innerHTML =\r\n '<span class=\"lccp-preview-bg\" style=\"'+ trigger_css +'\"></span>' +\r\n '<span id=\"'+ cp_uniqid +'\" class=\"lccp-preview\" style=\"'+ trigger_upper_css +'\" title=\"'+ options.labels[0] +'\"></span>' +\r\n direct_colorpicker_code;\r\n\r\n el.parentNode.insertBefore(div, el);\r\n div.appendChild(el);\r\n\r\n // input padding\r\n if(!options.no_input_mode) {\r\n if(options.preview_style.side == 'right') {\r\n div.querySelector('input:not([type=\"color\"])').style.paddingRight = options.preview_style.input_padding +'px';\r\n } else {\r\n div.querySelector('input:not([type=\"color\"])').style.paddingLeft = options.preview_style.input_padding +'px';\r\n }\r\n }\r\n\r\n\r\n // direct browser colorpicker? track changes\r\n if(div.querySelector('.lccp-direct-cp-f')) {\r\n div.querySelector('.lccp-direct-cp-f').addEventListener(\"input\", (e) => {\r\n\r\n div.querySelector('input:not([type=\"color\"])').value = e.target.value;\r\n div.querySelector('.lccp-preview').style.background = e.target.value;\r\n });\r\n }\r\n\r\n\r\n // event to show picker\r\n const trigger = document.getElementById(cp_uniqid);\r\n trigger.addEventListener(\"click\", (e) => {\r\n this.show_picker(trigger);\r\n });\r\n\r\n\r\n\r\n // show on field focus?\r\n if(options.open_on_focus) {\r\n div.querySelector(right_input_selector).addEventListener(\"focus\", (e) => {\r\n if(trigger != active_trigger) {\r\n if(active_trigger) {\r\n document.getElementById('lc-color-picker').classList.remove('lccp-shown');\r\n active_trigger = null;\r\n }\r\n\r\n $this.debounce('open_on_focus', 10, 'show_picker', trigger);\r\n }\r\n });\r\n }\r\n\r\n\r\n // sync manually-inputed data in the field\r\n div.querySelector(right_input_selector).addEventListener(\"keyup\", (e) => {\r\n if(e.keyCode == 9 || e.key === 'Enter' || e.keyCode === 13) {\r\n return;\r\n }\r\n\r\n const is_active_trigger_and_opened = (active_trig_id = cp_uniqid && document.querySelector(\"#lc-color-picker.lccp-shown\")) ? true : false;\r\n\r\n active_trigger = trigger;\r\n active_trig_id = cp_uniqid;\r\n\r\n $this.debounce('manual_input_sync', 10, 'val_to_picker', true);\r\n\r\n if(is_active_trigger_and_opened) {\r\n $this.debounce('manual_input_sync_cp', 10, 'append_color_picker', false);\r\n $this.debounce('reopen_picker_after_manual_edit', 10, 'show_picker', trigger);\r\n }\r\n });\r\n\r\n\r\n // be sure input value is managed on focusout\r\n div.querySelector(right_input_selector).addEventListener(\"focusout\", (e) => {\r\n // not if this field's picker is shown and focus is on \"body\"\r\n if(document.activeElement.tagName == 'BODY' && document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id=\"'+ active_trig_id +'\"]')) {\r\n return true;\r\n }\r\n\r\n e.target.dispatchEvent(lccp_ivc_event(active_trig_id, true));\r\n });\r\n\r\n\r\n // custom event - check field validity and eventually use fallback values\r\n div.querySelector(right_input_selector).addEventListener(\"lccp_input_val_check\", (e) => {\r\n const curr_val = e.target.value,\r\n test = document.createElement('div');\r\n\r\n test.style.background = curr_val;\r\n let browser_val = test.style.background,\r\n val_to_set;\r\n\r\n if(!curr_val.trim().length || !browser_val) {\r\n if(e.target.value.toLowerCase().indexOf('gradient') === -1) {\r\n val_to_set = (options.fallback_colors[0].toLowerCase().indexOf('rgba') === -1) ? $this.RGB_to_hex(options.fallback_colors[0]) : options.fallback_colors[0];\r\n }\r\n else {\r\n val_to_set = options.fallback_colors[1];\r\n }\r\n }\r\n else {\r\n // browser already fixes minor things\r\n browser_val = browser_val.replaceAll('0.', '.').replace(/rgb\\([^\\)]+\\)/g, (rgb) => {\r\n return $this.RGB_to_hex(rgb);\r\n });\r\n\r\n val_to_set = (browser_val.trim().toLowerCase().substr(0, 4) == 'rgb(') ? $this.RGB_to_hex(browser_val) : browser_val;\r\n }\r\n\r\n if(val_to_set != curr_val) {\r\n e.target.value = val_to_set;\r\n }\r\n\r\n if(typeof(options.on_change) == 'function' && last_tracked_col != val_to_set) {\r\n options.on_change.call($this, val_to_set, e.target);\r\n }\r\n\r\n if(e.detail.picker_id == active_trig_id) {\r\n active_trigger = null;\r\n active_trig_id = null;\r\n }\r\n\r\n\r\n // also hide picker?\r\n const $target = document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id=\"'+ e.detail.picker_id +'\"]');\r\n if($target) {\r\n\r\n $target.classList.remove('lccp-shown');\r\n document.getElementById(\"lc-color-picker\").remove();\r\n }\r\n });\r\n };\r\n\r\n\r\n\r\n /* show picker */\r\n this.show_picker = function(trigger) {\r\n if(document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id=\"'+ active_trig_id +'\"]')) {\r\n document.getElementById(\"lc-color-picker\").remove();\r\n active_trigger = null;\r\n active_trig_id = null\r\n\r\n return false;\r\n }\r\n\r\n // direct colorpicker usage? Not for Firefox is \"show on focus\" is enabled\r\n const direct_colorpicker = trigger.parentNode.querySelector('.lccp-direct-cp-f');\r\n if(\r\n direct_colorpicker &&\r\n (\r\n !options.open_on_focus ||\r\n (options.open_on_focus && !navigator.userAgent.toLowerCase().includes('firefox'))\r\n )\r\n ) {\r\n direct_colorpicker.value = active_solid;\r\n direct_colorpicker.click();\r\n return true;\r\n }\r\n\r\n\r\n window_width = window.innerWidth;\r\n active_trigger = trigger;\r\n active_trig_id = cp_uniqid;\r\n\r\n this.val_to_picker();\r\n this.append_color_picker();\r\n\r\n const picker = document.getElementById('lc-color-picker'),\r\n picker_w = picker.offsetWidth,\r\n picker_h = picker.offsetHeight,\r\n at_offsety = active_trigger.getBoundingClientRect(),\r\n at_h = parseInt(active_trigger.clientHeight, 10) + parseInt(getComputedStyle(active_trigger)['borderTopWidth'], 10) + parseInt(getComputedStyle(active_trigger)['borderBottomWidth'], 10),\r\n y_pos = (parseInt(at_offsety.y, 10) + parseInt(window.pageYOffset, 10) + at_h + 5);\r\n\r\n // left pos control - also checking side overflows\r\n let left = (parseInt(at_offsety.right, 10) - picker_w);\r\n if(left < 0) {\r\n left = 0;\r\n }\r\n\r\n // mobile? show it centered\r\n if(window.innerWidth < 700) {\r\n left = Math.floor( (window.innerWidth - picker_w) / 2);\r\n }\r\n\r\n // top or bottom ?\r\n const y_pos_css = (y_pos + picker_h - document.documentElement.scrollTop < window.innerHeight) ?\r\n 'top:'+ y_pos :\r\n 'transform: translate3d(0, calc((100% + '+ (active_trigger.offsetHeight + 10) +'px) * -1), 0); top:'+ y_pos;\r\n\r\n picker.setAttribute('style', y_pos_css +'px; left: '+ left +'px;');\r\n picker.classList.add('lccp-shown');\r\n };\r\n\r\n\r\n\r\n /* handles input value and prepres data for the picker */\r\n this.val_to_picker = function(from_manual_input) {\r\n if(!active_trigger) {\r\n return false;\r\n }\r\n const val = active_trigger.parentNode.querySelector(right_input_selector).value.trim().toLowerCase();\r\n last_tracked_col = val;\r\n\r\n // check validity\r\n let test = document.createElement('div');\r\n test.style.background = val;\r\n\r\n //// set active colors\r\n // if no value found\r\n if(!val.length || !test.style.background.length) {\r\n active_solid = options.fallback_colors[0];\r\n active_gradient = options.fallback_colors[1];\r\n active_mode = 'linear-gradient';\r\n\r\n /* if(val.indexOf('linear-gradient') !== -1) {\r\n }\r\n else if(val.indexOf('radial-gradient') !== -1) {\r\n active_mode = 'radial-gradient';\r\n }\r\n else {\r\n active_mode = 'solid';\r\n } */\r\n }\r\n else {\r\n\r\n active_mode = 'linear-gradient';\r\n active_gradient = val;\r\n // find which value type has been passed\r\n /* if(val.indexOf('linear-gradient') !== -1) {\r\n }\r\n else if(val.indexOf('radial-gradient') !== -1) {\r\n active_mode = 'radial-gradient';\r\n }\r\n else {\r\n active_mode = 'solid';\r\n }\r\n\r\n if(active_mode == 'solid') {\r\n active_solid = val;\r\n active_gradient = options.fallback_colors[1];\r\n }\r\n else{\r\n active_solid = options.fallback_colors[0];\r\n } */\r\n }\r\n active_trigger.style.background = val;\r\n\r\n if(!from_manual_input || (from_manual_input && options.open_on_focus)) {\r\n // elaborate solid color data (color and alpha)\r\n //this.load_solid_data(active_solid);\r\n // elaborate gradient data\r\n if(active_gradient) {\r\n this.load_gradient_data(active_gradient);\r\n }\r\n }\r\n };\r\n\r\n\r\n\r\n /* elaborate solid color data (color and alpha) loading into active_solid and active_opacity */\r\n this.load_solid_data = function(raw_data) {\r\n active_opacity = 1;\r\n\r\n // rgba\r\n if(raw_data.indexOf('rgba') !== -1) {\r\n const data = this.RGBA_to_hexA(raw_data);\r\n active_solid = data[0];\r\n active_opacity = data[1];\r\n }\r\n\r\n // rgb\r\n else if(raw_data.indexOf('rgba') !== -1) {\r\n active_solid = this.RGB_to_hex(raw_data);\r\n }\r\n\r\n // hex\r\n else {\r\n active_solid = this.short_hex_fix(raw_data);\r\n }\r\n };\r\n\r\n\r\n\r\n /* elaborate gradient data loading into gradient_data */\r\n this.load_gradient_data = function(raw_data) {\r\n const $this = this;\r\n const is_radial = (raw_data.indexOf('radial-gradient') === -1) ? false : true;\r\n\r\n // solve issues with inner RGB|RGBA and turn everything into RGBA\r\n raw_data = raw_data\r\n .replace(/,\\./g, ',0.').replace(/ \\./g, ' 0.')\r\n .replace(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*(\\d+(?:\\.\\d+)?))?\\)/g, 'rgbaZ($1|$2|$3|$4)')\r\n .replace(/\\|\\)/g, '|1)');\r\n\r\n // names to deg\r\n raw_data = raw_data\r\n .replace('top right', '45deg').replace('right top', '45deg')\r\n .replace('bottom right', '135deg').replace('bottom right', '135deg')\r\n .replace('top left', '315deg').replace('left top', '315deg')\r\n .replace('bottom left', '225deg').replace('bottom left', '225deg')\r\n .replace('right', '90deg').replace('left', '270deg').replace('top', '0deg').replace('bottom', '180deg');\r\n\r\n // be sure deg or shape is defined\r\n if(is_radial && raw_data.indexOf('ellipse') === -1 && raw_data.indexOf('circle') === -1) {\r\n raw_data.replace('\\\\(', '(ellipse ');\r\n }\r\n if(!is_radial && raw_data.indexOf('deg') === -1) {\r\n raw_data.replace('\\\\(', '(180deg');\r\n }\r\n\r\n // process\r\n raw_data = raw_data.lccpReplaceArray(\r\n ['linear-gradient', 'radial-gradient', '', '\\\\(', 'to', '\\\\)'],\r\n ''\r\n );\r\n\r\n // split steps\r\n const raw_steps = raw_data.split(',');\r\n const fallback_multiplier = 100 / raw_steps.length;\r\n\r\n gradient_data.steps = [];\r\n raw_steps.some(function(raw_step, index) {\r\n\r\n // direction on first index\r\n if(!index) {\r\n if(is_radial) {\r\n gradient_data.radial_circle = (raw_step.indexOf('circle') === -1) ? false : true;\r\n } else {\r\n gradient_data.deg = parseInt(raw_step.replace('deg', ''), 10);\r\n }\r\n }\r\n\r\n // {color : null, opacity: null, position : null}\r\n else {\r\n raw_step = raw_step.trim().split(' ');\r\n let position = '';\r\n\r\n // position\r\n if(raw_step.length < 2) {\r\n if(index === 1) {\r\n position = '0%';\r\n }\r\n else if(index == (raw_steps.length - 1)) {\r\n position = '100%';\r\n }\r\n else {\r\n position = (fallback_multiplier * index) +'%';\r\n }\r\n }\r\n else {\r\n position = raw_step[1];\r\n }\r\n\r\n // color\r\n let raw_color = raw_step[0],\r\n opacity = 1;\r\n\r\n // normalize to hex\r\n if(raw_color.indexOf('rgbaZ') !== -1) {\r\n const col_arr = $this.RGBA_to_hexA(\r\n raw_color.replace('rgbaZ', 'rgba').replace(/\\|/g, ',')\r\n );\r\n\r\n raw_color = col_arr[0];\r\n opacity = col_arr[1];\r\n }\r\n\r\n gradient_data.steps.push({\r\n color : $this.short_hex_fix(raw_color),\r\n opacity: opacity,\r\n position : parseInt(position, 10)\r\n });\r\n }\r\n });\r\n };\r\n\r\n\r\n\r\n /* handles RGBA string returning a two elements array: hex and alpha */\r\n this.RGBA_to_hexA = function(raw_data) {\r\n raw_data = raw_data.lccpReplaceArray(['rgba', '\\\\(', '\\\\)'], '');\r\n const rgba_arr = raw_data.split(',')\r\n\r\n let alpha = (typeof(rgba_arr[3]) != 'undefined') ? rgba_arr[3] : '1';\r\n if(alpha.substring(0, 1) == '.') {\r\n alpha = 0 + alpha;\r\n }\r\n rgba_arr.splice(3, 1);\r\n\r\n return [\r\n this.RGB_to_hex('rgb('+ rgba_arr.join(',') +')'),\r\n parseFloat(alpha)\r\n ];\r\n };\r\n\r\n\r\n\r\n /* convert RGB to hex */\r\n this.RGB_to_hex = function(rgb) {\r\n rgb = rgb.lccpReplaceArray(['rgb', '\\\\(', '\\\\)'], '');\r\n const rgb_arr = rgb.split(',');\r\n\r\n if(rgb_arr.length < 3) {\r\n return '';\r\n }\r\n\r\n let r = parseInt(rgb_arr[0].trim(), 10).toString(16),\r\n g = parseInt(rgb_arr[1].trim(), 10).toString(16),\r\n b = parseInt(rgb_arr[2].trim(), 10).toString(16);\r\n\r\n if (r.length == 1) {r = \"0\" + r;}\r\n if (g.length == 1) {g = \"0\" + g;}\r\n if (b.length == 1) {b = \"0\" + b;}\r\n\r\n return this.shorten_hex(r + g + b);\r\n };\r\n\r\n\r\n\r\n /* if possible, shortenize hex string */\r\n this.shorten_hex = function(hex) {\r\n hex = hex.replace('#', '').split('');\r\n\r\n if(hex.length >= 6) {\r\n if(\r\n hex[0] === hex[1] &&\r\n hex[2] === hex[3] &&\r\n hex[4] === hex[5]\r\n ) {\r\n return '#'+ hex[0] + hex[2] + hex[4];\r\n }\r\n }\r\n\r\n return '#'+ hex.join('');\r\n };\r\n\r\n\r\n\r\n /* convert short hex to full format */\r\n this.short_hex_fix = function(hex) {\r\n if(hex.length == 4) {\r\n const a = hex.split('');\r\n hex = a[0] + a[1] + a[1] + a[2] + a[2] + a[3] + a[3];\r\n }\r\n\r\n return hex.toLowerCase();\r\n };\r\n\r\n\r\n\r\n /* convert hex to RGB */\r\n this.hex_to_RGB = function(h) {\r\n let r = 0, g = 0, b = 0;\r\n\r\n // 3 digits\r\n if (h.length == 4) {\r\n r = \"0x\" + h[1] + h[1];\r\n g = \"0x\" + h[2] + h[2];\r\n b = \"0x\" + h[3] + h[3];\r\n\r\n // 6 digits\r\n } else if (h.length == 7) {\r\n r = \"0x\" + h[1] + h[2];\r\n g = \"0x\" + h[3] + h[4];\r\n b = \"0x\" + h[5] + h[6];\r\n }\r\n\r\n return \"rgb(\"+ +r + \", \" + +g + \", \" + +b + \")\";\r\n };\r\n\r\n\r\n\r\n /* convert hex to RGB */\r\n this.hex_to_RGBA = function(h, opacity) {\r\n if(parseFloat(opacity) === 1) {\r\n return this.shorten_hex(h);\r\n }\r\n\r\n let rgb = this.hex_to_RGB(h);\r\n return rgb.replace('(', 'a(').replace(')', ', '+ opacity.toString().replace('0.', '.') +')');\r\n };\r\n\r\n\r\n\r\n\r\n /* append color container picker to the body */\r\n this.append_color_picker = function(on_manual_input_change = false) {\r\n const $this = this;\r\n\r\n /* if(document.getElementById(\"lc-color-picker\") && !on_manual_input_change) {\r\n document.getElementById(\"lc-color-picker\").remove();\r\n } */\r\n\r\n const theme_class = (options.dark_theme) ? 'lccp_dark_theme' : 'lccp_light_theme',\r\n bg = (active_mode == 'solid') ? active_solid : active_gradient,\r\n shown_solid = (active_mode == 'solid') ? active_solid : gradient_data.steps[0].color,\r\n shown_opacity = (active_mode == 'solid') ? active_opacity : (options.transparency) ? gradient_data.steps[0].opacity : null,\r\n print_grad_code = (options.modes.indexOf('linear-gradient') !== -1 || options.modes.indexOf('radial-gradient') !== -1) ? true : false;\r\n\r\n\r\n // start code\r\n let picker = '',\r\n picker_el;\r\n\r\n if(on_manual_input_change && document.getElementById(\"lc-color-picker\")) {\r\n picker_el = document.getElementById(\"lc-color-picker\");\r\n picker_el.setAttribute('data-mode', active_mode);\r\n picker_el.setAttribute('data-trigger-id', cp_uniqid);\r\n }\r\n else {\r\n picker = '<div id=\"lc-color-picker\" class=\"'+ theme_class +'\" data-mode=\"'+ active_mode +'\" data-trigger-id=\"'+ cp_uniqid +'\">';\r\n }\r\n\r\n\r\n // modes select\r\n /* if(options.modes.length >= 1) {\r\n picker += `\r\n <div id=\"lccp_modes_wrap\">\r\n <span class=\"${(active_mode == 'solid') ? 'lccp_sel_mode' : ''}\" ${(options.modes.indexOf('solid') === -1) ? 'style=\"display: none;\"' : ''} data-mode=\"solid\">${ options.labels[1] }</span>\r\n <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>\r\n <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>\r\n </div>`;\r\n } */\r\n\r\n\r\n // gradient wizard\r\n if(print_grad_code) {\r\n picker += `\r\n <div class=\"lccp_gradient_wizard\" ${ (active_mode == 'solid') ? 'style=\"display: none;\"' : '' }>\r\n <div class=\"lccp_gradient lccp_gradient-bg\"></div>\r\n <div class=\"lccp_gradient\" style=\"background: ${ active_gradient }\" title=\"${ options.labels[4] }\"></div>\r\n\r\n <div class=\"lccp_gradient_ranges\"></div>\r\n\r\n <div class=\"pccp_deg_f_wrap\" ${ (active_mode == 'radial-gradient') ? 'style=\"display: none;\"' : '' }>\r\n <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] }\" />\r\n\r\n <input type=\"range\" name=\"deg\" value=\"${ gradient_data.deg }\" min=\"0\" max=\"360\" step=\"1\" />\r\n <input type=\"number\" name=\"deg-num\" value=\"${ gradient_data.deg }\" min=\"0\" max=\"360\" step=\"1\" />\r\n </div>\r\n <div class=\"pccp_circle_f_wrap\" ${ (active_mode == 'radial-gradient') ? '' : 'style=\"display: none;\"' }>\r\n <img src=\" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAhQAAAIUB4uz/wQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEZSURBVEiJzdQxSgRBFATQ52hionsKxcjQTERYUzMv4F28hImsiwcQExFEBfUCggtGXkBccRNR1qBnQHRme9p2wYJigu5f9Wd+zaceXexjgFeM8IADbGGmoS6KJVxiHOENVlLF1/HUQrziEBspnaeIV3zGchuD81+IV7wWmUk3Q7ziZpP4HHYib/eBU9yVYnWYnyQwmNDZI1YjDUTx0iD+Xop30BdSk5Kww7LWqOHSSdlAP0H4O3uEP7TucK80SOn8R4wLIWZ1eCufC03ftgUWCxxlCERR4Ay30zQYY1dI01QM4B7bwkCnYgAXWMPVXxo0LalNzArzaVoPWQZfkWVQxK/k4V8Y5MR32MbgOMOgVW1H2Iqp67qHzif097OAt54XXQAAAABJRU5ErkJggg==\" alt=\"shape\" title=\"${ options.labels[6] }\" />\r\n\r\n <span class=\"pcpp_ellipse_shape ${ (gradient_data.radial_circle) ? '' : 'pcpp_circle_btn_active' }\" data-val=\"ellipse\">Ellipse</span>\r\n <span class=\"pcpp_circle_shape ${ (gradient_data.radial_circle) ? 'pcpp_circle_btn_active' : '' }\" data-val=\"circle\">Circle</span>\r\n </div>\r\n <hr/>\r\n </div>`;\r\n }\r\n\r\n\r\n // HTML5 colorpicker\r\n picker += `\r\n <div class=\"pccp_color_f_wrap\" ${ (!print_grad_code) ? 'style=\"margin-top: 0;\"' : '' }>\r\n <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] }\" />\r\n\r\n <div>\r\n <input type=\"color\" name=\"color\" value=\"${ shown_solid }\" style=\"opacity: ${ active_opacity };\" />\r\n </div>\r\n <input type=\"text\" name=\"hex\" value=\"${ shown_solid.toLowerCase() }\" />\r\n </div>`;\r\n\r\n // opacity cursor\r\n if(options.transparency) {\r\n picker += `\r\n <div class=\"pccp_opacity_f_wrap\">\r\n <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] }\" />\r\n\r\n <input type=\"range\" name=\"opacity\" value=\"${ shown_opacity }\" min=\"0\" max=\"1\" step=\"0.01\" />\r\n <input type=\"number\" name=\"opacity-num\" value=\"${ shown_opacity }\" min=\"0\" max=\"1\" step=\"0.05\" />\r\n </div>`;\r\n }\r\n\r\n\r\n // append or re-fill\r\n (on_manual_input_change && document.getElementById(\"lc-color-picker\")) ? picker_el.innerHTML = picker : document.body.insertAdjacentHTML('beforeend', picker +'</div>');\r\n\r\n\r\n // modes change\r\n if(options.modes.length >= 1) {\r\n for (const mode of document.querySelectorAll('#lccp_modes_wrap span')) {\r\n mode.addEventListener(\"click\", (e) => { $this.mode_change( e.target, e.target.getAttribute('data-mode')) });\r\n }\r\n }\r\n\r\n // print steps and add gradient step action\r\n if(print_grad_code) {\r\n gradient_data.steps.some(function(step, index) {\r\n $this.add_draggable_element(index, step.position, step.color);\r\n });\r\n\r\n document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)').addEventListener(\"click\", (e) => {this.add_gradient_step(e) });\r\n }\r\n\r\n // angle actions\r\n if(options.modes.indexOf('linear-gradient') !== -1) {\r\n document.querySelector('.pccp_deg_f_wrap input[type=range]').addEventListener(\"input\", (e) => {this.track_deg_range_change(e)});\r\n document.querySelector('.pccp_deg_f_wrap input[name=deg-num]').addEventListener(\"change\", (e) => {this.track_deg_num_change(e)});\r\n document.querySelector('.pccp_deg_f_wrap input[name=deg-num]').addEventListener(\"keyup\", (e) => {\r\n this.debounce('deg_f_change', 500, 'track_deg_num_change', e);\r\n });\r\n }\r\n\r\n // circle actions\r\n if(options.modes.indexOf('radial-gradient') !== -1) {\r\n for (const mode of document.querySelectorAll('.pccp_circle_f_wrap span')) {\r\n mode.addEventListener(\"click\", (e) => { $this.set_ellipse_circle( e.target, e.target.getAttribute('data-val')) });\r\n }\r\n }\r\n\r\n // color actions\r\n document.querySelector('.pccp_color_f_wrap input[type=\"color\"]').addEventListener(\"input\", (e) => {this.track_color_change(e)});\r\n document.querySelector('.pccp_color_f_wrap input[type=\"color\"]').addEventListener(\"change\", (e) => {this.track_color_change(e)});\r\n document.querySelector('.pccp_color_f_wrap input[name=hex]').addEventListener(\"keyup\", (e) => {\r\n this.debounce('hex_f_change', 600, 'track_color_hex_change', e);\r\n });\r\n\r\n // transparency actions\r\n if(options.transparency) {\r\n document.querySelector('.pccp_opacity_f_wrap input[type=range]').addEventListener(\"input\", (e) => {this.track_opacity_range_change(e)});\r\n document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').addEventListener(\"change\", (e) => {this.track_opacity_num_change(e)});\r\n document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').addEventListener(\"keyup\", (e) => {\r\n this.debounce('opacity_f_change', 500, 'track_opacity_num_change', e);\r\n });\r\n }\r\n };\r\n\r\n\r\n\r\n /*** add draggable element ***/\r\n this.add_draggable_element = function(rel_step_num, position, color) {\r\n const $this = this,\r\n container = document.querySelector('.lccp_gradient_ranges'),\r\n sel_class = (!rel_step_num) ? 'lccp_sel_step' : '',\r\n del_btn_vis = (gradient_data.steps.length > 2) ? '' : 'style=\"display: none;\"'\r\n\r\n container.innerHTML +=\r\n '<span class=\"lccp_gradient_range '+ sel_class +'\" data-step-num=\"'+ rel_step_num +'\" style=\"background: '+ color +'; left: '+ position +'%;\">'+\r\n '<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNpiYMAOFIC4H4jPA/F/NHweKqfAQAQQgCr+TyTuJ2TYeRIMQ3axADYD8RlWAMVEG9pAwBUwQJT3FYjwFjEGgrACE5BIYKAeyGcgMiKIdeF9RjQNuAAjkoEEAXpskgpQYp+JgcqA6l4GufACFR34AGTgRioauIHqCZsmWY8mhQNNii+qF7BUqQIAAgwANgu7Y7cw5VAAAAAASUVORK5CYII=\" '+ del_btn_vis +' />'+\r\n '</span>';\r\n\r\n let active = false;\r\n\r\n //////\r\n const dragStart = function(range_id, el, e) {\r\n active = range_id;\r\n };\r\n\r\n const dragEnd = function() {\r\n active = false;\r\n $this.apply_changes();\r\n };\r\n\r\n const drag = function(range_id, range, e) {\r\n if (active !== false && range_id == active) {\r\n e.preventDefault();\r\n const rect = container.getBoundingClientRect();\r\n\r\n let new_pos = (e.type === \"touchmove\") ? (e.touches[0].clientX - rect.left) : (e.clientX - rect.left);\r\n new_pos = Math.round((100 * new_pos) / container.offsetWidth);\r\n\r\n if(new_pos < 0) {new_pos = 0;}\r\n else if(new_pos > 100) {new_pos = 100;}\r\n\r\n // limit positions basing on previous and next step\r\n const min_pos = (!range_id) ? 0 : gradient_data.steps[ range_id-1 ].position;\r\n const max_pos = (range_id == (gradient_data.steps.length - 1)) ? 100 : gradient_data.steps[ range_id+1 ].position;\r\n\r\n if(new_pos < min_pos) {new_pos = min_pos + 1;}\r\n else if(new_pos > max_pos) {new_pos = max_pos - 1;}\r\n\r\n gradient_data.steps[ range_id ].position = new_pos;\r\n range.style.left = new_pos +'%';\r\n\r\n $this.apply_gradient_changes();\r\n }\r\n };+\r\n /////\r\n\r\n document.querySelectorAll('.lccp_gradient_range').forEach(range => {\r\n const step_num = parseInt(range.getAttribute('data-step-num'), 10);\r\n\r\n range.removeEventListener(\"touchstart\", null);\r\n range.removeEventListener(\"touchend\", null);\r\n range.removeEventListener(\"touchmove\", null);\r\n range.removeEventListener(\"click\", null);\r\n\r\n range.removeEventListener(\"mousedown\", null);\r\n range.removeEventListener(\"mouseup\", null);\r\n\r\n range.addEventListener(\"touchstart\", (e) => {dragStart(step_num, e.target, e)});\r\n range.addEventListener(\"mousedown\", (e) => {dragStart(step_num, e.target, e)});\r\n\r\n range.addEventListener(\"click\", (e) => {$this.select_gradient_color(step_num)});\r\n\r\n container.addEventListener(\"touchmove\", (e) => {drag(step_num, range, e)});\r\n container.addEventListener(\"mousemove\", (e) => {drag(step_num, range, e)});\r\n\r\n range.addEventListener(\"mouseup\", (e) => {dragEnd()});\r\n range.addEventListener(\"touchend\", (e) => {dragEnd()});\r\n document.addEventListener(\"mouseup\", (e) => {dragEnd()});\r\n });\r\n\r\n\r\n // remove step handler\r\n document.querySelectorAll('.lccp_gradient_range img').forEach((btn) => {\r\n\r\n btn.addEventListener(\"click\", (e) => {\r\n if(document.querySelectorAll('.lccp_gradient_range').length < 3) {\r\n return false;\r\n }\r\n\r\n // wait a bit to not interfere with global handler for picker closing\r\n setTimeout(() => {\r\n const parent = e.target.parentNode,\r\n step_num = parseInt(parent.getAttribute('data-step-num'), 10),\r\n to_select = (!step_num) ? 0 : step_num - 1;\r\n\r\n gradient_data.steps.splice(step_num, 1);\r\n\r\n // clean and restart\r\n document.querySelectorAll('.lccp_gradient_range').forEach(r => r.remove());\r\n\r\n gradient_data.steps.some(function(step, index) {\r\n $this.add_draggable_element(index, step.position, step.color);\r\n });\r\n\r\n // select newly added element\r\n document.querySelector('.lccp_gradient_range[data-step-num=\"'+ to_select +'\"]').click();\r\n\r\n this.apply_gradient_changes(true);\r\n }, 20);\r\n });\r\n });\r\n };\r\n\r\n\r\n\r\n /* select gradient color */\r\n this.select_gradient_color = function(step_num) {\r\n sel_grad_step = step_num;\r\n\r\n document.querySelectorAll('.lccp_gradient_range').forEach(m => m.classList.remove('lccp_sel_step'));\r\n document.querySelector('.lccp_gradient_range[data-step-num=\"'+ step_num +'\"]').classList.add('lccp_sel_step');\r\n\r\n active_solid = gradient_data.steps[ step_num ].color;\r\n active_opacity = gradient_data.steps[ step_num ].opacity;\r\n\r\n document.querySelector('#lc-color-picker input[type=\"color\"]').value = active_solid;\r\n document.querySelector('.pccp_color_f_wrap input[name=hex]').value = active_solid;\r\n\r\n if(options.transparency) {\r\n document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = active_opacity;\r\n document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').value = active_opacity;\r\n }\r\n };\r\n\r\n\r\n\r\n /* apply changes to gradient, after a color/opacity/degree update */\r\n this.apply_gradient_changes = function(also_apply_changes) {\r\n const $this = this;\r\n\r\n let new_gradient = active_mode+'(';\r\n new_gradient += (active_mode == 'linear-gradient') ? gradient_data.deg+'deg' : (gradient_data.radial_circle) ? 'circle' : 'ellipse';\r\n new_gradient += ', ';\r\n\r\n let colors_part = []\r\n gradient_data.steps.some(function(step, index) {\r\n\r\n let to_add = (options.transparency) ? $this.hex_to_RGBA(step.color, step.opacity) : $this.shorten_hex(step.color);\r\n\r\n if(\r\n gradient_data.steps.length > 2 ||\r\n (\r\n gradient_data.steps.length <= 2 &&\r\n (\r\n (!index && parseInt(step.position, 10)) ||\r\n (index && index < (gradient_data.steps.length - 1)) ||\r\n (index == (gradient_data.steps.length - 1) && parseInt(step.position, 10) != 100)\r\n )\r\n )\r\n ) {\r\n to_add += ' '+ step.position +'%';\r\n }\r\n\r\n colors_part.push( to_add );\r\n });\r\n\r\n active_gradient = new_gradient + colors_part.join(', ') + ')';\r\n\r\n if(document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)')) {\r\n document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)').style.background = active_gradient;\r\n }\r\n\r\n if(also_apply_changes) {\r\n this.apply_changes();\r\n }\r\n };\r\n\r\n\r\n\r\n /* apply changes to target field */\r\n this.apply_changes = function() {\r\n if(!active_trigger) {\r\n return false;\r\n }\r\n let val = '';\r\n\r\n // apply everything to picker global vars\r\n if(active_mode == 'solid') {\r\n val = this.shorten_hex(active_solid);\r\n\r\n if(options.transparency && document.querySelector('.pccp_opacity_f_wrap input[type=range]')) {\r\n active_opacity = document.querySelector('.pccp_opacity_f_wrap input[type=range]').value;\r\n val = this.hex_to_RGBA(val, active_opacity);\r\n }\r\n }\r\n else {\r\n val = active_gradient;\r\n }\r\n\r\n // apply\r\n active_trigger.style.background = val;\r\n\r\n const field = active_trigger.parentNode.querySelector(right_input_selector),\r\n old_val = field.value;\r\n\r\n if(old_val != val) {\r\n field.value = val;\r\n last_tracked_col = val;\r\n\r\n if(typeof(options.on_change) == 'function') {\r\n\r\n if(typeof(debounced_vars['on_change_cb']) != undefined && debounced_vars['on_change_cb']) {\r\n clearTimeout(debounced_vars['on_change_cb']);\r\n }\r\n debounced_vars['on_change_cb'] = setTimeout(() => {\r\n options.on_change.call(this, val, field);\r\n }, 300);\r\n }\r\n }\r\n };\r\n\r\n\r\n\r\n\r\n\r\n\r\n // HANDLERS\r\n\r\n // fields toggle basing on modes change\r\n this.mode_change = function(el, new_mode) {\r\n if(active_mode == new_mode) {\r\n return false;\r\n }\r\n let color, opacity;\r\n\r\n // from gradient to solid\r\n if(new_mode == 'solid') {\r\n color = active_solid;\r\n if(options.transparency) {\r\n opacity = active_opacity;\r\n }\r\n }\r\n else {\r\n color = gradient_data.steps[0].color;\r\n if(options.transparency) {\r\n opacity = gradient_data.steps[0].opacity;\r\n }\r\n }\r\n\r\n document.querySelector('#lc-color-picker input[type=\"color\"]').value = color;\r\n document.querySelector('.pccp_color_f_wrap input[name=hex]').value = color;\r\n\r\n if(options.transparency) {\r\n document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = opacity;\r\n document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').value = opacity;\r\n }\r\n\r\n // toggle grad fields\r\n if(options.modes.length >= 1) {\r\n document.querySelector('.pccp_deg_f_wrap').style.display = (new_mode == 'linear-gradient') ? 'flex' : 'none';\r\n document.querySelector('.pccp_circle_f_wrap').style.display = (new_mode == 'radial-gradient') ? 'block' : 'none';\r\n }\r\n\r\n // toogle gradient wizard\r\n if(options.modes.indexOf('linear-gradient') !== -1 || options.modes.indexOf('radial-gradient') !== -1) {\r\n document.querySelector('.lccp_gradient_wizard').style.display = (new_mode != 'solid') ? 'block' : 'none';\r\n }\r\n\r\n document.querySelectorAll('#lccp_modes_wrap span').forEach(m => m.classList.remove('lccp_sel_mode'));\r\n el.classList.add('lccp_sel_mode');\r\n\r\n active_mode = new_mode;\r\n (new_mode == 'solid') ? this.apply_changes() : this.apply_gradient_changes(true);\r\n };\r\n\r\n\r\n // add gradient step\r\n this.add_gradient_step = function(e) {\r\n const $this = this,\r\n pos = Math.round((100 * e.layerX) / e.target.offsetWidth);\r\n\r\n // inject in actual steps\r\n let index = 0;\r\n for(let step of gradient_data.steps) {\r\n\r\n if(step.position > pos) {\r\n const step_data = {\r\n color : (index - 1 < 0) ? step.color : gradient_data.steps[(index - 1)].color,\r\n opacity : 1,\r\n position : pos\r\n }\r\n\r\n gradient_data.steps.splice(index, 0, step_data);\r\n break;\r\n }\r\n\r\n index++;\r\n }\r\n document.querySelectorAll('.lccp_gradient_range').forEach(r => r.remove());\r\n\r\n gradient_data.steps.some(function(step, index) {\r\n $this.add_draggable_element(index, step.position, step.color);\r\n });\r\n\r\n // select newly added element\r\n document.querySelector('.lccp_gradient_range[data-step-num=\"'+ index +'\"]').click();\r\n\r\n this.apply_gradient_changes(true);\r\n };\r\n\r\n\r\n // apply ellipse or circle\r\n this.set_ellipse_circle = function(el, new_opt) {\r\n if(gradient_data.radial_circle && new_opt == 'circle' || !gradient_data.radial_circle && new_opt != 'circle') {\r\n return false;\r\n }\r\n gradient_data.radial_circle = !gradient_data.radial_circle;\r\n\r\n document.querySelectorAll('.pccp_circle_f_wrap span').forEach(m => m.classList.remove('pcpp_circle_btn_active'));\r\n el.classList.add('pcpp_circle_btn_active');\r\n\r\n this.apply_gradient_changes(true);\r\n };\r\n\r\n\r\n // track opacity range fields change\r\n this.track_deg_range_change = function(e) {\r\n document.querySelector('.pccp_deg_f_wrap input[name=deg-num]').value = e.target.value;\r\n\r\n gradient_data.deg = e.target.value;\r\n this.apply_gradient_changes(true);\r\n };\r\n this.track_deg_num_change = function(e) {\r\n let val = parseFloat(e.target.value);\r\n if(isNaN(val) || val < 0 || val > 360) {\r\n val = 90;\r\n }\r\n\r\n e.target.value = val;\r\n if(document.querySelector('.pccp_deg_f_wrap input[type=range]')) {\r\n document.querySelector('.pccp_deg_f_wrap input[type=range]').value = val;\r\n }\r\n\r\n gradient_data.deg = val;\r\n this.apply_gradient_changes(true);\r\n };\r\n\r\n\r\n // track opacity range fields change\r\n this.track_color_change = function(e) {\r\n const val = e.target.value.toLowerCase();\r\n document.querySelector('.pccp_color_f_wrap input[name=hex]').value = val;\r\n\r\n this.apply_color_change(val);\r\n };\r\n this.track_color_hex_change = function(e) {\r\n let val = this.short_hex_fix(e.target.value);\r\n\r\n if(val.match(/^#[a-f0-9]{6}$/i) === null) {\r\n val = active_solid.toLowerCase();\r\n }\r\n\r\n e.target.value = val;\r\n document.querySelector('#lc-color-picker input[type=\"color\"]').value = val;\r\n\r\n this.apply_color_change(val);\r\n };\r\n this.apply_color_change = function(val) {\r\n if(active_mode == 'solid') {\r\n active_solid = val;\r\n this.apply_changes();\r\n }\r\n else {\r\n gradient_data.steps[ sel_grad_step ].color = val;\r\n\r\n document.querySelector('.lccp_sel_step').style.background = val;\r\n this.apply_gradient_changes(true);\r\n }\r\n };\r\n\r\n\r\n // track opacity range fields change\r\n this.track_opacity_range_change = function(e) {\r\n document.querySelector('.pccp_opacity_f_wrap input[name=opacity-num]').value = e.target.value;\r\n this.alter_hex_opacity(e.target.value);\r\n };\r\n this.track_opacity_num_change = function(e) {\r\n let val = parseFloat(e.target.value);\r\n if(isNaN(val) || val < 0 || val > 1) {\r\n val = 0.5;\r\n }\r\n\r\n e.target.value = val;\r\n\r\n if(document.querySelector('.pccp_opacity_f_wrap input[type=range]')) {\r\n document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = val;\r\n this.alter_hex_opacity(val);\r\n }\r\n };\r\n this.alter_hex_opacity = function(opacity) {\r\n document.querySelector('#lc-color-picker input[type=\"color\"]').style.opacity = opacity;\r\n\r\n if(active_mode == 'solid') {\r\n active_opacity = opacity;\r\n this.apply_changes();\r\n }\r\n else {\r\n gradient_data.steps[ sel_grad_step ].opacity = opacity;\r\n this.apply_gradient_changes(true);\r\n }\r\n };\r\n\r\n\r\n\r\n\r\n\r\n /*\r\n * UTILITY FUNCTION - debounce action to run once after X time\r\n *\r\n * @param (string) action_name\r\n * @param (int) timing - milliseconds to debounce\r\n * @param (string) - class method name to call after debouncing\r\n * @param (mixed) - extra parameters to pass to callback function\r\n */\r\n this.debounce = function(action_name, timing, cb_function, cb_params) {\r\n if( typeof(debounced_vars[ action_name ]) != 'undefined' && debounced_vars[ action_name ]) {\r\n clearTimeout(debounced_vars[ action_name ]);\r\n }\r\n const $this = this;\r\n\r\n debounced_vars[ action_name ] = setTimeout(() => {\r\n $this[cb_function].call($this, cb_params);\r\n }, timing);\r\n };\r\n\r\n\r\n\r\n\r\n\r\n /* CSS - creates inline CSS into the page */\r\n this.generate_style = function() {\r\n const transp_bg_img = \"url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgGBgcGBggKCAkJCQkICgoMDAwMDAoMDA0NDAwRERERERQUFBQUFBQUFBT/2wBDAQQFBQgHCA8KCg8UDg4OFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAoACgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUGCP/EACIQAQAABQMFAQAAAAAAAAAAAAAFFUNjgqLB4RESEzVRkf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDv4AE6K0stgTgAaIAE6K0stgTgAUZra1cATW1q4A9na8WXXu/PgEqu6eQJVd08gnAAowqrjuCiADOgAowqrjuCiAD/2Q==')\";\r\n\r\n document.head.insertAdjacentHTML('beforeend',\r\n`<style>\r\n.lccp-el-wrap {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n.lccp-el-wrap > input {\r\n margin: 0;\r\n min-width: 100%;\r\n max-width: 100%;\r\n width: auto;\r\n}\r\n.lccp-preview,\r\n.lccp-preview-bg {\r\n display: inline-block;\r\n position: absolute;\r\n cursor: pointer;\r\n z-index: 15;\r\n}\r\n.lccp-preview-bg {\r\n z-index: 10;\r\n}\r\n.lccp-preview-right .lccp-preview {\r\n border-left: 1px solid #ccc;\r\n}\r\n.lccp-preview-left .lccp-preview {\r\n border-right: 1px solid #ccc;\r\n}\r\n.lccp-direct-cp-f {\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n width: 0 !important;\r\n height: 0 !important;\r\n position: absolute;\r\n bottom: 0;\r\n visibility: hidden;\r\n}\r\n.lccp-preview-right .lccp-direct-cp-f {\r\n right: 0;\r\n}\r\n.lccp-preview-left .lccp-direct-cp-f{\r\n left: 0;\r\n}\r\n#lc-color-picker,\r\n#lc-color-picker * {\r\n box-sizing: border-box;\r\n font-family: sans-serif;\r\n}\r\n#lc-color-picker {\r\n visibility: hidden;\r\n z-index: -100;\r\n opacity: 0;\r\n position: absolute;\r\n top: -9999px;\r\n z-index: 9999999999;\r\n width: 280px;\r\n background: #fff;\r\n box-shadow: 0px 2px 13px -2px rgba(0, 0, 0, .18);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n transition: opacity .15s ease;\r\n}\r\n#lc-color-picker.lccp-shown {\r\n visibility: visible;\r\n opacity: 1;\r\n\r\n}\r\n\r\n#lccp_modes_wrap {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: space-between;\r\n margin-bottom: 10px;\r\n}\r\n#lccp_modes_wrap span,\r\n.pccp_circle_f_wrap span {\r\n\tdisplay: inline-block;\r\n\tborder: 1px solid #e8e8e8;\r\n\tbackground: #e8e8e8;\r\n opacity: .78;\r\n\tpadding: 4px 7px;\r\n\tfont-size: 11.5px;\r\n\tborder-radius: 3px;\r\n\tline-height: normal;\r\n cursor: pointer;\r\n user-select: none;\r\n transition: all .2s ease;\r\n}\r\n#lccp_modes_wrap span.lccp_sel_mode,\r\n.pccp_circle_f_wrap span.pcpp_circle_btn_active {\r\n\tborder: 1px solid #bbb;\r\n\tbackground: #fff;\r\n opacity: 1;\r\n\tcursor: default;\r\n}\r\n.lccp_gradient_wizard,\r\n.lccp_gradient_ranges {\r\n position: relative;\r\n}\r\n.lccp_gradient {\r\n height: 35px;\r\n border: 1px solid #aaa;\r\n cursor: crosshair;\r\n position: relative;\r\n z-index: 10;\r\n user-select: none;\r\n}\r\n.lccp_gradient-bg {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tz-index: 0;\r\n\twidth: 100%;\r\n\tmargin: 0;\r\n}\r\n.lccp_gradient_ranges {\r\n margin: 2px 7px 25px 8px;\r\n height: 20px;\r\n}\r\n.lccp_gradient_range {\r\n\tdisplay: inline-block;\r\n\twidth: 13px;\r\n\theight: 13px;\r\n\tborder: 1px solid #ccc;\r\n\tborder-radius: 0 50% 50% 50%;\r\n\ttransform: rotate(45deg) translate3d(-5px, 5px, 0);\r\n\tcursor: col-resize;\r\n\tposition: absolute;\r\n top: 3px;\r\n}\r\n.lccp_gradient_range img {\r\n\twidth: 13px;\r\n\tposition: relative;\r\n\ttop: 11px;\r\n\tleft: 11px;\r\n\topacity: .3;\r\n\tcursor: pointer;\r\n transition: all .2s ease;\r\n}\r\n.lccp_gradient_range img:hover {\r\n opacity: .5;\r\n}\r\n.lccp_sel_step {\r\n border: 1px solid #333;\r\n box-shadow: 0 0 2px 1px teal;\r\n}\r\n.pccp_deg_f_wrap,\r\n.pccp_circle_f_wrap {\r\n margin-bottom: 10px;\r\n}\r\n.pccp_circle_f_wrap * {\r\n float: left;\r\n}\r\n.pccp_circle_f_wrap:after {\r\n content: \"\";\r\n clear: both;\r\n display: block;\r\n}\r\n.pccp_circle_f_wrap img {\r\n position: relative;\r\n top: 4px;\r\n}\r\n.pccp_circle_f_wrap span {\r\n margin-left: 13px;\r\n}\r\n.pccp_circle_f_wrap span:not(.pcpp_circle_btn_active) {\r\n cursr: pointer;\r\n}\r\n.pccp_deg_f_wrap,\r\n.pccp_color_f_wrap,\r\n.pccp_opacity_f_wrap {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n clear: both;\r\n}\r\n.pccp_deg_f_wrap input,\r\n.pccp_color_f_wrap input,\r\n.pccp_opacity_f_wrap input {\r\n border: 1px solid #aaa;\r\n border-radius: 3px;\r\n padding: 0;\r\n}\r\n.lccp-preview-bg,\r\n.pccp_color_f_wrap div,\r\n.lccp_gradient-bg {\r\n background: ${ transp_bg_img } repeat;\r\n background-size: 15px;\r\n}\r\n#lc-color-picker hr {\r\n\tmargin: 14px 0 0;\r\n\theight: 0;\r\n\tborder-width: 1px 0;\r\n\tborder-style: dashed;\r\n\tborder-color: #e3e3e3;\r\n}\r\n.pccp_color_f_wrap div {\r\n width: calc(100% - 25px - 85px);\r\n height: 25px;\r\n border: 1px solid #aaa;\r\n border-radius: 2px;\r\n overflow: hidden;\r\n}\r\n.pccp_deg_f_wrap img,\r\n.pccp_circle_f_wrap img,\r\n.pccp_color_f_wrap img,\r\n.pccp_opacity_f_wrap img {\r\n\tmax-width: 15px;\r\n\topacity: .6;\r\n cursor: help;\r\n user-select: none;\r\n}\r\n.pccp_color_f_wrap input[type=color] {\r\n -webkit-appearance: none;\r\n padding: 0;\r\n width: 110%;\r\n height: 110%;\r\n transform: translate(-5%, -5%);\r\n cursor: pointer;\r\n border: none;\r\n}\r\n.pccp_color_f_wrap input:focus {\r\n outline: none;\r\n}\r\n.pccp_color_f_wrap input::-webkit-color-swatch-wrapper {\r\n padding: 0;\r\n}\r\n.pccp_color_f_wrap input::-webkit-color-swatch {\r\n border: none;\r\n}\r\n.pccp_color_f_wrap input[name=hex] {\r\n width: 70px;\r\n height: 25px;\r\n text-align: center;\r\n}\r\n.pccp_color_f_wrap {\r\n margin-top: 17px;\r\n}\r\n.pccp_opacity_f_wrap {\r\n margin-top: 10px;\r\n}\r\n.pccp_deg_f_wrap input[type=range],\r\n.pccp_opacity_f_wrap input[type=range] {\r\n width: calc(100% - 25px - 70px);\r\n height: 25px;\r\n}\r\n.pccp_deg_f_wrap input[type=\"number\"],\r\n.pccp_opacity_f_wrap input[type=\"number\"] {\r\n\twidth: 53px;\r\n\theight: 25px;\r\n\ttext-align: center;\r\n}\r\n.pccp_deg_f_wrap input[type=range],\r\n.pccp_opacity_f_wrap input[type=range] {\r\n -webkit-appearance: none;\r\n height: 5px;\r\n background: #d5d5d5;\r\n outline: none;\r\n border: none;\r\n}\r\n.pccp_deg_f_wrap input::-webkit-slider-thumb,\r\n.pccp_opacity_f_wrap input::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 17px;\r\n height: 17px;\r\n background: #888;\r\n cursor: pointer;\r\n border-radius: 50%;\r\n border: 1px solid #aaa;\r\n box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);\r\n}\r\n.pccp_deg_f_wrap input::-moz-range-thumb,\r\n.pccp_opacity_f_wrap input::-moz-range-thumb {\r\n width: 15px;\r\n height: 15px;\r\n background: #888;\r\n cursor: pointer;\r\n border-radius: 50%;\r\n border: 1px solid #aaa;\r\n box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);\r\n}\r\n\r\n#lc-color-picker.lccp_dark_theme {\r\n background: #333;\r\n border-color: #505050;\r\n}\r\n.lccp_dark_theme img {\r\n\tfilter: invert(100%);\r\n opacity: .85;\r\n}\r\n.lccp_dark_theme .lccp_gradient_range img {\r\n\topacity: .6;\r\n}\r\n.lccp_dark_theme .lccp_gradient_range img:hover {\r\n opacity: .8;\r\n}\r\n.lccp_dark_theme .lccp_gradient {\r\n border-color: #626262;\r\n}\r\n.lccp_dark_theme .lccp_sel_step {\r\n\tbox-shadow: 0 0 2px 1px orange;\r\n}\r\n#lc-color-picker.lccp_dark_theme hr {\r\n\tborder-color: #727272;\r\n}\r\n.lccp_dark_theme .pccp_deg_f_wrap input,\r\n.lccp_dark_theme .pccp_color_f_wrap input,\r\n.lccp_dark_theme .pccp_opacity_f_wrap input {\r\n\tborder-color: #777;\r\n\tbackground: #505050;\r\n\tcolor: #f3f3f3;\r\n}\r\n.lccp_dark_theme input[type=range] {\r\n background: #808080;\r\n}\r\n</style>`);\r\n };\r\n\r\n\r\n // init when called\r\n this.init();\r\n };\r\n\r\n\r\n\r\n\r\n\r\n\r\n // UTILITIES\r\n\r\n // sanitize \"selector\" parameter allowing both strings and DOM objects\r\n const maybe_querySelectorAll = (selector) => {\r\n\r\n if(typeof(selector) != 'string') {\r\n if(selector instanceof Element) { // JS or jQuery\r\n return [selector];\r\n }\r\n else {\r\n let to_return = [];\r\n\r\n for(const obj of selector) {\r\n if(obj instanceof Element) {\r\n to_return.push(obj);\r\n }\r\n }\r\n return to_return;\r\n }\r\n }\r\n\r\n // clean problematic selectors\r\n (selector.match(/(#[0-9][^\\s:,]*)/g) || []).forEach(function(n) {\r\n selector = selector.replace(n, '[id=\"' + n.replace(\"#\", \"\") + '\"]');\r\n });\r\n\r\n return document.querySelectorAll(selector);\r\n };\r\n\r\n\r\n})());\r\n"],"names":["global","factory","this","window","lc_color_picker","debounced_vars","window_width","style_generated","active_trigger","active_trig_id","active_solid","active_opacity","active_gradient","active_mode","sel_grad_step","gradient_data","deg","radial_circle","steps","def_opts","modes","open_on_focus","transparency","dark_theme","no_input_mode","wrap_width","preview_style","input_padding","side","width","separator_color","fallback_colors","on_change","labels","right_input_selector","lccp_ivc_event","picker_id","hide_picker","CustomEvent","bubbles","detail","document","addEventListener","e","picker","querySelector","target","classList","contains","trigger","getElementsByClassName","parentNode","getElementById","getAttribute","dispatchEvent","innerWidth","String","prototype","lccpReplaceArray","find","replace","replaceString","i","length","regex","RegExp","attachTo","cp_uniqid","last_tracked_col","options","console","error","bkp_opts","Object","assign","init","$this","generate_style","maybe_querySelectorAll","forEach","el","tagName","wrap_element","Math","random","toString","substr","side_prop","trigger_css","parseInt","getComputedStyle","trigger_upper_css","value","div","createElement","className","setAttribute","style","round","getBoundingClientRect","direct_colorpicker_code","add","innerHTML","insertBefore","appendChild","paddingRight","paddingLeft","background","show_picker","remove","debounce","keyCode","key","is_active_trigger_and_opened","activeElement","curr_val","test","val_to_set","browser_val","trim","replaceAll","rgb","RGB_to_hex","toLowerCase","indexOf","call","$target","direct_colorpicker","navigator","userAgent","includes","click","val_to_picker","append_color_picker","picker_w","offsetWidth","picker_h","offsetHeight","at_offsety","at_h","clientHeight","y_pos","y","pageYOffset","left","right","floor","y_pos_css","documentElement","scrollTop","innerHeight","from_manual_input","val","load_gradient_data","load_solid_data","raw_data","data","RGBA_to_hexA","short_hex_fix","is_radial","raw_steps","split","fallback_multiplier","some","raw_step","index","position","raw_color","opacity","col_arr","push","color","rgba_arr","alpha","substring","splice","join","parseFloat","rgb_arr","r","g","b","shorten_hex","hex","a","hex_to_RGB","h","hex_to_RGBA","on_manual_input_change","theme_class","shown_solid","shown_opacity","print_grad_code","picker_el","body","insertAdjacentHTML","mode","querySelectorAll","mode_change","step","add_draggable_element","add_gradient_step","track_deg_range_change","track_deg_num_change","set_ellipse_circle","track_color_change","track_opacity_range_change","track_opacity_num_change","rel_step_num","container","sel_class","del_btn_vis","active","dragStart","range_id","dragEnd","apply_changes","drag","range","preventDefault","rect","new_pos","type","touches","clientX","min_pos","max_pos","apply_gradient_changes","step_num","removeEventListener","select_gradient_color","btn","setTimeout","parent","to_select","m","also_apply_changes","new_gradient","colors_part","to_add","field","undefined","clearTimeout","new_mode","display","pos","layerX","step_data","new_opt","isNaN","apply_color_change","track_color_hex_change","match","alter_hex_opacity","action_name","timing","cb_function","cb_params","head","selector","Element","to_return","obj","n","exports","module","define","amd","globalThis","self","Chart"],"mappings":"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"}
|