embla-carousel-class-names - npm Package Compare versions

Comparing version 8.3.1 to 8.4.0

cjs/components/Options.d.ts

 import { CreateOptionsType } from 'embla-carousel';
+export type ClassNameOptionType = string | string[];
+export type ClassNamesListType = {
+    snapped: string[];
+    inView: string[];
+    draggable: string[];
+    dragging: string[];
+    loop: string[];
+};
 export type OptionsType = CreateOptionsType<{
-    snapped: string;
-    inView: string;
-    draggable: string;
-    dragging: string;
+    [Key in keyof ClassNamesListType]: ClassNameOptionType;
 }>;
 export declare const defaultOptions: OptionsType;

cjs/components/utils.d.ts

@@ -1,3 +0,4 @@
-export declare function removeClass(node: HTMLElement, className: string): void;
-export declare function addClass(node: HTMLElement, className: string): void;
-export declare function nodeListToArray(nodeList: NodeListOf<Element>): HTMLElement[];
+import { ClassNameOptionType } from './Options';
+export declare function normalizeClassNames(classNames: ClassNameOptionType): string[];
+export declare function removeClass(node: HTMLElement, classNames: string[]): void;
+export declare function addClass(node: HTMLElement, classNames: string[]): void;

cjs/embla-carousel-class-names.cjs.js

@@ -9,21 +9,17 @@ 'use strict';
   draggable: 'is-draggable',
-  dragging: 'is-dragging'
+  dragging: 'is-dragging',
+  loop: 'is-loop'
 };
 
