134 lines
3.7 KiB
JavaScript
134 lines
3.7 KiB
JavaScript
(function(window) {
|
|
window.ls.container.get("view").add({
|
|
selector: "data-ls-ui-open",
|
|
controller: function(element, window) {
|
|
let def = element.classList.contains("open") ? "open" : "close";
|
|
let buttonClass = element.dataset["buttonClass"] || "ls-ui-open";
|
|
let buttonText = element.dataset["buttonText"] || "";
|
|
let buttonIcon = element.dataset["buttonIcon"] || "";
|
|
let buttonAria = element.dataset["buttonAria"] || "Open";
|
|
let buttonSelector = element.dataset["buttonSelector"] || "";
|
|
let hover = element.hasAttribute("data-hover");
|
|
let blur = element.hasAttribute("data-blur");
|
|
let button = window.document.createElement("button");
|
|
|
|
let isTouch = function() {
|
|
return (
|
|
"ontouchstart" in window || navigator.maxTouchPoints // works on most browsers
|
|
); // works on IE10/11 and Surface
|
|
};
|
|
|
|
button.innerText = buttonText;
|
|
button.className = buttonClass;
|
|
// button.tabIndex = 1;
|
|
button.type = "button";
|
|
|
|
if (buttonIcon) {
|
|
let icon = window.document.createElement("i");
|
|
|
|
icon.className = buttonIcon;
|
|
|
|
button.insertBefore(icon, button.firstChild);
|
|
}
|
|
|
|
if(buttonAria) {
|
|
button.setAttribute('aria-label', buttonAria);
|
|
}
|
|
|
|
if (def === "close") {
|
|
element.classList.add("close");
|
|
element.classList.remove("open");
|
|
} else {
|
|
element.classList.add("open");
|
|
element.classList.remove("close");
|
|
}
|
|
|
|
button.addEventListener("click", function() {
|
|
element.classList.toggle("open");
|
|
element.classList.toggle("close");
|
|
});
|
|
|
|
if (hover && !isTouch()) {
|
|
element.addEventListener("mouseover", function() {
|
|
element.classList.add("open");
|
|
element.classList.remove("close");
|
|
});
|
|
|
|
element.addEventListener("mouseout", function() {
|
|
element.classList.add("close");
|
|
element.classList.remove("open");
|
|
});
|
|
}
|
|
|
|
let close = function() {
|
|
element.classList.add("close");
|
|
element.classList.remove("open");
|
|
};
|
|
|
|
let closeDelay = function() {
|
|
window.setTimeout(function() {
|
|
close();
|
|
}, 400);
|
|
};
|
|
|
|
let findParent = function(tagName, el) {
|
|
if (
|
|
(el.nodeName || el.tagName).toLowerCase() === tagName.toLowerCase()
|
|
) {
|
|
return el;
|
|
}
|
|
while ((el = el.parentNode)) {
|
|
if (
|
|
(el.nodeName || el.tagName).toLowerCase() === tagName.toLowerCase()
|
|
) {
|
|
return el;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
if (blur) {
|
|
button.addEventListener("blur", closeDelay);
|
|
}
|
|
|
|
if (buttonSelector) {
|
|
let buttonElements = element.querySelectorAll(buttonSelector);
|
|
|
|
buttonElements.forEach(node => {
|
|
node.addEventListener("click", function() {
|
|
element.classList.toggle("open");
|
|
element.classList.toggle("close");
|
|
});
|
|
|
|
if (blur) {
|
|
node.addEventListener("blur", closeDelay);
|
|
}
|
|
});
|
|
}
|
|
|
|
element.addEventListener('click', function(event) {
|
|
let targetA = findParent('a', event.target);
|
|
let targetB = findParent('button', event.target);
|
|
|
|
if (!targetA && !targetB) {
|
|
return false; // no target
|
|
}
|
|
|
|
if (targetA && !targetA.href) {
|
|
// Just a normal click not an href
|
|
return false;
|
|
}
|
|
|
|
if (targetB && !targetB.classList.contains('link')) {
|
|
// Just a normal click not an href
|
|
return false;
|
|
}
|
|
|
|
closeDelay();
|
|
});
|
|
|
|
element.insertBefore(button, element.firstChild);
|
|
}
|
|
});
|
|
})(window);
|