https://www.olimpiaceramicheartistiche.it/wp-content/plugins/olimp…/assets/js/oor-home.js?ver=1.9.0.1790784048

1/**
2 * Home del sito ufficiale: la giostra delle recensioni, come su sferedinatale.
3 *
4 * La fila scorre da sola in CSS (l'elenco e' stampato due volte, a meta' giro la seconda
5 * copia e' dove era la prima). Qui si regola la durata sulla larghezza reale e si rende
6 * la fila trascinabile col dito o col mouse: si ferma, segue il movimento e lasciata
7 * riprende da dove e' stata lasciata, con un ritardo negativo sull'animazione.
8 */
9(function () {
10    'use strict';
11
12    var VELOCITA = 40; // pixel al secondo
13
14    function trascinabile(pista) {
15        var giostra = pista.parentNode;
16        var inCorso = false, partenzaX = 0, partenzaT = 0, x = 0, mosso = false;
17
18        function spostamentoAttuale() {
19            var m = window.getComputedStyle(pista).transform;
20            if (!m || m === 'none') return 0;
21            var v = m.match(/matrix(3d)?\(([^)]+)\)/);
22            if (!v) return 0;
23            var n = v[2].split(',').map(parseFloat);
24            return v[1] ? n[12] : n[4];
25        }
26
27        function meta() {
28            var gap = parseFloat(window.getComputedStyle(pista).columnGap) || 0;
29            return pista.scrollWidth / 2 + gap / 2;
30        }
31
32        giostra.addEventListener('pointerdown', function (e) {
33            if (e.pointerType === 'mouse' && e.button !== 0) return;
34            inCorso = true;
35            mosso = false;
36            partenzaX = e.clientX;
37            partenzaT = spostamentoAttuale();
38            x = partenzaT;
39            pista.style.animationPlayState = 'paused';
40        });
41
42        window.addEventListener('pointermove', function (e) {
43            if (!inCorso) return;
44            var dx = e.clientX - partenzaX;
45            if (!mosso && Math.abs(dx) < 6) return;
46            if (!mosso) {
47                mosso = true;

48                pista.style.animation = 'none';
49                giostra.classList.add('e-trascinata');
50            }
51            var w = meta();
52            x = partenzaT + dx;
53            while (x > 0) x -= w;
54            while (x < -w) x += w;
55            pista.style.transform = 'translateX(' + x + 'px)';
56        }, { passive: true });
57
58        function lascia() {
59            if (!inCorso) return;
60            inCorso = false;
61            giostra.classList.remove('e-trascinata');
62            if (!mosso) { pista.style.animationPlayState = ''; return; }
63            var durata = parseFloat(pista.style.animationDuration) || 60;
64            var avanzamento = Math.min(0.999, Math.max(0, -x / meta()));
65            pista.style.transform = '';
66            pista.style.animation = '';
67            pista.style.animationDuration = durata + 's';
68            pista.style.animationDelay = (-avanzamento * durata) + 's';
69            pista.style.animationPlayState = '';
70        }
71
72        window.addEventListener('pointerup', lascia);
73        window.addEventListener('pointercancel', lascia);
74
75        // Dopo un trascinamento il rilascio non deve aprire un link
76        giostra.addEventListener('click', function (e) {
77            if (mosso) { e.preventDefault(); e.stopPropagation(); mosso = false; }
78        }, true);
79        giostra.addEventListener('dragstart', function (e) { e.preventDefault(); });
80    }
81
82    var piste = Array.prototype.slice.call(document.querySelectorAll('[data-oor-giostra] .oor-recensioni__pista'));
83    if (!piste.length) return;
84
85    function regola() {
86        piste.forEach(function (p) {
87            var unGiro = p.scrollWidth / 2;
88            if (unGiro) p.style.animationDuration = Math.max(30, Math.round(unGiro / VELOCITA)) + 's';
89        });
90    }
91
92    regola();
93    piste.forEach(trascinabile);
94    if (document.fonts && document.fonts.ready) document.fonts.ready.then(regola).catch(function () {});
95    window.addEventListener('load', regola);
96    var attesa = null;
97    window.addEventListener('resize', function () {
98        clearTimeout(attesa);
99        attesa = setTimeout(regola, 200);
100    });
101})();