@nanoporetech-digital/components 5.5.3 → 5.7.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-04T15:37:36",
+  "timestamp": "2023-10-09T22:13:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.1",
@@ -13692,11 +13692,11 @@
       "props": [
         {
           "name": "animation",
-          "type": "\"fade\" | \"parallax\" | \"scroll\"",
+          "type": "\"fade\" | \"parallax\" | \"scroll\" | (() => void)",
           "mutable": false,
           "attr": "animation",
           "reflectToAttr": true,
-          "docs": "Animation presets.",
+          "docs": "Animation presets or your own custom animation function; called every frame during scroll",
           "docsTags": [],
           "default": "'scroll'",
           "values": [
@@ -13711,6 +13711,9 @@
             {
               "value": "scroll",
               "type": "string"
+            },
+            {
+              "type": "(() => void)"
             }
           ],
           "optional": false,

package/docs-vscode.json

@@ -2463,7 +2463,7 @@
       "attributes": [
         {
           "name": "animation",
-          "description": "Animation presets.",
+          "description": "Animation presets or your own custom animation function; called every frame during scroll",
           "values": [
             {
               "name": "fade"

package/hydrate/index.js

@@ -26169,8 +26169,8 @@ class Slides {
     this.parallax = async () => {
       const flkty = await this.flickity;
       const cells = flkty.cells;
-      cells.forEach((cell, i) => {
-        const ele = this.childrenEles[i];
+      cells.forEach((cell) => {
+        const ele = cell.element.children[0];
         let flkX = flkty.x;
         if (flkty.options.wrapAround && flkty.cells.length > 1) {
           flkX = modulo(flkX, flkty.slideableWidth);
@@ -26184,6 +26184,8 @@ class Slides {
           x = ((cell.target + (flkX + flkty.slideableWidth)) * -1) / 3;
         }
         ele.style.transform = 'translate3d(' + x + 'px, 0, 0)';
+        const animAmount = ((x * 3) / cell.size.width) * 100;
+        cell.element.style.setProperty('--animation-amount', animAmount.toString());
       });
     };
     this.handleFullscreen = (isFullScreen) => {
@@ -26251,6 +26253,16 @@ class Slides {
       });
       this.update();
     }
+    // was a custom animation
+    if (typeof oldAnim === 'function') {
+      flkty.off('scroll', oldAnim);
+    }
+    // is a custom animation
+    if (typeof this.animation === 'function') {
+      this.options = { fade: false, percentPosition: true };
+      flkty.on('scroll', this.animation);
+      return;
+    }
     // setup new stuff
     switch (this.animation) {
       case 'fade':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "5.5.3",
+  "version": "5.7.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "ea9b056e2ff6933d4da8b1785d0027c4c9f06853",
+  "gitHead": "1a54e7d34a188d439757541b7c190b1fd51c62b7",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-b62ccd2d.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-b62ccd2d.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-3df85088.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-3df85088.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}