src/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
  <title>INCLDE Demo</title>

  <script type="module" src="build/inclde.esm.js"></script>
  <script nomodule src="build/inclde.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/chota@latest">
  <style>
    .fit-width {
      margin-left: 0;
      margin-right: 0;
    }

    .card {
      height: 100%;
    }

    #preview pre {
      max-height: 90vh;
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>INCLDE Demonstrator</h1>
    <p>
      INCLDE (pronounced "/ɪnˈkluːd/", as "include") stands for <strong>Inc</strong>ludable <strong>L</strong>inked <strong>D</strong>ata <strong>E</strong>ditor.
      This page demonstrates the integration of the editor into another page.
      Imagine this is some research environment. It could be a digital lab notebook, a research data repository, or a research data management system.
      You are at a point where you would like to input some research metadata or data. The following component shall offer an easy environment to do so.
      You can try the editor right here. (Note: Clicking the green "save" button will trigger a download of the data as a JSON-LD file.)
      [<a href="https://github.com/kit-data-manager/INCLDE">Code & Documentation</a>]
      [<a href="https://www.npmjs.com/package/@kit-data-manager/inclde">NPM Package</a>]
    </p>
    <div id="slider-form">
      <input type="range" id="column-slider" min="0" max="6" value="6" step="1" class="hide" />
      <label for="column-slider">Show JSON-LD preview (not part of the editor)</label>
      <style>
        #slider-form {
          /* hiding slider until the preview event works properly */
          /*display: flex;*/
          display: none;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }
        #column-slider {
          width: 20rem;
          vertical-align: middle;
          margin: 0;
          padding: 0;
        }
      </style>
      <script>
        var columnClass = "col-0";
        let slider = document.getElementById("column-slider");
        slider.addEventListener("input", function() {
          let preview = document.getElementById("preview");
          let columnWidth = (this.attributes.max.value - this.value);
          let newColumnClass = "col-" + columnWidth;
          if (columnWidth === 0) {
            preview.style.display = "none";
            preview.classList.remove(columnClass);
          } else {
            preview.style.display = "block";
            preview.classList.remove(columnClass);
            preview.classList.add(newColumnClass);
          }
          columnClass = newColumnClass;
        });
      </script>
    </div>
  </div>
  <hr />
  <div class="row fit-width">
    <div id="editor" class="col card"></div>
    <div id="preview" class="card" style="display: none;">
      <p>Data preview</p>
      <pre id="output">JSON preview will appear here after changes!</pre>
    </div>
  </div>
  
  <script>
    const config = {
      "title": "INCLDE Demo Instance",
      "hideAttributesByDefault": false,
      "allowNewAttributes": true,
      "attributConfig": [
        {
          "onType": "*",
          "attributes": [
            {
              "name": "@id",
              "readOnly": true,
              "hidden": false
            }
          ]
        },
        {
          "onId": "https://adhesivewombat.bandcamp.com/track/8-bit-adventure",
          "attributes": [
            {
              "name": "http://schema.org/duration",
              "hidden": true
            }
          ]
        }
      ]
    }

    function downloadStringAsFile(data, filename, mimeType) {
      const blob = new Blob([data], { type: mimeType });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    }

    fetch("samples/bandcamp.jsonld")
      .then((response) => response.json())
      .then((data) => {
        console.log("Successfully fetched data", data);
        const editor = document.createElement("inclde-editor");
        editor.data = data;
        editor.config = config;
        document.getElementById("editor").appendChild(editor);
        let result = JSON.stringify(data, null, 2);
        document.getElementById("output").textContent = result
        editor.addEventListener('editorClosed', event => {
          console.log('event', event.detail);
          const result = JSON.stringify(event.detail, null, 2);
          downloadStringAsFile(result, "output.jsonld", "application/ld+json");
        })
        editor.addEventListener('dataUpdated', event => {
          console.log('event', event.detail);
          let result = JSON.stringify(event.detail, null, 2);
          document.getElementById("output").textContent = result
        })
      });
  </script>
</body>

</html>