Edit tags including adding Wikidata infobox

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": "stylelint-config-standard",
-  "ignoreFiles": ["**/*.js"],
+  "ignoreFiles": ["**/*.js", "**/*.png"],
   "rules": {
     "no-descending-specificity": null
   }

assets/css/app.less

@@ -139,18 +139,18 @@ form {
   background-color: #efefef;
   padding: 1rem;
 
-  p label { display: block; }
+  label { display: block; }
 
-  p.fields {
+  .fields {
     display: flex;
     align-items: start;
     margin-bottom: 0.4rem;
     flex-wrap: wrap;
+    .field.size-1 { flex: 1; }
+    .field.size-2 { flex: 2; }
+    .field.size-4 { flex: 4; }
+    .field.size-6 { flex: 6; }
   }
-  p .field.size-1 { flex: 1; }
-  p .field.size-2 { flex: 2; }
-  p .field.size-4 { flex: 4; }
-  p .field.size-6 { flex: 6; }
 
   textarea,
   input[type="text"],
@@ -166,6 +166,12 @@ form {
     box-sizing: border-box;
     height: 1.9rem;
   }
+  textarea { height: auto; }
+
+  input[disabled] {
+    background-color: #fdfafa;
+    cursor: not-allowed;
+  }
 
   input[type='submit'],
   a.button {

assets/css/tags.less

@@ -85,3 +85,33 @@
     color: black;
   }
 }
+
+#autoComplete_list {
+  top: auto;
+  left: auto;
+  right: auto;
+  margin: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+table.wikidata {
+  background-color: #fcfeff;
+  float: right;
+
+  ul {
+    margin: 0;
+    list-style-type: none;
+  }
+  th { text-align: left; }
+}
+
+.authority-control {
+  clear: both;
+  font-size: smaller;
+}
+
+hr.end {
+  clear: both;
+  visibility: hidden;
+}

assets/js/app.js

@@ -1,2 +1,3 @@
 import '../css/app.less';
 import './timezone-converter';
+import './tags';

assets/js/tags.js

@@ -0,0 +1,34 @@
+import AutoComplete from '@tarekraafat/autocomplete.js/dist/js/autoComplete.js';
+import '@tarekraafat/autocomplete.js/dist/css/autoComplete.css';
+
+const elementId = '#wikidata';
+
+// eslint-disable-next-line no-new
+new AutoComplete({
+    selector: elementId + '-label',
+    debounce: 500,
+    maxResults: 20,
+    data: {
+        src: async () => {
+            const input = document.querySelector(elementId + '-label');
+            input.disabled = true;
+            const source = await fetch(`/wikidata.json?q=${input.value}`);
+            const data = await source.json();
+            input.disabled = false;
+            return data;
+        },
+        key: ['title']
+    },
+    resultItem: {
+        content: (data, element) => {
+            element.innerHTML = `
+                <a href="https://www.wikidata.org/wiki/${data.value.value}">${data.value.value}</a>:
+                <strong>${data.value.title}</strong> &mdash;
+                <dfn>${data.value.description}</dfn>`;
+        }
+    },
+    onSelection: feedback => {
+        document.querySelector(elementId).value = feedback.selection.value.value;
+        document.querySelector(elementId + '-label').value = feedback.selection.value.title;
+    }
+});

package.json

@@ -1,12 +1,11 @@
 {
     "license": "GPL-3.0-or-later",
     "private": true,
-    "dependencies": {
-        "leaflet": "^1.7.1",
-        "normalize.css": "^8.0.1"
-    },
     "devDependencies": {
         "@symfony/webpack-encore": "^0.30.0",
+        "@tarekraafat/autocomplete.js": "^8.3.2",
+        "leaflet": "^1.7.1",
+        "normalize.css": "^8.0.1",
         "core-js": "^3.0.0",
         "eslint": "^7.9.0",
         "eslint-config-standard": "^14.1.1",