Merge pull request #11 from jonaskuske/v1.0.0

V1.0.0 🎉
jonaskuske · Dec 8, 2018 · d2b0d90 · d2b0d90
2 parents 24262b2 + ddc1a69
commit d2b0d90
Show file tree

Hide file tree

Showing 9 changed files with 616 additions and 391 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,13 +4,23 @@ 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).
 
+## [1.0.0] - 2018-12-08
+### Added
+ - The methods 'destroy' and 'polyfill' are now exported (CommonJS) or exposed on window.SmoothscrollAnchorPolyfill. The polyfill still runs automatically on load so embedding it is enough, but now you can destroy it if you want (EventListeners are removed) and start it again, later.
+ - In addition to `window.__forceSmoothscrollAnchorPolyfill__`, you can now pass `{ force: true }` when invoking `polyfill()` to force-enable the package even in browsers with native support
+### Changed
+ - Updated the documentation website to reflect the new API
+ - Moved the documentation in a separate docs/ folder to clean up the repo
+ - Small fixes for formatting and typos in the README
+
 ## [1.0.0-beta] - 2018-12-05
 ### Changed
  - The README.md file has been updated to match the API of v1.0.0
- - Fixed 'window is not defined' error in Node environments, important for usage with SSR
  - BREAKING: Polyfill now only handles smooth scroll if scroll-behavior is set to 'smooth' via &lt;html style="">, documentElement.style.scrollBehavior or a custom font-family (more information will be added to the documentation)
 ### Added
  - Tests for smooth scrolling when clicking anchors have been implemented
+### Fixed
+ - Fixed 'window is not defined' error in Node environments, important for usage with SSR
 
 ## [0.12.0] - 2018-11-15
 ### Added
@@ -20,12 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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

diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/smoothscroll-anchor-polyfill"><img align="center" src="https://img.shields.io/npm/v/smoothscroll-anchor-polyfill.svg" alt="NPM version"></a>
-  <a href="https://travis-ci.org/jonaskuske/smoothscroll-anchor-polyfill"><img align="center" src="https://travis-ci.org/jonaskuske/smoothscroll-anchor-polyfill.svg?branch=dev" alt="Build status"></a>
+  <a href="https://travis-ci.org/jonaskuske/smoothscroll-anchor-polyfill"><img align="center" src="https://travis-ci.org/jonaskuske/smoothscroll-anchor-polyfill.svg?branch=master" alt="Build status"></a>
   <a href="./LICENSE"><img align="center" src="https://img.shields.io/npm/l/smoothscroll-anchor-polyfill.svg" alt="License"></a>
+  <a href="https://jonaskuske.github.io/smoothscroll-anchor-polyfill"><img align="center" src="https://img.shields.io/badge/documentation-up--to--date-blue.svg" alt="Documentation"></a>
 </p>  
 
 &nbsp;  
@@ -20,14 +21,14 @@
 | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE9+, Edge| native| native*| last 2 versions| last 2 versions| native*  
 
-> \* hashchange navigation triggered by forwards/backwards buttons isn't smooth despite native support. [Learn more](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#hashchange)
+> \* hashchange navigation triggered by forwards/backwards buttons isn't smooth despite native support. [Learn more](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#hashchange-blink)
 
 &nbsp;  
 
 ## Usage
 
 ### 1. Set `scroll-behavior: smooth` in CSS
