mirror of https://github.com/TriliumNext/Notes
feat(insert time): Add configurable date/time format for Alt+T shortcut
SiriusXT
parent
e2ac581b14
commit
a8c4b11c9f
@ -1,79 +1,79 @@
|
|||||||
import OptionsWidget from "../options_widget.js";
|
import OptionsWidget from "../options_widget.js";
|
||||||
import { t } from "../../../../services/i18n.js";
|
import { t } from "../../../../services/i18n.js";
|
||||||
import type { OptionMap } from "@triliumnext/commons";
|
import type { OptionMap } from "@triliumnext/commons";
|
||||||
|
import utils from "../../../../services/utils.js";
|
||||||
|
import keyboardActionsService from "../../../../services/keyboard_actions.js";
|
||||||
|
import linkService from "../../../.././services/link.js";
|
||||||
|
|
||||||
const TPL = /*html*/`
|
const TPL = /*html*/`
|
||||||
<div class="options-section">
|
<div class="options-section">
|
||||||
<h4>${t("custom_date_time_format.title")}</h4>
|
<h4>${t("custom_date_time_format.title")}</h4>
|
||||||
|
|
||||||
|
<p class="description">
|
||||||
|
${t("custom_date_time_format.description")}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<table class="table table-borderless">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
${t("custom_date_time_format.format_string")}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" id="custom-date-time-format" class="form-control custom-date-time-format"
|
||||||
|
placeholder="YYYY-MM-DD HH:mm">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p>
|
<tr>
|
||||||
${t("custom_date_time_format.desc1")}
|
<td>
|
||||||
${t("custom_date_time_format.desc2")}
|
${t("custom_date_time_format.formatted_time")}
|
||||||
</p>
|
</td>
|
||||||
<p>
|
<td>
|
||||||
<strong>${t("custom_date_time_format.important_label")}</strong>
|
<div class="formatted-date" style="padding-left: 0.5rem;">
|
||||||
${t("custom_date_time_format.desc3")}
|
</div>
|
||||||
</p>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="customDateTimeFormatInput" style="margin-right: 10px;">
|
|
||||||
${t("custom_date_time_format.format_string_label")}
|
|
||||||
</label>
|
|
||||||
<input type="text" id="customDateTimeFormatInput" class="form-control custom-datetime-format-input"
|
|
||||||
placeholder="${t("custom_date_time_format.placeholder")}"
|
|
||||||
style="width: 300px; display: inline-block;">
|
|
||||||
</div>
|
|
||||||
<p style="margin-top: 5px;">
|
|
||||||
<em>${t("custom_date_time_format.examples_label")}</em>
|
|
||||||
<code>YYYY-MM-DD HH:mm</code> (${t("custom_date_time_format.example_default")}),
|
|
||||||
<code>DD.MM.YYYY</code>,
|
|
||||||
<code>MMMM D, YYYY h:mm A</code>,
|
|
||||||
<code>[Today is] dddd</code>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default class DateTimeFormatOptions extends OptionsWidget {
|
export default class DateTimeFormatOptions extends OptionsWidget {
|
||||||
|
|
||||||
private $formatInput!: JQuery<HTMLInputElement>;
|
private $formatInput!: JQuery<HTMLInputElement>;
|
||||||
|
private $formattedDate!: JQuery<HTMLInputElement>;
|
||||||
|
|
||||||
doRender() {
|
doRender() {
|
||||||
this.$widget = $(TPL);
|
this.$widget = $(TPL);
|
||||||
this.$formatInput = this.$widget.find(
|
|
||||||
"input.custom-datetime-format-input"
|
this.$formatInput = this.$widget.find("input.custom-date-time-format");
|
||||||
) as JQuery<HTMLInputElement>;
|
this.$formattedDate = this.$widget.find(".formatted-date");
|
||||||
|
|
||||||
this.$formatInput.on("input", () => {
|
this.$formatInput.on("input", () => {
|
||||||
const formatString = this.$formatInput.val() as string;
|
const dateString = utils.formatDateTime(new Date(), this.$formatInput.val());
|
||||||
this.updateOption("customDateTimeFormatString", formatString);
|
this.$formattedDate.text(dateString);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$formatInput.on('blur keydown', (e) => {
|
||||||
|
if (e.type === 'blur' || (e.type === 'keydown' && e.key === 'Enter')) {
|
||||||
|
this.updateOption("customDateTimeFormat", this.$formatInput.val());
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return this.$widget;
|
return this.$widget;
|
||||||
}
|
}
|
||||||
|
|
||||||
async optionsLoaded(options: OptionMap) {
|
async optionsLoaded(options: OptionMap) {
|
||||||
const currentFormat = options.customDateTimeFormatString || "";
|
const shortcutKey = (await keyboardActionsService.getAction("insertDateTimeToText")).effectiveShortcuts.join(", ");
|
||||||
|
const $link = await linkService.createLink("_hidden/_options/_optionsShortcuts", {
|
||||||
if (this.$formatInput) {
|
"title": shortcutKey,
|
||||||
this.$formatInput.val(currentFormat);
|
"showTooltip": false
|
||||||
} else {
|
});
|
||||||
|
this.$widget.find(".description").find("kbd").replaceWith($link);
|
||||||
console.warn(
|
|
||||||
"TriliumNext DateTimeFormatOptions: $formatInput not initialized when optionsLoaded was called. Attempting to find again."
|
|
||||||
);
|
|
||||||
const inputField = this.$widget?.find(
|
|
||||||
"input.custom-datetime-format-input"
|
|
||||||
) as JQuery<HTMLInputElement> | undefined;
|
|
||||||
|
|
||||||
if (inputField?.length) {
|
const customDateTimeFormat = options.customDateTimeFormat || "YYYY-MM-DD HH:mm";
|
||||||
this.$formatInput = inputField;
|
this.$formatInput.val(customDateTimeFormat);
|
||||||
this.$formatInput.val(currentFormat);
|
const dateString = utils.formatDateTime(new Date(), customDateTimeFormat);
|
||||||
} else {
|
this.$formattedDate.text(dateString);
|
||||||
console.error(
|
|
||||||
"TriliumNext DateTimeFormatOptions: Could not find format input field in optionsLoaded."
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue