@amimpact/willy-utils 4.4.0 → 4.5.1

package/{dist/includes/tinyduration.js → src/includes/tinyduration.ts}

@@ -1,7 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.serialize = exports.parse = exports.InvalidDurationError = void 0;
-var units = [
+/**
+ * https://github.com/MelleB/tinyduration
+ * v 3.2.0
+ */
+interface DurationValues {
+    years?: number;
+    months?: number;
+    weeks?: number;
+    days?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+}
+
+export type Duration = {
+    negative?: boolean;
+} & DurationValues;
+
+const units: Array<{ unit: keyof DurationValues; symbol: string }> = [
     { unit: 'years', symbol: 'Y' },
     { unit: 'months', symbol: 'M' },
     { unit: 'weeks', symbol: 'W' },
@@ -10,95 +25,121 @@ var units = [
     { unit: 'minutes', symbol: 'M' },
     { unit: 'seconds', symbol: 'S' },
 ];
+
 // Construction of the duration regex
 // NOTE: IE11 kan niet overweg met groups in een regex
 // const r = (name: string, unit: string): string =>
 //     `((?<${name}>-?\\d*[\\.,]?\\d+)${unit})?`;
-var r = function (name, unit) { return "((\\d*[\\.,]?\\d+)".concat(unit, ")?"); };
-var durationRegex = new RegExp([
-    'P',
-    r('years', 'Y'),
-    r('months', 'M'),
-    r('weeks', 'W'),
-    r('days', 'D'),
-    '(T',
-    r('hours', 'H'),
-    r('minutes', 'M'),
-    r('seconds', 'S'),
-    ')?', // end optional time
-].join(''));
-function parseNum(s) {
+const r = (name: string, unit: string): string => `((\\d*[\\.,]?\\d+)${unit})?`;
+
+const durationRegex = new RegExp(
+    [
+        'P',
+        r('years', 'Y'),
+        r('months', 'M'),
+        r('weeks', 'W'),
+        r('days', 'D'),
+        '(T',
+        r('hours', 'H'),
+        r('minutes', 'M'),
+        r('seconds', 'S'),
+        ')?', // end optional time
+    ].join(''),
+);
+
+function parseNum(s: string): number | undefined {
     if (s === '' || s === undefined || s === null) {
         return undefined;
     }
+
     return parseFloat(s.replace(',', '.'));
 }
-exports.InvalidDurationError = new Error('Invalid duration');
-function parse(durationStr) {
-    var match = durationRegex.exec(durationStr);
+
+export const InvalidDurationError = new Error('Invalid duration');
+
+export function parse(durationStr: string): Duration {
+    const match = durationRegex.exec(durationStr);
+
     if (!match) {
-        throw exports.InvalidDurationError;
+        throw InvalidDurationError;
     }
-    var empty = true;
-    var values = {};
-    for (var _i = 0, units_1 = units; _i < units_1.length; _i++) {
-        var _a = units_1[_i], unit = _a.unit, symbol = _a.symbol;
+
+    let empty = true;
+    const values: DurationValues = {};
+    for (const { unit, symbol } of units) {
         // NOTE: IE11 kan niet overweg met groups in een regex
         // if (match.groups[unit]) {
         //     empty = false;
         //     values[unit] = parseNum(match.groups[unit]);
         // }
+
         // Bovenstaande manier met named groups geeft een fout in IE11
         // Dus maar zelf een extra loop typen en checken hoe de object opgebouwd moet worden
         // Eerste match overslaan
-        for (var index = 1; index < match.length - 1; index++) {
-            var str = match[index];
+        for (let index = 1; index < match.length - 1; index++) {
+            const str = match[index];
+
             if (str) {
-                var strippedSymbol = str.charAt(str.length - 1);
+                const strippedSymbol = str.charAt(str.length - 1);
+
                 if (strippedSymbol === symbol) {
                     empty = false;
+
                     // 2 x een symbool 'M', deze even handmatig checken
-                    var u = unit;
+                    let u = unit;
                     if (symbol === 'M') {
                         u = index === 3 ? 'months' : 'minutes';
                     }
+
                     values[u] = parseNum(str.substring(0, str.length - 1));
                 }
             }
         }
     }
+
     if (empty) {
-        throw exports.InvalidDurationError;
+        throw InvalidDurationError;
     }
-    var duration = values;
+
+    const duration: Duration = values;
     // if (match.groups.negative) {
     //     duration.negative = true;
     // }
+
     return duration;
 }
-exports.parse = parse;
-var s = function (number, component) {
+
+const s = (
+    number: number | undefined,
+    component: string,
+): string | undefined => {
     if (!number) {
         return undefined;
     }
-    var numberAsString = number.toString();
-    var exponentIndex = numberAsString.indexOf('e');
+
+    let numberAsString = number.toString();
+    const exponentIndex = numberAsString.indexOf('e');
     if (exponentIndex > -1) {
-        var magnitude = parseInt(numberAsString.slice(exponentIndex + 2), 10);
+        const magnitude = parseInt(numberAsString.slice(exponentIndex + 2), 10);
         numberAsString = number.toFixed(magnitude + exponentIndex - 2);
     }
+
     return numberAsString + component;
 };
-function serialize(duration) {
-    if (!duration.years &&
+
+export function serialize(duration: Duration): string {
+    if (
+        !duration.years &&
         !duration.months &&
         !duration.weeks &&
         !duration.days &&
         !duration.hours &&
         !duration.minutes &&
-        !duration.seconds) {
+        !duration.seconds
+    ) {
         return 'PT0S';
     }
+
     return [
         // duration.negative && '-',
         'P',
@@ -114,4 +155,3 @@ function serialize(duration) {
         .filter(Boolean)
         .join('');
 }
-exports.serialize = serialize;

package/src/index.ts

@@ -0,0 +1,61 @@
+import { createCookie, readCookie, eraseCookie } from './cookie';
+import {
+    formatCraftDate,
+    formatDateFromNow,
+    formatNewDate,
+    formatUTCDate,
+    parseISODuration,
+} from './date';
+import { convertObjectToFormData } from './form';
+import {
+    bytesToSize,
+    capitalize,
+    checkForScrollbars,
+    convertHexToRGBA,
+    downloadFile,
+    getNestedSet,
+    getUrlsFromString,
+    isEmpty,
+    isHoverableDevice,
+    isPlainObject,
+    isTouchDevice,
+    isValidUrl,
+    observeResize,
+    wrap,
+} from './misc';
+import { $, $$, getParents } from './selectors';
+import { isCraftActionUrl, isInternalLink, isExternalUrl, isAsset, slugify } from './url';
+
+export {
+    $,
+    $$,
+    bytesToSize,
+    capitalize,
+    checkForScrollbars,
+    convertHexToRGBA,
+    createCookie,
+    downloadFile,
+    eraseCookie,
+    formatCraftDate,
+    convertObjectToFormData,
+    formatDateFromNow,
+    formatNewDate,
+    formatUTCDate,
+    getNestedSet,
+    getParents,
+    getUrlsFromString,
+    isAsset,
+    isCraftActionUrl,
+    isEmpty,
+    isExternalUrl,
+    isHoverableDevice,
+    isInternalLink,
+    isPlainObject,
+    isTouchDevice,
+    isValidUrl,
+    observeResize,
+    parseISODuration,
+    readCookie,
+    slugify,
+    wrap,
+};

package/src/misc.ts

@@ -0,0 +1,285 @@
+declare global {
+    interface Navigator {
+        msSaveBlob?: (blob: any, defaultName?: string) => boolean;
+        msSaveOrOpenBlob: (blob: any, defaultName?: string) => boolean;
+    }
+}
+
+/**
+ * Toon mooier bestandsformaat
+ * @param {string | number} bytes
+ */
+export const bytesToSize = (bytes: number) => {
+    if (typeof bytes === 'string') {
+        bytes = parseInt(bytes);
+    }
+
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    if (bytes === 0) return '0 Byte';
+
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return Math.round(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
+};
+
+/**
+ * Eerste letter van een string een hoofdletter maken
+ * @param {string} str
+ */
+export const capitalize = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+/**
+ * Check of een HTML element horizontale of verticale scrollbars heeft
+ * als dat zo is, dan wordt een class op het element gezet.
+ *
+ * @param {HTMLElement} el
+ * @param {String} dir // vertical of horizontal
+ */
+export const checkForScrollbars = (el: HTMLElement, dir: String = 'vertical') => {
+    if (!el) {
+        return;
+    }
+
+    const direction = dir === 'vertical' ? 'scrollTop' : 'scrollLeft';
+
+    let hasScrollbar = !!el[direction];
+
+    if (!hasScrollbar) {
+        el[direction] = 1;
+        hasScrollbar = !!el[direction];
+        el[direction] = 0;
+    }
+
+    if (hasScrollbar) {
+        el.classList.add(`has-${dir}-scrollbar`);
+    } else {
+        el.classList.remove(`has-${dir}-scrollbar`);
+    }
+};
+
+/**
+ * Hex kleurcode converten naar rgba
+ *
+ * @param {string} hexCode
+ * @param {number} opacity
+ */
+export const convertHexToRGBA = (hexCode: string, opacity = 1) => {
+    let hex = hexCode.replace('#', '');
+
+    if (hex.length === 3) {
+        hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+    }
+
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    /* Backward compatibility for whole number based opacity values. */
+    if (opacity > 1 && opacity <= 100) {
+        opacity = opacity / 100;
+    }
+
+    return `rgba(${r},${g},${b},${opacity})`;
+};
+
+/**
+ * Downloaden van een bestand
+ *
+ * @param {any} data
+ * @param {string} fileName
+ */
+export const downloadFile = (data: any, fileName: string) => {
+    if (typeof window.navigator.msSaveBlob !== 'undefined') {
+        window.navigator.msSaveOrOpenBlob(new Blob([data]), fileName);
+    } else {
+        let fileURL;
+        if (isValidUrl(data)) {
+            fileURL = data;
+        } else {
+            fileURL = window.URL.createObjectURL(new Blob([data]));
+        }
+
+        const fileLink = document.createElement('a');
+        fileLink.href = fileURL;
+        fileLink.setAttribute('download', fileName);
+        document.body.appendChild(fileLink);
+        fileLink.click();
+    }
+};
+
+/**
+ * Flat structure array ombouwen naar een array met children
+ * @param {array} entries
+ * @param {number} level
+ * @param {number | string} left
+ * @param {number | string} right
+ */
+export const getNestedSet = (entries: any[] = [], level: number = 1, left: any, right: any) => {
+    return entries
+        .filter((item) => {
+            return (
+                parseFloat(item.level) === level &&
+                ((typeof left === 'undefined' && typeof right === 'undefined') ||
+                    (parseFloat(item.lft) > left && parseFloat(item.rgt) < right))
+            );
+        })
+        .map((item) => {
+            const returnItem = item;
+
+            returnItem['children'] = getNestedSet(
+                entries,
+                parseFloat(item.level) + 1,
+                parseFloat(item.lft),
+                parseFloat(item.rgt),
+            );
+
+            return returnItem;
+        });
+};
+
+/**
+ * Urls uit een string halen
+ * @param {string} content - html
+ */
+export const getUrlsFromString = (content: string) => {
+    const regex =
+        /(https?|ftp|file):\/\/([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?)/gi;
+
+    const m = content.match(regex);
+
+    return m || null;
+};
+
+/**
+ * Bepalen of een waarde leeg is
+ *
+ * @param {any} value
+ * @returns {boolean}
+ */
+export const isEmpty = (value): boolean => {
+    if (Array.isArray(value)) {
+        return !value.length;
+    }
+
+    if (isPlainObject(value)) {
+        return !Object.keys(value).length;
+    }
+
+    if (Number.isNaN(value)) {
+        return false;
+    }
+
+    return !value;
+};
+
+/**
+ * Bepalen of jouw device hover ondersteunt
+ *
+ * @returns {boolean}
+ */
+export const isHoverableDevice = (): boolean => {
+    return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+};
+
+/**
+ * Bekijken of een waarde een object is
+ * https://github.com/reduxjs/redux/blob/master/src/utils/isPlainObject.ts
+ *
+ * @param {any} value - Waarde welke je wilt checken of het een object is
+ * @returns {boolean}
+ */
+export const isPlainObject = (value: any): boolean => {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+
+    let proto = value;
+
+    while (Object.getPrototypeOf(proto) !== null) {
+        proto = Object.getPrototypeOf(proto);
+    }
+
+    return Object.getPrototypeOf(value) === proto;
+};
+
+/**
+ * Bepalen of je gebruikt maakt van een touchscreen
+ * https://gist.github.com/esedic/39a16a7521d42ae205203e3d40dc19f5
+ *
+ * @returns {boolean}
+ */
+export const isTouchDevice = (): boolean => {
+    let result = false;
+
+    if (window.PointerEvent && 'maxTouchPoints' in navigator) {
+        // if Pointer Events are supported, just check maxTouchPoints
+        if (navigator.maxTouchPoints > 0) {
+            result = true;
+        }
+    } else {
+        // no Pointer Events...
+        if (window.matchMedia && window.matchMedia('(any-pointer:coarse)').matches) {
+            // check for any-pointer:coarse which mostly means touchscreen
+            result = true;
+        } else if (window.TouchEvent || 'ontouchstart' in window) {
+            // last resort - check for exposed touch events API / event handler
+            result = true;
+        }
+    }
+
+    return result;
+};
+
+/**
+ * Bekijken of een waarde url is
+ *
+ * @param {any} urlString - Waarde welke je wilt checken of het een url is
+ * @returns {boolean}
+ */
+export const isValidUrl = (urlString: any) => {
+    if (typeof urlString !== 'string') {
+        return false;
+    }
+
+    const urlPattern = new RegExp(
+        '^(https?:\\/\\/)?' + // validate protocol
+            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
+            '((\\d{1,3}\\.){3}\\d{1,3}))' + // validate OR ip (v4) address
+            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+            '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
+            '(\\#[-a-z\\d_]*)?$',
+        'i',
+    ); // validate fragment locator
+    return !!urlPattern.test(urlString);
+};
+
+/**
+ * Resize observer; checkt of een HTML element zijn dimensies veranderen
+ * en zodra dat gebeurt wordt de callback functie gecalled.
+ *
+ * @param {HTMLElement} el
+ * @param {Function} callback
+ */
+export const observeResize = (element: HTMLElement, callback: Function) => {
+    const resizeObserver = new ResizeObserver(() => {
+        callback(element);
+    });
+
+    if (element) {
+        resizeObserver.observe(element);
+    }
+};
+
+/**
+ * Wrap een element in een nieuw element
+ *
+ * @param {HTMLElement} el
+ * @param {HTMLElement} wrapper
+ */
+export const wrap = (el: HTMLElement, wrapper: HTMLElement) => {
+    if (el.parentNode) {
+        el.parentNode.insertBefore(wrapper, el);
+        wrapper.appendChild(el);
+    }
+};

package/{dist/selectors.js → src/selectors.ts}

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getParents = exports.$$ = exports.$ = void 0;
 /**
  * Selecteer eerste item wat je tegenkomt
  *
@@ -8,11 +5,9 @@ exports.getParents = exports.$$ = exports.$ = void 0;
  * @param {*} [containerElement=document] - Element waarin hij moet selecteren
  * @returns {(HTMLElement|null)}
  */
-var $ = function (selector, containerElement) {
-    if (containerElement === void 0) { containerElement = document; }
-    return containerElement.querySelector(selector);
-};
-exports.$ = $;
+export const $ = (selector: string, containerElement: any = document): HTMLElement | null =>
+    containerElement.querySelector(selector);
+
 /**
  * Selecteer alle items
  *
@@ -20,11 +15,9 @@ exports.$ = $;
  * @param {*} [containerElement=document] - Element waarin hij moet selecteren
  * @returns {HTMLElement[]}
  */
-var $$ = function (selector, containerElement) {
-    if (containerElement === void 0) { containerElement = document; }
-    return Array.prototype.slice.apply(containerElement.querySelectorAll(selector));
-};
-exports.$$ = $$;
+export const $$ = (selector: string, containerElement: any = document): HTMLElement[] =>
+    Array.prototype.slice.apply(containerElement.querySelectorAll(selector));
+
 /**
  * Haal parents van een element op
  *
@@ -32,20 +25,22 @@ exports.$$ = $$;
  * @param {string} [parentSelector] - Een selector waar hij aan moet voldoen.
  * Als deze niet wordt meegegeven dan geeft hij alle parents terug
  */
-var getParents = function (el, parentSelector) {
-    if (parentSelector === void 0) { parentSelector = ''; }
-    var parents = [];
-    var p = el.parentElement;
+export const getParents = (el: HTMLElement, parentSelector: string = '') => {
+    const parents: HTMLElement[] = [];
+    let p = el.parentElement;
+
     // Tot de body omhoog bubbelen
     while (p && p.tagName !== 'BODY') {
-        var o = p;
+        const o = p;
+
         // Als er geen selector is meegegeven, dan het element toevoegen
         // Of als er een selector is meegegeven en hij matcht, dan het element toevoegen
         if (parentSelector === '' || o.matches(parentSelector)) {
             parents.push(o);
         }
+
         p = o.parentElement;
     }
+
     return parents;
 };
-exports.getParents = getParents;