app-walkthrough
Version:
An intuitive guided walkthrough library with UI highlighting and voice narration for web apps.
31 lines (30 loc) • 1.28 kB
JavaScript
import { createButton } from "./createButton";
import { getDomEventDetails } from "./getDomEventDetails";
import { getSelectors } from "./getSelectors";
// Add a recording UI button
function addRecordingButton(uiContainer, state, stopRecording) {
if (!state.isRecording)
return;
uiContainer.innerHTML = "";
const baseClasses = "px-4 py-2 mx-1 rounded-md border text-sm font-semibold cursor-pointer transition shadow-sm";
const recordingClasses = `${baseClasses} inline-flex items-center bg-red-600 text-white hover:bg-red-700`;
const recordingBtn = createButton("Recording...", "rec-btn", stopRecording, recordingClasses);
const light = document.createElement("span");
light.className = "h-2 w-2 mr-2 bg-white rounded-full animate-pulse";
recordingBtn.prepend(light);
uiContainer.appendChild(recordingBtn);
}
// Record an event into state
function recordEvent(e, state) {
if (!state.isRecording)
return;
const target = e.target;
if (!target || target.closest("#recorder-ui-container"))
return;
const selectors = getSelectors(target);
const eventData = getDomEventDetails(e, selectors, target);
if (eventData) {
state.events.push(eventData);
}
}
export { recordEvent, addRecordingButton };