kokkoja-rel/client/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kokkoja</title>
<link rel="stylesheet" href="kokkoja.css">
<script type="module" src="js/main.js"></script>
</head>
<body>

<main id="start" hidden>
  <h1>Kokkoja</h1>
  <label for="name">Your name, as others will see it</label>
  <input id="name" type="text" maxlength="40" autocomplete="off">

  <label for="notebook">Notebook for the pages of this session</label>
  <select id="notebook" class="notebook_pick"
          data-help="The notebook this session’s pages are saved in. The last entry makes a new notebook."></select>
  <input id="notebook_name" type="text" maxlength="100" autocomplete="off" spellcheck="false"
         placeholder="Name of the new notebook" aria-label="Name of the new notebook" hidden>
  <p id="notebook_note" class="note notebook_directory"></p>

  <section id="start_choice">
    <h2>Start a session</h2>
    <p>You will be given an invitation to send to the others.</p>
    <button id="start_session" type="button">Start a session</button>
  </section>

  <section id="join_choice">
    <h2>Join a session</h2>
    <label for="invitation_entry">Invitation</label>
    <input id="invitation_entry" type="text" autocomplete="off" spellcheck="false">
    <button id="join_session" type="button">Join</button>
    <p class="note"><a id="open_installed" href="#" hidden>Join with the Kokkoja program installed on this computer instead</a></p>
  </section>

  <p id="start_message" class="message" role="alert"></p>
</main>

