Beispiel:JS-anfangsbeispiel-mit-dialog-elementen.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Nichtlinearer Programmablauf</title>
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<style>
/* Darstellungen für die Dialog-Box */
dialog {
background: white;
border: 1px solid grey;
border-radius: 0 .5em .5em;
box-shadow: 0 0 15px 5px #888;
display: none;
height: auto;
padding: .5em 1em;
position: relative;
width: 100%;
z-index:1002;
}
dialog[open] {
display: block;
}
@media (min-width: 30em) {
dialog {
position: absolute;
top: 50%;
margin-top: -10em;
left: 50%;
margin-left: -10em;
width: 20em;
}
}
/* Ebene zwischen Hintergrund und Dialog-Box, Pseudoelement noch nicht implementiert */
dialog::backdrop, #backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.8);
}
dialog .button-row {
text-align: center;
}
dialog .close {
position: absolute;
right: 3px;
top: 1px;
height: 2em;
cursor: pointer;
background-color: red;
color: white;
font-weight: bold;
font-size: 1.5em;
border-radius: 0 .5em .5em;
}
dialog [name="ok"] {
background: #0b0;
border-radius: 0 .5em .5em;
color: white;
font-weight: bold;
font-size: 1.5em;
}
dialog [name="cancel"] {
background: #f00;
border-radius: 0 .5em .5em;
color: white;
font-weight: bold;
font-size: 1.5em;
}
/* Darstellungen für die Demo-Seite */
.js #js-notice,
:not(.js) > section {
display: none;
}
output {
border: 2px solid #888;
border-radius: 0.5em;
font-weight: bold;
margin-left: 0.5em;
padding: 0.2em 1em;
}
output.false {
border-color: red;
}
output.ok {
border-color: #0b0;
}
</style>
<script>
'use strict';
document.addEventListener("DOMContentLoaded", function () {
// Polyfill für Browser, die das dialog-Element nicht komplett unterstützen
(function () {
var backdrop;
Array.prototype.slice.call(
document.querySelectorAll("dialog")
).forEach(function (dialog) {
var callBacks = {
cancel: function () {},
ok: function () {}
},
close = dialog.querySelector(".close");
if (!dialog.close) {
dialog.close = function () {
if (dialog.hasAttribute("open")) {
dialog.removeAttribute("open");
}
if (backdrop && backdrop.parentNode) {
backdrop.parentNode.removeChild(backdrop);
}
}
}
if (!dialog.show) {
dialog.show = function () {
var closeButton = dialog.querySelector(".close");
dialog.setAttribute("open", "open");
// after displaying the dialog, focus the closeButton inside it
if (closeButton) {
closeButton.focus();
}
if (!backdrop) {
backdrop = document.createElement("div");
backdrop.id = "backdrop";
}
document.body.appendChild(backdrop);
}
}
dialog.setCallback = function (key, f) {
callBacks[key] = f;
};
dialog.triggerCallback = function (key) {
if (typeof callBacks[key] == "function") {
callBacks[key]();
}
};
if (close) {
close.addEventListener("click", function () {
dialog.close();
dialog.triggerCallback("cancel");
});
}
// handle buttons for user input
["cancel", "ok"].forEach(function (n) {
var button = dialog.querySelector('[name="'+n+'"]');
if (button) {
button.addEventListener("click", function () {
dialog.close();
dialog.triggerCallback(n);
});
}
});
});
// ESC and ENTER closes open dialog and triggers corresponding callback
document.addEventListener(
"keydown",
function (event) {
Array.prototype.slice.call(
document.querySelectorAll("dialog")
).forEach(function(dialog) {
if (dialog.hasAttribute("open")) {
// ENTER
if (event.keyCode == 13) {
dialog.close();
setTimeout(function () {
dialog.triggerCallback("ok");
}, 50);
}
// ESC
if (event.keyCode == 27) {
dialog.close();
setTimeout(function () {
dialog.triggerCallback("cancel");
}, 50);
}
}
});
},
true
);
}());
// Darstellung mit "JavaScript vorhanden" aktivieren
document.querySelector("body main").className = "js";
// die Ersatz-Methoden
window.myAlert = function (text, OK, cancel) {
var dialog = document.querySelector("#alert"),
textElement = document.querySelector("#alert [data-text]");
if (dialog && textElement) {
textElement.innerText = (text && text.length ? text : "");
dialog.setCallback("cancel", cancel);
dialog.setCallback("ok", OK);
dialog.show();
}
}
window.myConfirm = function (text, OK, cancel) {
var dialog = document.querySelector("#confirm"),
textElement = document.querySelector("#confirm [data-text]");
if (dialog && textElement) {
textElement.innerText = (text && text.length ? text : "");
dialog.setCallback("cancel", cancel);
dialog.setCallback("ok", OK);
dialog.show();
}
}
window.myPrompt = function (text, OK, cancel, defaultValue) {
var dialog = document.querySelector("#prompt"),
inputElement = document.querySelector('#prompt [name="data"]'),
textElement = document.querySelector("#prompt [data-text]");
if (dialog && textElement) {
inputElement.value = (defaultValue && defaultValue.length ? defaultValue : "");
textElement.innerText = (text && text.length ? text : "");
dialog.setCallback("cancel", cancel);
dialog.setCallback("ok", function () {
OK(inputElement.value);
});
dialog.show();
}
}
// die nicht-lineare Programm-Logik
function start () {
// alter erfragen
window.myPrompt(
"Wie alt sind Sie?",
// Funktion für OK-Button
weiter,
// Funktion für Abbrechen-Button oder Schließen-Button
weiter
);
}
function weiter (alter) {
if (alter < 18) {
window.myConfirm(
"Du bist also noch nicht erwachsen?",
// Funktion für OK-Button
function () {
ende(alter, true);
},
// Funktion für Abbrechen-Button oder Schließen-Button
function () {
ende(alter);
}
);
} else {
ende(alter, false);
}
}
function ende (alter, minderjaehrig) {
window.myAlert(
"Alter: " + alter + " ("
+ (minderjaehrig ? "" : "aber nicht ")
+ "minderjährig)"
);
}
// Programm starten
start();
});
</script>
</head>
<body>
<h1>Anfangsbeispiel mit dialog-Elementen</h1>
<main>
<p>Dieses Beispiel verwendet die Programmlogik des <a href="/wiki/JavaScript/Tutorials/Eigene_modale_Dialogfenster#Nichtlinearer_Programmverlauf">nichtlinearen Programmverlaufs</a> aus einem <a href="/extensions/Selfhtml/example.php/Beispiel:JS-nichtlinearer-programmablauf.html">früheren Beispiel</a> des <a href="/wiki/JavaScript/Tutorials/Eigene_modale_Dialogfenster">Tutorials zu eigenen modalen Dialogfenstern</a>.</p>
</main>
<dialog id="alert" role="dialog" aria-labelledby="alert-dialog-heading">
<button class="close">Schließen</button>
<h2 id="alert-dialog-heading">Hinweis</h2>
<p data-text></p>
<p class="button-row">
<button name="ok">OK</button>
</p>
</dialog>
<dialog id="confirm" role="dialog" aria-labelledby="confirm-dialog-heading">
<button class="close">Schließen</button>
<h2 id="confirm-dialog-heading">Frage</h2>
<p data-text></p>
<p class="button-row">
<button name="ok">OK</button>
<button name="cancel">Abbrechen</button>
</p>
</dialog>
<dialog id="prompt" role="dialog" aria-labelledby="prompt-dialog-heading">
<button class="close">Schließen</button>
<h2 id="prompt-dialog-heading">Eingabe</h2>
<p>
<label data-text for="prompt-data"></label>
<input id="prompt-data" name="data">
</p>
<p class="button-row">
<button name="ok">OK</button>
<button name="cancel">Abbrechen</button>
</p>
</dialog>
</body>
</html>
