RGB selector bugfix.

This commit is contained in:
Blaz Kristan 2022-03-12 21:25:39 +01:00
parent 28b78c2b27
commit 167d29c39f
3 changed files with 1076 additions and 1069 deletions

View File

@ -151,9 +151,9 @@
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div> <div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div> </div>
<div id="csl"> <div id="csl">
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);">1</button> <button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);">2</button> <button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);">3</button> <button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div> </div>
<p class="labels h" id="cslLabel"></p> <p class="labels h" id="cslLabel"></p>
<div id="hexw"> <div id="hexw">

View File

@ -945,8 +945,8 @@ function updateTrail(e)
var perc = e.value * 100 / max; var perc = e.value * 100 / max;
perc = parseInt(perc); perc = parseInt(perc);
if (perc < 50) perc += 2; if (perc < 50) perc += 2;
var val = `linear-gradient(90deg, var(--c-f) ${perc}%, var(--c-4) ${perc}%)`; var val = `linear-gradient(90deg, var(--bg) ${perc}%, var(--c-4) ${perc}%)`;
e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val; e.parentNode.getElementsByClassName('sliderdisplay')[0].style.backgroundImage = val;
var b = e.parentNode.parentNode.getElementsByTagName('output')[0]; var b = e.parentNode.parentNode.getElementsByTagName('output')[0];
if (b) b.innerHTML = e.value; if (b) b.innerHTML = e.value;
} }
@ -2049,7 +2049,7 @@ function selectSlot(b)
var cd = gId('csl').children; var cd = gId('csl').children;
for (let i of cd) i.classList.remove('xxs-w'); for (let i of cd) i.classList.remove('xxs-w');
cd[b].classList.add('xxs-w'); cd[b].classList.add('xxs-w');
setPicker(cd[b].style.backgroundColor); setPicker(rgbStr(cd[b].dataset));
// force slider update on initial load (picker "color:change" not fired if black) // force slider update on initial load (picker "color:change" not fired if black)
if (cpick.color.value == 0) updatePSliders(); if (cpick.color.value == 0) updatePSliders();
gId('sliderW').value = parseInt(cd[b].dataset.w); gId('sliderW').value = parseInt(cd[b].dataset.w);
@ -2149,6 +2149,9 @@ function fromRgb()
cd[csel].dataset.g = g; cd[csel].dataset.g = g;
cd[csel].dataset.b = b; cd[csel].dataset.b = b;
setCSL(cd[csel]); setCSL(cd[csel]);
//updateTrail(gId('sliderR'));
//updateTrail(gId('sliderG'));
//updateTrail(gId('sliderB'));
} }
function fromW() function fromW()
@ -2157,6 +2160,7 @@ function fromW()
let cd = gId('csl').children; // color slots let cd = gId('csl').children; // color slots
cd[csel].dataset.w = w.value; cd[csel].dataset.w = w.value;
setCSL(cd[csel]); setCSL(cd[csel]);
//updateTrail(w);
} }
// sr 0: from RGB sliders, 1: from picker, 2: from hex // sr 0: from RGB sliders, 1: from picker, 2: from hex

File diff suppressed because it is too large Load Diff