Search code examples
apostrophe-cms

While logged in, how to detect preview/draft/live?

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.

enter image description here

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?

Solution

  • 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>