Docs: most-visible as external JavaScript

docs/index.html

@@ -1325,6 +1325,7 @@
     </main><!-- ./ Main -->
 
     <!-- JavaScript -->
+    <script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
     <script src="js/pico.docs.min.js"></script>
 
   </body>

docs/js/src/most-visible.js

@@ -1,151 +0,0 @@
-/**
- * Most Visible v1.5.0
- *
- * @author Andy Palmer <andy@andypalmer.me>
- * @license MIT
- */
-(function (root, factory) {
-  // Universal Module Definition
-
-  /* jshint strict:false */
-
-  /* global define: false, module: false */
-  if (typeof define === 'function' && define.amd) {
-    define([], function () {
-      return factory(root);
-    });
-  } else if (typeof module === 'object' && module.exports) {
-    module.exports = factory(root);
-  } else {
-    root.mostVisible = factory(root);
-  }
-})(typeof self !== 'undefined' ? self : this, function (window) {
-  /* jshint unused: vars */
-  'use strict';
-  /**
-   * MostVisible constructor
-   *
-   * @param {NodeList|string} elements
-   * @param {{}} options
-   * @constructor
-   */
-
-  function MostVisible(elements, options) {
-    if (!(this instanceof MostVisible)) {
-      return new MostVisible(elements, options).getMostVisible();
-    }
-
-    if (typeof elements === 'string') {
-      elements = document.querySelectorAll(elements);
-    }
-
-    this.elements = elements;
-    this.options = extend({}, MostVisible.defaults, options);
-  }
-  /**
-   * MostVisible default options
-   *
-   * @namespace
-   * @property {{}}      defaults             Default options hash.
-   * @property {boolean} defaults.percentage  Whether to calculate visibility as a percentage of height.
-   * @property {number}  defaults.offset      An offset to take into account when calculating visibility.
-   */
-
-  MostVisible.defaults = {
-    percentage: false,
-    offset: 0,
-  };
-  MostVisible.prototype = {
-    /**
-     * Returns the most visible element from the instance's NodeList.
-     *
-     * @returns {HTMLElement} Most visible element.
-     */
-    getMostVisible: function () {
-      var _this = this;
-
-      var viewportHeight = document.documentElement.clientHeight;
-      return Array.prototype.reduce.call(
-        this.elements,
-        function (carry, element) {
-          var value = _this.getVisibleHeight(element, viewportHeight);
-
-          return value > carry[0] ? [value, element] : carry;
-        },
-        [0, null]
-      )[1];
-    },
-
-    /**
-     * Returns the visible height of an element.
-     *
-     * @param {HTMLElement} element Element to check the visibility of.
-     * @param {number}      viewportHeight
-     * @returns {number}    Visible height of the element in pixels or a percentage of the element's total height.
-     */
-    getVisibleHeight: function (element, viewportHeight) {
-      var rect = element.getBoundingClientRect(),
-        rectTopOffset = rect.top - this.options.offset,
-        rectBottomOffset = rect.bottom - this.options.offset,
-        height = rect.bottom - rect.top,
-        visible = {
-          top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
-          bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
-        };
-      var visiblePx = 0;
-
-      if (visible.top && visible.bottom) {
-        // Whole element is visible
-        visiblePx = height;
-      } else if (visible.top) {
-        visiblePx = viewportHeight - rect.top;
-      } else if (visible.bottom) {
-        visiblePx = rectBottomOffset;
-      } else if (height > viewportHeight && rectTopOffset < 0) {
-        var absTop = Math.abs(rectTopOffset);
-
-        if (absTop < height) {
-          // Part of the element is visible
-          visiblePx = height - absTop;
-        }
-      }
-
-      if (this.options.percentage) {
-        return (visiblePx / height) * 100;
-      }
-
-      return visiblePx;
-    },
-  };
-
-  MostVisible.makeJQueryPlugin = function ($) {
-    if (!$) {
-      return;
-    }
-
-    $.fn.mostVisible = function (options) {
-      var instance = new MostVisible(this.get(), options);
-      return this.filter(instance.getMostVisible());
-    };
-  }; // Try adding the jQuery plugin to window.jQuery
-
-  MostVisible.makeJQueryPlugin(window.jQuery);
-  /**
-   * Extends obj by adding the properties of all other objects passed to the function.
-   *
-   * @param {...{}} obj
-   * @returns {{}} The extended object.
-   */
-
-  function extend(obj) {
-    for (var i = 1; i < arguments.length; i++) {
-      for (var key in arguments[i]) {
-        obj[key] = arguments[i][key];
-      }
-    }
-
-    return obj;
-  }
-
-  return MostVisible;
-});

docs/js/src/scrollspy.js

@@ -8,13 +8,8 @@
  * Copyright 2019-2021 - Licensed under MIT
  */
 
-import * as MostVisible from './most-visible.js';
-
 export const scrollspy = {
-  mostVisible() {
-    new MostVisible();
-  },
-
+  
   // Config
   minWidth: '992px',
   interval: 75,