bv-ui-core 0.1.1

package/lib/pixelsDisplayed/index.js

@@ -0,0 +1,113 @@
+/**
+ * @fileOverview Checks visibility of an element by calculating the
+ * visible pixels for vertical and horizontal viewport.
+ * This is a migration of repository bv-ui-pixels-displayed
+ */
+var global = require('../global');
+
+function getDimensions () {
+  var window = global;
+  var docEl = window.document && window.document.documentElement;
+  return {
+    height: window.innerHeight || docEl.clientHeight,
+    width: window.innerWidth || docEl.clientWidth
+  };
+}
+
+function pixelsDisplayedVertical (el) {
+  var rect = el.getBoundingClientRect();
+  var displayed;
+  var windowHeight = module.exports.getDimensions().height;
+
+  // There are five potential DOM node positions relative to the viewport:
+  // * Completely above the viewport, not visible
+  // * Completely below the viewport, not visible
+  // * A top portion (or all) of the DOM node is visible
+  // * A middle portion of the DOM node is visible
+  // * A bottom portion of the DOM node is visible
+
+  if (rect.top <= 0) {
+    // The top of the node is at or above the top of the viewport,
+    // so the top plus its height would be how much is shown.
+    // However, we never want to provide a negative number for amount displayed.
+    displayed = Math.max(rect.top + rect.height, 0);
+
+    // Once we know how much is potentially showing, we want to ensure that we don't over-report.
+    // If the window height is less than our calculated display, use that.
+    displayed = Math.min(displayed, windowHeight);
+
+    // Cases handled:
+    // * Completely above the viewport, not visible
+    //   * First displayed value would be 0, as the sum would be negative and so Math.max would return 0
+    //   * Second displayed will remain 0, as that is (hopefully) less than viewport height
+    // * A middle portion of the DOM node is visible, or a bottom portion of the DOM node is visible
+    //   * First displayed value will be the height of the DOM node below the top of the viewport
+    //   * Second displayed value will be either that height, or the height of the viewport itself
+
+    return displayed;
+  }
+
+    // If the top of our rectangle is greater than the viewport's height,
+    // we're not visible, as the node is completely below the viewport.
+  if (rect.top >= windowHeight) { return 0; }
+
+  // At this point, the only remaining case is that the top of the DOM node is
+  // somewhere in the viewport. We can determine the maximum possible amount
+  // displayed rather easily, by determining how much distance there is between
+  // the top of the bounding rectangle and the viewport's height.
+  // However, if this is larger than our DOM node, we don't want to report more
+  // displayed than the node's full height;
+  return Math.min(windowHeight - rect.top, rect.height);
+}
+
+function pixelsDisplayedHorizontal (el) {
+  var rect = el.getBoundingClientRect();
+  var displayed;
+
+  var windowWidth = module.exports.getDimensions().width;
+
+  // There are five potential DOM node positions relative to the viewport:
+  // * Completely to the left of the viewport, not visible
+  // * Completely to the right of the viewport, not visible
+  // * A left portion (or all) of the DOM node is visible
+  // * A middle portion of the DOM node is visible
+  // * A right portion of the DOM node is visible
+
+  if (rect.left <= 0) {
+    // The left of the node is at or to the left of the viewport,
+    // so the left plus its width would be how much is shown.
+    // However, we never want to provide a negative number for amount displayed.
+    displayed = Math.max(rect.left + rect.width, 0);
+
+    // Once we know how much is potentially showing, we want to ensure that we don't over-report.
+    // If the window weight is less than our calculated display, use that.
+    displayed = Math.min(displayed, windowWidth);
+
+    // Cases handled:
+    // * Completely to the left of the viewport, not visible
+    //   * First displayed value would be 0, as the sum would be negative and so Math.max would return 0
+    //   * Second displayed will remain 0, as that is (hopefully) less than viewport width
+    // * A middle portion of the DOM node is visible, or a right portion of the DOM node is visible
+    //   * First displayed value will be the width of the DOM node to the right of the left border of the viewport
+    //   * Second displayed value will be either that width, or the width of the viewport itself
+
+    return displayed;
+  }
+
+  // If the left of our rectangle is greater than the viewport's width,
+  // we're not visible, as the node is completely to the right of the viewport.
+  if (rect.left >= windowWidth) { return 0; }
+
+  // At this point, the only remaining case is that the left of the DOM node is
+  // somewhere in the viewport. We can determine the maximum possible amount
+  // displayed rather easily, by determining how much distance there is between
+  // the left of the bounding rectangle and the viewport's width.
+  // However, if this is larger than our DOM node, we don't want to report more
+  // displayed than the node's full width;
+  return Math.min(windowWidth - rect.left, rect.width);
+}
+
+module.exports = { getDimensions: getDimensions,
+  pixelsDisplayedHorizontal: pixelsDisplayedHorizontal,
+  pixelsDisplayedVertical: pixelsDisplayedVertical
+};

