From c3f22ae36d2814761046b584ba079953ef1342aa Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Fri, 2 Jul 2021 22:32:23 +0200
Subject: [PATCH] [terms][inclusive] allow links in dictionaries

---
 components/InclusiveDictionary.vue | 12 ++++++------
 components/InclusiveSubmitForm.vue |  4 ++--
 components/LinkedText.vue          |  5 +++--
 components/LinkedTextMultiple.vue  | 13 +++++++++++++
 components/TermsDictionary.vue     | 18 +++++++++---------
 locale/pl/nouns/NounsNav.vue       |  6 +++++-
 plugins/hash.js                    | 11 +++++++++--
 7 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 components/LinkedTextMultiple.vue

diff --git a/components/InclusiveDictionary.vue b/components/InclusiveDictionary.vue
index d7862617c..46412cb40 100644
--- a/components/InclusiveDictionary.vue
+++ b/components/InclusiveDictionary.vue
@@ -51,7 +51,7 @@
             <template v-slot:row="s"><template v-if="s">
                 <td>
                     <ul class="list-untyled">
-                        <li v-for="w in s.el.insteadOf" class="text-strike">{{w}}</li>
+                        <li v-for="w in s.el.insteadOf" class="text-strike"><LinkedText :text="w" noicons/></li>
                     </ul>
 
                     <ul class="list-inline">
@@ -65,7 +65,7 @@
                     <small v-if="s.el.base && entries[s.el.base]">
                         <p><strong><T>nouns.edited</T>:</strong></p>
                         <ul class="list-untyled">
-                            <li v-for="w in entries[s.el.base].insteadOf" class="text-strike">{{w}}</li>
+                            <li v-for="w in entries[s.el.base].insteadOf" class="text-strike"><LinkedText :text="w" noicons/></li>
                         </ul>
 
                         <ul class="list-inline">
@@ -79,18 +79,18 @@
                 </td>
                 <td>
                     <ul class="list-untyled">
-                        <li v-for="w in s.el.say">{{w}}</li>
+                        <li v-for="w in s.el.say"><LinkedText :text="w" noicons/></li>
                     </ul>
 
                     <small v-if="s.el.base && entries[s.el.base]">
                         <p><strong><T>nouns.edited</T>:</strong></p>
                         <ul class="list-untyled">
-                            <li v-for="w in entries[s.el.base].say">{{w}}</li>
+                            <li v-for="w in entries[s.el.base].say"><LinkedText :text="w" noicons/></li>
                         </ul>
                     </small>
                 </td>
                 <td>
-                    <p v-for="p in s.el.because.split('\n\n')"><LinkedText :text="p"/></p>
+                    <p v-for="p in s.el.because.split('\n\n')"><LinkedText :text="p" noicons/></p>
 
                     <ul class="list-unstyled small">
                         <li v-for="link in s.el.links">
@@ -103,7 +103,7 @@
 
                     <small v-if="s.el.base && entries[s.el.base]">
                         <p><strong><T>nouns.edited</T>:</strong></p>
-                        <p v-for="p in entries[s.el.base].because.split('\n\n')"><LinkedText :text="p"/></p>
+                        <p v-for="p in entries[s.el.base].because.split('\n\n')"><LinkedText :text="p" noicons/></p>
 
                         <ul class="list-unstyled small">
                             <li v-for="link in entries[s.el.base].links">
diff --git a/components/InclusiveSubmitForm.vue b/components/InclusiveSubmitForm.vue
index 97838aeed..75b4cea31 100644
--- a/components/InclusiveSubmitForm.vue
+++ b/components/InclusiveSubmitForm.vue
@@ -33,10 +33,10 @@
                     <tbody>
                     <tr>
                         <td>
-                            <NounForm v-model="form.insteadOf"/>
+                            <NounForm v-model="form.insteadOf" maxlength="128"/>
                         </td>
                         <td>
-                            <NounForm v-model="form.say"/>
+                            <NounForm v-model="form.say" maxlength="128"/>
                         </td>
                         <td>
                             <textarea v-model="form.because" class="form-control form-control-sm" required rows="3"></textarea>
