@carterduong/p-img 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 carterduong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# p-img
+
+A lightweight web component that adds pinch-to-zoom to images on mobile.
+
+[Demo](https://carterduong.github.io/pimg/)
+
+## Install
+
+```bash
+npm install p-img
+```
+
+## Usage
+
+```html
+<script type="module">
+  import "p-img";
+</script>
+
+<p-img src="photo.jpg" alt="A zoomable photo"></p-img>
+```
+
+The `<p-img>` element accepts the same attributes as a standard `<img>`: `src`, `alt`, `srcset`, `sizes`, `loading`, and `crossorigin`.
+
+## Behavior
+
+- Two-finger pinch scales the image up to 5x
+- The zoomed image overflows its container to the full viewport and renders above all other content
+- Releasing the pinch animates the image back to its original size and position
+- Re-pinching mid-animation picks up from the current state
+
+## Styling
+
+The internal `<img>` is exposed via a CSS `::part`:
+
+```css
+p-img::part(img) {
+  border-radius: 8px;
+}
+```
+
+The host element has `overflow: hidden` by default and gains a `[zooming]` attribute during a pinch gesture, which you can target:
+
+```css
+p-img[zooming] {
+  /* styles applied while zooming */
+}
+```
+
+## Development
+
+```bash
+npm run dev          # start dev server
+npm run build        # build the library
+npm run build:pages  # build and update GitHub Pages demo
+```
+
+## License
+
+MIT

package/dist/p-img.d.ts

@@ -0,0 +1,29 @@
+export declare class PImg extends HTMLElement {
+    private img;
+    private attrObserver;
+    private scale;
+    private translateX;
+    private translateY;
+    private initialDistance;
+    private initialScale;
+    private initialMidpoint;
+    private initialTranslate;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Forward a single attribute from the host to the inner <img>, unless it's host-only. */
+    private forwardAttribute;
+    private onImgLoad;
+    private onImgError;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private getTouchDistance;
+    private getTouchMidpoint;
+    private applyTransform;
+    private animateReset;
+    /** Read the current mid-animation transform back into our state. */
+    private readTransform;
+}
+
+export { }

package/dist/p-img.js

@@ -0,0 +1,117 @@
+const o = document.createElement("template");
+o.innerHTML = `
+<style>
+  :host {
+    display: inline-block;
+    overflow: hidden;
+    touch-action: none;
+  }
+  :host([zooming]) {
+    overflow: visible;
+    z-index: 2147483647;
+    position: relative;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: inherit;
+    object-position: inherit;
+    border-radius: inherit;
+    filter: inherit;
+    opacity: inherit;
+    transform-origin: 0 0;
+  }
+  img.returning {
+    transition: transform 0.3s ease-out;
+  }
+</style>
+<img part="img" />
+`;
+const m = /* @__PURE__ */ new Set([
+  "zooming",
+  "style",
+  "class",
+  "id",
+  "slot",
+  "part",
+  "is",
+  "tabindex"
+]);
+class d extends HTMLElement {
+  constructor() {
+    super(), this.scale = 1, this.translateX = 0, this.translateY = 0, this.initialDistance = 0, this.initialScale = 1, this.initialMidpoint = { x: 0, y: 0 }, this.initialTranslate = { x: 0, y: 0 }, this.onImgLoad = () => {
+      this.dispatchEvent(new Event("load"));
+    }, this.onImgError = () => {
+      this.dispatchEvent(new Event("error"));
+    }, this.onTouchStart = (t) => {
+      if (t.touches.length === 2) {
+        t.preventDefault(), this.img.classList.remove("returning");
+        const i = getComputedStyle(this.img).transform;
+        i && i !== "none" && (this.img.style.transform = i), this.readTransform(), this.setAttribute("zooming", ""), this.initialDistance = this.getTouchDistance(t.touches), this.initialScale = this.scale, this.initialMidpoint = this.getTouchMidpoint(t.touches), this.initialTranslate = { x: this.translateX, y: this.translateY };
+      }
+    }, this.onTouchMove = (t) => {
+      if (t.touches.length === 2) {
+        t.preventDefault();
+        const i = this.getTouchDistance(t.touches), e = Math.min(Math.max(this.initialScale * (i / this.initialDistance), 1), 5), s = this.getTouchMidpoint(t.touches), n = this.getBoundingClientRect(), r = this.initialMidpoint.x - n.left, h = this.initialMidpoint.y - n.top, a = e / this.initialScale, l = this.initialTranslate.x - r * (a - 1) + (s.x - this.initialMidpoint.x), c = this.initialTranslate.y - h * (a - 1) + (s.y - this.initialMidpoint.y);
+        this.scale = e, this.translateX = l, this.translateY = c, this.applyTransform();
+      }
+    }, this.onTouchEnd = (t) => {
+      t.touches.length < 2 && this.animateReset();
+    }, this.attachShadow({ mode: "open" }), this.shadowRoot.appendChild(o.content.cloneNode(!0)), this.img = this.shadowRoot.querySelector("img"), this.attrObserver = new MutationObserver((t) => {
+      for (const i of t)
+        i.type === "attributes" && i.attributeName && this.forwardAttribute(i.attributeName);
+    });
+  }
+  connectedCallback() {
+    for (const t of this.attributes)
+      this.forwardAttribute(t.name);
+    this.attrObserver.observe(this, { attributes: !0 }), this.img.addEventListener("load", this.onImgLoad), this.img.addEventListener("error", this.onImgError), this.addEventListener("touchstart", this.onTouchStart, { passive: !1 }), this.addEventListener("touchmove", this.onTouchMove, { passive: !1 }), this.addEventListener("touchend", this.onTouchEnd);
+  }
+  disconnectedCallback() {
+    this.attrObserver.disconnect(), this.img.removeEventListener("load", this.onImgLoad), this.img.removeEventListener("error", this.onImgError), this.removeEventListener("touchstart", this.onTouchStart), this.removeEventListener("touchmove", this.onTouchMove), this.removeEventListener("touchend", this.onTouchEnd);
+  }
+  /** Forward a single attribute from the host to the inner <img>, unless it's host-only. */
+  forwardAttribute(t) {
+    if (m.has(t)) return;
+    const i = this.getAttribute(t);
+    i === null ? this.img.removeAttribute(t) : this.img.setAttribute(t, i);
+  }
+  getTouchDistance(t) {
+    const i = t[0].clientX - t[1].clientX, e = t[0].clientY - t[1].clientY;
+    return Math.hypot(i, e);
+  }
+  getTouchMidpoint(t) {
+    return {
+      x: (t[0].clientX + t[1].clientX) / 2,
+      y: (t[0].clientY + t[1].clientY) / 2
+    };
+  }
+  applyTransform() {
+    this.img.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
+  }
+  animateReset() {
+    this.img.classList.add("returning"), this.img.style.transform = "";
+    const t = () => {
+      this.img.removeEventListener("transitionend", t), this.img.classList.remove("returning"), this.scale = 1, this.translateX = 0, this.translateY = 0, this.removeAttribute("zooming");
+    };
+    this.img.addEventListener("transitionend", t);
+  }
+  /** Read the current mid-animation transform back into our state. */
+  readTransform() {
+    const t = getComputedStyle(this.img).transform;
+    if (!t || t === "none") {
+      this.scale = 1, this.translateX = 0, this.translateY = 0;
+      return;
+    }
+    const i = t.match(/matrix\((.+)\)/);
+    if (i) {
+      const e = i[1].split(",").map(Number);
+      this.scale = e[0], this.translateX = e[4], this.translateY = e[5];
+    }
+  }
+}
+customElements.define("p-img", d);
+export {
+  d as PImg
+};

package/dist/p-img.umd.cjs

@@ -0,0 +1,29 @@
+(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s["p-img"]={}))})(this,(function(s){"use strict";const n=document.createElement("template");n.innerHTML=`
+<style>
+  :host {
+    display: inline-block;
+    overflow: hidden;
+    touch-action: none;
+  }
+  :host([zooming]) {
+    overflow: visible;
+    z-index: 2147483647;
+    position: relative;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: inherit;
+    object-position: inherit;
+    border-radius: inherit;
+    filter: inherit;
+    opacity: inherit;
+    transform-origin: 0 0;
+  }
+  img.returning {
+    transition: transform 0.3s ease-out;
+  }
+</style>
+<img part="img" />
+`;const l=new Set(["zooming","style","class","id","slot","part","is","tabindex"]);class o extends HTMLElement{constructor(){super(),this.scale=1,this.translateX=0,this.translateY=0,this.initialDistance=0,this.initialScale=1,this.initialMidpoint={x:0,y:0},this.initialTranslate={x:0,y:0},this.onImgLoad=()=>{this.dispatchEvent(new Event("load"))},this.onImgError=()=>{this.dispatchEvent(new Event("error"))},this.onTouchStart=t=>{if(t.touches.length===2){t.preventDefault(),this.img.classList.remove("returning");const i=getComputedStyle(this.img).transform;i&&i!=="none"&&(this.img.style.transform=i),this.readTransform(),this.setAttribute("zooming",""),this.initialDistance=this.getTouchDistance(t.touches),this.initialScale=this.scale,this.initialMidpoint=this.getTouchMidpoint(t.touches),this.initialTranslate={x:this.translateX,y:this.translateY}}},this.onTouchMove=t=>{if(t.touches.length===2){t.preventDefault();const i=this.getTouchDistance(t.touches),e=Math.min(Math.max(this.initialScale*(i/this.initialDistance),1),5),a=this.getTouchMidpoint(t.touches),r=this.getBoundingClientRect(),c=this.initialMidpoint.x-r.left,d=this.initialMidpoint.y-r.top,h=e/this.initialScale,m=this.initialTranslate.x-c*(h-1)+(a.x-this.initialMidpoint.x),u=this.initialTranslate.y-d*(h-1)+(a.y-this.initialMidpoint.y);this.scale=e,this.translateX=m,this.translateY=u,this.applyTransform()}},this.onTouchEnd=t=>{t.touches.length<2&&this.animateReset()},this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(n.content.cloneNode(!0)),this.img=this.shadowRoot.querySelector("img"),this.attrObserver=new MutationObserver(t=>{for(const i of t)i.type==="attributes"&&i.attributeName&&this.forwardAttribute(i.attributeName)})}connectedCallback(){for(const t of this.attributes)this.forwardAttribute(t.name);this.attrObserver.observe(this,{attributes:!0}),this.img.addEventListener("load",this.onImgLoad),this.img.addEventListener("error",this.onImgError),this.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd)}disconnectedCallback(){this.attrObserver.disconnect(),this.img.removeEventListener("load",this.onImgLoad),this.img.removeEventListener("error",this.onImgError),this.removeEventListener("touchstart",this.onTouchStart),this.removeEventListener("touchmove",this.onTouchMove),this.removeEventListener("touchend",this.onTouchEnd)}forwardAttribute(t){if(l.has(t))return;const i=this.getAttribute(t);i===null?this.img.removeAttribute(t):this.img.setAttribute(t,i)}getTouchDistance(t){const i=t[0].clientX-t[1].clientX,e=t[0].clientY-t[1].clientY;return Math.hypot(i,e)}getTouchMidpoint(t){return{x:(t[0].clientX+t[1].clientX)/2,y:(t[0].clientY+t[1].clientY)/2}}applyTransform(){this.img.style.transform=`translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`}animateReset(){this.img.classList.add("returning"),this.img.style.transform="";const t=()=>{this.img.removeEventListener("transitionend",t),this.img.classList.remove("returning"),this.scale=1,this.translateX=0,this.translateY=0,this.removeAttribute("zooming")};this.img.addEventListener("transitionend",t)}readTransform(){const t=getComputedStyle(this.img).transform;if(!t||t==="none"){this.scale=1,this.translateX=0,this.translateY=0;return}const i=t.match(/matrix\((.+)\)/);if(i){const e=i[1].split(",").map(Number);this.scale=e[0],this.translateX=e[4],this.translateY=e[5]}}}customElements.define("p-img",o),s.PImg=o,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@carterduong/p-img",
+  "version": "0.1.0",
+  "description": "A web component that adds pinch-to-zoom to images on mobile",
+  "type": "module",
+  "main": "dist/p-img.umd.cjs",
+  "module": "dist/p-img.js",
+  "types": "dist/p-img.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/p-img.d.ts",
+      "import": "./dist/p-img.js",
+      "require": "./dist/p-img.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:pages": "npm run build && cp dist/p-img.js docs/p-img.js",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm test && npm run build"
+  },
+  "keywords": [
+    "web-component",
+    "pinch-to-zoom",
+    "image",
+    "mobile",
+    "touch"
+  ],
+  "license": "MIT",
+  "author": "carterduong",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/carterduong/pimg.git"
+  },
+  "homepage": "https://github.com/carterduong/pimg",
+  "bugs": {
+    "url": "https://github.com/carterduong/pimg/issues"
+  },
+  "devDependencies": {
+    "jsdom": "^28.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.0.18"
+  }
+}