TouchUI toggling the display between wcmmodes | Community
Skip to main content
C
cjantoli
Level 2
November 4, 2015
Solved

TouchUI toggling the display between wcmmodes

  • November 4, 2015
  • 5 replies
  • 2013 views

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. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by 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.

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

Thanks and Regards

Kautuk Sahni

5 replies

smacdonald2008
smacdonald2008
Level 10
November 4, 2015

I will ask Feike to look at this question.

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
November 5, 2015

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

Kautuk Sahni
C
cjantoliAuthor
Level 2
November 6, 2015

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-1
AnkurAhlawat-1
Level 6
September 14, 2017

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
edubey
Level 10
September 14, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...