diff --git a/components/LinkedText.vue b/components/LinkedText.vue
index 2bfa2007e..986347628 100644
--- a/components/LinkedText.vue
+++ b/components/LinkedText.vue
@@ -6,6 +6,7 @@
         mixins: [ spelling ],
         props: {
             text: { required: true },
+            noicons: { type: Boolean },
         },
         render(h) {
             if (!this.text) {
@@ -74,7 +75,7 @@
                     linkBuffer += buffer;
                     buffer = '';
                     continue;
-                } else if (c === '[') {
+                } else if (c === '[' && !this.noicons) {
                     addChild();
                     if (isEscape) {
                         isEscape = false;
@@ -82,7 +83,7 @@
                         isIcon = true;
                         continue;
                     }
-                } else if (c === ']') {
+                } else if (c === ']' && !this.noicons) {
                     addChild();
                     if (isIcon) {
                         isIcon = false;
diff --git a/components/LinkedTextMultiple.vue b/components/LinkedTextMultiple.vue
new file mode 100644
index 000000000..1bcd28d49
--- /dev/null
+++ b/components/LinkedTextMultiple.vue
@@ -0,0 +1,13 @@
+<template>
+    <span><template v-for="(text, i) in texts"><LinkedText :text="text.trim()" :noicons="noicons"/><span v-if="i !== texts.length - 1">{{ glue }}</span></template></span>
+</template>
+
+<script>
+    export default {
+        props: {
+            texts: { required: true },
+            glue: { 'default': ', '},
+            noicons: { type: Boolean },
+        },
+    }
+</script>
diff --git a/components/TermsDictionary.vue b/components/TermsDictionary.vue
index 3375a4448..0f006e22a 100644
--- a/components/TermsDictionary.vue
+++ b/components/TermsDictionary.vue
@@ -32,9 +32,9 @@
             <template v-slot:row="s"><template v-if="s">
                 <td class="cell-wide">
                     <p>
-                        <strong>{{s.el.term.map(x => x.trim()).join(', ')}}</strong>
-                        <span v-if="s.el.original.length">({{s.el.original.map(x => x.trim()).join('; ')}})</span>
-                        – {{s.el.definition}}
+                        <strong><LinkedTextMultiple :texts="s.el.term" noicons/></strong>
+                        <span v-if="s.el.original.length">(<LinkedTextMultiple :texts="s.el.original" glue="; " noicons/>)</span>
+                        – <LinkedText :text="s.el.definition" noicons/>
                         <template v-if="s.el.category">
                             <br/>
                             <span class="badge bg-primary text-white">
@@ -52,14 +52,14 @@
                         <p><strong><T>nouns.edited</T>:</strong></p>
 
                         <p>
-                            <strong>{{s.el.term.join(', ')}}</strong>
-                            <span v-if="s.el.original.length">({{s.el.original.join('; ')}})</span>
-                            – {{s.el.definition}}
-                            <template v-if="s.el.category">
+                            <strong><LinkedTextMultiple :texts="entries[s.el.base].term" noicons/></strong>
+                            <span v-if="entries[s.el.base].original.length">(<LinkedTextMultiple :texts="entries[s.el.base].original" glue="; " noicons/>)</span>
+                            – <LinkedText :text="entries[s.el.base].definition" noicons/>
+                            <template v-if="entries[s.el.base].category">
                                 <br/>
                                 <span class="badge bg-primary text-white">
-                                {{s.el.category}}
-                            </span>
+                                    {{entries[s.el.base].category}}
+                                </span>
                             </template>
                         </p>
                     </div>
diff --git a/locale/pl/nouns/NounsNav.vue b/locale/pl/nouns/NounsNav.vue
index dcbcf8c02..7d069bb93 100644
--- a/locale/pl/nouns/NounsNav.vue
+++ b/locale/pl/nouns/NounsNav.vue
@@ -45,7 +45,11 @@
                 return `/${this.config.nouns.route}/${route}`;
             },
             isActiveRoute(route) {
-                return decodeURIComponent(this.$route.fullPath).replace(/\/$/, '') === this.buildRoute(route).replace(/\/$/, '');
+                let current = decodeURIComponent(this.$route.fullPath).replace(/\/$/, '');
+                if (current.includes('#')) {
+                    current = current.substring(0, current.indexOf('#'));
+                }
+                return current === this.buildRoute(route).replace(/\/$/, '');
             },
         },
     }
diff --git a/plugins/hash.js b/plugins/hash.js
index 91a4058c9..56e3ae7df 100644
--- a/plugins/hash.js
+++ b/plugins/hash.js
@@ -5,8 +5,8 @@ export default {
                 return;
             }
 
-            const anchor = decodeURIComponent(window.location.hash.substr(1));
-            setTimeout(_ => {
+            const doHandle = () => {
+                const anchor = decodeURIComponent(window.location.hash.substr(1));
                 const $anchor = document.getElementById(anchor);
                 if (checkAnchor && $anchor) {
                     $anchor.scrollIntoView();
@@ -15,6 +15,13 @@ export default {
                 } else if (anchor.startsWith(namespace + '/')) {
                     callback(anchor.substring(namespace.length + 1));
                 }
+            }
+
+            setTimeout(_ => {
+                doHandle();
+                window.addEventListener('hashchange', function() {
+                    doHandle();
+                }, false);
             }, 500);
         },
         setHash(namespace, value) {