@blackbyte/sugar 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/js/clipboard/_exports.d.ts

@@ -1,5 +1,6 @@
+import copyElement from './copyElement.js';
 import copyFile from './copyFile.js';
 import copyText from './copyText.js';
 import readFile from './readFile.js';
 import readText from './readText.js';
-export { copyFile as __copyFile, copyText as __copyText, readFile as __readFile, readText as __readText, copyFile, copyText, readFile, readText, };
+export { copyElement as __copyElement, copyFile as __copyFile, copyText as __copyText, readFile as __readFile, readText as __readText, copyElement, copyFile, copyText, readFile, readText, };

package/dist/js/clipboard/_exports.js

@@ -1,6 +1,7 @@
+import copyElement from './copyElement.js';
 import copyFile from './copyFile.js';
 import copyText from './copyText.js';
 import readFile from './readFile.js';
 import readText from './readText.js';
-export { copyFile as __copyFile, copyText as __copyText, readFile as __readFile, readText as __readText, copyFile, copyText, readFile, readText, };
+export { copyElement as __copyElement, copyFile as __copyFile, copyText as __copyText, readFile as __readFile, readText as __readText, copyElement, copyFile, copyText, readFile, readText, };
 //# sourceMappingURL=_exports.js.map

package/dist/js/clipboard/_exports.js.map

