From 42d4d88aae1be3f48555bd1c96527cc19efa4dba Mon Sep 17 00:00:00 2001 From: SanikaA3 <147941536+SanikaA3@users.noreply.github.com> Date: Sat, 12 Sep 2026 00:14:32 -0400 Subject: [PATCH 1/6] feat(slide-deck): present imported PPTX decks in the page Adds the front end half of #2947. The import route landing in haxcms-nodejs#26 writes files/decks//deck.json plus the original .pptx; this is the element that consumes it: Content is layered so a deck degrades rather than breaks. The manifest's per slide text and speaker notes always render and are what assistive technology and site search read. When the manifest names a pptx, the real file is painted over that text by @aiden0z/pptx-renderer (Apache-2.0), imported dynamically only once the deck intersects the viewport, so a deck further down a page costs nothing until it is looked at. If the renderer cannot run the text layer simply stays visible. Only the renderer's low level API is used (parseZip -> buildPresentation -> renderSlide) so all navigation and chrome belongs to the element, not the library. Includes slide and grid modes, speaker notes, prev/next with arrow key, Home and End support, per deck #-slide- deep links, copy link, and fullscreen present mode. The painted surface is aria-hidden; the manifest text is the accessibility contract. Two details worth flagging: - pdfjs is deliberately left unconfigured. The renderer declares it as a peer dependency but only uses it for EMF embedded PDF fallbacks, loaded from a runtime URL. Wiring it would mean fetching a library at runtime, so that narrow case falls back to slide text instead. - Manifest media paths are relative to deck.json, not to the page, so they are resolved against the manifest URL. Resolving against location would break every image on a nested page route. Verified with a 6 slide deck covering text, preset autoshapes, a table, an embedded image and a chart: 6/6 slides rendered with no errors, ~430ms cold including the renderer import. Element suite is 7/7. Refs #2947 Co-Authored-By: Claude Opus 5 --- elements/slide-deck/.dddignore | 36 ++ elements/slide-deck/.editorconfig | 29 ++ .../slide-deck/.github/workflows/main.yml | 33 ++ elements/slide-deck/.gitignore | 26 + elements/slide-deck/.nojekyll | 0 elements/slide-deck/.npmignore | 1 + elements/slide-deck/.surgeignore | 1 + elements/slide-deck/.travis.yml | 15 + elements/slide-deck/LICENSE | 201 ++++++++ elements/slide-deck/README.md | 53 ++ elements/slide-deck/demo/deck.json | 30 ++ elements/slide-deck/demo/index.html | 23 + elements/slide-deck/gulpfile.cjs | 14 + elements/slide-deck/index.html | 11 + .../slide-deck/lib/slide-deck-renderer.js | 103 ++++ .../lib/slide-deck.haxProperties.json | 63 +++ .../locales/slide-deck.ar.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.ar.json | 14 + .../locales/slide-deck.bn.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.bn.json | 14 + .../locales/slide-deck.es.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.es.json | 14 + .../locales/slide-deck.fr.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.fr.json | 14 + .../locales/slide-deck.hi.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.hi.json | 14 + .../locales/slide-deck.ja.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.ja.json | 14 + .../locales/slide-deck.pt.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.pt.json | 14 + .../locales/slide-deck.ru.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.ru.json | 14 + .../locales/slide-deck.zh.haxProperties.json | 12 + .../slide-deck/locales/slide-deck.zh.json | 14 + elements/slide-deck/package.json | 50 ++ elements/slide-deck/slide-deck.js | 488 ++++++++++++++++++ elements/slide-deck/test/slide-deck.test.js | 60 +++ 37 files changed, 1471 insertions(+) create mode 100644 elements/slide-deck/.dddignore create mode 100644 elements/slide-deck/.editorconfig create mode 100644 elements/slide-deck/.github/workflows/main.yml create mode 100644 elements/slide-deck/.gitignore create mode 100644 elements/slide-deck/.nojekyll create mode 100644 elements/slide-deck/.npmignore create mode 100644 elements/slide-deck/.surgeignore create mode 100644 elements/slide-deck/.travis.yml create mode 100644 elements/slide-deck/LICENSE create mode 100644 elements/slide-deck/README.md create mode 100644 elements/slide-deck/demo/deck.json create mode 100644 elements/slide-deck/demo/index.html create mode 100644 elements/slide-deck/gulpfile.cjs create mode 100644 elements/slide-deck/index.html create mode 100644 elements/slide-deck/lib/slide-deck-renderer.js create mode 100644 elements/slide-deck/lib/slide-deck.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.ar.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.ar.json create mode 100644 elements/slide-deck/locales/slide-deck.bn.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.bn.json create mode 100644 elements/slide-deck/locales/slide-deck.es.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.es.json create mode 100644 elements/slide-deck/locales/slide-deck.fr.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.fr.json create mode 100644 elements/slide-deck/locales/slide-deck.hi.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.hi.json create mode 100644 elements/slide-deck/locales/slide-deck.ja.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.ja.json create mode 100644 elements/slide-deck/locales/slide-deck.pt.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.pt.json create mode 100644 elements/slide-deck/locales/slide-deck.ru.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.ru.json create mode 100644 elements/slide-deck/locales/slide-deck.zh.haxProperties.json create mode 100644 elements/slide-deck/locales/slide-deck.zh.json create mode 100644 elements/slide-deck/package.json create mode 100644 elements/slide-deck/slide-deck.js create mode 100644 elements/slide-deck/test/slide-deck.test.js diff --git a/elements/slide-deck/.dddignore b/elements/slide-deck/.dddignore new file mode 100644 index 0000000000..0433d9a7c6 --- /dev/null +++ b/elements/slide-deck/.dddignore @@ -0,0 +1,36 @@ +# Directories +# (Must start with with / or \, as seen below) +/.github # Inline comments are supported +/.vscode +/.idea +/locales +\test +/dist +/build +/public # ignored by program regardless of presence in .dddignore +/node_modules # ignored by program regardless of presence in .dddignore + +# Files +# (Must include filename and extension, as seen below) +LICENSE +.dddignore +.editorconfig +.gitignore +.nojekyll +.npmignore +.surgeignore +rollup.config.js + +# File extension +# (Must start with *, as seen below) +*.md +*.yml +*.json +*.toml +*.mjs +*.cjs +*.png +*.ico +*.svg +*.jpg +*.jpeg diff --git a/elements/slide-deck/.editorconfig b/elements/slide-deck/.editorconfig new file mode 100644 index 0000000000..c8c2d2aaf6 --- /dev/null +++ b/elements/slide-deck/.editorconfig @@ -0,0 +1,29 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[*.json] +indent_size = 2 + +[*.{html,js,md}] +block_comment_start = /** +block_comment = * +block_comment_end = */ diff --git a/elements/slide-deck/.github/workflows/main.yml b/elements/slide-deck/.github/workflows/main.yml new file mode 100644 index 0000000000..f4900474ae --- /dev/null +++ b/elements/slide-deck/.github/workflows/main.yml @@ -0,0 +1,33 @@ +name: Build and Deploy +on: [push] +jobs: + build-and-deploy: + permissions: + contents: write + runs-on: ubuntu-latest + steps: + - name: ACTIONS_ALLOW_UNSECURE_COMMANDS + id: ACTIONS_ALLOW_UNSECURE_COMMANDS + run: echo 'ACTIONS_ALLOW_UNSECURE_COMMANDS=true' >> $GITHUB_ENV + + - name: set env variable actor + run: echo 'GITHUB_ACTOR=$GITHUB_ACTOR' >> $GITHUB_ENV + + - name: set env variable repo + run: echo 'GITHUB_REPOSITORY=$GITHUB_REPOSITORY' >> $GITHUB_ENV + + - name: Checkout 🛎️ + uses: actions/checkout@v4.1.7 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly. + with: + persist-credentials: false + + - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. + run: | + npm install + npm run build + - name: Deploy to GitHub Pages + uses: JamesIves/github-pages-deploy-action@v4.6.3 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BRANCH: gh-pages # The branch the action should deploy to. + FOLDER: public # The folder the action should deploy. diff --git a/elements/slide-deck/.gitignore b/elements/slide-deck/.gitignore new file mode 100644 index 0000000000..f763927fa5 --- /dev/null +++ b/elements/slide-deck/.gitignore @@ -0,0 +1,26 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log + +## testing +/coverage/ + +## temp folders +/.tmp/ + +# build +/_site/ +/dist/ +/out-tsc/ +/public/ + +storybook-static +custom-elements.json +.vercel diff --git a/elements/slide-deck/.nojekyll b/elements/slide-deck/.nojekyll new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/slide-deck/.npmignore b/elements/slide-deck/.npmignore new file mode 100644 index 0000000000..3c3629e647 --- /dev/null +++ b/elements/slide-deck/.npmignore @@ -0,0 +1 @@ +node_modules diff --git a/elements/slide-deck/.surgeignore b/elements/slide-deck/.surgeignore new file mode 100644 index 0000000000..ddf342489b --- /dev/null +++ b/elements/slide-deck/.surgeignore @@ -0,0 +1 @@ +!node_modules/ diff --git a/elements/slide-deck/.travis.yml b/elements/slide-deck/.travis.yml new file mode 100644 index 0000000000..13da95ea06 --- /dev/null +++ b/elements/slide-deck/.travis.yml @@ -0,0 +1,15 @@ +language: node_js +dist: trusty +sudo: required +addons: + firefox: "latest" + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +node_js: stable +install: + - npm install +script: + - xvfb-run npm run test diff --git a/elements/slide-deck/LICENSE b/elements/slide-deck/LICENSE new file mode 100644 index 0000000000..983944aa1c --- /dev/null +++ b/elements/slide-deck/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright (c) 2026 haxtheweb + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/elements/slide-deck/README.md b/elements/slide-deck/README.md new file mode 100644 index 0000000000..4954aaba64 --- /dev/null +++ b/elements/slide-deck/README.md @@ -0,0 +1,53 @@ +# slide-deck + +Presents a PowerPoint deck imported by HAXcms, slide by slide, in the page. + +```html + +``` + +The PPTX import route writes `deck.json` alongside the original file and its +extracted media. That manifest is the element's only required input: + +```json +{ + "title": "My talk", + "pptx": "files/decks/my-talk/original.pptx", + "slides": [{ "number": 1, "title": "…", "html": "…", "notes": "…" }] +} +``` + +## How it renders + +Content is layered, so a deck degrades rather than breaks: + +- The manifest's per slide text and speaker notes always render. This is what + assistive technology and site search read, and it is all that is needed for + the deck to be navigable. +- When the manifest names a `pptx`, the original file is painted over that text + by [`@aiden0z/pptx-renderer`](https://www.npmjs.com/package/@aiden0z/pptx-renderer). + The renderer is only fetched once the deck scrolls into view, so a deck lower + down a page costs nothing until it is looked at. If it cannot run, the text + layer simply stays visible. + +## Properties + +| property | attribute | description | +| -------- | --------- | -------------------------------------------------------------- | +| `source` | `source` | URL of `deck.json`, relative to the page or absolute | +| `deckId` | `deck-id` | Distinguishes slide links when a page holds more than one deck | +| `slide` | `slide` | Currently displayed slide, 1 based | +| `mode` | `mode` | `slide` for one at a time, `grid` for every slide plus notes | + +Slides are reachable by URL as `#-slide-`, and arrow keys, `Home` +and `End` move through a focused deck. + +## Commands + +- `npm start` - development server +- `npm run build` - build and analyze +- `npm run test` - run tests + +# Credits + +A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initiative. diff --git a/elements/slide-deck/demo/deck.json b/elements/slide-deck/demo/deck.json new file mode 100644 index 0000000000..894b0ef07d --- /dev/null +++ b/elements/slide-deck/demo/deck.json @@ -0,0 +1,30 @@ +{ + "title": "Demo deck", + "source": "demo-deck.pptx", + "pptx": null, + "thumbnail": null, + "renderTier": "client", + "slides": [ + { + "number": 1, + "title": "Presenting a deck in HAX", + "html": "

