obsidian#DropdownComponent TypeScript Examples

The following examples show how to use obsidian#DropdownComponent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: settings.ts From folder-note-core with MIT License

6 votes

constructor(public plugin: FNCore) {
    super(plugin.app);

    // Dropdowns
    this.fromOptsEl = new DropdownComponent(
      this.titleEl.createDiv({ text: "From:  " }),
    ).addOptions(LocDescMap);
    this.toOptsEl = new DropdownComponent(
      this.titleEl.createDiv({ text: "To:  " }),
    ).addOptions(LocDescMap);

    // Console output
    this.outputEl = new TextAreaComponent(this.contentEl)
      .setValue("Hello world")
      .setDisabled(true)
      .then((cb) => {
        cb.inputEl.style.width = "100%";
        cb.inputEl.rows = 10;
      });

    // Buttons
    this.buttonContainerEl = this.modalEl.createDiv({
      cls: "modal-button-container",
    });
    this.addButton((cb) =>
      cb.setButtonText("Check Conflicts").onClick(() => this.Convert(true)),
    );
    this.addButton((cb) =>
      cb
        .setButtonText("Convert")
        .setWarning()
        .onClick(() => this.Convert()),
    );
    this.addButton((cb) =>
      cb.setButtonText("Cancel").onClick(this.close.bind(this)),
    );
  }

Example #2

Source File: valueSelectModal.ts From obsidian_supercharged_links with MIT License

6 votes

buildInputEl(inputDiv: HTMLDivElement): void{
        const selectEl = new DropdownComponent(inputDiv)
        selectEl.selectEl.addClass("frontmatter-select")
        const values = this.settings.values
        selectEl.addOption("","--Empty--")
        Object.keys(values).forEach(key => {
            selectEl.addOption(values[key], values[key])
        });
        if(Object.values(values).includes(this.value)){
            selectEl.setValue(this.value)
        }
        FieldSetting.getValuesListFromNote(this.settings.valuesListNotePath, this.app).then(listNoteValues => {
            listNoteValues.forEach(value => selectEl.addOption(value, value))
            if(listNoteValues.includes(this.value)){
                selectEl.setValue(this.value)
            }
            selectEl.onChange(value => this.newValue = value != "--Empty--" ? value : "")
            const submitButton = new ButtonComponent(inputDiv)
            submitButton.setTooltip("Save")
            .setIcon("checkmark")
            .onClick(async () => {
                if(this.lineNumber == -1){
                    if(this.newValue || this.newValue == ""){
                        replaceValues(this.app, this.file, this.name, this.newValue)
                    }
                } else {
                    this.app.vault.read(this.file).then(result => {
                        let newContent: string[] = []
                        if(this.top){
                            newContent.push(`${this.name}${this.inFrontmatter ? ":" : "::"} ${selectEl.getValue()}`)
                            result.split("\n").forEach((line, _lineNumber) => newContent.push(line))
                        } else {
                            result.split("\n").forEach((line, _lineNumber) => {
                                newContent.push(line)
                                if(_lineNumber == this.lineNumber){
                                    newContent.push(`${this.name}${this.inFrontmatter ? ":" : "::"} ${selectEl.getValue()}`)
                                }
                            })
                        }
                        this.app.vault.modify(this.file, newContent.join('\n'))
                        this.close()
                    })
                }
                this.close()
            })
        })
        
    }

Example #3

Source File: macroChoiceBuilder.ts From quickadd with MIT License

6 votes

private addSelectMacroSearch() {
        const selectMacroDropdownContainer: HTMLDivElement = this.contentEl.createDiv('selectMacroDropdownContainer');
        const dropdown: DropdownComponent = new DropdownComponent(selectMacroDropdownContainer);

        let macroOptions: Record<string, string> = {};

        this.macros.forEach(macro => {
            macroOptions[macro.name] = macro.name;
        });

        dropdown.addOptions(macroOptions);
        dropdown.onChange(value => {
            this.selectMacro(value);
        });

        const selectedMacro: IMacro = this.macros.find(m => m.id === this.choice.macroId);
        if (selectedMacro) {
            dropdown.setValue(selectedMacro.name);
        } else {
            const value = dropdown.getValue();
            if (value) {
                this.selectMacro(value);
            }
        }
    }

Example #4

Source File: sectionContentModal.ts From obsidian_supercharged_links with MIT License

6 votes

