Content - b78bed1d1aac235eebe7c5af2c539d392482b072 - 210c49c/index.html

visit type:
https://github.com/chrislgarry/Apollo-11

11 October 2020, 20:31:33 UTC
Tip revision: 4f51f408a1f5927d357894f83f2c346819236b75 authored by James Harris on 03 August 2020, 21:07:20 UTC
feat: add first/last buttons
Tip revision: 4f51f40
index.html
<!DOCTYPE html>

<html>
  <head>
    <title>AGC scans viewer</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script>
      const COMANCHE055 = "Comanche055";
      const LUMINARY099 = "Luminary099";
      const COMANCHE055_PAGES = 1751;
      const LUMINARY099_PAGES = 1743;

      function changeDir() {
        showPage();
      }

      function showFirst() {
        changePage(1);
      }

      function showLast() {
        const directory = document.form.directory.value;
        if (directory === COMANCHE055) changePage(COMANCHE055_PAGES);
        else if (directory === LUMINARY099) changePage(LUMINARY099_PAGES);
      }

      function showPrevious() {
        const newpage = parseInt(document.form.pagenum.value) - 1;
        if (newpage >= 1) {
          changePage(newpage);
        }
      }

      function showNext() {
        const newpage = parseInt(document.form.pagenum.value) + 1;
        const directory = document.form.directory.value;
        if (
          (directory === COMANCHE055 && newpage <= COMANCHE055_PAGES) ||
          (directory === LUMINARY099 && newpage <= LUMINARY099_PAGES)
        ) {
          changePage(newpage);
        }
      }

      function changePage(page) {
        document.form.pagenum.value = parseInt(page);
        showPage();
      }

      function showPage() {
        let page = parseInt(document.form.pagenum.value);
        const directory = document.form.directory.value;

        if (page < 1) {
          document.form.pagenum.value = 1;
          page = 1;
        } else if (directory === COMANCHE055 && page > COMANCHE055_PAGES) {
          document.form.pagenum.value = COMANCHE055_PAGES;
          page = COMANCHE055_PAGES;
        } else if (directory === LUMINARY099 && page > LUMINARY099_PAGES) {
          document.form.pagenum.value = LUMINARY099_PAGES;
          page = LUMINARY099_PAGES;
        }

        const formattedPage = page.toString().padStart(4, "0");
        const imageURL = `https://www.ibiblio.org/apollo/ScansForConversion/${directory}/${formattedPage}.jpg`;
        document.image.src = imageURL;
        document.body.style.cursor = "progress";
      }
    </script>
    <style>
      body {
        margin: 1rem;
      }
      form {
        margin-bottom: 1rem;
      }
      img {
        min-width: 100%;
        height: auto;
      }
      select,
      input {
        cursor: pointer;
      }
      span {
        margin-left: 1rem;
        vertical-align: middle;
      }
    </style>
  </head>
  <body onLoad="showPage()">
    <form name="form" onSubmit="return false">
      <select name="directory" onChange="changeDir()">
        <option>Comanche055</option>
        <option>Luminary099</option>
      </select>
      <input type="button" onClick="showFirst()" value="First" />
      <input type="button" onClick="showPrevious()" value="Previous" />
      <input
        type="text"
        name="pagenum"
        onChange="changePage(this.value)"
        size="5"
        maxlength="4"
        value="1"
      />
      <input type="button" onClick="showNext()" value="Next" />
      <input type="button" onClick="showLast()" value="Last" />
      <span>
        Images hosted by
        <a href="https://www.ibiblio.org/apollo">Ibiblio</a>
        and the Virtual AGC project
      </span>
    </form>
    <img
      name="image"
      onLoad="this.title=this.src;document.body.style.cursor='default'"
      width="1314"
      height="1000"
    />
  </body>
</html>