https://hjerteforeningen.dk/fagnet/wp-content/themes/hjerteforenin…/widgets/logoblock/logoblock.js?ver=1.09929

1
2const HFLOGOMAXBLOCKS = 8
3const HFLOGOSLIDETRIGGERDESCTOP = 100
4const HFLOGOSLIDETRIGGERMOBILE = 120
5
6const logoblockMap = new Map();
7
8function hfLogoblockSliderSetup (id,logos) {
9    let currentPage = 0;
10    const totalPages = Math.ceil(logos.length/HFLOGOMAXBLOCKS);
11    const wrapper = document.getElementById(id);
12    const container = wrapper.getElementsByClassName('logoblock-container')[0];
13    const logoContainers = Array.from(wrapper.getElementsByClassName('hf-image-container'));
14    const sliderPageContainers = Array.from(wrapper.getElementsByClassName('slider-page'));
15    const prevButton = document.getElementById(id + "-prev");
16    const nextButton = document.getElementById(id + "-next");
17
18    logoblockMap.set(id,{
19        currentPage,
20        logos,
21        wrapper,
22        totalPages,
23        container,
24        logoContainers,
25        sliderPageContainers
26    });
27
28    prevButton.addEventListener("click", (event) => {
29        hfLogoblockMoveSlider(-1,id);
30    })
31    nextButton.addEventListener("click", (event) => {
32        hfLogoblockMoveSlider(1,id);
33    })
34    hfLogoblockSetupGrabSlider(id);
35}
36
37function hfLogoblockMoveSlider(move,id) {
38    const logodata = logoblockMap.get(id);
39    logodata.currentPage = mod(logodata.currentPage + move, logodata.totalPages);
40    
41    hfLogoblockUpdateImages(id);
42    hfLogoblockUpdateSliderPage(id);
43}
44
45function hfLogoblockSetupGrabSlider (id) {
46    const logodata = logoblockMap.get(id);
47    const container = logodata.container;
48    hfCreateDragEvent(container,
49        {
50            onDownValid : (e,type) => type == "mouse" ? container == e.srcElement : true,
51            onUp : (distanceScrolled,e) => {
52                isMediaSmall()  ? OnLiftMobile (e) 
53                                : OnLiftDesktop(distanceScrolled);
54            },
55            onMove : (distanceScrolled) => container.style.left = distanceScrolled + "px"
56        }
57    ) 
58    function OnLiftDesktop (distanceScrolled) {
59        if (distanceScrolled > HFLOGOSLIDETRIGGERDESCTOP || distanceScrolled < -HFLOGOSLIDETRIGGERDESCTOP){
60            container.style.left = (distanceScrolled * 2) + "px";
61            container.classList.add("smooth-out");
62            hfWait(()=>{
63                container.style.left = 0;
64                hfLogoblockMoveSlider(distanceScrolled < 0 ? 1 : -1,id)
65            }).then(()=>container.classList.remove("smooth-out"));
66        } else {
67            container.style.left = 0;                
68        }
69    }
70    function OnLiftMobile (e) {
71        const ifMove = shouldMove(e,container);
72        if (ifMove) {
73            container.style.left = ifMove == "right" 
74                                 ? (container.offsetLeft + HFLOGOSLIDETRIGGERMOBILE * 2) + "px"
75                                 : (container.offsetLeft - HFLOGOSLIDETRIGGERMOBILE * 2) + "px";
76            container.classList.add("smooth-out");
77            hfWait(()=>{
78                container.style.left = 0;
79                hfLogoblockMoveSlider(ifMove == "right"  ? -1 : 1,id)
80            }).then(()=>container.classList.remove("smooth-out"));
81        }
82    }
83}
84
85function shouldMove (e,container) {
86    const movedOutOfLeftScreen = container.offsetWidth + container.offsetLeft < window.innerWidth + 20;
87    const mouseCloseToLeftBorder = getClientX(e) < HFLOGOSLIDETRIGGERMOBILE;
88    const movedOutOfRightScreen = container.offsetLeft > 20;
89    const mouseCloseToRightBorder = window.innerWidth - getClientX(e) < HFLOGOSLIDETRIGGERMOBILE;
90    return movedOutOfLeftScreen ||  mouseCloseToLeftBorder
91         ? "left"
92         : movedOutOfRightScreen ||  mouseCloseToRightBorder
93         ? "right"
94         : null;
95}
96
97
98
99function hfLogoblockUpdateImages(id) {
100    const logodata = logoblockMap.get(id);
101    const logos = logodata.logos;
102    logodata.logoContainers.forEach((container,i) => {
103        imgIndex = logodata.currentPage * HFLOGOMAXBLOCKS  + i;
104        if (imgIndex + 1 > logos.length) {
105            container.classList.add("smooth-out");
106            container.href =  "";
107            hfWait(()=>{
108                if (!container.classList.contains("smooth-out")) return;
109                container.style.display = "none";
110            });
111        } else {
112            container.classList.remove("smooth-out");
113            container.href = logos[imgIndex].link;
114            container.style.display = null;
115            hfLogoblockSetImg(container.children[0],logos[imgIndex]);
116            hfLogoblockSetImg(container.children[1],logos[imgIndex]);
117        }        
118    });
119}
120
121function hfLogoblockSetImg (imgElement,nextIMG) {
122    // Set the new image or hide the old one
123    if (imgElement.classList.contains("smooth-out")){
124        imgElement.classList.remove("smooth-out");
125        imgElement.src = nextIMG.img;
126        imgElement.alt = nextIMG.alt + " logo";
127    }else {
128        imgElement.classList.add("smooth-out");
129    }
130}
131
132function hfLogoblockUpdateSliderPage (id) {
133    const logodata = logoblockMap.get(id);

134    logodata.sliderPageContainers.forEach((container,i) => {
135        if (i == logodata.currentPage) {
136            container.classList.add("selected");
137        } else {
138            container.classList.remove("selected");
139        }
140    })
141}