chore: update examples

subugoe · Jun 11, 2024 · 9561b1e · 9561b1e
1 parent 96774b2
commit 9561b1e
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 31 deletions.
diff --git a/examples/ahiqar-arabic-karshuni.html b/examples/ahiqar-arabic-karshuni.html
@@ -14,7 +14,7 @@
   continue.</strong></noscript>
 <header>
   <a class="home" href="./">TIDO</a>
-  <span>Other examples:</span>
+  <span>Examples:</span>
   <nav>
     <select id="nav-select">
       <option disabled selected hidden>Please select...</option>
@@ -28,16 +28,16 @@
 <script src="dist/tido.js"></script>
 <script>
 window.addEventListener('load', function () {
-
-  const path = window.location.pathname
   const select = document.getElementById('nav-select');
-  select.value = '.' + path
+  const pathArr = window.location.pathname.split('/')
+
+  select.value = './' + pathArr[pathArr.length - 1]
 
   select.onchange = function (event) {
     window.location = event.target.value
   }
 
-  window.tido = new window.Tido({
+  const tido = new Tido({
     "collection": "https://api.dev.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/arabic-karshuni/collection.json",
     colors: {
       primary: "#1a3771"

diff --git a/examples/ahiqar-syriac.html b/examples/ahiqar-syriac.html
@@ -15,7 +15,7 @@
   continue.</strong></noscript>
 <header>
   <a class="home" href="./">TIDO</a>
-  <span>Other examples:</span>
+  <span>Examples:</span>
   <nav>
     <select id="nav-select">
       <option disabled selected hidden>Please select...</option>
@@ -29,15 +29,16 @@
 <script src="dist/tido.js"></script>
 <script>
 window.addEventListener('load', function () {
-  const path = window.location.pathname
   const select = document.getElementById('nav-select');
-  select.value = '.' + path
+  const pathArr = window.location.pathname.split('/')
+
+  select.value = './' + pathArr[pathArr.length - 1]
 
   select.onchange = function (event) {
     window.location = event.target.value
   }
 
-  window.tido = new window.Tido({
+  const tido = new Tido({
     "collection": "https://api.dev.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/syriac/collection.json",
     "labels": {
       "item": "Sheet",

diff --git a/examples/gfl.html b/examples/gfl.html
@@ -15,7 +15,7 @@
   continue.</strong></noscript>
 <header>
   <a class="home" href="./">TIDO</a>
-  <span>Other examples:</span>
+  <span>Examples:</span>
   <nav>
     <select id="nav-select">
       <option disabled selected hidden>Please select...</option>
@@ -27,18 +27,18 @@
 </header>
 <div id="app"></div>
 <script src="dist/tido.js"></script>
-<script src="config-menu/config-menu.js"></script>
 <script>
-  const path = window.location.pathname
   const select = document.getElementById('nav-select');
-  select.value = '.' + path
+  const pathArr = window.location.pathname.split('/')
+
+  select.value = './' + pathArr[pathArr.length - 1]
 
   select.onchange = function (event) {
     window.location = event.target.value
   }
 
   window.addEventListener('load', function () {
-    window.tido = new window.Tido({
+    const tido = new Tido({
       manifest: "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/textapi/Z_1822-02-20_k/manifest.json",
       labels: {
         item: "Seite",

diff --git a/examples/index.html b/examples/index.html
@@ -17,16 +17,18 @@
 <header>
   <a class="home" href="./">TIDO</a>
   <div class="input-container">
-    <input id="url-input" type="text" placeholder="Enter your manifest or collection URL here...">
-    <button onclick="load()">Load</button>
+    <form onsubmit="load(event)">
+    <input id="url-input" type="text" autocomplete="on" placeholder="Enter your manifest or collection URL here...">
+    <button type="submit">Load</button>
+    </form>
   </div>
   <span>Other examples:</span>
   <nav>
     <select id="nav-select">
       <option disabled selected hidden>Please select...</option>
       <option value="./ahiqar-syriac.html">Ahiqar Syriac</option>
       <option value="./ahiqar-arabic-karshuni.html">Ahiqar Arabic-Karshuni</option>
-      <option value="./gfl.html">GFL</option>
+      <option value="./gfl.html">Goethes Farbenlehre in Berlin</option>
     </select>
   </nav>
 </header>
@@ -39,6 +41,7 @@ <h1>Welcome to the preview website for the TIDO Viewer.</h1>
 </div>
 <script src="dist/tido.js"></script>
 <script>
+  let tido;
   const manifest = new URLSearchParams(window.location.search).get('manifest')
   const collection = new URLSearchParams(window.location.search).get('collection')
 
@@ -48,7 +51,7 @@ <h1>Welcome to the preview website for the TIDO Viewer.</h1>
       ...(collection ? { collection } : {}),
     }
 
-    window.tido = new window.Tido(config)
+    tido = new Tido(config)
   }
 
   const select = document.getElementById('nav-select');
@@ -57,24 +60,30 @@ <h1>Welcome to the preview website for the TIDO Viewer.</h1>
   }
 
 
-  function load() {
+  function load(event) {
+    event.preventDefault()
     const input = document.getElementById('url-input')
 
     const isManifest = input.value.includes('manifest.json')
     const isCollection = input.value.includes('collection.json')
 
     if (!isManifest && !isCollection) return
 
-    window.tido = new window.Tido({
-      manifest: input.value
-    })
+    const url = new URL(window.location)
 
-    const params = new URLSearchParams(window.location.search)
+    if (isManifest) url.searchParams.set('manifest', input.value)
+    if (isCollection) url.searchParams.set('collection', input.value)
 
-    if (isManifest) params.set('manifest', input.value)
-    if (isCollection) params.set('collection', input.value)
+    window.history.pushState(null, null, url)
 
-    window.history.pushState(null, null, params)
+    document.getElementById('app').innerHTML = ''
+    tido = null
+
+    setTimeout(() => {
+      tido = new Tido({
+        manifest: input.value
+      })
+    }, 200)
   }
 </script>
 </body>

diff --git a/examples/style.css b/examples/style.css
@@ -31,17 +31,23 @@ header nav {
   display: flex;
 }
 
+header form {
+  flex: 1;
+  display: flex;
+}
+
 header .input-container {
-  position: relative;
-  margin-right: 48px;
   flex: 1;
   display: flex;
+  margin-right: 48px;
+  position: relative;
+  display: flex;
   overflow: hidden;
   border: 1px solid #ccc;
   border-radius: 6px;
 }
 
-header .input-container:has(> #url-input:focus-visible),
+header .input-container:has(#url-input:focus-visible),
 header select:focus-visible,
 header .input-container button:focus-visible,
 .home:focus-visible {
@@ -61,6 +67,8 @@ header #url-input::placeholder {
   font-weight: 300;
 }
 
+
+
 header .input-container button {
   all: unset;
   position: absolute;
@@ -73,7 +81,7 @@ header .input-container button {
 }
 
 header .input-container button:hover {
-  background: #dedede;
+  background: #eee;
 }
 
 header select {
@@ -83,6 +91,7 @@ header select {
   border-radius: 6px;
   color: #666;
   font-size: 16px;
+  cursor: pointer;
 }
 
 header > span {

diff --git a/src/stores/config.ts b/src/stores/config.ts
@@ -161,7 +161,7 @@ import { i18n } from '@/i18n';
         },
       };
 
-     // Getters ('Setup Pinia' computed())
+      // Getters ('Setup Pinia' computed())
       const activeContentType = computed(() => {
        const contentConnectorId = 4;
        const panelIndex = config.value.panels.findIndex(({ views }) => views.find(({ connector }) => contentConnectorId === connector.id));