paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

flatpickr: Move show_flatpickr function in a new module.

Browse Source 
This would avoid cyclic imports to access `show_flatpickr`
function.
This commit is contained in:
Aman Agrawal
2021-12-08 06:54:28 +00:00
committed by Tim Abbott
parent 78a81ab21a
commit 98fa5c9ae2
4 changed files with 123 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/js/compose.js
View File

@@ -12,8 +12,8 @@ import * as compose_fade from "./compose_fade";
import * as compose_state from "./compose_state";
import * as compose_ui from "./compose_ui";
import * as compose_validate from "./compose_validate";
import * as composebox_typeahead from "./composebox_typeahead";
import * as echo from "./echo";
import * as flatpickr from "./flatpickr";
import * as giphy from "./giphy";
import {$t, $t_html} from "./i18n";
import * as loading from "./loading";
@@ -637,7 +637,7 @@ export function initialize() {
compose_ui.insert_syntax_and_focus(timestr, target_textarea);
};
composebox_typeahead.show_flatpickr(
flatpickr.show_flatpickr(
$(compose_click_target)[0],
on_timestamp_selection,
new Date(),

118
static/js/composebox_typeahead.js
View File

@@ -1,5 +1,3 @@
import {formatISO} from "date-fns";
import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
import $ from "jquery";
import _ from "lodash";
@@ -12,7 +10,7 @@ import * as compose_pm_pill from "./compose_pm_pill";
import * as compose_state from "./compose_state";
import * as compose_ui from "./compose_ui";
import * as compose_validate from "./compose_validate";
import {get_keydown_hotkey} from "./hotkey";
import * as flatpickr from "./flatpickr";
import {$t} from "./i18n";
import * as message_store from "./message_store";
import * as muted_users from "./muted_users";
@@ -768,118 +766,6 @@ export function content_highlighter(item) {
}
}
function is_numeric_key(key) {
return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key);
}
export function show_flatpickr(element, callback, default_timestamp, options = {}) {
const flatpickr_input = $("<input id='#timestamp_flatpickr'>");
const instance = flatpickr_input.flatpickr({
mode: "single",
enableTime: true,
clickOpens: false,
defaultDate: default_timestamp,
plugins: [
new ConfirmDatePlugin({
showAlways: true,
confirmText: $t({defaultMessage: "Confirm"}),
confirmIcon: "",
}),
],
positionElement: element,
dateFormat: "Z",
formatDate: (date) => formatISO(date),
disableMobile: true,
onKeyDown: (selectedDates, dateStr, instance, event) => {
if (is_numeric_key(event.key)) {
// Don't attempt to get_keydown_hotkey for numeric inputs
// as it would return undefined.
return;
}
const hotkey = get_keydown_hotkey(event);
if (["tab", "shift_tab"].includes(hotkey.name)) {
const elems = [
instance.selectedDateElem,
instance.hourElement,
instance.minuteElement,
instance.amPM,
$(".flatpickr-confirm")[0],
];
const i = elems.indexOf(event.target);
const n = elems.length;
const remain = (i + (event.shiftKey ? -1 : 1)) % n;
const target = elems[Math.floor(remain >= 0 ? remain : remain + n)];
event.preventDefault();
event.stopPropagation();
target.focus();
}
event.stopPropagation();
},
...options,
});
const container = $($(instance.innerContainer).parent());
container.on("keydown", (e) => {
if (is_numeric_key(e.key)) {
// Let users type numeric values
return true;
}
const hotkey = get_keydown_hotkey(e);
if (!hotkey) {
return false;
}
if (hotkey.name === "backspace" || hotkey.name === "delete") {
// Let backspace or delete be handled normally
return true;
}
if (hotkey.name === "enter") {
if (e.target.classList[0] === "flatpickr-day") {
return true; // use flatpickr default implementation
}
$(element).toggleClass("has_popover");
container.find(".flatpickr-confirm").trigger("click");
}
if (hotkey.name === "escape") {
$(element).toggleClass("has_popover");
instance.close();
instance.destroy();
}
if (["tab", "shift_tab"].includes(hotkey.name)) {
return true; // use flatpickr default implementation
}
if (["right_arrow", "up_arrow", "left_arrow", "down_arrow"].includes(hotkey.name)) {
return true; // use flatpickr default implementation
}
e.stopPropagation();
e.preventDefault();
return true;
});
container.on("click", ".flatpickr-confirm", () => {
callback(flatpickr_input.val());
instance.close();
instance.destroy();
});
instance.open();
instance.selectedDateElem.focus();
return instance;
}
export function content_typeahead_selected(item, event) {
const pieces = split_at_cursor(this.query, this.$element);
let beginning = pieces[0];
@@ -1016,7 +902,7 @@ export function content_typeahead_selected(item, event) {
textbox.caret(beginning.length, beginning.length);
compose_ui.autosize_textarea(textbox);
};
show_flatpickr(this.$element[0], on_timestamp_selection, timestamp);
flatpickr.show_flatpickr(this.$element[0], on_timestamp_selection, timestamp);
return beginning + rest;
}
}

