handy-scroll 1.0.6 → 1.1.1

package/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/).

package/dist/handy-scroll.d.ts

@@ -0,0 +1,10 @@
+declare namespace handyScroll {
+    export function mount(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
+    export function mounted(containerRef: HTMLElement | string): boolean;
+    export function update(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
+    export function destroy(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
+    export function destroyDetached(): void;
+}
+
+export default handyScroll;
+export as namespace handyScroll;

package/dist/handy-scroll.es6.js

@@ -1,13 +1,13 @@
 /*!
-handy-scroll v1.0.6
+handy-scroll v1.1.1
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2022 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,12 +200,12 @@ 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 = {
         /**
          * Mount widgets in the given containers
-         * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+         * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
          */
         mount(containerRef) {
             dom.$$(containerRef).forEach(container => {
@@ -225,7 +230,7 @@ https://amphiluke.github.io/handy-scroll/
 
         /**
          * Update widget parameters and position
-         * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+         * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
          */
         update(containerRef) {
             dom.$$(containerRef).forEach(container => {
@@ -241,7 +246,7 @@ https://amphiluke.github.io/handy-scroll/
 
         /**
          * Destroy widgets mounted in the given containers
-         * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+         * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
          */
         destroy(containerRef) {
             dom.$$(containerRef).forEach(container => {
@@ -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;
 
-})));
+}));

package/dist/handy-scroll.es6.min.js

@@ -1,6 +1,6 @@
 /*!
-handy-scroll v1.0.6
+handy-scroll v1.1.1
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2022 Amphiluke
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).handyScroll=t()}(this,(function(){"use strict";let e=Array.prototype.slice,t="object"==typeof document&&!!document.documentElement,i={isDOMAvailable:t,doc:t?document:null,html:t?document.documentElement:null,body:t?document.body:null,ready(e){"loading"===i.doc.readyState?i.doc.addEventListener("DOMContentLoaded",(()=>{e()}),{once:!0}):e()},$:e=>"string"==typeof e?i.body.querySelector(e):e,$$:t=>Array.isArray(t)?t:t.nodeType===Node.ELEMENT_NODE?[t]:"string"==typeof t?e.call(i.body.querySelectorAll(t)):e.call(t)},n={init(e){let t=this,n=i.$$(".handy-scroll-body").filter((t=>t.contains(e)));n.length&&(t.scrollBody=n[0]),t.container=e,t.visible=!0,t.initWidget(),t.update(),t.addEventHandlers(),t.skipSyncContainer=t.skipSyncWidget=!1},initWidget(){let e=this,t=e.widget=i.doc.createElement("div");t.classList.add("handy-scroll");let n=i.doc.createElement("div");n.style.width=`${e.container.scrollWidth}px`,t.appendChild(n),e.container.appendChild(t)},addEventHandlers(){let e=this;(e.eventHandlers=[{el:e.scrollBody||window,handlers:{scroll(){e.checkVisibility()},resize(){e.update()}}},{el:e.widget,handlers:{scroll(){e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1}}},{el:e.container,handlers:{scroll(){e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},focusin(){setTimeout((()=>e.syncWidget()),0)}}}]).forEach((({el:e,handlers:t})=>{Object.keys(t).forEach((i=>e.addEventListener(i,t[i],!1)))}))},checkVisibility(){let e=this,{widget:t,container:n,scrollBody:l}=e,o=t.scrollWidth<=t.offsetWidth;if(!o){let e=n.getBoundingClientRect(),t=l?l.getBoundingClientRect().bottom:window.innerHeight||i.html.clientHeight;o=e.bottom<=t||e.top>t}e.visible===o&&(e.visible=!o,t.classList.toggle("handy-scroll-hidden"))},syncContainer(){let e=this,{scrollLeft:t}=e.widget;e.container.scrollLeft!==t&&(e.skipSyncWidget=!0,e.container.scrollLeft=t)},syncWidget(){let e=this,{scrollLeft:t}=e.container;e.widget.scrollLeft!==t&&(e.skipSyncContainer=!0,e.widget.scrollLeft=t)},update(){let e=this,{widget:t,container:i,scrollBody:n}=e,{clientWidth:l,scrollWidth:o}=i;t.style.width=`${l}px`,n||(t.style.left=`${i.getBoundingClientRect().left}px`),t.firstElementChild.style.width=`${o}px`,o>l&&(t.style.height=t.offsetHeight-t.clientHeight+1+"px"),e.syncWidget(),e.checkVisibility()},destroy(){let e=this;e.eventHandlers.forEach((({el:e,handlers:t})=>{Object.keys(t).forEach((i=>e.removeEventListener(i,t[i],!1)))})),e.widget.parentNode.removeChild(e.widget),e.eventHandlers=e.widget=e.container=e.scrollBody=null}},l=[],o={mount(e){i.$$(e).forEach((e=>{if(o.mounted(e))return;let t=Object.create(n);l.push(t),t.init(e)}))},mounted(e){let t=i.$(e);return l.some((e=>e.container===t))},update(e){i.$$(e).forEach((e=>{l.some((t=>t.container===e&&(t.update(),!0)))}))},destroy(e){i.$$(e).forEach((e=>{l.some(((t,i)=>t.container===e&&(l.splice(i,1)[0].destroy(),!0)))}))}};return i.isDOMAvailable&&i.ready((()=>{o.mount("[data-handy-scroll]")})),o}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).handyScroll=t()}(this,(function(){"use strict";let e=Array.prototype.slice,t="object"==typeof document&&!!document.documentElement,i={isDOMAvailable:t,doc:t?document:null,html:t?document.documentElement:null,body:t?document.body:null,ready(e){"loading"===i.doc.readyState?i.doc.addEventListener("DOMContentLoaded",(()=>{e()}),{once:!0}):e()},$:e=>"string"==typeof e?i.body.querySelector(e):e,$$:t=>Array.isArray(t)?t:t.nodeType===Node.ELEMENT_NODE?[t]:"string"==typeof t?e.call(i.body.querySelectorAll(t)):e.call(t)},n={init(e){let t=this,n=i.$$(".handy-scroll-body").filter((t=>t.contains(e)));n.length&&(t.scrollBody=n[0]),t.container=e,t.visible=!0,t.initWidget(),t.update(),t.addEventHandlers(),t.skipSyncContainer=t.skipSyncWidget=!1},initWidget(){let e=this,t=e.widget=i.doc.createElement("div");t.classList.add("handy-scroll");let n=i.doc.createElement("div");n.style.width=`${e.container.scrollWidth}px`,t.appendChild(n),e.container.appendChild(t)},addEventHandlers(){let e=this;(e.eventHandlers=[{el:e.scrollBody||window,handlers:{scroll(){e.checkVisibility()},resize(){e.update()}}},{el:e.widget,handlers:{scroll(){e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1}}},{el:e.container,handlers:{scroll(){e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},focusin(){setTimeout((()=>{e.widget&&e.syncWidget()}),0)}}}]).forEach((({el:e,handlers:t})=>{Object.keys(t).forEach((i=>e.addEventListener(i,t[i],!1)))}))},checkVisibility(){let e=this,{widget:t,container:n,scrollBody:l}=e,o=t.scrollWidth<=t.offsetWidth;if(!o){let e=n.getBoundingClientRect(),t=l?l.getBoundingClientRect().bottom:window.innerHeight||i.html.clientHeight;o=e.bottom<=t||e.top>t}e.visible===o&&(e.visible=!o,t.classList.toggle("handy-scroll-hidden"))},syncContainer(){let e=this,{scrollLeft:t}=e.widget;e.container.scrollLeft!==t&&(e.skipSyncWidget=!0,e.container.scrollLeft=t)},syncWidget(){let e=this,{scrollLeft:t}=e.container;e.widget.scrollLeft!==t&&(e.skipSyncContainer=!0,e.widget.scrollLeft=t)},update(){let e=this,{widget:t,container:i,scrollBody:n}=e,{clientWidth:l,scrollWidth:o}=i;t.style.width=`${l}px`,n||(t.style.left=`${i.getBoundingClientRect().left}px`),t.firstElementChild.style.width=`${o}px`,o>l&&(t.style.height=t.offsetHeight-t.clientHeight+1+"px"),e.syncWidget(),e.checkVisibility()},destroy(){let e=this;e.eventHandlers.forEach((({el:e,handlers:t})=>{Object.keys(t).forEach((i=>e.removeEventListener(i,t[i],!1)))})),e.widget.parentNode.removeChild(e.widget),e.eventHandlers=e.widget=e.container=e.scrollBody=null}},l=[],o={mount(e){i.$$(e).forEach((e=>{if(o.mounted(e))return;let t=Object.create(n);l.push(t),t.init(e)}))},mounted(e){let t=i.$(e);return l.some((e=>e.container===t))},update(e){i.$$(e).forEach((e=>{l.some((t=>t.container===e&&(t.update(),!0)))}))},destroy(e){i.$$(e).forEach((e=>{l.some(((t,i)=>t.container===e&&(l.splice(i,1)[0].destroy(),!0)))}))},destroyDetached(){l=l.filter((e=>!!i.body.contains(e.container)||(e.destroy(),!1)))}};return i.isDOMAvailable&&i.ready((()=>{o.mount("[data-handy-scroll]")})),o}));

package/dist/handy-scroll.js

@@ -1,16 +1,17 @@
 /*!
-handy-scroll v1.0.6
+handy-scroll v1.1.1
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2022 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)
+    var slice = Array.prototype.slice;
 
+    // Precaution to avoid reference errors when imported for SSR (issue #13)
     var isDOMAvailable = typeof document === "object" && !!document.documentElement;
     var dom = {
       isDOMAvailable: isDOMAvailable,
@@ -33,7 +34,6 @@ https://amphiluke.github.io/handy-scroll/
           // ref is a selector
           return dom.body.querySelector(ref);
         }
-
         return ref; // ref is already an element
       },
       $$: function $$(ref) {
@@ -41,17 +41,14 @@ https://amphiluke.github.io/handy-scroll/
           // ref is an array of elements
           return ref;
         }
-
         if (ref.nodeType === Node.ELEMENT_NODE) {
           // ref is an element
           return [ref];
         }
-
         if (typeof ref === "string") {
           // ref is a selector
           return slice.call(dom.body.querySelectorAll(ref));
         }
-
         return slice.call(ref); // ref is an array-like object (NodeList or HTMLCollection)
       }
     };
@@ -62,18 +59,15 @@ https://amphiluke.github.io/handy-scroll/
         var scrollBodies = dom.$$(".handy-scroll-body").filter(function (node) {
           return node.contains(container);
         });
-
         if (scrollBodies.length) {
           instance.scrollBody = scrollBodies[0];
         }
-
         instance.container = container;
         instance.visible = true;
         instance.initWidget();
         instance.update(); // recalculate scrollbar parameters and set its visibility
-
-        instance.addEventHandlers(); // Set skipSync flags to their initial values (because update() above calls syncWidget())
-
+        instance.addEventHandlers();
+        // Set skipSync flags to their initial values (because update() above calls syncWidget())
         instance.skipSyncContainer = instance.skipSyncWidget = false;
       },
       initWidget: function initWidget() {
@@ -103,10 +97,9 @@ https://amphiluke.github.io/handy-scroll/
             scroll: function scroll() {
               if (instance.visible && !instance.skipSyncContainer) {
                 instance.syncContainer();
-              } // Resume widget->container syncing after the widget scrolling has finished
+              }
+              // Resume widget->container syncing after the widget scrolling has finished
               // (it might be temporally disabled by the container while syncing the widget)
-
-
               instance.skipSyncContainer = false;
             }
           }
@@ -116,22 +109,24 @@ https://amphiluke.github.io/handy-scroll/
             scroll: function scroll() {
               if (!instance.skipSyncWidget) {
                 instance.syncWidget();
-              } // Resume container->widget syncing after the container scrolling has finished
+              }
+              // Resume container->widget syncing after the container scrolling has finished
               // (it might be temporally disabled by the widget while syncing the container)
-
-
               instance.skipSyncWidget = false;
             },
             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);
             }
           }
         }];
         eventHandlers.forEach(function (_ref) {
           var el = _ref.el,
-              handlers = _ref.handlers;
+            handlers = _ref.handlers;
           Object.keys(handlers).forEach(function (event) {
             return el.addEventListener(event, handlers[event], false);
           });
@@ -140,41 +135,37 @@ https://amphiluke.github.io/handy-scroll/
       checkVisibility: function checkVisibility() {
         var instance = this;
         var widget = instance.widget,
-            container = instance.container,
-            scrollBody = instance.scrollBody;
+          container = instance.container,
+          scrollBody = instance.scrollBody;
         var mustHide = widget.scrollWidth <= widget.offsetWidth;
-
         if (!mustHide) {
           var containerRect = container.getBoundingClientRect();
           var maxVisibleY = scrollBody ? scrollBody.getBoundingClientRect().bottom : window.innerHeight || dom.html.clientHeight;
           mustHide = containerRect.bottom <= maxVisibleY || containerRect.top > maxVisibleY;
         }
-
         if (instance.visible === mustHide) {
-          instance.visible = !mustHide; // We cannot simply hide the scrollbar since its scrollLeft property will not update in that case
-
+          instance.visible = !mustHide;
+          // We cannot simply hide the scrollbar since its scrollLeft property will not update in that case
           widget.classList.toggle("handy-scroll-hidden");
         }
       },
       syncContainer: function syncContainer() {
         var instance = this;
         var scrollLeft = instance.widget.scrollLeft;
-
         if (instance.container.scrollLeft !== scrollLeft) {
           // Prevents container’s “scroll” event handler from syncing back again widget scroll position
-          instance.skipSyncWidget = true; // Note that this makes container’s “scroll” event handlers execute
-
+          instance.skipSyncWidget = true;
+          // Note that this makes container’s “scroll” event handlers execute
           instance.container.scrollLeft = scrollLeft;
         }
       },
       syncWidget: function syncWidget() {
         var instance = this;
         var scrollLeft = instance.container.scrollLeft;
-
         if (instance.widget.scrollLeft !== scrollLeft) {
           // Prevents widget’s “scroll” event handler from syncing back again container scroll position
-          instance.skipSyncContainer = true; // Note that this makes widget’s “scroll” event handlers execute
-
+          instance.skipSyncContainer = true;
+          // Note that this makes widget’s “scroll” event handlers execute
           instance.widget.scrollLeft = scrollLeft;
         }
       },
@@ -182,18 +173,16 @@ https://amphiluke.github.io/handy-scroll/
       update: function update() {
         var instance = this;
         var widget = instance.widget,
-            container = instance.container,
-            scrollBody = instance.scrollBody;
+          container = instance.container,
+          scrollBody = instance.scrollBody;
         var clientWidth = container.clientWidth,
-            scrollWidth = container.scrollWidth;
+          scrollWidth = container.scrollWidth;
         widget.style.width = clientWidth + "px";
-
         if (!scrollBody) {
           widget.style.left = container.getBoundingClientRect().left + "px";
         }
-
-        widget.firstElementChild.style.width = scrollWidth + "px"; // Fit widget height to the native scroll bar height if needed
-
+        widget.firstElementChild.style.width = scrollWidth + "px";
+        // Fit widget height to the native scroll bar height if needed
         if (scrollWidth > clientWidth) {
           widget.style.height = widget.offsetHeight - widget.clientHeight + 1 + "px"; // +1px JIC
         }
@@ -206,7 +195,7 @@ https://amphiluke.github.io/handy-scroll/
         var instance = this;
         instance.eventHandlers.forEach(function (_ref2) {
           var el = _ref2.el,
-              handlers = _ref2.handlers;
+            handlers = _ref2.handlers;
           Object.keys(handlers).forEach(function (event) {
             return el.removeEventListener(event, handlers[event], false);
           });
@@ -216,25 +205,23 @@ 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 = {
       /**
        * Mount widgets in the given containers
-       * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+       * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
        */
       mount: function mount(containerRef) {
         dom.$$(containerRef).forEach(function (container) {
           if (handyScroll.mounted(container)) {
             return;
           }
-
           var instance = Object.create(handyScrollProto);
           instances.push(instance);
           instance.init(container);
         });
       },
-
       /**
        * Check if a widget is already mounted in the given container
        * @param {HTMLElement|String} containerRef - Widget container reference (either an element, or a selector)
@@ -246,10 +233,9 @@ https://amphiluke.github.io/handy-scroll/
           return instance.container === container;
         });
       },
-
       /**
        * Update widget parameters and position
-       * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+       * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
        */
       update: function update(containerRef) {
         dom.$$(containerRef).forEach(function (container) {
@@ -258,15 +244,13 @@ https://amphiluke.github.io/handy-scroll/
               instance.update();
               return true;
             }
-
             return false;
           });
         });
       },
-
       /**
        * Destroy widgets mounted in the given containers
-       * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+       * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
        */
       destroy: function destroy(containerRef) {
         dom.$$(containerRef).forEach(function (container) {
@@ -275,13 +259,23 @@ https://amphiluke.github.io/handy-scroll/
               instances.splice(index, 1)[0].destroy();
               return true;
             }
-
             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;
+        });
       }
     };
