Docs: Clean JS imports

docs/index.html

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

docs/js/pico.docs.js

@@ -6,12 +6,12 @@
  */
 
 // Imports
-import { aside } from './src/aside.js';
-import { themeSwitcher } from './src/theme-switcher.js';
-import { materialDesignColors } from './src/material-design-colors.js';
-import { colorPicker } from './src/color-picker.js';
-import { grid } from './src/grid.js';
-import { scrollspy } from './src/scrollspy.js';
+import aside from './src/aside.js';
+import themeSwitcher from './src/theme-switcher.js';
+import materialDesignColors from './src/material-design-colors.js';
+import colorPicker from './src/color-picker.js';
+import grid from './src/grid.js';
+import scrollspy from './src/scrollspy.js';
 
 // Aside initial state
 aside.init();

docs/js/src/aside.js

@@ -28,3 +28,5 @@ export const aside = {
     }
   }
 }
+
+export default aside;

docs/js/src/color-picker.js

@@ -170,3 +170,5 @@ export const colorPicker = {
     throw new Error('Bad Hex');
   }
 }
+
+export default colorPicker;

docs/js/src/grid.js

@@ -102,3 +102,5 @@ export const grid = {
     }
   }
 };
+
+export default grid;

docs/js/src/material-design-colors.js

@@ -299,3 +299,5 @@ export const materialDesignColors = {
     inverse: "#FFF"
   }
 };
+
+export default materialDesignColors;

docs/js/src/most-visible.js

@@ -0,0 +1,149 @@
+/**
+ * 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,8 +8,14 @@
  * Copyright 2019-2021 - Licensed under MIT
  */
 
+import * as MostVisible from './most-visible.js';
+
 export const scrollspy = {
 
+  mostVisible() {
+    new MostVisible()
+  },
+
   // Config
   minWidth: '992px',
   interval: 75,
@@ -61,3 +67,5 @@ export const scrollspy = {
     }.bind(this), false);
   }
 }
+
+export default scrollspy;

docs/js/src/theme-switcher.js

@@ -110,3 +110,5 @@ export const themeSwitcher = {
     }.bind(this));
   }
 }
+
+export default themeSwitcher;