Merge pull request #5 from jonaskuske/dev

v0.12.0

CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.12.0] - 2018-11-15
+### Added
+- The special fragment `#top` is now supported for scrolling to the top, but only if no element with id `top` is found
+- After navigating to an anchor, the respective hash is now appended to the URL using `history.pushState()` to match default browser behavior.
+- When a hashchange event occurs, the polyfill tries to cancel the instant jumping scroll to the new hash, handling it with the smooth scroll instead.
+- When navigating to an anchor, the anchor is now focused.
+- In browsers supporting the optional `preventScroll` argument, the anchor is focused immediately and the focus scroll is prevented by passing this argument.
+- If the browser doesn't support `preventScroll` (e.g. Internet Explorer), the focus is scheduled to happen 450ms after the smooth scroll started so it does not interfere with the smooth scrolling (which caused flickering).
+
+
+### Changed
+- The flag to enforce the polyfill (even if the browser has native support) is now called (`window.__forceSmoothscrollAnchorPolyfill__`). The docs have been updated to reflect this. 
+
+
+### Fixed
+- The polyfill now properly handles Shift/Meta keys and allows for opening links in new windows by shift-clicking instead of preventing it with `event.preventDefault()`
+- The docs website now works in Internet Explorer 9, polyfills for `Element.classList`, `requestAnimationFrame` + an alternative for flexbox layouts have been added

index.css

