https://kauppa.telia.fi/yksityisille/js/tk1/dialog.js?2026092411

1const tkDialog = {
2
3	init: () => {
4		const uiLayers = document.querySelectorAll("div.uiLayer");
5		uiLayers.forEach(element => tkDialog.turnIntoDialog(element));
6
7		const uiLayerLinks = document.querySelectorAll("a.uiLayer:not(.uiLayerExternal)");
8		uiLayerLinks.forEach(link => tkDialog.addShowModalListener(link));
9
10		const uiLayerExternalLinks = document.querySelectorAll("a.uiLayerExternal");
11		uiLayerExternalLinks.forEach(link => tkDialog.addShowExternalModalListener(link));
12
13		const warnOnClickElements = document.querySelectorAll(".jsWarnOnClick");
14		warnOnClickElements.forEach(element => tkDialog.addWarnOnClick(element));
15	},
16
17	// Adds a click listener that opens the modal dialog
18	// with the id that matches the link href
19	addShowModalListener: (link) => {
20		link.addEventListener("click", (event) => {
21			event.preventDefault();
22			if (link.href.indexOf("#") != -1) {
23        const hash = link.href.substr(link.href.indexOf("#"));
24				document.querySelector(hash).showModal();
25			}
26		});
27	},
28
29	// Adds a click listener that opens a modal dialog
30	// with an iframe set to the link href
31	addShowExternalModalListener: (link) => {
32		link.addEventListener("click", (event) => {
33			event.preventDefault();
34				const dialog = tkDialog.generateEmptyDialog();
35				const content = dialog.querySelector(".dialog--content");
36				content.classList.add("dialog--content__external");
37				const iframe = document.createElement("iframe");
38				iframe.src = link.href;
39				content.append(iframe);
40				dialog.showModal();
41		});
42	},
43
44	// Adds a click listener that opens a modal dialog
45	// with the content of the element's data-warning
46	addWarnOnClick: (element) => {
47		const message = element.dataset.warning;
48		if (!message) { return; }
49		element.addEventListener("click", () => {
50			const dialog = tkDialog.generateWarningDialog(message);
51			document.querySelector("#frmMain").append(dialog);
52			dialog.showModal();
53		});
54	},
55
56	// Takes an element and turns it into a dialog
57	turnIntoDialog: (element) => {
58		const dialog = tkDialog.generateEmptyDialog();
59		dialog.id = element.id;
60		dialog.dataset.clickOnClose = element.dataset.clickOnClose;
61		dialog.querySelector(".dialog--content").innerHTML = element.innerHTML;
62
63		// If element is set to auto-open, open the dialog
64		if (element.classList.contains("auto-open")) {
65			dialog.showModal();
66		}
67
68		// Remove the original element
69		element.remove();
70	},
71
72	// Generates a dialog and adds it to the page
73	generateEmptyDialog: () => {
74		const dialog = document.createElement("dialog");
75		dialog.append(tkDialog.generateCloseButton(dialog));
76		const contentArea = document.createElement("div");
77		contentArea.classList.add("dialog--content");
78		dialog.append(contentArea);
79		document.querySelector("#frmMain").append(dialog);
80		dialog.addEventListener('click', (event) => {
81			// The dialog has a ::backdrop pseudo-element covering the page
82			// The ::backdrop accepts click events but isn't part of the DOM
83			// The bounding rect contains the dialog without the ::backdrop
84			// If the click was outside the bounding rect, close the dialog
85			const rect = dialog.getBoundingClientRect();
86			if (event.target === dialog &&
87				(event.clientX < rect.left || event.clientX > rect.right ||
88				event.clientY < rect.top || event.clientY > rect.bottom)) {
89				tkDialog.closeDialog(dialog);
90			}
91		});
92		return dialog;
93	},
94
95	// Generates a button that closes the given dialog
96	generateCloseButton: (dialog) => {
97		const button = document.createElement("button");
98		button.setAttribute('aria-label', 'Sulje');
99		button.type = "button";
100		button.classList.add("dialog--close");
101		button.addEventListener("click", (event) => {
102			tkDialog.closeDialog(dialog);
103		});
104		return button;
105	},
106
107	// Generates a dialog with a message and an Ok button
108	generateWarningDialog: (message) => {
109		const dialog = tkDialog.generateEmptyDialog();
110		
111		const pTag = document.createElement("p");
112		pTag.innerHTML = message;
113		dialog.querySelector(".dialog--content").append(pTag);
114		dialog.querySelector(".dialog--content").append(tkDialog.generateOkButton(dialog));
115
116		return dialog;
117	},
118
119	// Generates an Ok button that closes the given dialog
120	generateOkButton: (dialog) => {
121		const okButton = document.createElement("button");

122		okButton.type = "button";
123		okButton.innerHTML = "Ok";
124		okButton.classList.add("button");
125		okButton.classList.add("button--primary");
126		okButton.classList.add("button--small");
127		okButton.classList.add("button--no-margin");
128		okButton.addEventListener("click", () => {dialog.close()});
129		return okButton;
130	},
131
132	// Runs an optional click-on-close action,
133	// then closes the dialog
134	closeDialog: (dialog) => {
135		const clickOnClose = dialog.dataset.clickOnClose;
136		if (clickOnClose) {
137			const target = document.querySelector(clickOnClose);
138			if (target && typeof target.click === 'function') {
139				target.click();
140			}
141		}
142		dialog.close();
143	},
144}
145
146// Run init after content is loaded
147if (document.readyState !== 'loading') {
148  tkDialog.init();
149} else {
150  document.addEventListener('DOMContentLoaded', tkDialog.init);
151}