contour
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
previewer.html
text/html

Download raw (2.4 KB)

<html>
  <head>
    <style>
      body {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
        height: 100%;
      }

      input { border: 1px solid; }
      /* img { transform: rotate(90deg);} */
      .controls {
        flex: 0 0 500px;
        display: flex;
        flex-direction: column;
        padding: 10px;
      }

      .controls button {
        flex: 0 0 auto;
      }

      .controls textarea {
        flex: 1 0 auto;
      }

      .hidden {
        display: none;
      }

      #preview {
        flex: 1 0 auto;
        /* transform: rotate(-90deg); */
        /* transform-origin: top left; */
        object-fit: contain;
        align-content: middle center;
      }

      #error {
        flex: 1 0 auto;
        font-family: monospace;
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <img id="preview">
    <section id="error"></section>
    <section class="controls">
      <input type="button" id="generate" value="generate">
      <textarea id="mp"></textarea>
    </section>
    <script>
      var button = document.getElementById('generate'),
          mpfield = document.getElementById('mp'),
          preview = document.getElementById('preview'),
          error = document.getElementById('error');


      function showPreview (src) {
        error.classList.add('hidden');
        preview.classList.remove('hidden');

        preview.src = src;
      }

      function showError (msg) {
        preview.classList.add('hidden');
        error.classList.remove('hidden');

        var wrapped = document.createElement('pre');
        wrapped.appendChild(document.createTextNode(msg));
        while (error.hasChildNodes()) {
          error.removeChild(error.lastChild);
        }
        error.appendChild(wrapped);
      }

      button.addEventListener('click', function () {
        var data = new FormData();
        data.append('mp', mpfield.value);
        
        properties = {
          method: 'POST',
          body: data
        }

        fetch('http://localhost:5556/svg/generate', properties)
          .then((response) => {
            if (response.status === 200){
              response.blob()
                .then(blob => showPreview(URL.createObjectURL(blob)));
            } else {
              response.text()
                .then(showError);
            }
          });
      });
    </script>
  </body>
</html>