2019-03-26 05:38:57 +01:00
|
|
|
/**
|
|
|
|
* Creates a Close/Cancel button that is used for removing popups
|
|
|
|
*/
|
2018-12-24 14:02:10 +01:00
|
|
|
|
|
|
|
import { createElement } from "./createElement";
|
|
|
|
import { removeElement } from "./removeElement";
|
|
|
|
|
|
|
|
interface ICreatePopupCloseButtonOptions {
|
2021-09-05 01:09:30 +02:00
|
|
|
class?: string;
|
|
|
|
display?: string;
|
|
|
|
innerText?: string;
|
|
|
|
type?: string;
|
2018-12-24 14:02:10 +01:00
|
|
|
}
|
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
export function createPopupCloseButton(
|
|
|
|
popup: Element | string,
|
|
|
|
options: ICreatePopupCloseButtonOptions,
|
|
|
|
): HTMLButtonElement {
|
|
|
|
const button = createElement("button", {
|
|
|
|
class: options.class ? options.class : "popup-box-button",
|
|
|
|
display: options.display ? options.display : "inline-block",
|
|
|
|
innerText: options.innerText == null ? "Cancel" : options.innerText,
|
|
|
|
}) as HTMLButtonElement;
|
|
|
|
|
|
|
|
function closePopupWithEscFn(e: any): void {
|
|
|
|
if (e.keyCode === 27) {
|
|
|
|
button.click();
|
2018-12-24 14:02:10 +01:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
button.addEventListener("click", () => {
|
|
|
|
if (popup instanceof Element) {
|
|
|
|
removeElement(popup);
|
|
|
|
} else {
|
|
|
|
try {
|
|
|
|
const popupEl = document.getElementById(popup);
|
|
|
|
if (popupEl instanceof Element) {
|
|
|
|
removeElement(popupEl);
|
2021-05-01 09:17:31 +02:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
} catch (e) {
|
|
|
|
console.error(`createPopupCloseButton() threw: ${e}`);
|
|
|
|
}
|
|
|
|
}
|
2018-12-24 14:02:10 +01:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
document.removeEventListener("keydown", closePopupWithEscFn);
|
|
|
|
return false;
|
|
|
|
});
|
2018-12-24 14:02:10 +01:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
document.addEventListener("keydown", closePopupWithEscFn);
|
2018-12-24 14:02:10 +01:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return button;
|
2018-12-24 14:02:10 +01:00
|
|
|
}
|