feat(List/Matrix View): 💄 Add BC-active-note class to current note (F…

…ix #245)
SkepticMystic · Jan 8, 2022 · 83f8b55 · 83f8b55
1 parent 144a33c
commit 83f8b55
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/src/Components/Lists.svelte b/src/Components/Lists.svelte
@@ -10,6 +10,13 @@
   export let settings: BCSettings;
   export let matrixView: MatrixView;
   export let app: App;
+
+  const {
+    showImpliedRelations,
+    rlLeaf,
+    treatCurrNodeAsImpliedSibling,
+    showRelationType,
+  } = settings;
 </script>
 
 <div
@@ -24,11 +31,11 @@
       >
 
       {#each squares as square}
-        {#if square.realItems.length || (settings.showImpliedRelations && square.impliedItems.length)}
+        {#if square.realItems.length || (showImpliedRelations && square.impliedItems.length)}
           <details open class="BC-details">
             <summary>{square.field}</summary>
             {#if square.realItems.length}
-              {#if settings.showRelationType}
+              {#if showRelationType}
                 <h5 class="BC-header">Real</h5>
               {/if}
 
@@ -48,22 +55,27 @@
               </ol>
             {/if}
 
-            {#if settings.showImpliedRelations && square.impliedItems.length}
-              {#if settings.showRelationType}
+            {#if showImpliedRelations && square.impliedItems.length}
+              {#if showRelationType}
                 <h5 class="BC-header">Implied</h5>
               {/if}
 
               <ol start={square.realItems.length + 1}>
                 {#each square.impliedItems as impliedItem}
-                  <li class="BC-Implied">
+                  <li
+                    class="BC-Implied {treatCurrNodeAsImpliedSibling &&
+                    impliedItem.to === currFile.basename
+                      ? 'BC-active-note'
+                      : ''}"
+                  >
                     <div
                       class={impliedItem.cls}
                       on:click={async (e) =>
                         openOrSwitch(app, impliedItem.to, e)}
                       on:mouseover={(e) =>
                         hoverPreview(e, matrixView, impliedItem.to)}
                       aria-label={impliedItem.parent ?? ""}
-                      aria-label-position={settings.rlLeaf ? "left" : "right"}
+                      aria-label-position={rlLeaf ? "left" : "right"}
                     >
                       {impliedItem.alt ??
                         dropPathNDendron(impliedItem.to, settings)}

diff --git a/src/Components/Matrix.svelte b/src/Components/Matrix.svelte
@@ -10,6 +10,13 @@
   export let settings: BCSettings;
   export let matrixView: MatrixView;
   export let app: App;
+
+  const {
+    showImpliedRelations,
+    rlLeaf,
+    treatCurrNodeAsImpliedSibling,
+    showRelationType,
+  } = settings;
 </script>
 
 <div
@@ -20,12 +27,12 @@
   {#each filteredSquaresArr as squares}
     <div>
       {#each squares as square}
-        {#if square.realItems.length || (settings.showImpliedRelations && square.impliedItems.length)}
+        {#if square.realItems.length || (showImpliedRelations && square.impliedItems.length)}
           <div class="BC-Matrix-square">
             <div class="BC-Matrix-headers">
               <h4 class="BC-Matrix-header">{square.field}</h4>
 
-              {#if settings.showRelationType}
+              {#if showRelationType}
                 <h6 class="BC-Matrix-header">
                   {square.realItems.length ? "Real" : "Implied"}
                 </h6>
@@ -48,18 +55,23 @@
               </ol>
             {/if}
 
-            {#if settings.showImpliedRelations && square.impliedItems.length}
+            {#if showImpliedRelations && square.impliedItems.length}
               <div class="BC-Matrix-headers">
                 <h4 class="BC-Matrix-header" />
                 {#if square.impliedItems.length}
-                  {#if settings.showRelationType && square.realItems.length}
+                  {#if showRelationType && square.realItems.length}
                     <h6 class="BC-Matrix-header">Implied</h6>
                   {/if}
                 {/if}
               </div>
               <ol start={square.realItems.length + 1}>
                 {#each square.impliedItems as impliedItem}
-                  <li class="BC-Implied">
+                  <li
+                    class="BC-Implied {treatCurrNodeAsImpliedSibling &&
+                    impliedItem.to === currFile.basename
+                      ? 'BC-active-note'
+                      : ''}"
+                  >
                     <div
                       class={impliedItem.cls}
                       on:click={async (e) =>
@@ -69,7 +81,7 @@
                       aria-label={impliedItem.parent
                         ? "↑ " + impliedItem.parent
                         : ""}
-                      aria-label-position={settings.rlLeaf ? "left" : "right"}
+                      aria-label-position={rlLeaf ? "left" : "right"}
                     >
                       {impliedItem.alt ??
                         dropPathNDendron(impliedItem.to, settings)}