JavaScript API: Preview

JavaScript object: top.WE_API.Preview
Access API documentation: Preview

The Preview object provides functionality related to the ContentCreator preview, such as

• Reloading the preview or parts thereof
• Refreshing editor highlighting
• Interacting with Multi Perspective Preview

Refreshing the Preview

Reloading the Entire Preview

void reload() - without parameters - initiates a reload of the entire preview, causing the entire page to be generated anew.

<script type="text/javascript">
    function reloadPreview() {
        top.WE_API.Preview.reload();
    }
</script>

<a href="#" onClick="reloadPreview();">Reload this page</a>

Reloading Specific DOM Elements

void reload(Element element) - parameterized with a JavaScript DOM element object - causes a reload of part of the document, reflecting changes to associated store elements:

• If the DOM element passed as a parameter has an editor identifier (added with the function editorId() in the template set definition), this DOM element will be reloaded.
• Otherwise, the nearest surrounding DOM element with an editor identifier will be reloaded. If no surrounding DOM element with an editor identifier is present, the entire preview document will be reloaded.

Reacting to Preview Changes

In order to react to partial changes in the preview's DOM caused by ContentCreator (e.g. due to a drag-and-drop operation, after which only part of the document is reloaded), reload listeners may be registered.

void addElementReloadListener(ElementReloadListener listener) registers a function, either named or anonymous, which accepts a single parameter. If a partial document reload is triggered by ContentCreator functionality, this function is called with the DOM element which was reloaded as the function's parameter.

<script type="text/javascript">
    // Function that will be registered as a reload listener.
    function handlePartialReload(element) {
        // Determine if the reloaded DOM segment contains an element with a certain ID.
        if (element.id == "importantElementID") {
            // Reloaded element has ID "importantElementID".
            top.WE_API.Common.showMessage("Important DOM element was reloaded directly.");
        } else if (element.getElementById("importantElementID") != null) {
            // Reloaded DOM element contains a child element with ID "importantElementID".
            top.WE_API.Common.showMessage("Ancestor of important DOM element was reloaded.");
        }
    }

    // Register function "handlePartialReload" as a reload listener.
    top.WE_API.Preview.registerElementReloadListener(handlePartialReload);
</script>

Refreshing Editor Highlighting

Two functions aid in refreshing editor highlighting. This is essential for highly dynamic documents, whose content and layout may change due to interactions with the preview such as resizing the client window or performing drag and drop operations.

Repainting Visible Highlight Frames

void repaint() may be used to repaint any currently active highlight frames in the preview, resizing and repositioning these frames to match their associated DOM elements. This function is useful in callback functions for FS_BUTTON instances, where drag-and-drop operations may result in layout changes to a surrounding DOM element while the mouse pointer is still within this element's bounds and highlighting cannot automatically reflect these layout changes.

Rescanning a DOM Element for Highlightable Elements

void rescan(Element element) is parameterized with a DOM element object and scans this element as well as its child elements for editor identifiers. DOM elements with editor identifiers found during this scan will then be enabled for highlighting.

This function may be used in conjunction with operations that dynamically change the document's contents, such as inserting the rendered HTML of a page store section into the document flow without reloading the entire page.

Obtaining the Window Object

JavaScriptObject getWindow() may be used to obtain the window object currently associated with the preview frame.

Parameters of Multi Perspective Preview (MPP)

The Preview object of the ContentCreator JavaScript API contains several functions that provided means of getting and setting time and custom parameters for use with Multi Perspective Preview (→Documentation FirstSpirit SiteArchitect). Due to the introduction of MPP in SiteArchitect with FirstSpirit version 5.2, the functions in the Preview object of the ContentCreator JavaScript API have been deprecated and will be removed in a future version.

MPP-related JavaScript functionality is now accessible through a new JavaScript object, top.MPP_API. For more information, see Template Development > JavaScript APIs > Multi Perspective Preview.