Commit d0d3d3cf authored by Samir Sadyhov's avatar Samir Sadyhov 🤔

new component UKDropdownMenu

parent 41f59952
.dropdown-menu-container {
position: absolute;
display: none;
background-color: #fff;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
padding: 0;
min-width: 200px;
width: auto;
z-index: 10000;
}
.dropdown-menu-container ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu-container ul li {
padding: 0;
background-color: #fff;
display: block;
}
.dropdown-menu-container ul li a {
color: #555;
padding: 8px 15px;
user-select: none;
}
.dropdown-menu-container ul li a:hover {
background-color: #E6F7FF;
}
.dropdown-menu-container ul .uk-disabled a {
color: #dedede;
}
/*
@selectorContainer - селектор контейнера с кнопкой, куда добавить меню
@item - массив объектов с описанием пунктов меню, пнример:
[
{
name: 'Создать',
icon: 'plus', //не обязательно
handler: function(){
....
}
}
]
@showMode - по какому событию отображать меню, принимает одно из значений: click - по клику, hover - при наведении курсором
*/
this.UKDropdownMenu = class {
constructor(selectorContainer, items = null, showMode = 'click') {
this.selectorContainer = selectorContainer;
this.items = items;
this.showMode = showMode;
this.init();
}
closeMenu(){
UIkit.dropdown(this.menuContainer).hide(0);
}
getMenuItem(name, icon, handler, disabled = false){
const li = $(`<li>`);
const a = $('<a>');
const span = $(`<span>`, {class: "uk-margin-small-right"});
if(icon) span.attr('uk-icon', `icon: ${icon}`);
if(disabled) li.addClass('uk-disabled');
a.append(span, i18n.tr(name));
li.append(a);
li.on('click', e => {
e.preventDefault();
e.stopPropagation();
this.closeMenu();
if(handler) handler();
});
return li;
}
createMenu() {
this.items.forEach(item => {
if(item == 'divider') {
this.nav.append('<li class="uk-nav-divider"></li>');
} else {
const {name, icon, handler, disabled = false} = item;
this.nav.append(this.getMenuItem(name, icon, () => handler(), disabled));
}
});
}
init() {
try {
if(!this.items || !this.items.length) throw new Error('Не передан список пунктов меню');
if(!this.selectorContainer) throw new Error('Не передан селектор контейнера');
this.componentContainer = $(this.selectorContainer);
if(!this.componentContainer || !this.componentContainer.length) throw new Error('Не передан или передан некорректный селектор контейнера');
this.menuContainer = $('<div>', {class: 'dropdown-menu-container', 'uk-dropdown': `mode: ${this.showMode}`});
this.nav = $('<ul>', {class: 'uk-nav uk-nav-parent-icon uk-dropdown-nav'});
this.menuContainer.append(this.nav);
this.componentContainer.addClass('uk-flex-inline uk-flex-wrap');
this.componentContainer.append(this.menuContainer);
this.createMenu();
} catch (err) {
console.log(`UKDropdownMenu ERROR: [${err.message}]`);
}
}
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment