Detecting 'Design Mode' in a template/block/etc

Permalink
I know how to tell when a page is in edit mode, that's easy but how do you know when a page is in 'Design Mode' e.g. someone is just editing an attribute or something?

There's some JS I need to disable in this mode as well as in edit mode.

surefyre
 
Gondwana replied on at Permalink Reply
Gondwana
You might be able to do it by reading the value of a CSS attribute that's only set in design mode, or by inspecting the DOM. Beware changes in window width (responsiveness).

Feels a bit kludgy; it would be preferable for your JS not to interfere.
surefyre replied on at Permalink Reply
surefyre
It would be preferable but not my design, not my script (is a well-known BS datepicker though).

Would also be good practice for C5 to signal Design Mode, though, too.
Gondwana replied on at Permalink Reply
Gondwana
Experiment with something like:
var c5panel = document.getElementById("ccm-panel-page");
var panelTransform = c5panel.style.transform;

You'll want to check that c5panel exists, and then inspect the panelTransform string (or at least I assume it's a string). You'd be wise to check this out on different browsers since I've seen some inconsistencies in the way they report some styles, also check out different screen widths, edit mode, not logged in, etc.

There are probably other and better ways, but try your luck with this.
surefyre replied on at Permalink Reply
surefyre
Cheers for that will see if I can detect it before loading the dodgy JS script(s)