How do I determine current mode client side

Avatar

Avatar

James_Lelyveld

Avatar

James_Lelyveld

James_Lelyveld

15-10-2015

In CQ 5.6.1 the author would add .cq-wcm-edit & .cq-wcm-preview classes to the body tag (depending on current mode). This was added client side so you could add CSS classes that would only affect the page in edit mode. 

In AEM 6 this doesn't appear to happen any more, as the switch from Edit mode to Preview mode doesn't require a page refresh is there anyway to detect  when the mode changes?

( The aim of this is to make sure any CSS to enhance the author experience doesn't show when the author is previewing what the end site will look like).

View Entire Topic

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-2015

Hi James,

We are working on improving this. But for now you can listen to the cq-layer-activated event, which will pass an object containing the new layer being activated (layer) and the previous one (prevLayer). You can then get the active layer as described with Granite.author.layerManager.getCurrentLayer(), and set accordingly a class on your page body.

I hope that this will do the trick!

Cheers,
Gabriel