onOpen(){
        this.titleEl.setText('Select the line before the field to add')
        const contentDiv = this.contentEl.createDiv()
        const inputDiv = contentDiv.createDiv()
        const inputEl = new TextAreaComponent(inputDiv)
        inputEl.inputEl.setAttr("cols", "50")
        inputEl.inputEl.setAttr("rows", "5")
        const footerDiv = contentDiv.createDiv({
            cls: "frontmatter-textarea-buttons"
        })
        const positionSelectorContainer = footerDiv.createDiv({
            cls: "position-selector-container"
        })
        const positionDropdown = new DropdownComponent(positionSelectorContainer)
        positionDropdown.addOption("1", "begining")
        positionDropdown.addOption("2", "end")
        positionDropdown.setValue("2")
        const saveButton = new ButtonComponent(footerDiv)
        saveButton
        .setIcon("checkmark")
        .onClick(() => {
            this.app.vault.read(this.file).then(result => {
                let newContent: string[] = []
                result.split("\n").forEach((line, lineNumber) =>{
                    newContent.push(line)
                    if(lineNumber == this.startLine && positionDropdown.getValue() == "1"){
                        newContent.push(inputEl.getValue())
                    }
                    if(lineNumber == this.startLine && positionDropdown.getValue() == "1"){
                        newContent.push(inputEl.getValue())
                    }
                })
            })
        })
        const cancelButton = new ExtraButtonComponent(footerDiv)
        cancelButton
        .setIcon("cross")
        .onClick(() => this.close())
    }

Example #5

Source File: fieldSelectModal.ts From obsidian_supercharged_links with MIT License

6 votes

onOpen(){
        this.titleEl.setText(`Insert field after > ${this.line.substring(0, 20)}${this.line.length>20 ? "..." : ""}`)
        const container = this.contentEl.createDiv()
        const settingsDropdownContainer = container.createDiv()
        const settingsSelector = new DropdownComponent(settingsDropdownContainer)
        settingsSelector.addOption("---", "Choose Field")
        settingsSelector.addOption("++New", "New")
        this.plugin.settings.presetFields.forEach(setting => {
            settingsSelector.addOption(setting.name, setting.name)
        })
        settingsSelector.onChange(value => {
            if(value == "++New"){
                const newFieldModal = new addNewFieldModal(this.plugin, this.lineNumber, this.file, this.inFrontmatter, this.top)
                newFieldModal.open()
                this.close()
            } else {
                const field = this.plugin.settings.presetFields.filter(_field => _field.name == value)[0]
                if(field.valuesListNotePath || (field.values && Object.keys(field.values).length > 0)){
                    if(field.isMulti){
                        const fieldModal = new valueMultiSelectModal(this.app, this.file, field.name, "", field, this.lineNumber, this.inFrontmatter, this.top)
                        fieldModal.titleEl.setText(`Select values for ${value}`)
                        fieldModal.open()
                    } else {
                        const fieldModal = new valueSelectModal(this.app, this.file, field.name, "", field, this.lineNumber, this.inFrontmatter, this.top)
                        fieldModal.titleEl.setText(`Select value for ${value}`)
                        fieldModal.open()
                    }
                } else {
                    const fieldModal = new valueTextInputModal(this.app, this.file, value, "", this.lineNumber, this.inFrontmatter, this.top)
                    fieldModal.titleEl.setText(`Enter value for ${value}`)
                    fieldModal.open()
                }
                this.close()
            }
        })
    }

Example #6

Source File: FileClassAttributeSelectModal.ts From obsidian_supercharged_links with MIT License

6 votes

onOpen(){
        this.titleEl.setText(`Select the field to update`)
        createFileClass(this.plugin, this.file.basename).then(fileClass => {
            this.titleEl.setText(`Select the field to update in ${fileClass.name}`)
            const selectContainer = this.contentEl.createDiv()
            const select = new DropdownComponent(selectContainer)
            select.addOption("select an attribute", "--select an attribute--")
            fileClass.attributes.forEach(attr => {
                select.addOption(attr.name, attr.name)
            })

            select.addOption("++newAttr++", "++Add a new attribute++")
            select.onChange((attrName) => {
                if(attrName == "++newAttr"){
                    const modal = new FileClassAttributeModal(this.plugin.app, fileClass)
                    modal.open()
                    this.close()
                } else {
                    const modal = new FileClassAttributeModal(this.plugin.app, fileClass, fileClass.attributes.filter(attr => attr.name == attrName)[0])
                    modal.open()
                    this.close()
                }
            })
        })
    }

Example #7

Source File: settings.ts From obsidian-citation-plugin with MIT License

6 votes

addValueChangeCallback<T extends HTMLTextAreaElement | HTMLInputElement>(
    component: AbstractTextComponent<T> | DropdownComponent,
    settingsKey: string,
    cb?: (value: string) => void,
  ): void {
    component.onChange(async (value) => {
      (this.plugin.settings as IIndexable)[settingsKey] = value;
      this.plugin.saveSettings().then(() => {
        if (cb) {
          cb(value);
        }
      });
    });
  }

Example #8

Source File: view.ts From obsidian-fantasy-calendar with MIT License

6 votes

async display() {
        this.contentEl.empty();
        this.contentEl.createEl("h4", { text: "Switch Calendars" });
        const dropdownEl = this.contentEl.createDiv(
            "fantasy-calendar-dropdown"
        );
        dropdownEl.createEl("label", {
            text: "Choose a Calendar"
        });
        const dropdown = new DropdownComponent(dropdownEl).onChange((v) => {
            this.calendar = this.plugin.data.calendars.find((c) => c.id == v);
        });
        dropdown
            .addOptions(
                Object.fromEntries(
                    this.plugin.data.calendars.map((c) => [c.id, c.name])
                )
            )
            .setValue(this.calendar ? this.calendar.id : null);
        const buttonEl = this.contentEl.createDiv(
            "fantasy-calendar-confirm-buttons"
        );
        new ButtonComponent(buttonEl)
            .setButtonText("Switch")
            .setCta()
            .onClick(() => {
                this.confirmed = true;
                this.close();
            });
        new ButtonComponent(buttonEl).setButtonText("Cancel").onClick(() => {
            this.close();
        });
    }

