skel for basic europeana IIIF manifest search

9821bc6f · Loïs Poujade · 9821bc6f · 9821bc6f · 9821bc6f
Commit 9821bc6f authored 3 years ago by Loïs Poujade
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>test europeana search & iiif api</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <input id='search' type="text" />
+    <div id='results'></div>
+    <script src="main.js"></script>
+  </body>
+</html>
--- a/main.js
+++ b/main.js
+const api_key='ncuseliseyne'
+const search_url = new URL('https://api.europeana.eu/record/v2/search.json'); search_url.searchParams.append('wskey', api_key)
+const iiif_url = new URL('https://iiif.europeana.eu/presentation/RECORD_ID/manifest'); // iiif_url.searchParams.append('wskey', api_key)
+const viewers = {
+  'manifest.json': '',
+  'uv4': 'https://uv-v4.netlify.app/#?c=&m=&s=&cv=&manifest=',
+  'uv3': 'https://uv-v3.netlify.app/#?c=&m=&s=&cv=&manifest=',
+  'mirador': 'https://projectmirador.org/embed/?iiif-content=',
+  'local uv4': 'http://localhost:8080/#?c=&m=&s=&cv=&manifest=',
+  'validator': 'https://presentation-validator.iiif.io/validate?url='
+}
+
+var input_debounce_timer = null;
+
+function search_handler(text) {
+  if (text == '') return;
+  var url = new URL(search_url)
+  url.searchParams.append('query', text);
+  fetch(url)
+    .then(response => response.json())
+    .then(rs => {
+    console.debug(rs.items)
+    results.innerHTML = ''
+    rs.items.forEach(record => {
+      var title = document.createElement('h3')
+      title.innerHTML = record.title[0] + ' -- ' + record.dataProvider[0]
+      results.appendChild(title)
+
+      var p = document.createElement('p')
+
+      let manifest_uri = iiif_url.toString().replace('RECORD_ID', record.id)
+      for (var v in viewers) {
+        let a = document.createElement('a')
+        a.href = viewers[v] + manifest_uri
+        a.innerHTML = v
+        p.appendChild(a)
+      }
+      results.append(p)
+    })
+  })
+}
+
+window.onload = () => {
+  search.addEventListener('input', () => {
+    clearTimeout(input_debounce_timer);
+    input_debounce_timer = setTimeout(() => search_handler(search.value), 300);
+  })
+}
+
--- a/style.css
+++ b/style.css
+#results {
+  display: flex;
+  flex-direction: column;
+}
+
+p {
+  display: flex;
+  flex-direction: column;
+}