<?php

$GLOBALS['TL_CSS']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.css|static';

if ($this->options['polyfill'] ?? false) {
    $GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu.polyfill'] = 'bundles/contaommenu/mmenu/mmenu.polyfills.js|static';
}

$GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.js|static';

if ($this->options['drag']['menu']['open'] ?? false) {
    $GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu.hammerjs'] = 'bundles/contaommenu/hammerjs/hammer.min.js|static';
}

?>
<script>
    document.addEventListener(
        "DOMContentLoaded", function () {
            const menu = document.querySelector('#<?= $this->elementId ?>');
            if (null !== menu && 0 === menu.querySelectorAll('li.active').length) {
                const trails = menu.querySelectorAll('li.trail');
                if (0 < trails.length) {
                    trails.item(trails.length - 1).classList.add('active');
                }
            }


            if ($('.mmenu_close_button').length) {

                var mmenu = new Mmenu('#<?= $this->elementId ?>', <?= json_encode($this->options) ?>, <?= json_encode($this->configuration) ?>);

                var elements = document.getElementsByClassName("mmenu_close_button");

                for (var i = 0; i < elements.length; i++) {
                    elements[i].addEventListener("click", function () {
                        mmenu.API.close();
                    });
                }
            } else {
                new Mmenu('#<?= $this->elementId ?>', <?= json_encode($this->options) ?>, <?= json_encode($this->configuration) ?>);
            }

        }
    );
</script>