Fix sticky top.

This commit is contained in:
Blaz Kristan 2023-10-27 16:35:03 +02:00
parent d116424241
commit 341a4a0d60
4 changed files with 2060 additions and 2050 deletions

View File

@ -34,6 +34,7 @@
--bhd: none;
--sgp: "block";
--bmt: 0;
--sti: 42px;
}
html {
@ -457,7 +458,7 @@ button {
padding: 4px 2px;
position: relative;
opacity: 1;
transition: opacity .5s linear, height .5s, transform .5s;
transition: opacity .5s linear, height .25s, transform .25s;
}
.filter {
@ -475,7 +476,7 @@ button {
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease;
transition: opacity .25s ease, visibility .25s ease;
background-color: var(--c-5);
box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f);
@ -1316,20 +1317,14 @@ TD .checkmark, TD .radiomark {
top: 42px;
}
#fxlist .lstI.selected {
top: 84px;
}
#fxlist .lstI.sticky {
top: 42px;
}
#fxlist .lstI.selected,
#pallist .lstI.selected {
top: 84px;
top: calc(var(--sti) + 42px);
}
#fxlist .lstI.sticky,
#pallist .lstI.sticky {
top: 42px;
top: var(--sti);
}
/* list item content */

View File

@ -198,9 +198,9 @@
<div id="fx">
<p class="labels hd" id="modeLabel">Effect mode</p>
<div class="staytop fnd" id="fxFind">
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist');gId('filters').classList.remove('fade');" onblur="filterFocus(event);" />
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="filterFocus(event);search(this,'fxlist');" onblur="filterFocus(event);" />
<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<i class="icons search-icon" x-onclick="gId('filters').classList.toggle('fade');" style="cursor:pointer;">&#xe0a1;</i>
<i class="icons search-icon" style="cursor:pointer;">&#xe0a1;</i>
<div id="filters" class="filter fade">
<label id="filterPal" tooltip="Uses palette" class="check fchkl">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this);">

View File

@ -2746,12 +2746,23 @@ function clean(c)
function filterFocus(e)
{
//console.log(e);
let t = e.explicitOriginalTarget;
do {
if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus()},150); return; }
t = t.parentElement;
} while (t.tagName !== "BODY");
setTimeout(()=>{gId('filters').classList.toggle('fade')},150);
let f = gId("filters");
if (e.type === "focus") f.classList.remove('fade'); // immediately show (still has transition)
// compute sticky top (with delay for transition)
setTimeout(()=>{
let sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight;
console.log(sti);
sCol('--sti', sti+"px");
}, 252);
if (e.type === "blur") {
do {
if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus();},150); return; }
t = t.parentElement;
} while (t.tagName !== "BODY");
setTimeout(()=>{f.classList.add('fade');},255); // wait with hiding
}
}
function filterFx(o)

File diff suppressed because it is too large Load Diff