최근 검색
최근 검색 없음

Michaela Vlckova
가입한 날짜: 2022년 11월 23일
·
마지막 활동: 2022년 11월 24일
팔로잉
0
팔로워
0
총 활동 수
2
투표 수
0
가입 플랜
1
활동 개요
배지
문서
게시물
커뮤니티 댓글
문서 댓글
활동 개요
님의 최근 활동 Michaela Vlckova
Michaela Vlckova님이 에 댓글을 입력함
댓글Using 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)
댓글 보기 · 2022년 11월 24일에 편집됨 · Michaela Vlckova
0
팔로워
0
투표 수
0
댓글