@splidejs/splide-extension-url-hash - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/js/splide-extension-url-hash.js

@@ -158,3 +158,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-    window.addEventListener('hashchange', function () {
+    Splide.on('hashchange', function () {
       var index = hashToIndex(window.location.hash);
@@ -165,3 +165,3 @@
       }
-    });
+    }, window);
   }
@@ -168,0 +168,0 @@ /**

dist/js/splide-extension-url-hash.min.js

@@ -1,1 +0,1 @@
-!function(t){var o={};function i(e){if(o[e])return o[e].exports;var n=o[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=o,i.d=function(e,n,t){i.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(n,e){if(1&e&&(n=i(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var o in n)i.d(t,o,function(e){return n[e]}.bind(null,o));return t},i.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(n,"a",n),n},i.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},i.p="",i(i.s=0)}([function(e,n,t){"use strict";t.r(n);var i="data-splide-hash";window.splide=window.splide||{},window.splide.Extensions=window.splide.Extensions||{},window.splide.Extensions.URLHash=function(n,t){function o(n){if(!(n=n.replace("#","")))return!1;var e=t.Slides.getSlides(!1,!0).find(function(e){return e.slide.getAttribute(i)===n});return!!e&&e.index}return{mount:function(){n.index=o(window.location.hash)||n.options.start,n.on("moved",function(e){var n=t.Slides.getSlide(e).slide.getAttribute(i);n?window.location.hash=n:history?history.replaceState(null,null," "):window.location.hash=""}),window.addEventListener("hashchange",function(){var e=o(window.location.hash);!1!==e&&n.index!==e&&n.go(e)})}}}}]);
+!function(t){var o={};function i(e){if(o[e])return o[e].exports;var n=o[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=o,i.d=function(e,n,t){i.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(n,e){if(1&e&&(n=i(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var o in n)i.d(t,o,function(e){return n[e]}.bind(null,o));return t},i.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(n,"a",n),n},i.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},i.p="",i(i.s=0)}([function(e,n,t){"use strict";t.r(n);var i="data-splide-hash";window.splide=window.splide||{},window.splide.Extensions=window.splide.Extensions||{},window.splide.Extensions.URLHash=function(n,t){function o(n){if(!(n=n.replace("#","")))return!1;var e=t.Slides.getSlides(!1,!0).find(function(e){return e.slide.getAttribute(i)===n});return!!e&&e.index}return{mount:function(){n.index=o(window.location.hash)||n.options.start,n.on("moved",function(e){var n=t.Slides.getSlide(e).slide.getAttribute(i);n?window.location.hash=n:history?history.replaceState(null,null," "):window.location.hash=""}),n.on("hashchange",function(){var e=o(window.location.hash);!1!==e&&n.index!==e&&n.go(e)},window)}}}}]);

package.json

 {
   "name": "@splidejs/splide-extension-url-hash",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The extension of Splide for URL hash navigation.",
@@ -5,0 +5,0 @@ "author": "Naotoshi Fujita",

README.md

@@ -1,6 +0,53 @@
-# Splide extension for URL hash navigation
-This is an extension of the [Splide](https://github.com/Splidejs/splide) slider library for listening to hash change and move a slide to a slide having it in its data attribute.
+# URL Hash Navigation - Splide Extension
+This is an extension of the [Splide](https://github.com/Splidejs/splide) slider library for listening to hash change and move a slide to a slide having the hash name.
 
+Also, an initial slide will correspond with the URL hash.
+
+* [Demo and Document](https://splidejs.com/url-hash-navigation/)
+
+## Installation
+### NPM(Recommended)
+1. Get the latest extension by NPM:
+    ```bash
+    $ npm install @splidejs/splide-extension-url-hash
+    ```
+1. Mount the extension to the Splide.
+    ```javascript
+    import Splide from '@splidejs/splide';
+    import URLHash from '@splidejs/splide-extension-url-hash';
+    new Splide( '#splide' ).mount( { URLHash } );
+    ```
+    
+### CDN or Hosting Files
+1. Visit [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-url-hash) and get the links of the latest files or download files from the dist library.
+1. Import minified stylesheet and JavaScript files on your site:
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-url-hash@0.0.2/dist/css/splide-extension-url-hash.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-url-hash@0.0.2/dist/js/splide-extension-url-hash.min.js">
+    ```
+    Note that version numbers above are incorrect.
+1. Mount the extension to the Splide.
+    ```javascript
+    new Splide( '#splide' ).mount( window.splide.Extensions );
+    ```
+
+### HTML
+Set hash values to slides by "data-splide-hash" data attribute:
+```html
+<div class="splide">
+    <div class="splide__track">
+        <ul class="splide__list">
+            <li class="splide__slide" data-splide-hash="slide01">
+            </li>
+            <li class="splide__slide" data-splide-hash="slide02">
+            </li>
+            <li class="splide__slide" data-splide-hash="slide03">
+            </li>
+        </ul>
+    </div>
+</div>
+```
+
 ## License
 Splide is released under the MIT license.  
 © 2020 Naotoshi Fujita

src/js/splide-extension-url-hash.js

@@ -58,3 +58,3 @@ /**
 		// Move the slider to the slide having the new hash.
-		window.addEventListener( 'hashchange', () => {
+		Splide.on( 'hashchange', () => {
 			const index = hashToIndex( window.location.hash );
@@ -65,3 +65,3 @@
 			}
-		} );
+		}, window );
 	}
@@ -68,0 +68,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16223

increased by11.75%

Number of lines in readme file

54

increased by671.43%

No dependency changes