tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance preview button placement

This commit is contained in:
Oleg 2022-08-27 13:18:53 +03:00
parent d519dd627e
commit c38cf40cf5
1 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
main.ts
View File

@ -52,7 +52,7 @@ class BulkRenameSettingsTab extends PluginSettingTab {
display() { display() {
const { containerEl } = this; const { containerEl } = this;
containerEl.empty(); containerEl.empty();
containerEl.createEl('h2', { text: 'General Settings' }); containerEl.createEl('h2', { text: 'Bulk Rename - Settings' });
this.renderFileLocation(); this.renderFileLocation();
this.renderReplaceSymbol(); this.renderReplaceSymbol();
this.renderFilesAndPreview(); this.renderFilesAndPreview();
@ -61,10 +61,23 @@ class BulkRenameSettingsTab extends PluginSettingTab {
renderReplaceSymbol() { renderReplaceSymbol() {
const { settings } = this.plugin; const { settings } = this.plugin;
const desc = document.createDocumentFragment();
const button = document.createElement('button');
button.textContent = 'Preview';
button.className = 'mod-cta';
button.onclick = () => {
this.display();
};
desc.appendChild(button);
new Setting(this.containerEl) new Setting(this.containerEl)
.setName('Replace pattern') .setName('Symbols in existing file name')
.setDesc('Files in this folder will be available renamed.') .setDesc(desc)
.addText((textComponent) => { .addText((textComponent) => {
const previewLabel = createPreviewElement('Replacement symbols');
textComponent.inputEl.insertAdjacentElement('afterend', previewLabel);
textComponent.setValue(settings.existingSymbol); textComponent.setValue(settings.existingSymbol);
textComponent.setPlaceholder('existing symbols'); textComponent.setPlaceholder('existing symbols');
textComponent.onChange((newValue) => { textComponent.onChange((newValue) => {
@ -78,13 +91,7 @@ class BulkRenameSettingsTab extends PluginSettingTab {
textComponent.onChange((newValue) => { textComponent.onChange((newValue) => {
settings.replacePattern = newValue; settings.replacePattern = newValue;
this.plugin.saveSettings(); this.plugin.saveSettings();
this.calculateFiles() this.calculateFiles();
});
})
.addButton((button) => {
button.setButtonText('Preview');
button.onClick(() => {
this.display();
}); });
}); });
} }
@ -108,6 +115,7 @@ class BulkRenameSettingsTab extends PluginSettingTab {
.addButton((button) => { .addButton((button) => {
button.setButtonText('Refresh'); button.setButtonText('Refresh');
button.onClick(() => { button.onClick(() => {
this.calculateFiles();
this.display(); this.display();
}); });
}); });
@ -117,7 +125,7 @@ class BulkRenameSettingsTab extends PluginSettingTab {
let existingFilesTextArea: HTMLTextAreaElement; let existingFilesTextArea: HTMLTextAreaElement;
let replacedPreviewTextArea: HTMLTextAreaElement; let replacedPreviewTextArea: HTMLTextAreaElement;
new Setting(this.containerEl) new Setting(this.containerEl)
.setName('files within the folder') .setName('Files within the folder')
.setDesc(`Total Files: ${this.plugin.settings.fileNames.length}`) .setDesc(`Total Files: ${this.plugin.settings.fileNames.length}`)
.addTextArea((text) => { .addTextArea((text) => {
existingFilesTextArea = text.inputEl; existingFilesTextArea = text.inputEl;
@ -141,10 +149,22 @@ class BulkRenameSettingsTab extends PluginSettingTab {
} }
renderRenameFiles() { renderRenameFiles() {
let desc = document.createDocumentFragment();
desc.append(
'You are going to update all marked files',
desc.createEl('br'),
desc.createEl('b', {
text: 'Warning: ',
}),
'This plugin in ALPHA, make sure you checked all files in preview',
);
new Setting(this.containerEl) new Setting(this.containerEl)
.setName('Replace pattern') .setDesc(desc)
.setDesc('Files in this folder will be available renamed.') .setName('Replace patterns')
.addButton((button) => { .addButton((button) => {
button.buttonEl.style.width = '100%';
button.setTooltip('This action cannot be undone!');
button.setButtonText('Rename'); button.setButtonText('Rename');
button.onClick(() => { button.onClick(() => {
const { replacePattern, existingSymbol } = this.plugin.settings; const { replacePattern, existingSymbol } = this.plugin.settings;
@ -219,10 +239,10 @@ const replaceFilePath = (plugin: MyPlugin, file: TFile) => {
return file.path.replaceAll(existingSymbol, replacePattern); return file.path.replaceAll(existingSymbol, replacePattern);
}; };
const createPreviewElement = () => { const createPreviewElement = (textContent = '=> => => =>') => {
const previewLabel = window.document.createElement('span'); const previewLabel = window.document.createElement('span');
previewLabel.className = 'previewLabel'; previewLabel.className = 'previewLabel';
previewLabel.textContent = '=> => => =>'; previewLabel.textContent = textContent;
previewLabel.style.margin = '0 20px'; previewLabel.style.margin = '0 20px';
return previewLabel; return previewLabel;
}; };