-
     if (dom.isDOMAvailable) {
       dom.ready(function () {
         handyScroll.mount("[data-handy-scroll]");
@@ -290,4 +284,4 @@ https://amphiluke.github.io/handy-scroll/
 
     return handyScroll;
 
-})));
+}));

package/dist/handy-scroll.min.js

@@ -1,6 +1,6 @@
 /*!
-handy-scroll v1.0.6
+handy-scroll v1.1.1
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2022 Amphiluke
 */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).handyScroll=n()}(this,(function(){"use strict";var e=Array.prototype.slice,n="object"==typeof document&&!!document.documentElement,t={isDOMAvailable:n,doc:n?document:null,html:n?document.documentElement:null,body:n?document.body:null,ready:function(e){"loading"===t.doc.readyState?t.doc.addEventListener("DOMContentLoaded",(function(){e()}),{once:!0}):e()},$:function(e){return"string"==typeof e?t.body.querySelector(e):e},$$:function(n){return Array.isArray(n)?n:n.nodeType===Node.ELEMENT_NODE?[n]:"string"==typeof n?e.call(t.body.querySelectorAll(n)):e.call(n)}},i={init:function(e){var n=this,i=t.$$(".handy-scroll-body").filter((function(n){return n.contains(e)}));i.length&&(n.scrollBody=i[0]),n.container=e,n.visible=!0,n.initWidget(),n.update(),n.addEventHandlers(),n.skipSyncContainer=n.skipSyncWidget=!1},initWidget:function(){var e=this,n=e.widget=t.doc.createElement("div");n.classList.add("handy-scroll");var i=t.doc.createElement("div");i.style.width=e.container.scrollWidth+"px",n.appendChild(i),e.container.appendChild(n)},addEventHandlers:function(){var e=this;(e.eventHandlers=[{el:e.scrollBody||window,handlers:{scroll:function(){e.checkVisibility()},resize:function(){e.update()}}},{el:e.widget,handlers:{scroll:function(){e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1}}},{el:e.container,handlers:{scroll:function(){e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},focusin:function(){setTimeout((function(){return e.syncWidget()}),0)}}}]).forEach((function(e){var n=e.el,t=e.handlers;Object.keys(t).forEach((function(e){return n.addEventListener(e,t[e],!1)}))}))},checkVisibility:function(){var e=this,n=e.widget,i=e.container,o=e.scrollBody,c=n.scrollWidth<=n.offsetWidth;if(!c){var r=i.getBoundingClientRect(),l=o?o.getBoundingClientRect().bottom:window.innerHeight||t.html.clientHeight;c=r.bottom<=l||r.top>l}e.visible===c&&(e.visible=!c,n.classList.toggle("handy-scroll-hidden"))},syncContainer:function(){var e=this,n=e.widget.scrollLeft;e.container.scrollLeft!==n&&(e.skipSyncWidget=!0,e.container.scrollLeft=n)},syncWidget:function(){var e=this,n=e.container.scrollLeft;e.widget.scrollLeft!==n&&(e.skipSyncContainer=!0,e.widget.scrollLeft=n)},update:function(){var e=this,n=e.widget,t=e.container,i=e.scrollBody,o=t.clientWidth,c=t.scrollWidth;n.style.width=o+"px",i||(n.style.left=t.getBoundingClientRect().left+"px"),n.firstElementChild.style.width=c+"px",c>o&&(n.style.height=n.offsetHeight-n.clientHeight+1+"px"),e.syncWidget(),e.checkVisibility()},destroy:function(){var e=this;e.eventHandlers.forEach((function(e){var n=e.el,t=e.handlers;Object.keys(t).forEach((function(e){return n.removeEventListener(e,t[e],!1)}))})),e.widget.parentNode.removeChild(e.widget),e.eventHandlers=e.widget=e.container=e.scrollBody=null}},o=[],c={mount:function(e){t.$$(e).forEach((function(e){if(!c.mounted(e)){var n=Object.create(i);o.push(n),n.init(e)}}))},mounted:function(e){var n=t.$(e);return o.some((function(e){return e.container===n}))},update:function(e){t.$$(e).forEach((function(e){o.some((function(n){return n.container===e&&(n.update(),!0)}))}))},destroy:function(e){t.$$(e).forEach((function(e){o.some((function(n,t){return n.container===e&&(o.splice(t,1)[0].destroy(),!0)}))}))}};return t.isDOMAvailable&&t.ready((function(){c.mount("[data-handy-scroll]")})),c}));
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).handyScroll=n()}(this,(function(){"use strict";var t=Array.prototype.slice,n="object"==typeof document&&!!document.documentElement,e={isDOMAvailable:n,doc:n?document:null,html:n?document.documentElement:null,body:n?document.body:null,ready:function(t){"loading"===e.doc.readyState?e.doc.addEventListener("DOMContentLoaded",(function(){t()}),{once:!0}):t()},$:function(t){return"string"==typeof t?e.body.querySelector(t):t},$$:function(n){return Array.isArray(n)?n:n.nodeType===Node.ELEMENT_NODE?[n]:"string"==typeof n?t.call(e.body.querySelectorAll(n)):t.call(n)}},i={init:function(t){var n=this,i=e.$$(".handy-scroll-body").filter((function(n){return n.contains(t)}));i.length&&(n.scrollBody=i[0]),n.container=t,n.visible=!0,n.initWidget(),n.update(),n.addEventHandlers(),n.skipSyncContainer=n.skipSyncWidget=!1},initWidget:function(){var t=this,n=t.widget=e.doc.createElement("div");n.classList.add("handy-scroll");var i=e.doc.createElement("div");i.style.width=t.container.scrollWidth+"px",n.appendChild(i),t.container.appendChild(n)},addEventHandlers:function(){var t=this;(t.eventHandlers=[{el:t.scrollBody||window,handlers:{scroll:function(){t.checkVisibility()},resize:function(){t.update()}}},{el:t.widget,handlers:{scroll:function(){t.visible&&!t.skipSyncContainer&&t.syncContainer(),t.skipSyncContainer=!1}}},{el:t.container,handlers:{scroll:function(){t.skipSyncWidget||t.syncWidget(),t.skipSyncWidget=!1},focusin:function(){setTimeout((function(){t.widget&&t.syncWidget()}),0)}}}]).forEach((function(t){var n=t.el,e=t.handlers;Object.keys(e).forEach((function(t){return n.addEventListener(t,e[t],!1)}))}))},checkVisibility:function(){var t=this,n=t.widget,i=t.container,o=t.scrollBody,c=n.scrollWidth<=n.offsetWidth;if(!c){var r=i.getBoundingClientRect(),l=o?o.getBoundingClientRect().bottom:window.innerHeight||e.html.clientHeight;c=r.bottom<=l||r.top>l}t.visible===c&&(t.visible=!c,n.classList.toggle("handy-scroll-hidden"))},syncContainer:function(){var t=this,n=t.widget.scrollLeft;t.container.scrollLeft!==n&&(t.skipSyncWidget=!0,t.container.scrollLeft=n)},syncWidget:function(){var t=this,n=t.container.scrollLeft;t.widget.scrollLeft!==n&&(t.skipSyncContainer=!0,t.widget.scrollLeft=n)},update:function(){var t=this,n=t.widget,e=t.container,i=t.scrollBody,o=e.clientWidth,c=e.scrollWidth;n.style.width=o+"px",i||(n.style.left=e.getBoundingClientRect().left+"px"),n.firstElementChild.style.width=c+"px",c>o&&(n.style.height=n.offsetHeight-n.clientHeight+1+"px"),t.syncWidget(),t.checkVisibility()},destroy:function(){var t=this;t.eventHandlers.forEach((function(t){var n=t.el,e=t.handlers;Object.keys(e).forEach((function(t){return n.removeEventListener(t,e[t],!1)}))})),t.widget.parentNode.removeChild(t.widget),t.eventHandlers=t.widget=t.container=t.scrollBody=null}},o=[],c={mount:function(t){e.$$(t).forEach((function(t){if(!c.mounted(t)){var n=Object.create(i);o.push(n),n.init(t)}}))},mounted:function(t){var n=e.$(t);return o.some((function(t){return t.container===n}))},update:function(t){e.$$(t).forEach((function(t){o.some((function(n){return n.container===t&&(n.update(),!0)}))}))},destroy:function(t){e.$$(t).forEach((function(t){o.some((function(n,e){return n.container===t&&(o.splice(e,1)[0].destroy(),!0)}))}))},destroyDetached:function(){o=o.filter((function(t){return!!e.body.contains(t.container)||(t.destroy(),!1)}))}};return e.isDOMAvailable&&e.ready((function(){c.mount("[data-handy-scroll]")})),c}));

