✨ Release v1.2.1

Author: Anthony Du Pont

README.md

@@ -248,33 +248,38 @@ Check out the [**examples**](https://github.com/Dogstudio/highway#examples) for
 
 Last but not least, **Highway** extends [**tiny-emitter**](https://github.com/scottcorgan/tiny-emitter) to send events along the navigation process you can listen to in order to extend its capabilities. There are three events available for you:
 
+- `NAVIGATE_CALL`: Trigger right after a link or an history button of the browser is clicked.
 - `NAVIGATE_START`: Trigger when a navigation starts.
 - `NAVIGATE_END`: Trigger when a navigation ends.
 - `NAVIGATE_IN`: Trigger when the `in` transition starts.
 - `NAVIGATE_OUT`: Trigger when the `out` transition starts.
 - `NAVIGATE_ERROR`: Trigger when an error occurs in navigation process.
 
-All events except `NAVIGATE_ERROR` give you access to some parameters in this order:
+All events except `NAVIGATE_CALL` and `NAVIGATE_ERROR` give you access to some parameters in this order:
 
 - `from`: The renderer of the page you come from.
 - `to`: The renderer of the page you go to.
 - `state`: The state of **Highway** that contains all the informations about the URL of the page you go to.
 
 ```javascript
 // [...]
+H.on('NAVIGATE_CALL', () => {
+  // [...]
+});
+
 H.on('NAVIGATE_START', (from, to, state) => {
   // [...]
 });
 
-H.on('NAVIGATE_END', (from, to, state) => {
+H.on('NAVIGATE_OUT', (from, to, state) => {
   // [...]
 });
 
 H.on('NAVIGATE_IN', (from, to, state) => {
   // [...]
 });
 
-H.on('NAVIGATE_OUT', (from, to, state) => {
+H.on('NAVIGATE_END', (from, to, state) => {
   // [...]
 });
 
@@ -324,6 +329,12 @@ const H = new Highway.Core({
 - [ ] More Examples
 
 ## History
+#### 1.2.1 (2018-03-24)
+
+- Add `NAVIGATE_CALL` event
+- Improve renderers that now update the `html` and `body` classname properly
+- Improve documentation
+
 #### 1.2.0 (2018-03-23)
 
 - Add `NAVIGATE_IN` and `NAVIGATE_OUT` events

dist/highway.js

@@ -90,7 +90,6 @@ return /******/ (function(modules) { // webpackBootstrap
  * @file Highway helper methods used all acrosse the script.
  * @author Anthony Du Pont <[email protected]>
  */
-var TITLE_REGEX = /<title>(.+)<\/title>/;
 var PARAM_REGEX = /\?([\w_\-.=&]+)/;
 var ANCHOR_REGEX = /(#.*)$/;
 var ORIGIN_REGEX = /(https?:\/\/[\w\-.]+)/;
@@ -193,16 +192,12 @@ function getInfos(url) {
  * @return {string} Page DOM
  */
 function getDOM(page) {
-  // We create a fake DOM element that will contain our page HTML and let us
-  // select DOM nodes properly. This element is only used in Javascript.
-  var FRAGMENT = document.createElement('div');
-
-  // This is the trick to transform our page HTML from string to DOM element by
-  // using our fake container we created before and by updating its inner HTML.
-  FRAGMENT.innerHTML = page;
+  // We create instance of the DOM parser in order to parse our string and 
+  // return the DOM properly.
+  var parser = new DOMParser();
 
   // Now we can return the DOM.
-  return FRAGMENT;
+  return parser.parseFromString(page, 'text/html');
 }
 
 /**
@@ -225,17 +220,6 @@ function getSlug(page) {
   return getView(page).getAttribute('router-view');
 }
 
-/**
- * Get page's title from page HTML
- * 
- * @arg    {string} page — Page HTML
- * @return {string} Page title
- */
-function getTitle(page) {
-  var match = page.match(TITLE_REGEX);
-  return match ? match[1] : '';
-}
-
 /**
  * Get page renderer
  *
@@ -293,7 +277,6 @@ module.exports = {
   getSlug: getSlug,
   getView: getView,
   getInfos: getInfos,
-  getTitle: getTitle,
   getParam: getParam,
   getParams: getParams,
   getOrigin: getOrigin,
@@ -341,12 +324,13 @@ var HighwayRenderer = function () {
     // the page informations. In our case the content and title of the document.
     this.view = view;
     this.page = _helpers2.default.getDOM(page);
-    this.title = _helpers2.default.getTitle(page);
+    this.title = this.page.title;
     this.transition = transition ? new transition(view) : null; // eslint-disable-line
 
-    if (this.title && document.title !== this.title) {
-      document.title = this.title;
-    }
+    // We are getting the `html` and `body` tags class attribute value to make
+    // sure we always have the correct classnames in our DOM.
+    this.bodyClass = this.page.body.className;
+    this.HTMLClass = this.page.documentElement.className;
 
     // The [router-wrapper] is the main container of the router and the ancestor of our 
     // [router-view] that let us now where to remove of append our view in the DOM.
@@ -370,6 +354,22 @@ var HighwayRenderer = function () {
       return new Promise(function (resolve) {
         _this.wrapper = document.querySelector('[router-wrapper]');
 
+        // Now we update all the informations in the DOM we need!
+        // We update the class attribute on the `html` tag
+        if (_this.HTMLClass && _this.HTMLClass !== document.documentElement.className) {
+          document.documentElement.className = _this.HTMLClass;
+        }
+
+        // We update the class attribute on the `body` tag
+        if (_this.bodyClass && _this.bodyClass !== document.body.className) {
+          document.body.className = _this.bodyClass;
+        }
+
+        // We update the document title
+        if (_this.title && document.title !== _this.title) {
+          document.title = _this.title;
+        }
+
         // Before doing anything crazy you need to know your view doesn't exists
         // in the [router-wrapper] so it is appended to it right now!
         _this.wrapper.appendChild(_this.view);
@@ -795,6 +795,10 @@ var HighwayCore = function (_Emitter) {
     value: function beforeFetch(url, history) {
       var _this3 = this;
 
+      // We trigger an event when a link is clicked to let you know do whatever
+      // you want at this point of the process.
+      this.emit('NAVIGATE_CALL');
+
       // Use of a boolean to avoid repetitive fetch calls by super excited users
       // that could lead to some serious issues.
       this.navigating = true;

dist/highway.min.js

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",

dist/highway.min.js.gz

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",

examples/basic-css-transition/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",

examples/basic-google-analytics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",

examples/basic-menu-active/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",