Merge branch 'development'

Author: daun

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 <!-- ## [Unreleased] -->
 
+## [0.0.3] - 2023-07-22
+
+- Detect parallel containers of current visit
+
 ## [0.0.2] - 2023-07-19
 
 - Fix timing with forced reflow
@@ -10,7 +14,8 @@
 
 - Initial release
 
-[Unreleased]: https://github.com/swup/parallel-plugin/compare/0.0.2...HEAD
+[Unreleased]: https://github.com/swup/parallel-plugin/compare/0.0.3...HEAD
 
+[0.0.3]: https://github.com/swup/parallel-plugin/releases/tag/0.0.3
 [0.0.2]: https://github.com/swup/parallel-plugin/releases/tag/0.0.2
 [0.0.1]: https://github.com/swup/parallel-plugin/releases/tag/0.0.1

README.md

@@ -2,8 +2,8 @@
 
 A [swup](https://swup.js.org) plugin for running the in and out animations in parallel.
 
-- Keep the previous container during the page transition
-- Animate both the previous and current containers at the same time
+- Keeps the previous page visible while the next page is entering
+- Implement simultaneous animations like crossfades, slideshows, or overlays
 
 ## Installation
 
@@ -149,15 +149,15 @@ animations in parallel.
 
 ### Opting out of parallel animations
 
-The plugin will set a flag on the global context, indicating the current visit
-as a parallel animation: `context.animation.parallel`. You can unset this flag
+The plugin will set a flag on the visit object, indicating the current visit
+as a parallel animation: `visit.animation.parallel`. You can unset this flag
 to fall back to a normal animation with leave and enter in series.
 
 ```js
 // Disable parallel animations for this visit
-swup.hooks.on('visit:start', (context) => {
+swup.hooks.on('visit:start', (visit) => {
   if (someCondition) {
-    context.animation.parallel = false;
+    visit.animation.parallel = false;
   }
 });
 ```

package-lock.json

@@ -1,8 +1,8 @@
 {
   "name": "@swup/parallel-plugin",
   "amdName": "SwupParallelPlugin",
-  "version": "0.0.2",
   "description": "A swup plugin for running the in and out animations in parallel",
+  "version": "0.0.3",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
@@ -32,16 +32,23 @@
     "email": "daun@daun.ltd",
     "url": "https://philippdaun.net"
   },
+  "contributors": [
+    {
+      "name": "Rasso Hilber",
+      "email": "mail@rassohilber.com",
+      "url": "https://rassohilber.com"
+    }
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/swup/parallel-plugin.git"
   },
   "dependencies": {
-    "@swup/plugin": "^3.0.0-rc.22"
+    "@swup/plugin": "^3.0.0-rc.25"
   },
   "peerDependencies": {
-    "swup": "^4.0.0-rc.21"
+    "swup": "^4.0.0-rc.24"
   },
   "browserslist": [
     "extends @swup/browserslist-config"

package.json

@@ -1,9 +1,9 @@
 import type { Options as SwupOptions, Handler } from 'swup';
-import { nextTick } from 'swup';
+import { forceReflow } from 'swup';
 import Plugin from '@swup/plugin';
 
 declare module 'swup' {
-	export interface AnimationContext {
+	export interface VisitAnimation {
 		/** Parallel visit: run in and out animation at the same time */
 		parallel?: boolean;
 	}
@@ -44,55 +44,46 @@ export default class SwupParallelPlugin extends Plugin {
 		}
 
 		// On visit: check for containers and mark as parallel visit
-		this.swup.hooks.on('visit:start', this.startVisit, { priority: 1 });
-		// When awaiting animation: skip if not in animation phase
-		this.swup.hooks.replace('animation:await', this.maybeSkipAnimation);
+		// Run after user hooks to allow disabling parallel animations beforehand
+		this.on('visit:start', this.startVisit, { priority: 1 });
+		// Before awaiting out animation: skip
+		this.before('animation:out:await', this.skipOutAnimation, { priority: 1 });
 		// Before content replace: insert new containers
-		this.swup.hooks.before('content:replace', this.insertContainers);
-		// After content replace: reset containers in context object
-		this.swup.hooks.on('content:replace', this.resetContainers);
+		this.before('content:replace', this.insertContainers, { priority: 1 });
+		// After content replace: reset containers
+		this.on('content:replace', this.resetContainers);
 		// After visit: remove old containers
-		this.swup.hooks.on('visit:end', this.cleanupContainers);
+		this.on('visit:end', this.cleanupContainers);
 	}
 
-	unmount() {
-		this.swup.hooks.off('visit:start', this.startVisit);
-		this.swup.hooks.off('animation:await', this.maybeSkipAnimation);
-		this.swup.hooks.off('content:replace', this.insertContainers);
-		this.swup.hooks.off('content:replace', this.resetContainers);
-		this.swup.hooks.off('visit:end', this.cleanupContainers);
-	}
-
-	startVisit: Handler<'visit:start'> = (context) => {
-		const { animate, parallel } = context.animation;
+	startVisit: Handler<'visit:start'> = (visit) => {
+		const { animate, parallel } = visit.animation;
 		const { containers } = this.options;
 		if (!animate || parallel === false) {
-			console.log('Not animated or parallel disabled');
 			return;
 		}
-
 		// Only mark as parallel visit if containers found
-		const hasContainers = containers.some((selector) => document.querySelector(selector));
-		console.log('Checking for parallel containers', hasContainers, containers);
+		const hasContainers = containers.some((selector) => {
+			const el = document.querySelector(selector)
+			if (!el) return false;
+			return visit.containers.some(s => el.matches(s));
+		});
 		if (hasContainers) {
-			context.animation.wait = true;
-			context.animation.parallel = true;
+			visit.animation.wait = true;
+			visit.animation.parallel = true;
 		}
 	};
 
-	maybeSkipAnimation: Handler<'animation:await'> = (context, args, defaultHandler) => {
-		const { animate, parallel } = context.animation;
-		const { direction } = args;
-		const isAnimationPhase = 'in' === direction;
-		if (animate && parallel && !isAnimationPhase) {
-			return Promise.resolve();
+	skipOutAnimation: Handler<'animation:out:await'> = (visit, args) => {
+		const { animate, parallel } = visit.animation;
+		if (animate && parallel) {
+			args.skip = true;
 		}
-		return defaultHandler?.(context, args);
 	};
 
-	insertContainers: Handler<'content:replace'> = (context, args) => {
-		const { animate, parallel } = context.animation;
-		const { containers } = context;
+	insertContainers: Handler<'content:replace'> = (visit, args) => {
+		const { animate, parallel } = visit.animation;
+		const { containers } = visit;
 		const { page } = args;
 
 		if (!animate || !parallel) {
@@ -125,26 +116,22 @@ export default class SwupParallelPlugin extends Plugin {
 			previous.before(next);
 
 			next.classList.add('is-next-container');
-			this.forceReflow(next);
+			forceReflow(next);
 			next.classList.remove('is-next-container');
 			previous.classList.add('is-previous-container');
 		});
 
-		console.log('containersInParallel', containersInParallel);
-		console.log('containersInSeries', containersInSeries);
-		console.log('parallelContainers', parallelContainers);
-
 		this.originalContainers = defaultContainers;
-		context.containers = containersInSeries;
+		visit.containers = containersInSeries;
 	};
 
-	resetContainers: Handler<'content:replace'> = (context) => {
-		const { animate, parallel } = context.animation;
+	resetContainers: Handler<'content:replace'> = (visit) => {
+		const { animate, parallel } = visit.animation;
 		if (!animate || !parallel) {
 			return;
 		}
 
-		context.containers = this.originalContainers;
+		visit.containers = this.originalContainers;
 	};
 
 	cleanupContainers = () => {
@@ -156,16 +143,10 @@ export default class SwupParallelPlugin extends Plugin {
 
 	parseContainers({ html }: { html: string }): ContainerSet[] {
 		const incomingDocument = new DOMParser().parseFromString(html, 'text/html');
-		return this.options.containers
-			.reduce((containers, selector: string) => {
-				const previous = document.querySelector<HTMLElement>(selector);
-				const next = incomingDocument.querySelector<HTMLElement>(selector);
-				return previous && next ? [...containers, { previous, next }] : containers;
-			}, [] as ContainerSet[]);
-	}
-
-	forceReflow(element?: HTMLElement) {
-		element = element || document.body;
-		return element?.offsetHeight;
+		return this.options.containers.reduce((containers, selector: string) => {
+			const previous = document.querySelector<HTMLElement>(selector);
+			const next = incomingDocument.querySelector<HTMLElement>(selector);
+			return previous && next ? [...containers, { previous, next }] : containers;
+		}, [] as ContainerSet[]);
 	}
 }