${ext}`).join(", ");
- els.emptyStateFileTypes.innerHTML = markup;
-}
-
-function initCursorHints() {
- els.markupPane?.addEventListener("mousemove", (e) => {
- if (!e.target.closest(".markup-ghost-tag-part")) {
- hideCursorHint();
- return;
- }
- showCursorHint(VIRTUAL_TEXT_TAG_HINT, e.clientX, e.clientY);
- });
- els.markupPane?.addEventListener("mouseleave", hideCursorHint);
-
- els.openFileBtn?.addEventListener("mousemove", (e) => {
- showCursorHint(OPEN_FILE_HINT, e.clientX, e.clientY);
- });
- els.openFileBtn?.addEventListener("mouseleave", hideCursorHint);
-}
-
-function initBboxHints() {
- if (!els.pagePane) return;
-
- els.pagePane.addEventListener("mousemove", (e) => {
- if (pagePanDrag?.moved || els.pagePane.classList.contains("is-panning")) {
- hideCursorHint();
- return;
- }
- const navBtn = e.target.closest(".fragment-nav-btn:not(.fragment-nav-btn-disabled)");
- if (navBtn) {
- const hint = navBtn.getAttribute("data-nav") === "prev"
- ? FRAGMENT_NAV_HINT_PREV
- : FRAGMENT_NAV_HINT_NEXT;
- showCursorHint(hint, e.clientX, e.clientY);
- return;
- }
- const badge = e.target.closest(".element-badge[data-element-id]");
- if (!badge || !state?.idToElement) {
- hideCursorHint();
- return;
- }
- const elementId = badge.getAttribute("data-element-id");
- const xmlEl = state.idToElement.get(elementId);
- if (!xmlEl) {
- hideCursorHint();
- return;
- }
- showCursorHintHtml(elementHeadTooltipHtml(xmlEl, state.defaultResolution), e.clientX, e.clientY);
- });
- els.pagePane.addEventListener("mouseleave", hideCursorHint);
-}
-
-function initDragDrop() {
- document.body.addEventListener("dragenter", (e) => {
- if (!hasArchiveTransfer(e.dataTransfer)) return;
- e.preventDefault();
- document.body.classList.add("drag-over");
- });
-
- document.body.addEventListener("dragover", (e) => {
- if (!hasArchiveTransfer(e.dataTransfer)) return;
- e.preventDefault();
- e.dataTransfer.dropEffect = "copy";
- });
-
- document.body.addEventListener("dragleave", (e) => {
- if (!hasArchiveTransfer(e.dataTransfer)) return;
- if (e.relatedTarget && document.body.contains(e.relatedTarget)) return;
- document.body.classList.remove("drag-over");
- });
-
- document.body.addEventListener("drop", async (e) => {
- if (!hasArchiveTransfer(e.dataTransfer)) return;
- e.preventDefault();
- document.body.classList.remove("drag-over");
- await loadFromDrop(e.dataTransfer);
- });
-}
-
-function hasArchiveTransfer(dataTransfer) {
- return [...dataTransfer.types].includes("Files");
-}
-
-function isArchiveFile(file) {
- return /\.dclx$/i.test(file.name) || /\.zip$/i.test(file.name);
-}
-
-function isMarkupFile(file) {
- return /\.(?:dclg(?:\.xml)?|xml)$/i.test(file.name);
-}
-
-async function loadFromDrop(dataTransfer) {
- const files = [...dataTransfer.files];
- if (files.some((f) => f.name === "document.xml")) {
- await appendFolderArchive(files);
- return;
- }
- const supported = files.filter((f) => isArchiveFile(f) || isMarkupFile(f));
- if (supported.length) await addFilesToCatalog(supported, { replace: false });
-}
-
-function buildDocumentState(markupXml, pageImages, label, assetUrls, { markupOnly }) {
- const doc = new DOMParser().parseFromString(markupXml, "application/xml");
- const parseError = doc.querySelector("parsererror");
- if (parseError) {
- alert(`Invalid XML in ${label}`);
- return null;
- }
- const root = doc.documentElement;
- if (localName(root) !== "doclang") {
- alert(`${label}: root element must be ${NO_MARKUP}
`;
- els.renderedPane.innerHTML = `${NO_MARKUP}
`;
- }
-
- els.pagePane.innerHTML = "";
- if (state.hasPageView) {
- const imageUrl = pageImages.get(pageNum);
- if (imageUrl) {
- const port = document.createElement("div");
- port.className = "page-view-port";
- const wrap = document.createElement("div");
- wrap.className = "page-view";
- const img = document.createElement("img");
- img.alt = `Page ${pageNum}`;
-
- const onImageReady = () => {
- if (img.dataset.layoutGeneration === String(pageNum)) return;
- img.dataset.layoutGeneration = String(pageNum);
-
- applyPageImageSize(img, els.pagePane);
-
- const boxes = collectBoundingBoxes(segment, defaultResolution, elementIds);
- const existing = wrap.querySelector("svg.overlay");
- if (existing) existing.remove();
- const readingOrderSteps = collectReadingOrderSteps(
- segment,
- elementIds,
- boxes,
- state.readingOrder,
- readingOrderGlobalNumbering,
- state.readingOrderDisplayNumbers,
- );
- state.pageViewOverlay = { boxes, readingOrderSteps };
- if (boxes.length) {
- wrap.appendChild(
- buildOverlay(
- img,
- boxes,
- collectCaptionLinks(segment, elementIds, boxes),
- collectXrefLinks(segment, elementIds, boxes),
- readingOrderSteps,
- collectFragmentLinks(segment, elementIds, boxes, pageNum, state.threadPagesById),
- collectFragmentNavItems(segment, elementIds, boxes),
- defaultResolution,
- ),
- );
- }
- syncPageViewChrome(img);
- const pending = state.pendingSelectElement;
- if (pending) {
- state.pendingSelectElement = null;
- const id = findElementIdOnPage(pending);
- if (id) selectElement(id);
- }
- };
-
- img.addEventListener("load", onImageReady, { once: true });
- wrap.appendChild(img);
- port.appendChild(wrap);
- els.pagePane.appendChild(port);
- img.src = imageUrl;
- if (img.complete) onImageReady();
-
- if (!pagePaneResizeObserver) {
- pagePaneResizeObserver = new ResizeObserver(() => {
- refreshPageViewLayout();
- });
- pagePaneResizeObserver.observe(els.pagePane);
- }
- } else {
- els.pagePane.innerHTML = `${NO_IMAGE}
`;
- }
- }
-}
-
-function pageZoomFactor() {
- return pageZoomPercent / PAGE_ZOOM_DEFAULT;
-}
-
-/**
- * Convert a legacy overlay length (image pixels as tuned on the demo pages) to SVG user
- * units for the current page. Matches the old demo on-screen size, stays zoom-stable,
- * and scales with page resolution so other images look the same.
- */
-function overlayUserLength(baseUserPx, img = els.pagePane?.querySelector(".page-view img")) {
- const zoom = pageZoomFactor();
- if (!(zoom > 0)) return baseUserPx;
- if (!img?.naturalWidth || !img.naturalHeight || !els.pagePane) {
- return baseUserPx / zoom;
- }
-
- const { w: paneW, h: paneH } = paneContentSize(els.pagePane);
- if (!(paneW > 0 && paneH > 0)) return baseUserPx / zoom;
-
- const refFit = Math.min(
- (paneW - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_WIDTH,
- (paneH - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_HEIGHT,
- );
- const fitScale = getCachedFitScale(img, els.pagePane);
- if (!(refFit > 0) || !(fitScale > 0)) return baseUserPx / zoom;
-
- return (baseUserPx * refFit) / (fitScale * zoom);
-}
-
-function computePageFitScale(img, pane) {
- return getCachedFitScale(img, pane);
-}
-
-function resetPageLayoutCache() {
- pageLayoutCache = null;
-}
-
-function paneContentSize(pane) {
- const style = getComputedStyle(pane);
- const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
- const padY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
- return {
- w: pane.clientWidth - padX,
- h: pane.clientHeight - padY,
- };
-}
-
-function getCachedFitScale(img, pane) {
- const { w: paneW, h: paneH } = paneContentSize(pane);
- const imgW = img.naturalWidth;
- const imgH = img.naturalHeight;
- if (
- pageLayoutCache &&
- pageLayoutCache.paneW === paneW &&
- pageLayoutCache.paneH === paneH &&
- pageLayoutCache.imgW === imgW &&
- pageLayoutCache.imgH === imgH
- ) {
- return pageLayoutCache.fitScale;
- }
- const fitScale =
- paneW > 0 && paneH > 0 && imgW > 0 && imgH > 0
- ? Math.min(
- (paneW - PAGE_VIEW_BORDER_PX) / imgW,
- (paneH - PAGE_VIEW_BORDER_PX) / imgH,
- )
- : 1;
- pageLayoutCache = { paneW, paneH, imgW, imgH, fitScale };
- return fitScale;
-}
-
-function applyPageImageSize(img, pane = els.pagePane) {
- if (!img?.naturalWidth || !img.naturalHeight) return false;
- pageZoomPercent = Math.max(PAGE_ZOOM_DEFAULT, pageZoomPercent);
- const fitScale = getCachedFitScale(img, pane);
- const scale = fitScale * (pageZoomPercent / PAGE_ZOOM_DEFAULT);
- const w = Math.floor(img.naturalWidth * scale);
- const h = Math.floor(img.naturalHeight * scale);
- const nextW = `${w}px`;
- const nextH = `${h}px`;
- const unchanged = img.style.width === nextW && img.style.height === nextH;
- if (!unchanged) {
- img.style.width = nextW;
- img.style.height = nextH;
- img.style.maxWidth = "none";
- img.style.maxHeight = "none";
- }
- img.dataset.layoutReady = "1";
- return !unchanged;
-}
-
-function syncPageViewChrome(img) {
- syncOverlayBadges(img);
- updatePagePanePanCursor();
- applyBboxVisibility();
-}
-
-function applyPageLayout(img, pane = els.pagePane) {
- applyPageImageSize(img, pane);
- syncPageViewChrome(img);
-}
-
-let pageLayoutFrame = 0;
-
-function refreshPageViewLayout() {
- if (!els.pagePane) return;
- cancelAnimationFrame(pageLayoutFrame);
- pageLayoutFrame = requestAnimationFrame(() => {
- pageLayoutFrame = 0;
- const img = els.pagePane?.querySelector(".page-view img");
- if (img?.naturalWidth) applyPageLayout(img);
- });
-}
-
-function overlayBadgeLayout(svg, text, fontSizeUser) {
- const padXUser = overlayUserLength(OVERLAY_BADGE_PAD_X);
- const padYUser = overlayUserLength(OVERLAY_BADGE_PAD_Y);
- const probe = document.createElementNS("http://www.w3.org/2000/svg", "text");
- probe.setAttribute("class", "overlay-badge-label");
- probe.setAttribute("font-size", String(fontSizeUser));
- probe.setAttribute("font-weight", "700");
- probe.setAttribute("text-anchor", "start");
- probe.setAttribute("dominant-baseline", "text-before-edge");
- probe.setAttribute("visibility", "hidden");
- probe.textContent = String(text);
- svg.appendChild(probe);
-
- let width;
- let height;
- try {
- const bbox = probe.getBBox();
- width = bbox.width + padXUser * 2;
- height = bbox.height + padYUser * 2;
- } catch {
- const label = String(text);
- width = overlayUserLength(label.length * OVERLAY_BADGE_FONT_SIZE * 0.55 + OVERLAY_BADGE_PAD_X * 2);
- height = overlayUserLength(OVERLAY_BADGE_FONT_SIZE * 1.1 + OVERLAY_BADGE_PAD_Y * 2);
- }
- probe.remove();
- return { width, height };
-}
-
-function appendOverlayBadge(svg, anchorX, anchorY, text, { extraClass, elementId }) {
- const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE);
- const { width, height } = overlayBadgeLayout(svg, text, fontSize);
- const radius = overlayUserLength(OVERLAY_BADGE_RADIUS_SCREEN_PX);
-
- const badge = document.createElementNS("http://www.w3.org/2000/svg", "g");
- badge.setAttribute("class", `overlay-badge ${extraClass}`);
- badge.setAttribute("data-element-id", elementId);
-
- const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
- bg.setAttribute("class", "overlay-badge-bg");
- bg.setAttribute("x", String(anchorX - width / 2));
- bg.setAttribute("y", String(anchorY - height / 2));
- bg.setAttribute("width", String(width));
- bg.setAttribute("height", String(height));
- bg.setAttribute("rx", String(radius));
- bg.setAttribute("ry", String(radius));
- badge.appendChild(bg);
-
- const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
- label.setAttribute("class", "overlay-badge-label");
- label.setAttribute("x", String(anchorX));
- label.setAttribute("y", String(anchorY));
- label.setAttribute("font-size", String(fontSize));
- label.textContent = String(text);
- badge.appendChild(label);
-
- svg.appendChild(badge);
- return badge;
-}
-
-function syncOverlayBadges(img) {
- const svg = img.parentElement?.querySelector("svg.overlay");
- const meta = state?.pageViewOverlay;
- if (!svg || !img.naturalWidth || !meta) return;
-
- svg.querySelectorAll(".element-badge, .reading-order-badge").forEach((badge) => badge.remove());
-
- const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE);
- const badgeGap = overlayUserLength(2);
- const readingOrderByElementId = new Map();
- if (showAllBboxes && showReadingOrder) {
- for (const step of meta.readingOrderSteps ?? []) {
- readingOrderByElementId.set(step.elementId, step);
- }
- }
-
- const boxes = sortedOverlayBoxes(meta.boxes ?? []);
-
- for (const b of boxes) {
- const { x, y } = boxPixelRect(b, img);
- let tagLayout = { width: 0 };
- if (showAllBboxes && showLayoutBadges) {
- tagLayout = overlayBadgeLayout(svg, b.tag, fontSize);
- appendOverlayBadge(svg, x, y, b.tag, {
- extraClass: `element-badge ${kindClassForTag(b.kind)}`,
- elementId: b.elementId,
- });
- }
-
- const step = readingOrderByElementId.get(b.elementId);
- if (step) {
- const orderText = String(step.order);
- const orderLayout = overlayBadgeLayout(svg, orderText, fontSize);
- const orderAnchorX = showAllBboxes && showLayoutBadges
- ? x + tagLayout.width / 2 + badgeGap + orderLayout.width / 2
- : x;
- appendOverlayBadge(svg, orderAnchorX, y, orderText, {
- extraClass: "reading-order-badge",
- elementId: b.elementId,
- });
- }
- }
-}
-
-function splitIntoSegments(root) {
- const body = childElements(root).filter((el) => localName(el) !== "head");
- /** @type {Element[][]} */
- const segments = [[]];
- for (const el of body) {
- if (localName(el) === "page_break") {
- segments.push([]);
- } else {
- segments[segments.length - 1].push(el);
- }
- }
- return segments.length ? segments : [[]];
-}
-
-function segmentHasMarkup(segment) {
- return segment.some((el) => el.nodeType === Node.ELEMENT_NODE);
-}
-
-function readDefaultResolution(head) {
- const fallback = { width: 512, height: 512 };
- if (!head) return fallback;
- const dr = childElements(head).find((el) => localName(el) === "default_resolution");
- if (!dr) return fallback;
- const w = parseInt(dr.getAttribute("width") ?? "512", 10);
- const h = parseInt(dr.getAttribute("height") ?? "512", 10);
- return {
- width: Number.isFinite(w) && w > 0 ? w : 512,
- height: Number.isFinite(h) && h > 0 ? h : 512,
- };
-}
-
-/** @returns {Map
+ ${o$3(this._content)}
+
`;
+ if (typeof this._content === "string") return b`
+ ${this._content}
+
`;
+ return b``;
+ }
+ updated() {
+ if (!this._hidden && this._content instanceof Node) {
+ const hint = this.shadowRoot?.querySelector(".cursor-hint");
+ if (hint) {
+ hint.replaceChildren(this._content.cloneNode(true));
+ const rect = hint.getBoundingClientRect();
+ this._repositionFromRect(rect);
+ }
+ }
+ }
+ _position(clientX, clientY) {
+ this._left = Math.max(MARGIN, clientX + OFFSET);
+ this._top = Math.max(MARGIN, clientY + OFFSET);
+ }
+ _repositionFromRect(rect) {
+ const hint = this.shadowRoot?.querySelector(".cursor-hint");
+ if (!hint) return;
+ if (this._left + rect.width > window.innerWidth - MARGIN) this._left = Math.max(MARGIN, this._left - rect.width - 20);
+ if (this._top + rect.height > window.innerHeight - MARGIN) this._top = Math.max(MARGIN, this._top - rect.height - 20);
+ hint.style.left = `${this._left}px`;
+ hint.style.top = `${this._top}px`;
+ }
+ };
+ DoclangCursorHint = __decorate([t$2("doclang-cursor-hint")], DoclangCursorHint);
+ //#endregion
+ //#region node_modules/lit-html/directive-helpers.js
+ /**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var { I: t } = j$1, i$1 = (o) => o, r$1 = (o) => void 0 === o.strings, s$1 = () => document.createComment(""), v = (o, n, e) => {
+ const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
+ if (void 0 === e) e = new t(l.insertBefore(s$1(), d), l.insertBefore(s$1(), d), o, o.options);
+ else {
+ const t = e._$AB.nextSibling, n = e._$AM, c = n !== o;
+ if (c) {
+ let t;
+ e._$AQ?.(o), e._$AM = o, void 0 !== e._$AP && (t = o._$AU) !== n._$AU && e._$AP(t);
+ }
+ if (t !== d || c) {
+ let o = e._$AA;
+ for (; o !== t;) {
+ const t = i$1(o).nextSibling;
+ i$1(l).insertBefore(o, d), o = t;
+ }
+ }
+ }
+ return e;
+ }, u$1 = (o, t, i = o) => (o._$AI(t, i), o), m = {}, p = (o, t = m) => o._$AH = t, M = (o) => o._$AH, h$2 = (o) => {
+ o._$AR(), o._$AA.remove();
+ };
+ //#endregion
+ //#region node_modules/lit-html/async-directive.js
+ /**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var s = (i, t) => {
+ const e = i._$AN;
+ if (void 0 === e) return !1;
+ for (const i of e) i._$AO?.(t, !1), s(i, t);
+ return !0;
+ };
+ var o$2 = (i) => {
+ let t, e;
+ do {
+ if (void 0 === (t = i._$AM)) break;
+ e = t._$AN, e.delete(i), i = t;
+ } while (0 === e?.size);
+ };
+ var r = (i) => {
+ for (let t; t = i._$AM; i = t) {
+ let e = t._$AN;
+ if (void 0 === e) t._$AN = e = /* @__PURE__ */ new Set();
+ else if (e.has(i)) break;
+ e.add(i), c$1(t);
+ }
+ };
+ function h$1(i) {
+ void 0 !== this._$AN ? (o$2(this), this._$AM = i, r(this)) : this._$AM = i;
+ }
+ function n$2(i, t = !1, e = 0) {
+ const r = this._$AH, h = this._$AN;
+ if (void 0 !== h && 0 !== h.size) if (t) if (Array.isArray(r)) for (let i = e; i < r.length; i++) s(r[i], !1), o$2(r[i]);
+ else null != r && (s(r, !1), o$2(r));
+ else s(this, i);
+ }
+ var c$1 = (i) => {
+ i.type == t$1.CHILD && (i._$AP ??= n$2, i._$AQ ??= h$1);
+ };
+ var f = class extends i$2 {
+ constructor() {
+ super(...arguments), this._$AN = void 0;
+ }
+ _$AT(i, t, e) {
+ super._$AT(i, t, e), r(this), this.isConnected = i._$AU;
+ }
+ _$AO(i, t = !0) {
+ i !== this.isConnected && (this.isConnected = i, i ? this.reconnected?.() : this.disconnected?.()), t && (s(this, i), o$2(this));
+ }
+ setValue(t) {
+ if (r$1(this._$Ct)) this._$Ct._$AI(t, this);
+ else {
+ const i = [...this._$Ct._$AH];
+ i[this._$Ci] = t, this._$Ct._$AI(i, this, 0);
+ }
+ }
+ disconnected() {}
+ reconnected() {}
+ };
+ //#endregion
+ //#region node_modules/lit-html/directives/ref.js
+ /**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var e = () => new h();
+ var h = class {};
+ var o$1 = /* @__PURE__ */ new WeakMap();
+ var n$1 = e$4(class extends f {
+ render(i) {
+ return A;
+ }
+ update(i, [s]) {
+ const e = s !== this.G;
+ return e && this.rt(void 0), (e || this.lt !== this.ct) && (this.G = s, this.ht = i.options?.host, this.rt(this.ct = i.element)), A;
+ }
+ rt(t) {
+ if (void 0 !== this.G) if (this.isConnected || (t = void 0), "function" == typeof this.G) {
+ const i = this.ht ?? globalThis;
+ let s = o$1.get(i);
+ void 0 === s && (s = /* @__PURE__ */ new WeakMap(), o$1.set(i, s)), void 0 !== s.get(this.G) && this.G.call(this.ht, void 0), s.set(this.G, t), void 0 !== t && this.G.call(this.ht, t);
+ } else this.G.value = t;
+ }
+ get lt() {
+ return "function" == typeof this.G ? o$1.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
+ }
+ disconnected() {
+ this.lt === this.ct && this.rt(void 0);
+ }
+ reconnected() {
+ this.rt(this.ct);
+ }
+ });
+ //#endregion
+ //#region src/components/page-nav/page-nav.css?inline
+ var page_nav_default = ":host {\n display: contents;\n}\nnav {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-left: 0.25rem;\n}\nnav::before {\n content: '';\n flex-shrink: 0;\n align-self: center;\n width: 1px;\n height: 1.125rem;\n margin-right: 0.75rem;\n background: var(--border);\n}\nnav[hidden] {\n display: none;\n}\n.page-nav-btns {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n.page-nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.875rem;\n height: 1.875rem;\n padding: 0;\n flex-shrink: 0;\n appearance: none;\n border: 1px solid var(--border);\n background: var(--panel);\n color: var(--text);\n border-radius: 0.375rem;\n font: inherit;\n font-size: 0.875rem;\n cursor: pointer;\n}\n.page-nav-btn:hover {\n border-color: var(--accent);\n}\n.page-nav-btn:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.page-nav-chevron {\n display: block;\n width: 0.875rem;\n height: 0.875rem;\n}\n.page-indicator {\n display: inline-flex;\n align-items: center;\n font-size: 0.875rem;\n color: var(--muted);\n font-variant-numeric: tabular-nums;\n}\n.page-number-input {\n appearance: none;\n border: 1px solid var(--border);\n border-radius: 0.375rem;\n background: var(--panel);\n color: var(--text);\n font: inherit;\n font-size: 0.875rem;\n font-variant-numeric: tabular-nums;\n text-align: center;\n padding: 0 0.35rem;\n margin: 0;\n height: 1.875rem;\n box-sizing: border-box;\n width: calc(var(--page-num-digits, 1) * 1ch + 0.75rem);\n line-height: 1;\n cursor: text;\n}\n.page-number-input:hover:not(:disabled) {\n border-color: var(--accent);\n}\n.page-number-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);\n}\n.page-number-input:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n";
+ //#endregion
+ //#region src/components/page-nav/page-nav.ts
+ /**
+ Files
+ ${hasEntries ? b`` : A}
+
+ ${hasEntries ? b`
+
+ `;
+ }
+ setVisible(visible) {
+ this.hidden = !visible;
+ }
+ setLastPane(isLast) {
+ this.classList.toggle("pane-layout-last", isLast);
+ }
+ renderFiles(entries) {
+ this._entries = entries;
+ this.requestUpdate();
+ }
+ _onCloseAll = () => {
+ this.dispatchEvent(new CustomEvent("doclang-file-pane-close-all", {
+ bubbles: true,
+ composed: true
+ }));
+ };
+ _renderEntry = (entry, index) => {
+ const onCardClick = (e) => {
+ if (e.target.closest(".file-view-close")) return;
+ this._emitFileSelect(index);
+ };
+ const onCardKeydown = (e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ this._emitFileSelect(index);
+ }
+ };
+ const onCloseClick = (e) => {
+ e.stopPropagation();
+ this._emitFileClose(index);
+ };
+ const thumb = entry.thumbnailUrl ? b`-
+ ${c(this._entries, (_, i) => i, this._renderEntry)}
+
+
+
+
+
+
+ ${entry.label}
+