// input_col_multiple.js // Help out input_col_multiple.html 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 iohuh=''; var iomultiple=''; function bodyback(incol) { 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=('' + document.body.style.backgroundColor).replace(/^null$/g,''); if (huhbackis == '') { huhbackis=('' + document.body.style.backgroundImage).replace(/^null$/g,''); } //alert(huhbackis); if (huhbackis.indexOf('linear-gradient') == -1 && document.body.outerHTML.indexOf('linear-gradient(') != -1) { huhbackis=iohuh; } if (huhbackis.indexOf('linear-gradient') == -1) { document.body.style.backgroundColor=''; document.body.style.background='linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(('#ffffff').replace(',',''), 0.5) + ')'; iocoldelim=','; iohuh='linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ')'; //alert(iohuh); console.log(hex2dec(incol.replace(',',''), 0.5) + ' ... ' + huhbackis + ' ... ' + document.body.style.backgroundImage + ' +++ ' + 'linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(incol.replace(',',''), 0.5) + ');'); } else if (huhbackis.indexOf(hex2dec(incol.replace(',',''), 0.5)) == -1 && huhbackis.indexOf(')') != -1) { document.body.style.backgroundImage=(huhbackis.split('))')[0] + '))').replace('))', '),' + hex2dec(incol.replace(',',''), 0.5) + ')'); iohuh=(huhbackis.split('))')[0] + '))').replace('))', '),' + hex2dec(incol.replace(',',''), 0.5) + ')'); //alert(iohuh); console.log(hex2dec(incol.replace(',',''), 0.5) + ' .+. ' + iohuh + ' ... ' + document.body.style.backgroundImage + ' +++ ' + 'linear-gradient(' + hex2dec(incol.replace(',',''), 0.5) + ',' + hex2dec(incol.replace(',',''), 0.5) + ');'); } } 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) { //document.getElementById('ootw').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 elsel=document.querySelector("select"); if (elsel) { if (('' + elsel.id) == '') { iomultiple='' + elsel.value; } else { sel(('' + elsel.id)); } } } setTimeout(onl, 1000);