mirror of https://github.com/TriliumNext/Notes
Merge pull request #2083 from TriliumNext/date/time
feat: Add configurable date/time format for Alt+T shortcutpull/2183/head
JYC333
GitHub
commit
0af1c8b3be
@ -0,0 +1,67 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
import { t } from "../../../../services/i18n.js";
|
||||
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*/`
|
||||
<div class="options-section">
|
||||
<h4>${t("custom_date_time_format.title")}</h4>
|
||||
|
||||
<p class="description">
|
||||
${t("custom_date_time_format.description")}
|
||||
</p>
|
||||
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-6">
|
||||
<label for="custom-date-time-format">${t("custom_date_time_format.format_string")}</label>
|
||||
<input type="text" id="custom-date-time-format" class="form-control custom-date-time-format" placeholder="YYYY-MM-DD HH:mm">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label>${t("custom_date_time_format.formatted_time")}</label>
|
||||
<div class="formatted-date"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class DateTimeFormatOptions extends OptionsWidget {
|
||||
|
||||
private $formatInput!: JQuery<HTMLInputElement>;
|
||||
private $formattedDate!: JQuery<HTMLInputElement>;
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$formatInput = this.$widget.find("input.custom-date-time-format");
|
||||
this.$formattedDate = this.$widget.find(".formatted-date");
|
||||
|
||||
this.$formatInput.on("input", () => {
|
||||
const dateString = utils.formatDateTime(new Date(), this.$formatInput.val());
|
||||
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;
|
||||
}
|
||||
|
||||
async optionsLoaded(options: OptionMap) {
|
||||
const shortcutKey = (await keyboardActionsService.getAction("insertDateTimeToText")).effectiveShortcuts.join(", ");
|
||||
const $link = await linkService.createLink("_hidden/_options/_optionsShortcuts", {
|
||||
"title": shortcutKey,
|
||||
"showTooltip": false
|
||||
});
|
||||
this.$widget.find(".description").find("kbd").replaceWith($link);
|
||||
|
||||
const customDateTimeFormat = options.customDateTimeFormat || "YYYY-MM-DD HH:mm";
|
||||
this.$formatInput.val(customDateTimeFormat);
|
||||
const dateString = utils.formatDateTime(new Date(), customDateTimeFormat);
|
||||
this.$formattedDate.text(dateString);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"
|
||||
width="800px" height="800px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
|
||||
<path d="M43.6,6.8h-4V5.2c0-1.8-1.4-3.2-3.2-3.2c-1.8,0-3.2,1.4-3.2,3.2v1.6H18.8V5.2c0-1.8-1.4-3.2-3.2-3.2
|
||||
s-3.2,1.4-3.2,3.2v1.6h-4c-2.6,0-4.8,2.2-4.8,4.8v1.6c0,0.9,0.7,1.6,1.6,1.6h41.6c0.9,0,1.6-0.7,1.6-1.6v-1.6
|
||||
C48.4,9,46.2,6.8,43.6,6.8z"/>
|
||||
<path d="M46.8,19.6H5.2c-0.9,0-1.6,0.7-1.6,1.6v24c0,2.6,2.2,4.8,4.8,4.8h35.2c2.6,0,4.8-2.2,4.8-4.8v-24
|
||||
C48.4,20.3,47.7,19.6,46.8,19.6z M26,46.7c-6.6,0-11.9-5.4-11.9-11.9c0-6.6,5.4-11.9,11.9-11.9s11.9,5.4,11.9,11.9
|
||||
C37.9,41.4,32.6,46.7,26,46.7z"/>
|
||||
<path d="M27.2,34.3v-5.1c0-0.4-0.4-0.8-0.8-0.8h-0.8c-0.4,0-0.8,0.4-0.8,0.8v5.6c0,0.3,0.1,0.6,0.4,0.8l3.8,3.8
|
||||
c0.3,0.3,0.8,0.3,1.1,0l0.6-0.6c0.3-0.3,0.3-0.8,0-1.1L27.2,34.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 958 B |
@ -0,0 +1,31 @@
|
||||
import { ButtonView, Plugin } from 'ckeditor5';
|
||||
import dateTimeIcon from '../icons/date-time.svg?raw';
|
||||
|
||||
export default class InsertDateTimePlugin extends Plugin {
|
||||
init() {
|
||||
const editor = this.editor;
|
||||
|
||||
editor.ui.componentFactory.add('dateTime', locale => {
|
||||
const view = new ButtonView( locale );
|
||||
|
||||
view.set( {
|
||||
label: 'Date time',
|
||||
icon: dateTimeIcon,
|
||||
tooltip: true
|
||||
} );
|
||||
|
||||
// enable internal link only if the editor is not read only
|
||||
view.bind('isEnabled').to(editor, 'isReadOnly', isReadOnly => !isReadOnly);
|
||||
|
||||
view.on('execute', () => {
|
||||
const editorEl = editor.editing.view.getDomRoot();
|
||||
const component = glob.getComponentByEl(editorEl);
|
||||
|
||||
component.triggerCommand('insertDateTimeToText');
|
||||
editor.editing.view.focus();
|
||||
} );
|
||||
|
||||
return view;
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue