https://lumeco.nl/wp-content/themes/ai-base/view/acf-blocks/foldout/foldout.js

1// ---------------------------------------------------------------------------------------------------------------------
2// Events
3// ---------------------------------------------------------------------------------------------------------------------
4
5/**
6 * On load event
7 *
8 * Copyright (c) 2022 Accent Interactive
9 * @link https://www.accentinteractive.nl/
10 */
11window.addEventListener('load', function ()
12{
13    const url               = window.location.href
14    const hashWithoutSharp  = url.substring( url.indexOf( '#' ) + 1 )
15
16    if ( hasFoldoutHash( url ) )
17    {
18        markViewportSections()                                      // No animation for all sections
19        scrollToHash( 100 )                               // Instant scroll to URL hash
20        jQuery( '#' + hashWithoutSharp ).addClass( 'active' )       // Open the hashed foldout
21        removeHash(2500 )                                   // Remove the hash after 1.5 sec
22    }
23})
24
25/**
26 * Click event for foldout
27 *
28 * Copyright (c) 2022 Accent Interactive
29 * @link https://www.accentinteractive.nl/
30 */
31jQuery( '.single-attribute-span' ).click( function ()
32{
33    removeHash()                                                    // Remove the hash instant
34    jQuery( this ).toggleClass( 'active' )                          // Open the hashed foldout
35    const url   = window.location.href                              // Get the current URL
36    const hash  = '#' + this.dataset.foldoutCount                   // Get the ID from URL
37    history.pushState({}, "", url + hash )        // Push the hashed URL to history
38});
39
40// ---------------------------------------------------------------------------------------------------------------------
41// Helper functions
42// ---------------------------------------------------------------------------------------------------------------------
43
44/**
45 * Helper function for removing hashes from URLs
46 *
47 * Copyright (c) 2022 Accent Interactive
48 * @link https://www.accentinteractive.nl/
49 */
50function removeHash( timeout )
51{
52    if ( timeout ) {
53        setTimeout(function() {
54            history.pushState(
55                "", document.title,
56                window.location.pathname + window.location.search
57            );
58        }, timeout );
59    } else {
60        history.pushState(
61            "", document.title,
62            window.location.pathname + window.location.search
63        );
64    }
65}
66
67/**
68 * Helper function for returning boolean value if url has hash
69 *
70 * @param url
71 * @returns {boolean}
72 *
73 * Copyright (c) 2022 Accent Interactive
74 * @link https://www.accentinteractive.nl/
75 */
76function hasFoldoutHash( url )
77{
78    const regex = /^#foldout-\d+$/
79    return regex.test( new URL( url ).hash )
80}
81
82/**
83 * Copyright (c) 2022 Accent Interactive
84 * @link https://www.accentinteractive.nl/
85 */
86function scrollToHash( offsetTop = 0 )
87{
88    const hash = window.location.hash.slice(1)
89    document.body.style.scrollBehavior = 'auto'
90
91    if (hash) {
92
93        let targetElement   = document.getElementById( hash )
94
95        if ( targetElement ) {
96
97            window.scrollTo({
98                top: targetElement.offsetTop - offsetTop,
99                behavior: 'auto'
100            })
101        }
102    }
103}
104
105
106/**
107 * Copyright (c) 2022 Accent Interactive
108 * @link https://www.accentinteractive.nl/
109 */
110function markViewportSections()
111{
112    const sections = document.querySelectorAll( 'section' )
113
114    sections.forEach(section => {

115        section.style.animation = 'none'
116        section.classList.add( 'in-viewport' )
117    });
118}