fixed fragment links

factsmission · Dec 20, 2024 · bb45f8c · bb45f8c
1 parent 37d7258
commit bb45f8c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 85 deletions.
diff --git a/src/components/SynoMain.ts b/src/components/SynoMain.ts
@@ -132,7 +132,7 @@ export class SynoMain extends LitElement {
 
       this.names = [...this.names, {
         name,
-        open: openable && name.authorizedNames.length <= 1,
+        open: openable && name.authorizedNames.length <= 2,
         openable,
         homonym: !!sameName,
         orderFound: this.names.length,

diff --git a/src/components/SynoName.ts b/src/components/SynoName.ts
@@ -6,14 +6,12 @@ import type {
 } from "@plazi/synolib";
 import { distinct } from "@std/collections/distinct";
 import "./Icons.ts";
-import {
-  type SynoStatus,
-  SynoTreatment,
-} from "./SynoTreatment.ts";
+import { type SynoStatus, SynoTreatment } from "./SynoTreatment.ts";
 import "./WikidataButtons.ts";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
+import { authNameToID, nameToID } from "./utils.ts";
 
 const shortUrl = (url: string) =>
   url
@@ -57,11 +55,7 @@ export class SynoAuthName extends LitElement {
     authorities.delete(this.authorizedName.authority);
 
     return html`
-        <h3 id=${
-      this.authorizedName.colURI
-        ? encodeURIComponent(this.authorizedName.colURI)
-        : nothing
-    }>
+        <h3 id=${authNameToID(this.authorizedName)}>
           <i class="ditto">${this.authorizedName.displayName}</i>
           ${this.authorizedName.authority}
           ${
@@ -73,9 +67,7 @@ export class SynoAuthName extends LitElement {
     }
           ${
       this.authorizedName.taxonConceptURIs.map((tc) =>
-        html`<a class="taxon uri" id=${
-          encodeURIComponent(tc)
-        } href=${tc} target="_blank">${
+        html`<a class="taxon uri" href=${tc} target="_blank">${
           shortUrl(tc)
         }<s-icon icon="link"></s-icon></a>`
       )
@@ -131,17 +123,13 @@ export class SynoName extends LitElement {
 
     return html`
     <div class="header">
-      <h2 id=${
-      this.name.colURI ? encodeURIComponent(this.name.colURI) : nothing
-    }>
+      <h2 id=${nameToID(this.name)}>
         <i>${this.name.displayName}</i>
         <span class="rank">${this.name.kingdom || "Missing Kingdom"}</span>
         <span class="rank">${this.name.rank}</span>
     ${
       this.name.taxonNameURI
-        ? html`<a class="taxon uri" id=${
-          encodeURIComponent(this.name.taxonNameURI)
-        } href=${this.name.taxonNameURI} target="_blank">${
+        ? html`<a class="taxon uri" href=${this.name.taxonNameURI} target="_blank">${
           shortUrl(this.name.taxonNameURI)
         }<s-icon icon="link"></s-icon></a>`
         : nothing

diff --git a/src/components/SynoTreatment.ts b/src/components/SynoTreatment.ts
@@ -1,13 +1,15 @@
 import type {
   AuthorizedName,
   MaterialCitation,
+  Name,
   SynonymGroup,
   Treatment,
 } from "@plazi/synolib";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 import "./Icons.ts";
+import { authNameToID, nameToID } from "./utils.ts";
 
 export type SynoStatus = "def" | "aug" | "dpr" | "cite";
 
@@ -354,16 +356,7 @@ export class SynoTreatment extends LitElement {
                     "",
                   );
                   return until(
-                    this.synoGroup?.findName(n).then((nn) => {
-                      if ((nn as AuthorizedName).authority) {
-                        return html` <a class="taxon" href="#${short}">${
-                          nn.displayName + " " +
-                          (nn as AuthorizedName).authority
-                        }</a>`;
-                      } else {
-                        return html` <a class="taxon" href="#${short}">${nn.displayName}</a>`;
-                      }
-                    }),
+                    this.synoGroup?.findName(n).then(nameLink),
                     html` <a class="taxon uri">${short}</a>`,
                   );
                 })
@@ -383,17 +376,9 @@ export class SynoTreatment extends LitElement {
                       "http://taxon-name.plazi.org/id/",
                       "",
                     );
+
                     return until(
-                      this.synoGroup?.findName(n).then((nn) => {
-                        if ((nn as AuthorizedName).authority) {
-                          return html` <a class="taxon" href="#${short}">${
-                            nn.displayName + " " +
-                            (nn as AuthorizedName).authority
-                          }</a>`;
-                        } else {
-                          return html` <a class="taxon" href="#${short}">${nn.displayName}</a>`;
-                        }
-                      }),
+                      this.synoGroup?.findName(n).then(nameLink),
                       html` <a class="taxon uri">${short}</a>`,
                     );
                   },
@@ -410,17 +395,9 @@ export class SynoTreatment extends LitElement {
                     "http://taxon-concept.plazi.org/id/",
                     "",
                   );
+
                   return until(
-                    this.synoGroup?.findName(n).then((nn) => {
-                      if ((nn as AuthorizedName).authority) {
-                        return html` <a class="taxon" href="#${short}">${
-                          nn.displayName + " " +
-                          (nn as AuthorizedName).authority
-                        }</a>`;
-                      } else {
-                        return html` <a class="taxon" href="#${short}">${nn.displayName}</a>`;
-                      }
-                    }),
+                    this.synoGroup?.findName(n).then(nameLink),
                     html` <a class="taxon uri">${short}</a>`,
                   );
                 })
@@ -438,17 +415,9 @@ export class SynoTreatment extends LitElement {
                       "http://taxon-name.plazi.org/id/",
                       "",
                     );
+
                     return until(
-                      this.synoGroup?.findName(n).then((nn) => {
-                        if ((nn as AuthorizedName).authority) {
-                          return html` <a class="taxon" href="#${short}">${
-                            nn.displayName + " " +
-                            (nn as AuthorizedName).authority
-                          }</a>`;
-                        } else {
-                          return html` <a class="taxon" href="#${short}">${nn.displayName}</a>`;
-                        }
-                      }),
+                      this.synoGroup?.findName(n).then(nameLink),
                       html` <a class="taxon uri">${short}</a>`,
                     );
                   },
