v3.0.0

barthy-koeln · Mar 1, 2023 · b2211fe · b2211fe
1 parent 8c6bcf3
commit b2211fe
Show file tree

Hide file tree

Showing 19 changed files with 177 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -12,10 +12,38 @@ Mostly CSS slider with great performance.
 
 [demo](https://barthy-koeln.github.io/scroll-snap-slider/) | [docs](https://barthy-koeln.github.io/scroll-snap-slider/docs/)
 
+## Table of Contents
+
+- [Premise](#premise)
+- [Restrictions](#restrictions)
+- [Installing](#installing)
+- [Usage](#usage)
+    - [Markup](#markup)
+    - [CSS](#css)
+    - [Additional Styles](#additional-styles)
+    - [JavaScript](#javascript)
+- [API](#api)
+- [Events](#events)
+- [Public Properties](#public-properties)
+- [Support](#support)
+
 ## Premise
 
 This library is an opinionated minimal implementation of a common feature across many websites.
-To keep it small (see badges above), there are not many fancy features and there is almost no error handling.
+To keep it small, there are not many fancy features and there is almost no error handling.
+
+Here are the sizes of individual modules, using terser and gzip with default options.
+The size increase at [bundlephobia](https://bundlephobia.com/result?p=scroll-snap-slider) between v2 and v3 is due to
+the entrypoint changing from 'ScrollSnapSlider' to 'index'.
+
+| Item                | minified | minified + gzipped |
+|---------------------|----------|--------------------|
+| index               | 348 B    | 143 B              |
+| ScrollSnapAutoplay  | 1497 B   | 549 B              |
+| ScrollSnapDraggable | 2425 B   | 754 B              |
+| ScrollSnapLoop      | 1754 B   | 603 B              |
+| ScrollSnapPlugin    | 70 B     | 110 B              |
+| ScrollSnapSlider    | 2268 B   | 783 B              |
 
 However, with a clear API and the use of a ES6 class, it can provide a useful base for custom extensions.
 

diff --git a/gh-pages/demo/index.css b/gh-pages/demo/index.css
@@ -1,6 +1,6 @@
 @import "./page.css";
 @import "./feature_toggle.css";
-@import "../dist/scroll-snap-slider.css";
+@import "https://unpkg.com/[email protected]/dist/scroll-snap-slider.css";
 
 .scroll-snap-slider {
   --slider-h: 300px;

diff --git a/gh-pages/demo/slider-multi.js b/gh-pages/demo/slider-multi.js
@@ -1,4 +1,4 @@
-import { ScrollSnapSlider } from '../dist/scroll-snap-slider.esm.js'
+import { ScrollSnapSlider } from 'https://unpkg.com/scroll-snap-slider@3.0.0'
 
 const sliderMultiElement = document.querySelector('.scroll-snap-slider.-multi')
 const sliderMulti = new ScrollSnapSlider({ element: sliderMultiElement })

diff --git a/gh-pages/demo/slider-responsive.js b/gh-pages/demo/slider-responsive.js
@@ -1,4 +1,4 @@
-import { ScrollSnapSlider } from '../dist/scroll-snap-slider.esm.js'
+import { ScrollSnapSlider } from 'https://unpkg.com/scroll-snap-slider@3.0.0'
 
 const sliderResponsiveElement = document.querySelector('.scroll-snap-slider.-responsive')
 const sliderResponsive = new ScrollSnapSlider({ element: sliderResponsiveElement })

diff --git a/gh-pages/demo/slider-simple.js b/gh-pages/demo/slider-simple.js
@@ -3,7 +3,7 @@ import {
   ScrollSnapDraggable,
   ScrollSnapLoop,
   ScrollSnapSlider
-} from '../dist/scroll-snap-slider.esm.js'
+} from 'https://unpkg.com/scroll-snap-slider@3.0.0'
 
 const sliderSimpleElement = document.querySelector('.scroll-snap-slider.-simple')
 const slides = sliderSimpleElement.getElementsByClassName('scroll-snap-slide')

diff --git a/gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html b/gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html
@@ -27,7 +27,7 @@ <h4>Hierarchy</h4>
 <ul class="tsd-hierarchy">
 <li><span class="target">ScrollSnapAutoplay</span></li></ul></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L6">src/ScrollSnapAutoplay.ts:6</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L6">src/ScrollSnapAutoplay.ts:6</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -76,7 +76,7 @@ <h5>events: <span class="tsd-signature-type">string</span><span class="tsd-signa
 <h4 class="tsd-returns-title">Returns <a href="ScrollSnapAutoplay.ScrollSnapAutoplay.html" class="tsd-signature-type" data-tsd-kind="Class">ScrollSnapAutoplay</a></h4><aside class="tsd-sources">
 <p>Overrides <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#constructor">constructor</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L32">src/ScrollSnapAutoplay.ts:32</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L32">src/ScrollSnapAutoplay.ts:32</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="debounceId" class="tsd-anchor"></a>
@@ -85,43 +85,43 @@ <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code>
 <div class="tsd-comment tsd-typography"><p>Used to debounce the re-enabling after a user interaction</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L20">src/ScrollSnapAutoplay.ts:20</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L20">src/ScrollSnapAutoplay.ts:20</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="events" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>events</span><a href="#events" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">events<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div>
 <div class="tsd-comment tsd-typography"><p>Event names that temporarily disable the autoplay behaviour</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L30">src/ScrollSnapAutoplay.ts:30</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L30">src/ScrollSnapAutoplay.ts:30</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="interval" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>interval</span><a href="#interval" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">interval<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>Interval ID</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L25">src/ScrollSnapAutoplay.ts:25</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L25">src/ScrollSnapAutoplay.ts:25</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="intervalDuration" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>interval<wbr/>Duration</span><a href="#intervalDuration" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">interval<wbr/>Duration<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>Duration in milliseconds between slide changes</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L10">src/ScrollSnapAutoplay.ts:10</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L10">src/ScrollSnapAutoplay.ts:10</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><a id="slider" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>slider</span><a href="#slider" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">slider<span class="tsd-signature-symbol">:</span> <a href="ScrollSnapSlider.ScrollSnapSlider.html" class="tsd-signature-type" data-tsd-kind="Class">ScrollSnapSlider</a></div>
 <div class="tsd-comment tsd-typography"><p>Reference to the slider this plugin is attached to.</p>
 </div><aside class="tsd-sources">
 <p>Inherited from <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#slider">slider</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapPlugin.ts#L11">src/ScrollSnapPlugin.ts:11</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapPlugin.ts#L11">src/ScrollSnapPlugin.ts:11</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="timeoutDuration" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>timeout<wbr/>Duration</span><a href="#timeoutDuration" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">timeout<wbr/>Duration<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>Duration in milliseconds after human interaction where the slider will not autoplay</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L15">src/ScrollSnapAutoplay.ts:15</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L15">src/ScrollSnapAutoplay.ts:15</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="id" class="tsd-anchor"></a>
@@ -135,7 +135,7 @@ <h3>See</h3></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><aside class="tsd-sources">
 <p>Overrides ScrollSnapPlugin.id</p>
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L44">src/ScrollSnapAutoplay.ts:44</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L44">src/ScrollSnapAutoplay.ts:44</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Methods</h2>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="disable" class="tsd-anchor"></a>
@@ -149,7 +149,7 @@ <h3 class="tsd-anchor-link"><span>disable</span><a href="#disable" aria-label="P
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#disable">disable</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L66">src/ScrollSnapAutoplay.ts:66</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L66">src/ScrollSnapAutoplay.ts:66</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="disableTemporarily" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>disable<wbr/>Temporarily</span><a href="#disableTemporarily" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -159,7 +159,7 @@ <h3 class="tsd-anchor-link"><span>disable<wbr/>Temporarily</span><a href="#disab
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L80">src/ScrollSnapAutoplay.ts:80</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L80">src/ScrollSnapAutoplay.ts:80</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="enable" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>enable</span><a href="#enable" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -171,7 +171,7 @@ <h3 class="tsd-anchor-link"><span>enable</span><a href="#enable" aria-label="Per
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#enable">enable</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L52">src/ScrollSnapAutoplay.ts:52</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L52">src/ScrollSnapAutoplay.ts:52</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="onInterval" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>on<wbr/>Interval</span><a href="#onInterval" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -181,7 +181,7 @@ <h3 class="tsd-anchor-link"><span>on<wbr/>Interval</span><a href="#onInterval" a
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L95">src/ScrollSnapAutoplay.ts:95</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L95">src/ScrollSnapAutoplay.ts:95</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">