@blackbyte/sugar 1.0.0-beta.1

package/dist/js/dom/on/onSwipe.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @name             onSwipe
+ * @namespace        js.dom.on
+ * @type             Function
+ * @platform         js
+ * @status           stable
+ * @async
+ *
+ * Detect swipes gestures on touch devices.
+ *
+ * @feature     Multi directional swipe detection (left, up, right, down)
+ * @feature     Threshold setting
+ *
+ * @setting     {Number}      [threshold=100]       The minimum distance the user has to swipe before detection
+ *
+ * @param       {HTMLElement}                     elm                 The HTMLElement on which to detect the swipe
+ * @param       {Function}                        cb                  The function to call on swipe. The callback function has as parameter an object that containthe swipe direction like left, right, up and down
+ * @param       {Partial<TOnSwipeSettings>}       [settings={}]       Some settings to configure your swipe detection
+ *
+ * @setting       {Number}              [threshold=100]       The swipe threshold
+ *
+ * @snippet         onSwipe($1, $2)
+ * onSwipe($1, swipe => {
+ *      $2
+ * });
+ *
+ * @todo        enhance the typing of the callback
+ * @todo      tests
+ *
+ * @example 	js
+ * import { onSwipe } from '@blackbyte/sugar/dom'
+ * onSwipe(myCoolElm, (swipe) => {
+ * 	// check the swipe direction
+ * 	if (swipe.left) {
+ * 		// do something...
+ * 	}
+ * 	// support : left, right, up, down
+ * 	// etc...
+ * }, {
+ * 	threshold : 50
+ * });
+ *
+ * @see 		https://gist.github.com/SleepWalker/da5636b1abcbaff48c4d
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TOnSwipeSettings = {
+    threshold: number;
+};
+export type TOnSwipeResult = {
+    distanceX: number;
+    distanceY: number;
+    left: boolean;
+    right: boolean;
+    up: boolean;
+    down: boolean;
+};
+export default function onSwipe(elm: HTMLElement, cb: Function, settings?: Partial<TOnSwipeSettings>): void;

package/dist/js/dom/on/onSwipe.js