Presenting a deck in HAX

Imported from PowerPoint, shown in context.

", + "image": null, + "notes": "

Open on why a deck belongs on the page rather than as a download.

" + }, + { + "number": 2, + "title": "Text is the substance", + "html": "

Text is the substance

Slide text and speaker notes come from the manifest, so the deck is readable, searchable and navigable on its own.

", + "image": null, + "notes": "

This is what screen readers and site search actually read.

" + }, + { + "number": 3, + "title": "Slides are the enhancement", + "html": "

Slides are the enhancement

When a manifest names a .pptx the real slides are painted over this text, once the deck is scrolled into view.

", + "image": null, + "notes": "

This demo manifest has no pptx, so the text layer stays visible.

" + } + ] +} diff --git a/elements/slide-deck/demo/index.html b/elements/slide-deck/demo/index.html new file mode 100644 index 0000000000..cebc9090aa --- /dev/null +++ b/elements/slide-deck/demo/index.html @@ -0,0 +1,23 @@ + + + + + + SlideDeck: slide-deck Demo + + + + +
+

Basic slide-deck demo

+

+ This manifest carries no pptx, so the text layer stays on + screen. Point source at a deck.json written by the PPTX + import to see the real slides painted over it. +

+ +
+ + diff --git a/elements/slide-deck/gulpfile.cjs b/elements/slide-deck/gulpfile.cjs new file mode 100644 index 0000000000..b811a2089d --- /dev/null +++ b/elements/slide-deck/gulpfile.cjs @@ -0,0 +1,14 @@ +const gulp = require("gulp"); +const fs = require("fs"); +const path = require("path"); +const packageJson = require("./package.json"); +gulp.task("watch", () => { + return gulp.watch(["./*.js","./lib/*", "./demo/*"]); +}); + +gulp.task("dev", gulp.series("watch")); + +gulp.task( + "default", + gulp.series("dev") +); \ No newline at end of file diff --git a/elements/slide-deck/index.html b/elements/slide-deck/index.html new file mode 100644 index 0000000000..e0086628ac --- /dev/null +++ b/elements/slide-deck/index.html @@ -0,0 +1,11 @@ + + + + + + slide-deck documentation + + + + + diff --git a/elements/slide-deck/lib/slide-deck-renderer.js b/elements/slide-deck/lib/slide-deck-renderer.js new file mode 100644 index 0000000000..a794883dc0 --- /dev/null +++ b/elements/slide-deck/lib/slide-deck-renderer.js @@ -0,0 +1,103 @@ +/** + * Copyright 2026 haxtheweb + * @license Apache-2.0, see LICENSE for full text. + */ + +/** + * Thin wrapper around the browser build of @aiden0z/pptx-renderer. + * + * Kept in its own module so `slide-deck` can dynamically import it only once a + * deck is actually on screen; the renderer bundle is ~1.5MB and must never load + * for a page that merely contains a deck further down. + * + * Only the low level API is used (parse -> build -> render a single slide) so + * all navigation and chrome stays in slide-deck. + */ +export class DeckRenderer { + /** + * Parse a .pptx and prepare it for per slide rendering. + * @param {string} pptxUrl absolute URL of the source presentation + * @returns {Promise} + */ + static async load(pptxUrl) { + const { + parseZip, + buildPresentation, + materializeSlideNodes, + renderSlide, + RECOMMENDED_ZIP_LIMITS, + } = await import("@aiden0z/pptx-renderer/browser"); + const response = await fetch(pptxUrl); + if (!response.ok) { + throw new Error(`unable to fetch ${pptxUrl} (${response.status})`); + } + const files = await parseZip( + await response.arrayBuffer(), + RECOMMENDED_ZIP_LIMITS, + ); + return new DeckRenderer(buildPresentation(files), { + materializeSlideNodes, + renderSlide, + }); + } + + constructor(presentation, api) { + this.presentation = presentation; + this.api = api; + // blob URLs for embedded media are reused across slides + this.mediaUrlCache = new Map(); + this.chartInstances = new Set(); + this.handles = new Map(); + } + + get slideCount() { + return this.presentation.slides.length; + } + + /** Height / width of the deck, used to size the stage before anything paints. */ + get aspectRatio() { + const { width, height } = this.presentation; + return width > 0 ? height / width : 0.5625; + } + + /** + * Paint a slide into `target`, scaled to fill it. + * @param {HTMLElement} target + * @param {number} index zero based slide index + */ + async render(target, index) { + const slide = this.presentation.slides[index]; + if (!slide) { + return; + } + this.dispose(index); + this.api.materializeSlideNodes(this.presentation, slide); + // pdfjs is intentionally not configured: it is only used for EMF embedded + // PDF fallbacks and wiring it would mean fetching a library at runtime. + const handle = this.api.renderSlide(this.presentation, slide, { + mediaUrlCache: this.mediaUrlCache, + chartInstances: this.chartInstances, + }); + this.handles.set(index, handle); + target.replaceChildren(handle.element); + handle.element.style.transformOrigin = "top left"; + handle.element.style.transform = `scale(${target.clientWidth / this.presentation.width})`; + await handle.ready; + } + + /** Release a single slide, or every slide when no index is given. */ + dispose(index) { + if (index === undefined) { + this.handles.forEach((handle) => handle.dispose()); + this.handles.clear(); + this.mediaUrlCache.forEach((url) => URL.revokeObjectURL(url)); + this.mediaUrlCache.clear(); + return; + } + const handle = this.handles.get(index); + if (handle) { + handle.dispose(); + this.handles.delete(index); + } + } +} diff --git a/elements/slide-deck/lib/slide-deck.haxProperties.json b/elements/slide-deck/lib/slide-deck.haxProperties.json new file mode 100644 index 0000000000..66d130d86a --- /dev/null +++ b/elements/slide-deck/lib/slide-deck.haxProperties.json @@ -0,0 +1,63 @@ +{ + "api": "1", + "canScale": true, + "canEditSource": true, + "type": "element", + "designSystem": { + "accent": true, + "primary": true, + "card": true, + "text": true, + "designTreatment": false + }, + "gizmo": { + "title": "Slide deck", + "description": "Present an imported PowerPoint deck slide by slide, with speaker notes.", + "icon": "icons:slideshow", + "color": "purple", + "tags": ["Media", "presentation", "slides", "powerpoint", "pptx"], + "handles": [ + { + "type": "presentation", + "source": "source" + } + ], + "meta": { + "author": "haxtheweb" + } + }, + "settings": { + "configure": [ + { + "property": "source", + "title": "Deck manifest", + "description": "deck.json written by the PPTX import, for example files/decks/my-talk/deck.json", + "inputMethod": "haxupload", + "icon": "icons:slideshow", + "required": true + }, + { + "property": "deckId", + "title": "Deck id", + "description": "Only needed when a page holds more than one deck, so slide links stay distinct", + "inputMethod": "textfield", + "icon": "icons:link" + } + ], + "advanced": [], + "developer": [] + }, + "saveOptions": { + "wipeSlot": true, + "unsetAttributes": ["deck", "status", "rendered"] + }, + "demoSchema": [ + { + "tag": "slide-deck", + "properties": { + "source": "files/decks/my-talk/deck.json" + }, + "content": "" + } + ] +} diff --git a/elements/slide-deck/locales/slide-deck.ar.haxProperties.json b/elements/slide-deck/locales/slide-deck.ar.haxProperties.json new file mode 100644 index 0000000000..58fd452268 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.ar.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "بيان العرض التقديمي" + }, + { + "title": "معرّف العرض التقديمي" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.ar.json b/elements/slide-deck/locales/slide-deck.ar.json new file mode 100644 index 0000000000..62f4b31de2 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.ar.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "الشريحة السابقة", + "nextSlide": "الشريحة التالية", + "viewAllSlides": "عرض كل الشرائح", + "viewOneSlide": "عرض شريحة واحدة في كل مرة", + "presentFullScreen": "العرض بملء الشاشة", + "exitFullScreen": "إنهاء ملء الشاشة", + "copyLinkToSlide": "نسخ رابط هذه الشريحة", + "linkCopied": "تم نسخ الرابط", + "speakerNotes": "ملاحظات المتحدث", + "loadingPresentation": "جارٍ تحميل العرض التقديمي", + "presentationUnavailable": "العرض التقديمي غير متوفر", + "slide": "شريحة" +} diff --git a/elements/slide-deck/locales/slide-deck.bn.haxProperties.json b/elements/slide-deck/locales/slide-deck.bn.haxProperties.json new file mode 100644 index 0000000000..a80393011d --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.bn.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "উপস্থাপনা ম্যানিফেস্ট" + }, + { + "title": "উপস্থাপনা আইডি" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.bn.json b/elements/slide-deck/locales/slide-deck.bn.json new file mode 100644 index 0000000000..e057d1a7de --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.bn.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "পূর্ববর্তী স্লাইড", + "nextSlide": "পরবর্তী স্লাইড", + "viewAllSlides": "সব স্লাইড দেখুন", + "viewOneSlide": "একবারে একটি স্লাইড দেখুন", + "presentFullScreen": "পূর্ণ স্ক্রিনে উপস্থাপন করুন", + "exitFullScreen": "পূর্ণ স্ক্রিন থেকে বেরিয়ে আসুন", + "copyLinkToSlide": "এই স্লাইডের লিঙ্ক কপি করুন", + "linkCopied": "লিঙ্ক কপি হয়েছে", + "speakerNotes": "বক্তার নোট", + "loadingPresentation": "উপস্থাপনা লোড হচ্ছে", + "presentationUnavailable": "উপস্থাপনা উপলব্ধ নেই", + "slide": "স্লাইড" +} diff --git a/elements/slide-deck/locales/slide-deck.es.haxProperties.json b/elements/slide-deck/locales/slide-deck.es.haxProperties.json new file mode 100644 index 0000000000..063bb53f4e --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.es.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "Manifiesto de la presentación" + }, + { + "title": "Id de la presentación" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.es.json b/elements/slide-deck/locales/slide-deck.es.json new file mode 100644 index 0000000000..014a62ac80 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.es.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "Diapositiva anterior", + "nextSlide": "Diapositiva siguiente", + "viewAllSlides": "Ver todas las diapositivas", + "viewOneSlide": "Ver una diapositiva a la vez", + "presentFullScreen": "Presentar en pantalla completa", + "exitFullScreen": "Salir de pantalla completa", + "copyLinkToSlide": "Copiar enlace a esta diapositiva", + "linkCopied": "Enlace copiado", + "speakerNotes": "Notas del orador", + "loadingPresentation": "Cargando presentación", + "presentationUnavailable": "Presentación no disponible", + "slide": "Diapositiva" +} diff --git a/elements/slide-deck/locales/slide-deck.fr.haxProperties.json b/elements/slide-deck/locales/slide-deck.fr.haxProperties.json new file mode 100644 index 0000000000..0ed28f3014 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.fr.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "Manifeste du diaporama" + }, + { + "title": "Identifiant du diaporama" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.fr.json b/elements/slide-deck/locales/slide-deck.fr.json new file mode 100644 index 0000000000..f730efaa92 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.fr.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "Diapositive précédente", + "nextSlide": "Diapositive suivante", + "viewAllSlides": "Voir toutes les diapositives", + "viewOneSlide": "Voir une diapositive à la fois", + "presentFullScreen": "Présenter en plein écran", + "exitFullScreen": "Quitter le plein écran", + "copyLinkToSlide": "Copier le lien vers cette diapositive", + "linkCopied": "Lien copié", + "speakerNotes": "Notes du présentateur", + "loadingPresentation": "Chargement de la présentation", + "presentationUnavailable": "Présentation indisponible", + "slide": "Diapositive" +} diff --git a/elements/slide-deck/locales/slide-deck.hi.haxProperties.json b/elements/slide-deck/locales/slide-deck.hi.haxProperties.json new file mode 100644 index 0000000000..9384c0034d --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.hi.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "प्रस्तुति मैनिफ़ेस्ट" + }, + { + "title": "प्रस्तुति आईडी" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.hi.json b/elements/slide-deck/locales/slide-deck.hi.json new file mode 100644 index 0000000000..2ddeda764e --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.hi.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "पिछली स्लाइड", + "nextSlide": "अगली स्लाइड", + "viewAllSlides": "सभी स्लाइड देखें", + "viewOneSlide": "एक बार में एक स्लाइड देखें", + "presentFullScreen": "पूर्ण स्क्रीन में प्रस्तुत करें", + "exitFullScreen": "पूर्ण स्क्रीन से बाहर निकलें", + "copyLinkToSlide": "इस स्लाइड का लिंक कॉपी करें", + "linkCopied": "लिंक कॉपी हो गया", + "speakerNotes": "वक्ता नोट्स", + "loadingPresentation": "प्रस्तुति लोड हो रही है", + "presentationUnavailable": "प्रस्तुति उपलब्ध नहीं है", + "slide": "स्लाइड" +} diff --git a/elements/slide-deck/locales/slide-deck.ja.haxProperties.json b/elements/slide-deck/locales/slide-deck.ja.haxProperties.json new file mode 100644 index 0000000000..f72df60be2 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.ja.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "デッキマニフェスト" + }, + { + "title": "デッキ ID" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.ja.json b/elements/slide-deck/locales/slide-deck.ja.json new file mode 100644 index 0000000000..5159e25ebe --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.ja.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "前のスライド", + "nextSlide": "次のスライド", + "viewAllSlides": "すべてのスライドを表示", + "viewOneSlide": "1 枚ずつ表示", + "presentFullScreen": "全画面で発表", + "exitFullScreen": "全画面を終了", + "copyLinkToSlide": "このスライドのリンクをコピー", + "linkCopied": "リンクをコピーしました", + "speakerNotes": "発表者ノート", + "loadingPresentation": "プレゼンテーションを読み込み中", + "presentationUnavailable": "プレゼンテーションを利用できません", + "slide": "スライド" +} diff --git a/elements/slide-deck/locales/slide-deck.pt.haxProperties.json b/elements/slide-deck/locales/slide-deck.pt.haxProperties.json new file mode 100644 index 0000000000..78e4471f6d --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.pt.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "Manifesto da apresentação" + }, + { + "title": "Id da apresentação" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.pt.json b/elements/slide-deck/locales/slide-deck.pt.json new file mode 100644 index 0000000000..f95f67f98e --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.pt.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "Slide anterior", + "nextSlide": "Próximo slide", + "viewAllSlides": "Ver todos os slides", + "viewOneSlide": "Ver um slide de cada vez", + "presentFullScreen": "Apresentar em tela cheia", + "exitFullScreen": "Sair da tela cheia", + "copyLinkToSlide": "Copiar link para este slide", + "linkCopied": "Link copiado", + "speakerNotes": "Notas do apresentador", + "loadingPresentation": "Carregando apresentação", + "presentationUnavailable": "Apresentação indisponível", + "slide": "Slide" +} diff --git a/elements/slide-deck/locales/slide-deck.ru.haxProperties.json b/elements/slide-deck/locales/slide-deck.ru.haxProperties.json new file mode 100644 index 0000000000..9355f2d009 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.ru.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "Манифест презентации" + }, + { + "title": "Идентификатор презентации" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.ru.json b/elements/slide-deck/locales/slide-deck.ru.json new file mode 100644 index 0000000000..4d6ae04f51 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.ru.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "Предыдущий слайд", + "nextSlide": "Следующий слайд", + "viewAllSlides": "Показать все слайды", + "viewOneSlide": "Показывать по одному слайду", + "presentFullScreen": "Полноэкранный режим", + "exitFullScreen": "Выйти из полноэкранного режима", + "copyLinkToSlide": "Копировать ссылку на слайд", + "linkCopied": "Ссылка скопирована", + "speakerNotes": "Заметки докладчика", + "loadingPresentation": "Загрузка презентации", + "presentationUnavailable": "Презентация недоступна", + "slide": "Слайд" +} diff --git a/elements/slide-deck/locales/slide-deck.zh.haxProperties.json b/elements/slide-deck/locales/slide-deck.zh.haxProperties.json new file mode 100644 index 0000000000..2c56548772 --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.zh.haxProperties.json @@ -0,0 +1,12 @@ +{ + "settings": { + "configure": [ + { + "title": "演示文稿清单" + }, + { + "title": "演示文稿 ID" + } + ] + } +} diff --git a/elements/slide-deck/locales/slide-deck.zh.json b/elements/slide-deck/locales/slide-deck.zh.json new file mode 100644 index 0000000000..ce8d5490ff --- /dev/null +++ b/elements/slide-deck/locales/slide-deck.zh.json @@ -0,0 +1,14 @@ +{ + "previousSlide": "上一张幻灯片", + "nextSlide": "下一张幻灯片", + "viewAllSlides": "查看所有幻灯片", + "viewOneSlide": "逐张查看", + "presentFullScreen": "全屏演示", + "exitFullScreen": "退出全屏", + "copyLinkToSlide": "复制此幻灯片的链接", + "linkCopied": "链接已复制", + "speakerNotes": "演讲者备注", + "loadingPresentation": "正在加载演示文稿", + "presentationUnavailable": "演示文稿不可用", + "slide": "幻灯片" +} diff --git a/elements/slide-deck/package.json b/elements/slide-deck/package.json new file mode 100644 index 0000000000..e498c55514 --- /dev/null +++ b/elements/slide-deck/package.json @@ -0,0 +1,50 @@ +{ + "name": "@haxtheweb/slide-deck", + "version": "0.0.0", + "description": "Present an imported PowerPoint deck slide by slide, with speaker notes", + "license": "Apache-2.0", + "author": { + "name": "haxtheweb" + }, + "keywords": [ + "webcomponents", + "lit", + "haxtheweb" + ], + "repository": { + "type": "git", + "url": "" + }, + "type": "module", + "main": "slide-deck.js", + "module": "slide-deck.js", + "scripts": { + "start": "yarn run dev", + "build": "prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && cem analyze --litelement --exclude \"(public|*.stories.js)\" --globs \"{*,lib/**}.js\"", + "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"", + "watch": "gulp dev --gulpfile=gulpfile.cjs", + "serve": "web-dev-server -c ../../web-dev-server.config.mjs", + "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium" + }, + "dependencies": { + "lit": "3.3.3", + "@haxtheweb/d-d-d": "^26.0.0", + "@haxtheweb/i18n-manager": "^26.0.0", + "@aiden0z/pptx-renderer": "^1.2.4", + "@haxtheweb/simple-icon": "^26.0.0" + }, + "devDependencies": { + "@custom-elements-manifest/analyzer": "0.10.4", + "@haxtheweb/deduping-fix": "^26.0.0", + "@web/dev-server": "0.4.6", + "concurrently": "9.1.2" + }, + "private": false, + "publishConfig": { + "access": "public" + }, + "hax": { + "cli": true + }, + "customElements": "custom-elements.json" +} diff --git a/elements/slide-deck/slide-deck.js b/elements/slide-deck/slide-deck.js new file mode 100644 index 0000000000..65034e4313 --- /dev/null +++ b/elements/slide-deck/slide-deck.js @@ -0,0 +1,488 @@ +/** + * Copyright 2026 haxtheweb + * @license Apache-2.0, see LICENSE for full text. + */ +import { LitElement, html, css, nothing } from "lit"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js"; +import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js"; +import "@haxtheweb/simple-icon/lib/simple-icon-button-lite.js"; + +/** + * `slide-deck` + * Presents a PPTX deck imported by HAXcms, from the deck.json manifest written + * to `files/decks//`. + * + * Content is layered. The manifest's per slide text and speaker notes always + * render and are what assistive technology and site search read. The original + * .pptx is painted over that by a renderer which is only fetched once a deck is + * on screen, so a deck costs nothing until it is looked at and still works when + * the renderer cannot run. + * + * @demo demo/index.html + * @element slide-deck + */ +export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { + static get tag() { + return "slide-deck"; + } + + constructor() { + super(); + this.source = null; + this.deckId = null; + this.slide = 1; + this.mode = "slide"; + this.presenting = false; + this.deck = null; + this.status = "idle"; + this.rendered = false; + this.t = this.t || {}; + this.t = { + ...this.t, + previousSlide: "Previous slide", + nextSlide: "Next slide", + viewAllSlides: "View all slides", + viewOneSlide: "View one slide at a time", + presentFullScreen: "Present full screen", + exitFullScreen: "Exit full screen", + copyLinkToSlide: "Copy link to this slide", + linkCopied: "Link copied", + speakerNotes: "Speaker notes", + loadingPresentation: "Loading presentation", + presentationUnavailable: "Presentation unavailable", + slide: "Slide", + }; + this.registerLocalization({ + context: this, + localesPath: + new URL("./locales/slide-deck.ar.json", import.meta.url).href + "/../", + }); + this._onHashChange = this._onHashChange.bind(this); + this._onFullscreenChange = this._onFullscreenChange.bind(this); + } + + static get properties() { + return { + ...super.properties, + /** URL of the deck.json manifest, relative to the page or absolute. */ + source: { type: String }, + /** Disambiguates deep links when a page holds more than one deck. */ + deckId: { type: String, attribute: "deck-id" }, + /** Currently displayed slide, 1 based. */ + slide: { type: Number, reflect: true }, + /** "slide" for one at a time, "grid" for every slide plus notes. */ + mode: { type: String, reflect: true }, + presenting: { type: Boolean, reflect: true }, + deck: { type: Object }, + status: { type: String, reflect: true }, + rendered: { type: Boolean }, + }; + } + + connectedCallback() { + super.connectedCallback(); + globalThis.addEventListener("hashchange", this._onHashChange); + this.addEventListener("fullscreenchange", this._onFullscreenChange); + } + + disconnectedCallback() { + globalThis.removeEventListener("hashchange", this._onHashChange); + this.removeEventListener("fullscreenchange", this._onFullscreenChange); + if (this._observer) { + this._observer.disconnect(); + this._observer = null; + } + if (this._renderer) { + this._renderer.dispose(); + this._renderer = null; + } + super.disconnectedCallback(); + } + + updated(changedProperties) { + if (super.updated) { + super.updated(changedProperties); + } + if (changedProperties.has("source") && this.source) { + this.loadDeck(); + } + if (changedProperties.has("slide") && this.deck) { + this._message = null; + this._syncHash(); + this.paintCurrentSlide(); + } + if (changedProperties.has("mode") && this.mode === "slide") { + this.paintCurrentSlide(); + } + } + + get slides() { + return (this.deck && this.deck.slides) || []; + } + + get currentSlide() { + return this.slides[this.slide - 1] || null; + } + + /** Prefix for the location hash, so two decks on a page cannot collide. */ + get hashPrefix() { + return this.deckId || (this.deck && this.deck.title) || "slide"; + } + + /** Fetch the manifest, then honour any slide named in the URL. */ + async loadDeck() { + this.status = "loading"; + this.rendered = false; + try { + const manifestUrl = new URL(this.source, globalThis.location.href); + const response = await fetch(manifestUrl.href); + if (!response.ok) { + throw new Error(`deck manifest ${response.status}`); + } + this.deck = await response.json(); + // media inside the manifest is stored beside it, not beside the page + this._base = manifestUrl; + this.status = "ready"; + this._readHash(); + this._watchForViewport(); + } catch (error) { + this.deck = null; + this.status = "error"; + console.error(`slide-deck: ${error.message}`); + } + } + + /** Only pay for the renderer once the deck is actually looked at. */ + _watchForViewport() { + if (this._observer || !globalThis.IntersectionObserver) { + return; + } + this._observer = new IntersectionObserver((entries) => { + if (entries.some((entry) => entry.isIntersecting)) { + this._observer.disconnect(); + this._observer = null; + this.paintCurrentSlide(); + } + }); + this._observer.observe(this); + } + + /** + * Paint the current slide with the real presentation. Any failure leaves the + * manifest text on screen, which is a usable deck in its own right. + */ + async paintCurrentSlide() { + if ( + this._observer || + !this.deck || + !this.deck.pptx || + this.mode !== "slide" + ) { + return; + } + const stage = this.shadowRoot && this.shadowRoot.querySelector("#stage"); + if (!stage) { + return; + } + try { + if (!this._renderer) { + const { DeckRenderer } = await import("./lib/slide-deck-renderer.js"); + this._renderer = await DeckRenderer.load( + new URL(this.deck.pptx, this._base).href, + ); + this.style.setProperty( + "--slide-deck-aspect-ratio", + `${this._renderer.aspectRatio}`, + ); + } + await this._renderer.render(stage, this.slide - 1); + this.rendered = true; + } catch (error) { + this.rendered = false; + console.error(`slide-deck: ${error.message}`); + } + } + + goTo(number) { + const total = this.slides.length; + if (total) { + this.slide = Math.min(Math.max(number, 1), total); + } + } + + showSlide(number) { + this.mode = "slide"; + this.goTo(number); + } + + toggleMode() { + this.mode = this.mode === "grid" ? "slide" : "grid"; + } + + async togglePresenting() { + if (globalThis.document.fullscreenElement === this) { + await globalThis.document.exitFullscreen(); + } else if (this.requestFullscreen) { + this.mode = "slide"; + await this.requestFullscreen(); + } + } + + async copyLink() { + const url = new URL(globalThis.location.href); + url.hash = `${this.hashPrefix}-slide-${this.slide}`; + try { + await globalThis.navigator.clipboard.writeText(url.href); + this._announce(this.t.linkCopied); + } catch (error) { + console.error(`slide-deck: ${error.message}`); + } + } + + _onFullscreenChange() { + this.presenting = globalThis.document.fullscreenElement === this; + } + + _onHashChange() { + this._readHash(); + } + + _readHash() { + const match = new RegExp(`^#${this.hashPrefix}-slide-(\\d+)$`).exec( + globalThis.location.hash, + ); + if (match) { + this.goTo(Number(match[1])); + } + } + + _syncHash() { + const hash = `#${this.hashPrefix}-slide-${this.slide}`; + if (globalThis.location.hash === hash) { + return; + } + globalThis.history.replaceState(null, "", hash); + } + + _announce(message) { + this._message = message; + this.requestUpdate(); + } + + _onKeyDown(event) { + const keys = { + ArrowLeft: () => this.goTo(this.slide - 1), + ArrowRight: () => this.goTo(this.slide + 1), + Home: () => this.goTo(1), + End: () => this.goTo(this.slides.length), + }; + if (keys[event.key]) { + event.preventDefault(); + keys[event.key](); + } + } + + /** Rewrite manifest relative media paths so they resolve beside deck.json. */ + _resolveMedia(markup) { + if (!markup || !this._base) { + return markup; + } + return markup.replace( + /(src|href)="(?!https?:|data:|\/)([^"]+)"/g, + (whole, attribute, value) => + `${attribute}="${new URL(value, this._base).href}"`, + ); + } + + static get styles() { + return [ + super.styles, + css` + :host { + display: block; + font-family: var(--ddd-font-navigation); + color: var(--ddd-theme-primary); + } + :host([presenting]) { + background-color: var(--ddd-theme-default-coalyGray, #000); + display: flex; + flex-direction: column; + justify-content: center; + } + :host([status="error"]) #stage { + display: none; + } + #stage { + position: relative; + width: 100%; + aspect-ratio: 1 / var(--slide-deck-aspect-ratio, 0.5625); + overflow: hidden; + background-color: var(--ddd-theme-default-white, #fff); + border: var(--ddd-border-xs); + } + /* the painted slide is decorative; the manifest text below is what + assistive technology reads */ + #stage > * { + pointer-events: none; + } + .text { + padding: var(--ddd-spacing-3); + border: var(--ddd-border-xs); + border-top: none; + } + :host([rendered]) .text { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border: none; + padding: 0; + } + .bar { + display: flex; + align-items: center; + gap: var(--ddd-spacing-1); + padding: var(--ddd-spacing-1) 0; + } + .count { + font-size: var(--ddd-font-size-4xs); + min-width: 4em; + text-align: center; + } + .spacer { + flex: 1; + } + .grid { + display: grid; + gap: var(--ddd-spacing-3); + } + .card { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--ddd-spacing-3); + padding: var(--ddd-spacing-2); + border: var(--ddd-border-xs); + text-align: left; + background: none; + font: inherit; + color: inherit; + cursor: pointer; + } + .card:focus-visible { + outline: var(--ddd-border-sm); + } + .notes { + font-size: var(--ddd-font-size-4xs); + } + .message { + padding: var(--ddd-spacing-3); + } + @media (max-width: 640px) { + .card { + grid-template-columns: 1fr; + } + } + `, + ]; + } + + renderToolbar() { + const last = this.slides.length; + return html`
+ + ${this.slide} / ${last} + + + + + +
`; + } + + renderGrid() { + return html`
+ ${this.slides.map( + (slide) => + html``, + )} +
`; + } + + render() { + if (this.status === "loading") { + return html`

${this.t.loadingPresentation}

`; + } + if (this.status === "error" || !this.slides.length) { + return html`

${this.t.presentationUnavailable}

`; + } + const current = this.currentSlide; + return html`
+ ${this.renderToolbar()} + ${this.mode === "grid" + ? this.renderGrid() + : html` +
+

${current.title}

+ ${unsafeHTML(this._resolveMedia(current.html))} +
`} +
+ ${this._message || `${this.t.slide} ${this.slide}: ${current.title}`} +
+
`; + } + + static get haxProperties() { + return new URL(`./lib/${this.tag}.haxProperties.json`, import.meta.url) + .href; + } +} + +globalThis.customElements.define(SlideDeck.tag, SlideDeck); diff --git a/elements/slide-deck/test/slide-deck.test.js b/elements/slide-deck/test/slide-deck.test.js new file mode 100644 index 0000000000..7aa8de5ab2 --- /dev/null +++ b/elements/slide-deck/test/slide-deck.test.js @@ -0,0 +1,60 @@ +import { html, fixture, expect, waitUntil } from "@open-wc/testing"; +import "../slide-deck.js"; + +const MANIFEST = "/elements/slide-deck/demo/deck.json"; + +describe("SlideDeck test", () => { + let element; + beforeEach(async () => { + element = await fixture( + html``, + ); + await waitUntil(() => element.status === "ready", "deck never loaded"); + await element.updateComplete; + }); + + it("basic will it blend", async () => { + expect(element).to.exist; + }); + + it("passes the a11y audit", async () => { + await expect(element).shadowDom.to.be.accessible(); + }); + + it("loads the manifest and starts on the first slide", async () => { + expect(element.slides.length).to.equal(3); + expect(element.slide).to.equal(1); + }); + + it("moves between slides and clamps at the ends", async () => { + element.goTo(2); + expect(element.slide).to.equal(2); + element.goTo(99); + expect(element.slide).to.equal(3); + element.goTo(-5); + expect(element.slide).to.equal(1); + }); + + it("shows speaker notes in grid mode", async () => { + element.toggleMode(); + await element.updateComplete; + expect(element.shadowRoot.querySelectorAll(".card").length).to.equal(3); + }); + + it("keeps the manifest text available when no slide is painted", async () => { + expect(element.rendered).to.be.false; + expect(element.shadowRoot.querySelector(".text")).to.exist; + }); + + it("reports an unreadable manifest instead of throwing", async () => { + const broken = await fixture( + html``, + ); + await waitUntil(() => broken.status === "error", "never reported an error"); + expect(broken.shadowRoot.textContent).to.contain( + broken.t.presentationUnavailable, + ); + }); +}); From 72b499a9137a77cc2e8647b9f677908241e0110c Mon Sep 17 00:00:00 2001 From: SanikaA3 <147941536+SanikaA3@users.noreply.github.com> Date: Sun, 13 Sep 2026 14:10:02 -0400 Subject: [PATCH 2/6] fix(slide-deck): resolve import paths against the site base The PPTX import writes site relative paths: source is files/decks//deck.json, pptx is files/decks//original.pptx, and slide media in slides[].html points into files/decks// too. The element resolved source against location.href and everything inside the manifest against the manifest's own URL. On a HAXcms page below the site root the manifest 404'd, and where it did load, the pptx and media paths doubled up as files/decks//files/decks//... Resolve against document.baseURI instead, which is the HAXcms points at the site root. Slide media then resolves on its own, so _resolveMedia and the stored manifest base are removed. Addresses Copilot review on #825. Co-Authored-By: Claude Opus 5 --- elements/slide-deck/README.md | 2 +- elements/slide-deck/slide-deck.js | 28 ++++++++-------------------- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/elements/slide-deck/README.md b/elements/slide-deck/README.md index 4954aaba64..4aac6a4bc5 100644 --- a/elements/slide-deck/README.md +++ b/elements/slide-deck/README.md @@ -34,7 +34,7 @@ Content is layered, so a deck degrades rather than breaks: | property | attribute | description | | -------- | --------- | -------------------------------------------------------------- | -| `source` | `source` | URL of `deck.json`, relative to the page or absolute | +| `source` | `source` | URL of `deck.json`, relative to the site or absolute | | `deckId` | `deck-id` | Distinguishes slide links when a page holds more than one deck | | `slide` | `slide` | Currently displayed slide, 1 based | | `mode` | `mode` | `slide` for one at a time, `grid` for every slide plus notes | diff --git a/elements/slide-deck/slide-deck.js b/elements/slide-deck/slide-deck.js index 65034e4313..e0f238fbb5 100644 --- a/elements/slide-deck/slide-deck.js +++ b/elements/slide-deck/slide-deck.js @@ -65,7 +65,7 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { static get properties() { return { ...super.properties, - /** URL of the deck.json manifest, relative to the page or absolute. */ + /** URL of the deck.json manifest, relative to the site or absolute. */ source: { type: String }, /** Disambiguates deep links when a page holds more than one deck. */ deckId: { type: String, attribute: "deck-id" }, @@ -135,14 +135,14 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { this.status = "loading"; this.rendered = false; try { - const manifestUrl = new URL(this.source, globalThis.location.href); - const response = await fetch(manifestUrl.href); + // import paths are site relative, so resolve against the HAX + const response = await fetch( + new URL(this.source, globalThis.document.baseURI).href, + ); if (!response.ok) { throw new Error(`deck manifest ${response.status}`); } this.deck = await response.json(); - // media inside the manifest is stored beside it, not beside the page - this._base = manifestUrl; this.status = "ready"; this._readHash(); this._watchForViewport(); @@ -189,7 +189,7 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { if (!this._renderer) { const { DeckRenderer } = await import("./lib/slide-deck-renderer.js"); this._renderer = await DeckRenderer.load( - new URL(this.deck.pptx, this._base).href, + new URL(this.deck.pptx, globalThis.document.baseURI).href, ); this.style.setProperty( "--slide-deck-aspect-ratio", @@ -283,18 +283,6 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { } } - /** Rewrite manifest relative media paths so they resolve beside deck.json. */ - _resolveMedia(markup) { - if (!markup || !this._base) { - return markup; - } - return markup.replace( - /(src|href)="(?!https?:|data:|\/)([^"]+)"/g, - (whole, attribute, value) => - `${attribute}="${new URL(value, this._base).href}"`, - ); - } - static get styles() { return [ super.styles, @@ -438,7 +426,7 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { >
${this.t.slide} ${slide.number} - ${unsafeHTML(this._resolveMedia(slide.html))} + ${unsafeHTML(slide.html)}
${slide.notes ? html`
@@ -471,7 +459,7 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { : html`

${current.title}

- ${unsafeHTML(this._resolveMedia(current.html))} + ${unsafeHTML(current.html)}
`}
${this._message || `${this.t.slide} ${this.slide}: ${current.title}`} From bfa2f526743a567386bd150bb3fd7235b1d15517 Mon Sep 17 00:00:00 2001 From: SanikaA3 <147941536+SanikaA3@users.noreply.github.com> Date: Sun, 13 Sep 2026 14:13:29 -0400 Subject: [PATCH 3/6] fix(slide-deck): keep one slide alive and refit it on resize Only one slide is ever on stage, but the renderer kept every slide handle it had painted in a Map and only disposed a handle when that same index was painted again. Navigating 1 -> 2 -> 3 left slides 1 and 2, and their chart instances, alive until the element disconnected. Hold a single handle and release it before painting the next slide. The blob URL cache stays, since embedded media is shared across slides. The scale was also computed once per paint, so entering full screen or resizing the window left the slide undersized or clipped until the next navigation. A ResizeObserver on the stage now refits it, and is disconnected whenever the slide is released. Addresses Copilot review on #825. Co-Authored-By: Claude Opus 5 --- .../slide-deck/lib/slide-deck-renderer.js | 53 ++++++++++++------- 1 file changed, 33 insertions(+), 20 deletions(-) diff --git a/elements/slide-deck/lib/slide-deck-renderer.js b/elements/slide-deck/lib/slide-deck-renderer.js index a794883dc0..c922a41cfc 100644 --- a/elements/slide-deck/lib/slide-deck-renderer.js +++ b/elements/slide-deck/lib/slide-deck-renderer.js @@ -47,7 +47,10 @@ export class DeckRenderer { // blob URLs for embedded media are reused across slides this.mediaUrlCache = new Map(); this.chartInstances = new Set(); - this.handles = new Map(); + this.handle = null; + this.target = null; + // the stage follows the host's width, including in full screen + this.resizeObserver = new ResizeObserver(() => this.fit()); } get slideCount() { @@ -70,34 +73,44 @@ export class DeckRenderer { if (!slide) { return; } - this.dispose(index); + // only one slide is ever on stage, so release the previous one first + this.clear(); this.api.materializeSlideNodes(this.presentation, slide); // pdfjs is intentionally not configured: it is only used for EMF embedded // PDF fallbacks and wiring it would mean fetching a library at runtime. - const handle = this.api.renderSlide(this.presentation, slide, { + this.handle = this.api.renderSlide(this.presentation, slide, { mediaUrlCache: this.mediaUrlCache, chartInstances: this.chartInstances, }); - this.handles.set(index, handle); - target.replaceChildren(handle.element); - handle.element.style.transformOrigin = "top left"; - handle.element.style.transform = `scale(${target.clientWidth / this.presentation.width})`; - await handle.ready; + this.target = target; + target.replaceChildren(this.handle.element); + this.handle.element.style.transformOrigin = "top left"; + this.fit(); + this.resizeObserver.observe(target); + await this.handle.ready; } - /** Release a single slide, or every slide when no index is given. */ - dispose(index) { - if (index === undefined) { - this.handles.forEach((handle) => handle.dispose()); - this.handles.clear(); - this.mediaUrlCache.forEach((url) => URL.revokeObjectURL(url)); - this.mediaUrlCache.clear(); - return; + /** Scale the painted slide to the current width of its stage. */ + fit() { + if (this.handle && this.target) { + this.handle.element.style.transform = `scale(${this.target.clientWidth / this.presentation.width})`; } - const handle = this.handles.get(index); - if (handle) { - handle.dispose(); - this.handles.delete(index); + } + + /** Release the painted slide and stop following its stage. */ + clear() { + this.resizeObserver.disconnect(); + if (this.handle) { + this.handle.dispose(); + this.handle = null; } + this.target = null; + } + + /** Release everything, including media shared across slides. */ + dispose() { + this.clear(); + this.mediaUrlCache.forEach((url) => URL.revokeObjectURL(url)); + this.mediaUrlCache.clear(); } } From 5480987e195afb5dedf6ddff49c786869ae726e6 Mon Sep 17 00:00:00 2001 From: SanikaA3 <147941536+SanikaA3@users.noreply.github.com> Date: Sun, 13 Sep 2026 14:15:47 -0400 Subject: [PATCH 4/6] fix(slide-deck): sanitize slide markup and render notes as text slides[].html went straight to unsafeHTML. source accepts any URL, so a manifest cannot be treated as trusted, and an event handler or javascript: URL inside it would run in the page. Pass it through sanitizeHTMLString from @haxtheweb/utils first, as other elements do for the same sink. Speaker notes are not markup at all: the import route stores the PPTX notes text joined with newlines, unescaped. Rendering them with unsafeHTML turned literal markup in a note into live DOM. Interpolate them as text instead, keeping their line breaks with pre-line. Notes also only appeared in grid mode, although the element documents them as part of the text layer that assistive technology and search read. They now render in the slide view as well. The demo manifest's notes are now plain text to match what the import writes. Addresses Copilot review on #825. Co-Authored-By: Claude Opus 5 --- elements/slide-deck/demo/deck.json | 6 +++--- elements/slide-deck/package.json | 3 ++- elements/slide-deck/slide-deck.js | 26 ++++++++++++++++++-------- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/elements/slide-deck/demo/deck.json b/elements/slide-deck/demo/deck.json index 894b0ef07d..a672bd2d44 100644 --- a/elements/slide-deck/demo/deck.json +++ b/elements/slide-deck/demo/deck.json @@ -10,21 +10,21 @@ "title": "Presenting a deck in HAX", "html": "

Presenting a deck in HAX

Imported from PowerPoint, shown in context.

", "image": null, - "notes": "

Open on why a deck belongs on the page rather than as a download.

" + "notes": "Open on why a deck belongs on the page rather than as a download." }, { "number": 2, "title": "Text is the substance", "html": "

Text is the substance

Slide text and speaker notes come from the manifest, so the deck is readable, searchable and navigable on its own.

", "image": null, - "notes": "

This is what screen readers and site search actually read.

" + "notes": "This is what screen readers and site search actually read." }, { "number": 3, "title": "Slides are the enhancement", "html": "

Slides are the enhancement

When a manifest names a .pptx the real slides are painted over this text, once the deck is scrolled into view.

", "image": null, - "notes": "

This demo manifest has no pptx, so the text layer stays visible.

" + "notes": "This demo manifest has no pptx, so the text layer stays visible." } ] } diff --git a/elements/slide-deck/package.json b/elements/slide-deck/package.json index e498c55514..520207e109 100644 --- a/elements/slide-deck/package.json +++ b/elements/slide-deck/package.json @@ -31,7 +31,8 @@ "@haxtheweb/d-d-d": "^26.0.0", "@haxtheweb/i18n-manager": "^26.0.0", "@aiden0z/pptx-renderer": "^1.2.4", - "@haxtheweb/simple-icon": "^26.0.0" + "@haxtheweb/simple-icon": "^26.0.0", + "@haxtheweb/utils": "^26.0.0" }, "devDependencies": { "@custom-elements-manifest/analyzer": "0.10.4", diff --git a/elements/slide-deck/slide-deck.js b/elements/slide-deck/slide-deck.js index e0f238fbb5..3c1ab34fa8 100644 --- a/elements/slide-deck/slide-deck.js +++ b/elements/slide-deck/slide-deck.js @@ -6,6 +6,7 @@ import { LitElement, html, css, nothing } from "lit"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js"; import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js"; +import { sanitizeHTMLString } from "@haxtheweb/utils/utils.js"; import "@haxtheweb/simple-icon/lib/simple-icon-button-lite.js"; /** @@ -365,6 +366,9 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { .notes { font-size: var(--ddd-font-size-4xs); } + .notes p { + white-space: pre-line; + } .message { padding: var(--ddd-spacing-3); } @@ -426,19 +430,24 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { >
${this.t.slide} ${slide.number} - ${unsafeHTML(slide.html)} + ${unsafeHTML(sanitizeHTMLString(slide.html))}
- ${slide.notes - ? html`
- ${this.t.speakerNotes} - ${unsafeHTML(slide.notes)} -
` - : nothing} + ${this.renderNotes(slide)} `, )}
`; } + /** Manifest notes are plain text; render them as text, never as HTML. */ + renderNotes(slide) { + return slide.notes + ? html`
+ ${this.t.speakerNotes} +

${slide.notes}

+
` + : nothing; + } + render() { if (this.status === "loading") { return html`

${this.t.loadingPresentation}

`; @@ -459,7 +468,8 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { : html`

${current.title}

- ${unsafeHTML(current.html)} + ${unsafeHTML(sanitizeHTMLString(current.html))} + ${this.renderNotes(current)}
`}
${this._message || `${this.t.slide} ${this.slide}: ${current.title}`} From f5477dbc4d5cf8e3db86cc6a4650898d78151213 Mon Sep 17 00:00:00 2001 From: SanikaA3 <147941536+SanikaA3@users.noreply.github.com> Date: Sun, 13 Sep 2026 14:19:13 -0400 Subject: [PATCH 5/6] fix(slide-deck): hide the text layer once painted and load decks once rendered was not reflected, so :host([rendered]) never matched and the fallback text stayed visible beneath every painted slide. Changing source left the element inconsistent. A slower earlier manifest could overwrite a newer one, the previous deck's renderer stayed around to paint the old pptx under the new manifest, and the current slide could fall outside the new deck, crashing render on a null slide. Each load now releases the renderer, ignores responses from superseded loads, and clamps the slide into range. The renderer was also only stored after its import, fetch and parse had finished, so navigating in that window started another load per call (three fetches of the pptx for 1 -> 2 -> 3) with paints racing each other. The pending load is now shared, and a paint overtaken by newer navigation, a mode change or a new source is dropped. Addresses Copilot review on #825. Co-Authored-By: Claude Opus 5 --- elements/slide-deck/slide-deck.js | 66 +++++++++++++++++++++++-------- 1 file changed, 49 insertions(+), 17 deletions(-) diff --git a/elements/slide-deck/slide-deck.js b/elements/slide-deck/slide-deck.js index 3c1ab34fa8..a77d2487b0 100644 --- a/elements/slide-deck/slide-deck.js +++ b/elements/slide-deck/slide-deck.js @@ -77,7 +77,7 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { presenting: { type: Boolean, reflect: true }, deck: { type: Object }, status: { type: String, reflect: true }, - rendered: { type: Boolean }, + rendered: { type: Boolean, reflect: true }, }; } @@ -94,10 +94,7 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { this._observer.disconnect(); this._observer = null; } - if (this._renderer) { - this._renderer.dispose(); - this._renderer = null; - } + this._releaseRenderer(); super.disconnectedCallback(); } @@ -133,6 +130,10 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { /** Fetch the manifest, then honour any slide named in the URL. */ async loadDeck() { + const load = {}; + this._load = load; + this._releaseRenderer(); + this.deck = null; this.status = "loading"; this.rendered = false; try { @@ -143,14 +144,22 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { if (!response.ok) { throw new Error(`deck manifest ${response.status}`); } - this.deck = await response.json(); + const deck = await response.json(); + // a newer source was set while this one was loading + if (load !== this._load) { + return; + } + this.deck = deck; this.status = "ready"; + // the previous deck's slide may be past the end of this one + this.goTo(this.slide); this._readHash(); this._watchForViewport(); } catch (error) { - this.deck = null; - this.status = "error"; - console.error(`slide-deck: ${error.message}`); + if (load === this._load) { + this.status = "error"; + console.error(`slide-deck: ${error.message}`); + } } } @@ -169,6 +178,17 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { this._observer.observe(this); } + /** Drop the renderer, disposing it once any load in flight settles. */ + _releaseRenderer() { + if (this._renderer) { + this._renderer.then( + (renderer) => renderer.dispose(), + () => {}, + ); + this._renderer = null; + } + } + /** * Paint the current slide with the real presentation. Any failure leaves the * manifest text on screen, which is a usable deck in its own right. @@ -186,18 +206,30 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { if (!stage) { return; } + const { slide } = this; try { if (!this._renderer) { - const { DeckRenderer } = await import("./lib/slide-deck-renderer.js"); - this._renderer = await DeckRenderer.load( - new URL(this.deck.pptx, globalThis.document.baseURI).href, - ); - this.style.setProperty( - "--slide-deck-aspect-ratio", - `${this._renderer.aspectRatio}`, + const pptx = new URL(this.deck.pptx, globalThis.document.baseURI).href; + // shared by every paint until it settles, so the deck loads once + this._renderer = import("./lib/slide-deck-renderer.js").then( + ({ DeckRenderer }) => DeckRenderer.load(pptx), ); } - await this._renderer.render(stage, this.slide - 1); + const pending = this._renderer; + const renderer = await pending; + // newer navigation, a mode change or a new source has taken over + if ( + pending !== this._renderer || + slide !== this.slide || + !stage.isConnected + ) { + return; + } + this.style.setProperty( + "--slide-deck-aspect-ratio", + `${renderer.aspectRatio}`, + ); + await renderer.render(stage, slide - 1); this.rendered = true; } catch (error) { this.rendered = false; From 24f5b1ffa3f6a14fee5cbac5fb9c73722fb86aa4 Mon Sep 17 00:00:00 2001 From: SanikaA3 <147941536+SanikaA3@users.noreply.github.com> Date: Sun, 13 Sep 2026 14:21:17 -0400 Subject: [PATCH 6/6] fix(slide-deck): build deep link hashes without a RegExp deck-id, or the deck title, was interpolated into a RegExp. An id such as "draft[1" threw while loading and left the deck unavailable, and an id containing spaces never matched because the browser percent-encodes the hash. The id is now URI-encoded once and matched as a plain prefix. Syncing the hash also passed a bare "#fragment" to history.replaceState, which resolves against the document base. On a HAXcms page that base is the site root, so every slide change rewrote /site/my-page to /site/#... The URL is now built from location.href, as copyLink already does. Addresses Copilot review on #825. Co-Authored-By: Claude Opus 5 --- elements/slide-deck/slide-deck.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/elements/slide-deck/slide-deck.js b/elements/slide-deck/slide-deck.js index a77d2487b0..3bc8b077a0 100644 --- a/elements/slide-deck/slide-deck.js +++ b/elements/slide-deck/slide-deck.js @@ -125,7 +125,9 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { /** Prefix for the location hash, so two decks on a page cannot collide. */ get hashPrefix() { - return this.deckId || (this.deck && this.deck.title) || "slide"; + return encodeURIComponent( + this.deckId || (this.deck && this.deck.title) || "slide", + ); } /** Fetch the manifest, then honour any slide named in the URL. */ @@ -282,20 +284,22 @@ export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) { } _readHash() { - const match = new RegExp(`^#${this.hashPrefix}-slide-(\\d+)$`).exec( - globalThis.location.hash, - ); - if (match) { - this.goTo(Number(match[1])); + const prefix = `#${this.hashPrefix}-slide-`; + const { hash } = globalThis.location; + const number = hash.slice(prefix.length); + if (hash.startsWith(prefix) && /^\d+$/.test(number)) { + this.goTo(Number(number)); } } _syncHash() { - const hash = `#${this.hashPrefix}-slide-${this.slide}`; - if (globalThis.location.hash === hash) { + const url = new URL(globalThis.location.href); + url.hash = `${this.hashPrefix}-slide-${this.slide}`; + if (url.href === globalThis.location.href) { return; } - globalThis.history.replaceState(null, "", hash); + // a bare "#hash" would resolve against the HAX , not this page + globalThis.history.replaceState(null, "", url.href); } _announce(message) {