package/package.json

@@ -1,20 +1,26 @@
 {
   "name": "handy-scroll",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "description": "Handy dependency-free floating scrollbar widget",
-  "main": "dist/handy-scroll.min.js",
-  "module": "src/handy-scroll.js",
-  "style": "dist/handy-scroll.css",
+  "main": "./dist/handy-scroll.min.js",
+  "module": "./src/handy-scroll.js",
+  "style": "./dist/handy-scroll.css",
+  "types": "./dist/handy-scroll.d.ts",
+  "exports": {
+    "types": "./dist/handy-scroll.d.ts",
+    "import": "./src/handy-scroll.js",
+    "require": "./dist/handy-scroll.js"
+  },
+  "type": "module",
   "files": [
     "dist",
-    "doc",
     "src"
   ],
   "scripts": {
     "prepare": "husky install",
     "lint": "eslint src/*.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c && lessc src/handy-scroll.less | cleancss -O2 -o dist/handy-scroll.css"
+    "build": "rollup -c --bundleConfigAsCjs && lessc src/handy-scroll.less | cleancss -O2 -o dist/handy-scroll.css"
   },
   "repository": {
     "type": "git",
@@ -32,14 +38,14 @@
   },
   "homepage": "https://amphiluke.github.io/handy-scroll/",
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "clean-css-cli": "^5.3.3",
-    "eslint": "^7.32.0",
-    "husky": "^7.0.1",
-    "less": "^4.1.1",
-    "rollup": "^2.56.2",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-terser": "^0.2.0",
+    "clean-css-cli": "^5.6.1",
+    "eslint": "^8.29.0",
+    "husky": "8.0.2",
+    "less": "^4.1.3",
+    "rollup": "^3.6.0"
   }
 }