package/lib/polyfills/README.md

@@ -0,0 +1,39 @@
+# Polyfills!
+
+The polyfills contained in this folder can be imported as necessary. They should
+export either the builtin native function(s), if found on the global, or the
+polyfill itself.
+
+## Usage
+
+**In code**
+
+```js
+const Promise = require('bv-ui-core/lib/polyfills/promise')
+// Do things with the Promise polyfill!
+const myPromise = new Promise((resolve, reject) => {/*...*/})
+```
+
+```js
+const { fetch, Headers } = require('bv-ui-core/lib/polyfills/fetch')
+// Do things with the fetch polyfill!
+fetch(url, {
+  headers: new Headers({
+    'Accept': 'application/json',
+  }),
+}).then(myCallback)
+```
+
+**In webpack**
+
+```js
+plugins: [
+  // Any references to these items in the bundle will be wrapped in
+  // references to their respective polyfill module exports.
+  new webpack.ProvidePlugin({
+    Promise: 'bv-ui-core/lib/polyfills/promise',
+    fetch: ['bv-ui-core/lib/polyfills/fetch', 'fetch'],
+    Headers: ['bv-ui-core/lib/polyfills/fetch', 'Headers'],
+  })
+]
+```

package/lib/polyfills/fetch/Headers.js

@@ -0,0 +1,3 @@
+var Headers = require('./index').Headers;
+
+module.exports = Headers;

package/lib/polyfills/fetch/Request.js

@@ -0,0 +1,3 @@
+var Request = require('./index').Request;
+
+module.exports = Request;

package/lib/polyfills/fetch/Response.js

@@ -0,0 +1,3 @@
+var Response = require('./index').Response;
+
+module.exports = Response;

package/lib/polyfills/fetch/fetch.js

@@ -0,0 +1,3 @@
+var fetch = require('./index').fetch;
+
+module.exports = fetch;

package/lib/polyfills/fetch/index.js

@@ -0,0 +1,57 @@
+/**
+ * Check for the existence of a builtin fetch function, and return it if it
+ * exists. Otherwise, load whatwg-fetch in a non-globally-polluting way. It
+ * checks for the existence of a 'self' variable to attach itself to, and
+ * otherwise, will attach itself to the global object. Because of that, create
+ * a global.self reference for it to attach to, caching any preexisting value,
+ * and restoring the preexisting value after load, exporting the polyfill (and
+ * its supporting data types) from this module.
+ *
+ * In the case of an existing builtin fetch, return it and its supporting data
+ * types from this module, so that any module that needs fetch or its supporting
+ * data types can import all of them from here, whether they're preexisting or
+ * not.
+ */
+var global = require('../../global')
+
+// If fetch is unsupported, or is currently polyfilled, supply our own, just in case
+if (typeof global.fetch === 'undefined' || !global.fetch.toString().match(/\[native code]/)) {
+  // Cache any preexisting value
+  var self = global.self;
+
+  // Create a new version of 'self', complete with things
+  // whatwg-fetch does some internal support checks for.
+  global.self = {};
+
+  // whatwg-fetch uses 'in' checks which breaks on undefined properties, so we
+  // should check for existence and only add the ones that we know we have.
+  var names = ['URLSearchParams', 'FileReader', 'Blob', 'FormData', 'ArrayBuffer'];
+  names.forEach(function (name) {
+    if (global[name]) {
+      global.self[name] = global[name];
+    }
+  });
+
+  // Require whatwg-fetch, which will search for 'self' and attach to it.
+  require('whatwg-fetch');
+
+  // Export the polyfilled items that were housed in the global.self namespace.
+  module.exports = {
+    fetch: global.self.fetch,
+    Headers: global.self.Headers,
+    Request: global.self.Request,
+    Response: global.self.Response
+  };
+
+  // Restore the original value of 'self' to the version we cached at the top.
+  global.self = self;
+}
+else {
+  // fetch is natively supported, export it and its support constructors.
+  module.exports = {
+    fetch: global.fetch,
+    Headers: global.Headers,
+    Request: global.Request,
+    Response: global.Response
+  };
+}