@@ -557,7 +526,7 @@ export class SynoTreatment extends LitElement {
 
 @customElement("syno-col")
 export class SynoColTreatment extends LitElement {
-  static override styles =  css`${styles} :host { border-radius: 4px; }`;
+  static override styles = css`${styles} :host { border-radius: 4px; }`;
 
   @property({ attribute: false })
   accessor synoGroup: SynonymGroup | null = null;
@@ -606,15 +575,7 @@ export class SynoColTreatment extends LitElement {
             <b class="blue">Accepted Name:</b>
             ${
       until(
-        this.synoGroup?.findName(this.acceptedColURI!)
-          .then((n) => {
-            const text = (n as AuthorizedName).authority
-              ? n.displayName + " " + (n as AuthorizedName).authority
-              : n.displayName;
-            return html`<a class="col" href="#${
-              encodeURIComponent(this.acceptedColURI!)
-            }" title="show name">${text}</a>`;
-          }),
+        this.synoGroup?.findName(this.acceptedColURI!).then(nameLink),
         html`<a target="_blank" href=${this
           .acceptedColURI!} class="col uri">${
           this.acceptedColURI?.replace(
@@ -630,3 +591,18 @@ export class SynoColTreatment extends LitElement {
     `;
   }
 }
+
+function nameLink(nn: Name | AuthorizedName) {
+  if ((nn as AuthorizedName).authority) {
+    return html` <a class="taxon" href="#${
+      authNameToID(nn as AuthorizedName)
+    }">${
+      nn.displayName + " " +
+      (nn as AuthorizedName).authority
+    }</a>`;
+  } else {
+    return html` <a class="taxon" href="#${
+      nameToID(nn as Name)
+    }">${nn.displayName}</a>`;
+  }
+}
diff --git a/src/components/Timeline.ts b/src/components/Timeline.ts
@@ -2,8 +2,8 @@ import type { Treatment } from "@plazi/synolib";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
-import { IconName } from "./Icons.ts";
 import { type NameState } from "../types.ts";
+import { authNameToID, nameToID } from "./utils.ts";
 
 type Cell = { def: number; aug: number; dpr: number; cite: number };
 
@@ -24,7 +24,7 @@ export class TimelineTreatment extends LitElement {
       display: grid;
       padding: 0 .25rem;
       min-width: .5rem;
-      min-height: 100%;
+      /* min-height: 100%; */
       font-size: 0.8rem;
       text-decoration: none;
     }
@@ -583,13 +583,7 @@ export class Timeline extends LitElement {
       this.names.map((n, index) =>
         html`<div class="name ${
           n.open ? "open" : "closed"
-        }"><div class="unauthorized"><a href=${
-          n.name.colURI
-            ? "#" + encodeURIComponent(n.name.colURI)
-            : n.name.taxonNameURI
-            ? "#" + encodeURIComponent(n.name.taxonNameURI)
-            : nothing
-        }>${
+        }"><div class="unauthorized"><a href="#${nameToID(n.name)}">${
           n.homonym
             ? (n.name.kingdom === "Animalia" || n.name.kingdom === "Plantae"
               ? html`<s-icon icon=${n.name.kingdom}></s-icon>`
@@ -610,13 +604,9 @@ export class Timeline extends LitElement {
             : nothing
         }</div>${
           n.name.authorizedNames.map((a) =>
-            html`<a class="authorized" href=${
-              a.colURI
-                ? "#" + encodeURIComponent(a.colURI)
-                : a.taxonConceptURI
-                ? "#" + encodeURIComponent(a.taxonConceptURI)
-                : nothing
-            }><span class="ditto">—“—</span> ${a.authority}</a>`
+            html`<a class="authorized" href="#${
+              authNameToID(a)
+            }"><span class="ditto">—“—</span> ${a.authority}</a>`
           )
         }</div>`
       )

diff --git a/src/components/utils.ts b/src/components/utils.ts
@@ -0,0 +1,9 @@
+import type { AuthorizedName, Name } from "@plazi/synolib";
+
+export function nameToID(name: Name): string {
+  return encodeURIComponent(`${name.kingdom}__${name.displayName}`);
+}
+
+export function authNameToID(authName: AuthorizedName): string {
+  return encodeURIComponent(`__${authName.displayName}_${authName.authority}`);
+}