package/src/handy-scroll-proto.js

@@ -66,7 +66,12 @@ let handyScrollProto = {
                         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);
                     }
                 }
             }

package/src/handy-scroll.js

@@ -1,12 +1,12 @@
 import dom from "./dom.js";
 import handyScrollProto from "./handy-scroll-proto";
 
-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 = {
     /**
      * Mount widgets in the given containers
-     * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+     * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
      */
     mount(containerRef) {
         dom.$$(containerRef).forEach(container => {
@@ -31,7 +31,7 @@ let handyScroll = {
 
     /**
      * Update widget parameters and position
-     * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+     * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
      */
     update(containerRef) {
         dom.$$(containerRef).forEach(container => {
@@ -47,7 +47,7 @@ let handyScroll = {
 
     /**
      * Destroy widgets mounted in the given containers
-     * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+     * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
      */
     destroy(containerRef) {
         dom.$$(containerRef).forEach(container => {
@@ -59,6 +59,19 @@ let handyScroll = {
                 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;
+        });
     }
 };
 

package/doc/angular-integration.md

@@ -1,45 +0,0 @@
-# Using handy-scroll in an Angular app
-
-handy-scroll is a “VanillaJS” module, which means that you may need to perform a few additional steps to make it ready for use with your favorite framework. Here are the steps to install and use the handy-scroll widget in a sample Angular app. This instruction is partly adopted from the [“official” Angular CLI guide](https://github.com/angular/angular-cli/wiki/stories-third-party-lib) on installing a third party library in an Angular project.
-
-1. Install the handy-scroll package locally as your project’s dependency:
-    ```
-    npm install --save handy-scroll
-    ```
-1. Include widget styles into your project’s [global styles](https://github.com/angular/angular-cli/wiki/stories-global-styles). You may import widget styles in your global stylesheet file `styles.css`:
-    ```css
-    @import "../node_modules/handy-scroll/dist/handy-scroll.css";
-    ```
-1. Create a `typings.d.ts` file in your `src/` folder. This file will be automatically included as global type definition.
-1. In `src/typings.d.ts`, add the following code:
-    ```typescript
-    declare module 'handy-scroll';
-    ```
-1.  In the component or file that uses the handy-scroll widget, add the following code:
-    ```typescript
-    import handyScroll from 'handy-scroll';
-    ```
-1. You may now use the widget API in your code as usual. E.g. in a component:
-    ```typescript
-    import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
-    import handyScroll from 'handy-scroll'; // 1) import
-    
-    @Component({
-      selector: 'app-root',
-      template: `
-        <div #mycontainer class="my-container">
-          <div>{{ "Long contents. ".repeat(2000) }}</div>
-        </div>
-      `,
-      styles: ['.my-container {overflow:auto} .my-container div {min-width:150vw}']
-    })
-    export class AppComponent implements AfterViewInit {
-      @ViewChild('mycontainer') myContainer: ElementRef;
-    
-      ngAfterViewInit() {
-        handyScroll.mount(this.myContainer.nativeElement); // 2) use
-      }
-    }
-    ```
-
-You may also play with a [live demo](https://stackblitz.com/edit/angular-handy-scroll-integration).