--- /dev/null
+/**
+ * dialog.css
+ */
+
+
+/* <dialog> for GnuPG key details
+ https://github.com/GoogleChrome/dialog-polyfill */
+dialog {
+ border: .1em solid #ff8000;
+ padding: 1em;
+ background: /*#2e3436*/ #444;
+ color: #eee;
+
+ position: fixed;
+ top: 50%;
+ transform: translate(0, -50%);
+
+ width: 18em;
+ max-width: 100%;
+
+ height: 12em;
+ max-height: 100%;
+
+ position: fixed;
+
+ z-index: 100;
+
+ left: 50%;
+ top: 50%;
+
+ /* Use this for centering if unknown width/height */
+ transform: translate(-50%, -50%);
+
+ /* If known, negative margins are probably better (less chance of blurry text). */
+ /* margin: -200px 0 0 -200px; */
+
+ box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
+}
+
+dialog h3 {
+ margin: 0 0 1.5em;
+}
+
+dialog button.close {
+ position: absolute;
+ top: .3em;
+ right: .3em;
+ font-size: 3em;
+ font-family: "Source Sans Pro", sans-serif;
+ font-weight: 300;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ color: #d3d7cf;
+ line-height: .75em;
+}
+
+dialog button.close:focus {
+ outline: 0;
+}
+
+dialog::backdrop { /* native */
+ background-color: rgba(0, 0, 0, 0.9);
+}
+dialog + .backdrop { /* polyfill */
+ background-color: rgba(0, 0, 0, 0.6);
+}
+
+
+
+/********************************************************************
+ * *
+ * fade-in effekt *
+ * *
+ ********************************************************************/
+
+@keyframes appear {
+ 0% {
+ display: none;
+ opacity: 0;
+ }
+ 1% {
+ display: block;
+ opacity: 0;
+ transform: scale(0);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+dialog {
+ /* Fade on */
+ visibility: visible;
+ opacity: 1
+ /*transition: opacity 0.5s linear;*/
+ animation: appear .5s ease-in-out;
+}
+
+dialog:not([open]) {
+ visibility: hidden;
+ opacity: 0;
+ transition: transform .3s ease-in-out, opacity .3s ease-in-out;
+}
+
+
+
+#settings_form div {
+ margin: 0 0 .6em;
+}
\ No newline at end of file
//"Title" => "Homepage @ ".$host,
"Title" => "Homepage",
"Author" => "malte70@".$host,
- "Stylesheet" => "css/style.css",
+ //"Stylesheet" => "css/style.css",
+ "Stylesheets" => Array("css/style.css", "css/dialog.css"),
//"Icon" => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
"Icon" => "img/favicon.png",
),
"Links" => NULL,
"Notepad" => true,
"WhoAmI" => "john_doe@pc",
- "JS" => true,
+ "JS" => Array(
+ //"js/greeting.js", //
+ "js/whoami.js", // WhoAmI greeting (headline)
+ "js/notepad.js", // local notes
+ //"js/settings.js",
+ "js/main.js" // onLoad logic
+ ),
"Search" => "Google", // Google/searX
"Footer" => Array(
"CopyrightYear" => date("Y"),
require_once("template.inc.php");
-?>
-"use strict";
-
var greeting = {
/**
* Configuration
-window.whoami = {
- init: function() {
- console.log("whoami.init()");
- if (!this.section) {
- this.section = document.getElementById("whoami")
- }
-
- this.whoami_user = localStorage.getItem("whoami_user");
- this.whoami_host = localStorage.getItem("whoami_host");
- this.whoami_format = localStorage.getItem("whoami_format");
-
- if (!this.whoami_user) {
- console.log("Asking for username");
- this.whoami_user = prompt("Your user name", "malte70");
- if (this.whoami_user === null)
- this.whoami_user = "malte70";
- }
- if (!this.whoami_host) {
- console.log("Asking for hostname");
- this.whoami_host = prompt("Hostname", "localhost");
- if (this.whoami_host === null)
- this.whoami_host = "pc";
- }
- if (!this.whoami_format) {
- console.log("Asking for format");
- this.whoami_format = prompt("Format (unix|windows)", "unix");
- if (this.whoami_format === null)
- this.whoami_format = "windows";
- }
-
- /*var urlParams = new URLSearchParams(window.location.search);
- if (!urlParams.has('user')) {
- this.whoami_user = null;
- } else {
- this.whoami_user = urlParams.get('user');
- this.whoami_host = "PLUTO";
- }*/
- },
- deinit: function() {
- localStorage.removeItem("whoami_user");
- localStorage.removeItem("whoami_host");
- localStorage.removeItem("whoami_format");
- },
- settings: function() {
- console.log("whoami.settings()");
- this.whoami_user = prompt("Your user name", localStorage.getItem("whoami_user"));
- this.whoami_host = prompt("Hostname", localStorage.getItem("whoami_host"));
- this.whoami_format = prompt("Format (unix|windows)", localStorage.getItem("whoami_format"));
-
- if (this.whoami_user === null)
- this.whoami_user = "malte70";
- if (this.whoami_host === null) {
- if (localStorage.getItem("whoami_host") !== null) {
- this.whoami_host = localStorage.getItem("whoami_host");
- } else {
- this.whoami_host = "pc";
- }
- }
- if (this.whoami_format === null)
- this.whoami_format = "windows";
-
- console.table(
- [
- ["whoami_user", this.whoami_user],
- ["whoami_host", this.whoami_host],
- ["whoami_format", this.whoami_format],
- ]
- );
-
- this.update();
- },
- update: function() {
- // Update localstorage
- localStorage.setItem("whoami_user", this.whoami_user);
- localStorage.setItem("whoami_host", this.whoami_host);
- localStorage.setItem("whoami_format", this.whoami_format);
-
- if (this.whoami_format.toLowerCase() == "windows") {
- if (this.whoami_user == "root" || this.whoami_user == "admin")
- this.whoami_user = "Administrator";
-
- if (this.whoami_host == this.whoami_host.toLowerCase() && this.whoami_host != "localhost")
- this.whoami_host = this.whoami_host.toUpperCase()
-
- // strip domain from fqdn
- this.whoami_host = this.whoami_host.substr(
- 0,
- this.whoami_host.indexOf(".")
- );
- user_login = '<span class="red">\\\\</span>'
- + this.whoami_host
- + '<span class="red">\\</span>'
- + this.whoami_user;
-
- } else {
- user_login = this.whoami_user
- + '<span class="red">@</span>'
- + this.whoami_host;
-
- }
-
- this.section.innerHTML = '<p>'+user_login+'</p>';
- },
-};
-window.notepad = function(selector, storageKey) {
- //console.log("window.notepad(\""+selector+"\", \""+storageKey+"\")")
+/**
+ * Main JavaScript logic
+ */
- elem = document.querySelector(selector);
- if (localStorage.getItem(storageKey) !== null) {
- console.log("window.notepad(): Loading from LocalStorage")
- elem.innerHTML = localStorage.getItem("notepad");
- }
- elem.addEventListener("focusout", function() {
- console.log("window.notepad(): Focus lost. Storing on LocalStorage");
- localStorage.setItem(storageKey, document.querySelector(selector).innerHTML);
- });
- //document.querySelector(selector).onclick = function() {
- // localStorage.setItem(storageKey, document.querySelector(selector).innerHTML);
- //};
-};
-window.onload = function() {
- window.whoami.init();
- window.whoami.update();
+// (() => {
+
+
+window.onload = () => {
+ whoami.init();
+ whoami.update();
+ //whoami.settings2();
document.querySelector(
"button#settings"
).onclick = function() {
- window.whoami.settings();
+ //window.whoami.settings();
//window.whoami.update();
+ whoami.settings2();
};
window.notepad("#notepadContent", "notepad");
* Hide footer
*/
//document.getElementsByTagName("footer")[0].remove()
+
+
+
};
+
+// })();
+"use strict";
+
window.onload = function() {
var _useragent = navigator.userAgent;
var _lang = navigator.language.replace("-", "_");
--- /dev/null
+/**
+ * Creates a notepad from an contenteditable element.
+ *
+ * Sets the element's content from localStorage, and writes
+ * updated content everytime a "focusout" event is raised back
+ * to localStorage.
+ *
+ * @param {string} selector string Selector for the <textarea>
+ * @param {string} storageKey string local Storage key
+ */
+window.notepad = function(selector, storageKey) {
+ //console.log("window.notepad(\""+selector+"\", \""+storageKey+"\")")
+
+ let elem = document.querySelector(selector);
+
+ if (localStorage.getItem(storageKey) !== null) {
+ console.debug("window.notepad(): Loading from LocalStorage")
+ elem.innerHTML = localStorage.getItem("notepad");
+
+ }
+
+ elem.addEventListener("focusout", function() {
+ console.debug("window.notepad(): Focus lost. Storing on LocalStorage");
+ localStorage.setItem(storageKey, document.querySelector(selector).innerHTML);
+
+ });
+};
--- /dev/null
+const settingsDialog = document.getElementById("settings_dialog");
+
+/**
+ * Configure dialog-polyfill
+ *
+ * @see https://github.com/GoogleChrome/dialog-polyfill
+ */
+console.info("Configuring dialog-polyfill");
+
+dialogPolyfill.registerDialog(settingsDialog);
+
+settingsDialog.addEventListener('click', function (event) {
+ // Close dialog if user clicks outside the dialog
+
+ var rect = settingsDialog.getBoundingClientRect();
+ var isInDialog = (
+ rect.top <= event.clientY
+ && event.clientY <= rect.top + rect.height
+ && rect.left <= event.clientX
+ && event.clientX <= rect.left + rect.width
+ );
+ if (!isInDialog) {
+ settingsDialog.close();
+ }
+});
+
+console.info("Showing settingsDialog");
+settingsDialog.showModal(); // Show dialog on page load for debugging
+
+console.debug('input[name="whoami_format"]:checked = ' + document.querySelector('input[name="whoami_format"]:checked').value);
--- /dev/null
+/**
+ * Who am I?
+ */
+
+//"_use strict";
+
+var whoami = {
+ section: null,
+ whoami_user: null,
+ whoami_host: null,
+ whoami_format: null,
+ settings_user: document.getElementById("whoami_user"),
+ settings_host: document.getElementById("whoami_host"),
+ settings_format_unix: document.getElementById("whoami_format_unix"),
+ settings_format_windows: document.getElementById("whoami_format_windows"),
+
+ init: function() {
+ console.debug("whoami.init()");
+ if (!this.section) {
+ this.section = document.getElementById("whoami")
+ }
+
+ this.whoami_user = localStorage.getItem("whoami_user");
+ this.whoami_host = localStorage.getItem("whoami_host");
+ this.whoami_format = localStorage.getItem("whoami_format");
+
+ if (!this.whoami_user) {
+ console.info("Asking for username");
+ this.whoami_user = prompt("Your user name", "malte70");
+ if (this.whoami_user === null)
+ this.whoami_user = "malte70";
+ }
+ if (!this.whoami_host) {
+ console.info("Asking for hostname");
+ this.whoami_host = prompt("Hostname (FQDN)", "<?=$hostname?>");
+ this.whoami_host_full = this.whoami_host;
+ if (this.whoami_host === null)
+ this.whoami_host = "pc";
+ }
+ if (!this.whoami_format) {
+ console.info("Asking for format");
+ this.whoami_format = prompt("Format (unix|windows)", "unix");
+ if (this.whoami_format === null)
+ this.whoami_format = "windows";
+ }
+
+ /*var urlParams = new URLSearchParams(window.location.search);
+ if (!urlParams.has('user')) {
+ this.whoami_user = null;
+ } else {
+ this.whoami_user = urlParams.get('user');
+ this.whoami_host = "PLUTO";
+ }*/
+ this.settings2Init();
+ },
+ deinit: function() {
+ localStorage.removeItem("whoami_user");
+ localStorage.removeItem("whoami_host");
+ localStorage.removeItem("whoami_format");
+ },
+ settings: function() {
+ console.debug("whoami.settings()");
+ this.whoami_user = prompt("Your user name", localStorage.getItem("whoami_user"));
+ this.whoami_host = prompt("Hostname", localStorage.getItem("whoami_host"));
+ this.whoami_format = prompt("Format (unix|windows)", localStorage.getItem("whoami_format"));
+
+ if (this.whoami_user === null)
+ this.whoami_user = "malte70";
+ if (this.whoami_host === null) {
+ if (localStorage.getItem("whoami_host") !== null) {
+ this.whoami_host = localStorage.getItem("whoami_host");
+ } else {
+ this.whoami_host = "pc";
+ }
+ }
+ if (this.whoami_format === null)
+ this.whoami_format = "windows";
+
+ this.update();
+ },
+ settings2Init: function() {
+ const settingsDialog = document.getElementById("settings_dialog");
+
+ dialogPolyfill.registerDialog(settingsDialog);
+
+ settingsDialog.addEventListener('click', (event) => {
+ // Close dialog if user clicks outside the dialog
+
+ var rect = settingsDialog.getBoundingClientRect();
+ var isInDialog = (
+ rect.top <= event.clientY
+ && event.clientY <= rect.top + rect.height
+ && rect.left <= event.clientX
+ && event.clientX <= rect.left + rect.width
+ );
+ if (!isInDialog) {
+ settingsDialog.close();
+ }
+ });
+
+ whoami.settings_user.addEventListener('change', (event) => {
+ // User name change
+
+ console.debug(`#settings_whoami_user :: on change event (value="${event.target.value}")`);
+ whoami.whoami_user = event.target.value;
+ localStorage.setItem("whoami_user", event.target.value);
+ //whoami.update();
+ });
+ whoami.settings_host.addEventListener('change', (event) => {
+ // host name change
+
+ console.debug(`#settings_whoami_host :: on change event (value="${event.target.value}")`);
+ whoami.whoami_host = event.target.value;
+ //localStorage.setItem("whoami_host", event.target.value);
+ whoami.update();
+ });
+ let whoami_format_on_change = (event) => {
+ let new_format = document.querySelector('input[name="whoami_format"]:checked').value;
+ console.debug(`#settings_whoami_format :: on change event (value="${new_format}")`);
+ whoami.whoami_format = new_format;
+ whoami.whoami_host = localStorage.getItem("whoami_host");
+ whoami.update();
+ }
+ whoami.settings_format_unix.addEventListener('change', (event) => {
+ whoami_format_on_change(event);
+ //whoami.whoami_format = event.target.value;
+ });
+ whoami.settings_format_windows.addEventListener('change', whoami_format_on_change);
+
+ },
+ settings2: () => {
+ const settings_dialog = document.getElementById("settings_dialog");
+
+ // Set form values from current configuration
+ whoami.settings_user.value = localStorage.getItem("whoami_user");
+ whoami.settings_host.value = localStorage.getItem("whoami_host");
+ whoami.settings_format_unix.checked = localStorage.getItem("whoami_format") == "unix";
+ whoami.settings_format_windows.checked = localStorage.getItem("whoami_format") == "windows";
+
+ // Show dialog
+ console.info("Showing settingsDialog");
+ settings_dialog.showModal();
+ },
+ update: function() {
+ // Update localstorage
+ localStorage.setItem("whoami_user", this.whoami_user);
+ localStorage.setItem("whoami_host", this.whoami_host);
+ localStorage.setItem("whoami_format", this.whoami_format);
+
+ console.debug(`whoami.update() :: this.whoami_user = ${this.whoami_user}`);
+ console.debug(`whoami.update() :: this.whoami_user = ${this.whoami_host}`);
+ console.debug(`whoami.update() :: this.whoami_user = ${this.whoami_format}`);
+
+ let user_login = "";
+
+ if (this.whoami_format.toLowerCase() == "windows") {
+ if (this.whoami_user == "root" || this.whoami_user == "admin")
+ this.whoami_user = "Administrator";
+
+ if (this.whoami_host == this.whoami_host.toLowerCase() && this.whoami_host != "localhost")
+ this.whoami_host = this.whoami_host.toUpperCase()
+
+ // strip domain from fqdn
+ this.whoami_host = this.whoami_host.substr(
+ 0,
+ this.whoami_host.indexOf(".")
+ );
+ user_login = '<span class="red">\\\\</span>'
+ + this.whoami_host
+ + '<span class="red">\\</span>'
+ + this.whoami_user;
+
+ } else {
+ user_login = this.whoami_user
+ + '<span class="red">@</span>'
+ + this.whoami_host;
+
+ }
+
+ this.section.innerHTML = '<p>'+user_login+'</p>';
+ },
+};
<?php
+/**
+ * Template for startseite.malte70.de
+ *
+ * Used by index.php and tty/index.php.
+ */
/**
* Correct Content-Type header for HTML5 including
<title><?=$Data["Meta"]["Title"]?></title>
<meta name="author" content="<?=$Data["Meta"]["Author"]?>">
- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap">
- <link rel="stylesheet" type="text/css" href="<?=$Data["Meta"]["Stylesheet"]?>">
+ <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.css">
+<?php foreach ($Data["Meta"]["Stylesheets"] as $css): ?>
+ <link rel="stylesheet" type="text/css" href="<?=$css?>">
+<?php endforeach; ?>
<link rel="icon" type="image/png" href="<?=$Data["Meta"]["Icon"]?>" sizes="64x64">
<!--[if IE]><script>document.charset="<?=$Data["Meta"]["Charset"]?>";</script><![endif]-->
</head>
<body id="top">
+<?php if ($Data["JS"]): ?>
+ <dialog id="settings_dialog">
+ <form method="dialog">
+ <button type="submit" class="close">×</button>
+ </form>
+
+ <h3>Settings</h3>
+ <form id="settings_form">
+ <div>
+ <label for="whoami_user">Username</label>
+ <input type="text" id="whoami_user">
+ </div>
+
+ <div>
+ <label for="whoami_host">Hostname</label>
+ <input type="text" id="whoami_host">
+ </div>
+
+ <div>
+ <input type="radio" id="whoami_format_unix" name="whoami_format" value="unix" checked>
+ <label for="whoami_format_unix">Unix-Format</label>
+ </div>
+
+ <div>
+ <input type="radio" id="whoami_format_windows" name="whoami_format" value="windows">
+ <label for="whoami_format_windows">Windows-Format</label>
+ </div>
+ </form>
+ </dialog>
+
+<?php endif; ?>
<main>
<?php if (!$Data["JS"]): ?>
<p> </p>
</section>
<?php endif; ?>
</main>
-<?php if ($Data["JS"]): ?>
+<?php if (is_array($Data["JS"])): ?>
<footer>
+<?php /*
+ <p>
+ <!--<a id="settings_dialog_show" href="javascript:settingsDialog.showModal();">Settings</a>-->
+ <a id="settings_dialog_show" href="javascript:whoami.settings2();">Settings v2</a>
<p>
+*/ ?>
+ <p>
<button type="button" id="settings">Settings…</button>
</p>
<p>
© <?=$Data["Footer"]["CopyrightYear"]?> <a href="<?=$Data["Footer"]["AuthorURL"]?>" rel="me nofollow"><?=$Data["Footer"]["AuthorName"]?></a>
- · <a href="https://ftp.malte70.de/pub/malte70-startseite.tar.gz" download>Download (.tar.gz)</a>
+ · <a href="https://gitea.rt3x.de/rolltreppe3/startseite.malte70.de/archive/main.tar.gz" download>Download Git main (.tar.gz)</a>
</p>
</footer>
- <!--<script src="js/main.js"></script>-->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js" integrity="sha512-qUIG93zKzcLBVD5RGRbx2PBmbVRu+tJIl+EPLTus0z8I1AMru9sQYdlf6cBacSzYmZVncB9rcc8rYBnazqgrxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
- <?php
- require("js/main.js");
- ?>
+ //"use_ strict";
+<?php
+/**
+ * Include JavaScript files using PHP for faster page loading
+ */
+$hostname = "localhost.localdomain";
+if ($_SERVER["HTTP_HOST"] == "localhost")
+ $hostname = gethostname();
+
+foreach ($Data["JS"] as $js) {
+ require($js);
+}
+
+?>
</script>
<?php endif; ?>
</body>
<?php
/**
- * startseite.malte70.de/index.php
+ * startseite.malte70.de/tty/index.php
*/
require_once("../config.inc.php");
//"Title" => "Homepage @ ".$host,
"Title" => "Homepage",
"Author" => "malte70@".$host,
- "Stylesheet" => "../style.css",
+ "Stylesheets" => Array("../css/style.css"),
//"Icon" => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
"Icon" => "../favicon.png",
),
projects / startseite.malte70.de.git / commitdiff