<div id="session" hidden>
  <header class="toolbar">
    <div id="drawing" class="drawing" aria-label="Drawing">
    <div class="group" role="radiogroup" aria-label="Tool">
      <button type="button" data-tool="pen" aria-pressed="true"
              data-help="Write on the page. Only your own writing can be erased.">Pen</button>
      <button type="button" data-tool="text" aria-pressed="false"
              data-help="Type on the page. Tap where the text should begin, or drag open a rectangle in which the text wraps and which grows downward as you type; its corners are marked in blue on the screen only. Tap your own text to change it; rest the pen on it to move it, or near a corner of a rectangle to resize it, or use Arrange.">Text</button>
      <button type="button" id="shape_tool" data-tool="shape" aria-pressed="false" aria-haspopup="menu" aria-expanded="false" data-name="Shapes"
              data-help="Draw the shape named on the button, in the pen’s colour and line width. Hold the button down, or press it with the right button, for the other shapes.">Rectangle</button>
      <div id="shape_menu" class="popup menu" role="menu" hidden>
        <button type="button" class="menu_item" role="menuitem" data-shape="rectangle"
                data-help="Rectangle: drag open the rectangle from one corner to the opposite one.">Rectangle</button>
        <button type="button" class="menu_item" role="menuitem" data-shape="circle"
                data-help="Circle: press at the centre and drag out to the edge, in any direction.">Circle</button>
        <button type="button" class="menu_item" role="menuitem" data-shape="ellipse"
                data-help="Ellipse: drag open the rectangle the ellipse fills.">Ellipse</button>
        <button type="button" class="menu_item" role="menuitem" data-shape="line"
                data-help="Line: tap each point of the line in turn; a drag gives its first two. Tap the last point again to finish, or the first point to close the shape. Backspace takes back the last point, Escape finishes.">Line</button>
        <button type="button" class="menu_item" role="menuitem" data-shape="arrow"
                data-help="Arrow: drag from the tail to the tip. The head is filled, its width from the line width.">Arrow</button>
        <hr>
        <div class="menu_title">Fill the shapes with</div>
        <div class="group fills" id="shape_fill" role="radiogroup" aria-label="Fill"></div>
      </div>
    </div>
    <div id="settings" class="settings">
    <div class="group" id="colors" role="radiogroup" aria-label="Color">
      <button id="more_colors" type="button" class="swatch more"
              data-help="Choose another color. It is added here.">+</button>
    </div>
    <div id="color_palette" class="popup palette" hidden></div>
    <div class="group" id="widths" role="radiogroup" aria-label="Line width"></div>
    <div class="group" id="text_style" hidden>
      <select id="text_font" aria-label="Font" data-help="The font: a sans-serif, a serif or a monospaced one, as this computer has them.">
        <option value="sans-serif" style="font-family: sans-serif">Sans</option>
        <option value="serif" style="font-family: serif">Serif</option>
        <option value="monospace" style="font-family: monospace">Mono</option>
      </select>
      <input id="text_size" type="number" min="6" max="100" step="1" value="14"
             aria-label="Text size in points" data-help="Text size in points.">
    </div>
    </div>
    <div class="group after_settings" role="radiogroup" aria-label="Hide, Arrange and Eraser">
      <button type="button" data-tool="hide" aria-pressed="false" hidden
              data-help="Hide part of the page for everyone: drag open a rectangle, and what lies under it is covered in white, marked by blue corners. Rest the pen on it to move it, or near a corner to resize it, or use Arrange; a tap of the eraser removes it.">Hide</button>
      <button type="button" data-tool="arrange" aria-pressed="false"
              data-help="Move and resize: the corners of every image are marked in blue, as those of Hides and text rectangles always are. Drag inside an image, a Hide or a text rectangle of yours to move it, drag a corner to resize it (an image keeps its shape). A press elsewhere does nothing. With any other tool, resting the pen on one of them for half a second does the same.">Arrange</button>
      <button type="button" data-tool="eraser" aria-pressed="false"
              data-help="Erase your own strokes and text by moving over them. A tap on an image, or on a Hide rectangle, removes it, if you are the host or a co-host (or added the image yourself). Two quick taps on empty paper, away from anything the eraser would remove, undo your latest mark; again, and the one before.">Eraser</button>
    </div>
      <button id="undo" type="button" disabled
              data-help="Take back your latest mark: a stroke, an erasure, a text block typed or moved, a Hide rectangle. Again for the one before. Also Ctrl+Z (Command+Z on a Mac), or two quick taps of the eraser on empty paper. Only your own marks, and only on this page since you opened it.">Undo</button>
    </div>
    <div class="toolbar_right">
    <div class="group" id="host_tools">
      <button id="page_menu_button" type="button" aria-haspopup="menu" aria-expanded="false"
              data-help="The page and the view: fit the page to the window, show it at its normal scale, make it larger or smaller, and whether it grows as you write.">Page</button>
      <div id="page_menu" class="popup menu" role="menu" hidden>
        <div class="menu_title">Change the display of the page</div>
        <button id="zoom_fit" type="button" class="menu_item" role="menuitem"
                data-help="Show the whole page in the window. Pressed by the host, it does so on every screen. Ctrl (Command on a Mac) with the scroll wheel, or with a pen stroke up or down, zooms about the pointer.">Fit to the window</button>
        <button id="zoom_sheet" type="button" class="menu_item" role="menuitem"
                data-help="Show the page at the scale a new page has, one full page filling the window. A shrunk page is then seen at its own size rather than enlarged. Pressed by the host, it does so on every screen.">Normal scale</button>
        <hr>
        <div class="menu_title">Change the size of the page</div>
        <button id="zoom_expand" type="button" class="menu_item" role="menuitem" hidden
                data-help="Make the page fill the window, for everyone, at this zoom, in both directions. Nothing on it moves.">Expand to the window</button>
        <button id="zoom_shrink" type="button" class="menu_item" role="menuitem" hidden
                data-help="Make the page, for everyone, just large enough for what is on it, with the margin around. Nothing on it moves.">Shrink to the contents</button>
        <hr>
        <label class="menu_item toggle" role="menuitemcheckbox"
               data-help="Let the page grow when your writing reaches an edge. Off, your writing stops at the edge. Images always get the room they need.">
          <input id="extend" type="checkbox" checked> Extend the page while writing
        </label>
      </div>
      <button id="new_page" type="button"
              data-help="Start a new blank page for everyone. The current page is kept in each notebook.">New</button>
      <button id="load_image" type="button"
              data-help="Put an image file, such as a scanned exercise, on the page for everyone: below the images already there, centred, at its own size. Rest the pen on an image to move it, or near a corner to scale it; it comes to the front. A tap of the eraser on an image removes it; writing on it stays.">Image</button>
      <button id="load_notebook_page" type="button"
              data-help="Your notebooks and the pages kept in them, to look at or to delete. The host and co-hosts can start a new page for everyone from a kept page, with everything on it; the current page is then kept in each notebook.">Notebooks</button>
    </div>
    <div class="group" aria-label="Notebook">
      <select id="session_notebook" class="notebook_pick" aria-label="Current notebook"
              data-help="The notebook the page is saved in. Choosing another continues the page there; the last entry makes a new notebook."></select>
      <input id="session_notebook_name" type="text" maxlength="100" autocomplete="off" spellcheck="false"
             placeholder="Name of the new notebook" aria-label="Name of the new notebook" hidden>
      <button id="keep_page" type="button"
              data-help="Keep a dated copy of the page as it is now. The page is also kept by itself whenever it is about to be replaced.">Keep</button>
      <button id="export_page" type="button"
              data-help="Save a picture of the page, as it is shown here, in a PNG file at a place you choose.">Export</button>
    </div>
    <button id="session_button" type="button"
            data-help="Who is here, and the invitation to send to others.">Session</button>
    <button id="help" type="button" data-help="One click shows the explanations of every command, as one text in a window. Two quick clicks show where the documentation is.">Help</button>
    <div id="help_popup" class="popup help_popup" hidden>Documentation website coming soon!</div>
    </div>
  </header>
  <div id="notice" class="notice" hidden></div>

  <div class="workspace">
    <div id="desk" class="desk">
      <div id="page" class="page"></div>
    </div>
  </div>
