@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.
152 lines (151 loc) • 6 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getJssPagesClientData = exports.handleEditorAnchors = exports.resetEditorChromes = exports.isEditorActive = exports.HorizonEditor = exports.ChromeRediscoveryGlobalFunctionName = exports.ExperienceEditor = exports.EDITING_ALLOWED_ORIGINS = exports.PAGES_EDITING_MARKER = exports.QUERY_PARAM_EDITING_SECRET = exports.DEFAULT_PLACEHOLDER_UID = void 0;
const is_server_1 = __importDefault(require("../utils/is-server"));
/**
* Default value of uid for root placeholder when uid is not present.
*/
exports.DEFAULT_PLACEHOLDER_UID = '00000000-0000-0000-0000-000000000000';
/**
* Query parameter for editing secret
*/
exports.QUERY_PARAM_EDITING_SECRET = 'secret';
/**
* ID to be used as a marker for a script rendered in XMC Pages
* Should identify app is in XM Cloud Pages editing mode
*/
exports.PAGES_EDITING_MARKER = 'jss-hrz-editing';
/**
* Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
*/
exports.EDITING_ALLOWED_ORIGINS = ['https://pages.sitecorecloud.io'];
/**
* Static utility class for Sitecore Experience Editor
*/
class ExperienceEditor {
/**
* Determines whether the current execution context is within a Experience Editor.
* Experience Editor environment can be identified only in the browser
* @returns true if executing within a Experience Editor
*/
static isActive() {
if ((0, is_server_1.default)()) {
return false;
}
// eslint-disable-next-line
const sc = window.Sitecore;
return Boolean(sc && sc.PageModes && sc.PageModes.ChromeManager);
}
static resetChromes() {
if ((0, is_server_1.default)()) {
return;
}
window.Sitecore.PageModes.ChromeManager.resetChromes();
}
}
exports.ExperienceEditor = ExperienceEditor;
/**
* Copy of chrome rediscovery contract from Horizon (chrome-rediscovery.contract.ts)
*/
exports.ChromeRediscoveryGlobalFunctionName = {
name: 'Sitecore.Horizon.ResetChromes',
};
/**
* Static utility class for Sitecore Pages Editor (ex-Horizon)
*/
class HorizonEditor {
/**
* Determines whether the current execution context is within a Pages Editor.
* Pages Editor environment can be identified only in the browser
* @returns true if executing within a Pages Editor
*/
static isActive() {
if ((0, is_server_1.default)()) {
return false;
}
// Check for Chromes mode
const chromesCheck = window.location.search.indexOf('sc_headless_mode=edit') > -1;
// JSS will render a jss-exclusive script element in Metadata mode to indicate edit mode in Pages
return chromesCheck || !!window.document.getElementById(exports.PAGES_EDITING_MARKER);
}
static resetChromes() {
if ((0, is_server_1.default)()) {
return;
}
// Reset chromes in Pages
window[exports.ChromeRediscoveryGlobalFunctionName.name] &&
window[exports.ChromeRediscoveryGlobalFunctionName.name]();
}
}
exports.HorizonEditor = HorizonEditor;
/**
* Determines whether the current execution context is within a Sitecore editor.
* Sitecore Editor environment can be identified only in the browser
* @returns true if executing within a Sitecore editor
*/
const isEditorActive = () => {
return ExperienceEditor.isActive() || HorizonEditor.isActive();
};
exports.isEditorActive = isEditorActive;
/**
* Resets Sitecore editor "chromes"
*/
const resetEditorChromes = () => {
if (ExperienceEditor.isActive()) {
ExperienceEditor.resetChromes();
}
else if (HorizonEditor.isActive()) {
HorizonEditor.resetChromes();
}
};
exports.resetEditorChromes = resetEditorChromes;
/**
* @description in Experience Editor, anchor tags
* with both onclick and href attributes will use the href, blocking the onclick from firing.
* This function makes it so the anchor tags function as intended in the sample when using Experience Editor
*
* The Mutation Observer API is used to observe changes to the body, then select all elements with href="#" and an onclick,
* and replaces the # value with javascript:void(0); which prevents the anchor tag from blocking the onclick event handler.
* @see Mutation Observer API: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
*/
const handleEditorAnchors = () => {
// The sample gives the href attribute priority over the onclick attribute if both are present, so we must replace
// the href attribute to avoid overriding the onclick in Experience Editor
if (!window || !ExperienceEditor.isActive()) {
return;
}
const targetNode = document.querySelector('body');
const callback = (mutationList) => {
mutationList.forEach((mutation) => {
const btns = document.querySelectorAll('.scChromeDropDown > a[href="#"], .scChromeDropDown > a[href="#!"], a[onclick]');
if (mutation.type === 'childList') {
btns.forEach((link) => {
link.href = 'javascript:void(0);';
});
}
return;
});
};
const observer = new MutationObserver(callback);
const observerOptions = {
childList: true,
subtree: true,
};
if (targetNode) {
observer.observe(targetNode, observerOptions);
}
};
exports.handleEditorAnchors = handleEditorAnchors;
/**
* Gets extra JSS clientData scripts to render in XMC Pages in addition to clientData from Pages itself
* @returns {Record} collection of clientData
*/
const getJssPagesClientData = () => {
const clientData = {};
clientData[exports.PAGES_EDITING_MARKER] = {};
return clientData;
};
exports.getJssPagesClientData = getJssPagesClientData;