-function removeClass(node, className) {
-  if (!node || !className) return;
-  const {
-    classList
-  } = node;
-  if (classList.contains(className)) classList.remove(className);
+function normalizeClassNames(classNames) {
+  const normalized = Array.isArray(classNames) ? classNames : [classNames];
+  return normalized.filter(Boolean);
 }
-function addClass(node, className) {
-  if (!node || !className) return;
-  const {
-    classList
-  } = node;
-  if (!classList.contains(className)) classList.add(className);
+function removeClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.remove(...classNames);
 }
-function nodeListToArray(nodeList) {
-  return Array.from(nodeList);
+function addClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.add(...classNames);
 }
@@ -36,5 +32,14 @@
   let slides;
+  let snappedIndexes = [];
+  let inViewIndexes = [];
   const selectedEvents = ['select'];
   const draggingEvents = ['pointerDown', 'pointerUp'];
   const inViewEvents = ['slidesInView'];
+  const classNames = {
+    snapped: [],
+    inView: [],
+    draggable: [],
+    dragging: [],
+    loop: []
+  };
   function init(emblaApiInstance, optionsHandler) {
@@ -51,10 +56,21 @@ emblaApi = emblaApiInstance;
     slides = emblaApi.slideNodes();
-    const isDraggable = !!emblaApi.internalEngine().options.watchDrag;
-    if (isDraggable) {
-      addClass(root, options.draggable);
+    const {
+      watchDrag,
+      loop
+    } = emblaApi.internalEngine().options;
+    const isDraggable = !!watchDrag;
+    if (options.loop && loop) {
+      classNames.loop = normalizeClassNames(options.loop);
+      addClass(root, classNames.loop);
     }
+    if (options.draggable && isDraggable) {
+      classNames.draggable = normalizeClassNames(options.draggable);
+      addClass(root, classNames.draggable);
+    }
     if (options.dragging) {
+      classNames.dragging = normalizeClassNames(options.dragging);
       draggingEvents.forEach(evt => emblaApi.on(evt, toggleDraggingClass));
     }
     if (options.snapped) {
+      classNames.snapped = normalizeClassNames(options.snapped);
       selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
@@ -64,2 +80,3 @@ toggleSnappedClasses();
     if (options.inView) {
+      classNames.inView = normalizeClassNames(options.inView);
       inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
@@ -70,17 +87,25 @@ toggleInViewClasses();
   function destroy() {
-    removeClass(root, options.draggable);
     draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
     selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
     inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
-    slides.forEach(slide => removeClass(slide, options.snapped));
+    removeClass(root, classNames.loop);
+    removeClass(root, classNames.draggable);
+    removeClass(root, classNames.dragging);
+    toggleSlideClasses([], snappedIndexes, classNames.snapped);
+    toggleSlideClasses([], inViewIndexes, classNames.inView);
+    Object.keys(classNames).forEach(classNameKey => {
+      const key = classNameKey;
+      classNames[key] = [];
+    });
   }
   function toggleDraggingClass(_, evt) {
-    if (evt === 'pointerDown') addClass(root, options.dragging);else removeClass(root, options.dragging);
+    const toggleClass = evt === 'pointerDown' ? addClass : removeClass;
+    toggleClass(root, classNames.dragging);
   }
-  function toggleSlideClasses(slideIndexes, className) {
-    const container = emblaApi.containerNode();
-    const slideNodeList = container.querySelectorAll(`.${className}`);
-    const removeClassSlides = nodeListToArray(slideNodeList);
-    removeClassSlides.forEach(slide => removeClass(slide, className));
-    slideIndexes.forEach(index => addClass(slides[index], className));
+  function toggleSlideClasses(addClassIndexes = [], removeClassIndexes = [], classNames) {
+    const removeClassSlides = removeClassIndexes.map(index => slides[index]);
+    const addClassSlides = addClassIndexes.map(index => slides[index]);
+    removeClassSlides.forEach(slide => removeClass(slide, classNames));
+    addClassSlides.forEach(slide => addClass(slide, classNames));
+    return addClassIndexes;
   }
@@ -91,8 +116,8 @@ function toggleSnappedClasses() {
     } = emblaApi.internalEngine();
-    const slideIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
-    toggleSlideClasses(slideIndexes, options.snapped);
+    const newSnappedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+    snappedIndexes = toggleSlideClasses(newSnappedIndexes, snappedIndexes, classNames.snapped);
   }
   function toggleInViewClasses() {
-    const slideIndexes = emblaApi.slidesInView();
-    toggleSlideClasses(slideIndexes, options.inView);
+    const newInViewIndexes = emblaApi.slidesInView();
+    inViewIndexes = toggleSlideClasses(newInViewIndexes, inViewIndexes, classNames.inView);
   }
@@ -99,0 +124,0 @@ const self = {

cjs/package.json

 {
   "name": "embla-carousel-class-names",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "David Jerleke",
@@ -51,3 +51,3 @@ "description": "A class name toggle plugin for Embla Carousel",
   "peerDependencies": {
-    "embla-carousel": "8.3.1"
+    "embla-carousel": "8.4.0"
   },
@@ -54,0 +54,0 @@ "main": "embla-carousel-class-names.cjs.js",

components/Options.d.ts

 import { CreateOptionsType } from 'embla-carousel';
+export type ClassNameOptionType = string | string[];
+export type ClassNamesListType = {
+    snapped: string[];
+    inView: string[];
+    draggable: string[];
+    dragging: string[];
+    loop: string[];
+};
 export type OptionsType = CreateOptionsType<{
-    snapped: string;
-    inView: string;
-    draggable: string;
-    dragging: string;
+    [Key in keyof ClassNamesListType]: ClassNameOptionType;
 }>;
 export declare const defaultOptions: OptionsType;

components/utils.d.ts

@@ -1,3 +0,4 @@
-export declare function removeClass(node: HTMLElement, className: string): void;
-export declare function addClass(node: HTMLElement, className: string): void;
-export declare function nodeListToArray(nodeList: NodeListOf<Element>): HTMLElement[];
+import { ClassNameOptionType } from './Options';
+export declare function normalizeClassNames(classNames: ClassNameOptionType): string[];
+export declare function removeClass(node: HTMLElement, classNames: string[]): void;
+export declare function addClass(node: HTMLElement, classNames: string[]): void;

embla-carousel-class-names.umd.js

@@ -1,1 +0,1 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(n="undefined"!=typeof globalThis?globalThis:n||self).EmblaCarouselClassNames=e()}(this,(function(){"use strict";const n={active:!0,breakpoints:{},snapped:"is-snapped",inView:"is-in-view",draggable:"is-draggable",dragging:"is-dragging"};function e(n,e){if(!n||!e)return;const{classList:o}=n;o.contains(e)&&o.remove(e)}function o(n,e){if(!n||!e)return;const{classList:o}=n;o.contains(e)||o.add(e)}function i(t={}){let s,a,r,c;const f=["select"],d=["pointerDown","pointerUp"],l=["slidesInView"];function g(n,i){"pointerDown"===i?o(r,s.dragging):e(r,s.dragging)}function p(n,i){const t=a.containerNode().querySelectorAll(`.${i}`);var s;(s=t,Array.from(s)).forEach((n=>e(n,i))),n.forEach((n=>o(c[n],i)))}function u(){const{slideRegistry:n}=a.internalEngine();p(n[a.selectedScrollSnap()],s.snapped)}function h(){p(a.slidesInView(),s.inView)}return{name:"classNames",options:t,init:function(e,p){a=e;const{mergeOptions:E,optionsAtMedia:b}=p,m=E(n,i.globalOptions),w=E(m,t);s=b(w),r=a.rootNode(),c=a.slideNodes(),!!a.internalEngine().options.watchDrag&&o(r,s.draggable),s.dragging&&d.forEach((n=>a.on(n,g))),s.snapped&&(f.forEach((n=>a.on(n,u))),u()),s.inView&&(l.forEach((n=>a.on(n,h))),h())},destroy:function(){e(r,s.draggable),d.forEach((n=>a.off(n,g))),f.forEach((n=>a.off(n,u))),l.forEach((n=>a.off(n,h))),c.forEach((n=>e(n,s.snapped)))}}}return i.globalOptions=void 0,i}));
+!function(n,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(n="undefined"!=typeof globalThis?globalThis:n||self).EmblaCarouselClassNames=o()}(this,(function(){"use strict";const n={active:!0,breakpoints:{},snapped:"is-snapped",inView:"is-in-view",draggable:"is-draggable",dragging:"is-dragging",loop:"is-loop"};function o(n){return(Array.isArray(n)?n:[n]).filter(Boolean)}function e(n,o){n&&o.length&&n.classList.remove(...o)}function i(n,o){n&&o.length&&n.classList.add(...o)}function a(t={}){let s,r,g,l,d=[],p=[];const c=["select"],f=["pointerDown","pointerUp"],u=["slidesInView"],b={snapped:[],inView:[],draggable:[],dragging:[],loop:[]};function h(n,o){("pointerDown"===o?i:e)(g,b.dragging)}function w(n=[],o=[],a){const t=o.map((n=>l[n])),s=n.map((n=>l[n]));return t.forEach((n=>e(n,a))),s.forEach((n=>i(n,a))),n}function E(){const{slideRegistry:n}=r.internalEngine(),o=n[r.selectedScrollSnap()];d=w(o,d,b.snapped)}function m(){const n=r.slidesInView();p=w(n,p,b.inView)}return{name:"classNames",options:t,init:function(e,d){r=e;const{mergeOptions:p,optionsAtMedia:w}=d,y=p(n,a.globalOptions),V=p(y,t);s=w(V),g=r.rootNode(),l=r.slideNodes();const{watchDrag:v,loop:N}=r.internalEngine().options,O=!!v;s.loop&&N&&(b.loop=o(s.loop),i(g,b.loop)),s.draggable&&O&&(b.draggable=o(s.draggable),i(g,b.draggable)),s.dragging&&(b.dragging=o(s.dragging),f.forEach((n=>r.on(n,h)))),s.snapped&&(b.snapped=o(s.snapped),c.forEach((n=>r.on(n,E))),E()),s.inView&&(b.inView=o(s.inView),u.forEach((n=>r.on(n,m))),m())},destroy:function(){f.forEach((n=>r.off(n,h))),c.forEach((n=>r.off(n,E))),u.forEach((n=>r.off(n,m))),e(g,b.loop),e(g,b.draggable),e(g,b.dragging),w([],d,b.snapped),w([],p,b.inView),Object.keys(b).forEach((n=>{b[n]=[]}))}}}return a.globalOptions=void 0,a}));

esm/components/Options.d.ts

 import { CreateOptionsType } from 'embla-carousel';
+export type ClassNameOptionType = string | string[];
+export type ClassNamesListType = {
+    snapped: string[];
+    inView: string[];
+    draggable: string[];
+    dragging: string[];
+    loop: string[];
+};
 export type OptionsType = CreateOptionsType<{
-    snapped: string;
-    inView: string;
-    draggable: string;
-    dragging: string;
+    [Key in keyof ClassNamesListType]: ClassNameOptionType;
 }>;
 export declare const defaultOptions: OptionsType;

esm/components/utils.d.ts

@@ -1,3 +0,4 @@
-export declare function removeClass(node: HTMLElement, className: string): void;
-export declare function addClass(node: HTMLElement, className: string): void;
-export declare function nodeListToArray(nodeList: NodeListOf<Element>): HTMLElement[];
+import { ClassNameOptionType } from './Options.js';
+export declare function normalizeClassNames(classNames: ClassNameOptionType): string[];
+export declare function removeClass(node: HTMLElement, classNames: string[]): void;
+export declare function addClass(node: HTMLElement, classNames: string[]): void;

esm/embla-carousel-class-names.esm.js

@@ -7,21 +7,17 @@ const defaultOptions = {
   draggable: 'is-draggable',
-  dragging: 'is-dragging'
+  dragging: 'is-dragging',
+  loop: 'is-loop'
 };
 
-function removeClass(node, className) {
-  if (!node || !className) return;
-  const {
-    classList
-  } = node;
-  if (classList.contains(className)) classList.remove(className);
+function normalizeClassNames(classNames) {
+  const normalized = Array.isArray(classNames) ? classNames : [classNames];
+  return normalized.filter(Boolean);
 }
-function addClass(node, className) {
-  if (!node || !className) return;
-  const {
-    classList
-  } = node;
-  if (!classList.contains(className)) classList.add(className);
+function removeClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.remove(...classNames);
 }
-function nodeListToArray(nodeList) {
-  return Array.from(nodeList);
+function addClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.add(...classNames);
 }
@@ -34,5 +30,14 @@
   let slides;
+  let snappedIndexes = [];
+  let inViewIndexes = [];
   const selectedEvents = ['select'];
   const draggingEvents = ['pointerDown', 'pointerUp'];
   const inViewEvents = ['slidesInView'];
+  const classNames = {
+    snapped: [],
+    inView: [],
+    draggable: [],
+    dragging: [],
+    loop: []
+  };
   function init(emblaApiInstance, optionsHandler) {
@@ -49,10 +54,21 @@ emblaApi = emblaApiInstance;
     slides = emblaApi.slideNodes();
-    const isDraggable = !!emblaApi.internalEngine().options.watchDrag;
-    if (isDraggable) {
-      addClass(root, options.draggable);
+    const {
+      watchDrag,
+      loop
+    } = emblaApi.internalEngine().options;
+    const isDraggable = !!watchDrag;
+    if (options.loop && loop) {
+      classNames.loop = normalizeClassNames(options.loop);
+      addClass(root, classNames.loop);
     }
+    if (options.draggable && isDraggable) {
+      classNames.draggable = normalizeClassNames(options.draggable);
+      addClass(root, classNames.draggable);
+    }
     if (options.dragging) {
+      classNames.dragging = normalizeClassNames(options.dragging);
       draggingEvents.forEach(evt => emblaApi.on(evt, toggleDraggingClass));
     }
     if (options.snapped) {
+      classNames.snapped = normalizeClassNames(options.snapped);
       selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
@@ -62,2 +78,3 @@ toggleSnappedClasses();
     if (options.inView) {
+      classNames.inView = normalizeClassNames(options.inView);
       inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
@@ -68,17 +85,25 @@ toggleInViewClasses();
   function destroy() {
-    removeClass(root, options.draggable);
     draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
     selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
     inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
-    slides.forEach(slide => removeClass(slide, options.snapped));
+    removeClass(root, classNames.loop);
+    removeClass(root, classNames.draggable);
+    removeClass(root, classNames.dragging);
+    toggleSlideClasses([], snappedIndexes, classNames.snapped);
+    toggleSlideClasses([], inViewIndexes, classNames.inView);
+    Object.keys(classNames).forEach(classNameKey => {
+      const key = classNameKey;
+      classNames[key] = [];
+    });
   }
   function toggleDraggingClass(_, evt) {
-    if (evt === 'pointerDown') addClass(root, options.dragging);else removeClass(root, options.dragging);
+    const toggleClass = evt === 'pointerDown' ? addClass : removeClass;
+    toggleClass(root, classNames.dragging);
   }
-  function toggleSlideClasses(slideIndexes, className) {
-    const container = emblaApi.containerNode();
-    const slideNodeList = container.querySelectorAll(`.${className}`);
-    const removeClassSlides = nodeListToArray(slideNodeList);
-    removeClassSlides.forEach(slide => removeClass(slide, className));
-    slideIndexes.forEach(index => addClass(slides[index], className));
+  function toggleSlideClasses(addClassIndexes = [], removeClassIndexes = [], classNames) {
+    const removeClassSlides = removeClassIndexes.map(index => slides[index]);
+    const addClassSlides = addClassIndexes.map(index => slides[index]);
+    removeClassSlides.forEach(slide => removeClass(slide, classNames));
+    addClassSlides.forEach(slide => addClass(slide, classNames));
+    return addClassIndexes;
   }
@@ -89,8 +114,8 @@ function toggleSnappedClasses() {
     } = emblaApi.internalEngine();
-    const slideIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
-    toggleSlideClasses(slideIndexes, options.snapped);
+    const newSnappedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+    snappedIndexes = toggleSlideClasses(newSnappedIndexes, snappedIndexes, classNames.snapped);
   }
   function toggleInViewClasses() {
-    const slideIndexes = emblaApi.slidesInView();
-    toggleSlideClasses(slideIndexes, options.inView);
+    const newInViewIndexes = emblaApi.slidesInView();
+    inViewIndexes = toggleSlideClasses(newInViewIndexes, inViewIndexes, classNames.inView);
   }
@@ -97,0 +122,0 @@ const self = {

esm/package.json

 {
   "name": "embla-carousel-class-names",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "David Jerleke",
@@ -51,3 +51,3 @@ "description": "A class name toggle plugin for Embla Carousel",
   "peerDependencies": {
-    "embla-carousel": "8.3.1"
+    "embla-carousel": "8.4.0"
   },
@@ -54,0 +54,0 @@ "module": "embla-carousel-class-names.esm.js",

package.json

 {
   "name": "embla-carousel-class-names",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "David Jerleke",
@@ -62,3 +62,3 @@ "description": "A class name toggle plugin for Embla Carousel",
   "peerDependencies": {
-    "embla-carousel": "8.3.1"
+    "embla-carousel": "8.4.0"
   },
@@ -65,0 +65,0 @@ "exports": {

README.md

@@ -112,2 +112,4 @@ <br />
       <img src="https://avatars2.githubusercontent.com/u/3440094?s=120&v=4" title="wopian" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/nikrowell">
+      <img src="https://avatars2.githubusercontent.com/u/260039?s=120&v=4" title="nikrowell" width="50" height="50" style="max-width: 100%" />
     </a><a href="https://github.com/horseeyephil">
@@ -141,6 +143,6 @@ <img src="https://avatars2.githubusercontent.com/u/32337092?s=120&v=4" title="horseeyephil" width="50" height="50" style="max-width: 100%" />
       <img src="https://avatars2.githubusercontent.com/u/9334305?s=120&v=4" title="silllli" width="50" height="50" style="max-width: 100%" />
-    </a><a href="https://github.com/nikrowell">
-      <img src="https://avatars2.githubusercontent.com/u/260039?s=120&v=4" title="nikrowell" width="50" height="50" style="max-width: 100%" />
     </a><a href="https://github.com/mujahidfa">
       <img src="https://avatars2.githubusercontent.com/u/17759705?s=120&v=4" title="mujahidfa" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/Mitch-At-Work">
+      <img src="https://avatars2.githubusercontent.com/u/99835933?s=120&v=4" title="Mitch-At-Work" width="50" height="50" style="max-width: 100%" />
     </a><a href="https://github.com/romellem">
@@ -147,0 +149,0 @@ <img src="https://avatars2.githubusercontent.com/u/8504000?s=120&v=4" title="romellem" width="50" height="50" style="max-width: 100%" />

No alert changes

Improved metrics

Total package byte prevSize

56698

18.11%

Lines of code

356

24.48%

Number of lines in readme file

230

0.88%

No dependency changes