Example #9

Source File: settings.ts From folder-note-core with MIT License

5 votes

fromOptsEl: DropdownComponent;

Example #10

Source File: chooseSectionModal.ts From obsidian_supercharged_links with MIT License

5 votes

onOpen(){
        this.titleEl.setText("Add a field in this note after:")
        const inputDiv = this.contentEl.createDiv({
            cls: "frontmatter-modal-value"
        })
        const selectEl = new DropdownComponent(inputDiv)
        selectEl.selectEl.addClass("frontmatter-select")
        selectEl.addOption("","Select line")
        selectEl.addOption("top_0","top")
        this.app.vault.read(this.file).then(result => {
			let foreHeadText = false
			let frontmatterStart = false
			let frontmatterEnd = false
			let inFrontmatter = false
            result.split("\n").forEach((line, lineNumber) => {
                if(line!="---" && !foreHeadText && !frontmatterStart){
					foreHeadText = true
				}
				if(line == "---" && !foreHeadText){
					if(!frontmatterStart){
						frontmatterStart = true
						inFrontmatter = true
					} else if(!frontmatterEnd){
						frontmatterEnd = true
						inFrontmatter = false
					}
				}
				if(inFrontmatter){
                    selectEl.addOption(`frontmatter_${lineNumber}`, `${line.substring(0, 30)}${line.length > 30 ? "..." : ""}`)
                }else{
                    selectEl.addOption(`body_${lineNumber}`, `${line.substring(0, 30)}${line.length > 30 ? "..." : ""}`)
                }
            })
            selectEl.onChange(value => {
                const valueArray = selectEl.getValue().match(/(\w+)_(\d+)/)
                const position = valueArray[1]
                const lineNumber = Number(valueArray[2])
                const inFrontmatter = position == "frontmatter" ? true : false
                const top = position == "top" ? true : false
                const modal = new fieldSelectModal(this.plugin, this.file, lineNumber, result.split('\n')[lineNumber], inFrontmatter, top)
                this.close()
                modal.open()
            })
        })
    }

Example #11

Source File: SelectModal.ts From obsidian_supercharged_links with MIT License

5 votes

export default class SelectModal extends DropdownComponent {
    modals: Record<string, any>

    constructor(containerEl: HTMLElement){
        super(containerEl)
        this.modals = {}
    }
}

Example #12

Source File: settings.ts From obsidian-citation-plugin with MIT License

5 votes

buildValueInput<T extends HTMLTextAreaElement | HTMLInputElement>(
    component: AbstractTextComponent<T> | DropdownComponent,
    settingsKey: string,
    cb?: (value: string) => void,
  ): void {
    component.setValue((this.plugin.settings as IIndexable)[settingsKey]);
    this.addValueChangeCallback(component, settingsKey, cb);
  }

Example #13

Source File: event.ts From obsidian-fantasy-calendar with MIT License

5 votes

buildDateFields(el: HTMLElement, field = this.event.date) {
        el.empty();
        const dayEl = el.createDiv("fantasy-calendar-date-field");
        dayEl.createEl("label", { text: "Day" });
        const day = new TextComponent(dayEl)
            .setPlaceholder("Day")
            .setValue(`${field.day}`)
            .onChange((v) => {
                field.day = Number(v);
                this.buildDateString();
            });
        day.inputEl.setAttr("type", "number");

        const monthEl = el.createDiv("fantasy-calendar-date-field");
        monthEl.createEl("label", { text: "Month" });
        new DropdownComponent(monthEl)
            .addOptions(
                Object.fromEntries([
                    ["select", "Select Month"],
                    ...this.calendar.static.months.map((month) => [
                        month.name,
                        month.name
                    ])
                ])
            )
            .setValue(
                field.month != undefined
                    ? this.calendar.static.months[field.month].name
                    : "select"
            )
            .onChange((v) => {
                if (v === "select") field.month = null;
                const index = this.calendar.static.months.find(
                    (m) => m.name == v
                );
                field.month = this.calendar.static.months.indexOf(index);
                this.buildDateString();
            });

        const yearEl = el.createDiv("fantasy-calendar-date-field");
        yearEl.createEl("label", { text: "Year" });
        const year = new TextComponent(yearEl)
            .setPlaceholder("Year")
            .setValue(`${field.year}`)
            .onChange((v) => {
                if (!v || v == undefined) {
                    field.year = undefined;
                } else {
                    field.year = Number(v);
                }
                this.buildDateString();
            });
        year.inputEl.setAttr("type", "number");
    }

Example #14