Búsquedas recientes
No hay búsquedas recientes

Michaela Vlckova
Incorporación 23 nov 2022
·
Última actividad 24 nov 2022
Seguimientos
0
Seguidores
0
Actividad total
2
Votos
0
Suscripción
1
RESUMEN DE LA ACTIVIDAD
INSIGNIAS
ARTÍCULOS
PUBLICACIONES
COMENTARIOS DE LA COMUNIDAD
COMENTARIOS DE ARTÍCULOS
RESUMEN DE LA ACTIVIDAD
Última actividad de Michaela Vlckova
Michaela Vlckova hizo un comentario,
ComentarioUsing themes and customizing your Help Center
Hi there, for all that have "dropdown" issues:
it can be fixed by adding whole dropdown section in script.js from original Copenhagen theme + adding a css rules to style dropdown and hide/show them based on aria-expanded attributes:
[aria-expanded=true] {
display: block;
}
[aria-expanded=false] {
display: none;
}
JS snippet:
// Dropdowns
function Dropdown(toggle, menu) {
this.toggle = toggle;
this.menu = menu;
this.menuPlacement = {
top: menu.classList.contains("dropdown-menu-top"),
end: menu.classList.contains("dropdown-menu-end")
};
this.toggle.addEventListener("click", this.clickHandler.bind(this));
this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this));
this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this));
}
Dropdown.prototype = {
get isExpanded() {
return this.menu.getAttribute("aria-expanded") === "true";
},
get menuItems() {
return Array.prototype.slice.call(this.menu.querySelectorAll("[role='menuitem']"));
},
dismiss: function() {
if (!this.isExpanded) return;
this.menu.setAttribute("aria-expanded", false);
this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top");
},
open: function() {
if (this.isExpanded) return;
this.menu.setAttribute("aria-expanded", true);
this.handleOverflow();
},
handleOverflow: function() {
var rect = this.menu.getBoundingClientRect();
var overflow = {
right: rect.left < 0 || rect.left + rect.width > window.innerWidth,
bottom: rect.top < 0 || rect.top + rect.height > window.innerHeight
};
if (overflow.right || this.menuPlacement.end) {
this.menu.classList.add("dropdown-menu-end");
}
if (overflow.bottom || this.menuPlacement.top) {
this.menu.classList.add("dropdown-menu-top");
}
if (this.menu.getBoundingClientRect().top < 0) {
this.menu.classList.remove("dropdown-menu-top")
}
},
focusNextMenuItem: function(currentItem) {
if (!this.menuItems.length) return;
var currentIndex = this.menuItems.indexOf(currentItem);
var nextIndex = currentIndex === this.menuItems.length - 1 || currentIndex < 0 ? 0 : currentIndex + 1;
this.menuItems[nextIndex].focus();
},
focusPreviousMenuItem: function(currentItem) {
if (!this.menuItems.length) return;
var currentIndex = this.menuItems.indexOf(currentItem);
var previousIndex = currentIndex <= 0 ? this.menuItems.length - 1 : currentIndex - 1;
this.menuItems[previousIndex].focus();
},
clickHandler: function() {
if (this.isExpanded) {
this.dismiss();
} else {
this.open();
}
},
toggleKeyHandler: function(e) {
switch (e.keyCode) {
case ENTER:
case SPACE:
case DOWN:
e.preventDefault();
this.open();
this.focusNextMenuItem();
break;
case UP:
e.preventDefault();
this.open();
this.focusPreviousMenuItem();
break;
case ESCAPE:
this.dismiss();
this.toggle.focus();
break;
}
},
menuKeyHandler: function(e) {
var firstItem = this.menuItems[0];
var lastItem = this.menuItems[this.menuItems.length - 1];
var currentElement = e.target;
switch (e.keyCode) {
case ESCAPE:
this.dismiss();
this.toggle.focus();
break;
case DOWN:
e.preventDefault();
this.focusNextMenuItem(currentElement);
break;
case UP:
e.preventDefault();
this.focusPreviousMenuItem(currentElement);
break;
case TAB:
if (e.shiftKey) {
if (currentElement === firstItem) {
this.dismiss();
} else {
e.preventDefault();
this.focusPreviousMenuItem(currentElement);
}
} else if (currentElement === lastItem) {
this.dismiss();
} else {
e.preventDefault();
this.focusNextMenuItem(currentElement);
}
break;
case ENTER:
case SPACE:
e.preventDefault();
currentElement.click();
break;
}
}
}
var dropdowns = [];
var dropdownToggles = Array.prototype.slice.call(document.querySelectorAll(".dropdown-toggle"));
dropdownToggles.forEach(function(toggle) {
var menu = toggle.nextElementSibling;
if (menu && menu.classList.contains("dropdown-menu")) {
dropdowns.push(new Dropdown(toggle, menu));
}
});
document.addEventListener("click", function(evt) {
dropdowns.forEach(function(dropdown) {
if (!dropdown.toggle.contains(evt.target)) {
dropdown.dismiss();
}
});
});
(source from https://github.com/zendesk/copenhagen_theme/blob/master/script.js lines 316-482)
Ver comentario · Editado 24 nov 2022 · Michaela Vlckova
0
Seguidores
0
Votos
0
Comentarios