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

Comparing version 8.0.0-rc11 to 8.0.0-rc12

components/Options.d.ts

 import { CreateOptionsType } from 'embla-carousel/components/Options';
 export type OptionsType = CreateOptionsType<{
-    selected: string;
+    snapped: string;
+    inView: string;
     draggable: string;
@@ -5,0 +6,0 @@ dragging: string;

components/utils.d.ts

 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[];

embla-carousel-class-names.cjs.js

@@ -6,3 +6,4 @@ 'use strict';
   breakpoints: {},
-  selected: 'is-selected',
+  snapped: 'is-snapped',
+  inView: 'is-in-view',
   draggable: 'is-draggable',
@@ -13,9 +14,18 @@ dragging: 'is-dragging'
 function removeClass(node, className) {
-  const cl = node.classList;
-  if (className && cl.contains(className)) cl.remove(className);
+  if (!node || !className) return;
+  const {
+    classList
+  } = node;
+  if (classList.contains(className)) classList.remove(className);
 }
 function addClass(node, className) {
-  const cl = node.classList;
-  if (className && !cl.contains(className)) cl.add(className);
+  if (!node || !className) return;
+  const {
+    classList
+  } = node;
+  if (!classList.contains(className)) classList.add(className);
 }
+function nodeListToArray(nodeList) {
+  return Array.from(nodeList);
+}
 
@@ -27,4 +37,5 @@ function ClassNames(userOptions = {}) {
   let slides;
-  const selectedEvents = ['select', 'pointerUp'];
+  const selectedEvents = ['select'];
   const draggingEvents = ['pointerDown', 'pointerUp'];
+  const inViewEvents = ['slidesInView'];
   function init(emblaApiInstance, optionsHandler) {
@@ -48,6 +59,10 @@ emblaApi = emblaApiInstance;
     }
-    if (options.selected) {
-      selectedEvents.forEach(evt => emblaApi.on(evt, toggleSelectedClass));
-      toggleSelectedClass();
+    if (options.snapped) {
+      selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
+      toggleSnappedClasses();
     }
+    if (options.inView) {
+      inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
+      toggleInViewClasses();
+    }
   }
@@ -57,4 +72,5 @@ function destroy() {
     draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
-    selectedEvents.forEach(evt => emblaApi.off(evt, toggleSelectedClass));
-    slides.forEach(slide => removeClass(slide, options.selected));
+    selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
+    inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
+    slides.forEach(slide => removeClass(slide, options.snapped));
   }
@@ -64,8 +80,20 @@ function toggleDraggingClass(_, evt) {
   }
-  function toggleSelectedClass() {
-    const inView = emblaApi.slidesInView(true);
-    const notInView = emblaApi.slidesNotInView(true);
-    notInView.forEach(index => removeClass(slides[index], options.selected));
-    inView.forEach(index => addClass(slides[index], options.selected));
+  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 toggleSnappedClasses() {
+    const {
+      slideRegistry
+    } = emblaApi.internalEngine();
+    const slideIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+    toggleSlideClasses(slideIndexes, options.snapped);
+  }
+  function toggleInViewClasses() {
+    const slideIndexes = emblaApi.slidesInView();
+    toggleSlideClasses(slideIndexes, options.inView);
+  }
   const self = {
@@ -72,0 +100,0 @@ name: 'classNames',

embla-carousel-class-names.esm.js

 const defaultOptions = {
   active: true,
   breakpoints: {},
-  selected: 'is-selected',
+  snapped: 'is-snapped',
+  inView: 'is-in-view',
   draggable: 'is-draggable',
@@ -10,9 +11,18 @@ dragging: 'is-dragging'
 function removeClass(node, className) {
-  const cl = node.classList;
-  if (className && cl.contains(className)) cl.remove(className);
+  if (!node || !className) return;
+  const {
+    classList
+  } = node;
+  if (classList.contains(className)) classList.remove(className);
 }
 function addClass(node, className) {
-  const cl = node.classList;
-  if (className && !cl.contains(className)) cl.add(className);
+  if (!node || !className) return;
+  const {
+    classList
+  } = node;
+  if (!classList.contains(className)) classList.add(className);
 }
+function nodeListToArray(nodeList) {
+  return Array.from(nodeList);
+}
 
@@ -24,4 +34,5 @@ function ClassNames(userOptions = {}) {
   let slides;
-  const selectedEvents = ['select', 'pointerUp'];
+  const selectedEvents = ['select'];
   const draggingEvents = ['pointerDown', 'pointerUp'];
+  const inViewEvents = ['slidesInView'];
   function init(emblaApiInstance, optionsHandler) {
@@ -45,6 +56,10 @@ emblaApi = emblaApiInstance;
     }
-    if (options.selected) {
-      selectedEvents.forEach(evt => emblaApi.on(evt, toggleSelectedClass));
-      toggleSelectedClass();
+    if (options.snapped) {
+      selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
+      toggleSnappedClasses();
     }
+    if (options.inView) {
+      inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
+      toggleInViewClasses();
+    }
   }
@@ -54,4 +69,5 @@ function destroy() {
     draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
-    selectedEvents.forEach(evt => emblaApi.off(evt, toggleSelectedClass));
-    slides.forEach(slide => removeClass(slide, options.selected));
+    selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
+    inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
+    slides.forEach(slide => removeClass(slide, options.snapped));
   }
@@ -61,8 +77,20 @@ function toggleDraggingClass(_, evt) {
   }
-  function toggleSelectedClass() {
-    const inView = emblaApi.slidesInView(true);
-    const notInView = emblaApi.slidesNotInView(true);
-    notInView.forEach(index => removeClass(slides[index], options.selected));
-    inView.forEach(index => addClass(slides[index], options.selected));
+  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 toggleSnappedClasses() {
+    const {
+      slideRegistry
+    } = emblaApi.internalEngine();
+    const slideIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+    toggleSlideClasses(slideIndexes, options.snapped);
+  }
+  function toggleInViewClasses() {
+    const slideIndexes = emblaApi.slidesInView();
+    toggleSlideClasses(slideIndexes, options.inView);
+  }
   const self = {
@@ -69,0 +97,0 @@ name: 'classNames',

embla-carousel-class-names.umd.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).EmblaCarouselClassNames=n()}(this,(function(){"use strict";const e={active:!0,breakpoints:{},selected:"is-selected",draggable:"is-draggable",dragging:"is-dragging"};function n(e,n){const o=e.classList;n&&o.contains(n)&&o.remove(n)}function o(e,n){const o=e.classList;n&&!o.contains(n)&&o.add(n)}function t(i={}){let s,a,c,d;const r=["select","pointerUp"],l=["pointerDown","pointerUp"];function f(e,t){"pointerDown"===t?o(c,s.dragging):n(c,s.dragging)}function g(){const e=a.slidesInView(!0);a.slidesNotInView(!0).forEach((e=>n(d[e],s.selected))),e.forEach((e=>o(d[e],s.selected)))}return{name:"classNames",options:i,init:function(n,p){a=n;const{mergeOptions:u,optionsAtMedia:b}=p,h=u(e,t.globalOptions),m=u(h,i);s=b(m),c=a.rootNode(),d=a.slideNodes(),!!a.internalEngine().options.watchDrag&&o(c,s.draggable),s.dragging&&l.forEach((e=>a.on(e,f))),s.selected&&(r.forEach((e=>a.on(e,g))),g())},destroy:function(){n(c,s.draggable),l.forEach((e=>a.off(e,f))),r.forEach((e=>a.off(e,g))),d.forEach((e=>n(e,s.selected)))}}}return t.globalOptions=void 0,t}));
+!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}));

package.json

 {
   "name": "embla-carousel-class-names",
-  "version": "8.0.0-rc11",
+  "version": "8.0.0-rc12",
   "author": "David Jerleke",
@@ -58,4 +58,4 @@ "description": "A class name toggle plugin for Embla Carousel",
   "peerDependencies": {
-    "embla-carousel": "8.0.0-rc11"
+    "embla-carousel": "8.0.0-rc12"
   }
 }

README.md

@@ -9,7 +9,7 @@ <br />
   <p align="center">
-    <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel-class-names?color=%238ab4f8"></a>
-    <a href="https://www.npmjs.com/package/embla-carousel-class-names"><img src="https://img.shields.io/npm/v/embla-carousel-class-names.svg?color=%23c1a8e2"></a>
-    <a href="https://github.com/davidjerleke/embla-carousel/actions?query=workflow%3A%22Continuous+Integration%22"><img src="https://img.shields.io/github/actions/workflow/status/davidjerleke/embla-carousel/cd.yml?color=%238ab4f8"></a>
-    <a href="https://prettier.io"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat&color=%23c1a8e2"></a>
-    <a href="https://bundlephobia.com/result?p=embla-carousel-class-names@latest"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel-class-names?color=%238ab4f8&label=gzip%20size">
+    <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8&style=flat-square"></a>
+    <a href="https://www.npmjs.com/package/embla-carousel-class-names"><img src="https://img.shields.io/npm/v/embla-carousel-class-names.svg?color=%23c1a8e2&style=flat-square"></a>
+    <a href="https://github.com/davidjerleke/embla-carousel/actions?query=workflow%3A%22Continuous+Integration%22"><img src="https://img.shields.io/github/actions/workflow/status/davidjerleke/embla-carousel/cd.yml?color=%238ab4f8&style=flat-square"></a>
+    <a href="https://prettier.io"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?color=%23c1a8e2&style=flat-square"></a>
+    <a href="https://bundlephobia.com/result?p=embla-carousel-class-names@latest"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel-class-names?color=%238ab4f8&style=flat-square&label=gzip%20size">
     </a>
@@ -23,3 +23,3 @@ </p>
   <p align="center">
-    A <strong>class name toggle plugin</strong> for <a href="https://www.embla-carousel.com/">Embla Carousel</a>.
+    <strong>Embla Carousel</strong> is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source.
   </p>
@@ -31,3 +31,3 @@
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/get-started/#choose-installation-type">Installation</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/predefined/">Examples</a>&nbsp;</code>
     </strong>
@@ -38,3 +38,3 @@ </p>
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/api/">API Reference</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/generator/">Generator</a>&nbsp;</code>
     </strong>
@@ -45,3 +45,3 @@ </p>
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/get-started/#choose-installation-type">Installation</a>&nbsp;</code>
     </strong>
@@ -53,2 +53,82 @@ </p>
 
+<div align="center">
+  <strong>
+    <h2 align="center">Ready for</h2>
+  </strong>
+  
+  <p align="center">
+    <a href="https://www.embla-carousel.com/get-started/module/">
+      <img src="https://www.embla-carousel.com/javascript-logo.svg" width="40" height="40" />
+    </a>
+    &nbsp;
+    <a href="https://www.embla-carousel.com/get-started/module/">
+      <img src="https://www.embla-carousel.com/typescript-logo.svg" width="40" height="40" />
+    </a>
+    &nbsp;
+    <a href="https://www.embla-carousel.com/get-started/react/">
+      <img src="https://www.embla-carousel.com/react-logo.svg" width="40" height="40" />
+    </a>
+    &nbsp;
+    <a href="https://www.embla-carousel.com/get-started/vue/">
+      <img src="https://www.embla-carousel.com/vue-logo.svg" width="40" height="40" />
+    &nbsp;
+    <a href="https://www.embla-carousel.com/get-started/svelte/">
+      <img src="https://www.embla-carousel.com/svelte-logo.svg" width="40" height="40" />
+    </a>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Contributors</h2>
+  </strong>
+  <p align="center">
+    Thank you to all contributors for making <a href="https://www.embla-carousel.com/">Embla Carousel</a> awesome! <a href="https://github.com/davidjerleke/embla-carousel/blob/master/.github/CONTRIBUTING.md">Contributions</a> are welcome.
+  </p>
+  <p align="center">
+    <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/michaelrambeau"><img src="https://avatars0.githubusercontent.com/u/5546996?s=120&v=4" title="michaelrambeau" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/ehellman"><img src="https://avatars3.githubusercontent.com/u/586152?s=120&v=4" title="ehellman" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/afilp"><img src="https://avatars0.githubusercontent.com/u/7850073?s=120&v=4" title="afilp" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/mrksmts"><img src="https://avatars1.githubusercontent.com/u/437794?s=120&v=4" title="mrksmts" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/SLMNBJ"><img src="https://avatars2.githubusercontent.com/u/30017004?s=120&v=4" title="SLMNBJ" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/readeral"><img src="https://avatars0.githubusercontent.com/u/15904136?s=120&v=4" title="readeral" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/romellem"><img src="https://avatars2.githubusercontent.com/u/8504000?s=120&v=4" title="romellem" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/niubsta"><img src="https://avatars0.githubusercontent.com/u/270320?s=120&v=4" title="niubsta" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/allen-garvey"><img src="https://avatars1.githubusercontent.com/u/9314727?s=120s&v=4" title="allen-garvey" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/sedlukha"><img src="https://avatars3.githubusercontent.com/u/14075940?s=120&v=4" title="sedlukha" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/wopian"><img src="https://avatars3.githubusercontent.com/u/3440094?s=120&v=4" title="wopian" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/msallent"><img src="https://avatars3.githubusercontent.com/u/8879212?s=120&v=4" title="msallent" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/omarkhatibco"><img src="https://avatars1.githubusercontent.com/u/9054278?s=120&v=4" title="omarkhatibco" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/ppromerojr"><img src="https://avatars1.githubusercontent.com/u/15343254?s=120&v=4" title="ppromerojr" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/openscript"><img src="https://avatars3.githubusercontent.com/u/1105080?s=120&v=4" title="openscript" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/pipisasa"><img src="https://avatars.githubusercontent.com/u/54534600?s=120&v=4" title="pipisasa" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/silllli"><img src="https://avatars.githubusercontent.com/u/9334305?s=120&v=4" title="silllli" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/JoshuaCrewe"><img src="https://avatars.githubusercontent.com/u/12238901?s=120&v=4" title="JoshuaCrewe" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/th-km"><img src="https://avatars.githubusercontent.com/u/35410212?s=120&v=4" title="th-km" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/rojadesign"><img src="https://avatars.githubusercontent.com/u/35687281?s=120&v=4" title="th-km"" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/SaizFerri"><img src="https://avatars.githubusercontent.com/u/19834971?s=120&v=4" title="SaizFerri" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/horseeyephil"><img src="https://avatars.githubusercontent.com/u/32337092?s=120&v=4" title="horseeyephil" width="50" height="50" style="max-width:100%;"></a>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Special Thanks</h2>
+  </strong>
+  <p align="center">
+    Massive thanks to <a href="https://github.com/gunnarx2">gunnarx2</a> for creating the <a href="https://www.embla-carousel.com/get-started/react/">useEmblaCarousel </a> hook and to <a href="https://github.com/xiel">xiel</a> for creating the <a href="https://github.com/xiel/embla-carousel-wheel-gestures">Embla Carousel Wheel Gestures</a> package.
+  </p>
+  <p align="center">
+    <a href="https://github.com/gunnarx2"><img src="https://avatars2.githubusercontent.com/u/10469652?s=120&v=4" title="gunnarx2" width="50" height="50" style="max-width:100%;"></a>
+    <a href="https://github.com/xiel"><img src="https://avatars0.githubusercontent.com/u/615522?s=120&v=4" title="xiel" width="50" height="50" style="max-width:100%;"></a>
+  </p>
+</div>
+
+<br>
+
 <h2 align="center">Open Source</h2>
@@ -55,0 +135,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20333

increased by76.07%

Lines of code

232

increased by34.1%

Number of lines in readme file

148

increased by117.65%

No dependency changes