mirror of
https://github.com/9001/copyparty.git
synced 2026-06-19 04:32:26 -06:00
horizontal scroll for ghead on mobile, redraw pbar + vbar on accent color change
This commit is contained in:
Til Schmitter
parent
fd6b5f03e5
commit
f251820b2b
|
|
@ -1542,7 +1542,6 @@ html.a #up_quick .btn.on {
|
|||
}
|
||||
#pvolbg {
|
||||
height: 1.3em;
|
||||
min-width: 1.5em;
|
||||
padding: .3em;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
|
|
@ -1891,12 +1890,13 @@ html {
|
|||
background: var(--tree-bg);
|
||||
}
|
||||
#treeh {
|
||||
height: 2.2em;
|
||||
line-height: 2.2em;
|
||||
border-bottom: 1px solid var(--bg-d3);
|
||||
overflow: auto;
|
||||
display: block;
|
||||
padding: .3em 0;
|
||||
padding: .3em .5em;
|
||||
text-wrap-mode: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#treepar {
|
||||
background: #fff;
|
||||
|
|
@ -3471,10 +3471,6 @@ html.ay #tree li,
|
|||
html.ay #treepar {
|
||||
border-color: #f7f7f7 var(--bg-max) #ddd var(--bg-max);
|
||||
}
|
||||
html.ay #path {
|
||||
background: #f7f7f7;
|
||||
box-shadow: 0 0 .3em #bbb;
|
||||
}
|
||||
html.ay #treesuperh,
|
||||
html.ay #treepar {
|
||||
background: #f7f7f7;
|
||||
|
|
@ -3629,10 +3625,6 @@ html.d #treepar {
|
|||
|
||||
|
||||
/* basically a mobile / phone layout */
|
||||
#ghead.inv {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#pathBar.thin {
|
||||
display: block;
|
||||
|
||||
|
|
@ -3640,7 +3632,6 @@ html.d #treepar {
|
|||
position: relative;
|
||||
height: 1.8em;
|
||||
margin: .5em 0 0 0;
|
||||
top: var(--dyn-scrolloffset);
|
||||
z-index: -1;
|
||||
}
|
||||
#wfp.shifted {
|
||||
|
|
@ -3664,7 +3655,11 @@ html.e #pathBar.thin #path {
|
|||
}
|
||||
html:not(.e) #wrap.thin {
|
||||
#ghead {
|
||||
top: calc(7.4em + var(--dyn-scrolloffset));
|
||||
top: 7.4em;
|
||||
text-wrap-mode: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: .3em;
|
||||
}
|
||||
}
|
||||
html.e #wrap.thin {
|
||||
|
|
@ -3683,6 +3678,7 @@ html.e #wrap.thin {
|
|||
@media (max-width: 50em){
|
||||
html:not(.e) body {
|
||||
margin: 1em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
html:not(.e) #treeToggleBtn {
|
||||
margin: .8em 0 0 1.2em;
|
||||
|
|
@ -3695,7 +3691,7 @@ html.e #wrap.thin {
|
|||
margin-left: 0 !important;
|
||||
}
|
||||
#widget {
|
||||
font-size: 1.6em;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
#pathBar {
|
||||
display: block;
|
||||
|
|
@ -3709,6 +3705,10 @@ html.e #wrap.thin {
|
|||
#wfp {
|
||||
margin-left: .1em;
|
||||
}
|
||||
#wfp #gon,
|
||||
#wfp #gop {
|
||||
display: none;
|
||||
}
|
||||
#ggrid {
|
||||
margin: 0em -0.25em;
|
||||
}
|
||||
|
|
@ -4039,7 +4039,6 @@ html.ez {
|
|||
|
||||
html.e {
|
||||
text-shadow: none;
|
||||
--dyn-scrolloffset: 0 !important;
|
||||
}
|
||||
html.e * {
|
||||
border-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1350,6 +1350,9 @@ function setColor (color) {
|
|||
var a = accent || '#fc5';
|
||||
console.log('accent color set to: ' + a);
|
||||
document.documentElement.style.setProperty('--a', a);
|
||||
pbar.drawbuf();
|
||||
pbar.drawpos();
|
||||
vbar.draw();
|
||||
}
|
||||
ebi('accent').oninput = ebi('accent_picker').oninput = function () {
|
||||
var validcolor = parseColor(this.value);
|
||||
|
|
@ -2522,13 +2525,13 @@ var pbar = (function () {
|
|||
|
||||
bau = mp.au;
|
||||
|
||||
var accent = getComputedStyle(document.body).getPropertyValue('--a');
|
||||
|
||||
var sm = bc.w * 1.0 / mp.au.duration,
|
||||
gk = bc.h + '/' + themen,
|
||||
gk = bc.h + '/' + themen + '/' + accent,
|
||||
dz = themen == 'dz',
|
||||
dy = themen == 'dy';
|
||||
|
||||
var accent = getComputedStyle(document.body).getPropertyValue('--a');
|
||||
|
||||
if (gradh != gk) {
|
||||
gradh = gk;
|
||||
grad = auto_grad(bc, accent);
|
||||
|
|
@ -2548,8 +2551,8 @@ var pbar = (function () {
|
|||
bctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
var step = sm > 1 ? 1 : sm > 0.4 ? 3 : sm > 0.05 ? 30 : 720;
|
||||
if(false){
|
||||
var step = sm > 1 ? 1 : sm > 0.4 ? 3 : sm > 0.05 ? 30 : 720;
|
||||
bctx.fillStyle = light && !dy ? 'rgba(0,0,0,0.15)' : 'rgba(255, 255, 255, 0.15)';
|
||||
for (var p = step, mins = adur / 10; p <= mins; p += step)
|
||||
bctx.fillRect(Math.floor(sm * p * 10), 0, 2, pc.h);
|
||||
|
|
@ -2572,7 +2575,7 @@ var pbar = (function () {
|
|||
bctx.fillRect(Math.floor(sm * p * 60), 0, 2, pc.h);
|
||||
};
|
||||
|
||||
r.drawpos = function () {
|
||||
r.drawpos = function (force) {
|
||||
var bc = r.buf,
|
||||
pc = r.pos,
|
||||
pctx = pc.ctx,
|
||||
|
|
@ -2685,13 +2688,13 @@ var vbar = (function () {
|
|||
if (!mp)
|
||||
return;
|
||||
|
||||
var gh = h + '' + light,
|
||||
dz = themen == 'dz',
|
||||
dy = themen == 'dy';
|
||||
|
||||
var accent = getComputedStyle(document.body).getPropertyValue('--a');
|
||||
var bg = getComputedStyle(document.body).getPropertyValue('--bg-u2');
|
||||
|
||||
var gh = h + '' + light + '/' + accent,
|
||||
dz = themen == 'dz',
|
||||
dy = themen == 'dy';
|
||||
|
||||
if (gradh != gh) {
|
||||
gradh = gh;
|
||||
style1 = auto_grad(r.can, accent, accent);
|
||||
|
|
@ -2700,20 +2703,18 @@ var vbar = (function () {
|
|||
ctx.fillStyle = style2; ctx.fillRect(0, 0, w, h);
|
||||
ctx.fillStyle = style1; ctx.fillRect(0, 0, w * mp.vol, h);
|
||||
|
||||
if(false){
|
||||
var vt = Math.floor(mp.vol * 100) + '%',
|
||||
tw = ctx.measureText(vt).width,
|
||||
x = w * mp.vol - tw - 8,
|
||||
li = dy;
|
||||
// var vt = Math.floor(mp.vol * 100) + '%',
|
||||
// tw = ctx.measureText(vt).width,
|
||||
// x = w * mp.vol - tw - 8,
|
||||
// li = dy;
|
||||
|
||||
if (mp.vol < 0.5) {
|
||||
x += tw + 16;
|
||||
li = !li;
|
||||
}
|
||||
// if (mp.vol < 0.5) {
|
||||
// x += tw + 16;
|
||||
// li = !li;
|
||||
// }
|
||||
|
||||
ctx.fillStyle = li ? '#fff' : '#210';
|
||||
ctx.fillText(vt, x, h / 3 * 2);
|
||||
}
|
||||
// ctx.fillStyle = li ? '#fff' : '#210';
|
||||
// ctx.fillText(vt, x, h / 3 * 2);
|
||||
|
||||
clearTimeout(untext);
|
||||
untext = setTimeout(r.draw, 1000);
|
||||
|
|
@ -7400,36 +7401,6 @@ var filecolwidth = (function () {
|
|||
})();
|
||||
onresize100.add(filecolwidth, true);
|
||||
|
||||
var ows_active = false;
|
||||
var lastY = 0;
|
||||
var trailingY0 = 0;
|
||||
function onwrapscroll () {
|
||||
var newY = yscroll();
|
||||
var down = newY > lastY;
|
||||
var gh = ebi('ghead');
|
||||
var pa = ebi('path');
|
||||
var totalH = gh.offsetHeight + ebi('pathBar').offsetHeight;
|
||||
|
||||
if(newY > trailingY0 + totalH){
|
||||
trailingY0 = newY - totalH;
|
||||
clmod(gh, 'inv', true);
|
||||
}
|
||||
else if(newY < trailingY0)
|
||||
{
|
||||
trailingY0 = newY;
|
||||
clmod(gh, 'inv', false);
|
||||
}
|
||||
else{
|
||||
clmod(gh, 'inv', false);
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty('--dyn-scrolloffset', (trailingY0 - newY) + 'px');
|
||||
|
||||
lastY = newY;
|
||||
}
|
||||
if(!IE)
|
||||
window.addEventListener('scroll', onwrapscroll);
|
||||
|
||||
function onwidgetresize(){
|
||||
var widget = ebi('widget');
|
||||
var bar = ebi('pctl');
|
||||
|
|
@ -10228,18 +10199,28 @@ ebi('path').onclick = function (e) {
|
|||
return ev(e);
|
||||
};
|
||||
|
||||
function scroll_v_to_h (e) {
|
||||
function scroll_v_to_h (e, o) {
|
||||
e.preventDefault();
|
||||
var delta = e.deltaY;
|
||||
var maxScrollLeft = ebi('path').scrollWidth - ebi('path').clientWidth;
|
||||
var maxScrollLeft = o.scrollWidth - o.clientWidth;
|
||||
|
||||
ebi('path').scrollLeft = Math.max(0, Math.min(maxScrollLeft, ebi('path').scrollLeft + delta));
|
||||
o.scrollLeft = Math.max(0, Math.min(maxScrollLeft, o.scrollLeft + delta));
|
||||
}
|
||||
function keep_right (o) {
|
||||
o.scrollLeft = o.scrollWidth - o.clientWidth;
|
||||
}
|
||||
|
||||
ebi('path').addEventListener('wheel', scroll_v_to_h);
|
||||
ebi('path').addEventListener('wheel', function (e) {
|
||||
scroll_v_to_h(e, this);
|
||||
});
|
||||
|
||||
ebi('ghead').addEventListener('wheel', function (e) {
|
||||
scroll_v_to_h(e, this);
|
||||
});
|
||||
|
||||
ebi('treeh').addEventListener('wheel', function (e) {
|
||||
scroll_v_to_h(e, this);
|
||||
});
|
||||
|
||||
|
||||
var scroll_y = -1;
|
||||
|
|
|
|||
Loading…
Reference in a new issue