Update docs and refactoring.

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '8'
+- '12'
 env:
   email: false
   global:

README.md

@@ -1,6 +1,6 @@
 # Muuri
 
-[![gzip size](http://img.badgesize.io/https://unpkg.com/muuri@0.7.1/dist/muuri.min.js?compression=gzip)](https://unpkg.com/muuri@0.7.1/dist/muuri.min.js)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/muuri@0.8.0/dist/muuri.min.js?compression=gzip)](https://unpkg.com/muuri@0.8.0/dist/muuri.min.js)
 [![npm](https://img.shields.io/npm/v/muuri.svg)](http://npm.im/muuri)
 
 Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable). Wanna see it in action? Check out the [demo](http://haltu.github.io/muuri/) on the website.
@@ -34,20 +34,18 @@ Muuri uses [Web Animations](https://developer.mozilla.org/en-US/docs/Web/API/Web
 
 ### 1. Get Muuri
 
-Download:
-* [muuri.js](https://unpkg.com/[email protected]/dist/muuri.js) - for development (not minified, with comments).
-* [muuri.min.js](https://unpkg.com/[email protected]/dist/muuri.min.js) - for production (minified, no comments).
-
-Or link directly:
-
-```html
-<script src="https://unpkg.com/[email protected]/dist/muuri.min.js"></script>
+Install via [npm](https://www.npmjs.com/):
+```bash
+npm install muuri
 ```
 
-Or install with [npm](https://www.npmjs.com/):
+Or download:
+* [muuri.js](https://unpkg.com/[email protected]/dist/muuri.js) - for development (not minified, with comments).
+* [muuri.min.js](https://unpkg.com/[email protected]/dist/muuri.min.js) - for production (minified, no comments).
 
-```bash
-npm install muuri
+Or link directly:
+```html
+<script src="https://unpkg.com/[email protected]/dist/muuri.min.js"></script>
 ```
 
 ### 2. Get Web Animations Polyfill (if needed)
@@ -63,8 +61,8 @@ npm install web-animations-js
 Add Muuri on your site and make sure to include the Web Animations Polyfill before Muuri (if needed).
 
 ```html
-<script src="https://unpkg.com/[email protected].1/web-animations.min.js"></script>
-<script src="https://unpkg.com/muuri@0.7.1/dist/muuri.min.js"></script>
+<script src="https://unpkg.com/[email protected].2/web-animations.min.js"></script>
+<script src="https://unpkg.com/muuri@0.8.0/dist/muuri.min.js"></script>
 ```
 
 ### 4. Add the markup
@@ -231,7 +229,8 @@ The default options are stored in `Muuri.defaultOptions` object, which in it's d
     userSelect: 'none',
     userDrag: 'none',
     tapHighlightColor: 'rgba(0, 0, 0, 0)',
-    touchCallout: 'none'
+    touchCallout: 'none',
+    contentZooming: 'none'
   },
   dragPlaceholder: {
     enabled: false,
@@ -297,6 +296,7 @@ var gridB = new Muuri('.grid-b', {
 * [dragSortPredicate](#dragsortpredicate-)
 * [dragReleaseDuration](#dragreleaseduration-)
 * [dragReleaseEasing](#dragreleaseeasing-)
+* [dragCssProps](#dragcssprops-)
 * [dragPlaceholder](#dragplaceholder-)
 * [containerClass](#containerclass-)
 * [itemClass](#itemclass-)
@@ -905,6 +905,55 @@ var grid = new Muuri(elem, {
 });
 ```
 
+### dragCssProps &nbsp;
+
+Drag specific CSS properties that Muuri sets to the draggable item elements. Muuri automatically prefixes the properties before applying them to the element. `touchAction` property is required to be always defined, but the other properties are optional and can be omitted by setting their value to an empty string if you want to e.g. define them via CSS only.
+
+* Default value: `{touchAction: 'none', userSelect: 'none', userDrag: 'none', tapHighlightColor: 'rgba(0, 0, 0, 0)', touchCallout: 'none', contentZooming: 'none'}`.
+* Accepted types: object.
+
+You can define the following properties:
+
+* **touchAction** &nbsp;&mdash;&nbsp; *string*
+  * Default value: `'none'`.
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+* **userSelect** &nbsp;&mdash;&nbsp; *string*
+  * Default value: `'none'`.
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+  * Optional.
+* **userDrag** &nbsp;&mdash;&nbsp; *string*
+  * Default value: `'none'`.
+  * http://help.dottoro.com/lcbixvwm.php
+  * Optional.
+* **tapHighlightColor** &nbsp;&mdash;&nbsp; *string*
+  * Default value: `'rgba(0, 0, 0, 0)'`.
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
+  * Optional.
+* **touchCallout** &nbsp;&mdash;&nbsp; *string*
+  * Default value: `'none'`.
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
+  * Optional.
+* **contentZooming** &nbsp;&mdash;&nbsp; *string*
+  * Default value: `'none'`.
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-content-zooming
+  * Optional.
+
+```javascript
+// Only set the required touch-action CSS property via the options if you for
+// example want to set the other props via CSS instead.
+var grid = new Muuri(elem, {
+  dragEnabled: true,
+  dragCssProps: {
+    touchAction: 'pan-y',
+    userSelect: '',
+    userDrag: '',
+    tapHighlightColor: '',
+    touchCallout: '',
+    contentZooming: ''
+  }
+});
+```
+
 ### dragPlaceholder &nbsp;
 
 If you want a placeholder item to appear for the duration of an item's drag & drop procedure you can enable and configure it here.

dist/muuri.js

@@ -473,19 +473,6 @@
     callback && callback();
   };
 
-  var supportsPassive = false;
-  try {
-    var passiveOpts = Object.defineProperty({}, 'passive', {
-      get: function() {
-        supportsPassive = true;
-      }
-    });
-    window.addEventListener('testPassive', null, passiveOpts);
-    window.removeEventListener('testPassive', null, passiveOpts);
-  } catch (e) {}
-
-  var isPassiveEventsSupported = supportsPassive;
-
   var vendorPrefixes = ['', 'webkit', 'moz', 'ms', 'o', 'Webkit', 'Moz', 'MS', 'O'];
 
   /**
@@ -524,6 +511,20 @@
     }
   ).bind(window);
 
+  // Detect support for passive events:
+  // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
+  var isPassiveEventsSupported = false;
+  try {
+    var passiveOpts = Object.defineProperty({}, 'passive', {
+      get: function() {
+        isPassiveEventsSupported = true;
+      }
+    });
+    window.addEventListener('testPassive', null, passiveOpts);
+    window.removeEventListener('testPassive', null, passiveOpts);
+  } catch (e) {}
+
+  // Dragger events.
   var events = {
     start: 'start',
     move: 'move',
@@ -1022,27 +1023,30 @@
    *
    * @public
    * @memberof Dragger.prototype
-   * @param {Object} [props]
+   * @param {Object} [newProps]
    */
-  Dragger.prototype.setCssProps = function(props) {
-    if (!props) return;
+  Dragger.prototype.setCssProps = function(newProps) {
+    if (!newProps) return;
 
-    var cssProps = this._cssProps;
+    var currentProps = this._cssProps;
     var element = this._element;
     var prop;
     var prefixedProp;
 
-    // Reset existing props.
-    for (prop in cssProps) {
-      element.style[prop] = cssProps[prop];
-      delete cssProps[prop];
+    // Reset current props.
+    for (prop in currentProps) {
+      element.style[prop] = currentProps[prop];
+      delete currentProps[prop];
     }
 
     // Set new props.
-    for (prop in props) {
+    for (prop in newProps) {
+      // Make sure we have a value for the prop.
+      if (!newProps[prop]) continue;
+
       // Special handling for touch-action.
       if (prop === taProp) {
-        this.setTouchAction(props[prop]);
+        this.setTouchAction(newProps[prop]);
         continue;
       }
 
@@ -1051,8 +1055,8 @@
       if (!prefixedProp) continue;
 
       // Store the prop and add the style.
-      cssProps[prefixedProp] = '';
-      element.style[prefixedProp] = props[prop];
+      currentProps[prefixedProp] = '';
+      element.style[prefixedProp] = newProps[prop];
     }
   };
 
@@ -5634,7 +5638,8 @@
       userSelect: 'none',
       userDrag: 'none',
       tapHighlightColor: 'rgba(0, 0, 0, 0)',
-      touchCallout: 'none'
+      touchCallout: 'none',
+      contentZooming: 'none'
     },
     dragPlaceholder: {
       enabled: false,

gulpfile.js

@@ -11,7 +11,7 @@ const exec = require('child_process').exec;
 const pkg = require('./package.json');
 const karmaDefaults = require('./karma.defaults.js');
 
-if (fs.existsSync('./.env')) dotenv.load();
+if (fs.existsSync('./.env')) dotenv.config();
 
 gulp.task('lint', () => {
   return gulp

karma.defaults.js

@@ -31,11 +31,7 @@ module.exports = {
   ],
   colors: true,
   autoWatch: false,
-  captureTimeout: 240000,
-  browserDisconnectTimeout: 60000,
-  browserNoActivityTimeout: 60000,
-  browserDisconnectTolerance: 10,
-  concurrency: 1,
+  browserDisconnectTolerance: 2,
   singleRun: true,
   hostname: '127.0.0.1',
   sauceLabs: {

src/Dragger/Dragger.js

@@ -7,11 +7,24 @@
 
 import Emitter from '../Emitter/Emitter';
 
-import isPassiveEventsSupported from '../utils/isPassiveEventsSupported';
 import getPrefixedPropName from '../utils/getPrefixedPropName';
 import raf from '../utils/raf';
 
-var events = {
+// Detect support for passive events:
+// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
+var isPassiveEventsSupported = false;
+try {
+  var passiveOpts = Object.defineProperty({}, 'passive', {
+    get: function() {
+      isPassiveEventsSupported = true;
+    }
+  });
+  window.addEventListener('testPassive', null, passiveOpts);
+  window.removeEventListener('testPassive', null, passiveOpts);
+} catch (e) {}
+
+// Dragger events.
+export var events = {
   start: 'start',
   move: 'move',
   end: 'end',
@@ -509,27 +522,30 @@ Dragger.prototype.setTouchAction = function(value) {
  *
  * @public
  * @memberof Dragger.prototype
- * @param {Object} [props]
+ * @param {Object} [newProps]
  */
-Dragger.prototype.setCssProps = function(props) {
-  if (!props) return;
+Dragger.prototype.setCssProps = function(newProps) {
+  if (!newProps) return;
 
-  var cssProps = this._cssProps;
+  var currentProps = this._cssProps;
   var element = this._element;
   var prop;
   var prefixedProp;
 
-  // Reset existing props.
-  for (prop in cssProps) {
-    element.style[prop] = cssProps[prop];
-    delete cssProps[prop];
+  // Reset current props.
+  for (prop in currentProps) {
+    element.style[prop] = currentProps[prop];
+    delete currentProps[prop];
   }
 
   // Set new props.
-  for (prop in props) {
+  for (prop in newProps) {
+    // Make sure we have a value for the prop.
+    if (!newProps[prop]) continue;
+
     // Special handling for touch-action.
     if (prop === taProp) {
-      this.setTouchAction(props[prop]);
+      this.setTouchAction(newProps[prop]);
       continue;
     }
 
@@ -538,8 +554,8 @@ Dragger.prototype.setCssProps = function(props) {
     if (!prefixedProp) continue;
 
     // Store the prop and add the style.
-    cssProps[prefixedProp] = '';
-    element.style[prefixedProp] = props[prop];
+    currentProps[prefixedProp] = '';
+    element.style[prefixedProp] = newProps[prop];
   }
 };
 

src/Grid/Grid.js

@@ -334,7 +334,8 @@ Grid.defaultOptions = {
     userSelect: 'none',
     userDrag: 'none',
     tapHighlightColor: 'rgba(0, 0, 0, 0)',
-    touchCallout: 'none'
+    touchCallout: 'none',
+    contentZooming: 'none'
   },
   dragPlaceholder: {
     enabled: false,

src/utils/getPrefixedPropName.js

@@ -1,9 +1,6 @@
 /**
- * Copyright (c) 2015-present, Haltu Oy
- * Released under the MIT license
- * https://github.com/haltu/muuri/blob/master/LICENSE.md
- *
- * Forked from: https://github.com/hammerjs/hammer.js/blob/563b5b1e4bfbb5796798dd286cd57b7c56f1eb9e/src/utils/prefixed.js
+ * Forked from hammer.js:
+ * https://github.com/hammerjs/hammer.js/blob/563b5b1e4bfbb5796798dd286cd57b7c56f1eb9e/src/utils/prefixed.js
  */
 
 var vendorPrefixes = ['', 'webkit', 'moz', 'ms', 'o', 'Webkit', 'Moz', 'MS', 'O'];