</div>

<dialog id="session_dialog" class="chooser session">
  <header>
    <h2>Session</h2>
    <button id="session_close" type="button" aria-label="Close">×</button>
  </header>
  <div class="session_body">
    <h3>Participants</h3>
    <ul id="participants"></ul>
    <h3>Invitation</h3>
    <div class="invitation_line">
      <input id="invitation" type="text" readonly spellcheck="false">
      <button id="copy_invitation" type="button"
              data-help="Copy the invitation, to send to the others by any means.">Copy</button>
    </div>
    <div id="invitation_code" class="invitation_code" hidden aria-label="QR code"
         data-help="The invitation as a QR code. Point the camera of a phone or a tablet at it, and the link opens there."></div>
    <p class="note session_state">
      <span id="page_number" class="page_number"></span>
      <span id="status" class="status"></span>
      <span id="save_status" class="save_status"></span>
    </p>
    <p class="note notebook_directory"></p>
    <h3>Log</h3>
    <div class="log_line">
      <pre id="event_log" class="event_log"></pre>
      <button id="copy_log" type="button"
              data-help="Copy the log: what happened in this session and every press and release of the pen, for finding a fault.">Copy</button>
    </div>
  </div>
</dialog>

<dialog id="manual_dialog" class="chooser manual">
  <header>
    <h2>Help</h2>
    <button id="copy_manual" type="button" class="action"
            data-help="Copy this text.">Copy</button>
    <button id="manual_close" type="button" aria-label="Close">×</button>
  </header>
  <div id="manual_text" class="manual_text" tabindex="0" autofocus></div>
</dialog>

<dialog id="notebook_chooser" class="chooser">
  <header>
    <h2>Notebooks</h2>
    <button id="chooser_delete" type="button" class="delete" hidden
            data-help="Delete the marked notebooks and pages. The first press says what will happen; the second does it.">Delete</button>
    <button id="chooser_close" type="button" aria-label="Close">×</button>
  </header>
  <div class="chooser_body">
    <nav id="chooser_notebooks" class="chooser_notebooks"></nav>
    <div id="chooser_pages" class="chooser_pages"></div>
  </div>
  <p id="chooser_message" class="note"></p>
</dialog>

<dialog id="file_chooser" class="chooser">
  <header>
    <h2 id="files_title">Image</h2>
    <button id="files_close" type="button" aria-label="Close">×</button>
  </header>
  <div class="files_place">
    <button id="files_up" type="button">Up</button>
    <input id="files_directory" type="text" spellcheck="false" autocomplete="off"
           aria-label="Directory">
  </div>
  <div class="files_body">
    <nav id="files_directories" class="files_directories"></nav>
    <div id="files_entries" class="files_entries"></div>
  </div>
  <div id="files_save" class="files_save" hidden>
    <input id="files_name" type="text" spellcheck="false" autocomplete="off"
           aria-label="File name">
    <button id="files_save_here" type="button">Export</button>
  </div>
  <p id="files_message" class="note"></p>
</dialog>

</body>
</html>