[TASK] Build

dist/index.html

@@ -20,10 +20,12 @@
     <div class="navbar-fixed">
         <nav class="light-green lighten-1">
             <div class="nav-wrapper container">
-                <a href="/" id="logo-container" class="brand-logo left" title="Gehe zur Startseite">
+                <a href="/" id="logo-container" class="brand-logo" title="Gehe zur Startseite">
                     <img src="favicon.png" alt="Visitenkarten-Logo" loading="eager">
                 </a>
-                <ul class="right hide-on-small-and-down">
+                <a href="#" data-target="sidenav" class="sidenav-trigger hide-on-large-and-up"><i
+                        class="material-icons">menu</i></a>
+                <ul class="right hide-on-med-and-down">
                     <li><a href="#willkommen" title="Gehe zu Abschnitt 'Willkommen'">Willkommen</a></li>
                     <li><a href="#wohnung" title="Gehe zu Abschnitt 'Ferienwohnung'">Ferienwohnung</a></li>
                     <li><a href="#buchung" title="Gehe zu Abschnitt 'Buchung und Anreise'">Buchung und Anreise</a></li>
@@ -31,6 +33,11 @@
             </div>
         </nav>
     </div>
+    <ul id="sidenav" class="sidenav">
+        <li><a href="#willkommen" title="Gehe zu Abschnitt 'Willkommen'">Willkommen</a></li>
+        <li><a href="#wohnung" title="Gehe zu Abschnitt 'Ferienwohnung'">Ferienwohnung</a></li>
+        <li><a href="#buchung" title="Gehe zu Abschnitt 'Buchung und Anreise'">Buchung und Anreise</a></li>
+    </ul>
     <div id="willkommen-banner" class="parallax-container valign-wrapper">
         <div class="container">
             <div class="card-panel">
@@ -299,26 +306,31 @@
     <footer class="page-footer white black-text">
         <div class="container">
             <div class="row">
-                <div class="col s12 m4">
+                <div class="col s12 m6 center-align">
-                    <a href="impressum.pdf" title="Link zum Impressum">Impressum</a>
-                </div>
-                <div class="col s12 m4 center-align">
-                    <a href="datenschutz.pdf" title="Link zum Datenschutz">Datenschutz</a>
-                </div>
-                <div class="col s12 m4 right-align">
                     <a href="https://www.google.com/travel/guide?q=urlaub+in+friedrichroda&dest_mid=/m/0b6h53&tcfs=EiUKCS9tLzBiNmg1MxoYCgoyMDIwLTA0LTI2EgoyMDIwLTA0LTMw"
                         target="_blank" title="Externer Link zum Google-Reiseführer für Friedrichroda">
                         Reiseführer Friedrichroda</a>
                 </div>
+                <div class="col s12 m6 center-align">
+                    <div class="row">
+                        <a class="col" href="Impressum.pdf" title="Link zum Impressum">Impressum</a>
+                        <div class="col">&bull;</div>
+                        <a class="col" href="Datenschutzerklaerung.pdf"
+                            title="Link zur Datenschutzerklärung">Datenschutz</a>
+                        <div class="col">&bull;</div>
+                        <a class="col" href="Allgemeine_Geschaeftsbedingungen.pdf"
+                            title="Link zu den allgemeinen Geschäfsbedingungen">AGB</a>
+                    </div>
+                </div>
 
             </div>
-            <div class="row">
+            <div class="row hide">
-                <div class="col s4">
+                <div class="col s12 m4 ">
                     made by <a href="https://chrosey.de" title="Externer Link zu chrosey.de">chrosey</a> with <a
                         href="https://materializecss.com" title="externer Link zu Materialize.css">Materialize</a>
                 </div>
-                <div class="col s4"></div>
+                <div class="col s4 hide-on-small-and-down"></div>
-                <div class="col s4 right-align">
+                <div class="col s12 m4 right-align">
                     Urlaub-Friedrichroda.de
                 </div>
             </div>

dist/script.js

@@ -9,32 +9,87 @@ document.addEventListener('DOMContentLoaded', function () {
         interval: 5000
     });
 
-    var mailcypts = document.querySelectorAll(".cryptmail");
+    var elems = document.querySelectorAll('.sidenav');
-    mailcypts.forEach(element => {
+    var sidenav = M.Sidenav.init(elems, {});
-        element.onclick = function () {
-            window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld;
 
+    var mailcypts = document.querySelectorAll(".cryptmail");
+    for (var i = 0; i < mailcypts.length; i++) {
+        mailcypts[i].onclick = function () {
+            window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld;
             return false;
         }
-    });
+    }
 
     var hashAnchors = document.querySelectorAll("a[href^='#']");
-    hashAnchors.forEach(element => {
+    for (var i = 0; i < hashAnchors.length; i++) {
-        element.onclick = function () {
+        if (hashAnchors[i].getAttribute("href") != "#") {
-            var target = this.getAttribute("href");
+            hashAnchors[i].onclick = function () {
-            scrollToElement(target);
+                var target = this.getAttribute("href");
-
+                scrollToElement(target);
-            return false;
+                return false;
+            }
         }
-    });
+
+    }
 });
 
-function scrollToElement(name) {
+const navbarScrollOffset = -48;
-    var elementToScrollTo = document.querySelector(name);
+// native smooth scrolling for Chrome, Firefox & Opera
-    var top = elementToScrollTo.getBoundingClientRect().top + window.pageYOffset - 48;
+// @see: https://caniuse.com/#feat=css-scroll-behavior
+const nativeSmoothScrollTo = function (elem) {
+    window.scroll({
+        behavior: 'smooth',
+        left: 0,
+        top: elem.getBoundingClientRect().top + window.pageYOffset + navbarScrollOffset
+    });
+};
 
-    window.scrollTo({
+// polyfilled smooth scrolling for IE, Edge & Safari
-        top: top,
+const smoothScrollTo = function (to, duration) {
-        behavior: "smooth"
+    const element = document.scrollingElement || document.documentElement,
-    })
+        start = element.scrollTop,
-}
+        change = to - start,
+        startDate = +new Date();
+
+    // t = current time
+    // b = start value
+    // c = change in value
+    // d = duration
+    const easeInOutQuad = function (t, b, c, d) {
+        t /= d / 2;
+        if (t < 1) return c / 2 * t * t + b;
+        t--;
+        return -c / 2 * (t * (t - 2) - 1) + b;
+    };
+
+    const animateScroll = function () {
+        const currentDate = +new Date();
+        const currentTime = currentDate - startDate;
+        element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
+        if (currentTime < duration) {
+            requestAnimationFrame(animateScroll);
+        } else {
+            element.scrollTop = to;
+        }
+    };
+    animateScroll();
+};
+
+// detect support for the behavior property in ScrollOptions
+const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
+
+// smooth scrolling stub
+const scrollToElement = function (elemSelector) {
+    if (!elemSelector) {
+        return;
+    }
+
+    const elem = document.querySelector(elemSelector);
+    if (elem) {
+        if (supportsNativeSmoothScroll) {
+            nativeSmoothScrollTo(elem);
+        } else {
+            smoothScrollTo(elem.offsetTop + navbarScrollOffset, 600);
+        }
+    }
+};