From 2fe07ad332eb615b7ce1b655dfc0a041a1f752aa Mon Sep 17 00:00:00 2001 From: Nam Nguyen Date: Thu, 11 May 2023 08:12:41 -0300 Subject: [PATCH] =?UTF-8?q?Add=20zoom=20image=20on=20move=20=F0=9F=90=81?= =?UTF-8?q?=20(#44)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: add basic zoomed image on mouse move * feat: replace img tag by background image * chore: cleanup image zoom move vanilla example * chore: update package.json * docs: update createZoomImageMove section * docs: add vue example * docs: add svelte example * docs: add examples for the rest of frameworks * chore: add changeset and update pnpm lock * chore: enhance zoomed image on move * chore: run prettier on ci * chore: update branch for push action * chore: update ci.yml * chore: with force * chore: format code with Prettier * chore: update ad-m/github-push-action to use master * chore: change Github action job name * chore: fix failure on nothing change * chore: test ci on change * chore: format code with Prettier * chore: update doc demo * chore: update demo gif image --------- Co-authored-by: GitHub Action --- .changeset/stale-flowers-buy.md | 5 ++ .github/workflows/ci.yml | 18 ++++- README.md | 11 +-- docs/.vitepress/config.ts | 1 + docs/api/createZoomImageHover.md | 2 +- docs/api/createZoomImageMove.md | 31 ++++++++ docs/api/index.md | 1 + docs/components/HomeGif.vue | 5 -- docs/components/HomeVideo.vue | 8 ++ docs/index.md | 7 +- docs/public/demo.gif | Bin 1550636 -> 0 bytes docs/public/demo.mp4 | Bin 0 -> 431420 bytes docs/public/demo.webm | Bin 0 -> 987278 bytes examples/preact-ts/src/app.tsx | 30 ++++--- examples/qwik-ts/package.json | 9 +-- examples/qwik-ts/src/routes/index.tsx | 30 ++++--- examples/react-ts/src/App.tsx | 31 +++++--- examples/solid-ts/src/App.tsx | 26 ++++-- examples/svelte-ts/src/App.svelte | 28 ++++--- examples/vanilla-ts/index.html | 12 +++ examples/vanilla-ts/src/main.ts | 52 +++++++----- examples/vue-ts/src/App.vue | 34 +++++--- images/demo-zoom-hover.gif | Bin 2378738 -> 0 bytes images/demo-zoom-wheel.gif | Bin 1959229 -> 0 bytes images/demo.gif | Bin 0 -> 1772149 bytes package.json | 16 ++-- packages/core/src/createZoomImageMove.ts | 74 ++++++++++++++++++ packages/core/src/createZoomImageWheel.ts | 18 ++--- packages/core/src/index.ts | 10 +++ .../test/components/TestImageZoomWheel.vue | 6 +- 30 files changed, 351 insertions(+), 114 deletions(-) create mode 100644 .changeset/stale-flowers-buy.md create mode 100644 docs/api/createZoomImageMove.md delete mode 100644 docs/components/HomeGif.vue create mode 100644 docs/components/HomeVideo.vue delete mode 100644 docs/public/demo.gif create mode 100644 docs/public/demo.mp4 create mode 100644 docs/public/demo.webm delete mode 100644 images/demo-zoom-hover.gif delete mode 100644 images/demo-zoom-wheel.gif create mode 100644 images/demo.gif create mode 100644 packages/core/src/createZoomImageMove.ts diff --git a/.changeset/stale-flowers-buy.md b/.changeset/stale-flowers-buy.md new file mode 100644 index 00000000..c82fea7c --- /dev/null +++ b/.changeset/stale-flowers-buy.md @@ -0,0 +1,5 @@ +--- +"@zoom-image/core": minor +--- + +Add support for zooming image on move diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 84a1325b..b6a52b28 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -6,7 +6,7 @@ on: - main jobs: - test: + verify: runs-on: ubuntu-latest steps: @@ -37,3 +37,19 @@ jobs: - name: Test run: pnpm test:ci + + - name: Run prettier + run: pnpm prettier-fix + + - name: Commit changes + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + git diff --quiet && git diff --staged --quiet || (git commit -am "chore: format code with Prettier" --no-verify) + + - name: Push changes + uses: ad-m/github-push-action@master + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + branch: ${{ github.head_ref }} + force: true diff --git a/README.md b/README.md index b8b7a135..fe392378 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ - [Zoom Image](#zoom-image) - [Demo](#demo) - - [Zoom on hover](#zoom-on-hover) - - [Zoom on wheel](#zoom-on-wheel) - [Architecture](#architecture) - [Development](#development) - [Commands](#commands) @@ -21,17 +19,12 @@ A little yet powerful library to zoom image on wheel / hover / pinch actions. It sites. Examples are written with Preact, React, Svelte, Vanilla JS and Vue. - ✅ Zoom on hover +- ✅ Zoom on move - ✅ Zoom on wheel ## Demo -### Zoom on hover - -![Demo Zoom on hover](./images/demo-zoom-hover.gif) - -### Zoom on wheel - -![Demo Zoom on wheel](./images/demo-zoom-wheel.gif) +![Demo Zoom](./images/demo.gif) ## Architecture diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 12c00783..315d57f0 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -63,6 +63,7 @@ export default defineConfig({ link: "/api/", items: [ { text: "createZoomImageHover", link: "/api/createZoomImageHover" }, + { text: "createZoomImageMove", link: "/api/createZoomImageMove" }, { text: "createZoomImageWheel", link: "/api/createZoomImageWheel" }, { text: "makeCalculateZoom", link: "/api/makeCalculateZoom" }, { text: "makeCalculatePercentage", link: "/api/makeCalculatePercentage" }, diff --git a/docs/api/createZoomImageHover.md b/docs/api/createZoomImageHover.md index 6f5d1732..5508630c 100644 --- a/docs/api/createZoomImageHover.md +++ b/docs/api/createZoomImageHover.md @@ -15,7 +15,7 @@ cleanup() type ZoomImageHoverOptions = { // The size of zoomed window where zoomed image will be displayed customZoom?: { width: number; height: number } - // The source of zoomed image + // The source of zoomed image, default is the same as the original image zoomImageSource?: string // The css class will be added to zoom lens element zoomLensClass?: string diff --git a/docs/api/createZoomImageMove.md b/docs/api/createZoomImageMove.md new file mode 100644 index 00000000..1194d16f --- /dev/null +++ b/docs/api/createZoomImageMove.md @@ -0,0 +1,31 @@ +# createZoomImageMove + +### Basic Usage + +```ts +const { cleanup } = createZoomImageMove(container, { + zoomImageSource: "large-image.webp", +}) + +// Call cleanup when you don't need it anymore +cleanup() +``` + +### Type Declaration + +```ts +type ZoomImageMoveOptions = { + // Zoom scale, default is 4 + zoomFactor?: number + // The source of zoomed image, default is the same as the original image + zoomImageSource?: string +} + +function createZoomImageMove( + container: HTMLElement, + options?: ZoomImageMoveOptions, +): { + // Remove all event listeners and zoomed image + cleanup: () => void +} +``` diff --git a/docs/api/index.md b/docs/api/index.md index 2ca0e2d0..386861a7 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -1,6 +1,7 @@ # API Reference - [createZoomImageWheel](/api/createZoomImageWheel) +- [createZoomImageMove](/api/createZoomImageMove) - [createZoomImageHover](/api/createZoomImageHover) - [makeCalculateZoom](/api/makeCalculateZoom) - [makeCalculatePercentage](/api/makeCalculatePercentage) diff --git a/docs/components/HomeGif.vue b/docs/components/HomeGif.vue deleted file mode 100644 index 29841375..00000000 --- a/docs/components/HomeGif.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/docs/components/HomeVideo.vue b/docs/components/HomeVideo.vue new file mode 100644 index 00000000..b83fe956 --- /dev/null +++ b/docs/components/HomeVideo.vue @@ -0,0 +1,8 @@ + diff --git a/docs/index.md b/docs/index.md index 2f4f8b48..f18ded8b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -26,12 +26,15 @@ features: - title: Zoom on pinch details: Support touch pinch zoom on image icon: 🤏 + - title: Zoom on move + details: Support mouse move zoom on image + icon: 🎢 --- - +