Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: introduce pure bundle (JS and CSS separated) #206

Merged
merged 6 commits into from
Nov 16, 2023

Conversation

francoischalifour
Copy link
Owner

@francoischalifour francoischalifour commented Nov 15, 2023

This is work on top of #204 and closes #203.

Description

This introduces a pure bundle where the JavaScript and CSS styles are separated. This brings support for Page Transitions in Astro.

Usage

import mediumZoom from 'medium-zoom/dist/pure'
import 'medium-zoom/dist/style.css'

(Or import the CSS with a <link> tag.)

@francoischalifour
Copy link
Owner Author

@Nomango I reused your branch to:

  • Move the CSS dist file top level
  • Add pure UMD bundles
  • Test the size of the new bundles
  • Add documentation for this pure bundle

Can you please let me know if that works as expected in your Astro setup?

@Nomango
Copy link
Contributor

Nomango commented Nov 16, 2023

@francoischalifour Thanks for handling this!

I can't import medium-zoom/pure neither medium-zoom/style.css. But medium-zoom/dist/pure is working.

And this is what I did.

  1. checkout to pure-bundle branch
  2. pnpm i && pnpm build
  3. pnpm link ../medium-zoom in my project

There is another issue, when using page transition, multiple calls to mediumZoom will cause problems. Seems like the background is overlaid on the image.

// instead of...
mediumZoom(imgs, { background: "rgba(0, 0, 0, 0.8)" });

// using...
if (window.zoom === undefined) {
  window.zoom = mediumZoom({ background: "rgba(0, 0, 0, 0.8)" });
}
const zoom = window.zoom;
zoom.detach();
zoom.attach(imgs);

Is there something I missed?

@francoischalifour
Copy link
Owner Author

Indeed, the imports should use the /dist path, I'll update the documentation.

import mediumZoom from 'medium-zoom/dist/pure'
import 'medium-zoom/dist/style.css'

In Page Transitions in Astro, you might need to capture when the page changes with astro:after-swap and call zoom.destroy(). Then, you should be able to re-initialize the zoom on the new page. See Script behavior during page navigation.

Let me know if that works!

@Nomango
Copy link
Contributor

Nomango commented Nov 16, 2023

Yes, it works!

Here are my test codes

// src/utils/mediumZoom.ts
import mediumZoom from "medium-zoom/dist/pure";
import "medium-zoom/dist/style.css";

const zoom = mediumZoom({
  background: "rgba(0, 0, 0, 0.8)",
});

document.addEventListener("astro:page-load", () => zoom.detach());

export default zoom;
---
// ...
---

<script>
  import zoom from "@utils/mediumZoom";

  // listen to astro:page-load event to handle the first loading
  document.addEventListener("astro:page-load", () => zoom.attach("main img"));
</script>

@francoischalifour
Copy link
Owner Author

Perfect, I'll merge this PR then, and release right after. Thanks a lot for your contributions @Nomango!

@francoischalifour francoischalifour merged commit 0a05b46 into master Nov 16, 2023
1 of 2 checks passed
@francoischalifour francoischalifour deleted the pure-bundle branch November 16, 2023 11:19
@francoischalifour
Copy link
Owner Author

🎉 Released in 1.1.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Not working after the page transition in Astro
2 participants