File size: 1,908 Bytes
da96562 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | /*!
* Matomo - free/libre analytics platform
*
* @link https://matomo.org
* @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
import { DirectiveBinding, nextTick } from 'vue';
interface DropdownArgs {
activates?: HTMLElement|string,
}
/**
* A materializecss dropdown menu that supports submenus.
*
* To use a submenu, just use this directive within another dropdown.
*
* Note: if submenus are used, then dropdowns will never scroll.
*
* Usage:
* <a class='dropdown-trigger btn' href='' data-target='mymenu' v-dropdown-menu>Menu</a>
* <ul id='mymenu' class='dropdown-content'>
* <li>
* <a class='dropdown-trigger' data-target="mysubmenu" v-dropdown-menu>Submenu</a>
* <ul id="mysubmenu" class="dropdown-content">
* <li>Submenu Item</li>
* </ul>
* </li>
* <li>
* <a href="">Another item</a>
* </li>
* </ul>
*/
export default {
mounted(element: HTMLElement, binding: DirectiveBinding<DropdownArgs>): void {
let options = {};
$(element).addClass('matomo-dropdown-menu');
const isSubmenu = !!$(element).parent().closest('.dropdown-content').length;
if (isSubmenu) {
options = { hover: true };
$(element).addClass('submenu');
$(binding.value?.activates || $(element).data('target'))
.addClass('submenu-dropdown-content');
// if a submenu is used, the dropdown will never scroll
$(element).parents('.dropdown-content').addClass('submenu-container');
}
$(element).dropdown(options);
},
updated(element: HTMLElement): void {
// classes can be overwritten when elements bind to :class, nextTick + using
// updated avoids this problem (and doing in both mounted and updated avoids a temporary
// state where the classes aren't added)
nextTick(() => {
$(element).addClass('matomo-dropdown-menu');
});
},
};
|