-> Has to be set global (on `html`), [check the docs for limitations](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#limitations)  
+> Has to be set global (on `html`), [check the docs for limitations](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#global-only)  
 
 Because CSS properties unknown to a browser can't efficiently be parsed from JavaScript, using normal stylesheets is not enough unfortunately. To specify the property in a way the polyfill can read it, you have two options:
 #### 1a. Using inline styles
@@ -57,7 +58,7 @@ Alternatively, you can specify the property as the name of a custom font family.
 
 ### 2. Install the polyfill
 Because this polyfill only wires up anchor links to use the browser's native `window.scroll()` and `element.scrollIntoView()` methods, you'll need to load a polyfill providing smooth scroll to these methods in addition to the steps outlined below.
-> [smoothscroll-polyfill](http://iamdustan.com/smoothscroll/) works, but you can just as well use another one or write your own implementation. [Learn More](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#requirements)
+> [smoothscroll-polyfill](http://iamdustan.com/smoothscroll/) works, but you can just as well use another one or write your own implementation. [Learn More](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#usage)
 #### 2a. From a CDN
 ```html
 <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>
@@ -77,9 +78,7 @@ import 'smoothscroll-anchor-polyfill';
 
 ## Full Documentation & Demo
 
-> ⚠ The documentation is not up-to-date as of now, it will be updated  when this packages leaves the beta phase.
-
-The full documentation with advanced installation instructions, known limitations, features like enabling and disabling the smooth scroll and more can be found at
+The full documentation with advanced installation instructions, limitations, features like enabling and disabling the smooth scrolling and more can be found at
 [**jonaskuske.github.io/smoothscroll-anchor-polyfill**](https://jonaskuske.github.io/smoothscroll-anchor-polyfill).  
 The documentation site itself is built as a smooth scrolling one-page design, utilizing this polyfill.
 

diff --git a/favicon.ico → docs/favicon.ico b/favicon.ico → docs/favicon.ico
diff --git a/index.css → docs/index.css b/index.css → docs/index.css
@@ -1,9 +1,3 @@
-html {
-  scroll-behavior: smooth;
-  /* Additionally specified in custom font-family so polyfill can parse it */
-  font-family: 'scroll-behavior:smooth';
-}
-
 body {
   margin: 0;
   font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
@@ -63,7 +57,43 @@ header, section, .fullscreen {
 }
 
 section, .fullscreen {
-  padding-top: 11rem;
+  padding-top: 5rem;
+}
+
+.smooth-scroll {
+  scroll-behavior: smooth;
+  /* Additionally specified in custom font-family so polyfill can parse it */
+  font-family: 'scroll-behavior:smooth';
+}
+
+.fullscreen h1 {
+  margin-top: 13rem;
+}
+
+.scroll-btn {
+  margin-top: 7rem;
+}
+
+@media screen and (min-height: 660px) {
+  .fullscreen h1 {
+    margin-top: 18rem;
+  }
+  .scroll-btn {
+    margin-top: 12rem;
+  }
+}
+
+@media screen and (min-height: 900px) {
+  .fullscreen h1 {
+    margin-top: 30rem;
+  }
+  .scroll-btn {
+    margin-top: 24rem;
+  }
+}
+
+html:not(.smooth-scroll) .scroll-btn {
+  font-weight: lighter;
 }
 
 .max-width {
@@ -100,19 +130,19 @@ html:not(.flex-center) .fullscreen>div {
   margin-bottom: 0;
 }
 
-#start {
+section:nth-child(2) {
   background: #faf7fc;
 }
 
-#usage {
+section:nth-child(3) {
   background: #f6effa;
 }
 
-#docs {
+section:nth-child(4) {
   background: #f1e7f7;
 }
 
-#legal, footer>div {
+section:nth-child(5), footer>div {
   background: #eddff5;
 }
 
@@ -170,26 +200,59 @@ footer>div.row p {
   }
 }
 
-h1[id], h2[id], h3[id], h4[id], h1[data-to], h2[data-to], h3[data-to], h4[data-to] {
+h1[id] span, h2[id] span, h3[id] span, h4[id] span {
   position: relative;
   transition: padding 200ms ease-out;
   cursor: pointer;
 }
 
-h1[id]::before, h2[id]::before, h3[id]::before, h4[id]::before, h1[data-to]::before, h2[data-to]::before, h3[data-to]::before, h4[data-to]::before {
+h1[id] span::before, h2[id] span::before, h3[id] span::before, h4[id] span::before {
   content: "#";
   position: absolute;
   left: 0;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  bottom: 0%;
+  transform: translateX(-50%);
   opacity: 0;
   transition: opacity 0.3s ease-out;
 }
 
-h1[id]:hover, h2[id]:hover, h3[id]:hover, h4[id]:hover, h1[data-to]:hover, h2[data-to]:hover, h3[data-to]:hover, h4[data-to]:hover {
+h1[id] span:hover, h2[id] span:hover, h3[id] span:hover, h4[id] span:hover {
   padding-left: 2rem;
 }
 
-h1[id]:hover::before, h2[id]:hover::before, h3[id]:hover::before, h4[id]:hover::before, h1[data-to]:hover::before, h2[data-to]:hover::before, h3[data-to]:hover::before, h4[data-to]:hover::before {
+h1[id] span:hover::before, h2[id] span:hover::before, h3[id] span:hover::before, h4[id] span:hover::before {
   opacity: 0.5;
+}
+
+.allow-overflow {
+  overflow: auto;
+}
+
+/* Add invisible padding to top of targetable elements,
+so they're not hidden under the header when scrolled to top */
+
+[id] {
+  padding-top: 90px;
+  margin-top: -90px;
+}
+
+@media screen and (max-width: 785px) {
+  [id] {
+    padding-top: 110px;
+    margin-top: -110px;
+  }
+}
+
+@media screen and (max-width: 545px) {
+  [id] {
+    padding-top: 145px;
+    margin-top: -145px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  [id] {
+    padding-top: 175px;
+    margin-top: -175px;
+  }
 }