Locked Pages

Test page for all varieties of locked page.

Static Views

This is what locked pages will look like in static modes (snapshot, compare, and print views).

<div class="ProseMirror is-static" data-locked="true">
  <div class="o-page" data-locked="true" data-page-number="1">
    <div class="o-block-element o-general">page locked, value is 1</div>
  </div>
  <div class="o-page" data-page-number="1A">
    <div class="o-block-element o-general">page unlocked, value is 1A</div>
  </div>
  <div class="o-page" data-locked="true" data-page-number="2">
    <div class="o-block-element o-general">page locked, value is 2</div>
  </div>
  <div class="o-page" data-locked="true" data-page-number="3-5">
    <div class="o-block-element o-general">page locked, value is 3-5</div>
  </div>
  <div class="o-page">
    <div class="o-block-element o-general">page unlocked, no page number</div>
    <div class="o-block-element o-parenthetical">(this would happen if user locks pages, creates a new page, and doesn't give it a number)</div>
  </div>
  <div class="o-page" data-locked="true">
    <div class="o-block-element o-general">page locked, no page number</div>
    <div class="o-block-element o-parenthetical">(this would happen if user locks pages and deletes the page number)</div>
  </div>
  <div class="o-page" data-locked="true" data-page-number="">
    <div class="o-block-element o-general">page locked, value is empty string</div>
    <div class="o-block-element o-parenthetical">(this would happen if user enters then deletes page number)</div>
  </div>
  <div class="o-page" data-locked="true" data-page-number="">
    <div class="o-block-element o-general">page unlocked, value is empty string</div>
    <div class="o-block-element o-parenthetical">(this would happen if user enters then deletes page number)</div>
  </div>
</div>

Live View

Pseudo-elements replaced by input elements managed via prosemirror plugin.

Element number inputs live in left gutter, page number inputs live in right gutter.

Page number inputs must be wrapped in another div for the sake of displaying the ..

First page does not display page number input.

<div class="c-editor">
  <div class="c-editor__gutterleft">
    <div id="editor-element-numbers">
      <input style="top: 96px;" type="text" value="1" placeholder="#"
        maxlength="5" size="1" class="e-element-number-input">
      <input style="top: 1250px;" type="text" value="3" placeholder="#"
        maxlength="5" size="1" class="e-element-number-input">
    </div>
  </div>
  <div class="c-editor__overlay"></div>
  <div id="editor">
    <div class="ProseMirror is-screenplay" data-locked="true" contenteditable="true">
      <div class="o-page" data-locked="true" data-page-number="1">
        <p class="o-scene o-block-element is-left-aligned" data-alignment="left"
          data-element-number="1">page 1 - locked</p>
      </div>
      <div class="o-page o-page-dynamic" data-dynamic="true" data-locked="true" data-page-number="2">
        <p class="o-action o-block-element is-left-aligned" data-alignment="left">action text</p>
        <p class="o-scene o-block-element is-left-aligned" data-alignment="left" data-element-number="3">page 2 - dynamic, locked</p>
      </div>
    </div>
  </div>
  <div class="c-editor__gutterright">
    <div id="editor-page-numbers">
      <div style="top: calc(1em + 0.5in + 1123px);" class="e-page-number"><input type="text" value="2" placeholder="#" maxlength="59" size="1" class="e-page-number-input">.</div>
    </div>
  </div>
</div>