Merge branch 'v1.1.0'

Amphiluke · Oct 2, 2021 · 7f5e711 · 7f5e711
2 parents 422e9a6 + 1516e8b
commit 7f5e711
Show file tree

Hide file tree

Showing 12 changed files with 431 additions and 412 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,7 @@
   },
   "extends": "eslint:recommended",
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "rules": {
@@ -159,4 +159,4 @@
       "error"
     ]
   }
-}
+}
diff --git a/README.md b/README.md
@@ -30,7 +30,8 @@ The module exports a single object `handyScroll` which provides the following me
 * [`mount`](#mounting-the-widget) — initializes and “mounts” the widgets in the specified containers;
 * [`mounted`](#checking-widget-existence) — checks if the widget is already mounted in the given container;
 * [`update`](#updating-scrollbar) — updates the widget parameters and position;
-* [`destroy`](#destroying-the-widget) — destroys the widgets mounted in the specified containers and removes all related event handlers.
+* [`destroy`](#destroying-the-widget) — destroys the widgets mounted in the specified containers and removes all related event handlers;
+* [`destroyDetached`](#destroying-detached-widgets) — destroys handy-scroll widget instances whose containers were removed from the document.
 
 ### Mounting the widget
 
@@ -69,7 +70,7 @@ console.log(handyScroll.mounted("#spacious-container")); // true
 
 ### Updating scrollbar
 
-If you mount the widget in a container whose size and/or content may dynamically change, then you need a way to update the scrollbar each time the container’s sizes change. This can be done by invoking the method `handyScroll.update()` as in the example below.
+If you mount the widget in a container whose size and/or content may dynamically change, you need a way to update the scrollbar each time the container’s sizes change. This can be done by invoking the method `handyScroll.update()` as in the example below.
 
 ```javascript
 handyScroll.mount(".spacious-container");
@@ -89,6 +90,19 @@ handyScroll.destroy(".spacious-container");
 
 The method expects a single argument, the target containers reference, which can be either an element, or a list of elements, or a selector.
 
+
+### Destroying detached widgets
+
+If your app completely re-renders a large portion of DOM where handy-scroll widgets were mounted, actual container references are lost, and therefore you cannot unmount the widgets and perform related cleanup using the `destroy` method. In this case, you may just call the `handyScroll.destroyDetached()` method, and the module will find all “zombie” instances and will destroy them for you.
+
+```javascript
+handyScroll.mount(".main-view .spacious-container");
+// ... the app re-renders the main view ...
+document.querySelector(".main-view").innerHTML = "...";
+// destroy handy-scroll widgets whose containers are not in the document anymore
+handyScroll.destroyDetached();
+```
+
 ### Special cases
 
 If you want to attach the widget to a container living in a positioned box (e.g. a modal popup with `position: fixed`) then you need to apply two special indicating class names in the markup. The module detects these indicating class names (they are prefixed with `handy-scroll-`) and switches to a special functioning mode.
@@ -115,10 +129,6 @@ The [handy-scroll.css](dist/handy-scroll.css) file provides some basic styles fo
 
 You can make the widget more “unobtrusive” so that it will appear only when the mouse pointer hovers over the scrollable container. To do so just apply the class `handy-scroll-hoverable` to the desired scrollable container owning the widget.
 
-## Integration with Angular
-
-If you have problems with the widget integration into your Angular app, please consult [this instruction](doc/angular-integration.md) first.
-
 ## Live demos
 
 Check out some usage demos [here](https://amphiluke.github.io/handy-scroll/).
diff --git a/dist/handy-scroll.es6.js b/dist/handy-scroll.es6.js
@@ -1,13 +1,13 @@
 /*!
-handy-scroll v1.0.6
+handy-scroll v1.1.0
 https://amphiluke.github.io/handy-scroll/
 (c) 2021 Amphiluke
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.handyScroll = factory());
-}(this, (function () { 'use strict';
+})(this, (function () { 'use strict';
 
     let slice = Array.prototype.slice;
 
@@ -116,7 +116,12 @@ https://amphiluke.github.io/handy-scroll/
                             instance.skipSyncWidget = false;
                         },
                         focusin() {
-                            setTimeout(() => instance.syncWidget(), 0);
+                            setTimeout(() => {
+                                // The widget might be destroyed before the timer is triggered (issue #14)
+                                if (instance.widget) {
+                                    instance.syncWidget();
+                                }
+                            }, 0);
                         }
                     }
                 }
@@ -195,7 +200,7 @@ https://amphiluke.github.io/handy-scroll/
         }
     };
 
-    let instances = []; // if it were not for IE it would be better to use WeakMap (container -> instance)
+    let instances = []; // if it were not for IE, it would be better to use Map (container -> instance)
 
     let handyScroll = {
         /**
@@ -253,6 +258,19 @@ https://amphiluke.github.io/handy-scroll/
                     return false;
                 });
             });
+        },
+
+        /**
+         * Destroy handyScroll widgets whose containers are not in the document anymore
+         */
+        destroyDetached() {
+            instances = instances.filter(instance => {
+                if (!dom.body.contains(instance.container)) {
+                    instance.destroy();
+                    return false;
+                }
+                return true;
+            });
         }
     };
 
@@ -264,4 +282,4 @@ https://amphiluke.github.io/handy-scroll/
 
     return handyScroll;
 
-})));
+}));
diff --git a/dist/handy-scroll.es6.min.js b/dist/handy-scroll.es6.min.js
diff --git a/dist/handy-scroll.js b/dist/handy-scroll.js
@@ -1,13 +1,13 @@
 /*!
-handy-scroll v1.0.6
+handy-scroll v1.1.0
 https://amphiluke.github.io/handy-scroll/
 (c) 2021 Amphiluke
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.handyScroll = factory());
-}(this, (function () { 'use strict';
+})(this, (function () { 'use strict';
 
     var slice = Array.prototype.slice; // Precaution to avoid reference errors when imported for SSR (issue #13)
 
@@ -124,7 +124,10 @@ https://amphiluke.github.io/handy-scroll/
             },
             focusin: function focusin() {
               setTimeout(function () {
-                return instance.syncWidget();
+                // The widget might be destroyed before the timer is triggered (issue #14)
+                if (instance.widget) {
+                  instance.syncWidget();
+                }
               }, 0);
             }
           }
@@ -216,7 +219,7 @@ https://amphiluke.github.io/handy-scroll/
       }
     };
 
-    var instances = []; // if it were not for IE it would be better to use WeakMap (container -> instance)
+    var instances = []; // if it were not for IE, it would be better to use Map (container -> instance)
 
     var handyScroll = {
       /**
@@ -279,6 +282,20 @@ https://amphiluke.github.io/handy-scroll/
             return false;
           });
         });
+      },
+
+      /**
+       * Destroy handyScroll widgets whose containers are not in the document anymore
+       */
+      destroyDetached: function destroyDetached() {
+        instances = instances.filter(function (instance) {
+          if (!dom.body.contains(instance.container)) {
+            instance.destroy();
+            return false;
+          }
+
+          return true;
+        });
       }
     };
 
@@ -290,4 +307,4 @@ https://amphiluke.github.io/handy-scroll/
 
     return handyScroll;
 
-})));
+}));