chore(bootstrap): import Bootstrap modules

This commit is contained in:
Panagiotis Papadopoulos 2025-02-21 20:41:00 +01:00
parent fc6b9e00bc
commit ba3599911f
18 changed files with 44 additions and 26 deletions

View File

@ -7,6 +7,7 @@ import ws from "../../services/ws.js";
import appContext from "../../components/app_context.js";
import openService from "../../services/open.js";
import utils from "../../services/utils.js";
import { Dropdown } from "bootstrap";
const TPL = `
<div class="dropdown attachment-actions">
@ -91,7 +92,7 @@ export default class AttachmentActionsWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle());
this.$uploadNewRevisionInput = this.$widget.find(".attachment-upload-new-revision-input");

View File

@ -7,6 +7,7 @@ import appContext from "../../components/app_context.js";
import RightDropdownButtonWidget from "./right_dropdown_button.js";
import toastService from "../../services/toast.js";
import options from "../../services/options.js";
import { Dropdown } from "bootstrap";
const MONTHS = [
t("calendar.january"),
@ -84,7 +85,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
// Don't trigger dropdownShown() at widget level when the month selection dropdown is shown, since it would cause a redundant refresh.
e.stopPropagation();
});
this.monthDropdown = bootstrap.Dropdown.getOrCreateInstance(this.$monthSelect);
this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect);
this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => {
this.date.setMonth(e.target.dataset.value);
this.createMonth();

View File

@ -1,4 +1,5 @@
import BasicWidget from "../basic_widget.js";
import { Tooltip, Dropdown } from "bootstrap";
const TPL = `
<div class="dropdown right-dropdown-widget dropend">
@ -28,10 +29,10 @@ export default class RightDropdownButtonWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$dropdownMenu = this.$widget.find(".dropdown-menu");
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
this.tooltip = new bootstrap.Tooltip(this.$tooltip, {
this.tooltip = new Tooltip(this.$tooltip, {
placement: this.settings.titlePlacement,
fallbackPlacements: [this.settings.titlePlacement]
});

View File

@ -6,6 +6,7 @@ import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";
import appContext from "../../components/app_context.js";
import { t } from "../../services/i18n.js";
import { Modal } from "bootstrap";
let branchId;
@ -39,7 +40,7 @@ const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1"
export default class BranchPrefixDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".branch-prefix-form");
this.$treePrefixInput = this.$widget.find(".branch-prefix-input");
this.$noteTitle = this.$widget.find(".branch-prefix-note-title");

View File

@ -4,6 +4,7 @@ import importService from "../../services/import.js";
import options from "../../services/options.js";
import BasicWidget from "../basic_widget.js";
import { t } from "../../services/i18n.js";
import { Modal, Tooltip } from "bootstrap";
const TPL = `
<div class="import-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@ -86,7 +87,7 @@ export default class ImportDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".import-form");
this.$noteTitle = this.$widget.find(".import-note-title");
@ -117,7 +118,7 @@ export default class ImportDialog extends BasicWidget {
});
let _ = [...this.$widget.find('[data-bs-toggle="tooltip"]')].forEach((element) => {
bootstrap.Tooltip.getOrCreateInstance(element, {
Tooltip.getOrCreateInstance(element, {
html: true
});
});

View File

@ -4,6 +4,7 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
import utils from "../../services/utils.js";
import froca from "../../services/froca.js";
import BasicWidget from "../basic_widget.js";
import { Modal } from "bootstrap";
const TPL = `
<div class="include-note-dialog modal mx-auto" tabindex="-1" role="dialog">
@ -54,7 +55,7 @@ const TPL = `
export default class IncludeNoteDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".include-note-form");
this.$autoComplete = this.$widget.find(".include-note-autocomplete");
this.$form.on("submit", () => {

View File

@ -1,6 +1,7 @@
import { t } from "../../services/i18n.js";
import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";
import { Modal } from "bootstrap";
const TPL = `
<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
@ -30,7 +31,7 @@ export default class InfoDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$infoContent = this.$widget.find(".info-dialog-content");
this.$okButton = this.$widget.find(".info-dialog-ok-button");

View File

@ -4,6 +4,7 @@ import utils from "../../services/utils.js";
import appContext from "../../components/app_context.js";
import BasicWidget from "../basic_widget.js";
import shortcutService from "../../services/shortcuts.js";
import { Modal } from "bootstrap";
const TPL = `<div class="jump-to-note-dialog modal mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
@ -35,7 +36,7 @@ export default class JumpToNoteDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
this.$results = this.$widget.find(".jump-to-note-results");

View File

@ -5,6 +5,7 @@ import appContext from "../../components/app_context.js";
import BasicWidget from "../basic_widget.js";
import shortcutService from "../../services/shortcuts.js";
import server from "../../services/server.js";
import { Modal } from "bootstrap";
const TPL = `
<div class="markdown-import-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@ -35,7 +36,7 @@ export default class MarkdownImportDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$importTextarea = this.$widget.find(".markdown-import-textarea");
this.$importButton = this.$widget.find(".markdown-import-button");

View File

@ -2,6 +2,7 @@ import { t } from "../../services/i18n.js";
import protectedSessionService from "../../services/protected_session.js";
import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";
import { Modal } from "bootstrap";
const TPL = `
<div class="protected-session-password-dialog modal mx-auto" data-backdrop="false" tabindex="-1" role="dialog">
@ -28,7 +29,7 @@ const TPL = `
export default class ProtectedSessionPasswordDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$passwordForm = this.$widget.find(".protected-session-password-form");
this.$passwordInput = this.$widget.find(".protected-session-password");

View File

@ -10,6 +10,7 @@ import server from "../../services/server.js";
import toastService from "../../services/toast.js";
import utils from "../../services/utils.js";
import ws from "../../services/ws.js";
import { Modal } from "bootstrap";
const TPL = `
<div class="recent-changes-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@ -30,7 +31,7 @@ const TPL = `
export default class RecentChangesDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$content = this.$widget.find(".recent-changes-content");
this.$eraseDeletedNotesNow = this.$widget.find(".erase-deleted-notes-now-button");

View File

@ -11,6 +11,7 @@ import dialogService from "../../services/dialog.js";
import options from "../../services/options.js";
import type FNote from "../../entities/fnote.js";
import type { NoteType } from "../../entities/fnote.js";
import { Dropdown, Modal } from "bootstrap";
const TPL = `
<div class="revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@ -101,9 +102,9 @@ export default class RevisionsDialog extends BasicWidget {
private revisionId: string | null;
//@ts-ignore
private modal: bootstrap.Modal;
private modal: Modal;
//@ts-ignore
private listDropdown: bootstrap.Dropdown;
private listDropdown: Dropdown;
private $list!: JQuery<HTMLElement>;
private $listDropdown!: JQuery<HTMLElement>;
@ -126,12 +127,12 @@ export default class RevisionsDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
//@ts-ignore
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$list = this.$widget.find(".revision-list");
this.$listDropdown = this.$widget.find(".revision-list-dropdown");
//@ts-ignore
this.listDropdown = bootstrap.Dropdown.getOrCreateInstance(this.$listDropdown, { autoClose: false });
this.listDropdown = Dropdown.getOrCreateInstance(this.$listDropdown, { autoClose: false });
this.$content = this.$widget.find(".revision-content");
this.$title = this.$widget.find(".revision-title");
this.$titleButtons = this.$widget.find(".revision-title-buttons");

View File

@ -4,6 +4,7 @@ import treeService from "../../services/tree.js";
import importService from "../../services/import.js";
import options from "../../services/options.js";
import BasicWidget from "../basic_widget.js";
import { Modal, Tooltip } from "bootstrap";
const TPL = `
<div class="upload-attachments-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@ -49,7 +50,7 @@ export default class UploadAttachmentsDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.modal = Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".upload-attachment-form");
this.$noteTitle = this.$widget.find(".upload-attachment-note-title");
@ -72,7 +73,7 @@ export default class UploadAttachmentsDialog extends BasicWidget {
}
});
bootstrap.Tooltip.getOrCreateInstance(this.$widget.find('[data-bs-toggle="tooltip"]'), {
Tooltip.getOrCreateInstance(this.$widget.find('[data-bs-toggle="tooltip"]'), {
html: true
});
}

View File

@ -6,6 +6,7 @@ import { t } from "../services/i18n.js";
import type FNote from "../entities/fnote.js";
import type { NoteType } from "../entities/fnote.js";
import type { EventData } from "../components/app_context.js";
import { Dropdown } from "bootstrap";
interface NoteTypeMapping {
type: NoteType;
@ -79,7 +80,7 @@ const TPL = `
export default class NoteTypeWidget extends NoteContextAwareWidget {
private dropdown!: bootstrap.Dropdown;
private dropdown!: Dropdown;
private $noteTypeDropdown!: JQuery<HTMLElement>;
private $noteTypeButton!: JQuery<HTMLElement>;
private $noteTypeDesc!: JQuery<HTMLElement>;
@ -88,7 +89,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
this.$widget = $(TPL);
//@ts-ignore
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$widget.on("show.bs.dropdown", () => this.renderDropdown());

View File

@ -6,6 +6,7 @@ import utils from "../services/utils.js";
import appContext from "../components/app_context.js";
import shortcutService from "../services/shortcuts.js";
import { t } from "../services/i18n.js";
import { Dropdown, Tooltip } from "bootstrap";
const TPL = `
<div class="quick-search input-group input-group-sm">
@ -44,7 +45,7 @@ const MAX_DISPLAYED_NOTES = 15;
export default class QuickSearchWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$searchString = this.$widget.find(".search-string");
this.$dropdownMenu = this.$widget.find(".dropdown-menu");
@ -100,7 +101,7 @@ export default class QuickSearchWidget extends BasicWidget {
const { searchResultNoteIds, error } = await server.get(`quick-search/${encodeURIComponent(searchString)}`);
if (error) {
let tooltip = new bootstrap.Tooltip(this.$searchString, {
let tooltip = new Tooltip(this.$searchString, {
trigger: "manual",
title: `Search error: ${error}`,
placement: "right"

View File

@ -16,6 +16,7 @@ import Limit from "../search_options/limit.js";
import Debug from "../search_options/debug.js";
import appContext from "../../components/app_context.js";
import bulkActionService from "../../services/bulk_action.js";
import { Dropdown } from "bootstrap";
const TPL = `
<div class="search-definition-widget">
@ -203,7 +204,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
});
this.$widget.on("click", "[data-action-add]", async (event) => {
bootstrap.Dropdown.getOrCreateInstance(this.$widget.find(".action-add-toggle"));
Dropdown.getOrCreateInstance(this.$widget.find(".action-add-toggle"));
const actionName = $(event.target).attr("data-action-add");

View File

@ -4,6 +4,7 @@ import server from "../../services/server.js";
import shortcutService from "../../services/shortcuts.js";
import appContext from "../../components/app_context.js";
import { t } from "../../services/i18n.js";
import { Tooltip } from "bootstrap";
const TPL = `
<tr>
@ -78,7 +79,7 @@ export default class SearchString extends AbstractSearchOption {
}
showSearchErrorEvent({ error }) {
let tooltip = new bootstrap.Tooltip(this.$searchString, {
let tooltip = new Tooltip(this.$searchString, {
trigger: "manual",
title: `${t("search_string.error", { error })}`,
placement: "bottom"

View File

@ -4,6 +4,7 @@ import ws from "../services/ws.js";
import options from "../services/options.js";
import syncService from "../services/sync.js";
import { escapeQuotes } from "../services/utils.js";
import { Tooltip } from "bootstrap";
const TPL = `
<div class="sync-status-widget launcher-button">
@ -96,7 +97,7 @@ export default class SyncStatusWidget extends BasicWidget {
return;
}
bootstrap.Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
html: true,
placement: this.settings.titlePlacement,
fallbackPlacements: [this.settings.titlePlacement]