diff --git a/mystyles.css b/mystyles.css index 46ace8e..9af9441 100644 --- a/mystyles.css +++ b/mystyles.css @@ -1,4 +1,4 @@ -.markdown-rendered pre .obsidian-embed-code-file { +.markdown-rendered pre .embed-code-file { position: absolute; top: 5px; left: 0px; @@ -18,7 +18,7 @@ top: 8px!important; } -.markdown-rendered div pre button.obsidian-markdown-code-edit { +.markdown-rendered div pre button.markdown-code-edit { display:none; margin: 6px; padding: 6px 8px; @@ -33,7 +33,7 @@ right: 110px; } -.markdown-rendered div pre:hover button.obsidian-markdown-code-edit { +.markdown-rendered div pre:hover button.markdown-code-edit { display: block; } @@ -41,13 +41,13 @@ display: block; } -.markdown-rendered div pre:hover button.obsidian-markdown-code-edit:hover { +.markdown-rendered div pre:hover button.markdown-code-edit:hover { box-shadow: var(--input-shadow); background-color: var(--background-modifier-hover); } -#embeded-code > pre > button.obsidian-markdown-code-refresh{ +#embeded-code > pre > button.markdown-code-refresh{ display:none; margin: 6px; padding: 6px 8px; @@ -62,17 +62,17 @@ right: 30px; } -#embeded-code > pre > button.obsidian-markdown-code-refresh > svg{ +#embeded-code > pre > button.markdown-code-refresh > svg{ fill:var(--text-muted); } -#embeded-code > pre:hover > button.obsidian-markdown-code-refresh { +#embeded-code > pre:hover > button.markdown-code-refresh { display: block; } -#embeded-code > pre:hover > button.obsidian-markdown-code-refresh:hover { +#embeded-code > pre:hover > button.markdown-code-refresh:hover { box-shadow: var(--input-shadow); background-color: var(--background-modifier-hover); } @@ -97,4 +97,16 @@ height: 6rem !important; } +.setting-elm { + min-width: 2.3em; + text-align: right; +} + +.dialog-height { + height: var(--dialog-height) +} +.btn-close-modal { + background: var(--modal-background); + z-index: 9999; +} \ No newline at end of file diff --git a/src/codeFilesSettingsTab.ts b/src/codeFilesSettingsTab.ts index 261c2b7..feee07b 100644 --- a/src/codeFilesSettingsTab.ts +++ b/src/codeFilesSettingsTab.ts @@ -52,8 +52,7 @@ export class CodeFilesSettingsTab extends PluginSettingTab { })) .settingEl.createDiv('', (el) => { fontSizeText = el; - el.style.minWidth = "2.3em"; - el.style.textAlign = "right"; + el.className = "setting-elm" el.innerText = " " + this.plugin.settings.fontSize.toString(); }); diff --git a/src/createCodeFileModal.ts b/src/createCodeFileModal.ts index e54f03e..fb895d1 100644 --- a/src/createCodeFileModal.ts +++ b/src/createCodeFileModal.ts @@ -60,13 +60,21 @@ export class CreateCodeFileModal extends Modal { async complete() { this.close(); console.log(this.parent); - const parent = (this.parent instanceof TFile ? this.parent.parent : this.parent) as TFolder; + let parent = null; + + if (this.parent instanceof TFile){ + parent = this.parent.parent as TFolder; + } + else { + parent = this.parent as TFolder; + } + const newPath = `${parent.path}/${this.fileName}.${this.fileExtension}`; const existingFile = this.app.vault.getAbstractFileByPath(normalizePath(newPath)); if (existingFile && existingFile instanceof TFile) { new Notice("File already exists"); const leaf = this.app.workspace.getLeaf(true); - leaf.openFile(existingFile as any); + leaf.openFile(existingFile); return; } diff --git a/src/fenceEditModal.ts b/src/fenceEditModal.ts index a6698b7..0b9208c 100644 --- a/src/fenceEditModal.ts +++ b/src/fenceEditModal.ts @@ -29,13 +29,12 @@ export class FenceEditModal extends Modal { "--dialog-width": "90vw", "--dialog-height": "90vh", }); - this.modalEl.style.height = "var(--dialog-height)"; + this.modalEl.classList.add("dialog-height") let closeButton = this.modalEl.querySelector( ".modal-close-button" ) - closeButton!.style.background = "var(--modal-background)"; - closeButton!.style.zIndex = "9999"; + this.modalEl.classList.add(".btn-close-modal") } onClose() { diff --git a/src/main.ts b/src/main.ts index d82203e..6596909 100644 --- a/src/main.ts +++ b/src/main.ts @@ -313,7 +313,7 @@ class EmbeddedCode{ } addModifyButton() { - let editButton = this.container.querySelector('.obsidian-markdown-code-edit') as HTMLButtonElement; + let editButton = this.container.querySelector('.markdown-code-edit') as HTMLButtonElement; if (editButton){ editButton.addEventListener('click', async () => { @@ -324,7 +324,7 @@ class EmbeddedCode{ new Notice(`Cannot locate Edit Button`); } - let refreshButton = this.container.querySelector('.obsidian-markdown-code-refresh') as HTMLButtonElement; + let refreshButton = this.container.querySelector('.markdown-code-refresh') as HTMLButtonElement; if (refreshButton){ refreshButton.addEventListener('click', async () => { @@ -384,18 +384,21 @@ class EmbeddedCode{ // Creates Title let titleElement = document.createElement("pre"); titleElement.appendText(title); - titleElement.className = "obsidian-embed-code-file"; + titleElement.className = "embed-code-file"; pre.prepend(titleElement); // Creates Modify Button let editButton = document.createElement("button"); editButton.appendText("Edit") - editButton.addClass("obsidian-markdown-code-edit"); + editButton.addClass("markdown-code-edit"); pre.append(editButton) let refreshButton = document.createElement("button"); - refreshButton.addClass("obsidian-markdown-code-refresh"); + refreshButton.addClass("markdown-code-refresh"); refreshButton.ariaLabel = "Refresh Content"; + + // cannot use createEl as svg is not accepted + // static image with no input refreshButton.innerHTML = ` `; @@ -448,8 +451,8 @@ class EmbeddedCode{ this.render().then(); - let htmlContent = element.innerHTML; - element.innerHTML = htmlContent; + //var htmlContent = element.innerHTML; + //element.innerHTML = htmlContent; } tryRefresh(space: Workspace, currentFile: string, codePath: string, interval: number, timeout: number) { @@ -463,7 +466,7 @@ class EmbeddedCode{ //Handle refreshing page space.containerEl.findAll("#embeded-code").forEach (element =>{ - let elementPath = element.find('.filepath')?.textContent; + var elementPath = element.find('.filepath')?.textContent; if (elementPath == codePath) { this.Refresh(space, element); @@ -614,19 +617,26 @@ export default class EmbedAndEditCode extends Plugin { let targetTop = targetRect.top; let targetBottom = targetRect.bottom; let targeRight = targetRect.right - node.style.position = "absolute"; - node.style.left = `${x + gep}px`; + + let left = `${x + gep}px`; + let top = ''; let spaceBelow = window.innerHeight - y - gep * 3; let spaceAbove = y - gep * 3; if (spaceBelow > h) { - node.style.top = `${targetBottom + gep}px`; + top = `${targetBottom + gep}px`; } else if (spaceAbove > h) { - node.style.top = `${targetTop - h - gep}px`; + top = `${targetTop - h - gep}px`; } else { - node.style.top = `${targetTop - (h / 2) - gep}px`; - node.style.left = `${targeRight + gep * 2}px`; + top = `${targetTop - (h / 2) - gep}px`; + left = `${targeRight + gep * 2}px`; } + + node.setCssProps({ + "postion": "absolution", + "left": left, + "top" : top + }) } contentEl.setCssProps({ @@ -657,6 +667,8 @@ export default class EmbedAndEditCode extends Plugin { } onunload() { + const openLeaves = this.app.workspace.getLeavesOfType(viewType); + openLeaves.forEach((leaf) => leaf.detach()); this.observer.disconnect(); }