@spothero/ui 15.0.0-beta.3 → 15.0.0

package/styles/utils/dom.js

@@ -1,428 +0,0 @@
-// import {document, window} from 'ssr-window';
-// import forEach from 'lodash/forEach';
-import isArray from 'lodash/isArray';
-// import isArrayLikeObject from 'lodash/isArrayLikeObject';
-import isString from 'lodash/isString';
-import includes from 'lodash/includes';
-// import CustomEvent from 'custom-event';
-// import EnvironmentUtils from '../environment/environment';
-
-/**
- * Utilities for working with the Document Object Model (DOM).
- * @module DOMUtils
- */
-const DOMUtils = {
-    // /**
-    //  * Returns the tag name of the specified element.
-    //  * @static
-    //  * @function tag
-    //  * @param {Element} el - The element to check the tag of.
-    //  * @param {Boolean} [lowercase=true] - Whether to normalize the tag name for comparison as lowercase.
-    //  * @example
-    //  * DOMUtils.tag(document.querySelector('.foo'));
-    //  * @returns {String} - The tag of the specified element.
-    //  */
-    // tag(el, lowercase = true) {
-    //     return lowercase ? el.nodeName.toLowerCase() : el.nodeName;
-    // },
-
-    /**
-     * Returns the element(s) matching the specified selector.
-     * @static
-     * @function el
-     * @param {String} selector - The selector of the element to query.
-     * @example
-     * DOMUtils.el('.foo');
-     * @returns {Element|Array} - The element or array of elements matching the selector.
-     */
-    el(selector) {
-        const els = document.querySelectorAll(selector);
-
-        if (els.length > 1) {
-            return els;
-        } else {
-            return els[0];
-        }
-    },
-
-    /**
-     * Returns the element's parent or the closest ancestor matching the specified selector if provided.
-     * @static
-     * @function parent
-     * @param {String|Element} item - The selector or element to find the parent of.
-     * @param {String} [parentSelector] - The selector of the ancestor to find.
-     * @example
-     * DOMUtils.parent('.foo', '.bar');
-     * @returns {Element} - The parent of the item.
-     */
-    parent(item, parentSelector) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-
-        if (!el) {
-            return;
-        }
-
-        if (parentSelector) {
-            const allParents = document.querySelectorAll(parentSelector);
-            let currentParent = el.parentNode;
-
-            while (currentParent && !includes(allParents, currentParent)) {
-                currentParent = currentParent.parentNode;
-            }
-
-            return currentParent;
-        } else {
-            return el.parentNode;
-        }
-    },
-
-    /**
-     * Returns the attribute of the specified element.
-     * @static
-     * @function attr
-     * @param {String|Element} item - The selector or element to query.
-     * @param {String} attribute - The attribute to query.
-     * @example
-     * DOMUtils.attr('.foo', 'data-baz');
-     * @returns {String} - The value of the attribute.
-     */
-    attr(item, attribute) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-
-        if (!el) {
-            return;
-        }
-
-        return el.getAttribute(attribute);
-    },
-
-    /**
-     * Adds a class to the specified element.
-     * @static
-     * @function addClass
-     * @param {String|Element} item - The selector or element to add the class to.
-     * @param {String|Array.<String>} className - The class(es) to add.
-     * @example
-     * DOMUtils.addClass(evt.currentTarget, 'foo');
-     * @returns {void}
-     */
-    addClass(item, className) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-
-        if (!el) {
-            return;
-        }
-
-        const classes = isString(className) ? className.split(' ') : className;
-
-        classes.forEach(itemClassName => {
-            el.classList.add(itemClassName);
-        });
-    },
-
-    /**
-     * Removes a class from the specified element.
-     * @static
-     * @function removeClass
-     * @param {String|Element} item - The selector or element to remove the class from.
-     * @param {String|Array.<String>} className - The class(es) to remove.
-     * @example
-     * DOMUtils.removeClass(evt.currentTarget, 'foo');
-     * @returns {void}
-     */
-    removeClass(item, className) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-
-        if (!el) {
-            return;
-        }
-
-        const classes = isString(className) ? className.split(' ') : className;
-
-        classes.forEach(itemClassName => {
-            el.classList.remove(itemClassName);
-        });
-    },
-
-    /**
-     * Checks if an element has a specified class.
-     * @static
-     * @function hasClass
-     * @param {String|Element} item - The selector or element to check.
-     * @param {String} className - The class to check for.
-     * @example
-     * DOMUtils.hasClass(evt.currentTarget, 'foo');
-     * @returns {Boolean} - Whether the element has the class or not.
-     */
-    hasClass(item, className) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-
-        if (!el) {
-            return false;
-        }
-
-        return el.classList.contains(className) || false;
-    },
-
-    // /**
-    //  * Toggles a class on or off for the specified element.
-    //  * @static
-    //  * @function toggleClass
-    //  * @param {String|Element} item - The selector or element to toggle the class on.
-    //  * @param {String} className - The class to toggle.
-    //  * @example
-    //  * DOMUtils.toggleClass(evt.currentTarget, 'foo');
-    //  * @returns {void}
-    //  */
-    // toggleClass(item, className) {
-    //     if (DOMUtils.hasClass(item, className)) {
-    //         DOMUtils.removeClass(item, className);
-    //     } else {
-    //         DOMUtils.addClass(item, className);
-    //     }
-    // },
-
-    /**
-     * Get the height of the specified element.
-     * @static
-     * @function height
-     * @param {String|Element} item - The selector or element to find the height of.
-     * @param {Boolean} [includeMargin=true] - Whether to include the margins in the calculation effectively getting the outerHeight.
-     * @param {Boolean} [includePadding=true] - Whether to include the padding in the calculation.
-     * @example
-     * DOMUtils.height('.foo');
-     * @returns {Number} - The height of the element.
-     */
-    height(item, includeMargin = true, includePadding = true) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-
-        if (!el) {
-            return 0;
-        }
-
-        const {marginTop, marginBottom, paddingTop, paddingBottom} =
-            window.getComputedStyle(el);
-        let height = el.offsetHeight;
-
-        if (includeMargin) {
-            height += parseInt(marginTop, 10) + parseInt(marginBottom, 10);
-        }
-
-        if (!includePadding) {
-            height -= parseInt(paddingTop, 10) + parseInt(paddingBottom, 10);
-        }
-
-        return height;
-    },
-
-    // /**
-    //  * Get the width of the specified element.
-    //  * @static
-    //  * @function width
-    //  * @param {String|Element} item - The selector or element to find the width of.
-    //  * @param {Boolean} [includeMargin=true] - Whether to include the margins in the calculation effectively getting the outerWidth.
-    //  * @param {Boolean} [includePadding=true] - Whether to include the padding in the calculation.
-    //  * @example
-    //  * DOMUtils.width('.foo');
-    //  * @returns {Number} - The width of the element.
-    //  */
-    // width(item, includeMargin = true, includePadding = true) {
-    //     const el = isString(item) ? DOMUtils.el(item) : item;
-    //
-    //     if (!el) {
-    //         return 0;
-    //     }
-    //
-    //     const {
-    //         marginLeft,
-    //         marginRight,
-    //         paddingLeft,
-    //         paddingRight,
-    //     } = window.getComputedStyle(el);
-    //     let width = el.offsetWidth;
-    //
-    //     if (includeMargin) {
-    //         width += parseInt(marginLeft, 10) + parseInt(marginRight, 10);
-    //     }
-    //
-    //     if (!includePadding) {
-    //         width -= parseInt(paddingLeft, 10) + parseInt(paddingRight, 10);
-    //     }
-    //
-    //     return width;
-    // },
-
-    /**
-     * Removes element(s) from the DOM.
-     * @static
-     * @function remove
-     * @param {String|Element|Array} items - The selector or element(s) to remove from the DOM.
-     * @example
-     * DOMUtils.remove('.class-to-remove');
-     * @returns {void}
-     */
-    remove(items) {
-        const el = isString(items) ? DOMUtils.el(items) : items;
-
-        if (!el) {
-            return;
-        }
-
-        if (isArray(el) || el instanceof NodeList) {
-            const len = el.length;
-            let i = 0;
-
-            for (i; i < len; ++i) {
-                el.outerHTML = '';
-            }
-        } else {
-            el.outerHTML = '';
-        }
-    },
-    //
-    // /**
-    //  * Adds event listener for an element or NodeList.
-    //  * @static
-    //  * @function addEventListener
-    //  * @param {Object} data - The data to pass to the function.
-    //  * @param {String} data.event - The DOM event to take action on.
-    //  * @param {String|Element} [data.target='document'] - The selector or element to attach the event to.
-    //  * @param {Function} data.handler - The function to run when the event triggers.
-    //  * @example
-    //  * DOMUtils.addEventListener({target: '.foo', event: 'click', handler: functionName});
-    //  * @returns {void}
-    //  */
-    // addEventListener({event, target = 'document', handler}) {
-    //     if (target && target !== 'document') {
-    //         const el = isString(target) ? DOMUtils.el(target) : target;
-    //
-    //         if (!el) {
-    //             return;
-    //         }
-    //
-    //         if (isArrayLikeObject(el)) {
-    //             forEach(el, thisEl => {
-    //                 thisEl.addEventListener(event, handler);
-    //             });
-    //         } else {
-    //             el.addEventListener(event, handler);
-    //         }
-    //     } else {
-    //         document.addEventListener(event, handler, {capture: true});
-    //     }
-    // },
-    //
-    // /**
-    //  * Removes event listener for an element or NodeList.
-    //  * @static
-    //  * @function removeEventListener
-    //  * @param {Object} data - The data to pass to the function.
-    //  * @param {String} data.event - The DOM event to remove.
-    //  * @param {String|Element} [data.target='document'] - The selector or element to remove the event from.
-    //  * @param {Function} data.handler - The function that is triggered to handle the event.
-    //  * @example
-    //  * DOMUtils.removeEventListener({target: '.foo', event: 'click', handler: functionName});
-    //  * @returns {void}
-    //  */
-    // removeEventListener({event, target = 'document', handler}) {
-    //     if (target && target !== 'document') {
-    //         const el = isString(target) ? DOMUtils.el(target) : target;
-    //
-    //         if (!el) {
-    //             return;
-    //         }
-    //
-    //         if (isArrayLikeObject(el)) {
-    //             forEach(el, thisEl => {
-    //                 thisEl.removeEventListener(event, handler);
-    //             });
-    //         } else {
-    //             el.removeEventListener(event, handler);
-    //         }
-    //     } else {
-    //         document.removeEventListener(event, handler);
-    //     }
-    // },
-    //
-    // /**
-    //  * Creates and dispatches a custom event, with or without data.
-    //  * @static
-    //  * @function sendCustomEvent
-    //  * @param {String} eventName - The name for the custom event.
-    //  * @param {Object} [data=null] - The data to send with the custom event.
-    //  * @example
-    //  * DOMUtils.sendCustomEvent('open-my-mind', {mind: 'free'});
-    //  * @returns {void}
-    //  */
-    // sendCustomEvent(eventName, data = null) {
-    //     if (!eventName) {
-    //         throw new Error(
-    //             `The 'eventName' is required when sending custom events.`
-    //         );
-    //     }
-    //
-    //     const customEvent = new CustomEvent(eventName, {detail: data});
-    //
-    //     document.dispatchEvent(customEvent);
-    // },
-
-    /**
-     * Gets the offset of an element relative to the document.
-     * @static
-     * @function getDocumentOffset
-     * @param {String|Element} item - The selector or element to get the offset of.
-     * @example
-     * DOMUtils.getDocumentOffset('.foo');
-     * @returns {Object} - The top and left values of the offset.
-     */
-    getDocumentOffset(item) {
-        const el = isString(item) ? DOMUtils.el(item) : item;
-        const scrollLeft =
-            window.pageXOffset || document.documentElement.scrollLeft;
-        const scrollTop =
-            window.pageYOffset || document.documentElement.scrollTop;
-
-        const rect = el ? el.getBoundingClientRect() : {top: 0, left: 0};
-
-        return {
-            top: rect.top + scrollTop,
-            left: rect.left + scrollLeft,
-        };
-    },
-    //
-    // /**
-    //  * Loads a script into an element in the document. Pass a fully qualified, exact URL to enable proper matching against a pre-existing script of the same path.
-    //  * @static
-    //  * @function loadScript
-    //  * @param {String} src - The exact script path to load.
-    //  * @param {String} [appendTo='head'] - Where to append the script ('head', 'body') in the document.
-    //  * @example
-    //  * DOMUtils.loadScript({src: 'https://js.stripe.com/v3/'});
-    //  * @returns {Promise} - The promise that is either fulfilled or rejected as a result of loading the script.
-    //  */
-    // loadScript({src, appendTo = 'head'}) {
-    //     if (!EnvironmentUtils.isBrowser()) {
-    //         return;
-    //     }
-    //
-    //     const isDuplicate = [...document.querySelectorAll('script')].some(
-    //         script => {
-    //             return script.src === src;
-    //         }
-    //     );
-    //
-    //     return new Promise((resolve, reject) => {
-    //         const s = document.createElement('script');
-    //
-    //         s.src = src;
-    //         s.onload = resolve;
-    //         s.onerror = reject;
-    //
-    //         if (!isDuplicate) {
-    //             document[appendTo].appendChild(s);
-    //         }
-    //     });
-    // },
-};
-
-export default DOMUtils;