@nanoporetech-digital/components 5.5.0 → 5.5.2

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.5.2](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.5.1...v5.5.2) (2023-10-03)
+
+
+### Bug Fixes
+
+* **slides:** SSR render error. Fix parallax scroll when wrapped for real. ([cb80089](https://git.oxfordnanolabs.local/Digital/nano-components/commits/cb80089af4ee12c470a035c4cc51d5d09dc5fc13))
+
+
+
+
+
+## [5.5.1](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.5.0...v5.5.1) (2023-09-29)
+
+
+### Bug Fixes
+
+* **slides:** remove stencil applied hidden attribute to slotted next/prev buttons ([9a9ff09](https://git.oxfordnanolabs.local/Digital/nano-components/commits/9a9ff0925d4b47cdd6c5a5367f273e1466d2478f))
+* **slides:** wrap around slides not being adjusted during parallax animation ([feadf52](https://git.oxfordnanolabs.local/Digital/nano-components/commits/feadf52a14802b98ca1e4df6d2aae8670e6b927d))
+
+
+
+
+
 # [5.5.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.4.2...v5.5.0) (2023-09-28)
 
 

package/dist/cjs/nano-slides.cjs.entry.js

@@ -2762,6 +2762,11 @@ PrevNextButton.prototype._create = function () {
   const slot = document.createElement('slot');
   slot.name = this.isPrevious ? 'previous-icon' : 'next-icon';
   button.appendChild(slot);
+  slot.addEventListener('slotchange', () => {
+    slot.assignedElements({ flatten: true }).forEach((ele) => {
+      ele.removeAttribute('hidden');
+    });
+  });
 
   // create arrow
   var svg = this.createSVG();
@@ -3869,9 +3874,8 @@ const Slides = class {
     });
     this.parallax = async () => {
       const flkty = await this.flickity;
-      flkty.cells.forEach((el, i) => {
-        const cell = el;
-        const shiftedPos = cell.x + flkty.slideableWidth * cell.shift;
+      const cells = flkty.cells;
+      cells.forEach((cell, i) => {
         const ele = this.childrenEles[i];
         let flkX = flkty.x;
         if (flkty.options.wrapAround && flkty.cells.length > 1) {
@@ -3880,13 +3884,12 @@ const Slides = class {
         }
         let x = ((cell.target + flkX) * -1) / 3;
         if (cell.shift < 0) {
-          x = x + Math.abs(shiftedPos);
+          x = ((cell.target - flkty.slideableWidth + flkX) * -1) / 3;
         }
         else if (cell.shift > 0) {
-          x = ((cell.target + (flkX + shiftedPos)) * -1) / 3;
+          x = ((cell.target + (flkX + flkty.slideableWidth)) * -1) / 3;
         }
         ele.style.transform = 'translate3d(' + x + 'px, 0, 0)';
-        // 'translateX(' + x + 'px)';
       });
     };
     this.handleFullscreen = (isFullScreen) => {
@@ -3960,7 +3963,7 @@ const Slides = class {
         this.options = { fade: true, percentPosition: true };
         break;
       case 'parallax':
-        this.options = { fade: false, percentPosition: false };
+        this.options = { fade: false, percentPosition: true };
         flkty.on('scroll', this.parallax);
         break;
       default:
@@ -4069,9 +4072,7 @@ const Slides = class {
       this.options = { autoPlay: time };
     setTimeout(() => flickity.playPlayer());
   }
-  /**
-   * Stop auto play.
-   */
+  /** Stop auto play. */
   async stopAutoplay() {
     const flickity = await this.getflickity();
     flickity.stopPlayer();
@@ -4129,14 +4130,16 @@ const Slides = class {
     const finalOptions = this.normalizeOptions();
     // init flickity core
     await waitForSlides(this.host);
-    this.flickityEl.style.height =
-      this.flickityEl.getBoundingClientRect().height + 'px';
-    this.slidesReady = true;
     this.flickityEl =
       this.flickityEl || this._getRoot().querySelector('.flickity-container');
-    if (this.flickityEl &&
-      this.flickityEl.classList.contains('flickity-enabled'))
+    if (!this.flickityEl)
+      return;
+    this.slidesReady = true;
+    if (this.flickityEl.classList.contains('flickity-enabled')) {
       this.destroyflickity();
+    }
+    this.flickityEl.style.height =
+      this.flickityEl.getBoundingClientRect().height + 'px';
     setTimeout(() => {
       this.flickityEl.style.height = '';
       const flick = new flickity(this.flickityEl, finalOptions);
@@ -4274,6 +4277,7 @@ const waitForSlides = (host) => {
       if (!toLoadSlides.length) {
         resolve(allSlides);
         host.removeEventListener('nanoSlideReady', slideResolver);
+        host.removeEventListener('nano-slide-ready', slideResolver);
       }
     };
     host.addEventListener('nanoSlideReady', slideResolver);