How to hide labels when going from Edit mode to Preview mode?

[mtremblay33]

Let's say I have a label like

<p class="my-label" data-sly-test="${wcmmode.edit}">A useful label</p>

I find this type of label useful because in edit mode, it can indicate things to authors. When switching to Preview mode however, the label does not disappear. It only disappears when I do a page refresh. I've got a listener like,

channel.on('cq-layer-activated', function (event) {...});

that can force the page refresh, but to me this is not elegant. How can the component refresh itself when switching between modes?

Maybe a better question is, how can I add overlays to my component such that they only appear during authoring?

Thanks!

[edubey]

When you click on Preview, there is no need to add any listener to reload page. 

Sidekick code should do this for you. 

CQ.WCM.launchSidekick("${currentPage.path @ context='uri'}", { propsDialog: "${wcmInit.dialogPath @ context='uri'}", locked: ${currentPage.locked @ context="scriptString"}, previewReload: "true" });

Article has shown above behavior : https://helpx.adobe.com/experience-manager/using/domparser.html

[mtremblay33]

Thanks for your reply. I'm working in Touch UI, so the Sidekick does not apply...

[mtremblay33]

Bump...

[smacdonald2008]

This use case is not documented in Sightly docs. We will look into how this use case can be performed in Touch Ui.

[kautuk_sahni]

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.

Thanks and Regards

Kautuk Sahni

[mtremblay33 · Accepted solution]

Thanks. That solution didn't work for me. Here's the CSS (in .less) that worked:

.my-label { // style for my label .aem-Author--hidePlaceholder & { display: none; } }

In the iframe, switching from Edit to Preview adds the aem-Author--hidePlaceholder class to the html element, which I hadn't spotted before. Thanks to all those who replied