diff --git a/README.md b/README.md index dd0ff3f..ca92fb2 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ So I decided to build my own solution in **pure javascript** aiming to create th ### Top features list: -- sigle 31KB file, no dependencies, 100% pure javascript +- sigle 34KB file, no dependencies, 100% pure javascript - supports solid color and/on linear gradient and/or radial gradient - unlimited gradient color steps support - optional transparency support diff --git a/demo.html b/demo.html index 54c5fc1..2bf8ace 100644 --- a/demo.html +++ b/demo.html @@ -86,9 +86,12 @@

The colorpicker for modern web, by + + + + + @@ -110,7 +113,7 @@

The colorpicker for modern web, by The colorpicker for modern web, by ' : ''; + div.classList.add("lccp-el-wrap"); div.innerHTML = '' + - ''; + '' + + direct_colorpicker_code; el.parentNode.insertBefore(div, el); div.appendChild(el); @@ -216,31 +242,124 @@ // input padding if(!options.no_input_mode) { if(options.preview_style.side == 'right') { - div.querySelector('input').style.paddingRight = options.preview_style.input_padding +'px'; + div.querySelector('input:not([type="color"])').style.paddingRight = options.preview_style.input_padding +'px'; } else { - div.querySelector('input').style.paddingLeft = options.preview_style.input_padding +'px'; + div.querySelector('input:not([type="color"])').style.paddingLeft = options.preview_style.input_padding +'px'; } } + + // direct browser colorpicker? track changes + if(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 picker - const trigger = document.getElementById(uniqid); - trigger.addEventListener("click", (e) => {this.show_picker(trigger)}); + const trigger = document.getElementById(cp_uniqid); + trigger.addEventListener("click", (e) => { + this.show_picker(trigger); + }); + + // show on field focus? if(options.open_on_focus) { - div.querySelector('input').addEventListener("focus", (e) => { + div.querySelector(right_input_selector).addEventListener("focus", (e) => { if(trigger != active_trigger) { - $this.debounce('open_on_focus', 100, 'show_picker', 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 field - div.querySelector('input').addEventListener("keyup", (e) => { + div.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; - $this.debounce('manual_input_sync', 700, 'val_to_picker', true); - - $this.debounce('manual_input_sync_cp', 700, 'append_color_picker', false); + active_trig_id = cp_uniqid; + + $this.debounce('manual_input_sync', 510, 'val_to_picker', true); + + if(is_active_trigger_and_opened) { + $this.debounce('manual_input_sync_cp', 500, 'append_color_picker', false); + $this.debounce('reopen_picker_after_manual_edit', 510, 'show_picker', trigger); + } + }); + + + // be sure input value is managed on focusout + div.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 values + div.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 things + browser_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(); + } }); }; @@ -248,14 +367,32 @@ /* show picker */ this.show_picker = function(trigger) { - if(trigger == active_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 = null + return false; } + // direct colorpicker usage? Not for Firefox is "show on focus" is enabled + const 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(); @@ -291,8 +428,12 @@ /* handles input value and prepres data for the picker */ this.val_to_picker = function(from_manual_input) { - const val = active_trigger.parentNode.querySelector('input').value.trim().toLowerCase(); - + if(!active_trigger) { + return false; + } + const val = active_trigger.parentNode.querySelector(right_input_selector).value.trim().toLowerCase(); + last_tracked_col = val; + // check validity let test = document.createElement('div'); test.style.background = val; @@ -342,11 +483,9 @@ this.load_solid_data(active_solid); // elaborate gradient data - this.load_gradient_data(active_gradient); - } - - if(from_manual_input && !options.open_on_focus) { - active_trigger = false; + if(active_gradient) { + this.load_gradient_data(active_gradient); + } } }; @@ -393,7 +532,6 @@ .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 defined @@ -477,7 +615,7 @@ raw_data = raw_data.lccpReplaceArray(['rgba', '\\(', '\\)'], ''); const rgba_arr = raw_data.split(',') - let alpha = rgba_arr[3]; + let alpha = (typeof(rgba_arr[3]) != 'undefined') ? rgba_arr[3] : '1'; if(alpha.substring(0, 1) == '.') { alpha = 0 + alpha; } @@ -490,11 +628,16 @@ }; + /* 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 '#000'; + } + 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); @@ -502,11 +645,31 @@ if (r.length == 1) {r = "0" + r;} if (g.length == 1) {g = "0" + g;} if (b.length == 1) {b = "0" + b;} - - return "#" + r + g + 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) { @@ -514,10 +677,11 @@ hex = a[0] + a[1] + a[1] + a[2] + a[2] + a[3] + a[3]; } - return hex.toUpperCase(); + return hex.toLowerCase(); }; + /* convert hex to RGB */ this.hex_to_RGB = function(h) { let r = 0, g = 0, b = 0; @@ -535,18 +699,19 @@ b = "0x" + h[5] + h[6]; } - return "rgb("+ +r + "," + +g + "," + +b + ")"; + return "rgb("+ +r + ", " + +g + ", " + +b + ")"; }; + /* convert hex to RGB */ this.hex_to_RGBA = function(h, opacity) { - if(opacity === 1) { - return h; + if(parseFloat(opacity) === 1) { + return this.shorten_hex(h); } let rgb = this.hex_to_RGB(h); - return rgb.replace('(', 'a(').replace(')', ','+opacity+')'); + return rgb.replace('(', 'a(').replace(')', ', '+ opacity.toString().replace('0.', '.') +')'); }; @@ -574,9 +739,10 @@ 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 = '
'; + picker = '
'; } @@ -625,7 +791,7 @@
- +
`; // opacity cursor @@ -634,14 +800,14 @@
opacity - +
`; } // append or re-fill - (on_manual_input_change) ? picker_el.innerHTML = picker : document.body.insertAdjacentHTML('beforeend', picker +'
'); + (on_manual_input_change && document.getElementById("lc-color-picker")) ? picker_el.innerHTML = picker : document.body.insertAdjacentHTML('beforeend', picker +''); // modes change @@ -665,7 +831,7 @@ 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', 700, 'track_deg_num_change', e); + this.debounce('deg_f_change', 500, 'track_deg_num_change', e); }); } @@ -680,7 +846,7 @@ document.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', 1000, 'track_color_hex_change', e); + this.debounce('hex_f_change', 600, 'track_color_hex_change', e); }); // transparency actions @@ -688,7 +854,7 @@ 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', 700, 'track_opacity_num_change', e); + this.debounce('opacity_f_change', 500, 'track_opacity_num_change', e); }); } }; @@ -734,15 +900,15 @@ const 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;} + 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 => { @@ -836,14 +1002,30 @@ let colors_part = [] gradient_data.steps.some(function(step, index) { - let to_add = (options.transparency) ? $this.hex_to_RGBA(step.color, step.opacity) : step.color; - to_add += ' '+ step.position +'%'; + 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(', ') + ')'; - document.querySelector('.lccp_gradient:not(.lccp_gradient-bg)').style.background = active_gradient; + + 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(); @@ -861,7 +1043,7 @@ // apply everything to picker global vars if(active_mode == 'solid') { - val = active_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; @@ -875,17 +1057,22 @@ // apply active_trigger.style.background = val; - const field = active_trigger.parentNode.querySelector('input'); - field.value = val; + const field = active_trigger.parentNode.querySelector(right_input_selector), + old_val = field.value; - if(typeof(options.on_change) == 'function') { + if(old_val != val) { + field.value = val; + last_tracked_col = val; - if(typeof(debounced_vars['on_change_cb']) != undefined && debounced_vars['on_change_cb']) { - clearTimeout(debounced_vars['on_change_cb']); + 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); } - debounced_vars['on_change_cb'] = setTimeout(() => { - options.on_change.call(this, val, field); - }, 100); } }; @@ -1007,7 +1194,9 @@ } e.target.value = val; - document.querySelector('.pccp_deg_f_wrap input[type=range]').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); @@ -1016,7 +1205,7 @@ // track opacity range fields change this.track_color_change = function(e) { - const val = e.target.value.toUpperCase(); + const val = e.target.value.toLowerCase(); document.querySelector('.pccp_color_f_wrap input[name=hex]').value = val; this.apply_color_change(val); @@ -1025,7 +1214,7 @@ let val = this.short_hex_fix(e.target.value); if(val.match(/^#[a-f0-9]{6}$/i) === null) { - val = active_solid.toUpperCase(); + val = active_solid.toLowerCase(); } e.target.value = val; @@ -1059,8 +1248,11 @@ } e.target.value = val; - document.querySelector('.pccp_opacity_f_wrap input[type=range]').value = val; - this.alter_hex_opacity(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; @@ -1134,6 +1326,21 @@ .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; @@ -1145,7 +1352,7 @@ opacity: 0; position: absolute; top: -9999px; - z-index: 999; + z-index: 9999999999; width: 280px; background: #fff; box-shadow: 0px 2px 13px -2px rgba(0, 0, 0, .18); @@ -1153,13 +1360,10 @@ overflow: hidden; padding: 10px; border: 1px solid #ccc; - transform: scale(.85); - transition: opacity .2s ease, transform .2s ease; + transition: opacity .15s ease; } #lc-color-picker.lccp-shown { visibility: visible; - z-index: 999; - transform: none; opacity: 1; } @@ -1211,7 +1415,7 @@ margin: 0; } .lccp_gradient_ranges { - margin: 2px 1px 25px 2px; + margin: 2px 7px 25px 8px; height: 20px; } .lccp_gradient_range { @@ -1431,7 +1635,19 @@ const maybe_querySelectorAll = (selector) => { if(typeof(selector) != 'string') { - return (selector instanceof Element) ? [selector] : Object.values(selector); + if(selector instanceof Element) { // JS or jQuery + return [selector]; + } + else { + let to_return = []; + + for(const obj of selector) { + if(obj instanceof Element) { + to_return.push(obj); + } + } + return to_return; + } } // clean problematic selectors diff --git a/lc_color_picker.min.js b/lc_color_picker.min.js index a1615d4..1aa0577 100644 --- a/lc_color_picker.min.js +++ b/lc_color_picker.min.js @@ -1,52 +1,9 @@ /** * lc_color_picker.js - The colorpicker for modern web - * Version: 1.1.1 - * Author: Luca Montanari aka LCweb + * Version: 2.0.0 + * Author: Luca Montanari (LCweb) * Website: https://lcweb.it * Licensed under the MIT license */ - -var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.createTemplateTagFirstArg=function(q){return q.raw=q};$jscomp.createTemplateTagFirstArgWithRaw=function(q,x){q.raw=x;return q};$jscomp.arrayIteratorImpl=function(q){var x=0;return function(){return x';a.parentNode.insertBefore(h,a);h.appendChild(a);c.no_input_mode||("right"==c.preview_style.side?h.querySelector("input").style.paddingRight=c.preview_style.input_padding+"px":h.querySelector("input").style.paddingLeft=c.preview_style.input_padding+"px");var u=document.getElementById(g);u.addEventListener("click",function(k){b.show_picker(u)});c.open_on_focus&&h.querySelector("input").addEventListener("focus",function(k){u!=t&&d.debounce("open_on_focus",100,"show_picker",u)}); -h.querySelector("input").addEventListener("keyup",function(k){t=u;d.debounce("manual_input_sync",700,"val_to_picker",!0);d.debounce("manual_input_sync_cp",700,"append_color_picker",!1)})};this.show_picker=function(a){if(a==t)return document.getElementById("lc-color-picker").remove(),t=null,!1;x=window.innerWidth;t=a;this.val_to_picker();this.append_color_picker();a=document.getElementById("lc-color-picker");var b=a.offsetWidth,d=a.offsetHeight,g=t.getBoundingClientRect(),f=parseInt(t.clientHeight, -10)+parseInt(getComputedStyle(t).borderTopWidth,10)+parseInt(getComputedStyle(t).borderBottomWidth,10);f=parseInt(g.y,10)+parseInt(window.pageYOffset,10)+f+5;g=parseInt(g.right,10)-b;0>g&&(g=0);700>window.innerWidth&&(g=Math.floor((window.innerWidth-b)/2));a.setAttribute("style",(f+d-document.documentElement.scrollTopm.length?1===h?"0%":h==g.length-1?"100%":f*h+"%":m[1];var k=m[0],e=1;-1!==k.indexOf("rgbaZ")&&(e=b.RGBA_to_hexA(k.replace("rgbaZ","rgba").replace(/\|/g,",")),k=e[0],e=e[1]);p.push({color:b.short_hex_fix(k),opacity:e,position:parseInt(u,10)})}else d?A=-1===m.indexOf("circle")?!1:!0:D=parseInt(m.replace("deg", -""),10)})};this.RGBA_to_hexA=function(a){a=a.lccpReplaceArray(["rgba","\\(","\\)"],"");a=a.split(",");var b=a[3];"."==b.substring(0,1)&&(b=0+b);a.splice(3,1);return[this.RGB_to_hex("rgb("+a.join(",")+")"),parseFloat(b)]};this.RGB_to_hex=function(a){a=a.lccpReplaceArray(["rgb","\\(","\\)"],"");var b=a.split(",");a=parseInt(b[0].trim(),10).toString(16);var d=parseInt(b[1].trim(),10).toString(16);b=parseInt(b[2].trim(),10).toString(16);1==a.length&&(a="0"+a);1==d.length&&(d="0"+d);1==b.length&&(b="0"+ -b);return"#"+a+d+b};this.short_hex_fix=function(a){4==a.length&&(a=a.split(""),a=a[0]+a[1]+a[1]+a[2]+a[2]+a[3]+a[3]);return a.toUpperCase()};this.hex_to_RGB=function(a){var b=0,d=0,g=0;4==a.length?(b="0x"+a[1]+a[1],d="0x"+a[2]+a[2],g="0x"+a[3]+a[3]):7==a.length&&(b="0x"+a[1]+a[2],d="0x"+a[3]+a[4],g="0x"+a[5]+a[6]);return"rgb("+ +b+","+ +d+","+ +g+")"};this.hex_to_RGBA=function(a,b){return 1===b?a:this.hex_to_RGB(a).replace("(","a(").replace(")",","+b+")")};this.append_color_picker=function(a){var b= -this;a=void 0===a?!1:a;var d=this;document.getElementById("lc-color-picker")&&!a&&document.getElementById("lc-color-picker").remove();var g=c.dark_theme?"lccp_dark_theme":"lccp_light_theme",f="solid"==r?v:p[0].color,m="solid"==r?w:c.transparency?p[0].opacity:null,h=-1!==c.modes.indexOf("linear-gradient")||-1!==c.modes.indexOf("radial-gradient")?!0:!1,u="";if(a&&document.getElementById("lc-color-picker")){var k=document.getElementById("lc-color-picker");k.setAttribute("data-mode",r)}else u='
';1\n '+c.labels[1]+'\n '+c.labels[2]+'\n '+c.labels[3]+"\n
");h&&(u+='\n
\n
\n
\n\n
\n\n
\n angle\n\n \n \n
\n
\n shape\n\n Ellipse\n Circle\n
\n
\n
');u+='\n
\n color\n\n
\n \n
\n \n
';c.transparency&&(u+='\n
\n opacity\n\n \n \n
');a?k.innerHTML=u:document.body.insertAdjacentHTML("beforeend",u+"");if(1";var h=!1,u=function(k,e,l){if(!1!==h&&k==h){l.preventDefault();var B=m.getBoundingClientRect();l="touchmove"===l.type?l.touches[0].clientX-B.left:l.clientX-B.left;l=Math.round(100*l/m.offsetWidth);0>l?l=0:100=C&&(l=C-1);p[k].position=l;e.style.left=l+"%";f.apply_gradient_changes()}};document.querySelectorAll(".lccp_gradient_range").forEach(function(k){var e= -parseInt(k.getAttribute("data-step-num"),10);k.removeEventListener("touchstart",null);k.removeEventListener("touchend",null);k.removeEventListener("touchmove",null);k.removeEventListener("click",null);k.removeEventListener("mousedown",null);k.removeEventListener("mouseup",null);k.addEventListener("touchstart",function(l){h=e});k.addEventListener("mousedown",function(l){h=e});k.addEventListener("click",function(l){f.select_gradient_color(e)});m.addEventListener("touchmove",function(l){u(e,k,l)});m.addEventListener("mousemove", -function(l){u(e,k,l)});k.addEventListener("mouseup",function(l){h=!1;f.apply_changes()});k.addEventListener("touchend",function(l){h=!1;f.apply_changes()});document.addEventListener("mouseup",function(l){h=!1;f.apply_changes()})});document.querySelectorAll(".lccp_gradient_range img").forEach(function(k){k.addEventListener("click",function(e){if(3>document.querySelectorAll(".lccp_gradient_range").length)return!1;setTimeout(function(){var l=parseInt(e.target.parentNode.getAttribute("data-step-num"), -10),B=l?l-1:0;p.splice(l,1);document.querySelectorAll(".lccp_gradient_range").forEach(function(C){return C.remove()});p.some(function(C,I){f.add_draggable_element(I,C.position,C.color)});document.querySelector('.lccp_gradient_range[data-step-num="'+B+'"]').click();g.apply_gradient_changes(!0)},20)})})};this.select_gradient_color=function(a){E=a;document.querySelectorAll(".lccp_gradient_range").forEach(function(b){return b.classList.remove("lccp_sel_step")});document.querySelector('.lccp_gradient_range[data-step-num="'+ -a+'"]').classList.add("lccp_sel_step");v=p[a].color;w=p[a].opacity;document.querySelector('#lc-color-picker input[type="color"]').value=v;document.querySelector(".pccp_color_f_wrap input[name=hex]").value=v;c.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=w,document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=w)};this.apply_gradient_changes=function(a){var b=this,d=r+"(";d+="linear-gradient"==r?D+"deg":A?"circle":"ellipse";d+=", ";var g= -[];p.some(function(f,m){var h=c.transparency?b.hex_to_RGBA(f.color,f.opacity):f.color;h+=" "+f.position+"%";g.push(h)});z=d+g.join(", ")+")";document.querySelector(".lccp_gradient:not(.lccp_gradient-bg)").style.background=z;a&&this.apply_changes()};this.apply_changes=function(){var a=this;if(!t)return!1;var b="";"solid"==r?(b=v,c.transparency&&document.querySelector(".pccp_opacity_f_wrap input[type=range]")&&(w=document.querySelector(".pccp_opacity_f_wrap input[type=range]").value,b=this.hex_to_RGBA(b, -w))):b=z;t.style.background=b;var d=t.parentNode.querySelector("input");d.value=b;"function"==typeof c.on_change&&(q.on_change_cb&&clearTimeout(q.on_change_cb),q.on_change_cb=setTimeout(function(){c.on_change.call(a,b,d)},100))};this.mode_change=function(a,b){if(r==b)return!1;var d;if("solid"==b){var g=v;c.transparency&&(d=w)}else g=p[0].color,c.transparency&&(d=p[0].opacity);document.querySelector('#lc-color-picker input[type="color"]').value=g;document.querySelector(".pccp_color_f_wrap input[name=hex]").value= -g;c.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=d,document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=d);1a){p.splice(d,0,{color:0>d-1?f.color:p[d-1].color,opacity:1,position:a}); -break}d++}document.querySelectorAll(".lccp_gradient_range").forEach(function(m){return m.remove()});p.some(function(m,h){b.add_draggable_element(h,m.position,m.color)});document.querySelector('.lccp_gradient_range[data-step-num="'+d+'"]').click();this.apply_gradient_changes(!0)};this.set_ellipse_circle=function(a,b){if(A&&"circle"==b||!A&&"circle"!=b)return!1;A=!A;document.querySelectorAll(".pccp_circle_f_wrap span").forEach(function(d){return d.classList.remove("pcpp_circle_btn_active")});a.classList.add("pcpp_circle_btn_active"); -this.apply_gradient_changes(!0)};this.track_deg_range_change=function(a){D=document.querySelector(".pccp_deg_f_wrap input[name=deg-num]").value=a.target.value;this.apply_gradient_changes(!0)};this.track_deg_num_change=function(a){var b=parseFloat(a.target.value);if(isNaN(b)||0>b||360b||1\n.lccp-el-wrap {\n position: relative;\n display: inline-block;\n}\n.lccp-el-wrap > input {\n margin: 0;\n min-width: 100%;\n max-width: 100%;\n width: auto;\n}\n.lccp-preview,\n.lccp-preview-bg {\n display: inline-block;\n position: absolute;\n cursor: pointer;\n z-index: 15;\n}\n.lccp-preview-bg {\n z-index: 10;\n}\n.lccp-preview-right .lccp-preview {\n border-left: 1px solid #ccc;\n}\n.lccp-preview-left .lccp-preview {\n border-right: 1px solid #ccc;\n}\n#lc-color-picker,\n#lc-color-picker * {\n box-sizing: border-box;\n font-family: sans-serif;\n}\n#lc-color-picker {\n visibility: hidden;\n z-index: -100;\n opacity: 0;\n position: absolute;\n top: -9999px;\n z-index: 999;\n width: 280px;\n background: #fff;\n box-shadow: 0px 2px 13px -2px rgba(0, 0, 0, .18);\n border-radius: 4px;\n overflow: hidden;\n padding: 10px;\n border: 1px solid #ccc;\n transform: scale(.85);\n transition: opacity .2s ease, transform .2s ease;\n}\n#lc-color-picker.lccp-shown {\n visibility: visible;\n z-index: 999;\n transform: none;\n opacity: 1;\n\n}\n\n#lccp_modes_wrap {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n margin-bottom: 10px;\n}\n#lccp_modes_wrap span,\n.pccp_circle_f_wrap span {\n\tdisplay: inline-block;\n\tborder: 1px solid #e8e8e8;\n\tbackground: #e8e8e8;\n opacity: .78;\n\tpadding: 4px 7px;\n\tfont-size: 11.5px;\n\tborder-radius: 3px;\n\tline-height: normal;\n cursor: pointer;\n user-select: none;\n transition: all .2s ease;\n}\n#lccp_modes_wrap span.lccp_sel_mode,\n.pccp_circle_f_wrap span.pcpp_circle_btn_active {\n\tborder: 1px solid #bbb;\n\tbackground: #fff;\n opacity: 1;\n\tcursor: default;\n}\n.lccp_gradient_wizard,\n.lccp_gradient_ranges {\n position: relative;\n}\n.lccp_gradient {\n height: 35px;\n border: 1px solid #aaa;\n cursor: crosshair;\n position: relative;\n z-index: 10;\n user-select: none;\n}\n.lccp_gradient-bg {\n\tposition: absolute;\n\ttop: 0;\n\tz-index: 0;\n\twidth: 100%;\n\tmargin: 0;\n}\n.lccp_gradient_ranges {\n margin: 2px 1px 25px 2px;\n height: 20px;\n}\n.lccp_gradient_range {\n\tdisplay: inline-block;\n\twidth: 13px;\n\theight: 13px;\n\tborder: 1px solid #ccc;\n\tborder-radius: 0 50% 50% 50%;\n\ttransform: rotate(45deg) translate3d(-5px, 5px, 0);\n\tcursor: col-resize;\n\tposition: absolute;\n top: 3px;\n}\n.lccp_gradient_range img {\n\twidth: 13px;\n\tposition: relative;\n\ttop: 11px;\n\tleft: 11px;\n\topacity: .3;\n\tcursor: pointer;\n transition: all .2s ease;\n}\n.lccp_gradient_range img:hover {\n opacity: .5;\n}\n.lccp_sel_step {\n border: 1px solid #333;\n box-shadow: 0 0 2px 1px teal;\n}\n.pccp_deg_f_wrap,\n.pccp_circle_f_wrap {\n margin-bottom: 10px;\n}\n.pccp_circle_f_wrap * {\n float: left;\n}\n.pccp_circle_f_wrap:after {\n content: "";\n clear: both;\n display: block;\n}\n.pccp_circle_f_wrap img {\n position: relative;\n top: 4px;\n}\n.pccp_circle_f_wrap span {\n margin-left: 13px;\n}\n.pccp_circle_f_wrap span:not(.pcpp_circle_btn_active) {\n cursr: pointer;\n}\n.pccp_deg_f_wrap,\n.pccp_color_f_wrap,\n.pccp_opacity_f_wrap {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n clear: both;\n}\n.pccp_deg_f_wrap input,\n.pccp_color_f_wrap input,\n.pccp_opacity_f_wrap input {\n border: 1px solid #aaa;\n border-radius: 3px;\n padding: 0;\n}\n.lccp-preview-bg,\n.pccp_color_f_wrap div,\n.lccp_gradient-bg {\n background: url(\'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgGBgcGBggKCAkJCQkICgoMDAwMDAoMDA0NDAwRERERERQUFBQUFBQUFBT/2wBDAQQFBQgHCA8KCg8UDg4OFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAoACgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUGCP/EACIQAQAABQMFAQAAAAAAAAAAAAAFFUNjgqLB4RESEzVRkf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDv4AE6K0stgTgAaIAE6K0stgTgAUZra1cATW1q4A9na8WXXu/PgEqu6eQJVd08gnAAowqrjuCiADOgAowqrjuCiAD/2Q==\') repeat;\n background-size: 15px;\n}\n#lc-color-picker hr {\n\tmargin: 14px 0 0;\n\theight: 0;\n\tborder-width: 1px 0;\n\tborder-style: dashed;\n\tborder-color: #e3e3e3;\n}\n.pccp_color_f_wrap div {\n width: calc(100% - 25px - 85px);\n height: 25px;\n border: 1px solid #aaa;\n border-radius: 2px;\n overflow: hidden;\n}\n.pccp_deg_f_wrap img,\n.pccp_circle_f_wrap img,\n.pccp_color_f_wrap img,\n.pccp_opacity_f_wrap img {\n\tmax-width: 15px;\n\topacity: .6;\n cursor: help;\n user-select: none;\n}\n.pccp_color_f_wrap input[type=color] {\n -webkit-appearance: none;\n padding: 0;\n width: 110%;\n height: 110%;\n transform: translate(-5%, -5%);\n cursor: pointer;\n border: none;\n}\n.pccp_color_f_wrap input:focus {\n outline: none;\n}\n.pccp_color_f_wrap input::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n.pccp_color_f_wrap input::-webkit-color-swatch {\n border: none;\n}\n.pccp_color_f_wrap input[name=hex] {\n width: 70px;\n height: 25px;\n text-align: center;\n}\n.pccp_color_f_wrap {\n margin-top: 17px;\n}\n.pccp_opacity_f_wrap {\n margin-top: 10px;\n}\n.pccp_deg_f_wrap input[type=range],\n.pccp_opacity_f_wrap input[type=range] {\n width: calc(100% - 25px - 70px);\n height: 25px;\n}\n.pccp_deg_f_wrap input[type="number"],\n.pccp_opacity_f_wrap input[type="number"] {\n\twidth: 53px;\n\theight: 25px;\n\ttext-align: center;\n}\n.pccp_deg_f_wrap input[type=range],\n.pccp_opacity_f_wrap input[type=range] {\n -webkit-appearance: none;\n height: 5px;\n background: #d5d5d5;\n outline: none;\n border: none;\n}\n.pccp_deg_f_wrap input::-webkit-slider-thumb,\n.pccp_opacity_f_wrap input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 17px;\n height: 17px;\n background: #888;\n cursor: pointer;\n border-radius: 50%;\n border: 1px solid #aaa;\n box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);\n}\n.pccp_deg_f_wrap input::-moz-range-thumb,\n.pccp_opacity_f_wrap input::-moz-range-thumb {\n width: 15px;\n height: 15px;\n background: #888;\n cursor: pointer;\n border-radius: 50%;\n border: 1px solid #aaa;\n box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);\n}\n\n#lc-color-picker.lccp_dark_theme {\n background: #333;\n border-color: #505050;\n}\n.lccp_dark_theme img {\n\tfilter: invert(100%);\n opacity: .85;\n}\n.lccp_dark_theme .lccp_gradient_range img {\n\topacity: .6;\n}\n.lccp_dark_theme .lccp_gradient_range img:hover {\n opacity: .8;\n}\n.lccp_dark_theme .lccp_gradient {\n border-color: #626262;\n}\n.lccp_dark_theme .lccp_sel_step {\n\tbox-shadow: 0 0 2px 1px orange;\n}\n#lc-color-picker.lccp_dark_theme hr {\n\tborder-color: #727272;\n}\n.lccp_dark_theme .pccp_deg_f_wrap input,\n.lccp_dark_theme .pccp_color_f_wrap input,\n.lccp_dark_theme .pccp_opacity_f_wrap input {\n\tborder-color: #777;\n\tbackground: #505050;\n\tcolor: #f3f3f3;\n}\n.lccp_dark_theme input[type=range] {\n background: #808080;\n}\n')}; -this.init()};var H=function(n){if("string"!=typeof n)return n instanceof Element?[n]:Object.values(n);(n.match(/(#[0-9][^\s:,]*)/g)||[]).forEach(function(c){n=n.replace(c,'[id="'+c.replace("#","")+'"]')});return document.querySelectorAll(n)}})(); \ No newline at end of file +!function(){"use strict";if(void 0!==window.lc_color_picker)return!1;let e=[],t=null,n=null,c=null,r=null,a=null,i=null,o=null,p="solid",l=0,d={deg:0,radial_circle:!1,steps:[]};const s={modes:["solid","linear-gradient","radial-gradient"],open_on_focus:!0,transparency:!0,dark_theme:!1,no_input_mode:!1,wrap_width:"auto",preview_style:{input_padding:35,side:"right",width:30,separator_color:"#ccc"},fallback_colors:["#008080","linear-gradient(90deg, #fff 0%, #000 100%)"],on_change:null,labels:["click to change color","Solid","Linear Gradient","Radial Gradient","add gradient step","gradient angle","gradient shape","color","opacity"]},_='input:not([type="color"])',g=function(e,t=!1){return new CustomEvent("lccp_input_val_check",{bubbles:!0,detail:{picker_id:e,hide_picker:t}})};document.addEventListener("click",(function(e){const t=document.querySelector("#lc-color-picker.lccp-shown");if(!t||e.target.classList.contains("lccp-preview"))return!0;for(const t of document.getElementsByClassName("lccp-preview"))if(t.contains(e.target))return!0;if(e.target.parentNode&&e.target.parentNode.classList&&e.target.parentNode.classList.contains("lccp-el-wrap")&&document.getElementById(r))return!0;if(!t.contains(e.target)&&!e.target.classList.contains("lccp-shown")){const e=t.getAttribute("data-trigger-id");document.getElementById(e).parentNode.querySelector(_).dispatchEvent(g(e,!0))}return!0})),window.addEventListener("resize",(function(e){const n=document.querySelector("#lc-color-picker.lccp-shown");if(!n||t==window.innerWidth)return!0;const c=n.getAttribute("data-trigger-id");document.getElementById(c).parentNode.querySelector(_).dispatchEvent(g(c,!0))})),String.prototype.lccpReplaceArray=function(e,t){let n=this;for(var c=0;c';o.classList.add("lccp-el-wrap"),o.innerHTML=''+p,e.parentNode.insertBefore(o,e),o.appendChild(e),A.no_input_mode||("right"==A.preview_style.side?o.querySelector('input:not([type="color"])').style.paddingRight=A.preview_style.input_padding+"px":o.querySelector('input:not([type="color"])').style.paddingLeft=A.preview_style.input_padding+"px"),o.querySelector(".lccp-direct-cp-f")&&o.querySelector(".lccp-direct-cp-f").addEventListener("input",(e=>{o.querySelector('input:not([type="color"])').value=e.target.value,o.querySelector(".lccp-preview").style.background=e.target.value}));const l=document.getElementById(m);l.addEventListener("click",(e=>{this.show_picker(l)})),A.open_on_focus&&o.querySelector(_).addEventListener("focus",(e=>{l!=c&&(c&&(document.getElementById("lc-color-picker").classList.remove("lccp-shown"),c=null),t.debounce("open_on_focus",10,"show_picker",l))})),o.querySelector(_).addEventListener("keyup",(e=>{if(9==e.keyCode||"Enter"===e.key||13===e.keyCode)return;const n=!!(r=m&&document.querySelector("#lc-color-picker.lccp-shown"));c=l,r=m,t.debounce("manual_input_sync",510,"val_to_picker",!0),n&&(t.debounce("manual_input_sync_cp",500,"append_color_picker",!1),t.debounce("reopen_picker_after_manual_edit",510,"show_picker",l))})),o.querySelector(_).addEventListener("focusout",(e=>{if("BODY"==document.activeElement.tagName&&document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+r+'"]'))return!0;e.target.dispatchEvent(g(r,!0))})),o.querySelector(_).addEventListener("lccp_input_val_check",(e=>{const n=e.target.value,a=document.createElement("div");a.style.background=n;let i,o=a.style.background;n.trim().length&&o?(o=o.replaceAll("0.",".").replace(/rgb\([^\)]+\)/g,(e=>t.RGB_to_hex(e))),i="rgb("==o.trim().toLowerCase().substr(0,4)?t.RGB_to_hex(o):o):i=-1===e.target.value.toLowerCase().indexOf("gradient")?-1===A.fallback_colors[0].toLowerCase().indexOf("rgba")?t.RGB_to_hex(A.fallback_colors[0]):A.fallback_colors[0]:A.fallback_colors[1],i!=n&&(e.target.value=i),"function"==typeof A.on_change&&f!=i&&A.on_change.call(t,i,e.target),e.detail.picker_id==r&&(c=null,r=null);const p=document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+e.detail.picker_id+'"]');p&&(p.classList.remove("lccp-shown"),document.getElementById("lc-color-picker").remove())}))},this.show_picker=function(e){if(document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+r+'"]'))return document.getElementById("lc-color-picker").remove(),c=null,r=null,!1;const n=e.parentNode.querySelector(".lccp-direct-cp-f");if(n&&(!A.open_on_focus||A.open_on_focus&&!navigator.userAgent.toLowerCase().includes("firefox")))return n.value=a,n.click(),!0;t=window.innerWidth,c=e,r=m,this.val_to_picker(),this.append_color_picker();const i=document.getElementById("lc-color-picker"),o=i.offsetWidth,p=i.offsetHeight,l=c.getBoundingClientRect(),d=parseInt(c.clientHeight,10)+parseInt(getComputedStyle(c).borderTopWidth,10)+parseInt(getComputedStyle(c).borderBottomWidth,10),s=parseInt(l.y,10)+parseInt(window.pageYOffset,10)+d+5;let _=parseInt(l.right,10)-o;_<0&&(_=0),window.innerWidth<700&&(_=Math.floor((window.innerWidth-o)/2));const g=s+p-document.documentElement.scrollTop=6&&e[0]===e[1]&&e[2]===e[3]&&e[4]===e[5]?"#"+e[0]+e[2]+e[4]:"#"+e.join("")},this.short_hex_fix=function(e){if(4==e.length){const t=e.split("");e=t[0]+t[1]+t[1]+t[2]+t[2]+t[3]+t[3]}return e.toLowerCase()},this.hex_to_RGB=function(e){let t=0,n=0,c=0;return 4==e.length?(t="0x"+e[1]+e[1],n="0x"+e[2]+e[2],c="0x"+e[3]+e[3]):7==e.length&&(t="0x"+e[1]+e[2],n="0x"+e[3]+e[4],c="0x"+e[5]+e[6]),"rgb("+ +t+", "+ +n+", "+ +c+")"},this.hex_to_RGBA=function(e,t){if(1===parseFloat(t))return this.shorten_hex(e);return this.hex_to_RGB(e).replace("(","a(").replace(")",", "+t.toString().replace("0.",".")+")")},this.append_color_picker=function(e=!1){const t=this;document.getElementById("lc-color-picker")&&!e&&document.getElementById("lc-color-picker").remove();const n=A.dark_theme?"lccp_dark_theme":"lccp_light_theme",c="solid"==p?a:d.steps[0].color,r="solid"==p?i:A.transparency?d.steps[0].opacity:null,l=-1!==A.modes.indexOf("linear-gradient")||-1!==A.modes.indexOf("radial-gradient");let s,_="";if(e&&document.getElementById("lc-color-picker")?(s=document.getElementById("lc-color-picker"),s.setAttribute("data-mode",p),s.setAttribute("data-trigger-id",m)):_='
',A.modes.length>1&&(_+=`\n
\n ${A.labels[1]}\n ${A.labels[2]}\n ${A.labels[3]}\n
`),l&&(_+=`\n
\n
\n
\n \n
\n\n
\n angle\n\n \n \n
\n
\n shape\n\n Ellipse\n Circle\n
\n
\n
`),_+=`\n
\n color\n\n
\n \n
\n \n
`,A.transparency&&(_+=`\n
\n opacity\n \n \n \n
`),e&&document.getElementById("lc-color-picker")?s.innerHTML=_:document.body.insertAdjacentHTML("beforeend",_+"
"),A.modes.length>1)for(const e of document.querySelectorAll("#lccp_modes_wrap span"))e.addEventListener("click",(e=>{t.mode_change(e.target,e.target.getAttribute("data-mode"))}));if(l&&(d.steps.some((function(e,n){t.add_draggable_element(n,e.position,e.color)})),document.querySelector(".lccp_gradient:not(.lccp_gradient-bg)").addEventListener("click",(e=>{this.add_gradient_step(e)}))),-1!==A.modes.indexOf("linear-gradient")&&(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)}))),-1!==A.modes.indexOf("radial-gradient"))for(const e of document.querySelectorAll(".pccp_circle_f_wrap span"))e.addEventListener("click",(e=>{t.set_ellipse_circle(e.target,e.target.getAttribute("data-val"))}));document.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)})),A.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)})))},this.add_draggable_element=function(e,t,n){const c=this,r=document.querySelector(".lccp_gradient_ranges"),a=e?"":"lccp_sel_step",i=d.steps.length>2?"":'style="display: none;"';r.innerHTML+='";let o=!1;const p=function(e,t,n){o=e},l=function(){o=!1,c.apply_changes()},s=function(e,t,n){if(!1!==o&&e==o){n.preventDefault();const a=r.getBoundingClientRect();let i="touchmove"===n.type?n.touches[0].clientX-a.left:n.clientX-a.left;i=Math.round(100*i/r.offsetWidth),i<0?i=0:i>100&&(i=100);const o=e?d.steps[e-1].position:0,p=e==d.steps.length-1?100:d.steps[e+1].position;ip&&(i=p-1),d.steps[e].position=i,t.style.left=i+"%",c.apply_gradient_changes()}};document.querySelectorAll(".lccp_gradient_range").forEach((e=>{const t=parseInt(e.getAttribute("data-step-num"),10);e.removeEventListener("touchstart",null),e.removeEventListener("touchend",null),e.removeEventListener("touchmove",null),e.removeEventListener("click",null),e.removeEventListener("mousedown",null),e.removeEventListener("mouseup",null),e.addEventListener("touchstart",(e=>{p(t,e.target)})),e.addEventListener("mousedown",(e=>{p(t,e.target)})),e.addEventListener("click",(e=>{c.select_gradient_color(t)})),r.addEventListener("touchmove",(n=>{s(t,e,n)})),r.addEventListener("mousemove",(n=>{s(t,e,n)})),e.addEventListener("mouseup",(e=>{l()})),e.addEventListener("touchend",(e=>{l()})),document.addEventListener("mouseup",(e=>{l()}))})),document.querySelectorAll(".lccp_gradient_range img").forEach((e=>{e.addEventListener("click",(e=>{if(document.querySelectorAll(".lccp_gradient_range").length<3)return!1;setTimeout((()=>{const t=e.target.parentNode,n=parseInt(t.getAttribute("data-step-num"),10),r=n?n-1:0;d.steps.splice(n,1),document.querySelectorAll(".lccp_gradient_range").forEach((e=>e.remove())),d.steps.some((function(e,t){c.add_draggable_element(t,e.position,e.color)})),document.querySelector('.lccp_gradient_range[data-step-num="'+r+'"]').click(),this.apply_gradient_changes(!0)}),20)}))}))},this.select_gradient_color=function(e){l=e,document.querySelectorAll(".lccp_gradient_range").forEach((e=>e.classList.remove("lccp_sel_step"))),document.querySelector('.lccp_gradient_range[data-step-num="'+e+'"]').classList.add("lccp_sel_step"),a=d.steps[e].color,i=d.steps[e].opacity,document.querySelector('#lc-color-picker input[type="color"]').value=a,document.querySelector(".pccp_color_f_wrap input[name=hex]").value=a,A.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=i,document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=i)},this.apply_gradient_changes=function(e){const t=this;let n=p+"(";n+="linear-gradient"==p?d.deg+"deg":d.radial_circle?"circle":"ellipse",n+=", ";let c=[];d.steps.some((function(e,n){let r=A.transparency?t.hex_to_RGBA(e.color,e.opacity):t.shorten_hex(e.color);(d.steps.length>2||d.steps.length<=2&&(!n&&parseInt(e.position,10)||n&&n{A.on_change.call(this,t,n)}),300)))},this.mode_change=function(e,t){if(p==t)return!1;let n,c;"solid"==t?(n=a,A.transparency&&(c=i)):(n=d.steps[0].color,A.transparency&&(c=d.steps[0].opacity)),document.querySelector('#lc-color-picker input[type="color"]').value=n,document.querySelector(".pccp_color_f_wrap input[name=hex]").value=n,A.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=c,document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=c),A.modes.length>1&&(document.querySelector(".pccp_deg_f_wrap").style.display="linear-gradient"==t?"flex":"none",document.querySelector(".pccp_circle_f_wrap").style.display="radial-gradient"==t?"block":"none"),-1===A.modes.indexOf("linear-gradient")&&-1===A.modes.indexOf("radial-gradient")||(document.querySelector(".lccp_gradient_wizard").style.display="solid"!=t?"block":"none"),document.querySelectorAll("#lccp_modes_wrap span").forEach((e=>e.classList.remove("lccp_sel_mode"))),e.classList.add("lccp_sel_mode"),p=t,"solid"==t?this.apply_changes():this.apply_gradient_changes(!0)},this.add_gradient_step=function(e){const t=this,n=Math.round(100*e.layerX/e.target.offsetWidth);let c=0;for(let e of d.steps){if(e.position>n){const t={color:c-1<0?e.color:d.steps[c-1].color,opacity:1,position:n};d.steps.splice(c,0,t);break}c++}document.querySelectorAll(".lccp_gradient_range").forEach((e=>e.remove())),d.steps.some((function(e,n){t.add_draggable_element(n,e.position,e.color)})),document.querySelector('.lccp_gradient_range[data-step-num="'+c+'"]').click(),this.apply_gradient_changes(!0)},this.set_ellipse_circle=function(e,t){if(d.radial_circle&&"circle"==t||!d.radial_circle&&"circle"!=t)return!1;d.radial_circle=!d.radial_circle,document.querySelectorAll(".pccp_circle_f_wrap span").forEach((e=>e.classList.remove("pcpp_circle_btn_active"))),e.classList.add("pcpp_circle_btn_active"),this.apply_gradient_changes(!0)},this.track_deg_range_change=function(e){document.querySelector(".pccp_deg_f_wrap input[name=deg-num]").value=e.target.value,d.deg=e.target.value,this.apply_gradient_changes(!0)},this.track_deg_num_change=function(e){let t=parseFloat(e.target.value);(isNaN(t)||t<0||t>360)&&(t=90),e.target.value=t,document.querySelector(".pccp_deg_f_wrap input[type=range]")&&(document.querySelector(".pccp_deg_f_wrap input[type=range]").value=t),d.deg=t,this.apply_gradient_changes(!0)},this.track_color_change=function(e){const t=e.target.value.toLowerCase();document.querySelector(".pccp_color_f_wrap input[name=hex]").value=t,this.apply_color_change(t)},this.track_color_hex_change=function(e){let t=this.short_hex_fix(e.target.value);null===t.match(/^#[a-f0-9]{6}$/i)&&(t=a.toLowerCase()),e.target.value=t,document.querySelector('#lc-color-picker input[type="color"]').value=t,this.apply_color_change(t)},this.apply_color_change=function(e){"solid"==p?(a=e,this.apply_changes()):(d.steps[l].color=e,document.querySelector(".lccp_sel_step").style.background=e,this.apply_gradient_changes(!0))},this.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 t=parseFloat(e.target.value);(isNaN(t)||t<0||t>1)&&(t=.5),e.target.value=t,document.querySelector(".pccp_opacity_f_wrap input[type=range]")&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=t,this.alter_hex_opacity(t))},this.alter_hex_opacity=function(e){document.querySelector('#lc-color-picker input[type="color"]').style.opacity=e,"solid"==p?(i=e,this.apply_changes()):(d.steps[l].opacity=e,this.apply_gradient_changes(!0))},this.debounce=function(t,n,c,r){void 0!==e[t]&&e[t]&&clearTimeout(e[t]);const a=this;e[t]=setTimeout((()=>{a[c].call(a,r)}),n)},this.generate_style=function(){document.head.insertAdjacentHTML("beforeend",'')},this.init()};const u=e=>{if("string"!=typeof e){if(e instanceof Element)return[e];{let t=[];for(const n of e)n instanceof Element&&t.push(n);return t}}return(e.match(/(#[0-9][^\s:,]*)/g)||[]).forEach((function(t){e=e.replace(t,'[id="'+t.replace("#","")+'"]')})),document.querySelectorAll(e)}}(); \ No newline at end of file diff --git a/package.json b/package.json index e93e2cc..b54057a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "author": "LCweb", "name": "lc-color-picker", - "version": "1.1.1", + "version": "2.0.0", "description": "Pure javascript colorpicker for modern web. Supporting solid colors, opacity and gradients", "keywords": [ "javascript",