@@ -1 +1 @@
-{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../src/js/clipboard/_exports.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EACL,QAAQ,IAAI,UAAU,EACtB,QAAQ,IAAI,UAAU,EACtB,QAAQ,IAAI,UAAU,EACtB,QAAQ,IAAI,UAAU,EACtB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,CAAC"}
+{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../src/js/clipboard/_exports.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EACL,WAAW,IAAI,aAAa,EAC5B,QAAQ,IAAI,UAAU,EACtB,QAAQ,IAAI,UAAU,EACtB,QAAQ,IAAI,UAAU,EACtB,QAAQ,IAAI,UAAU,EACtB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,CAAC"}

package/dist/js/clipboard/copyElement.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @name                copyElement
+ * @namespace           js.clipboard
+ * @type                Function
+ * @platform            js
+ * @async
+ * @status              stable
+ *
+ * This function allows you to copy to the clipboard the passed dom node element with his style
+ *
+ * @param       {HTMLElement}            $elm            The dom node element to copy to the clipboard
+ *
+ * @todo     tests
+ *
+ * @snippet         copyElement($1)
+ *
+ * @example         js
+ * import { copyElement } from '@blackbyte/sugar/clipboard';
+ * copyElement($elm);
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function copyElement($elm: HTMLElement): void;

package/dist/js/clipboard/copyElement.js

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/**
+ * @name                copyElement
+ * @namespace           js.clipboard
+ * @type                Function
+ * @platform            js
+ * @async
+ * @status              stable
+ *
+ * This function allows you to copy to the clipboard the passed dom node element with his style
+ *
+ * @param       {HTMLElement}            $elm            The dom node element to copy to the clipboard
+ *
+ * @todo     tests
+ *
+ * @snippet         copyElement($1)
+ *
+ * @example         js
+ * import { copyElement } from '@blackbyte/sugar/clipboard';
+ * copyElement($elm);
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function copyElement($elm) {
+    let range;
+    let selection;
+    if (document.body.createTextRange) {
+        range = document.body.createTextRange();
+        range.moveToElement($elm);
+        range.select();
+    }
+    else if (window.getSelection) {
+        selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents($elm);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    document.execCommand('copy');
+    window.getSelection().removeAllRanges();
+}
+//# sourceMappingURL=copyElement.js.map

package/dist/js/clipboard/copyElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyElement.js","sourceRoot":"","sources":["../../../src/js/clipboard/copyElement.ts"],"names":[],"mappings":"AAAA,cAAc;AAEd;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,IAAiB;IACnD,IAAI,KAAK,CAAC;IACV,IAAI,SAAS,CAAC;IAEd,IAAI,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;QAClC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;SAAM,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QAC/B,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;QAClC,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QAC/B,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,SAAS,CAAC,eAAe,EAAE,CAAC;QAC5B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,CAAC,YAAY,EAAE,CAAC,eAAe,EAAE,CAAC;AAC1C,CAAC"}

package/dist/js/clipboard/copyFile.d.ts

@@ -13,7 +13,7 @@
  *
  * @todo     tests
  *
- * @snippet         __copyFile($1)
+ * @snippet         copyFile($1)
  *
  * @example         js
  * import { copyFile } from '@blackbyte/sugar/clipboard';

package/dist/js/clipboard/copyFile.js

@@ -22,7 +22,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
  *
  * @todo     tests
  *
- * @snippet         __copyFile($1)
+ * @snippet         copyFile($1)
  *
  * @example         js
  * import { copyFile } from '@blackbyte/sugar/clipboard';

package/dist/js/clipboard/copyText.d.ts

@@ -13,7 +13,7 @@
  *
  * @todo     tests
  *
- * @snippet         __copy($1)
+ * @snippet         copyText($1)
  *
  * @example         js
  * import { copyText } from '@blackbyte/sugar/clipboard';

package/dist/js/clipboard/copyText.js

@@ -13,7 +13,7 @@
  *
  * @todo     tests
  *
- * @snippet         __copy($1)
+ * @snippet         copyText($1)
  *
  * @example         js
  * import { copyText } from '@blackbyte/sugar/clipboard';

package/dist/js/clipboard/readFile.d.ts

@@ -12,7 +12,7 @@
  *
  * @todo     tests
  *
- * @snippet         __readFile($1)
+ * @snippet         readFile($1)
  *
  * @example         js
  * import { readFile } from '@blackbyte/sugar/clipboard';

package/dist/js/clipboard/readFile.js

@@ -21,7 +21,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
  *
  * @todo     tests
  *
- * @snippet         __readFile($1)
+ * @snippet         readFile($1)
  *
  * @example         js
  * import { readFile } from '@blackbyte/sugar/clipboard';

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

@@ -17,6 +17,10 @@
  *
  * @event       viewport.enter               Dispatched when the passed element enter the viewport
  * @event       viewport.leave               Dispatched when the passed element leave the viewport
+ * @event       viewport.enter.above         Dispatched when the passed element enter the viewport from above
+ * @event       viewport.enter.below         Dispatched when the passed element enter the viewport from below
+ * @event       viewport.leave.above         Dispatched when the passed element leave the viewport from above
+ * @event       viewport.leave.below         Dispatched when the passed element leave the viewport from below
  *
  * @snippet         viewportEvents($1)
  * viewportEvents($1).addEventListener('viewport.enter', (e) => {

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

@@ -1,3 +1,4 @@
+import { distanceFromElementTopToViewportTop } from '../_exports.js';
 const _viewportEventsInited = new WeakMap();
 export default function viewportEvents($elm, settings) {
     let observer, status = 'out';
@@ -16,6 +17,17 @@ export default function viewportEvents($elm, settings) {
             if (status === 'in') {
                 return;
             }
+            const distanceToTop = distanceFromElementTopToViewportTop($elm);
+            if (distanceToTop < window.innerHeight * 0.5) {
+                $elm.dispatchEvent(new CustomEvent('viewport.enter.above', {
+                    bubbles: true,
+                }));
+            }
+            else {
+                $elm.dispatchEvent(new CustomEvent('viewport.enter.below', {
+                    bubbles: true,
+                }));
+            }
             status = 'in';
             $elm.dispatchEvent(new CustomEvent('viewport.enter', {
                 bubbles: true,
@@ -31,6 +43,17 @@ export default function viewportEvents($elm, settings) {
             if (status === 'out') {
                 return;
             }
+            const distanceToTop = distanceFromElementTopToViewportTop($elm);
+            if (distanceToTop < window.innerHeight * 0.5) {
+                $elm.dispatchEvent(new CustomEvent('viewport.leave.above', {
+                    bubbles: true,
+                }));
+            }
+            else {
+                $elm.dispatchEvent(new CustomEvent('viewport.leave.below', {
+                    bubbles: true,
+                }));
+            }
             status = 'out';
             $elm.dispatchEvent(new CustomEvent('viewport.leave', {
                 bubbles: true,

package/dist/js/dom/event/viewportEvents.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewportEvents.js","sourceRoot":"","sources":["../../../../src/js/dom/event/viewportEvents.ts"],"names":[],"mappings":"AAgDA,MAAM,qBAAqB,GAAG,IAAI,OAAO,EAAE,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,IAAiB,EACjB,QAA2C;IAE3C,IAAI,QAAQ,EACV,MAAM,GAAG,KAAK,CAAC;IAEjB,IAAI,qBAAqB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,qBAAqB,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEtC,MAAM,aAAa,mBACjB,MAAM,EAAE,EAAE,EACV,IAAI,EAAE,KAAK,IACR,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CACpB,CAAC;IAEF,QAAQ,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;QACpB,IAAI,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO;QAC5B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;YAChC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YACD,MAAM,GAAG,IAAI,CAAC;YACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;YACF,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YACD,MAAM,GAAG,KAAK,CAAC;YACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC,EACD;QACE,IAAI,EAAE,IAAI,EAAE,WAAW;QACvB,UAAU,EACR,OAAO,aAAa,CAAC,MAAM,KAAK,QAAQ;YACtC,CAAC,CAAC,aAAa,CAAC,MAAM;YACtB,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,IAAI;QACjC,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;KAC/D,CACF,CAAC;IAEF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvB,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"viewportEvents.js","sourceRoot":"","sources":["../../../../src/js/dom/event/viewportEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mCAAmC,EAAE,MAAM,gBAAgB,CAAC;AAsDrE,MAAM,qBAAqB,GAAG,IAAI,OAAO,EAAE,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,IAAiB,EACjB,QAA2C;IAE3C,IAAI,QAAQ,EACV,MAAM,GAAG,KAAK,CAAC;IAEjB,IAAI,qBAAqB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,qBAAqB,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEtC,MAAM,aAAa,mBACjB,MAAM,EAAE,EAAE,EACV,IAAI,EAAE,KAAK,IACR,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CACpB,CAAC;IAEF,QAAQ,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;QACpB,IAAI,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO;QAC5B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;YAChC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YAED,MAAM,aAAa,GAAG,mCAAmC,CAAC,IAAI,CAAC,CAAC;YAChE,IAAI,aAAa,GAAG,MAAM,CAAC,WAAW,GAAG,GAAG,EAAE,CAAC;gBAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;oBACtC,OAAO,EAAE,IAAI;iBACd,CAAC,CACH,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;oBACtC,OAAO,EAAE,IAAI;iBACd,CAAC,CACH,CAAC;YACJ,CAAC;YAED,MAAM,GAAG,IAAI,CAAC;YACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;YACF,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YAED,MAAM,aAAa,GAAG,mCAAmC,CAAC,IAAI,CAAC,CAAC;YAChE,IAAI,aAAa,GAAG,MAAM,CAAC,WAAW,GAAG,GAAG,EAAE,CAAC;gBAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;oBACtC,OAAO,EAAE,IAAI;iBACd,CAAC,CACH,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;oBACtC,OAAO,EAAE,IAAI;iBACd,CAAC,CACH,CAAC;YACJ,CAAC;YAED,MAAM,GAAG,KAAK,CAAC;YACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC,EACD;QACE,IAAI,EAAE,IAAI,EAAE,WAAW;QACvB,UAAU,EACR,OAAO,aAAa,CAAC,MAAM,KAAK,QAAQ;YACtC,CAAC,CAAC,aAAa,CAAC,MAAM;YACtB,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,IAAI;QACjC,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;KAC/D,CACF,CAAC;IAEF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvB,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/js/feature/sectionClasses.d.ts

@@ -6,12 +6,21 @@
  * @status          stable
  *
  *
- * This feature allows you to add some classes on your sections when they are in the viewport, near the viewport, etc...
+ * This feature allows you to add some classes on your sections when they are in the viewport, near the viewport, above, etc...
  * 1. `-in-viewport`: Added when the section is in the viewport
+ * 2. `-from-above`: Added when the section enters the viewport from above
+ * 3. `-from-below`: Added when the section enters the viewport from below
+ * 4. `-above-viewport`: Added when the section is above the viewport
+ * 5. `-below-viewport`: Added when the section is below the viewport
  *
  * @param           {TSectionClassesSettings}          [settings={}]           The settings you want to override
  *
  * @setting        {String}          [inClass='-in-viewport']        The class to add when the section is in the viewport
+ * @setting        {Boolean}         [keepInClassWhenAbove=false]   Whether to keep the inClass when the section is above the viewport
+ * @setting        {String}          [fromAboveClass='-from-above'] The class to add when the section enters the viewport from above
+ * @setting        {String}          [fromBelowClass='-from-below'] The class to add when the section enters the viewport from below
+ * @setting        {String}          [aboveClass='-above-viewport'] The class to add when the section is above the viewport
+ * @setting        {String}          [belowClass='-below-viewport'] The class to add when
  * @setting        {Number}          [offset=25]                     The offset in px to consider the section is in the viewport
  *
  * @snippet          sectionClasses($1);
@@ -25,6 +34,12 @@
  */
 export type TSectionClassesSettings = {
     inClass: string;
+    keepInClassWhenAbove: boolean;
+    fromAboveClass: string;
+    fromBelowClass: string;
+    aboveClass: string;
+    belowClass: string;
     offset: number;
+    once?: boolean;
 };
 export default function sectionClasses(settings?: Partial<TSectionClassesSettings>): void;

package/dist/js/feature/sectionClasses.js

@@ -6,12 +6,21 @@
  * @status          stable
  *
  *
- * This feature allows you to add some classes on your sections when they are in the viewport, near the viewport, etc...
+ * This feature allows you to add some classes on your sections when they are in the viewport, near the viewport, above, etc...
  * 1. `-in-viewport`: Added when the section is in the viewport
+ * 2. `-from-above`: Added when the section enters the viewport from above
+ * 3. `-from-below`: Added when the section enters the viewport from below
+ * 4. `-above-viewport`: Added when the section is above the viewport
+ * 5. `-below-viewport`: Added when the section is below the viewport
  *
  * @param           {TSectionClassesSettings}          [settings={}]           The settings you want to override
  *
  * @setting        {String}          [inClass='-in-viewport']        The class to add when the section is in the viewport
+ * @setting        {Boolean}         [keepInClassWhenAbove=false]   Whether to keep the inClass when the section is above the viewport
+ * @setting        {String}          [fromAboveClass='-from-above'] The class to add when the section enters the viewport from above
+ * @setting        {String}          [fromBelowClass='-from-below'] The class to add when the section enters the viewport from below
+ * @setting        {String}          [aboveClass='-above-viewport'] The class to add when the section is above the viewport
+ * @setting        {String}          [belowClass='-below-viewport'] The class to add when
  * @setting        {Number}          [offset=25]                     The offset in px to consider the section is in the viewport
  *
  * @snippet          sectionClasses($1);
@@ -25,20 +34,59 @@
  */
 import { querySelectorLive, viewportEvents } from '@blackbyte/sugar/dom';
 export default function sectionClasses(settings) {
-    const finalSettings = Object.assign({ inClass: '-in-viewport', offset: 25 }, settings);
+    const finalSettings = Object.assign({ inClass: '-in-viewport', keepInClassWhenAbove: false, fromAboveClass: '-from-above', fromBelowClass: '-from-below', aboveClass: '-above-viewport', belowClass: '-below-viewport', offset: 25 }, settings);
     querySelectorLive('section', ($section) => {
         // listen for enter/leave viewport
         viewportEvents($section, {
             offset: finalSettings.offset,
+            once: finalSettings.once,
         });
-        $section.addEventListener('viewport.enter', () => {
+        const enterHandler = () => {
             // add the inClass on the section
             $section.classList.add(finalSettings.inClass);
-        });
-        $section.addEventListener('viewport.leave', () => {
+            // remove above/below classes
+            $section.classList.remove(finalSettings.aboveClass);
+            $section.classList.remove(finalSettings.belowClass);
+            // stop if "once" setting is enabled
+            if (finalSettings.once) {
+                $section.removeEventListener('viewport.enter', enterHandler);
+                $section.removeEventListener('viewport.leave', leaveHandler);
+                $section.removeEventListener('viewport.enter.above', enterAboveHandler);
+                $section.removeEventListener('viewport.enter.below', enterBelowHandler);
+            }
+        };
+        const leaveHandler = () => {
+            // remove the inClass on the section
+            $section.classList.remove(finalSettings.fromAboveClass);
+            $section.classList.remove(finalSettings.fromBelowClass);
+        };
+        const enterBelowHandler = () => {
+            $section.classList.add(finalSettings.fromBelowClass);
+        };
+        const enterAboveHandler = () => {
+            // add the inClass on the section
+            $section.classList.add(finalSettings.fromAboveClass);
+        };
+        const leaveAboveHandler = () => {
+            // if we want to keep the inClass when above
+            if (!finalSettings.keepInClassWhenAbove) {
+                $section.classList.remove(finalSettings.inClass);
+            }
             // remove the inClass on the section
+            $section.classList.add(finalSettings.aboveClass);
+        };
+        const leaveBelowHandler = () => {
+            // remove the inClass
             $section.classList.remove(finalSettings.inClass);
-        });
+            // remove the bellow class
+            $section.classList.add(finalSettings.belowClass);
+        };
+        $section.addEventListener('viewport.enter.above', enterAboveHandler);
+        $section.addEventListener('viewport.enter.below', enterBelowHandler);
+        $section.addEventListener('viewport.leave.above', leaveAboveHandler);
+        $section.addEventListener('viewport.leave.below', leaveBelowHandler);
+        $section.addEventListener('viewport.enter', enterHandler);
+        $section.addEventListener('viewport.leave', leaveHandler);
     });
 }
 //# sourceMappingURL=sectionClasses.js.map

package/dist/js/feature/sectionClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"sectionClasses.js","sourceRoot":"","sources":["../../../src/js/feature/sectionClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAOzE,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,QAA2C;IAE3C,MAAM,aAAa,mBACjB,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,EAAE,IACP,QAAQ,CACZ,CAAC;IAEF,iBAAiB,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,EAAE;QACxC,kCAAkC;QAClC,cAAc,CAAC,QAAQ,EAAE;YACvB,MAAM,EAAE,aAAa,CAAC,MAAM;SAC7B,CAAC,CAAC;QACH,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,GAAG,EAAE;YAC/C,iCAAiC;YACjC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,GAAG,EAAE;YAC/C,oCAAoC;YACpC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"sectionClasses.js","sourceRoot":"","sources":["../../../src/js/feature/sectionClasses.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blackbyte/sugar",
   "description": "The toolkit that you missed... like a sugar in your coffee!",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "keywords": [
     "javascript",
     "typescript",