ot_typo3/ot_templating/Resources/Public/assets/script/main.js

$(document).ready(function(){

    // ******* Navbars & dropdowns *******
    var hideDropdownsFor = function(elt, delay=0) {
        if (delay === 0) {
            elt.children('ul.dropdown-menu').removeClass('dropdown-displayed');
            elt.removeClass('dropdown-displayed');
            elt.children('ul.dropdown-menu').hide();
        } else {
            elt.delay(delay).queue(function(next) {
                elt.children('ul.dropdown-menu').removeClass('dropdown-displayed');
                elt.removeClass('dropdown-displayed');
                next();
            });
            elt.children('ul.dropdown-menu').delay(delay).hide(1);
        }
    }

    var stopDelayedHidingFor = function(elt) {
        elt.stop(true);
        elt.children('ul.dropdown-menu').stop(true);
    }

    $('.dropdown').on('mouseenter', function(e) {

        stopDelayedHidingFor($(this));
        $('.dropdown.dropdown-displayed').not($(this).parents()).each(function() {
            hideDropdownsFor($(this));
        });

        dropdown = $(this).find('ul.dropdown-menu:first');
        if (dropdown.length !== 0) {
            $(this).addClass('dropdown-displayed');
            dropdown.addClass('dropdown-displayed');
            dropdown.show();

            if ($(this).parents('.dropdown').length !== 0) {
                // second level dropdown
                dropdown.removeClass('dropdown-left').removeClass('dropdown-right');
                if (($(this).offset().left + $(this).width() + dropdown.width()) > $(window).width()) {
                    dropdown.addClass('dropdown-left');
                } else {
                    dropdown.addClass('dropdown-right');
                }
            }
        }
    }).on('mouseleave', function(e) {
        if ($(this).hasClass('delayed-collapsing')) {
            hideDropdownsFor($(this), 800);
        } else {
            hideDropdownsFor($(this));
        }
    });

    // **** Login Pop-Up and Auth
    $('#login-btn').on('click', function(e) {
        e.preventDefault();
        $('#login-popup .popup-form').toggleClass("show");
    });

    if ($('#login-popup').find('.alert').length) {
        $('#login-popup .popup-form').toggleClass("show");
        console.log('')
    }

    // **** Forms ****
    $('.datepicker').datepicker({
        minDate: new Date(),
        maxDate: "+2y",
        dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
        dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
        dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
        monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
        monthNamesShort: [ "Jan", "Fev", "Mar", "Avr", "Mai", "Jui", "Juil", "Aou", "Sep", "Oct", "Nov", "Dec" ],
        dateFormat: "dd/mm/yy"
    });

    // **** Carousel *****

    // uses the slick lib, see https://kenwheeler.github.io/slick/
    $('.carousel').slick({
        arrows: false,
        dots: false,
        autoplay: true,
        autoplaySpeed: 3600,
        draggable: false,
        speed: 700,
        adaptiveHeight: false
    });

    // **** Leaflet: maps *****

    function showEventMap(mapDiv) {

        // Collect the data from th map children <i>
        var events = [];
        mapDiv.children('.event-geodata').each(function () {
            let event_ = {
                id: $(this).data('id'),
                long: $(this).data('long'),
                lat: $(this).data('lat'),
                label: $(this).data('label')
            };
            events.push(event_);
        });
        if (events.length === 0) {
            return;
        }

        // Instanciate the map object  @see https://leafletjs.com/reference-1.6.0.html#map-factory
        var mapOptions = {scrollWheelZoom: false};
        var initialZoom = 13;
        var eventMap = L.map('event-map', mapOptions);
        eventMap.setView([events[0].lat, events[0].long], initialZoom);

        console.log([events[0].lat, events[0].long]);

        // Add the tile layer
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            accessToken: 'pk.eyJ1Ijoib2xpdmllci1tYXNzb3QiLCJhIjoiY2s5OGl1M2cxMWNpajNscnV4Zm5maWY3eSJ9.YDESFgB-JuAhplTzXI6hGQ',
        }).addTo(eventMap);

        // Collect the event geodata to create the markers
        var markers = []
        events.forEach(function (event_) {
            var marker = L.marker([event_.lat, event_.long]).addTo(eventMap);
            marker.bindPopup(event_.label);
            markers.push(marker);
        });

        // Set the view
        var markersGroup = new L.featureGroup(markers);
        eventMap.fitBounds(markersGroup.getBounds());
        eventMap.zoomSnap = 1;
        eventMap.zoomOut();
    }

    if ($('.ot-all-events #event-map').length) {
        showEventMap($('#event-map').first());
    }

    if ($('.ot-show-event #event-map').length) {
        showEventMap($('#event-map').first());
    }

});