highlights for del and add #74

karl-kraus · Oct 17, 2024 · 7c66aa7 · 7c66aa7
1 parent 7540802
commit 7c66aa7
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 15 deletions.
diff --git a/scss/style.scss b/scss/style.scss
@@ -1093,4 +1093,8 @@ wpn-time-line {
 
 .text-decoration-underline-dotted {
   text-decoration: underline dotted;
+}
+
+.border-red-500 {
+  border-color: rgb(255, 92, 92) !important;
 }
diff --git a/wpn-utils/wpn-typo-connections.ts b/wpn-utils/wpn-typo-connections.ts
@@ -0,0 +1,30 @@
+const connectElements = (query: string, container: boolean) => {
+    const elements = document.querySelectorAll<HTMLElement>(query);
+    // console.log([...elements]);
+    [...elements].map((el) => {
+        let targetId = el.id;
+        if (container) {
+            targetId = el.id.replace("container-", "");
+        } else {
+            targetId = "container-" + el.id;
+        }
+        if (targetId.length > 0) {
+
+            const target = document.getElementById(targetId);
+            if (target) {
+                el.onmouseover = () => {
+                    // console.log(`Connecting ${el.id} to ${targetId}`);
+                    target.classList.add(...["border", "border-red-500", "border-dotted"]);
+                    el.classList.add(...["border", "border-red-500", "border-dotted"]);
+                };
+                el.onmouseout = () => {
+                    target.classList.remove(...["border", "border-red-500", "border-dotted"]);
+                    el.classList.remove(...["border", "border-red-500", "border-dotted"]);
+                };
+            }
+        }
+    });
+};
+
+connectElements("div.connect", true);
+connectElements("span.connect", false);
diff --git a/xslt/editions_typo.xsl b/xslt/editions_typo.xsl
@@ -248,44 +248,44 @@
     <xsl:template match="tei:add[@rend|parent::tei:subst[@rend] and contains((@rend|parent::tei:subst/@rend), 'Left')]">
     <wpn-entity class="add entity" id="{@xml:id}"></wpn-entity>
     </xsl:template> -->
-    <xsl:template match="tei:del[not(parent::tei:subst[@rend='overwritten']) and not(parent::tei:restore)]">
-        <del class="entity" id="{@xml:id}"><xsl:apply-templates/></del>
-    </xsl:template>
     <xsl:template match="tei:del[parent::tei:subst[@rend='overwritten']]">
         <span class="del text-black-grey"><xsl:apply-templates/></span>
     </xsl:template>
+    <xsl:template match="tei:del[not(parent::tei:subst[@rend='overwritten']) and not(parent::tei:restore)]">
+        <del class="del connect entity" id="{@xml:id}"><xsl:apply-templates/></del>
+    </xsl:template>
+    <xsl:template match="tei:del[parent::tei:restore]">
+        <del class="add connect entity text-decoration-underline-dotted" id="{@xml:id}"><xsl:apply-templates/></del>
+    </xsl:template>
     <xsl:template match="tei:del[not(parent::tei:subst) and contains(@rend, 'Left')]" mode="render">
-        <div class="del {@rend} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
+        <div id="container-{@xml:id}" class="del connect {@rend} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
             <div><xsl:text>&#124; </xsl:text><xsl:apply-templates/></div>
         </div>
     </xsl:template>
     <xsl:template match="tei:del[not(parent::tei:subst) and contains(@rend, 'Right')]" mode="render">
-        <div class="del {@rend} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
+        <div id="container-{@xml:id}" class="del connect {@rend} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
             <div><xsl:text>&#124; </xsl:text><xsl:apply-templates/></div>
         </div>
     </xsl:template>
-    <xsl:template match="tei:del[parent::tei:restore]">
-        <del class="add entity text-decoration-underline-dotted" id="{@xml:id}"><xsl:apply-templates/></del>
-    </xsl:template>
     <xsl:template match="tei:add[not(@rendition) and not(parent::tei:subst[@rend='overwritten']) and not(parent::tei:restore)]">
-        <span class="add entity" id="{@xml:id}"></span>
+        <span class="add connect entity" id="{@xml:id}"></span>
     </xsl:template>
     <xsl:template match="tei:add[parent::tei:restore]">
-        <del class="add entity" id="{@xml:id}"><xsl:apply-templates/></del><span class="text-decoration-underline-dotted"> &#124; </span>
+        <del class="add connect entity" id="{@xml:id}"><xsl:apply-templates/></del><span class="text-decoration-underline-dotted"> &#124; </span>
     </xsl:template>
     <xsl:template match="tei:add[parent::tei:subst[@rend='overwritten']]">
-        <span class="entity ms-n1 me-n1 align-super" id="{@xml:id}"><xsl:apply-templates/></span>
+        <span class="add connect entity ms-n1 me-n1 align-super" id="{@xml:id}"><xsl:apply-templates/></span>
     </xsl:template>
     <xsl:template match="tei:add[not(parent::tei:subst)]">
-        <span class="add entity" id="{@xml:id}"><xsl:text> &#124; </xsl:text></span>
+        <span class="add connect entity" id="{@xml:id}"><xsl:text> &#124; </xsl:text></span>
     </xsl:template>
     <xsl:template match="tei:add[@rend|parent::tei:subst[@rend] and contains((if(parent::tei:subst[@rend])then(parent::tei:subst/@rend)else(@rend)), 'Right')]" mode="render">
-        <div class="add {if(parent::tei:subst)then(parent::tei:subst/@rend)else(@rend)} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
+        <div id="container-{@xml:id}" class="add connect {if(parent::tei:subst)then(parent::tei:subst/@rend)else(@rend)} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
             <div><xsl:text>&#124; </xsl:text><xsl:apply-templates/></div>
         </div>
     </xsl:template>
     <xsl:template match="tei:add[@rend|parent::tei:subst[@rend] and contains((if(parent::tei:subst[@rend])then(parent::tei:subst/@rend)else(@rend)), 'Left')]" mode="render">
-        <div class="add {if(parent::tei:subst)then(parent::tei:subst/@rend)else(@rend)} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
+        <div id="container-{@xml:id}" class="add connect {if(parent::tei:subst)then(parent::tei:subst/@rend)else(@rend)} {replace(@change,'#','')}" data-xmlid="{@xml:id}">
             <div><xsl:text>&#124; </xsl:text><xsl:apply-templates/></div>
         </div>
     </xsl:template>

diff --git a/xslt/partials/scripts.xsl b/xslt/partials/scripts.xsl
@@ -20,7 +20,7 @@
             <xsl:map-entry key="'eventindex_updated.xml'" select="('wpn-header','wpn-detail-view','wpn-reg-entry','wpn-timeline')"/>
             <xsl:map-entry key="'suche.xml'" select="('wpn-header','wpn-detail-view','init-typesense')"/>
             <xsl:for-each select="collection('../../data/editions?select=idPb*.xml')">
-                <xsl:map-entry key="tokenize(base-uri(current()),'/')[last()]" select="('wpn-header','wpn-page-view','wpn-entity', 'init-openseadragon', 'wpn-hf-height')"/>
+                <xsl:map-entry key="tokenize(base-uri(current()),'/')[last()]" select="('wpn-header','wpn-page-view','wpn-entity', 'init-openseadragon', 'wpn-hf-height', 'wpn-typo-connections')"/>
             </xsl:for-each>
         </xsl:map>
     </xsl:variable>