✨ Release v1.1.0

Author: Anthony Du Pont

README.md

@@ -253,6 +253,29 @@ H.on('NAVIGATE_ERROR', () => {
 
 Check out the [**Basic Menu Active**](https://github.com/Dogstudio/highway/tree/master/examples/basic-menu-active) example for more details about events handling in **Highway**.
 
+## Modes
+
+**Highway** gives you the opportunity to choose between three transitions modes. These modes are available to let you run your transitions the way you need to create beautiful and creative navigations.
+
+- `out-in`: Will run the `out` transition **then** the `in` transition (*default*).
+- `in-out`: Will run the `in` transition **then** the `out` transition.
+- `both`: Will run the `in` and `out` transition at **the same time**.
+
+In order to tell **Highway** which mode you want to use, just tell it in its options.
+
+```javascript
+// [...]
+const H = new Highway.Core({
+  mode: 'both',
+  renderers: {
+    home: Home
+  },
+  transitions: {
+    default: Transition
+  }
+});
+```
+
 ## Examples
 
 - [**Basic Setup**](https://github.com/Dogstudio/highway/tree/master/examples/basic-setup)
@@ -268,6 +291,10 @@ Check out the [**Basic Menu Active**](https://github.com/Dogstudio/highway/tree/
 - [ ] More Examples
 
 ## History
+#### 1.1.0 (2018-03-17)
+
+- Introduce [**modes**](https://github.com/Dogstudio/highway/tree/master/examples/modes)
+
 #### 1.0.1 (2018-03-17)
 
 - Create `Highway.Transition` to use Promises instead of callbacks for transitions

dist/highway.js

@@ -95,6 +95,7 @@ var PARAM_REGEX = /\?([\w_\-.=&]+)/;
 var ANCHOR_REGEX = /(#.*)$/;
 var ORIGIN_REGEX = /(https?:\/\/[\w\-.]+)/;
 var PATHNAME_REGEX = /https?:\/\/.*?(\/[\w_\-./]+)/;
+var CAMELCASE_REGEX = /[-_](\w)/g;
 
 /**
  * Get origin of an URL
@@ -262,6 +263,18 @@ function getTransition(page, transitions) {
   return transitions[slug];
 }
 
+/**
+ * Converts string to camelCase
+ *
+ * @arg    {String} string - String to parse
+ * @return {String} Parsed string
+ */
+function camelize(string) {
+  return string.replace(CAMELCASE_REGEX, function (_, c) {
+    return c ? c.toUpperCase() : '';
+  });
+}
+
 /**
  * Export all helpers
  */
@@ -276,7 +289,8 @@ module.exports = {
   getAnchor: getAnchor,
   getPathname: getPathname,
   getRenderer: getRenderer,
-  getTransition: getTransition
+  getTransition: getTransition,
+  camelize: camelize
 };
 
 /***/ }),
@@ -639,6 +653,7 @@ var HighwayCore = function (_Emitter) {
     _this.transitions = opts.transitions;
 
     // Some usefull stuffs for later
+    _this.mode = opts.mode || 'out-in';
     _this.state = {};
     _this.cache = {};
     _this.navigating = false;
@@ -857,11 +872,13 @@ var HighwayCore = function (_Emitter) {
 
       this.emit('NAVIGATE_START', from, to, title, this.state);
 
-      // We hide the page we come `from` and since the `hide` method returns a
-      // Promise because come transition might occur we need to wait for the 
-      // Promise resolution before calling the `show` method of the page we go `to`.
-      this.from.hide().then(function () {
-        _this5.to.show().then(function () {
+      // We select the right method based on the mode provided in the options.
+      // If no mode is provided then the `out-in` method is chosen.
+      var method = _helpers2.default.camelize(this.mode);
+
+      if (typeof this[method] === 'function') {
+        // Now we call the pipeline!
+        this[method]().then(function () {
           _this5.navigating = false;
 
           // We prepare the next navigation by replacing the `from` renderer by
@@ -879,7 +896,61 @@ var HighwayCore = function (_Emitter) {
           // Same as the `NAVIGATE_START` event
           _this5.emit('NAVIGATE_END', from, to, title, _this5.state);
         });
+      }
+    }
+
+    /**
+     * Run `out` transition then `in` transition
+     * 
+     * @return {Promise} `out-in` Promise
+     */
+
+  }, {
+    key: 'outIn',
+    value: function outIn() {
+      var _this6 = this;
 
+      // Call `out` transition
+      return this.from.hide().then(function () {
+        // Reset scroll position
+        window.scrollTo(0, 0);
+      }).then(function () {
+        // Call `in` transition
+        _this6.to.show();
+      });
+    }
+
+    /**
+     * Run `in` transition then `out` transition
+     * 
+     * @return {Promise} `in-out` Promise
+     */
+
+  }, {
+    key: 'inOut',
+    value: function inOut() {
+      var _this7 = this;
+
+      // Call the `in` transition
+      return this.to.show().then(function () {
+        // Reset scroll position
+        window.scrollTo(0, 0);
+      }).then(function () {
+        // Call the `out` transition
+        _this7.from.hide();
+      });
+    }
+
+    /**
+     * Run both `in` and `out` transition at the same time.
+     * 
+     * @return {Promise} `both` Promise
+     */
+
+  }, {
+    key: 'both',
+    value: function both() {
+      return Promise.all([this.to.show(), this.from.hide()]).then(function () {
         // Reset scroll position
         window.scrollTo(0, 0);
       });

dist/highway.min.js

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",
@@ -16,6 +16,6 @@
     "webpack-cli": "^2.0.12"
   },
   "dependencies": {
-    "@dogstudio/highway": "^1.0.1"
+    "@dogstudio/highway": "^1.1.0"
   }
 }

dist/highway.min.js.gz

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@dogstudio/highway@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@dogstudio/highway/-/highway-1.0.1.tgz#1d38da001396363b2502b3c38a61ba2c13921131"
+"@dogstudio/highway@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@dogstudio/highway/-/highway-1.1.0.tgz#f6282309ec9e9a8529b03b72e2a8d308e8dce44d"
 
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"

examples/basic-css-transition/dist/index.js

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",
@@ -16,6 +16,6 @@
     "webpack-cli": "^2.0.12"
   },
   "dependencies": {
-    "@dogstudio/highway": "^1.0.1"
+    "@dogstudio/highway": "^1.1.0"
   }
 }

examples/basic-css-transition/package.json

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@dogstudio/highway@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@dogstudio/highway/-/highway-1.0.1.tgz#1d38da001396363b2502b3c38a61ba2c13921131"
+"@dogstudio/highway@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@dogstudio/highway/-/highway-1.1.0.tgz#f6282309ec9e9a8529b03b72e2a8d308e8dce44d"
 
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"