While using Apostrophe Workflow, I don't know how to detect in CSS and/or JavaScript in which mode the user is viewing the page.
The .apos-workflow-draft-page
CSS class seems to be present in both draft and preview modes, and this can cause problems. We improved the visibility and the layout of certain elements so they are understood as editable while in draft, however in preview, we wish to not show all these hints.
What would be the ApostropheCMS' way to properly detect these states?
You can inspect apos.modules['apostrophe-workflow'].locale
, which will end in -draft
if in draft mode:
if (apos.modules['apostrophe-workflow'].locale.match(/-draft$/)) {
// draft mode
} else {
// live mode
}
Detecting preview mode is easy too. First check for draft mode, then check data.workflowPreview
anywhere in your template:
data.workflowPreview
This isn't pushed into a frontend javascript variable, but you can do it yourself:
<script>
window.workflowPreview = {{ data.workflowPreview | json }};
</script>