// input_col_multiple.js // Help out input_col_multiple.htm with input type=color pseudo "multiple" attribute control of body element background linear gradient // RJM Programming - August, 2020 var iocolclicks=0; var iocolvalue=''; var iocoldelim=''; var inplay=0; var elsel=null; var elitext=null; var optionvalmultiple=null; var optionsuffix=' (but you took too long to select)'; var dcclick=false; var willingtotryupto=55; var documentbody=document.body; var linear_gradient_part=''; var iohuh=''; // if iohuh contains ")," linear gradients will be observed, rather than simple one colour arrangements var iomultiple=''; function lessinplay() { if (iohuh.indexOf('),') == -1) { inplay--; if (eval('' + inplay) <= 0) { iohuh=''; documentbody.style.background=''; documentbody.style.backgroundColor='white'; if ((optionvalmultiple ? optionvalmultiple : elsel)) { if ((optionvalmultiple ? optionvalmultiple : elsel).innerHTML.indexOf(')') == -1) { iohuh=' '; if (optionvalmultiple) { optionvalmultiple.innerHTML+=optionsuffix; } else { elsel.innerHTML=elsel.innerHTML.replace('', optionsuffix + ''); } } } } } else if ((optionvalmultiple ? optionvalmultiple : elsel)) { if ((optionvalmultiple ? optionvalmultiple : elsel).innerHTML.indexOf(')') != -1) { iohuh+=' '; if (optionvalmultiple) { optionvalmultiple.innerHTML=optionvalmultiple.innerHTML.replace(optionsuffix, ''); } else { elsel.innerHTML=elsel.innerHTML.replace(optionsuffix + '', ''); } } } } function bodyback(incol) { if (iohuh == iohuh.trim()) { var el=document.querySelector("input[type='color']"); var eloh=''; if (el && iomultiple != '') { if (el.outerHTML.toLowerCase().indexOf(' multiple') == -1) { el.setAttribute('multiple',true); } eloh=el.outerHTML; } if (eloh.toLowerCase().indexOf(' multiple') != -1) { var huhbackis=('' + documentbody.style.backgroundColor).replace(/^null$/g,''); if (huhbackis == '') { huhbackis=('' + documentbody.style.backgroundImage).replace(/^null$/g,''); } //alert(huhbackis); if (huhbackis.indexOf('linear-gradient') == -1 && documentbody.outerHTML.indexOf('linear-gradient(') != -1) { if (documentbody == document.body) { huhbackis=iohuh; } else { huhbackis=iohuh.replace('linear-gradient(rgb','linear-gradient(to right,rgb'); } } if (huhbackis.indexOf('linear-gradient') == -1 || eval('' + inplay) <= 0) { dcclick=false; documentbody.style.backgroundColor=''; documentbody.style.background='linear-gradient(' + linear_gradient_part + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(('#ffffff').replace(',',''), 0.5) + ')'; iocoldelim=','; iohuh='linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ')'; inplay++; setTimeout(lessinplay, 20000); //console.log(hex2dec(incol.replace(',',''), 0.5) + ' ... ' + huhbackis + ' ... ' + documentbody.style.backgroundImage + ' +++ ' + 'linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(incol.replace(',',''), 0.5) + ');'); if ((optionvalmultiple ? optionvalmultiple : elsel)) { if ((optionvalmultiple ? optionvalmultiple : elsel).innerHTML.indexOf(')') != -1) { iohuh+=' '; iocolclicks=1; if (optionvalmultiple) { optionvalmultiple.innerHTML=optionvalmultiple.innerHTML.replace(optionsuffix, ''); } else { elsel.innerHTML=elsel.innerHTML.replace(optionsuffix + '', ''); } } } } else if (huhbackis.indexOf(hex2dec(incol.replace(',',''), 0.5)) == -1 && huhbackis.indexOf(')') != -1) { dcclick=false; documentbody.style.backgroundImage=(huhbackis.split('))')[0] + '))').replace('))', '),' + hex2dec(incol.replace(',',''), 0.5) + ')'); iohuh=(huhbackis.split('))')[0].replace('to right,','') + '))').replace('))', '),' + hex2dec(incol.replace(',',''), 0.5) + ')'); inplay++; setTimeout(lessinplay, 20000); //console.log(hex2dec(incol.replace(',',''), 0.5) + ' .+. ' + iohuh + ' ... ' + documentbody.style.backgroundImage + ' +++ ' + 'linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(incol.replace(',',''), 0.5) + ');'); if ((optionvalmultiple ? optionvalmultiple : elsel)) { if ((optionvalmultiple ? optionvalmultiple : elsel).innerHTML.indexOf(')') != -1) { iohuh+=' '; iocolclicks=1; if (optionvalmultiple) { optionvalmultiple.innerHTML=optionvalmultiple.innerHTML.replace(optionsuffix, ''); } else { elsel.innerHTML=elsel.innerHTML.replace(optionsuffix + '', ''); } } } } else if (huhbackis.indexOf(')') != -1) { if (!dcclick) { dcclick=true; } else { //document.title='' + iocolclicks; dcclick=false; documentbody.style.backgroundColor=''; documentbody.style.background='linear-gradient(' + linear_gradient_part + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(('#ffffff').replace(',',''), 0.5) + ')'; iocoldelim=','; iohuh='linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ')'; inplay++; setTimeout(lessinplay, 20000); //console.log(hex2dec(incol.replace(',',''), 0.5) + ' ... ' + huhbackis + ' ... ' + documentbody.style.backgroundImage + ' +++ ' + 'linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(incol.replace(',',''), 0.5) + ');'); if ((optionvalmultiple ? optionvalmultiple : elsel)) { if ((optionvalmultiple ? optionvalmultiple : elsel).innerHTML.indexOf(')') != -1) { iohuh+=' '; iocolclicks=1; if (optionvalmultiple) { optionvalmultiple.innerHTML=optionvalmultiple.innerHTML.replace(optionsuffix, ''); } else { elsel.innerHTML=elsel.innerHTML.replace(optionsuffix + '', ''); } } } } } else { dcclick=false; } } } else { iocolclicks=1; } iohuh=iohuh.trim(); return incol; } function hexdec(hexString) { // thanks to https://locutus.io/php/math/hexdec/ // discuss at: https://locutus.io/php/hexdec/ // original by: Philippe Baumann // example 1: hexdec('that') // returns 1: 10 // example 2: hexdec('a0') // returns 2: 160 hexString = (hexString + '').replace(/[^a-f0-9]/gi, ''); return parseInt(hexString, 16); } function hex2dec(couleur, inopac) { var dolR = couleur.toLowerCase().replace('#','').substring(0,2); var dolrouge = hexdec(dolR); var dolV = couleur.toLowerCase().replace('#','').replace(dolR,'').substring(0,2); var dolvert = hexdec(dolV); var dolB = couleur.toLowerCase().replace('#','').replace(dolR,'').replace(dolV,'').substring(0,2); var dolbleu = hexdec(dolB); if (('' + inopac).replace('1.0','') != '') { return 'rgba(' + dolrouge + ',' + dolvert + ',' + dolbleu + ',' + inopac + ')'; } else { return couleur.toLowerCase(); } } function checkformultiple(othis) { iocolclicks++; //document.title=(othis.outerHTML.toLowerCase()); if (iocolclicks == 2 && othis.outerHTML.toLowerCase().indexOf(' multiple') != -1) { //if (1 == 2) { if (elitext) { elitext.focus(); } //} else { //othis.close(); //} iocolclicks=0; } } function finalchoice(othis) { if (('' + othis.value).replace(/^null$/g,'') != '') { iocolvalue+=bodyback(iocoldelim + ('' + othis.value).replace(/^null$/g,'')); } } function sel(oid) { if (document.getElementById(oid)) { iomultiple='' + document.getElementById(oid).value; } } function onl() { var el=document.querySelector("input[type='color']"); if (!el && eval('' + willingtotryupto) > 0) { willingtotryupto--; setTimeout(onl, 1000); return; } if (document.getElementById('mycolour') && el) { documentbody=document.getElementById('mycolour'); document.getElementById('mycolour').title=('' + document.getElementById('mycolour').title + ' ') + ' (negative opacity value here stops Linear Gradient mode). Multiple selections with colour picker within 20 seconds signify a linear gradient stroke (as relevant)'; el.title=('' + el.title + ' ') + 'Multiple selections of this colour picker within 20 seconds signify a linear gradient stroke (as relevant)'; linear_gradient_part='to right,'; iomultiple='multiple'; willingtotryupto=555; } else { documentbody=document.body; } elitext=document.querySelector("input[type='text']"); optionvalmultiple=document.querySelector("option[value='multiple']"); if (!optionvalmultiple && iomultiple == '') { iomultiple='multiple'; } if (el) { if (!el.onclick) { el.addEventListener('click', function(event) { checkformultiple(event.target); }); } else if (('' + el.onclick).indexOf('checkformultiple') == -1) { el.addEventListener('click', function(event) { checkformultiple(event.target); }); } if (!el.onblur) { el.addEventListener('blur', function(event) { finalchoice(event.target); }); } else if (('' + el.onblur).indexOf('finalchoice') == -1) { el.addEventListener('blur', function(event) { finalchoice(event.target); }); } if (!el.onchange) { el.addEventListener('change', function(event) { finalchoice(event.target); }); } else if (('' + el.onchange).indexOf('finalchoice') == -1) { el.addEventListener('change', function(event) { finalchoice(event.target); }); } } var elsels=document.querySelectorAll("select"); if (elsels.length > 0) { for (var iko=0; iko