AEM 61 - TouchUI Authoring Refresh page when switched to Preview mode

Goal

Refresh page when the layer mode is switched to Preview

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-refresh-page-preview-mode

2) Create node /apps/touchui-refresh-page-preview-mode/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog

3) Create file (nt:file) /apps/touchui-refresh-page-preview-mode/clientlib/js.txt and add

                       refresh-on-preview.js

4) Create file (nt:file) /apps/touchui-refresh-page-preview-mode/clientlib/refresh-on-preview.js and add the following code

(function ($, $document) {
    $document.on('cq-layer-activated', refreshPage);

    function refreshPage(ev){
        if ( (ev.prevLayer === "Preview") || (ev.layer !== 'Preview') ) {
            return;
        }

        window.location.reload();
    }
}(jQuery, jQuery(document)));