Move notation plugin to separate file and use it in Analyze.vue (#38)

src/components/Analyze.vue

@@ -92,7 +92,7 @@
                 <item-name
                   :item="member"
                   :show-notation="false" />
-                ({{ jskos.notation(member) }})
+                (<span v-html="notationPlugin(jskos.notation(member), { item: member })" />)
                 <template #content>
                   <concept-details
                     :concept="member" />
@@ -155,6 +155,7 @@ import Pagination from "./Pagination.vue"
 import LoadingSpinner from "./LoadingSpinner.vue"
 
 import jskos from "jskos-tools"
+import notationPlugin from "../utils/notationPlugin.js"
 
 const inBrowser = typeof window !== "undefined"
 
@@ -303,6 +304,7 @@ export default {
         return result.memberList[result.memberList.length - 1] !== null
       },
       jskos,
+      notationPlugin,
     }
   },
 }

src/main.js

@@ -9,32 +9,10 @@ import "tippy.js/themes/light-border.css"
 import { followCursor } from "tippy.js"
 
 // jskos-vue
-import jskos from "jskos-tools"
 import "jskos-vue/dist/style.css"
 import { ItemName } from "jskos-vue"
-ItemName.addNotationPlugin((notation, { item }) => {
-  let fill = ""
-  // For DDC and SDNB only: fill number notation with trailing zeros
-  if (jskos.compare({
-    uri: "http://dewey.info/scheme/edition/e23/",
-    identifier: [
-      "http://bartoc.org/en/node/241",
-      "http://bartoc.org/en/node/18497",
-      "http://www.wikidata.org/entity/Q67011877",
-      "http://id.loc.gov/vocabulary/classSchemes/sdnb",
-      "http://uri.gbv.de/terminology/sdnb",
-    ],
-  }, item.inScheme && item.inScheme[0]) && !isNaN(parseInt(notation))) {
-    while (notation.length + fill.length < 3) {
-      fill += "0"
-    }
-  }
-  if (fill.length) {
-    // Using the shared `jskos-vue-text-lightGrey` CSS class
-    notation += `<span class='jskos-vue-text-lightGrey'>${fill}</span>`
-  }
-  return notation
-})
+import notationPlugin from "./utils/notationPlugin.js"
+ItemName.addNotationPlugin(notationPlugin)
 
 // SSR requires a fresh app instance per request, therefore we export a function
 // that creates a fresh app instance. If using Vuex, we'd also be creating a

src/utils/notationPlugin.js

@@ -0,0 +1,25 @@
+import jskos from "jskos-tools"
+
+export default (notation, { item }) => {
+  let fill = ""
+  // For DDC and SDNB only: fill number notation with trailing zeros
+  if (jskos.compare({
+    uri: "http://dewey.info/scheme/edition/e23/",
+    identifier: [
+      "http://bartoc.org/en/node/241",
+      "http://bartoc.org/en/node/18497",
+      "http://www.wikidata.org/entity/Q67011877",
+      "http://id.loc.gov/vocabulary/classSchemes/sdnb",
+      "http://uri.gbv.de/terminology/sdnb",
+    ],
+  }, item.inScheme && item.inScheme[0]) && !isNaN(parseInt(notation))) {
+    while (notation.length + fill.length < 3) {
+      fill += "0"
+    }
+  }
+  if (fill.length) {
+    // Using the shared `jskos-vue-text-lightGrey` CSS class
+    notation += `<span class='jskos-vue-text-lightGrey'>${fill}</span>`
+  }
+  return notation
+}