@sitecore-jss/sitecore-jss
Version:
This module is provided as a part of Sitecore JavaScript Rendering SDK. It contains the core JSS APIs (layout service) and utilities.
88 lines (87 loc) • 4.39 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.subscribeToFormSubmitEvent = exports.executeScriptElements = exports.loadForm = void 0;
const browser_1 = require("@sitecore-cloudsdk/events/browser");
const graphql_1 = require("../graphql");
const debug_1 = __importDefault(require("../debug"));
/**
* Fetches the form markup from the Sitecore Edge service and renders it in the component's template.
* @param {string} contextId - The unique identifier of the current context
* @param {string} formId - The unique identifier of the form
* @param {string} [edgeUrl] - The URL of the Sitecore Edge Platform
*/
const loadForm = (contextId, formId, edgeUrl) => __awaiter(void 0, void 0, void 0, function* () {
if (!contextId) {
debug_1.default.form('Form was not able to render since context id was not provided');
return '';
}
const url = (0, graphql_1.getEdgeProxyFormsUrl)(contextId, formId, edgeUrl);
try {
debug_1.default.form(`Fetching form data from ${url}`);
const rsp = yield fetch(url, {
method: 'GET',
cache: 'no-cache',
});
if (rsp.status !== 200) {
throw new Error('Failed to fetch form data');
}
const content = yield rsp.text();
debug_1.default.form(`Form data fetch response: ${content}`);
return content;
}
catch (error) {
debug_1.default.form(`Form '${formId}' was not able to render`, error);
throw error;
}
});
exports.loadForm = loadForm;
/**
* When you set the innerHTML property of an element, the browser does not execute any <script> tags included in the HTML string
* This method ensures that any <script> elements within the loaded HTML are executed.
* It re-creates the script elements and appends the to the component's template, then removes old script elements to avoid duplication.
* @param {HTMLElement} rootElement - The root element to execute script elements within
*/
const executeScriptElements = (rootElement) => {
const scriptElements = rootElement.querySelectorAll('script');
if (!scriptElements) {
return;
}
Array.from(scriptElements).forEach((scriptElement) => {
var _a;
const clonedElement = document.createElement('script');
Array.from(scriptElement.attributes).forEach((attribute) => {
clonedElement.setAttribute(attribute.name, attribute.value);
});
clonedElement.text = scriptElement.text;
(_a = scriptElement === null || scriptElement === void 0 ? void 0 : scriptElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(clonedElement, scriptElement);
});
};
exports.executeScriptElements = executeScriptElements;
/**
* Subscribes to the Form event and then sends data to CloudSDK.
* This listener captures interactions such as form views or submissions
* @param {HTMLElement} formElement - The form element to subscribe to events on
* @param {string} [componentId] - The unique identifier of the component
*/
const subscribeToFormSubmitEvent = (formElement, componentId) => {
formElement.addEventListener('form:engage', ((e) => {
const { formId, name } = e.detail;
if (formId && name) {
debug_1.default.form('Sending form event', formId, name);
(0, browser_1.form)(formId, name, (componentId === null || componentId === void 0 ? void 0 : componentId.replace(/-/g, '')) || '');
}
}));
};
exports.subscribeToFormSubmitEvent = subscribeToFormSubmitEvent;