[bug] [FP] Pijltoetsen werken niet meer in image-carrousel

[.oisyn]

Zie bijvoorbeeld reviews: Rage 2 - Nadere blik op levendige spelwereld

Volgens mij kon ik altijd gewoon door de plaatjes cyclen met de links/rechts pijltoetsen op het toetsenbord. Dat lijkt nu niet meer het geval.

Ik draai Chrome Version 71.0.3578.98 (Official Build) (64-bit) op Windows 10.
.edit: hij ging net updaten in het about scherm, 72.0.3626.81 zelfde verhaal

[ Voor 18% gewijzigd door .oisyn op 30-01-2019 16:11 ]

[Hero of Time]

Geen probleem bij mij met Otter-browser 0.9.99 RC12. En ook Firefox 64 doet het prima. Lijkt een Chrome fuckup te zijn.

[rens-br]

.oisyn schreef op woensdag 30 januari 2019 @ 16:09:
Zie bijvoorbeeld reviews: Rage 2 - Nadere blik op levendige spelwereld

Volgens mij kon ik altijd gewoon door de plaatjes cyclen met de links/rechts pijltoetsen op het toetsenbord. Dat lijkt nu niet meer het geval.

Bedoel je dan in de 'full-screen' browser (wanneer je op een van de afbeeldingen klikt hebt) of de image browser embedded in de pagina?

De 'full-screen' versie werkt hier prima, de geembedded versie niet.

Windows 7, Chrome 71.0.3578.98

[.oisyn]

rens-br schreef op woensdag 30 januari 2019 @ 16:33:
[...]


Bedoel je dan in de 'full-screen' browser (wanneer je op een van de afbeeldingen klikt hebt) of de image browser embedded in de pagina?

Ah ja, misschien is dat het verschil. Misschien dan verplaatsen naar Mooie Features, want het zou wel fijn zijn als ze ook embedded werken

[crisp]

.oisyn schreef op woensdag 30 januari 2019 @ 16:41:
[...]

Ah ja, misschien is dat het verschil. Misschien dan verplaatsen naar Mooie Features, want het zou wel fijn zijn als ze ook embedded werken

Dat hebben we overwogen bij de ontwikkeling, maar buiten dat het technisch lastig te realiseren was heb je ook het probleem hoe je dat zou moeten 'activeren' voor een specifieke carrousel; er kunnen er immers meerdere zijn op 1 pagina, en zelfs bij maar 1 is het niet handig om zomaar de pijltjestoetsen te 'kapen'. Daarbij is het voldoende om op de grote image te klikken om de modal imageviewer te openen waar je vervolgens wel volledige keyboard support hebt.

Ik zal deze iig verplaatsen naar Mooie Features maar ik geef het weinig kans...

[HolyPanther]

Onderstaand heb ik een tijd geleden snel in elkaar geflanst maar kan als basisidee dienen.
Het idee is alleen hijacken wanneer er geen metaKey(dus alleen pijltjestoets) gebruikt wordt en het element in view is.

Een andere optie die ik wel mooi vind is tijdens het indrukken van een pijltjestoets een overlaymelding te geven in de gallery dat pijltjestoetsen wel werken in de full screen modus van de gallery.(zoals wanneer je bij een Google maps embed scrolled)

code:

let keydownEvent = (e: KeyboardEvent) => {
    if (e.metaKey
        || [37, 39].indexOf(e.which) === -1
        || (
            !utilities.isElementInViewport(self.slider, 200)
            && !utilities.isElementInViewport(self.thumbswrap.parentElement, 10)
        )
    ) {
        return;
    }
    if (e.which === 37) {
        self.toSlide(self.currentIndex - 1);
    } else if (e.which === 39) {
        self.toSlide(self.currentIndex + 1);
    }
};

code:

export function isElementInViewport (el: HTMLElement, overlap?: number): boolean
{
    var rect = el.getBoundingClientRect();
    overlap = overlap || 0;

    return (
        rect.top >= 0 - overlap &&
        rect.left >= 0 - overlap &&
        rect.bottom <=  (window.innerHeight || document.documentElement.clientHeight) + overlap &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}