package/lib/polyfills/promise.js

@@ -0,0 +1,265 @@
+/**
+ * The majority of this polyfill is lovingly lifted from Taylor Hakes and
+ * modified to meet our needs. Where his polyfill was contained in an IIFE, we
+ * instead check for the existence of the builtin Promise and return it if it
+ * exists. If it doesn't exist, we create a polyfill and return that.
+ *
+ * We are intentially avoiding polluting the global namespace here by not
+ * attaching the polyfill to the global.
+ */
+
+// Copyright (c) 2014 Taylor Hakes
+// Copyright (c) 2014 Forbes Lindesay
+// https://github.com/taylorhakes/promise-polyfill
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+var global = require('../global')
+
+// If Promise is unsupported, or is currently polyfilled, supply our own, just in case
+if (typeof global.Promise === 'undefined' || !global.Promise.toString().match(/\[native code]/)) {
+  // Store setTimeout reference so promise-polyfill will be unaffected by
+  // other code modifying setTimeout (like sinon.useFakeTimers())
+  var setTimeoutFunc = setTimeout;
+
+  function noop () {}
+
+  // Polyfill for Function.prototype.bind
+  function bind (fn, thisArg) {
+    return function () {
+      fn.apply(thisArg, arguments);
+    };
+  }
+
+  function Promise (fn) {
+    if (typeof this !== 'object') {
+      throw new TypeError('Promises must be constructed via new');
+    }
+    if (typeof fn !== 'function') {
+      throw new TypeError('not a function');
+    }
+    this._state = 0;
+    this._handled = false;
+    this._value = undefined;
+    this._deferreds = [];
+
+    doResolve(fn, this);
+  }
+
+  function handle (self, deferred) {
+    while (self._state === 3) {
+      self = self._value;
+    }
+    if (self._state === 0) {
+      self._deferreds.push(deferred);
+      return;
+    }
+    self._handled = true;
+    Promise._immediateFn(function () {
+      var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
+      if (cb === null) {
+        (self._state === 1 ? resolve : reject)(deferred.promise, self._value);
+        return;
+      }
+      var ret;
+      try {
+        ret = cb(self._value);
+      }
+      catch (e) {
+        reject(deferred.promise, e);
+        return;
+      }
+      resolve(deferred.promise, ret);
+    });
+  }
+
+  function resolve (self, newValue) {
+    try {
+      // Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
+      if (newValue === self) {
+        throw new TypeError('A promise cannot be resolved with itself.');
+      }
+      if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
+        var then = newValue.then;
+        if (newValue instanceof Promise) {
+          self._state = 3;
+          self._value = newValue;
+          finale(self);
+          return;
+        }
+        else if (typeof then === 'function') {
+          doResolve(bind(then, newValue), self);
+          return;
+        }
+      }
+      self._state = 1;
+      self._value = newValue;
+      finale(self);
+    }
+    catch (e) {
+      reject(self, e);
+    }
+  }
+
+  function reject (self, newValue) {
+    self._state = 2;
+    self._value = newValue;
+    finale(self);
+  }
+
+  function finale (self) {
+    if (self._state === 2 && self._deferreds.length === 0) {
+      Promise._immediateFn(function () {
+        if (!self._handled) {
+          Promise._unhandledRejectionFn(self._value);
+        }
+      });
+    }
+
+    for (var i = 0, len = self._deferreds.length; i < len; i++) {
+      handle(self, self._deferreds[i]);
+    }
+    self._deferreds = null;
+  }
+
+  function Handler (onFulfilled, onRejected, promise) {
+    this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
+    this.onRejected = typeof onRejected === 'function' ? onRejected : null;
+    this.promise = promise;
+  }
+
+  /**
+   * Take a potentially misbehaving resolver function and make sure
+   * onFulfilled and onRejected are only called once.
+   *
+   * Makes no guarantees about asynchrony.
+   */
+  function doResolve (fn, self) {
+    var done = false;
+    try {
+      fn(function (value) {
+        if (done) {
+          return;
+        }
+        done = true;
+        resolve(self, value);
+      }, function (reason) {
+        if (done) {
+          return;
+        }
+        done = true;
+        reject(self, reason);
+      });
+    }
+    catch (ex) {
+      if (done) {
+        return;
+      }
+      done = true;
+      reject(self, ex);
+    }
+  }
+
+  Promise.prototype['catch'] = function (onRejected) {
+    return this.then(null, onRejected);
+  };
+
+  Promise.prototype.then = function (onFulfilled, onRejected) {
+    var prom = new (this.constructor)(noop);
+
+    handle(this, new Handler(onFulfilled, onRejected, prom));
+    return prom;
+  };
+
+  Promise.all = function (arr) {
+    var args = Array.prototype.slice.call(arr);
+
+    return new Promise(function (resolve, reject) {
+      if (args.length === 0) {
+        return resolve([]);
+      }
+      var remaining = args.length;
+
+      function res (i, val) {
+        try {
+          if (val && (typeof val === 'object' || typeof val === 'function')) {
+            var then = val.then;
+            if (typeof then === 'function') {
+              then.call(val, function (val) {
+                res(i, val);
+              }, reject);
+              return;
+            }
+          }
+          args[i] = val;
+          if (--remaining === 0) {
+            resolve(args);
+          }
+        }
+        catch (ex) {
+          reject(ex);
+        }
+      }
+
+      for (var i = 0; i < args.length; i++) {
+        res(i, args[i]);
+      }
+    });
+  };
+
+  Promise.resolve = function (value) {
+    if (value && typeof value === 'object' && value.constructor === Promise) {
+      return value;
+    }
+
+    return new Promise(function (resolve) {
+      resolve(value);
+    });
+  };
+
+  Promise.reject = function (value) {
+    return new Promise(function (resolve, reject) {
+      reject(value);
+    });
+  };
+
+  Promise.race = function (values) {
+    return new Promise(function (resolve, reject) {
+      for (var i = 0, len = values.length; i < len; i++) {
+        values[i].then(resolve, reject);
+      }
+    });
+  };
+
+  // Use polyfill for setImmediate for performance gains
+  Promise._immediateFn = (typeof setImmediate === 'function' && function (fn) { setImmediate(fn); }) ||
+    function (fn) {
+      setTimeoutFunc(fn, 0);
+    };
+
+  Promise._unhandledRejectionFn = function _unhandledRejectionFn (err) {
+    if (typeof console !== 'undefined' && console) {
+      console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console
+    }
+  };
+
+  module.exports = Promise
+}
+else {
+  module.exports = global.Promise
+}