118
static/js/flatpickr.js Normal file
View File

@@ -0,0 +1,118 @@
import {formatISO} from "date-fns";
import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
import $ from "jquery";
import {get_keydown_hotkey} from "./hotkey";
import {$t} from "./i18n";
function is_numeric_key(key) {
return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key);
}
export function show_flatpickr(element, callback, default_timestamp, options = {}) {
const flatpickr_input = $("<input id='#timestamp_flatpickr'>");
const instance = flatpickr_input.flatpickr({
mode: "single",
enableTime: true,
clickOpens: false,
defaultDate: default_timestamp,
plugins: [
new ConfirmDatePlugin({
showAlways: true,
confirmText: $t({defaultMessage: "Confirm"}),
confirmIcon: "",
}),
],
positionElement: element,
dateFormat: "Z",
formatDate: (date) => formatISO(date),
disableMobile: true,
onKeyDown: (selectedDates, dateStr, instance, event) => {
if (is_numeric_key(event.key)) {
// Don't attempt to get_keydown_hotkey for numeric inputs
// as it would return undefined.
return;
}
const hotkey = get_keydown_hotkey(event);
if (["tab", "shift_tab"].includes(hotkey.name)) {
const elems = [
instance.selectedDateElem,
instance.hourElement,
instance.minuteElement,
instance.amPM,
$(".flatpickr-confirm")[0],
];
const i = elems.indexOf(event.target);
const n = elems.length;
const remain = (i + (event.shiftKey ? -1 : 1)) % n;
const target = elems[Math.floor(remain >= 0 ? remain : remain + n)];
event.preventDefault();
event.stopPropagation();
target.focus();
}
event.stopPropagation();
},
...options,
});
const container = $($(instance.innerContainer).parent());
container.on("keydown", (e) => {
if (is_numeric_key(e.key)) {
// Let users type numeric values
return true;
}
const hotkey = get_keydown_hotkey(e);
if (!hotkey) {
return false;
}
if (hotkey.name === "backspace" || hotkey.name === "delete") {
// Let backspace or delete be handled normally
return true;
}
if (hotkey.name === "enter") {
if (e.target.classList[0] === "flatpickr-day") {
return true; // use flatpickr default implementation
}
$(element).toggleClass("has_popover");
container.find(".flatpickr-confirm").trigger("click");
}
if (hotkey.name === "escape") {
$(element).toggleClass("has_popover");
instance.close();
instance.destroy();
}
if (["tab", "shift_tab"].includes(hotkey.name)) {
return true; // use flatpickr default implementation
}
if (["right_arrow", "up_arrow", "left_arrow", "down_arrow"].includes(hotkey.name)) {
return true; // use flatpickr default implementation
}
e.stopPropagation();
e.preventDefault();
return true;
});
container.on("click", ".flatpickr-confirm", () => {
callback(flatpickr_input.val());
instance.close();
instance.destroy();
});
instance.open();
instance.selectedDateElem.focus();
return instance;
}

1
tools/test-js-with-node
View File

@@ -81,6 +81,7 @@ EXEMPT_FILES = make_set(
"static/js/emojisets.js",
"static/js/favicon.js",
"static/js/feedback_widget.js",
"static/js/flatpickr.js",
"static/js/floating_recipient_bar.js",
"static/js/gear_menu.js",
"static/js/giphy.js",