@@ -70,13 +70,24 @@ section, .fullscreen {
 
 .fullscreen {
   height: 100vh;
+  text-align: center;
 }
 
 .fullscreen {
+  position: relative;
+}
+
+html:not(.flex-center) .fullscreen>div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.flex-center .fullscreen {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 
 .fullscreen p {

index.html

@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>smoothscroll-anchor-polyfill</title>
+    <script>
+      // Some Polyfills for Internet Explorer 9, needed for this page
+      // Super cheap requestAnimationFrame polyfill
+      'requestAnimationFrame' in window || (window.requestAnimationFrame = function (a) { setTimeout(a, 0) });
+      // Element.classList polyfill
+      ; (function () { function a(e) { this.element = e } var b = function (e) { return e.replace(/^\s+|\s+$/g, '') }, c = function (e) { return new RegExp('(^|\\s+)' + e + '(\\s+|$)') }, d = function (e, f, g) { for (var h = 0; h < e.length; h++)f.call(g, e[h]) }; a.prototype = { add: function add() { d(arguments, function (e) { this.contains(e) || (this.element.className = b(this.element.className + ' ' + e)) }, this) }, remove: function remove() { d(arguments, function (e) { this.element.className = b(this.element.className.replace(c(e), ' ')) }, this) }, toggle: function toggle(e) { return this.contains(e) ? (this.remove(e), !1) : (this.add(e), !0) }, contains: function contains(e) { return c(e).test(this.element.className) }, item: function item(e) { return this.element.className.split(/\s+/)[e] || null }, replace: function replace(e, f) { this.remove(e), this.add(f) } }, 'classList' in Element.prototype || Object.defineProperty(Element.prototype, 'classList', { get: function get() { return new a(this) } }), window.DOMTokenList && !DOMTokenList.prototype.replace && (DOMTokenList.prototype.replace = a.prototype.replace) })();
+    </script>
     <!-- Use some polyfill for the smoothscroll JavaScript API -->
     <script src="https://unpkg.com/smoothscroll-polyfill"></script>
     <!-- Use this polyfill to apply the JS smoothscroll to anchor links -->
@@ -16,26 +23,9 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/milligram.css">
     <link rel="stylesheet" href="./index.css">
 
-    <!-- Hide header after scroll (mobile only) -->
     <script>
-      document.addEventListener('DOMContentLoaded', function () {
-        var d = document, bd = d.body, bdClass = bd.classList;
-        var prevScrollPos = d.documentElement.scrollTop || bd.scrollTop;
-
-        d.addEventListener('scroll', function () {
-          var scrollPos = d.documentElement.scrollTop || bd.scrollTop;
-          var distance = scrollPos - prevScrollPos;
-
-          // Only react if user scrolled more than 25px
-          if (Math.abs(distance) < 25) return;
-
-          // Show or hide header depending on scroll direction
-          if (distance > 0) bdClass.add('hide-header');
-          else bdClass.remove('hide-header');
-
-          prevScrollPos = scrollPos;
-        }, false);
-      })
+      // Hide header after scroll (mobile only)
+      document.addEventListener('DOMContentLoaded', function () { var a = document, b = a.body, c = b.classList, e = a.documentElement.scrollTop || b.scrollTop; a.addEventListener('scroll', function () { var f = a.documentElement.scrollTop || b.scrollTop, g = f - e; 25 > Math.abs(g) || (0 < g ? c.add('hide-header') : c.remove('hide-header'), e = f) }, !1) });
     </script>
   </head>
 
@@ -48,7 +38,7 @@
           <li><a class="button" href="#docs">Docs</a></li>
           <li><a class="button" href="#legal">Legal</a></li>
           <li></li>
-          <li><a href="#">⬆ to Top</a></li>
+          <li><a href="#top">⬆ to Top</a></li>
         </ul>
       </nav>
     </header>
@@ -178,7 +168,7 @@ <h3 id="force-polyfill">Use the Polyfill even if there is native
           support</h3>
         <div class="row row-wrap">
           <div class="column column-40" style="flex-grow:1;max-width:100%;overflow:auto;">
-            <code>window.__forceSmoothScrollAnchorPolyfill__</code>:
+            <code>window.__forceSmoothscrollAnchorPolyfill__</code>:
           </div>
           <div class="column column-60" style="flex-grow:1;max-width:100%;">
             <p>If this is set to <code>true</code>, anchor navigation
@@ -203,25 +193,7 @@ <h3 id="ssr">Will this break Server Side Rendering?</h3>
         <p>No.</p>
       </section>
       <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
       <!-- Way too big legal section  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
       <section id="legal">
         <label class="label-inline" for="language">Show in German? (<b>Deutsch</b>)</label>
         <input type="checkbox" name="language" id="language">
@@ -330,27 +302,13 @@ <h3>Datenschutz</h3>
             Daten
             unmittelbar auf Ihre Person bezogen werden:</p>
           <ul>
-            <li>
-              Besuchte Website
-            </li>
-            <li>
-              Uhrzeit zum Zeitpunkt des Zugriffes
-            </li>
-            <li>
-              Menge der gesendeten Daten in Bytes
-            </li>
-            <li>
-              Quelle/Verweis, von welchem Sie auf diese Seite gelangten
-            </li>
-            <li>
-              Verwendeter Browser
-            </li>
-            <li>
-              Verwendetes Betriebssystem
-            </li>
-            <li>
-              Verwendete IP-Adresse
-            </li>
+            <li>Besuchte Website</li>
+            <li>Uhrzeit zum Zeitpunkt des Zugriffes</li>
+            <li>Menge der gesendeten Daten in Bytes</li>
+            <li>Quelle/Verweis, von welchem Sie auf diese Seite gelangten</li>
+            <li>Verwendeter Browser</li>
+            <li>Verwendetes Betriebssystem</li>
+            <li>Verwendete IP-Adresse</li>
           </ul>
           <p>Diese Seite verwendet den Dienst <a href="https://fonts.google.com"
               target="_blank" rel="noopener">Google Fonts</a>, um verschiedene
@@ -458,23 +416,11 @@ <h3>Privacy</h3>
       </div>
     </footer>
 
-    <!-- Update URL when clicking on title without triggering navigation -->
     <script>
-      Array.prototype.slice.call(document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h1[data-to],h2[data-to],h3[data-to],h4[data-to]'))
-        .forEach(function (element) {
-          element.addEventListener('click', function () {
-            var to = element.id || element.getAttribute('data-to');
-
-            if (to !== null && to !== undefined) {
-              var url = location.href;
-
-              if (url.indexOf('#') > 0) url = url.replace(/#.*$/, '#' + to);
-              else url = url + '#' + to;
-
-              history.replaceState(null, document.title, url);
-            }
-          })
-        });
+      // Update URL when clicking on title without triggering navigation
+      ; Array.prototype.slice.call(document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h1[data-to],h2[data-to],h3[data-to],h4[data-to]')).forEach(function (a) { a.addEventListener('click', function () { var b = a.id || a.getAttribute('data-to'); if (null !== b && b !== void 0) { var c = location.href; 0 < c.indexOf('#') ? c = c.replace(/#.*$/, '#' + b) : c += '#' + b, history.replaceState(null, document.title, c) } }) });
+      // Flexbox feature detect
+      ; (function (d) { ('alignItems' in d.documentElement.style) && (d.documentElement.className += " flex-center") })(document)
     </script>
   </body>