@blackbyte/sugar 1.0.0-beta.1

package/dist/js/dom/when/whenInteract.js

@@ -0,0 +1,93 @@
+/**
+ * @name            whenInteract
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Wait that an interaction is made with the passed element like "focus", "focusIn", "pointerover", etc...
+ *
+ * @param 		{HTMLElement} 		                  $elm 	                  The html element you want to monitor
+ * @param     {Partial<IInteractionSettings>}     [settings={}]           Some settings to configure your interaction detection
+ * @return 		{Promise<HTMLElement>} 					                            A promise that will be resolved when an interaction has been made
+ *
+ * @setting         {boolean}           [pointerover=true]         Specify if you want to detect the pointerover or not
+ * @setting         {boolean}           [pointerout=true]          Specify if you want to detect the pointerout or not
+ * @setting         {boolean}           [pointerdown=true]         Specify if you want to detect the pointerdown or not
+ * @setting         {boolean}           [touchstart=true]          Specify if you want to detect the touchstart or not
+ * @setting         {boolean}           [touchend=true]            Specify if you want to detect the touchend or not
+ * @setting         {boolean}           [focus=true]               Specify if you want to detect the focus or not
+ *
+ * @snippet         whenInteract($1)
+ * whenInteract($1).then(\$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { whenInteract } from '@blackbyte/sugar/dom'
+ * whenInteract(myCoolElement).then($elm => {
+ *      // do something...
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenInteract(elm, settings) {
+    return new Promise((resolve, reject) => {
+        const finalSettings = Object.assign({ pointerover: true, pointerout: true, pointerdown: true, touchstart: true, touchend: true, focus: true }, (settings !== null && settings !== void 0 ? settings : {}));
+        function interacted(interaction) {
+            // resolving the promise
+            resolve(interaction);
+            elm.removeEventListener('pointerover', pointerover);
+            elm.removeEventListener('pointerout', pointerout);
+            elm.removeEventListener('pointerdown', pointerdown);
+            elm.removeEventListener('touchstart', touchstart);
+            elm.removeEventListener('touchend', touchend);
+            elm.removeEventListener('focus', focus);
+            elm.removeEventListener('focusin', focus);
+        }
+        function pointerover(e) {
+            interacted('pointerover');
+        }
+        if (finalSettings.pointerover) {
+            elm.addEventListener('pointerover', pointerover);
+        }
+        function pointerout(e) {
+            interacted('pointerout');
+        }
+        if (finalSettings.pointerout) {
+            elm.addEventListener('pointerout', pointerout);
+        }
+        function pointerdown(e) {
+            interacted('pointerdown');
+        }
+        if (finalSettings.pointerdown) {
+            elm.addEventListener('pointerdown', pointerdown);
+        }
+        function touchstart(e) {
+            interacted('touchstart');
+        }
+        if (finalSettings.touchstart) {
+            elm.addEventListener('touchstart', touchstart, {
+                passive: true,
+            });
+        }
+        function touchend(e) {
+            interacted('touchend');
+        }
+        if (finalSettings.touchend) {
+            elm.addEventListener('touchend', touchend);
+        }
+        function focus(e) {
+            interacted('focus');
+        }
+        if (finalSettings.focus === true) {
+            elm.addEventListener('focus', focus);
+            elm.addEventListener('focusin', focus);
+        }
+    });
+}
+//# sourceMappingURL=whenInteract.js.map

package/dist/js/dom/when/whenInteract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenInteract.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenInteract.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAWH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,GAAgB,EAChB,QAAyC;IAEzC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,aAAa,mBACjB,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,IAAI,IACR,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CACpB,CAAC;QAEF,SAAS,UAAU,CAAC,WAAW;YAC7B,wBAAwB;YACxB,OAAO,CAAC,WAAW,CAAC,CAAC;YAErB,GAAG,CAAC,mBAAmB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;YACpD,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;YAClD,GAAG,CAAC,mBAAmB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;YACpD,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;YAClD,GAAG,CAAC,mBAAmB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAC9C,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC5C,CAAC;QAED,SAAS,WAAW,CAAC,CAAC;YACpB,UAAU,CAAC,aAAa,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC;YAC9B,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC;QAED,SAAS,UAAU,CAAC,CAAC;YACnB,UAAU,CAAC,YAAY,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,aAAa,CAAC,UAAU,EAAE,CAAC;YAC7B,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;QACjD,CAAC;QAED,SAAS,WAAW,CAAC,CAAC;YACpB,UAAU,CAAC,aAAa,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC;YAC9B,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC;QAED,SAAS,UAAU,CAAC,CAAC;YACnB,UAAU,CAAC,YAAY,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,aAAa,CAAC,UAAU,EAAE,CAAC;YAC7B,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,EAAE;gBAC7C,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;QAED,SAAS,QAAQ,CAAC,CAAC;YACjB,UAAU,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;QACD,IAAI,aAAa,CAAC,QAAQ,EAAE,CAAC;YAC3B,GAAG,CAAC,gBAAgB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC;QAED,SAAS,KAAK,CAAC,CAAC;YACd,UAAU,CAAC,OAAO,CAAC,CAAC;QACtB,CAAC;QACD,IAAI,aAAa,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACjC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACrC,GAAG,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/when/whenLinkLoaded.d.ts

@@ -0,0 +1 @@
+export default function whenLinkLoaded($link: HTMLLinkElement, cb?: Function): Promise<HTMLLinkElement>;

package/dist/js/dom/when/whenLinkLoaded.js

@@ -0,0 +1,73 @@
+/**
+ * @name            whenLinkLoaded
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Wait until the passed HTMLLinkElement is fully loaded
+ *
+ * @feature       Promise based API
+ *
+ * @param 		{HTMLLinkElement} 			$link  		    The link tag to check the loading state
+ * @return 		{Promise} 								            The promise that will be resolved
+ *
+ * @todo      tests
+ *
+ * @snippet         whenLinkLoaded($1)
+ * whenLinkLoaded($1).then(\$elm => {
+ *      $2
+ * });
+ *
+ * @example  	js
+ * import { whenLinkLoaded } from '@blackbyte/sugar/dom'
+ * whenLinkLoaded(myCoolHTMLLinlElement).then($link => {
+ * 		// do something when the link is loaded
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+function alreadyLoaded(link) {
+    var _a;
+    const href = link.href;
+    let result = false;
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        if (document.styleSheets[i].href &&
+            ((_a = document.styleSheets[i].href) === null || _a === void 0 ? void 0 : _a.match(href))) {
+            // the css is already loaded
+            result = true;
+        }
+        else if (i == document.styleSheets.length - 1) {
+            // Fallback. There is no request for the css file.
+        }
+    }
+    return result;
+}
+export default function whenLinkLoaded($link, cb) {
+    return new Promise((resolve, reject) => {
+        // check if image is already loaded
+        if (alreadyLoaded($link)) {
+            // resolve promise
+            resolve($link);
+            // call the cb if exist
+            cb === null || cb === void 0 ? void 0 : cb($link);
+        }
+        else {
+            const img = document.createElement('img');
+            // wait until loaded
+            // we load the css into an image
+            // when the image is in error more
+            // that mean that the css is loaded
+            img.addEventListener('error', (e) => {
+                // resolve the promise
+                resolve($link);
+                // cb if exist
+                cb === null || cb === void 0 ? void 0 : cb($link);
+            });
+            // set url
+            img.src = $link.href;
+        }
+    });
+}
+//# sourceMappingURL=whenLinkLoaded.js.map

package/dist/js/dom/when/whenLinkLoaded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenLinkLoaded.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenLinkLoaded.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,aAAa,CAAC,IAAqB;;IAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrD,IACE,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI;aAC5B,MAAA,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,0CAAE,KAAK,CAAC,IAAI,CAAC,CAAA,EACzC,CAAC;YACD,4BAA4B;YAC5B,MAAM,GAAG,IAAI,CAAC;QAChB,CAAC;aAAM,IAAI,CAAC,IAAI,QAAQ,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChD,kDAAkD;QACpD,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,KAAsB,EACtB,EAAa;IAEb,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,mCAAmC;QACnC,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,kBAAkB;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,uBAAuB;YACvB,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAG,KAAK,CAAC,CAAC;QACd,CAAC;aAAM,CAAC;YACN,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAE1C,oBAAoB;YAEpB,gCAAgC;YAChC,kCAAkC;YAClC,mCAAmC;YACnC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBAClC,sBAAsB;gBACtB,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,cAAc;gBACd,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAG,KAAK,CAAC,CAAC;YACd,CAAC,CAAC,CAAC;YAEH,UAAU;YACV,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC;QACvB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/when/whenNearViewport.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @name            whenNearViewport
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Monitor an HTMLElement to be notified when it is near (100vh before or after) the viewport, or in the viewport
+ *
+ * @feature       Promise based API
+ * @feature       Some settings available to tweak the behavior
+ *
+ * @param 		{HTMLElement} 				                        $elm 					    The element to monitor
+ * @param 		{Partial<TWhenNearViewportSettings>} 					[settings={}] 		Some settings to tweak the detection behavior
+ * @return 		(Promise<HTMLElement>) 											                    The promise that will be resolved when the element is in the viewport
+ *
+ * @setting         {String}            [offset=`${window.innerHeight}px ${window.innerWidth}px`]           Some offset
+ *
+ * @snippet         whenNearViewport($1)
+ * whenNearViewport($1).then(\$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenNearViewport } from '@blackbyte/sugar/dom'
+ * whenNearViewport(myCoolHTMLElement).then($elm => {
+ * 		// do something with your element that has entered the viewport...
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TWhenNearViewportSettings = {
+    offset: string | number | undefined;
+};
+export default function whenNearViewport($elm: HTMLElement, settings?: Partial<TWhenNearViewportSettings>): Promise<HTMLElement>;

package/dist/js/dom/when/whenNearViewport.js

@@ -0,0 +1,58 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import __closestScrollableElement from '../query/closestScrollableElement.js';
+export default function whenNearViewport($elm, settings) {
+    function getRootMargin() {
+        return [
+            `${Math.round(window.innerHeight * 0.5)}px`,
+            `${Math.round(window.innerWidth * 0.5)}px`,
+            `${Math.round(window.innerHeight * 0.5)}px`,
+            `${Math.round(window.innerWidth * 0.5)}px`,
+        ].join(' ');
+    }
+    const finalSettings = Object.assign({ offset: undefined }, settings);
+    let observer, resizeTimeout;
+    const rootMargin = finalSettings.offset
+        ? `${finalSettings.offset}`
+        : getRootMargin();
+    let $closest = __closestScrollableElement($elm);
+    if (($closest === null || $closest === void 0 ? void 0 : $closest.tagName) === 'HTML')
+        $closest = undefined;
+    return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+        const options = {
+            root: $closest, // relative to document viewport
+            rootMargin,
+            threshold: 0, // visible amount of item shown in relation to root
+        };
+        function onChange(changes, observer) {
+            changes.forEach((change) => {
+                var _a;
+                if (change.intersectionRatio > 0) {
+                    (_a = observer.disconnect) === null || _a === void 0 ? void 0 : _a.call(observer);
+                    resolve($elm);
+                }
+            });
+        }
+        observer = new IntersectionObserver(onChange, options);
+        observer.observe($elm);
+        window.addEventListener('resize', (e) => {
+            clearTimeout(resizeTimeout);
+            // @ts-ignore
+            resizeTimeout = setTimeout(() => {
+                var _a;
+                (_a = observer.disconnect) === null || _a === void 0 ? void 0 : _a.call(observer);
+                options.rootMargin = rootMargin;
+                observer = new IntersectionObserver(onChange, options);
+                observer.observe($elm);
+            }, 500);
+        });
+    }));
+}
+//# sourceMappingURL=whenNearViewport.js.map

package/dist/js/dom/when/whenNearViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenNearViewport.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenNearViewport.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,0BAA0B,MAAM,sCAAsC,CAAC;AA0C9E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,IAAiB,EACjB,QAA6C;IAE7C,SAAS,aAAa;QACpB,OAAO;YACL,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC,IAAI;YAC3C,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,IAAI;YAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC,IAAI;YAC3C,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,IAAI;SAC3C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACd,CAAC;IAED,MAAM,aAAa,mBACjB,MAAM,EAAE,SAAS,IACd,QAAQ,CACZ,CAAC;IAEF,IAAI,QAA8B,EAAE,aAAqB,CAAC;IAE1D,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM;QACrC,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE;QAC3B,CAAC,CAAC,aAAa,EAAE,CAAC;IAEpB,IAAI,QAAQ,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,MAAK,MAAM;QAAE,QAAQ,GAAG,SAAS,CAAC;IAEvD,OAAO,IAAI,OAAO,CAAC,CAAO,OAAO,EAAE,EAAE;QACnC,MAAM,OAAO,GAA6B;YACxC,IAAI,EAAE,QAAQ,EAAE,gCAAgC;YAChD,UAAU;YACV,SAAS,EAAE,CAAC,EAAE,mDAAmD;SAClE,CAAC;QAEF,SAAS,QAAQ,CAAC,OAAO,EAAE,QAAQ;YACjC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;;gBACzB,IAAI,MAAM,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;oBACjC,MAAA,QAAQ,CAAC,UAAU,wDAAI,CAAC;oBACxB,OAAO,CAAC,IAAI,CAAC,CAAC;gBAChB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACvD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACtC,YAAY,CAAC,aAAa,CAAC,CAAC;YAC5B,aAAa;YACb,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;;gBAC9B,MAAA,QAAQ,CAAC,UAAU,wDAAI,CAAC;gBACxB,OAAO,CAAC,UAAU,GAAG,UAAU,CAAC;gBAChC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;gBACvD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACzB,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/when/whenOutOfViewport.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @name            whenOutOfViewport
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Monitor an HTMLElement to be notified when it exit the viewport
+ *
+ * @feature       Promise based API
+ * @feature       Some settings to tweak the detection behavior
+ *
+ * @param 		{HTMLElement} 				                          $elm 				        The element to monitor
+ * @param 		{Partial<TWhenOutOfViewportSettings>} 					[settings={}]       Some settings to tweak the detection behavior
+ * @return 		(Promise<HTMLElement>) 										                          The promise that will be resolved when the element exit the viewport
+ *
+ * @setting       {String}      [offset=10px]     An offset to detect sooner or later the element exits the viewport
+ *
+ * @snippet         whenOutOfViewport($1)
+ * whenOutOfViewport($1).then(\$$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenOutOfViewport } from '@blackbyte/sugar/dom'
+ * whenOutOfViewport(myCoolHTMLElement).then(($elm) => {
+ * 		// do something with your element that has exit the viewport...
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TWhenOutOfViewportSettings = {
+    offset: string | number;
+};
+export default function whenOutOfViewport($elm: HTMLElement, settings?: Partial<TWhenOutOfViewportSettings>): Promise<unknown>;

package/dist/js/dom/when/whenOutOfViewport.js

@@ -0,0 +1,65 @@
+/**
+ * @name            whenOutOfViewport
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Monitor an HTMLElement to be notified when it exit the viewport
+ *
+ * @feature       Promise based API
+ * @feature       Some settings to tweak the detection behavior
+ *
+ * @param 		{HTMLElement} 				                          $elm 				        The element to monitor
+ * @param 		{Partial<TWhenOutOfViewportSettings>} 					[settings={}]       Some settings to tweak the detection behavior
+ * @return 		(Promise<HTMLElement>) 										                          The promise that will be resolved when the element exit the viewport
+ *
+ * @setting       {String}      [offset=10px]     An offset to detect sooner or later the element exits the viewport
+ *
+ * @snippet         whenOutOfViewport($1)
+ * whenOutOfViewport($1).then(\$$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenOutOfViewport } from '@blackbyte/sugar/dom'
+ * whenOutOfViewport(myCoolHTMLElement).then(($elm) => {
+ * 		// do something with your element that has exit the viewport...
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenOutOfViewport($elm, settings = {}) {
+    return new Promise((resolve, reject) => {
+        settings = Object.assign({ offset: '10px' }, settings);
+        let isInViewport = false;
+        const _cb = () => {
+            if (!isInViewport) {
+                observer.disconnect();
+                resolve($elm);
+            }
+        };
+        const observer = new IntersectionObserver((entries, observer) => {
+            if (!entries.length)
+                return;
+            const entry = entries[0];
+            if (entry.intersectionRatio > 0) {
+                isInViewport = true;
+            }
+            else {
+                isInViewport = false;
+            }
+            _cb();
+        }, {
+            root: null, // viewport
+            rootMargin: `${settings.offset}`,
+            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+        });
+        observer.observe($elm);
+    });
+}
+//# sourceMappingURL=whenOutOfViewport.js.map

package/dist/js/dom/when/whenOutOfViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenOutOfViewport.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenOutOfViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAMH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,IAAiB,EACjB,WAAgD,EAAE;IAElD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,QAAQ,mBACN,MAAM,EAAE,MAAM,IACX,QAAQ,CACZ,CAAC;QAEF,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,MAAM,GAAG,GAAG,GAAG,EAAE;YACf,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACtB,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,MAAM;gBAAE,OAAO;YAC5B,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;gBAChC,YAAY,GAAG,IAAI,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC;YACD,GAAG,EAAE,CAAC;QACR,CAAC,EACD;YACE,IAAI,EAAE,IAAI,EAAE,WAAW;YACvB,UAAU,EAAE,GAAG,QAAQ,CAAC,MAAM,EAAE;YAChC,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SAC/D,CACF,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/when/whenRemoved.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @name            whenRemoved
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Resolve a promise when the passed node has been removed from the dom
+ *
+ * @feature       Detect when the element has been removed from the dom
+ * @feature       Possibility to pass a check function to check if the attribute suits your needs
+ * @feature       Promise based API
+ *
+ * @param 		{HTMLElement} 				      $elm 				The HTMLElement on which to monitor
+ * @return 		(Promise<HTMLElement>) 									The promise that will be resolved when the attribute exist on the element (and that it passes the checkFn)
+ *
+ * @snippet         whenRemoved($1);
+ * whenRemoved($1).then(() => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenRemoved } from '@blackbyte/sugar/dom'
+ * whenRemoved(myCoolHTMLElement).then(() => {
+ * 		// the element has been removed
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenRemoved($elm: HTMLElement): Promise<HTMLElement>;

package/dist/js/dom/when/whenRemoved.js

@@ -0,0 +1,53 @@
+/**
+ * @name            whenRemoved
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Resolve a promise when the passed node has been removed from the dom
+ *
+ * @feature       Detect when the element has been removed from the dom
+ * @feature       Possibility to pass a check function to check if the attribute suits your needs
+ * @feature       Promise based API
+ *
+ * @param 		{HTMLElement} 				      $elm 				The HTMLElement on which to monitor
+ * @return 		(Promise<HTMLElement>) 									The promise that will be resolved when the attribute exist on the element (and that it passes the checkFn)
+ *
+ * @snippet         whenRemoved($1);
+ * whenRemoved($1).then(() => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenRemoved } from '@blackbyte/sugar/dom'
+ * whenRemoved(myCoolHTMLElement).then(() => {
+ * 		// the element has been removed
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenRemoved($elm) {
+    return new Promise((resolve, reject) => {
+        const observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                mutation.removedNodes.forEach(function (removedNode) {
+                    if (removedNode === $elm) {
+                        resolve($elm);
+                        observer.disconnect();
+                    }
+                });
+            });
+        });
+        // @ts-ignore
+        observer.observe($elm.parentElement, {
+            subtree: false,
+            childList: true,
+        });
+    });
+}
+//# sourceMappingURL=whenRemoved.js.map

package/dist/js/dom/when/whenRemoved.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenRemoved.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenRemoved.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,IAAiB;IACnD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,UAAU,SAAS;YACvD,SAAS,CAAC,OAAO,CAAC,UAAU,QAAQ;gBAClC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,WAAW;oBACjD,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;wBACzB,OAAO,CAAC,IAAI,CAAC,CAAC;wBACd,QAAQ,CAAC,UAAU,EAAE,CAAC;oBACxB,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,aAAa;QACb,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE;YACnC,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/when/whenScriptLoaded.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @name            whenScriptLoaded
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Detect when a script has been fully loaded
+ *
+ * @feature       Promise based API
+ * @feature       Callback support
+ *
+ * @param    {HTMLScriptElement}        $script         The script element to detect the loading state
+ * @param    {Function}                 [cb=null]       A callback if you prefer
+ * @return   {Promise}                                  The promise that will be resolved when the script is fully loaded
+ *
+ * @snippet         whenScriptLoaded($1)
+ * whenScriptLoaded($1).then(\$script => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example    js
+ * import { whenScriptLoaded } from '@blackbyte/sugar/dom'
+ * whenScriptLoaded($script).then(($script) => {
+ *   // do something here
+ * })
+ *
+ * @since           1.0.0
+ * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenScriptLoaded($script: HTMLScriptElement, cb?: Function): Promise<HTMLScriptElement>;

package/dist/js/dom/when/whenScriptLoaded.js

@@ -0,0 +1,73 @@
+/**
+ * @name            whenScriptLoaded
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Detect when a script has been fully loaded
+ *
+ * @feature       Promise based API
+ * @feature       Callback support
+ *
+ * @param    {HTMLScriptElement}        $script         The script element to detect the loading state
+ * @param    {Function}                 [cb=null]       A callback if you prefer
+ * @return   {Promise}                                  The promise that will be resolved when the script is fully loaded
+ *
+ * @snippet         whenScriptLoaded($1)
+ * whenScriptLoaded($1).then(\$script => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example    js
+ * import { whenScriptLoaded } from '@blackbyte/sugar/dom'
+ * whenScriptLoaded($script).then(($script) => {
+ *   // do something here
+ * })
+ *
+ * @since           1.0.0
+ * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenScriptLoaded($script, cb) {
+    const promise = new Promise((resolve, reject) => {
+        let done = false;
+        $script.onload = handleLoad;
+        // @ts-ignore
+        $script.onreadystatechange = handleReadyStateChange;
+        $script.onerror = handleError;
+        function handleLoad() {
+            if (!done) {
+                done = true;
+                if (cb)
+                    cb($script);
+                resolve($script);
+            }
+        }
+        function handleReadyStateChange() {
+            let state;
+            if (!done) {
+                // @ts-ignore
+                state = $script.readyState;
+                if (state === 'complete') {
+                    handleLoad();
+                }
+            }
+        }
+        function handleError(e) {
+            if (!done) {
+                done = true;
+                reject(new Error(e));
+            }
+        }
+    });
+    promise.finally(() => {
+        $script.onload = null;
+        // @ts-ignore
+        $script.onreadystatechange = null;
+        $script.onerror = null;
+    });
+    return promise;
+}
+//# sourceMappingURL=whenScriptLoaded.js.map

package/dist/js/dom/when/whenScriptLoaded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenScriptLoaded.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenScriptLoaded.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAA0B,EAC1B,EAAa;IAEb,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QAC9C,IAAI,IAAI,GAAG,KAAK,CAAC;QAEjB,OAAO,CAAC,MAAM,GAAG,UAAU,CAAC;QAC5B,aAAa;QACb,OAAO,CAAC,kBAAkB,GAAG,sBAAsB,CAAC;QACpD,OAAO,CAAC,OAAO,GAAG,WAAW,CAAC;QAE9B,SAAS,UAAU;YACjB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,IAAI,GAAG,IAAI,CAAC;gBACZ,IAAI,EAAE;oBAAE,EAAE,CAAC,OAAO,CAAC,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,SAAS,sBAAsB;YAC7B,IAAI,KAAK,CAAC;YACV,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,aAAa;gBACb,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC;gBAC3B,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;oBACzB,UAAU,EAAE,CAAC;gBACf,CAAC;YACH,CAAC;QACH,CAAC;QACD,SAAS,WAAW,CAAC,CAAC;YACpB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,IAAI,GAAG,IAAI,CAAC;gBACZ,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;QACnB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;QACtB,aAAa;QACb,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAClC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,OAAqC,CAAC;AAC/C,CAAC"}

package/dist/js/dom/when/whenStylesheetsReady.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @name            whenStylesheetsReady
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Wait until all the HTMLLinkElement's are properly loaded
+ *
+ * @feature       Async promise based
+ * @feature       Multiple stylesheets elements listening
+ *
+ * @param 		{Array<HTMLLinkElement>} 		    [links=null] 			The HTMLLinkElement tags to process. If not passed, take the local stylesheets links
+ * @return 		{Promise<void>} 										              The promise that will be resolved when all the links are loaded
+ *
+ * @todo      tests
+ *
+ * @snippet         whenStylesheetsReady($1)
+ * whenStylesheetsReady($1).then(stylesheets => {
+ *      $2
+ * });
+ *
+ * @example 	js
+ * import { whenStylesheetsReady } from '@blackbyte/sugar/dom'
+ * whenStylesheetsReady([
+ * 		myHTMLLinkElement1,
+ * 		myHTMLLinkElement2
+ * ]).then(stylesheets => {
+ *      // do something...
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenStylesheetsReady(links?: HTMLLinkElement[]): Promise<HTMLLinkElement[]>;