feat: Use dom utils (bootstrap-vue#1017)

tmorehouse · web-flow · commit 5ca9fe3ec580 · 2017-09-08T00:40:16.000-03:00
* feat: dom utility methods

* Update index.js

* [tooltip.js] Use dom utils

* [dropdown.js] Use dom utils

* [scrollspy.js] Use dom utils

* feat(array mixin): Add polyfill for Array.find for IE

* [modal] use dom utils

* [popover.vue] Use dom utils

* [tooltip.vue] Use dom utils
diff --git a/lib/components/modal.vue b/lib/components/modal.vue
@@ -93,7 +93,8 @@
 <script>
     import bBtn from './button';
     import { listenOnRootMixin } from '../mixins';
-    import { from as arrayFrom } from '../utils/array'
+    import { from as arrayFrom, arrayFind } from '../utils/array';
+    import { isElement, isVisible, selectAll, select } from '../utils/dom';
 
     const FOCUS_SELECTOR = [
         'button:not([disabled])',
@@ -104,27 +105,12 @@
         '[tabindex]:not([disabled]):not(.disabled)'
     ].join(',');
 
-    // Determine if an HTML element is visible - Faster than CSS check
-    function isVisible(el) {
-        return el && (el.offsetWidth > 0 || el.offsetHeight > 0);
-    }
-
     // Find the first visible element contained in a given root element
     function findFirstVisible(root, selector) {
-        if (!root || !root.querySelectorAll || !selector) {
+        if (!isElement(root) || !selector) {
             return null;
         }
-        let els = arrayFrom(root.querySelectorAll(selector));
-
-        // IE 10 & 11 do not support native array.find()
-        // So we try native find first, then fall back to a loop
-        let el = els.find ? els.find(el => isVisible(el)) : null;
-        for (let i = 0; !el && i < els.length; i++) {
-            if (isVisible(els[i])) {
-                el = els[i];
-            }
-        }
-        return el;
+        return arrayFind(selectAll(selector, root), isVisible) || null;
     }
 
     export default {
@@ -143,7 +129,7 @@
         computed: {
             body() {
                 if (typeof document !== 'undefined') {
-                    return document.querySelector('body');
+                    return document.body;
                 }
             }
         },
@@ -357,7 +343,7 @@
                 if (el) {
                     if (typeof el === 'string') {
                         // CSS Selector
-                        el = document.querySelector(el);
+                        el = select(el);
                     }
                     if (el && el.$el && typeof el.$el.focus === 'function') {
                         // Component vm reference
diff --git a/lib/components/popover.vue b/lib/components/popover.vue
@@ -10,6 +10,7 @@
     import PopOver from '../classes/popover';
     import { isArray } from '../utils/array';
     import { assign } from '../utils/object';
+    import { isElement } from '../utils/dom';
     import { observeDom, warn } from '../utils';
 
     export default {
@@ -160,7 +161,7 @@
                 } else if (typeof target === 'object' && target.$el) {
                     // Component reference
                     return target.$el;
-                } else if (typeof target === 'object' && target.tagName) {
+                } else if (typeof target === 'object' && isElement(target)) {
                     // Element reference
                     return target;
                 }
diff --git a/lib/components/tooltip.vue b/lib/components/tooltip.vue
@@ -9,6 +9,7 @@
     import ToolTip from '../classes/tooltip';
     import { isArray } from '../utils/array';
     import { assign } from '../utils/object';
+    import { isElement } from '../utils/dom';
     import { observeDom, warn } from '../utils';
     
     export default {
@@ -150,7 +151,7 @@
                 } else if (typeof target === 'object' && target.$el) {
                     // Component reference
                     return target.$el;
-                } else if (typeof target === 'object' && target.tagName) {
+                } else if (typeof target === 'object' && isElement(target)) {
                     // Element reference
                     return target;
                 }
diff --git a/lib/utils/array.js b/lib/utils/array.js
@@ -78,6 +78,52 @@ if (!Array.from) {
     })();
 }
 
+// https://tc39.github.io/ecma262/#sec-array.prototype.find
+// Needed for IE support
+if (!Array.prototype.find) {
+    Object.defineProperty(Array.prototype, 'find', {
+        value: function(predicate) {
+            // 1. Let O be ? ToObject(this value).
+            if (this == null) {
+                throw new TypeError('"this" is null or not defined');
+            }
+
+            const o = Object(this);
+
+            // 2. Let len be ? ToLength(? Get(O, "length")).
+            const len = o.length >>> 0;
+
+            // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+            if (typeof predicate !== 'function') {
+                throw new TypeError('predicate must be a function');
+            }
+
+            // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+            const thisArg = arguments[1];
+
+            // 5. Let k be 0.
+            let k = 0;
+
+            // 6. Repeat, while k < len
+            while (k < len) {
+                // a. Let Pk be ! ToString(k).
+                // b. Let kValue be ? Get(O, Pk).
+                // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+                // d. If testResult is true, return kValue.
+                const kValue = o[k];
+                if (predicate.call(thisArg, kValue, k, o)) {
+                    return kValue;
+                }
+                // e. Increase k by 1.
+                k++;
+            }
+
+            // 7. Return undefined.
+            return undefined;
+        }
+    });
+}
+
 if (!Array.isArray) {
     Array.isArray = arg => Object.prototype.toString.call(arg) === "[object Array]";
 }
@@ -88,6 +134,7 @@ export const isArray = Array.isArray;
 
 // Instance
 export const arrayIncludes = (array, value) => array.indexOf(value) !== -1;
+export const arrayFind = (array, fn, thisArg) => array.find(fn, thisArg);
 export function concat() {
     return Array.prototype.concat.apply([], arguments);
 }
