@blackbyte/sugar 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -1,3 +1,269 @@
+![Blackbyte Sugar](https://github.com/Blackbytespace/sugar/blob/main/assets/blackbyte-sugar-og.png?raw=true)
+
 # Blackbyte Sugar
 
-TBD
+The toolkit that you missed... like a sugar in your coffee!
+
+## [Go to website!](https://sugar.blackbyte.space)
+
+---
+
+<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
+
+<!-- code_chunk_output -->
+
+- [Blackbyte Sugar](#blackbyte-sugar)
+  - [Go to website!](#go-to-websitehttpssugarblackbytespace)
+  - [What is this?](#what-is-this)
+  - [Get started](#get-started)
+    - [1. Install the package](#1-install-the-package)
+    - [2. Discover the API](#2-discover-the-api)
+    - [3. Import what you need](#3-import-what-you-need)
+  - [Samples](#samples)
+      - [Query like a pro](#query-like-a-pro)
+      - [Is this a...?](#is-this-a)
+      - [Cryptography](#cryptography)
+      - [Execute this when...](#execute-this-when)
+      - [Array utilities](#array-utilities)
+      - [Convert colors](#convert-colors)
+      - [Time is... time](#time-is-time)
+  - [Contribute](#contribute)
+
+<!-- /code_chunk_output -->
+
+---
+
+## What is this?
+
+This project has for goal to provide high quality utilities through 1 package. Consider this as a swiss knife for web development.
+
+It will continue to grow with utilities that make sens and that we can make use of everyday. The goal is to make our daily job as pleasant as possible.
+
+Don't be afraid to propose some new utilities. Make sure to read [our contribution guidelines first](./CONTRIBUTE.md).
+
+## Get started
+
+Start using `@blackbyte/sugar` in your project with this quick guide.
+
+### 1. Install the package
+
+You can install `@blackbyte/sugar` using npm, yarn or pnpm.
+
+```sh
+npm install @blackbyte/sugar
+```
+
+### 2. Discover the API
+
+Go to the official [sugar.blackbyte.space](https://sugar.blackbyte.space) website to discover the full API.
+
+Press `CMD + P` on the website to open the command palette and start typing to search for available functions.
+
+### 3. Import what you need
+
+Import the components you need from `@blackbyte/sugar` in your project files.
+
+```ts
+import { querySelectorLive } from '@blackbyte/sugar/dom';
+import { pickRandom, unique } from '@blackbyte/sugar/array';
+import { sleep, timeAgo } from '@blackbyte/sugar/datetime';
+import { formatFileSize, formatDuration } from '@blackbyte/sugar/format';
+// etc...
+```
+
+## Samples
+
+#### Query like a pro
+
+A set of utility functions to query the DOM in a more efficient way.
+
+```ts
+import {
+  querySelector,
+  querySelectorLive,
+  querySelectorUp,
+} from '@blackbyte/sugar/dom';
+// query the first element that is in the viewport
+const $elm = querySelector('.my-cool-item', {
+  inViewport: true,
+});
+// live query some elements when they are added to the DOM
+const query = querySelectorLive('.my-cool-item', ($elm, api) => {
+  // do something here with the detected element
+  // call api.cancel if you want to stop listening for this selector
+  api.cancel();
+});
+// query the first element that is a parent of the given selector
+const $elmUp = querySelectorUp($from, '.my-cool-item');
+```
+
+#### Is this a...?
+
+A bunch of utility functions to validate common data types like email, path, etc.
+
+```ts
+import {
+  isEmail,
+  isPath,
+  isNode,
+  isUrl,
+  isGlob,
+  isCreditCard,
+  isPlainObject,
+  isJson,
+} from '@blackbyte/sugar/dom';
+isEmail('hello@blackbyte.com'); // true
+isPath('/path/to/file'); // true
+isNode(); // true if runtime is node, false if not
+isUrl('https://blackbyte.space'); // true
+isGlob('*.js'); // true
+isCreditCard('4111111111111111'); // true
+isPlainObject({}); // true
+isJson('{"key": "value"}'); // true
+// and a lot more to discover
+```
+
+#### Cryptography
+
+A set of cryptographic functions for hashing and encoding data.
+
+```ts
+import { md5, base64, sha256, sha512 } from '@blackbyte/sugar/crypto';
+
+// md5 hash
+md5.encrypt('hello world');
+// 5eb63bbbe01eeed093cb22bb8f5acdc3
+// base64 encode
+base64.encrypt('hello world');
+// aGVsbG8gd29ybGQ=
+// sha256 hash
+sha256.encrypt('hello world');
+// b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9
+// sha512 hash
+sha512.encrypt('hello world');
+// 309ecc489c12d6eb4cc40f50c902f2b4d0ed77ee511a7c7a9bcd...
+// and a lot more to discover
+```
+
+#### Execute this when...
+
+A set of utility functions to execute code when certain conditions are met.
+
+```ts
+import {
+  whenVisible,
+  whenInViewport,
+  whenNearViewport,
+  whenImageLoaded,
+  whenInteract,
+} from '@blackbyte/sugar/dom';
+// execute code when the element is visible
+whenVisible($elm).then(() => {
+  console.log('Element is visible');
+});
+// execute code when the element is in the viewport
+whenInViewport($elm).then(() => {
+  console.log('Element is in the viewport');
+});
+// execute code when the element is near the viewport
+whenNearViewport($elm).then(() => {
+  console.log('Element is near the viewport');
+});
+// execute code when the image is loaded
+whenImageLoaded($img).then(() => {
+  console.log('Image is loaded');
+});
+// execute code when the element is interacted with
+whenInteract($elm).then(() => {
+  console.log('Element is interacted with');
+});
+// and a lot more to discover
+```
+
+#### Array utilities
+
+A set of utility functions to manipulate arrays in a more efficient way.
+
+```ts
+import {
+  pickRandom,
+  pickSome,
+  intersection,
+  splitEvery,
+  unique
+} from '@blackbyte/sugar/array'
+// pick a random element from the array
+pickRandom([1, 2, 3, 4, 5])]
+// pick some elements from the array randomly
+pickSome([1, 2, 3, 4, 5], 2) // [2, 4]
+// find the intersection of two arrays
+intersection([1, 2, 3], [2, 3, 4]) // [2, 3]
+// split an array into chunks
+splitEvery([1, 2, 3, 4, 5], 2) // [[1, 2], [3, 4], [5]]
+// get unique elements from an array
+unique([1, 2, 2, 3, 4, 4, 5]) // [1, 2, 3, 4, 5]
+// and a lot more to discover
+```
+
+#### Convert colors
+
+A set of utility functions to manipulate colors in a more efficient way.
+
+```ts
+import {
+  hexToRgba,
+  hexToRgb,
+  hslaToHexa,
+  hslaToRgba,
+  parseColor,
+  convertColor,
+} from '@blackbyte/sugar/array';
+// convert hex to rgba
+hexToRgba('#ff0000'); // { r: 255, g: 0, b: 0, a: 1, toString }
+// convert hex to rgb
+hexToRgb('#ff0000'); // { r: 255, g: 0, b: 0, toString }
+// convert hsla to hexa
+hslaToHexa('hsla(0, 100%, 50%, 1)'); // #ff0000ff
+// convert hsla to rgba
+hslaToRgba('hsla(0, 100%, 50%, 1)'); // { r: 255, g: 0, b: 0, a: 1, toString }
+// parse a color string
+parseColor('#ff0000'); // { r: 255, g: 0, b: 0, a: 1, toString }
+parseColor('#ff0000', 'hsla'); // { h: 0, s: 100, l: 50, a: 1, toString }
+// convert a color to a specific format
+convertColor('#ff0000', 'rgba'); // { r: 255, g: 0, b: 0, a: 1, toString }
+convertColor('#ff0000', 'hsl'); // { h: 0, s: 100, l: 50, toString }
+convertColor('#ff0000', 'hex'); // #ff0000
+// and a lot more to discover
+```
+
+#### Time is... time
+
+A set of utility functions to manipulate time in a more efficient way.
+
+```ts
+import {
+  convertTime,
+  sleep,
+  timeAgo,
+  formatDuration,
+} from '@blackbyte/sugar/datetime';
+// convert time from one format to another
+convertTime('10s', 'ms'); // => 10000
+convertTime('10days', 'hours'); // => 240
+convertTime('10h', 'minutes'); // => 600
+// format a duration in a human readable way
+formatDuration(1000); // => 1s
+formatDuration(60000); // => 1m
+// sleep for a given time
+await sleep(1000); // => waits for 1 second
+// get the time ago from a date
+timeAgo(new Date('2023-01-01')); // => "9 months ago"
+timeAgo(1704067200000); // => "9 months ago"
+// and a lot more to discover
+```
+
+## Contribute
+
+To contribute, make sure to [follow our contribution rules](./CONTRIBUTE.md).
+
+Everyone is welcome as long that it's made in good intelligence and respect 💜.

package/dist/js/dom/css/reloadStylesheets.d.ts

@@ -14,7 +14,7 @@
  * @snippet         reloadStylesheets()
  *
  * @example         js
- * import { __reloeadStylesheets } from '@blackbyte/sugar/dom';
+ * import { reloeadStylesheets } from '@blackbyte/sugar/dom';
  * reloadStylesheets();
  *
  * @since       1.0.0

package/dist/js/dom/distance/distanceFromElementTopToViewportBottom.d.ts

@@ -8,7 +8,7 @@
  * This function take an element as parameter and returns you to distance it has
  * from the element top to the viewport bottom in pixels
  *
- * @param       {HTMLElement}       elm             The element you want to get the distance from
+ * @param       {HTMLElement}       $elm            The element you want to get the distance from
  * @return      {Number}                            The calculated distance
  *
  * @snippet         distanceFromElementTopToViewportBottom($1)
@@ -20,4 +20,4 @@
  * @since       1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
  */
-export default function distanceFromElementTopToViewportBottom(elm: HTMLElement): number;
+export default function distanceFromElementTopToViewportBottom($elm: HTMLElement): number;

package/dist/js/dom/distance/distanceFromElementTopToViewportBottom.js

@@ -10,7 +10,7 @@ import offsetFromViewport from '../offset/offsetFromViewport.js';
  * This function take an element as parameter and returns you to distance it has
  * from the element top to the viewport bottom in pixels
  *
- * @param       {HTMLElement}       elm             The element you want to get the distance from
+ * @param       {HTMLElement}       $elm            The element you want to get the distance from
  * @return      {Number}                            The calculated distance
  *
  * @snippet         distanceFromElementTopToViewportBottom($1)
@@ -22,8 +22,8 @@ import offsetFromViewport from '../offset/offsetFromViewport.js';
  * @since       1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
  */
-export default function distanceFromElementTopToViewportBottom(elm) {
-    const offsets = offsetFromViewport(elm);
+export default function distanceFromElementTopToViewportBottom($elm) {
+    const offsets = offsetFromViewport($elm);
     const scrollTop = __scrollTop();
     // @ts-ignore
     const viewportHeight = window.innerHeight;

package/dist/js/dom/distance/distanceFromElementTopToViewportBottom.js.map

@@ -1 +1 @@
-{"version":3,"file":"distanceFromElementTopToViewportBottom.js","sourceRoot":"","sources":["../../../../src/js/dom/distance/distanceFromElementTopToViewportBottom.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,sCAAsC,CAC5D,GAAgB;IAEhB,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAChC,aAAa;IACb,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;IAC1C,MAAM,QAAQ,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;IAC1D,OAAO,QAAQ,CAAC;AAClB,CAAC"}
+{"version":3,"file":"distanceFromElementTopToViewportBottom.js","sourceRoot":"","sources":["../../../../src/js/dom/distance/distanceFromElementTopToViewportBottom.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,sCAAsC,CAC5D,IAAiB;IAEjB,MAAM,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAChC,aAAa;IACb,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;IAC1C,MAAM,QAAQ,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;IAC1D,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/dist/js/dom/distance/distanceFromElementTopToViewportTop.d.ts

@@ -8,7 +8,7 @@
  * This function take an element as parameter and returns you to distance it has
  * from the element top to the viewport top in pixels
  *
- * @param       {HTMLElement}       elm             The element you want to get the distance from
+ * @param       {HTMLElement}       $elm            The element you want to get the distance from
  * @return      {Number}                            The calculated distance
  *
  * @snippet         distanceFromElementTopToViewportTop($1)
@@ -20,4 +20,4 @@
  * @since       1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
  */
-export default function distanceFromElementTopToViewportTop(elm: HTMLElement): number;
+export default function distanceFromElementTopToViewportTop($elm: HTMLElement): number;

package/dist/js/dom/distance/distanceFromElementTopToViewportTop.js

@@ -10,7 +10,7 @@ import offsetFromViewport from '../offset/offsetFromViewport.js';
  * This function take an element as parameter and returns you to distance it has
  * from the element top to the viewport top in pixels
  *
- * @param       {HTMLElement}       elm             The element you want to get the distance from
+ * @param       {HTMLElement}       $elm            The element you want to get the distance from
  * @return      {Number}                            The calculated distance
  *
  * @snippet         distanceFromElementTopToViewportTop($1)
@@ -22,8 +22,8 @@ import offsetFromViewport from '../offset/offsetFromViewport.js';
  * @since       1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
  */
-export default function distanceFromElementTopToViewportTop(elm) {
-    const offsets = offsetFromViewport(elm);
+export default function distanceFromElementTopToViewportTop($elm) {
+    const offsets = offsetFromViewport($elm);
     const scrollTop = __scrollTop();
     // @ts-ignore
     return offsets.top - scrollTop;

package/dist/js/dom/distance/distanceFromElementTopToViewportTop.js.map

@@ -1 +1 @@
-{"version":3,"file":"distanceFromElementTopToViewportTop.js","sourceRoot":"","sources":["../../../../src/js/dom/distance/distanceFromElementTopToViewportTop.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,mCAAmC,CACzD,GAAgB;IAEhB,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAChC,aAAa;IACb,OAAO,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;AACjC,CAAC"}
+{"version":3,"file":"distanceFromElementTopToViewportTop.js","sourceRoot":"","sources":["../../../../src/js/dom/distance/distanceFromElementTopToViewportTop.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,mCAAmC,CACzD,IAAiB;IAEjB,MAAM,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAChC,aAAa;IACb,OAAO,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;AACjC,CAAC"}

package/dist/js/dom/event/viewportEvents.d.ts

@@ -29,10 +29,10 @@
  * import { viewportEvents } from '@blackbyte/sugar/dom';
  * viewportEvents($elm);
  * $elm.addEventListener('viewport.enter', (e) => {
- *      // do something on enter
+ *   // do something on enter
  * });
  * $elm.addEventListener('viewport.leave', (e) => {
- *      // do something on leave
+ *   // do something on leave
  * });
  *
  * @changelog       1.0.0

package/dist/js/dom/form/generateIdFromForm.d.ts

@@ -13,8 +13,8 @@
  *
  * Note that the named controlls will be sorted before generating the uniqid.
  *
- * @param           {HTMLFormElement}          $form           The form element to generate the uniqid from
- * @return          {String}            A uniqid
+ * @param           {HTMLFormElement}          $form            The form element to generate the uniqid from
+ * @return          {String}                                    A uniqid
  *
  * @todo      tests
  *

package/dist/js/dom/form/generateIdFromForm.js

@@ -14,8 +14,8 @@ import { md5 } from '@blackbyte/sugar/crypto';
  *
  * Note that the named controlls will be sorted before generating the uniqid.
  *
- * @param           {HTMLFormElement}          $form           The form element to generate the uniqid from
- * @return          {String}            A uniqid
+ * @param           {HTMLFormElement}          $form            The form element to generate the uniqid from
+ * @return          {String}                                    A uniqid
  *
  * @todo      tests
  *

package/dist/js/dom/form/getFormValues.d.ts

@@ -7,8 +7,8 @@
  *
  * This function take a form element and return an object with all the values
  *
- * @param       {HTMLFormElement}      $form       The form element to get the values from
- * @return      {Object}                          An object with all the values
+ * @param       {HTMLFormElement}      $form        The form element to get the values from
+ * @return      {Object}                            An object with all the values
  *
  * @todo      tests
  *

package/dist/js/dom/form/getFormValues.js

@@ -7,8 +7,8 @@
  *
  * This function take a form element and return an object with all the values
  *
- * @param       {HTMLFormElement}      $form       The form element to get the values from
- * @return      {Object}                          An object with all the values
+ * @param       {HTMLFormElement}      $form        The form element to get the values from
+ * @return      {Object}                            An object with all the values
  *
  * @todo      tests
  *

package/dist/js/dom/iframe/iframeAutoSize.d.ts

@@ -8,8 +8,8 @@
  *
  * This function allows you to resize an iframe to fit its content.
  *
- * @param           {HTMLElement}                       obj                     The iframe element to resize
- * @param           {TIFrameAutoSizeSettings}           [settings={}]           Some settings to configure your iframe auto size
+ * @param           {HTMLElement}                       $iframe                     The iframe element to resize
+ * @param           {TIFrameAutoSizeSettings}           [settings={}]               Some settings to configure your iframe auto size
  *
  * @setting        {Boolean}         [width=true]         Specify if you want to resize the width of the iframe
  * @setting        {Boolean}         [height=true]        Specify if you want to resize the height of the iframe
@@ -21,7 +21,7 @@
  *
  * @example  	js
  * import { iframeAutoSize } from '@blackbyte/sugar/dom';
- * iframeAutoSize($1, $2);
+ * iframeAutoSize($iframe);
  *
  * @since           1.0.0
  * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/iframe/iframeAutoSize.js

@@ -8,8 +8,8 @@
  *
  * This function allows you to resize an iframe to fit its content.
  *
- * @param           {HTMLElement}                       obj                     The iframe element to resize
- * @param           {TIFrameAutoSizeSettings}           [settings={}]           Some settings to configure your iframe auto size
+ * @param           {HTMLElement}                       $iframe                     The iframe element to resize
+ * @param           {TIFrameAutoSizeSettings}           [settings={}]               Some settings to configure your iframe auto size
  *
  * @setting        {Boolean}         [width=true]         Specify if you want to resize the width of the iframe
  * @setting        {Boolean}         [height=true]        Specify if you want to resize the height of the iframe
@@ -21,7 +21,7 @@
  *
  * @example  	js
  * import { iframeAutoSize } from '@blackbyte/sugar/dom';
- * iframeAutoSize($1, $2);
+ * iframeAutoSize($iframe);
  *
  * @since           1.0.0
  * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectHtml.d.ts

@@ -7,7 +7,7 @@
  *
  * Inject some html into a element and make sure that the scripts are executed
  *
- * @param       {HTMLElement}        $elm           The element to inject content into
+ * @param       {HTMLElement}       $elm           The element to inject content into
  * @param       {String}            html           The html to inject
  *
  * @snippet         injectHtml($1, $2)
@@ -16,7 +16,7 @@
  *
  * @example    js
  * import { injectHtml } from '@blackbyte/sugar/dom'
- *  injectHtml('<html>...</html>`, $myElement);
+ * injectHtml('<html>...</html>`, $myElement);
  *
  * @since           1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectHtml.js

@@ -7,7 +7,7 @@
  *
  * Inject some html into a element and make sure that the scripts are executed
  *
- * @param       {HTMLElement}        $elm           The element to inject content into
+ * @param       {HTMLElement}       $elm           The element to inject content into
  * @param       {String}            html           The html to inject
  *
  * @snippet         injectHtml($1, $2)
@@ -16,7 +16,7 @@
  *
  * @example    js
  * import { injectHtml } from '@blackbyte/sugar/dom'
- *  injectHtml('<html>...</html>`, $myElement);
+ * injectHtml('<html>...</html>`, $myElement);
  *
  * @since           1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectIframeContent.d.ts

@@ -16,7 +16,7 @@
  *
  * @example    js
  * import { injectIframeContent } from '@blackbyte/sugar/dom'
- *  injectIframeContent($myIframe, '<html>...</html>');
+ * injectIframeContent($myIframe, '<html>...</html>');
  *
  * @since           1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectIframeContent.js

@@ -16,7 +16,7 @@
  *
  * @example    js
  * import { injectIframeContent } from '@blackbyte/sugar/dom'
- *  injectIframeContent($myIframe, '<html>...</html>');
+ * injectIframeContent($myIframe, '<html>...</html>');
  *
  * @since           1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectScript.d.ts

@@ -16,7 +16,7 @@
  *
  * @example    js
  * import { injectScript } from '@blackbyte/sugar/dom'
- *  injectScript('dist/js/app.js')
+ * injectScript('dist/js/app.js')
  *
  * @since           1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectScript.js

@@ -17,7 +17,7 @@ import __whenScriptLoaded from '../when/whenScriptLoaded.js';
  *
  * @example    js
  * import { injectScript } from '@blackbyte/sugar/dom'
- *  injectScript('dist/js/app.js')
+ * injectScript('dist/js/app.js')
  *
  * @since           1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/inject/injectStyle.d.ts

@@ -20,7 +20,7 @@
  *
  * @example       js
  * import { injectStyle } from '@blackbyte/sugar/dom';
- *  injectStyle('a { color: red; }');
+ * injectStyle('a { color: red; }');
  *
  * @since       1.0.0
  * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)

package/dist/js/dom/offset/offsetFromParent.d.ts

@@ -7,7 +7,7 @@
  *
  * Get the offset top and left of the passed element from his parent top left point
  *
- * @param 		{HTMLElement} 					          elm  		    The element to get the offset from
+ * @param 		{HTMLElement} 					          $elm  		  The element to get the offset from
  * @return 		{top: number; left: number;} 									The offset top and left object
  *
  * @snippet         offsetFromParent($1)
@@ -16,7 +16,7 @@
  *
  * @example  	js
  * import { offsetFromParent } from '@blackbyte/sugar/dom'
- * const offsetFromParentElm = offsetFromParent(myCoolElement);
+ * const offsetFromParentElm = offsetFromParent($elm);
  * // output : { top : 200, left : 300 }
  *
  * @since           1.0.0

package/dist/js/dom/offset/offsetFromParent.js

@@ -8,7 +8,7 @@ import offsetFromViewport from './offsetFromViewport.js';
  *
  * Get the offset top and left of the passed element from his parent top left point
  *
- * @param 		{HTMLElement} 					          elm  		    The element to get the offset from
+ * @param 		{HTMLElement} 					          $elm  		  The element to get the offset from
  * @return 		{top: number; left: number;} 									The offset top and left object
  *
  * @snippet         offsetFromParent($1)
@@ -17,7 +17,7 @@ import offsetFromViewport from './offsetFromViewport.js';
  *
  * @example  	js
  * import { offsetFromParent } from '@blackbyte/sugar/dom'
- * const offsetFromParentElm = offsetFromParent(myCoolElement);
+ * const offsetFromParentElm = offsetFromParent($elm);
  * // output : { top : 200, left : 300 }
  *
  * @since           1.0.0

package/dist/js/dom/offset/offsetFromViewport.d.ts

@@ -7,8 +7,8 @@
  *
  * Get the offset top and left of the passed element from the document top left point
  *
- * @param 		{HTMLElement} 					        elm  		      The element to get the offset from
- * @return 		{top: number; left: number;} 									The offset top and left object
+ * @param 		{HTMLElement} 					        $elm  		      The element to get the offset from
+ * @return 		{top: number; left: number;} 		                The offset top and left object
  *
  * @snippet         offsetFromViewport($1)
  *
@@ -16,13 +16,13 @@
  *
  * @example  	js
  * import { offsetFromViewport } from '@blackbyte/sugar/dom'
- * const offsetFromViewport = offset(myCoolElement);
+ * const offsetFromViewport = offset($elm);
  * // output : { top : 200, left : 300 }
  *
  * @since           1.0.0
  * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
  */
-export default function offsetFromViewport(elm: HTMLElement): {
+export default function offsetFromViewport($elm: HTMLElement): {
     top: number;
     left: number;
 };

package/dist/js/dom/offset/offsetFromViewport.js

@@ -7,8 +7,8 @@
  *
  * Get the offset top and left of the passed element from the document top left point
  *
- * @param 		{HTMLElement} 					        elm  		      The element to get the offset from
- * @return 		{top: number; left: number;} 									The offset top and left object
+ * @param 		{HTMLElement} 					        $elm  		      The element to get the offset from
+ * @return 		{top: number; left: number;} 		                The offset top and left object
  *
  * @snippet         offsetFromViewport($1)
  *
@@ -16,14 +16,14 @@
  *
  * @example  	js
  * import { offsetFromViewport } from '@blackbyte/sugar/dom'
- * const offsetFromViewport = offset(myCoolElement);
+ * const offsetFromViewport = offset($elm);
  * // output : { top : 200, left : 300 }
  *
  * @since           1.0.0
  * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
  */
-export default function offsetFromViewport(elm) {
-    const box = elm.getBoundingClientRect(), body = document.body, docEl = document.documentElement, scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop, scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft, clientTop = docEl.clientTop || body.clientTop || 0, clientLeft = docEl.clientLeft || body.clientLeft || 0, top = box.top + scrollTop - clientTop, left = box.left + scrollLeft - clientLeft;
+export default function offsetFromViewport($elm) {
+    const box = $elm.getBoundingClientRect(), body = document.body, docEl = document.documentElement, scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop, scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft, clientTop = docEl.clientTop || body.clientTop || 0, clientLeft = docEl.clientLeft || body.clientLeft || 0, top = box.top + scrollTop - clientTop, left = box.left + scrollLeft - clientLeft;
     return {
         top: Math.round(top),
         left: Math.round(left),

package/dist/js/dom/offset/offsetFromViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"offsetFromViewport.js","sourceRoot":"","sources":["../../../../src/js/dom/offset/offsetFromViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,GAAgB;IAIzD,MAAM,GAAG,GAAG,GAAG,CAAC,qBAAqB,EAAE,EACrC,IAAI,GAAG,QAAQ,CAAC,IAAI,EACpB,KAAK,GAAG,QAAQ,CAAC,eAAe,EAChC,SAAS,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EACnE,UAAU,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EACtE,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,EAClD,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,EACrD,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,SAAS,GAAG,SAAS,EACrC,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC;IAC5C,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACpB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;KACvB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"offsetFromViewport.js","sourceRoot":"","sources":["../../../../src/js/dom/offset/offsetFromViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAiB;IAI1D,MAAM,GAAG,GAAG,IAAI,CAAC,qBAAqB,EAAE,EACtC,IAAI,GAAG,QAAQ,CAAC,IAAI,EACpB,KAAK,GAAG,QAAQ,CAAC,eAAe,EAChC,SAAS,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EACnE,UAAU,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EACtE,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,EAClD,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,EACrD,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,SAAS,GAAG,SAAS,EACrC,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC;IAC5C,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACpB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;KACvB,CAAC;AACJ,CAAC"}