package/lib/queryShadowDom/README.md

@@ -0,0 +1,50 @@
+# Query Shadow DOM Element
+
+This file exposes multiple functions that can be used to query elements within the ShadowDOM. 
+
+```javascript
+  shadowQuerySelectorAll
+  // Returns Nodes matching with match selector.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. Root node to query for particular elements. |
+| `matchSelector` | `string` | **Required**. Criteria to select the elements in the dom starting with node as root element. |
+
+
+```javascript
+  findShadowRoots
+  // Returns a list of all the shadow roots found in the given root element and its descendants.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. The root node from which to start searching for shadow roots. |
+
+```javascript
+  filterShadowHosts
+  // Returns NodeFilter.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. Document node. |
+
+```javascript
+  findElementsInShadowDomByMatchSector
+  // returns a NodeList of all elements within the shadow DOM of the shadowElement parameter that match the matchSelector parameter.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. A DOM node that has a shadow root. |
+| `matchSelector` | `string` | **Required**. Criteria to select the elements in the dom starting with node as root element. |
+
+## Usage
+
+```javascript
+
+
+const { shadowQuerySelectorAll } = require('bv-ui-core/lib/queryShadowDomElement');
+
+const nodeList = shadowQuerySelectorAll(document, '[data-bv-show='reviews']')
+
+// ['div', 'div']
+```

