Merge pull request #83 from erichalldev/master

src/ui/components/uic-ref--parent.ts

@@ -1,6 +1,7 @@
 import { Keymap, MarkdownView } from 'obsidian';
 import SNWPlugin from 'src/main';
 import { Instance, ReferenceElement } from 'tippy.js';
+import { scrollResultsIntoView } from 'src/utils';
 import { getUIC_Ref_Area } from "./uic-ref-area";
 import { setPluginVariableUIC_RefItem } from './uic-ref-item';
 
@@ -27,6 +28,7 @@ export const getUIC_Hoverview = async (instance: Instance)=>{
     setTimeout( async () => {
         await setFileLinkHandlers(false, popoverEl);
     }, 500);
+    scrollResultsIntoView(popoverEl);
 }
 
 
@@ -43,7 +45,7 @@ const getUIC_SidePane = async (refType: string, key: string, filePath: string, l
     sidepaneEL.addClass("snw-sidepane-container");   
     sidepaneEL.addClass("search-result-container");
     sidepaneEL.append( (await getUIC_Ref_Area(refType, key, filePath, lineNu, false)) )
- 
+
     setTimeout( async () => {
         await setFileLinkHandlers(false, sidepaneEL);
     }, 500);

src/ui/components/uic-ref-item.ts

@@ -23,7 +23,7 @@ const getUIC_Ref_Item = async (ref: Link): Promise<HTMLElement>=> {
     itemEl.setAttribute("snw-data-file-name",   ref.sourceFile.path.replace(".md",""));
     itemEl.setAttribute("data-href",            ref.sourceFile.path.replace(".md",""));
 
-    const fileChuncksEl = await grabChunkOfFile(ref.sourceFile, ref.reference.position);
+    const fileChuncksEl = await grabChunkOfFile(ref);
 
     itemEl.appendChild( fileChuncksEl );
 
@@ -34,20 +34,19 @@ const getUIC_Ref_Item = async (ref: Link): Promise<HTMLElement>=> {
 /**
  * Grabs a block from a file, then runs it through a markdown render
  *
- * @param {TFile} file
- * @param {Pos} position
+ * @param {Link} ref
  * @return {*}  {Promise<string>}
  */
-const grabChunkOfFile = async (file: TFile, position: Pos): Promise<HTMLElement> =>{
-    const fileContents = await thePlugin.app.vault.cachedRead(file)
-    const cachedMetaData = thePlugin.app.metadataCache.getFileCache(file);
+const grabChunkOfFile = async (ref: Link): Promise<HTMLElement> =>{
+    const fileContents = await thePlugin.app.vault.cachedRead(ref.sourceFile)
+    const cachedMetaData = thePlugin.app.metadataCache.getFileCache(ref.sourceFile);
 
     let startPosition = 0;
-    let endPosition = 0;
+    let endPosition = 0; 
 
     for (let i = 0; i < cachedMetaData.sections.length; i++) {
         const sec = cachedMetaData.sections[i];
-        if(sec.position.start.offset<=position.start.offset && sec.position.end.offset>=position.end.offset) {
+        if(sec.position.start.offset <= ref.reference.position.start.offset && sec.position.end.offset >= ref.reference.position.end.offset) {
             startPosition = sec.position.start.offset;
             endPosition = sec.position.end.offset;
             break;
@@ -58,7 +57,12 @@ const grabChunkOfFile = async (file: TFile, position: Pos): Promise<HTMLElement>
 
     const el = createDiv();
     el.setAttribute("uic","uic");  //used to track if this is UIC element. 
-    await MarkdownRenderer.renderMarkdown(blockContents, el, file.path, thePlugin);
+    await MarkdownRenderer.renderMarkdown(blockContents, el, ref.sourceFile.path, thePlugin);
+
+    // add highlight to the link
+    const elems = el.querySelectorAll("*");
+    const res = Array.from(elems).find(v => v.textContent == ref.reference.displayText);
+    res.addClass('search-result-file-matched-text')
 
-    return el
+    return el    
 }

src/ui/sidebar-pane.ts

@@ -1,6 +1,7 @@
 // Sidepane used by SNW for displaying references
 
 import {ItemView, WorkspaceLeaf} from "obsidian";
+import { scrollResultsIntoView } from "src/utils";
 import {getReferencesCache} from "../indexer";
 import SNWPlugin from "../main";
 import { getUIC_SidePane } from "./components/uic-ref--parent";
@@ -46,6 +47,8 @@ export class SideBarPaneView extends ItemView {
         }
 
         this.containerEl.replaceChildren(await getUIC_SidePane(refType, key, filePath, lineNu))
+
+        scrollResultsIntoView(this.containerEl);
     }
 
     async onClose() { // Nothing to clean up.

src/utils.ts

@@ -0,0 +1,31 @@
+// pulled from here: https://github.com/slindberg/jquery-scrollparent/blob/master/jquery.scrollparent.js
+const getScrollParent = (element: HTMLElement, includeHidden: boolean): HTMLElement => {
+    let style = getComputedStyle(element);
+    const excludeStaticParent = style.position === "absolute";
+    const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+    if (style.position === "fixed") return document.body;
+    for (let parent = element; (parent = parent.parentElement);) {
+        style = getComputedStyle(parent);
+        if (excludeStaticParent && style.position === "static") {
+            continue;
+        }
+        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+    }
+
+    return document.body;
+}
+
+const scrollResultsIntoView = (resultContainerEl: HTMLElement): void => {
+    const searchResults = resultContainerEl.querySelectorAll(".search-result-file-matched-text");
+    for (const searchResult of Array.from(searchResults)) {
+        if (searchResult instanceof HTMLElement) {
+            const scrollParent = getScrollParent(searchResult, true) as HTMLElement;
+            if (scrollParent) {
+                scrollParent.scrollTop = searchResult.offsetTop - scrollParent.offsetTop - (scrollParent.offsetHeight / 2)
+            }
+        }
+    }
+}
+
+export { getScrollParent, scrollResultsIntoView}