TouchUI toggling the display between wcmmodes

[cjantoli]

Does anyone know how the parsys components hides the "Drag components here" text when toggling between preview and edit mode in TouchUI? The page nor the iframe is refreshing. 

I am using sightly and TouchUI for my components and there are elements I want removed which switching views. For example lets look at Feike Visser's sightly tutorial.

<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to the author</div>

Since sightly is server side rendered this content would be displayed or hidden base on what "wcmmode" you are on when you land on the page. 

What we seem to need is a way capture that event like the parsys does and hide and display the content accordingly. 

[smacdonald2008]

I will ask Feike to look at this question.

[kautuk_sahni · Accepted solution]

Hi

I just found out a reference article "How to hide edit components in preview without a refresh" :

Link:- http://nathanaelmowbray.tumblr.com/post/65311849929/how-to-hide-edit-components-in-preview-without-a

I request you to go through it, if it would work for you.

I will ask my internal team to look into this this, if they know the solution.

PS:- You can hide any class, with this approach. So you can modify this accordingly to your need. 

Thanks and Regards

Kautuk Sahni

[cjantoli]

Just tested the CSS method described in the blog. Looks like this isn't the case in AEM 6.1. I think we just need the javascript hook still. 

I am still working on a possible solution. 

[AnkurAhlawat]

Hi cjantoli,

Usually to show an hide content between different run modes we use the same approach that you have written in your question:-

<span data-sly-test="${wcmmode.edit || wcmmode.design }">Please configure the component</span>

Do you face any issue in above approach suggested by Feike Visser's.

[edubey]

Hi,

Here is tech part:-

Editor view in AEM works with Layers where edit and preview are two different layers. These will be on top of each other.

When you click on Edit / Preview on the top left menu, the editor just switches between the layers, or you can say it will being preview layer in front and move edit layer in back.

Every content in editor page is supposed to be displayed in a particular layer, so when you switch you will see the content of the particular layer.

Now answer to "The page nor the iframe is refreshing." This is done by triggering events (JS) on layer switch.

You can also listen for such event and play your part of hide / show.

Here is the event code if you are curious to try it out.

(function ($, $document) {

    $document.on('cq-layer-activated', doSomething);

    function doSomething(ev) {

        console.log(ev.layer);

    }

}(jQuery, jQuery(document)));

Core Documentation

Thanks