Mercurial > p > roundup > code

annotate share/roundup/templates/classic/html/datecopy.js @ 8566:e4191aa7b402 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
doc: issue2551415 correct doc for change input->input_payload in 2.5 the rest interface changed a variable name from input to input_payload. An earlier commit changed the rest docs. This commit adds an item for it to the upgrading 2.4.0->2.5.0 section. Also cross reference added to the rest docs with the updated examples.
author John Rouillard <rouilj@ieee.org>
date Thu, 09 Apr 2026 00:19:06 -0400
parents 2bf0c4e7795e
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8285
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
1 /* Capture double-click on a date element. Turn element in text element
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
2 and select date for copying. Return to date element saving change on
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
3 focusout or Enter. Return to date element with original value on Escape.
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
4 Derived from
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
5 https://stackoverflow.com/questions/49981660/enable-copy-paste-on-html5-date-field
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
6 */
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
7
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
8 /* TODO: keyboard support should be added to allow entering text mode. */
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
9
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
10 // use iife to encapsulate handleModeExitKeys
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
11 (function () {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
12 "use strict";
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
13
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
14 // Define named function so it can be added/removed as event handler
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
15 // in different scopes of the code
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
16 function handleModeExitKeys (event) {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
17 if (event.key !== "Escape" && event.key !== "Enter") return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
18 event.preventDefault();
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
19 if (event.key === "Escape") {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
20 event.target.value = event.target.original_value;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
21 }
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
22 let focusout = new Event("focusout");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
23 event.target.dispatchEvent(focusout);
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
24 }
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
25
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
26
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
27 document.querySelector("body").addEventListener("dblclick", (evt) => {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
28 if (evt.target.tagName !== "INPUT") return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
29
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
30 if (! ["date", "datetime-local"].includes(
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
31 evt.target.attributes.type.value.toLowerCase())) return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
32
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
33 // we have a date type input
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
34 let target = evt.target;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
35 let original_type = target.attributes.type.value;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
36 target.type = "text";
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
37
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
38 target.original_value = target.value;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
39
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
40 // allow admin to set CSS to change input
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
41 target.classList.add("mode_textdate");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
42 // After changing input type with JS .select() won't
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
43 // work as usual
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
44 // Needs timeout fn() to make it work
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
45 setTimeout(() => {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
46 target.select();
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
47 });
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
48
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
49 // register the focusout event to reset the input back
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
50 // to a date input field. Once it triggers the handler
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
51 // is deleted to be added on the next doubleclick.
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
52 // This also should end the closure of original_type.
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
53 target.addEventListener("focusout", () => {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
54 target.type = original_type;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
55 delete event.target.original_value;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
56
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
57 target.classList.remove("mode_textdate");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
58
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
59 target.removeEventListener("keydown", handleModeExitKeys);
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
60 }, {once: true});
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
61
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
62 // called on every keypress including editing the field,
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
63 // so can not be set with "once" like "focusout".
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
64 target.addEventListener("keydown", handleModeExitKeys);
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
65 });
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
66 })()
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
67
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
68 /* Some failed experiments that I would have liked to have work */
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
69 /* With the date element focused, type ^c or ^v to copy/paste
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
70 evt.target always seems to be inconsistent. Sometimes I get the
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
71 input but usually I get the body.
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
72
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
73 I can find the date element using document.activeElement, but
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
74 this seems like a kludge.
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
75 */
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
76 /*
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
77 body.addEventListener("copy", (evt) => {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
78 // target = document.activeElement;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
79 target = evt.target;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
80 if (target.tagName != "INPUT") {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
81 //alert("copy received non-date" + target.tagName);
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
82 return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
83 }
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
84
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
85 if (! ["date", "datetime-local"].includes(
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
86 target.attributes.type.value)) {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
87 //alert("copy received non-date");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
88 return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
89 }
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
90
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
91 evt.clipboardData.setData("text/plain",
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
92 target.value);
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
93 // default behaviour is to copy any selected text
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
94 // overwriting what we set
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
95 evt.preventDefault();
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
96 //alert("copy received date");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
97 })
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
98
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
99 body.addEventListener("paste", (evt) => {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
100 if (evt.target.tagName != "INPUT") {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
101 //alert("paste received non-date");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
102 return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
103 }
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
104
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
105 if (! ["date", "datetime-local"].includes(
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
106 evt.target.attributes.type.value)) {
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
107 //alert("paste received non-date");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
108 return;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
109 }
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
110
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
111 data = evt.clipboardData.getData("text/plain");
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
112 evt.preventDefault();
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
113 evt.target.value = data;
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
114 //alert("paste received date " + data);
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
115 })
2bf0c4e7795e fix: issue2551390 - Replace text input/calendar popup with native date input
John Rouillard <rouilj@ieee.org>
parents:
diff changeset
116 */
Roundup Issue Tracker: http://roundup-tracker.org/