@sobree/zoom-controls 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/zoomControls.ts","../src/plugin.ts"],"sourcesContent":["import \"./zoomControls.css\";\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/zoomControls.ts","../src/plugin.ts"],"sourcesContent":["import \"./zoomControls.css\";\nimport { type Viewport, getFloatingCorner } from \"@sobree/core\";\n\nexport type ZoomControlsPlacement = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\nexport interface ZoomControlsOptions {\n /**\n * Element the dock is pinned to (positioned `absolute` inside it).\n * Typically the same element you handed to `createSobree()` /\n * `new Viewport(...)`.\n */\n container: HTMLElement;\n /** Viewport whose scale + fit are driven by the dock. */\n viewport: Viewport;\n /**\n * Element to fit when \"Fit width\" is pressed. Pass an `HTMLElement`\n * for a static target, or a function for a dynamic one (e.g. the\n * first paper of a paginated document).\n */\n fitWidthTarget: HTMLElement | (() => HTMLElement);\n /**\n * Element to fit when \"Fit page\" is pressed. Same shape as\n * `fitWidthTarget`. Common pattern: a resolver that returns the\n * paper closest to the viewport's vertical centre.\n */\n fitPageTarget: HTMLElement | (() => HTMLElement);\n /**\n * Multiplicative step per zoom-in / zoom-out click. Default `1.2`\n * (≈ 20%). Zoom-in multiplies, zoom-out divides.\n */\n zoomFactor?: number;\n /** Whether the fit-width / fit-page actions animate the pan. Default `true`. */\n animateFit?: boolean;\n /**\n * Which corner of the container the dock is pinned to. Default\n * `\"bottom-right\"`. A `data-placement` attribute is set on the root\n * element so consumers can target a specific corner from CSS.\n */\n placement?: ZoomControlsPlacement;\n}\n\n/**\n * Floating zoom dock pinned to the bottom-right of a container.\n * Four actions: fit-page, fit-width, zoom-out, zoom-in. Idle at 50%\n * opacity, fully opaque on hover / focus.\n *\n * Framework-free; consumers wire the targets they want fitted.\n */\nexport class ZoomControls {\n readonly root: HTMLElement;\n private readonly viewport: Viewport;\n private readonly fitWidthTarget: () => HTMLElement;\n private readonly fitPageTarget: () => HTMLElement;\n private readonly zoomFactor: number;\n private readonly animateFit: boolean;\n private readonly onClick: (e: MouseEvent) => void;\n\n constructor(opts: ZoomControlsOptions) {\n this.viewport = opts.viewport;\n this.fitWidthTarget = resolveTarget(opts.fitWidthTarget);\n this.fitPageTarget = resolveTarget(opts.fitPageTarget);\n this.zoomFactor = opts.zoomFactor ?? 1.2;\n this.animateFit = opts.animateFit ?? true;\n\n this.root = document.createElement(\"div\");\n this.root.className = \"sobree-zoom-controls\";\n this.root.setAttribute(\"data-placement\", opts.placement ?? \"bottom-right\");\n this.root.innerHTML = `\n <button type=\"button\" data-zc-action=\"fit-page\" aria-label=\"Fit page\" title=\"Fit page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"1.5\" width=\"10\" height=\"11\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"/>\n <rect x=\"4.5\" y=\"4\" width=\"5\" height=\"6\" rx=\"0.5\" fill=\"currentColor\"/>\n </svg>\n </button>\n <button type=\"button\" data-zc-action=\"fit-width\" aria-label=\"Fit width\" title=\"Fit width\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n <path d=\"M1.5 7 L4 4.5 M1.5 7 L4 9.5 M1.5 7 H12.5 M12.5 7 L10 4.5 M12.5 7 L10 9.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button type=\"button\" data-zc-action=\"zoom-out\" aria-label=\"Zoom out\" title=\"Zoom out\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n <path d=\"M3.5 7 H10.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <button type=\"button\" data-zc-action=\"zoom-in\" aria-label=\"Zoom in\" title=\"Zoom in\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n <path d=\"M7 3.5 V10.5 M3.5 7 H10.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n `;\n // Append to the shared floating-corner container instead of\n // directly to the host, so a second corner-resident (e.g. the\n // review dock) in the same corner stacks cleanly above/below us\n // instead of overlapping.\n const placement = opts.placement ?? \"bottom-right\";\n getFloatingCorner(opts.container, placement).appendChild(this.root);\n\n this.onClick = (e) => this.handleClick(e);\n this.root.addEventListener(\"click\", this.onClick);\n }\n\n destroy(): void {\n this.root.removeEventListener(\"click\", this.onClick);\n this.root.remove();\n }\n\n private handleClick(e: MouseEvent): void {\n const btn = (e.target as HTMLElement).closest(\"button[data-zc-action]\");\n if (!btn) return;\n const action = btn.getAttribute(\"data-zc-action\");\n switch (action) {\n case \"zoom-in\":\n this.zoomFromCenter(this.zoomFactor);\n return;\n case \"zoom-out\":\n this.zoomFromCenter(1 / this.zoomFactor);\n return;\n case \"fit-width\":\n this.viewport.fitTo(this.fitWidthTarget(), \"width\", this.animateFit);\n return;\n case \"fit-page\":\n this.viewport.fitTo(this.fitPageTarget(), \"contain\", this.animateFit);\n return;\n }\n }\n\n private zoomFromCenter(factor: number): void {\n const rect = this.viewport.container.getBoundingClientRect();\n this.viewport.zoomTo(\n this.viewport.getScale() * factor,\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n );\n }\n}\n\nfunction resolveTarget(source: HTMLElement | (() => HTMLElement)): () => HTMLElement {\n return typeof source === \"function\" ? source : () => source;\n}\n","/**\n * `SobreePlugin` factory wrapping the `ZoomControls` class. Hand the\n * result to `createSobree({ plugins: [...] })`; setup constructs the\n * dock against the plugin context (host + viewport + sobree.firstPaper)\n * and destroy tears it down.\n *\n * For embedders who skipped `createSobree()`, the `ZoomControls`\n * class itself is exported from this package — instantiate directly\n * with full `ZoomControlsOptions`.\n */\n\nimport type { SobreePlugin } from \"@sobree/core\";\nimport { ZoomControls, type ZoomControlsOptions } from \"./zoomControls\";\n\n/**\n * User-overridable subset of `ZoomControlsOptions`. `container` and\n * `viewport` come from the plugin context; `fitWidthTarget` defaults\n * to `sobree.firstPaperRow` (paper card + comments sidebar, so\n * fit-to-width doesn't clip the sidebar) and `fitPageTarget` defaults\n * to `sobree.firstPaper` (the paper card alone). Both can be\n * overridden per-call.\n */\nexport type ZoomControlsPluginOptions = Partial<\n Omit<ZoomControlsOptions, \"container\" | \"viewport\">\n>;\n\nexport function zoomControls(opts: ZoomControlsPluginOptions = {}): SobreePlugin {\n return {\n name: \"zoom-controls\",\n setup({ host, viewport, sobree }) {\n const dock = new ZoomControls({\n container: host,\n viewport,\n fitWidthTarget: () => sobree.firstPaperRow,\n fitPageTarget: () => sobree.firstPaper,\n ...opts,\n });\n return { destroy: () => dock.destroy() };\n },\n };\n}\n"],"names":["ZoomControls","opts","__publicField","resolveTarget","placement","getFloatingCorner","e","btn","factor","rect","source","zoomControls","host","viewport","sobree","dock"],"mappings":";;;;AAgDO,MAAMA,EAAa;AAAA,EASxB,YAAYC,GAA2B;AAR9B,IAAAC,EAAA;AACQ,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AAGf,SAAK,WAAWD,EAAK,UACrB,KAAK,iBAAiBE,EAAcF,EAAK,cAAc,GACvD,KAAK,gBAAgBE,EAAcF,EAAK,aAAa,GACrD,KAAK,aAAaA,EAAK,cAAc,KACrC,KAAK,aAAaA,EAAK,cAAc,IAErC,KAAK,OAAO,SAAS,cAAc,KAAK,GACxC,KAAK,KAAK,YAAY,wBACtB,KAAK,KAAK,aAAa,kBAAkBA,EAAK,aAAa,cAAc,GACzE,KAAK,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BtB,UAAMG,IAAYH,EAAK,aAAa;AACpC,IAAAI,EAAkBJ,EAAK,WAAWG,CAAS,EAAE,YAAY,KAAK,IAAI,GAElE,KAAK,UAAU,CAACE,MAAM,KAAK,YAAYA,CAAC,GACxC,KAAK,KAAK,iBAAiB,SAAS,KAAK,OAAO;AAAA,EAClD;AAAA,EAEA,UAAgB;AACd,SAAK,KAAK,oBAAoB,SAAS,KAAK,OAAO,GACnD,KAAK,KAAK,OAAA;AAAA,EACZ;AAAA,EAEQ,YAAYA,GAAqB;AACvC,UAAMC,IAAOD,EAAE,OAAuB,QAAQ,wBAAwB;AACtE,QAAI,CAACC,EAAK;AAEV,YADeA,EAAI,aAAa,gBAAgB,GACxC;AAAA,MACN,KAAK;AACH,aAAK,eAAe,KAAK,UAAU;AACnC;AAAA,MACF,KAAK;AACH,aAAK,eAAe,IAAI,KAAK,UAAU;AACvC;AAAA,MACF,KAAK;AACH,aAAK,SAAS,MAAM,KAAK,kBAAkB,SAAS,KAAK,UAAU;AACnE;AAAA,MACF,KAAK;AACH,aAAK,SAAS,MAAM,KAAK,iBAAiB,WAAW,KAAK,UAAU;AACpE;AAAA,IAAA;AAAA,EAEN;AAAA,EAEQ,eAAeC,GAAsB;AAC3C,UAAMC,IAAO,KAAK,SAAS,UAAU,sBAAA;AACrC,SAAK,SAAS;AAAA,MACZ,KAAK,SAAS,SAAA,IAAaD;AAAA,MAC3BC,EAAK,OAAOA,EAAK,QAAQ;AAAA,MACzBA,EAAK,MAAMA,EAAK,SAAS;AAAA,IAAA;AAAA,EAE7B;AACF;AAEA,SAASN,EAAcO,GAA8D;AACnF,SAAO,OAAOA,KAAW,aAAaA,IAAS,MAAMA;AACvD;AChHO,SAASC,EAAaV,IAAkC,IAAkB;AAC/E,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAE,MAAAW,GAAM,UAAAC,GAAU,QAAAC,KAAU;AAChC,YAAMC,IAAO,IAAIf,EAAa;AAAA,QAC5B,WAAWY;AAAA,QACX,UAAAC;AAAA,QACA,gBAAgB,MAAMC,EAAO;AAAA,QAC7B,eAAe,MAAMA,EAAO;AAAA,QAC5B,GAAGb;AAAA,MAAA,CACJ;AACD,aAAO,EAAE,SAAS,MAAMc,EAAK,UAAQ;AAAA,IACvC;AAAA,EAAA;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sobree/zoom-controls",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"LICENSE"
|
|
42
42
|
],
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@sobree/core": "0.1.
|
|
44
|
+
"@sobree/core": "0.1.10"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"typecheck": "tsc --noEmit",
|