Skip to content

Commit

Permalink
fix rare issue to get multiple div after toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@tim-hub
tim-hub committed Oct 2, 2023
1 parent 906b1ea commit 4a47c07
Showing 1 changed file with 53 additions and 51 deletions.
104 changes: 53 additions & 51 deletions src/ui/BibleReferenceSettingTab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,16 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
<iframe src="https://github.com/sponsors/tim-hub/button" title="Sponsor Obsidian Bible Reference" width="116" height="32px" style="margin-right: 2em"/>
`

this.containerEl.createEl('h1', { text: APP_NAMING.appName })
this.containerEl.createEl('h1', {text: APP_NAMING.appName})
this.setUpVersionSettingsAndVersionOptions()

this.containerEl.createEl('h2', { text: 'Verses Rendering' })
this.containerEl.createEl('h2', {text: 'Verses Rendering'})
this.setUpReferenceLinkPositionOptions()
this.setUpVerseFormatOptions()
this.setUpVerseNumberFormatOptions()
this.setUpCollapsible()
this.setUpExpertSettings()
this.containerEl.createEl('h2', { text: 'Others' })
this.containerEl.createEl('h2', {text: 'Others'})

this.setUpOptOutEventsOptions()

Expand All @@ -67,13 +67,14 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
`
})

// this initialisation order is important
this.expertSettingContainer = this.containerEl.createDiv()
if (this.plugin.settings.advancedSettings) {
this.displayExpertSettings()
}
EventStats.logUIOpen(
'settingsOpen',
{ key: 'open', value: 1 },
{key: 'open', value: 1},
this.plugin.settings.optOutToEvents
)
}
Expand All @@ -84,15 +85,16 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
if (this.plugin.settings.advancedSettings) {
this.displayExpertSettings()
} else {
this.expertSettingContainer && this.expertSettingContainer.empty()
this?.expertSettingContainer && this.expertSettingContainer.empty()
}
})
}

private displayExpertSettings(): void {
if (this.expertSettingContainer) {
this.expertSettingContainer.empty()
this.expertSettingContainer.createEl('hr')
this.expertSettingContainer.createEl('h2', { text: 'Expert Settings' })
this.expertSettingContainer.createEl('h2', {text: 'Expert Settings'})
this.expertSettingContainer.createEl('h5', {
text: 'Tagging and Linking Settings',
})
Expand All @@ -113,7 +115,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `book-tagging-${value}`, value: 1 },
{key: `book-tagging-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand All @@ -129,7 +131,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `chapter-tagging-${value}`, value: 1 },
{key: `chapter-tagging-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand Down Expand Up @@ -228,7 +230,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
new Notice(`Bible Reference - use Version ${value.toUpperCase()}`)
EventStats.logSettingChange(
'changeVersion',
{ key: value, value: 1 },
{key: value, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand All @@ -241,14 +243,14 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
.setDesc('Where to put the reference link of the Bible')
.addDropdown((dropdown: DropdownComponent) => {
BibleVerseReferenceLinkPositionCollection.forEach(
({ name, description }) => {
({name, description}) => {
dropdown.addOption(name, description)
}
)
dropdown
.setValue(
this.plugin.settings.referenceLinkPosition ??
BibleVerseReferenceLinkPosition.None
BibleVerseReferenceLinkPosition.None
)
.onChange(async (value) => {
this.plugin.settings.referenceLinkPosition =
Expand All @@ -258,7 +260,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
new Notice('Bible Reference Settings Updated ')
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `link-position-${value}`, value: 1 },
{key: `link-position-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand All @@ -272,7 +274,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
'Sets how to format the verses in Obsidian, either line by line or in 1 paragraph'
)
.addDropdown((dropdown: DropdownComponent) => {
BibleVerseFormatCollection.forEach(({ name, description }) => {
BibleVerseFormatCollection.forEach(({name, description}) => {
dropdown.addOption(name, description)
})
dropdown
Expand All @@ -286,7 +288,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
new Notice('Bible Verse Format Settings Updated')
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `verse-format-${value}`, value: 1 },
{key: `verse-format-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand All @@ -298,13 +300,13 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
.setName('Verse Number Formatting Options')
.setDesc('Sets how to format the verse numbers in Obsidian')
.addDropdown((dropdown: DropdownComponent) => {
BibleVerseNumberFormatCollection.forEach(({ name, description }) => {
BibleVerseNumberFormatCollection.forEach(({name, description}) => {
dropdown.addOption(name, description)
})
dropdown
.setValue(
this.plugin.settings.verseNumberFormatting ??
BibleVerseNumberFormat.Period
BibleVerseNumberFormat.Period
)
.onChange(async (value) => {
this.plugin.settings.verseNumberFormatting =
Expand All @@ -314,7 +316,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
new Notice('Bible Verse Format Number Settings Updated')
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `verse-number-format-${value}`, value: 1 },
{key: `verse-number-format-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand All @@ -333,7 +335,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `collapsible-${value}`, value: 1 },
{key: `collapsible-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
Expand All @@ -360,42 +362,42 @@ export class BibleReferenceSettingTab extends PluginSettingTab {

private setUpBookTagging(): void {
this.expertSettingContainer &&
new Setting(this.expertSettingContainer)
.setName('Add a Book Tag')
.setDesc('Add a hidden book tag at bottom, for example #John')
.addToggle((toggle) =>
toggle
.setValue(!!this.plugin.settings?.bookTagging)
.onChange(async (value) => {
this.plugin.settings.bookTagging = value
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `book-tagging-${value}`, value: 1 },
this.plugin.settings.optOutToEvents
)
})
)
new Setting(this.expertSettingContainer)
.setName('Add a Book Tag')
.setDesc('Add a hidden book tag at bottom, for example #John')
.addToggle((toggle) =>
toggle
.setValue(!!this.plugin.settings?.bookTagging)
.onChange(async (value) => {
this.plugin.settings.bookTagging = value
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{key: `book-tagging-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
)
}

private setUpChapterTagging(): void {
this.expertSettingContainer &&
new Setting(this.expertSettingContainer)
.setName('Add a Chapter Tag')
.setDesc('Add a hidden chapter tag at bottom, for example #John1')
.addToggle((toggle) =>
toggle
.setValue(!!this.plugin.settings?.chapterTagging)
.onChange(async (value) => {
this.plugin.settings.chapterTagging = value
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{ key: `chapter-tagging-${value}`, value: 1 },
this.plugin.settings.optOutToEvents
)
})
)
new Setting(this.expertSettingContainer)
.setName('Add a Chapter Tag')
.setDesc('Add a hidden chapter tag at bottom, for example #John1')
.addToggle((toggle) =>
toggle
.setValue(!!this.plugin.settings?.chapterTagging)
.onChange(async (value) => {
this.plugin.settings.chapterTagging = value
await this.plugin.saveSettings()
EventStats.logSettingChange(
'changeVerseFormatting',
{key: `chapter-tagging-${value}`, value: 1},
this.plugin.settings.optOutToEvents
)
})
)
}

private setUpOptOutEventsOptions(): void {
Expand All @@ -410,7 +412,7 @@ export class BibleReferenceSettingTab extends PluginSettingTab {
.onChange(async (value) => {
EventStats.logSettingChange(
'others',
{ key: `opt-${value ? 'out' : 'in'}`, value: 1 },
{key: `opt-${value ? 'out' : 'in'}`, value: 1},
this.plugin.settings.optOutToEvents
)
this.plugin.settings.optOutToEvents = value
Expand Down

0 comments on commit 4a47c07

Please sign in to comment.