package/lib/queryShadowDom/index.js

@@ -0,0 +1,93 @@
+/**
+* Function to deterimine whether given node is shadow host. 
+* @param {*} node Document node.
+* @returns NodeFilter 
+*/
+function filterShadowHosts (node) {
+  if (node && node.shadowRoot) {
+    return NodeFilter.FILTER_ACCEPT;
+  }
+  return NodeFilter.FILTER_SKIP;
+}
+
+/**
+ * The function finds all the shadow roots in a given root element and returns a list of them.
+ * @param node - The root element from which to start searching for shadow roots.
+ * @returns a list of all the shadow roots found in the given root element and its descendants.
+ */
+function findShadowRoots (node) {
+  
+  if (!node) {
+    return;
+  }
+
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, filterShadowHosts);
+  let listOfShadowRoots = [];
+  
+  // Tree walker will not determine the node. 
+  if (node.shadowRoot) {
+    listOfShadowRoots.push(node);
+    listOfShadowRoots = listOfShadowRoots.concat(findShadowRoots(node.shadowRoot));
+  }
+
+  // Traverse all the nodes.
+  while (walker.nextNode()) {
+    listOfShadowRoots.push(walker.currentNode);
+
+    if (walker.currentNode.shadowRoot) {
+      listOfShadowRoots = listOfShadowRoots.concat(findShadowRoots(walker.currentNode.shadowRoot));
+    }
+  
+  }
+  return listOfShadowRoots;
+}
+
+/**
+ * This function finds elements within a shadow DOM that match a given selector.
+ * @param node - A DOM element that has a shadow root. 
+ * @param matchSelector - Criteria to select the elements in the dom starting with element as root element.
+ * @returns The function `findElementsInShadowDomByMatchSector` returns a NodeList of all elements
+ * within the shadow DOM of the `shadowElement` parameter that match the `matchSelector` parameter.
+ */
+
+function findElementsInShadowDomByMatchSector (node, matchSelector) {
+  if (node && node.shadowRoot && matchSelector) {
+    return node.shadowRoot.querySelectorAll(matchSelector)
+  }
+}
+
+/**
+ * Finds elements in the DOM including open shadowDOM.
+ * @param {*} node Root element to query for particular elements 
+ * @param {*} matchSelector Criteria to select the elements in the dom starting with element as root element.
+ * @returns Nodes matching with match selector.
+ */
+function shadowQuerySelectorAll (node, matchSelector) {
+
+  /* Checks if both `element` and `matchSelector` are truthy values. If either of
+  them is falsy, it throws an error. */
+  if (!(node && matchSelector)) {
+    throw new Error(`Unable to find ${node} or ${matchSelector}`)
+  }
+
+  // Get the elements by query selector all.
+  const nodeList = node.querySelectorAll(matchSelector);
+  const shadowRoots = findShadowRoots(node);
+  let elements = [];
+
+  for (const rootElement of shadowRoots) {
+    const filteredElements = findElementsInShadowDomByMatchSector(rootElement, matchSelector);
+    if (filteredElements.length > 0) {
+      elements.push(...filteredElements);
+    }
+  }
+
+  return [...nodeList, ...elements];
+}
+
+module.exports = {
+  findShadowRoots,
+  filterShadowHosts,
+  shadowQuerySelectorAll,
+  findElementsInShadowDomByMatchSector
+}