@@ -0,0 +1,89 @@
+/**
+ * @name             onSwipe
+ * @namespace        js.dom.on
+ * @type             Function
+ * @platform         js
+ * @status           stable
+ * @async
+ *
+ * Detect swipes gestures on touch devices.
+ *
+ * @feature     Multi directional swipe detection (left, up, right, down)
+ * @feature     Threshold setting
+ *
+ * @setting     {Number}      [threshold=100]       The minimum distance the user has to swipe before detection
+ *
+ * @param       {HTMLElement}                     elm                 The HTMLElement on which to detect the swipe
+ * @param       {Function}                        cb                  The function to call on swipe. The callback function has as parameter an object that containthe swipe direction like left, right, up and down
+ * @param       {Partial<TOnSwipeSettings>}       [settings={}]       Some settings to configure your swipe detection
+ *
+ * @setting       {Number}              [threshold=100]       The swipe threshold
+ *
+ * @snippet         onSwipe($1, $2)
+ * onSwipe($1, swipe => {
+ *      $2
+ * });
+ *
+ * @todo        enhance the typing of the callback
+ * @todo      tests
+ *
+ * @example 	js
+ * import { onSwipe } from '@blackbyte/sugar/dom'
+ * onSwipe(myCoolElm, (swipe) => {
+ * 	// check the swipe direction
+ * 	if (swipe.left) {
+ * 		// do something...
+ * 	}
+ * 	// support : left, right, up, down
+ * 	// etc...
+ * }, {
+ * 	threshold : 50
+ * });
+ *
+ * @see 		https://gist.github.com/SleepWalker/da5636b1abcbaff48c4d
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function onSwipe(elm, cb, settings = {}) {
+    const finalSettings = Object.assign({ threshold: 100 }, settings);
+    let touchstartX = 0;
+    let touchstartY = 0;
+    let touchendX = 0;
+    let touchendY = 0;
+    const gesuredZone = elm;
+    gesuredZone.addEventListener('touchstart', function (event) {
+        touchstartX = event.changedTouches[0].screenX;
+        touchstartY = event.changedTouches[0].screenY;
+    }, false);
+    gesuredZone.addEventListener('touchend', function (event) {
+        touchendX = event.changedTouches[0].screenX;
+        touchendY = event.changedTouches[0].screenY;
+        handleGesure();
+    }, false);
+    function handleGesure() {
+        const swipeNfo = {
+            distanceX: Math.abs(touchendX - touchstartX),
+            distanceY: Math.abs(touchendY - touchstartY),
+            left: false,
+            right: false,
+            up: false,
+            down: false,
+        };
+        if (touchendX + finalSettings.threshold < touchstartX) {
+            swipeNfo.left = true;
+        }
+        if (touchendX - finalSettings.threshold > touchstartX) {
+            swipeNfo.right = true;
+        }
+        if (touchendY + finalSettings.threshold < touchstartY) {
+            swipeNfo.up = true;
+        }
+        if (touchendY - finalSettings.threshold > touchstartY) {
+            swipeNfo.down = true;
+        }
+        if (swipeNfo.left || swipeNfo.right || swipeNfo.down || swipeNfo.up) {
+            cb(swipeNfo);
+        }
+    }
+}
+//# sourceMappingURL=onSwipe.js.map

package/dist/js/dom/on/onSwipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onSwipe.js","sourceRoot":"","sources":["../../../../src/js/dom/on/onSwipe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAeH,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,GAAgB,EAChB,EAAY,EACZ,WAAsC,EAAE;IAExC,MAAM,aAAa,mBACjB,SAAS,EAAE,GAAG,IACX,QAAQ,CACZ,CAAC;IAEF,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,SAAS,GAAG,CAAC,CAAC;IAClB,IAAI,SAAS,GAAG,CAAC,CAAC;IAClB,MAAM,WAAW,GAAG,GAAG,CAAC;IACxB,WAAW,CAAC,gBAAgB,CAC1B,YAAY,EACZ,UAAU,KAAK;QACb,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAC9C,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,CAAC,EACD,KAAK,CACN,CAAC;IAEF,WAAW,CAAC,gBAAgB,CAC1B,UAAU,EACV,UAAU,KAAK;QACb,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5C,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5C,YAAY,EAAE,CAAC;IACjB,CAAC,EACD,KAAK,CACN,CAAC;IAEF,SAAS,YAAY;QACnB,MAAM,QAAQ,GAAmB;YAC/B,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5C,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5C,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,KAAK;SACZ,CAAC;QACF,IAAI,SAAS,GAAG,aAAa,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;YACtD,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,IAAI,SAAS,GAAG,aAAa,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;YACtD,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,IAAI,SAAS,GAAG,aAAa,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;YACtD,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC;QACrB,CAAC;QACD,IAAI,SAAS,GAAG,aAAa,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;YACtD,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,IAAI,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YACpE,EAAE,CAAC,QAAQ,CAAC,CAAC;QACf,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/js/dom/position/_exports.d.ts

@@ -0,0 +1,2 @@
+import positionFromEvent from './positionFromEvent.js';
+export { positionFromEvent as __positionFromEvent, positionFromEvent };

package/dist/js/dom/position/_exports.js

@@ -0,0 +1,3 @@
+import positionFromEvent from './positionFromEvent.js';
+export { positionFromEvent as __positionFromEvent, positionFromEvent };
+//# sourceMappingURL=_exports.js.map

package/dist/js/dom/position/_exports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../../src/js/dom/position/_exports.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/js/dom/position/positionFromEvent.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name            positionFromEvent
+ * @namespace       js.dom.position
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get the position from an event "touchstart", "touchmove", "touchend", "mousedown", "mousemove" or "mouseup".
+ *
+ * @param 		{MouseEvent|TouchEvent} 					e  		  The event to get the position from
+ * @return 		{x: number; y: number;} 									The absolute position of the event
+ *
+ * @snippet         positionFromEvent($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { positionFromEvent } from '@blackbyte/sugar/dom'
+ * positionFromEvent(e);
+ * // output : { x, 230, y: 122 }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function positionFromEvent(e: MouseEvent | TouchEvent): {
+    x: number;
+    y: number;
+};

package/dist/js/dom/position/positionFromEvent.js

@@ -0,0 +1,54 @@
+/**
+ * @name            positionFromEvent
+ * @namespace       js.dom.position
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get the position from an event "touchstart", "touchmove", "touchend", "mousedown", "mousemove" or "mouseup".
+ *
+ * @param 		{MouseEvent|TouchEvent} 					e  		  The event to get the position from
+ * @return 		{x: number; y: number;} 									The absolute position of the event
+ *
+ * @snippet         positionFromEvent($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { positionFromEvent } from '@blackbyte/sugar/dom'
+ * positionFromEvent(e);
+ * // output : { x, 230, y: 122 }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function positionFromEvent(e) {
+    let x, y;
+    if (e.type == 'touchstart' ||
+        e.type == 'touchmove' ||
+        e.type == 'touchend' ||
+        e.type == 'touchcancel') {
+        // @ts-ignore
+        const evt = typeof e.originalEvent === 'undefined' ? e : e.originalEvent;
+        const touch = evt.touches[0] || evt.changedTouches[0];
+        x = touch.pageX;
+        y = touch.pageY;
+    }
+    else if (e.type == 'mousedown' ||
+        e.type == 'mouseup' ||
+        e.type == 'mousemove' ||
+        e.type == 'mouseover' ||
+        e.type == 'mouseout' ||
+        e.type == 'mouseenter' ||
+        e.type == 'mouseleave') {
+        // @ts-ignore
+        x = e.clientX;
+        // @ts-ignore
+        y = e.clientY;
+    }
+    return {
+        x,
+        y,
+    };
+}
+//# sourceMappingURL=positionFromEvent.js.map

package/dist/js/dom/position/positionFromEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionFromEvent.js","sourceRoot":"","sources":["../../../../src/js/dom/position/positionFromEvent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAA0B;IAIlE,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,IACE,CAAC,CAAC,IAAI,IAAI,YAAY;QACtB,CAAC,CAAC,IAAI,IAAI,WAAW;QACrB,CAAC,CAAC,IAAI,IAAI,UAAU;QACpB,CAAC,CAAC,IAAI,IAAI,aAAa,EACvB,CAAC;QACD,aAAa;QACb,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,aAAa,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;QACzE,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QACtD,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;QAChB,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;IAClB,CAAC;SAAM,IACL,CAAC,CAAC,IAAI,IAAI,WAAW;QACrB,CAAC,CAAC,IAAI,IAAI,SAAS;QACnB,CAAC,CAAC,IAAI,IAAI,WAAW;QACrB,CAAC,CAAC,IAAI,IAAI,WAAW;QACrB,CAAC,CAAC,IAAI,IAAI,UAAU;QACpB,CAAC,CAAC,IAAI,IAAI,YAAY;QACtB,CAAC,CAAC,IAAI,IAAI,YAAY,EACtB,CAAC;QACD,aAAa;QACb,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;QACd,aAAa;QACb,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IAChB,CAAC;IACD,OAAO;QACL,CAAC;QACD,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/js/dom/query/_exports.d.ts

@@ -0,0 +1,13 @@
+import closestElement from './closestElement.js';
+import closestNotVisibleElement from './closestNotVisibleElement.js';
+import closestScrollableElement from './closestScrollableElement.js';
+import elementsInViewport from './elementsInViewport.js';
+import matches from './matches.js';
+import nearestElement from './nearestElement.js';
+import nextElement from './nextElement.js';
+import previousElement from './previousElement.js';
+import querySelector from './querySelector.js';
+import querySelectorAll from './querySelectorAll.js';
+import querySelectorLive from './querySelectorLive.js';
+import querySelectorUp from './querySelectorUp.js';
+export { closestElement as __closestElement, closestNotVisibleElement as __closestNotVisibleElement, closestScrollableElement as __closestScrollableElement, elementsInViewport as __elementsInViewport, matches as __matches, nearestElement as __nearestElement, nextElement as __nextElement, previousElement as __previousElement, querySelector as __querySelector, querySelectorAll as __querySelectorAll, querySelectorLive as __querySelectorLive, querySelectorUp as __querySelectorUp, closestElement, closestNotVisibleElement, closestScrollableElement, elementsInViewport, matches, nearestElement, nextElement, previousElement, querySelector, querySelectorAll, querySelectorLive, querySelectorUp, };

package/dist/js/dom/query/_exports.js

@@ -0,0 +1,14 @@
+import closestElement from './closestElement.js';
+import closestNotVisibleElement from './closestNotVisibleElement.js';
+import closestScrollableElement from './closestScrollableElement.js';
+import elementsInViewport from './elementsInViewport.js';
+import matches from './matches.js';
+import nearestElement from './nearestElement.js';
+import nextElement from './nextElement.js';
+import previousElement from './previousElement.js';
+import querySelector from './querySelector.js';
+import querySelectorAll from './querySelectorAll.js';
+import querySelectorLive from './querySelectorLive.js';
+import querySelectorUp from './querySelectorUp.js';
+export { closestElement as __closestElement, closestNotVisibleElement as __closestNotVisibleElement, closestScrollableElement as __closestScrollableElement, elementsInViewport as __elementsInViewport, matches as __matches, nearestElement as __nearestElement, nextElement as __nextElement, previousElement as __previousElement, querySelector as __querySelector, querySelectorAll as __querySelectorAll, querySelectorLive as __querySelectorLive, querySelectorUp as __querySelectorUp, closestElement, closestNotVisibleElement, closestScrollableElement, elementsInViewport, matches, nearestElement, nextElement, previousElement, querySelector, querySelectorAll, querySelectorLive, querySelectorUp, };
+//# sourceMappingURL=_exports.js.map

package/dist/js/dom/query/_exports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../../src/js/dom/query/_exports.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AACrE,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AACrE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AACnD,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EACL,cAAc,IAAI,gBAAgB,EAClC,wBAAwB,IAAI,0BAA0B,EACtD,wBAAwB,IAAI,0BAA0B,EACtD,kBAAkB,IAAI,oBAAoB,EAC1C,OAAO,IAAI,SAAS,EACpB,cAAc,IAAI,gBAAgB,EAClC,WAAW,IAAI,aAAa,EAC5B,eAAe,IAAI,iBAAiB,EACpC,aAAa,IAAI,eAAe,EAChC,gBAAgB,IAAI,kBAAkB,EACtC,iBAAiB,IAAI,mBAAmB,EACxC,eAAe,IAAI,iBAAiB,EACpC,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,OAAO,EACP,cAAc,EACd,WAAW,EACX,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAChB,CAAC"}

package/dist/js/dom/query/closestElement.d.ts

@@ -0,0 +1,33 @@
+import querySelectorUp from './querySelectorUp.js';
+/**
+ * @name                closestElement
+ * @namespace           js.dom.query
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ *
+ * Go up the dom three to find the first element that matches the passed selector
+ *
+ * @param 		{HTMLElement} 					$elm  		The element to start on
+ * @param 		{String|Function} 				selector 	A css selector to search for or a check function that will be used
+ * @return 		{HTMLElement} 								The element found or null
+ *
+ * @snippet         closestElement($1, $2)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { closestElement } from '@blackbyte/sugar/dom'
+ * const closestElm =  closestElement(myCoolElement, '.my-cool-class');
+ * if (closestElm) {
+ * 		// we have found en element that matches the selector
+ * }
+ * // the selector param can be a function that need to return either true or false like so:
+ * closest(myCoolElement, (elm) => {
+ *   return elm.hasAttribute('my-cool-attribute')
+ * })
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default querySelectorUp;

package/dist/js/dom/query/closestElement.js

@@ -0,0 +1,34 @@
+import querySelectorUp from './querySelectorUp.js';
+/**
+ * @name                closestElement
+ * @namespace           js.dom.query
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ *
+ * Go up the dom three to find the first element that matches the passed selector
+ *
+ * @param 		{HTMLElement} 					$elm  		The element to start on
+ * @param 		{String|Function} 				selector 	A css selector to search for or a check function that will be used
+ * @return 		{HTMLElement} 								The element found or null
+ *
+ * @snippet         closestElement($1, $2)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { closestElement } from '@blackbyte/sugar/dom'
+ * const closestElm =  closestElement(myCoolElement, '.my-cool-class');
+ * if (closestElm) {
+ * 		// we have found en element that matches the selector
+ * }
+ * // the selector param can be a function that need to return either true or false like so:
+ * closest(myCoolElement, (elm) => {
+ *   return elm.hasAttribute('my-cool-attribute')
+ * })
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default querySelectorUp;
+//# sourceMappingURL=closestElement.js.map

package/dist/js/dom/query/closestElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"closestElement.js","sourceRoot":"","sources":["../../../../src/js/dom/query/closestElement.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAe,eAAe,CAAC"}

package/dist/js/dom/query/closestNotVisibleElement.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name                closestNotVisibleElement
+ * @namespace           js.dom.query
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ *
+ * Go up the dom three to find the first element that is not visible.
+ * Not visible mean that has either an opacity to 0, a visibility to hidden or a display to none
+ *
+ * @param 		{HTMLElement} 					      $elm  		  The element to start on
+ * @return 		{HTMLElement | undefined} 								The element found or undefined
+ *
+ * @snippet         closestNotVisibleElement($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { closestNotVisibleElement } from '@blackbyte/sugar/dom'
+ * const closestElm =  closestNotVisibleElement(myCoolElement);
+ * if (closestElm) {
+ * 		// we have found en element that is not visible
+ * }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function closestNotVisibleElement($elm: HTMLElement): HTMLElement | undefined;

package/dist/js/dom/query/closestNotVisibleElement.js

@@ -0,0 +1,41 @@
+import isVisible from '../../is/isVisible.js';
+/**
+ * @name                closestNotVisibleElement
+ * @namespace           js.dom.query
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ *
+ * Go up the dom three to find the first element that is not visible.
+ * Not visible mean that has either an opacity to 0, a visibility to hidden or a display to none
+ *
+ * @param 		{HTMLElement} 					      $elm  		  The element to start on
+ * @return 		{HTMLElement | undefined} 								The element found or undefined
+ *
+ * @snippet         closestNotVisibleElement($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { closestNotVisibleElement } from '@blackbyte/sugar/dom'
+ * const closestElm =  closestNotVisibleElement(myCoolElement);
+ * if (closestElm) {
+ * 		// we have found en element that is not visible
+ * }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function closestNotVisibleElement($elm) {
+    const originalElm = $elm;
+    let $parent = $elm.parentNode;
+    while ($parent && $parent != originalElm.ownerDocument) {
+        // @ts-ignore
+        if (!isVisible($parent)) {
+            return $parent;
+        }
+        $parent = $parent.parentNode;
+    }
+    return;
+}
+//# sourceMappingURL=closestNotVisibleElement.js.map

package/dist/js/dom/query/closestNotVisibleElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"closestNotVisibleElement.js","sourceRoot":"","sources":["../../../../src/js/dom/query/closestNotVisibleElement.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,IAAiB;IAEjB,MAAM,WAAW,GAAG,IAAI,CAAC;IACzB,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC;IAC9B,OAAO,OAAO,IAAI,OAAO,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;QACvD,aAAa;QACb,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,OAAO,OAAsB,CAAC;QAChC,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;IAC/B,CAAC;IACD,OAAO;AACT,CAAC"}

package/dist/js/dom/query/closestScrollableElement.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @name                closestScrollableElement
+ * @namespace           js.dom.query
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ *
+ * Go up the dom three to find the first element that is scrollable.
+ * The default scrollable element is the body
+ *
+ * @param 		{HTMLElement} 					      $elm  		The element to start on
+ * @return 		{HTMLElement|undefined} 								The element found or undefined
+ *
+ * @snippet         closestScrollableElement($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { closestScrollableElement } from '@blackbyte/sugar/dom';
+ * closestScrollableElement($myElement);
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function closestScrollableElement($elm: HTMLElement): HTMLElement | undefined;

package/dist/js/dom/query/closestScrollableElement.js

@@ -0,0 +1,31 @@
+import isScrollable from '../../is/isScrollable.js';
+import querySelectorUp from './querySelectorUp.js';
+/**
+ * @name                closestScrollableElement
+ * @namespace           js.dom.query
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ *
+ * Go up the dom three to find the first element that is scrollable.
+ * The default scrollable element is the body
+ *
+ * @param 		{HTMLElement} 					      $elm  		The element to start on
+ * @return 		{HTMLElement|undefined} 								The element found or undefined
+ *
+ * @snippet         closestScrollableElement($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { closestScrollableElement } from '@blackbyte/sugar/dom';
+ * closestScrollableElement($myElement);
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function closestScrollableElement($elm) {
+    const res = querySelectorUp($elm, ($e) => isScrollable($e));
+    return res;
+}
+//# sourceMappingURL=closestScrollableElement.js.map

package/dist/js/dom/query/closestScrollableElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"closestScrollableElement.js","sourceRoot":"","sources":["../../../../src/js/dom/query/closestScrollableElement.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,IAAiB;IAEjB,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5D,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/js/dom/query/elementsInViewport.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @name            elementsInViewport
+ * @namespace       js.dom.query
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get all the elements that are in viewport
+ *
+ * @setting       {HTMLElement}     [rootNode=document.body]      Specify the root node from where you want to query
+ *
+ * @param 		{Object} 			    settings	 		The settings of the query
+ * @return 		{HTMLElement} 							    The founded element
+ *
+ * @snippet         elementsInViewport($1)
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { elementsInViewport } from '@blackbyte/sugar/dom';
+ * const $elements = elementsInViewport();
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TElementsInViewportSettings = {
+    rootNode: HTMLElement;
+    threshold: number;
+};
+export default function elementsInViewport(settings?: Partial<TElementsInViewportSettings>): HTMLElement[];

package/dist/js/dom/query/elementsInViewport.js

@@ -0,0 +1,24 @@
+import isInViewport from '../../is/isInViewport.js';
+export default function elementsInViewport(settings = {}) {
+    var _a, _b;
+    // extend settings
+    const finalSettings = Object.assign({ rootNode: document.body, threshold: 10 }, settings);
+    const $elementsInViewport = [];
+    // get all elements
+    const $elms = Array.from((_b = (_a = settings.rootNode) === null || _a === void 0 ? void 0 : _a.querySelectorAll('*:not(html,body,head,script,style,template)')) !== null && _b !== void 0 ? _b : []);
+    // loop on each elements until some are not in the viewport, then stop
+    let currentThreshold = 0;
+    for (let [i, $elm] of $elms.entries()) {
+        if (currentThreshold >= finalSettings.threshold) {
+            break;
+        }
+        if (!isInViewport($elm)) {
+            currentThreshold++;
+            continue;
+        }
+        $elementsInViewport.push($elm);
+    }
+    // return the elements
+    return $elementsInViewport;
+}
+//# sourceMappingURL=elementsInViewport.js.map

package/dist/js/dom/query/elementsInViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementsInViewport.js","sourceRoot":"","sources":["../../../../src/js/dom/query/elementsInViewport.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAiCpD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,WAAiD,EAAE;;IAEnD,kBAAkB;IAClB,MAAM,aAAa,mBACjB,QAAQ,EAAE,QAAQ,CAAC,IAAI,EACvB,SAAS,EAAE,EAAE,IACV,QAAQ,CACZ,CAAC;IAEF,MAAM,mBAAmB,GAAkB,EAAE,CAAC;IAE9C,mBAAmB;IACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,MAAA,MAAA,QAAQ,CAAC,QAAQ,0CAAE,gBAAgB,CACjC,6CAA6C,CAC9C,mCAAI,EAAE,CACR,CAAC;IAEF,sEAAsE;IACtE,IAAI,gBAAgB,GAAG,CAAC,CAAC;IACzB,KAAK,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;QACtC,IAAI,gBAAgB,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;YAChD,MAAM;QACR,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,IAAmB,CAAC,EAAE,CAAC;YACvC,gBAAgB,EAAE,CAAC;YACnB,SAAS;QACX,CAAC;QACD,mBAAmB,CAAC,IAAI,CAAC,IAAmB,CAAC,CAAC;IAChD,CAAC;IAED,sBAAsB;IACtB,OAAO,mBAAmB,CAAC;AAC7B,CAAC"}

package/dist/js/dom/query/matches.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name            matches
+ * @namespace       js.dom.query
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Polyfill for the Element.matches function
+ *
+ * @param 		{HTMLElement} 			elm  			    The element to check
+ * @param 		{String} 				    selector 		  The selector to check on the element
+ * @return 		{Boolean} 								        If the element match the selector or not
+ *
+ * @snippet         matches($1, $2)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { matches } from '@blackbyte/sugar/dom'
+ * if (matches(myCoolHTMLElement, '.my-cool-css-selector')) {
+ * 		// the element match the selector
+ * }
+ *
+ * @see 		https://developer.mozilla.org/en/docs/Web/API/Element/matches
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function matches(el: HTMLElement, selector: string): boolean;

package/dist/js/dom/query/matches.js

@@ -0,0 +1,45 @@
+/**
+ * @name            matches
+ * @namespace       js.dom.query
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Polyfill for the Element.matches function
+ *
+ * @param 		{HTMLElement} 			elm  			    The element to check
+ * @param 		{String} 				    selector 		  The selector to check on the element
+ * @return 		{Boolean} 								        If the element match the selector or not
+ *
+ * @snippet         matches($1, $2)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { matches } from '@blackbyte/sugar/dom'
+ * if (matches(myCoolHTMLElement, '.my-cool-css-selector')) {
+ * 		// the element match the selector
+ * }
+ *
+ * @see 		https://developer.mozilla.org/en/docs/Web/API/Element/matches
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function matches(el, selector) {
+    if (el.nodeName == '#comment' || el.nodeName == '#text') {
+        return false;
+    }
+    const p = Element.prototype;
+    const f = p.matches ||
+        p.webkitMatchesSelector ||
+        // @ts-ignore
+        p.mozMatchesSelector ||
+        // @ts-ignore
+        p.msMatchesSelector ||
+        function (s) {
+            // @ts-ignore
+            return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+        };
+    return f.call(el, selector);
+}
+//# sourceMappingURL=matches.js.map

package/dist/js/dom/query/matches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matches.js","sourceRoot":"","sources":["../../../../src/js/dom/query/matches.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAe,EAAE,QAAgB;IAC/D,IAAI,EAAE,CAAC,QAAQ,IAAI,UAAU,IAAI,EAAE,CAAC,QAAQ,IAAI,OAAO,EAAE,CAAC;QACxD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,GACL,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,qBAAqB;QACvB,aAAa;QACb,CAAC,CAAC,kBAAkB;QACpB,aAAa;QACb,CAAC,CAAC,iBAAiB;QACnB,UAAU,CAAC;YACT,aAAa;YACb,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC;IACJ,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;AAC9B,CAAC"}