~patrickhaussmann/doi.app.5ls.de

b4d0f80ccbb7785d7413f8407c11285c25df72c6 — patrickhaussmann 2 years ago 617ac2d
autoformat
1 files changed, 124 insertions(+), 117 deletions(-)

M index.html
M index.html => index.html +124 -117
@@ 1,134 1,141 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Doi</title>

    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .center {
            display: flex;
            flex-direction: column;
            max-height: 100vh;
            max-width: 100vw;
            width: 25rem;
            height: min-content;
        }

        div#input {
            margin: 1rem;
            padding: 1rem;
            white-space: nowrap;
            overflow: auto;
            border: 1px solid black;
        }

        .links {
            margin: 1rem;
            display: flex;
            justify-content: space-around;
        }

        .links>a {
            color: black;
            text-decoration: none;
        }

        .invalid .links>a {
            color: grey;
            pointer-events: none;
        }


        .invalid div#input {
            border: 1px solid red;
            outline: red auto 1px;
        }

      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }

      .center {
        display: flex;
        flex-direction: column;
        max-height: 100vh;
        max-width: 100vw;
        width: 25rem;
        height: min-content;
      }

      div#input {
        margin: 1rem;
        padding: 1rem;
        white-space: nowrap;
        overflow: auto;
        border: 1px solid black;
      }

      .links {
        margin: 1rem;
        display: flex;
        justify-content: space-around;
      }

      .links > a {
        color: black;
        text-decoration: none;
      }

      .invalid .links > a {
        color: grey;
        pointer-events: none;
      }

      .invalid div#input {
        border: 1px solid red;
        outline: red auto 1px;
      }
    </style>
  </head>

</head>

<body>

  <body>
    <div class="center">
        <div id="input" contenteditable><br></div>
        <div class="links">
            <a id="doi" href="#" target="_blank">doi</a>
            <a id="lmu" href="#" target="_blank">lmu</a>
            <a id="sci" href="#" target="_blank">sci</a>
        </div>
      <div id="input" contenteditable><br /></div>
      <div class="links">
        <a id="doi" href="#" target="_blank">doi</a>
        <a id="lmu" href="#" target="_blank">lmu</a>
        <a id="sci" href="#" target="_blank">sci</a>
      </div>
    </div>

    <script>
        // doi regex from https://github.com/regexhq/doi-regex
        var doiRegex = new RegExp('(?:^' + '(10[.][0-9]{4,}(?:[.][0-9]+)*/(?:(?![%"#? ])\\S)+)' + '$)')

        function getDoi(string) {
            if (!string || !typeof string == "string") return false

            string = string.trim().toLowerCase()
                .replace('doi:', '').trim()
                .replace(/^http(s)?\:\/\//, '')
                .replace('dx.doi.org', '')
                .replace('doi.org', '')
                .replace('doi-org', '')
                .replace('.emedien.ub.uni-muenchen.de', '')
                .replace(/^\//, '')

            // http://dx.doi.org.emedien.ub.uni-muenchen.de/
            // http://dx.doi.org

            if (doiRegex.test(string)) return string
            return false
        }


        var input = document.getElementById("input")
        var a_doi = document.getElementById("doi")
        var a_lmu = document.getElementById("lmu")
        var a_sci = document.getElementById("sci")

        setTimeout(() => { input.focus() }, 0)


        function updateLinks() {
            let doi = getDoi(input.innerText)

            if (doi) {
                document.body.classList.remove("invalid")
                a_doi.href = "https://doi.org/" + doi
                a_lmu.href = "https://doi-org.emedien.ub.uni-muenchen.de/" + doi
                a_sci.href = "https://" + "sci" + "-" /* hello */+ "hub" + "." + "se" + "/" + doi

                window.history.replaceState({}, document.title, "/" + doi);
            } else {
                document.body.classList.add("invalid")
                a_doi.href = "javascript:void(0)"
                a_lmu.href = "javascript:void(0)"
                a_sci.href = "javascript:void(0)"
                window.history.replaceState({}, document.title, "/");
            }
      // doi regex from https://github.com/regexhq/doi-regex
      var doiRegex = new RegExp(
        "(?:^" + '(10[.][0-9]{4,}(?:[.][0-9]+)*/(?:(?![%"#? ])\\S)+)' + "$)"
      );

      function getDoi(string) {
        if (!string || !typeof string == "string") return false;

        string = string
          .trim()
          .toLowerCase()
          .replace("doi:", "")
          .trim()
          .replace(/^http(s)?\:\/\//, "")
          .replace("dx.doi.org", "")
          .replace("doi.org", "")
          .replace("doi-org", "")
          .replace(".emedien.ub.uni-muenchen.de", "")
          .replace(/^\//, "");

        // http://dx.doi.org.emedien.ub.uni-muenchen.de/
        // http://dx.doi.org

        if (doiRegex.test(string)) return string;
        return false;
      }

      var input = document.getElementById("input");
      var a_doi = document.getElementById("doi");
      var a_lmu = document.getElementById("lmu");
      var a_sci = document.getElementById("sci");

      setTimeout(() => {
        input.focus();
      }, 0);

      function updateLinks() {
        let doi = getDoi(input.innerText);

        if (doi) {
          document.body.classList.remove("invalid");
          a_doi.href = "https://doi.org/" + doi;
          a_lmu.href = "https://doi-org.emedien.ub.uni-muenchen.de/" + doi;
          a_sci.href =
            "https://" +
            "sci" +
            "-" /* this looks ugly because of prettier ... sigh */ +
            "hub" +
            "." +
            "se" +
            "/" +
            doi;

          window.history.replaceState({}, document.title, "/" + doi);
        } else {
          document.body.classList.add("invalid");
          a_doi.href = "javascript:void(0)";
          a_lmu.href = "javascript:void(0)";
          a_sci.href = "javascript:void(0)";
          window.history.replaceState({}, document.title, "/");
        }
      }

        input.addEventListener("input", updateLinks, false)
      input.addEventListener("input", updateLinks, false);


        var URLParameter = location.pathname.substring(1)
        if (URLParameter) {
            input.innerText = URLParameter
        }
        updateLinks()
      var URLParameter = location.pathname.substring(1);
      if (URLParameter) {
        input.innerText = URLParameter;
      }
      updateLinks();
    </script>
</body>

  </body>
</html>