Merge branch 'feature/resize-observer'

* feature/resize-observer:
  2.1.0
  add dist files
  update the demo with pourcentage width (more common scenario than fixed width layout)
  ungitignore the dist files (it's better UX to have the built files in the repo!) and switch from "umd" to "dist" folder name
  add dependency to ResizeObserver to support element resize (fix #55)
  fix a variable name conflict between the 2 observers

.gitignore

@@ -1,4 +1,3 @@
 .DS_Store
 node_modules
 .temp
-umd

demo/css/demo.css

@@ -90,12 +90,12 @@ a:visited {
 }
 .demo1-col {
   float: left;
-  width: 250px;
+  width: 20%;
   margin: 0 20px 20px 0;
 }
 .demo2-col {
   float: left;
-  width: 500px;
+  width: 40%;
 }
 .btn {
   display: inline-block;
@@ -121,19 +121,19 @@ a:visited {
 *****************************************************************/
 .demo1, .demo3 {
   margin: 10px 0;
-  width: 250px; 
+  width: 100%;
   height: 300px;
 }
   .demo1 p {
     margin: 0;
     padding: 10px;
-    width: 230px;
+    min-width: 230px;
     }
     .demo1 p.odd {
       background: #f0f0f0;
       }
 .demo2 {
-  width: 500px;
+  width: 100%;
   height: 90px;
   margin: 10px 0;
   white-space: nowrap;

dist/simplebar.css

@@ -0,0 +1,11 @@
+/*!
+ * 
+ *             SimpleBar.js - v2.1.0
+ *             Scrollbars, simpler.
+ *             https://grsmto.github.io/simplebar/
+ *             
+ *             Made by Adrien Grsmto from a fork by Jonathan Nicol
+ *             Under MIT License
+ *         
+ */
+[data-simplebar]{position:relative;z-index:0;overflow:hidden;-webkit-overflow-scrolling:touch}.simplebar-scroll-content{overflow:auto;position:relative;z-index:0}.simplebar-track{z-index:1;position:absolute;top:0;right:0;bottom:0;width:11px}.simplebar-track .simplebar-scrollbar{position:absolute;right:2px;border-radius:7px;min-height:10px;width:7px;opacity:0;-webkit-transition:opacity .2s linear;transition:opacity .2s linear;background:#6c6e71;background-clip:padding-box}.simplebar-track:hover .simplebar-scrollbar{opacity:.7;-webkit-transition:opacity 0 linear;transition:opacity 0 linear}.simplebar-track .simplebar-scrollbar.visible{opacity:.7}.horizontal.simplebar-track{top:auto;left:0;width:auto;height:11px}.horizontal.simplebar-track .simplebar-scrollbar{right:auto;top:2px;height:7px;min-height:0;min-width:10px;width:auto}

package.json

@@ -3,17 +3,17 @@
   "title": "SimpleBar.js",
   "description": "Scrollbars, simpler.",
   "files": [
-    "umd"
+    "dist"
   ],
   "author": "Adrien Grsmto from a fork by Jonathan Nicol",
   "repository": {
     "type": "git",
     "url": "http://github.com/grsmto/simplebar.git"
   },
-  "main": "umd/simplebar.js",
+  "main": "dist/simplebar.js",
   "homepage": "https://grsmto.github.io/simplebar/",
   "bugs": "https://github.com/grsmto/simplebar/issues",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "scripts": {
     "start": "webpack-dev-server --inline",
     "start:prod": "NODE_ENV=production webpack-dev-server",
@@ -46,6 +46,7 @@
     "eslint": "^3.5.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "postcss-loader": "^0.13.0",
+    "resize-observer-polyfill": "^1.4.1",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.1"

src/simplebar.js

@@ -1,7 +1,8 @@
-import scrollbarWidth from 'scrollbarwidth'
-import debounce from 'lodash.debounce'
+import scrollbarWidth from 'scrollbarwidth';
+import debounce from 'lodash.debounce';
+import ResizeObserver from 'resize-observer-polyfill';
 
-import './simplebar.css'
+import './simplebar.css';
 
 export default class SimpleBar {
     constructor(element, options) {
@@ -62,7 +63,7 @@ export default class SimpleBar {
         // MutationObserver is IE11+
         if (typeof MutationObserver !== 'undefined') {
             // Mutation observer to observe dynamically added elements
-            this.observer = new MutationObserver(mutations => {
+            const globalObserver = new MutationObserver(mutations => {
                 mutations.forEach(mutation => {
                     Array.from(mutation.addedNodes).forEach(addedNode => {
                         if (addedNode.nodeType === 1) {
@@ -90,7 +91,7 @@ export default class SimpleBar {
                 });
             });
 
-            this.observer.observe(document, { childList: true, subtree: true });
+            globalObserver.observe(document, { childList: true, subtree: true });
         }
 
         // Instantiate elements already present on the page
@@ -204,7 +205,7 @@ export default class SimpleBar {
         // MutationObserver is IE11+
         if (typeof MutationObserver !== 'undefined') {
             // create an observer instance
-            this.observer = new MutationObserver(mutations => {
+            this.mutationObserver = new MutationObserver(mutations => {
                 mutations.forEach(mutation => {
                     if (this.isChildNode(mutation.target) || mutation.addedNodes.length) {
                         this.recalculate();
@@ -213,8 +214,14 @@ export default class SimpleBar {
             });
 
             // pass in the target node, as well as the observer options
-            this.observer.observe(this.el, { attributes: true, childList: true, characterData: true, subtree: true });
+            this.mutationObserver.observe(this.el, { attributes: true, childList: true, characterData: true, subtree: true });
         }
+
+        this.resizeObserver = new ResizeObserver(() => {
+            this.recalculate();
+        });
+
+        this.resizeObserver.observe(this.el);
     }
 
     removeListeners() {

webpack.config.js

@@ -86,7 +86,7 @@ module.exports = {
     },
 
     output: {
-        path: 'umd',
+        path: 'dist',
         filename: 'simplebar.js',
         libraryTarget: 'umd',
         library: 'SimpleBar'