mirror of
https://github.com/caffa/Obsidian-Current-Folder-Note-Display-Plugin.git
synced 2026-07-22 09:50:27 +00:00
CSS improvement and new feature to show all outlines
This commit is contained in:
caffae
parent
7e4f3a092a
commit
64b41c9da8
2 changed files with 102 additions and 27 deletions
84
main.ts
84
main.ts
|
|
@ -9,6 +9,7 @@ interface CurrentFolderNotesDisplaySettings {
|
|||
prettyTitleCase: boolean;
|
||||
includeSubfolderNotes: boolean;
|
||||
includeCurrentFileOutline: boolean;
|
||||
includeAllFilesOutline: boolean;
|
||||
// iconUsed: string;
|
||||
}
|
||||
|
||||
|
|
@ -18,6 +19,7 @@ const DEFAULT_SETTINGS: Partial<CurrentFolderNotesDisplaySettings> = {
|
|||
prettyTitleCase: true,
|
||||
includeSubfolderNotes: false,
|
||||
includeCurrentFileOutline: true,
|
||||
includeAllFilesOutline: false,
|
||||
// iconUsed: 'folder',
|
||||
}
|
||||
|
||||
|
|
@ -191,20 +193,26 @@ export class CurrentFolderNotesDisplayView extends ItemView {
|
|||
|
||||
|
||||
// Function to create clickable headings
|
||||
createClickableHeadings(container: HTMLElement, currentFileContent: string, currentFilePath: string): void {
|
||||
createClickableHeadings(container: HTMLElement, currentFileContent: string, currentFilePath: string, addExtraHeadingCSS: boolean): void {
|
||||
const headings: RegExpMatchArray | null = currentFileContent.match(/^(#+)\s+(.*)$/gm);
|
||||
if (headings) {
|
||||
headings.forEach((heading: string) => {
|
||||
const headingLevelMatch: RegExpMatchArray | null = heading.match(/^(#+)/);
|
||||
if (headingLevelMatch) {
|
||||
const headingLevel: number = headingLevelMatch[0].length;
|
||||
// const headingLevel: number = headingLevelMatch[0].length;
|
||||
let headingText: string = heading.replace(/^(#+)\s+/, '');
|
||||
|
||||
// Use extractAlias to get the alias from the heading text
|
||||
headingText = this.extractAlias(headingText);
|
||||
// Add a right arrow symbol to the heading text
|
||||
let headingLabel = '→ ' + headingText;
|
||||
|
||||
const p: HTMLElement = container.createEl('p', { text: headingText });
|
||||
p.style.marginLeft = `${headingLevel * 10}px`;
|
||||
const p: HTMLElement = container.createEl('p', { text: headingLabel });
|
||||
// p.style.marginLeft = `${headingLevel * 10}px`;
|
||||
p.classList.add('basic-heading');
|
||||
if (addExtraHeadingCSS) {
|
||||
p.classList.add('extra-heading-style');
|
||||
}
|
||||
p.addEventListener('click', async () => {
|
||||
this.app.workspace.openLinkText('#' + headingText, currentFilePath, false);
|
||||
// do an escape to deselect the text
|
||||
|
|
@ -213,6 +221,17 @@ export class CurrentFolderNotesDisplayView extends ItemView {
|
|||
// selection.removeAllRanges();
|
||||
// }
|
||||
});
|
||||
|
||||
// Add hover effect
|
||||
p.onmouseover = () => {
|
||||
// console.log('Mouse over:', headingText);
|
||||
p.classList.add('hover-style-heading');
|
||||
}
|
||||
// Remove hover effect when not hovering
|
||||
p.onmouseout = () => {
|
||||
// console.log('Mouse out:', headingText);
|
||||
p.classList.remove('hover-style-heading');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -350,19 +369,10 @@ export class CurrentFolderNotesDisplayView extends ItemView {
|
|||
// filteredFiles.sort((a, b) => a.basename.localeCompare(b.basename));
|
||||
filteredFiles.sort((a, b) => sequenceWithPrefixOrLongest(a.basename) - sequenceWithPrefixOrLongest(b.basename));
|
||||
|
||||
// check for headings
|
||||
let MyHeadings = false;
|
||||
let currentFileContent = '';
|
||||
if (this.plugin.settings.includeCurrentFileOutline) {
|
||||
const currentFile = this.app.workspace.getActiveFile();
|
||||
if (currentFile) {
|
||||
currentFileContent = await this.app.vault.read(currentFile);
|
||||
MyHeadings = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Iterate over the files and add their names to the container
|
||||
filteredFiles.forEach(file => {
|
||||
for (const file of filteredFiles) {
|
||||
const p = container.createEl('p');
|
||||
const a = p.createEl('a', { text: file.basename });
|
||||
if (this.plugin.settings.prettyTitleCase) {
|
||||
|
|
@ -373,28 +383,46 @@ export class CurrentFolderNotesDisplayView extends ItemView {
|
|||
// If the file path matches the current file path, assign the 'current-file' class
|
||||
if (file.path === currentFilePath) {
|
||||
a.className += ' current-file';
|
||||
a.innerText = '> ' + a.innerText;
|
||||
|
||||
if (MyHeadings) {
|
||||
this.createClickableHeadings(container as HTMLElement, currentFileContent, currentFilePath);
|
||||
a.innerText = '\u2605 ' + a.innerText;
|
||||
}
|
||||
|
||||
// check for headings
|
||||
var MyHeadings = false;
|
||||
var ThisFileContent = '';
|
||||
// var currentFile = this.app.workspace.getActiveFile();
|
||||
if (this.plugin.settings.includeAllFilesOutline || this.plugin.settings.includeCurrentFileOutline) {
|
||||
if (file) {
|
||||
ThisFileContent = await this.app.vault.read(file);
|
||||
MyHeadings = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.plugin.settings.includeAllFilesOutline && file.path !== currentFilePath) {
|
||||
if (MyHeadings) {
|
||||
this.createClickableHeadings(container as HTMLElement, ThisFileContent, file.path, false);
|
||||
}
|
||||
}
|
||||
|
||||
if ((this.plugin.settings.includeAllFilesOutline || this.plugin.settings.includeCurrentFileOutline) && file.path === currentFilePath) {
|
||||
if (MyHeadings) {
|
||||
this.createClickableHeadings(container as HTMLElement, ThisFileContent, file.path, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// make pretty when hover
|
||||
a.onmouseover = () => {
|
||||
a.classList.add('hover-style');
|
||||
a.classList.add('hover-style-file');
|
||||
}
|
||||
// and remove when not hovering
|
||||
a.onmouseout = () => {
|
||||
a.classList.remove('hover-style');
|
||||
a.classList.remove('hover-style-file');
|
||||
}
|
||||
|
||||
// When a note is clicked, open it in the workspace
|
||||
a.addEventListener('click', () => {
|
||||
this.app.workspace.openLinkText(file.basename, parentFolderPath);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -475,6 +503,16 @@ class CurrentFolderNotesDisplaySettingTab extends PluginSettingTab {
|
|||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Include outline of all files in the current folder')
|
||||
.setDesc('Include outline of all files in the current folder')
|
||||
.addToggle(toggle => toggle
|
||||
.setValue(this.plugin.settings.includeAllFilesOutline)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.includeAllFilesOutline = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
// option to pick icon
|
||||
// let iconButton: HTMLElement; // Declare the iconButton variable
|
||||
|
||||
|
|
|
|||
45
styles.css
45
styles.css
|
|
@ -5,15 +5,52 @@
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
color: var(--text-normal);
|
||||
color: var(--text-small);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-small);
|
||||
font-size: var(--font-ui-medium);
|
||||
font-family: var(--font-interface-theme);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.current-file {
|
||||
color: var(--text-muted);
|
||||
color: var(--text-accent);
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em;
|
||||
background-color: var(--color-base-00);
|
||||
/* background-color: var(--text-selection); */
|
||||
/* background-color: var(--text-highlight-bg); */
|
||||
font-size: var(--font-ui-larger);
|
||||
/* font-family: var(--font-interface-theme); */
|
||||
font-weight: var(--font-bold)
|
||||
}
|
||||
|
||||
.hover-style {
|
||||
.basic-heading {
|
||||
/* color: var(--text-normal); */
|
||||
/* color: var(--italic-color); */
|
||||
/* Add a little indicator prepend */
|
||||
padding-left: 1em;
|
||||
padding-top: 0.1em;
|
||||
padding-bottom: 0.1em;
|
||||
font-size: var(--font-ui-small);
|
||||
/* font-family: var(--font-interface-theme); */
|
||||
|
||||
}
|
||||
|
||||
.extra-heading-style {
|
||||
color: var(--text-accent);
|
||||
padding-left: 1em;
|
||||
padding-top: 0.1em;
|
||||
padding-bottom: 0.1em;
|
||||
font-size: var(--font-ui-medium);
|
||||
/* background-color: var(--color-base-00); */
|
||||
/* font-family: var(--font-interface-theme); */
|
||||
}
|
||||
|
||||
.hover-style-file {
|
||||
background-color: var(--interactive-hover);
|
||||
}
|
||||
|
||||
p.hover-style-heading {
|
||||
/* color: var(--interactive-normal); */
|
||||
background-color: var(--interactive-hover);
|
||||
}
|
||||
Loading…
Reference in a new issue