webview-preview 1.1.2 → 1.2.1

package/src/page/annotate/index.mjs

@@ -0,0 +1,52 @@
+import { pageDom } from "#src/page/annotate/dom.mjs";
+import { ICONS } from "#src/page/annotate/icons.mjs";
+import { pageKeys } from "#src/page/annotate/keys.mjs";
+import { MARKUP } from "#src/page/annotate/markup.mjs";
+import { annotatePanel } from "#src/page/annotate/panel.mjs";
+import { pageReact } from "#src/page/annotate/react.mjs";
+import { pageSelectors } from "#src/page/annotate/selector.mjs";
+import { STYLES } from "#src/page/annotate/styles.mjs";
+import { pageVue } from "#src/page/annotate/vue.mjs";
+
+export { formatAnnotation } from "#src/page/annotate/format.mjs";
+
+export const ANNOTATE_KEY = "__webviewPreviewAnnotate";
+export const ANNOTATE_POLL_MS = 250;
+export const ANNOTATE_CLEANUP = `window.${ANNOTATE_KEY}?.cleanup?.()`;
+
+export const annotateStart = (name, keys = null, privateSelectors = [], keepOpen = false) => `(${annotatePanel})(${JSON.stringify({ key: ANNOTATE_KEY, name, markup: MARKUP, styles: STYLES, icons: ICONS, keepOpen })}, {
+	keys: (${pageKeys})(${JSON.stringify(keys)}),
+	selectors: (${pageSelectors})(${JSON.stringify(privateSelectors)}),
+	react: (${pageReact})(),
+	vue: (${pageVue})(),
+	dom: (${pageDom})()
+})`;
+
+export const ANNOTATE_CHECK = `(() => {
+	const state = window.${ANNOTATE_KEY};
+	if (!state) return "missing";
+	if (state.status === "open") {
+		const draft = state.version !== state.sentVersion ? (state.sentVersion = state.version, state.draft()) : null;
+		const captures = state.captures.splice(0);
+		if (captures.length) state.capturing = captures;
+		const url = location.href !== state.sentUrl ? (state.sentUrl = location.href) : null;
+		return draft || captures.length || url ? JSON.stringify({ status: "open", draft, captures, url }) : null;
+	}
+	return JSON.stringify({ status: state.status, result: state.result, keys: state.keys });
+})()`;
+
+export const annotateRestore = draft => `window.${ANNOTATE_KEY}Draft = ${JSON.stringify(draft)};`;
+
+export const annotateStep = (name, keys, privateSelectors = [], keepOpen = false) => ({
+	kind: "annotate",
+	value: name,
+	start: annotateStart(name, keys, privateSelectors, keepOpen),
+	resume: `window.${ANNOTATE_KEY}?.resume?.()`,
+	check: ANNOTATE_CHECK,
+	hide: `window.${ANNOTATE_KEY}?.setHidden?.(true)`,
+	show: `window.${ANNOTATE_KEY}?.setHidden?.(false)`,
+	cleanup: ANNOTATE_CLEANUP,
+	dispose: `window.${ANNOTATE_KEY}?.dispose?.()`,
+	restoreKey: `${ANNOTATE_KEY}Draft`,
+	pollMs: ANNOTATE_POLL_MS
+});

package/src/page/annotate/keys.mjs

@@ -0,0 +1,33 @@
+export function pageKeys(saved) {
+	const DEFAULT_KEYS = { pick: "p", notes: "n", freeze: "f", toggle: "t", parent: "ArrowUp", child: "ArrowDown", done: "Control+Enter" }
+	const KEY_ACTIONS = [
+		["pick", "Pick elements"],
+		["notes", "Show / hide notes"],
+		["freeze", "Freeze"],
+		["toggle", "Show / hide tools"],
+		["parent", "Outline the parent"],
+		["child", "Back to the child"],
+		["done", "Done (Send with --keep-open)"]
+	];
+	const bindings = { ...DEFAULT_KEYS, ...(saved ?? {}) }
+
+	const KEY_NAMES = { Control: "Ctrl", ArrowUp: "↑", ArrowDown: "↓", ArrowLeft: "←", ArrowRight: "→", " ": "Space" }
+	const showKey = combo => combo.split("+").map(part => KEY_NAMES[part] ?? (part.length === 1 ? part.toUpperCase() : part)).join("+");
+	const comboOf = event => {
+		if (["Control", "Alt", "Shift", "Meta"].includes(event.key)) return null;
+		const parts = [];
+		if (event.ctrlKey) parts.push("Control");
+		if (event.altKey) parts.push("Alt");
+		const code = event.code ?? "";
+		const key = /^Key[A-Z]$/.test(code) ? code.slice(3).toLowerCase()
+			: /^Digit\d$/.test(code) ? code.slice(5)
+				: event.key.length === 1 ? event.key.toLowerCase() : event.key;
+		if (event.shiftKey && key.length > 1) parts.push("Shift");
+		if (event.metaKey) parts.push("Meta");
+		parts.push(key);
+		return parts.join("+");
+	}
+
+	const actionFor = combo => Object.keys(bindings).find(action => bindings[action] === combo) ?? null;
+	return { DEFAULT_KEYS, KEY_ACTIONS, bindings, showKey, comboOf, actionFor }
+}

package/src/page/annotate/markup.mjs

@@ -0,0 +1,38 @@
+import { ICONS } from "#src/page/annotate/icons.mjs";
+
+export const MARKUP = `
+	<div class="layer">
+		<div class="masks"></div>
+		<div class="picks"></div>
+		<div class="outline"><div class="outline-label"></div></div>
+	</div>
+	<div class="dock" role="toolbar" aria-label="webview-preview annotate">
+		<div class="card toolbar">
+			<div class="grip" aria-hidden="true">${ICONS.grip}</div>
+			<button type="button" class="tool toggle" data-action="toggle"></button>
+			<div class="collapse"><div><div class="tools">
+				<button type="button" class="tool pick" data-action="pick" data-tip="Pick elements">${ICONS.pick}</button>
+				<button type="button" class="tool notes-button" data-action="notes" data-tip="Notes">${ICONS.notes}<span class="badge"></span></button>
+				<button type="button" class="tool freeze" data-action="freeze" data-tip="Freeze">${ICONS.freeze}<span class="badge freeze-badge"></span></button>
+				<button type="button" class="tool keys" data-tip="Key bindings">${ICONS.keys}</button>
+				<div class="divider"></div>
+				<button type="button" class="tool accent send" data-action="done" data-tip="Send the notes — the window stays open" hidden>${ICONS.send}</button>
+				<button type="button" class="tool accent done" data-action="done" data-tip="Done">${ICONS.done}</button>
+				<button type="button" class="tool cancel" data-tip="Cancel">${ICONS.cancel}</button>
+			</div></div></div>
+		</div>
+		<div class="card sheet notes-sheet" hidden>
+			<div class="sheet-head"><b>Notes</b><span class="run-name"></span></div>
+			<p class="privacy"></p>
+			<ol class="notes"></ol>
+			<label>General note<textarea class="general" rows="2" placeholder="About the whole screen"></textarea></label>
+			<p class="hint"></p>
+		</div>
+		<div class="card sheet keys-sheet" hidden>
+			<div class="sheet-head"><b>Key bindings</b><span>click, then press a key</span></div>
+			<div class="rows"></div>
+			<div class="actions"><button type="button" class="button reset-keys">Reset</button></div>
+		</div>
+	</div>
+	<div class="tip"></div>
+`;