Roundup Tracker - Issues

Message8268

Author rouilj
Recipients ThomasAH, ber, rouilj, schlatterbeck
Date 2025-01-14.17:32:53
Message-id <1736875973.47.0.0524411495114.issue2550858@roundup.psfhosted.org>
In-reply-to
I attached the file datecopy.js and include it using:

      <script tal:attributes="nonce request/client/client_nonce"
              tal:content="structure python:utils.readfile('datecopy.js')">
      </script>

in the template.

datecopy.js is derived from the stackoverflow you mention except I attach the
doubleclick handler to the body element. Then use event delegation to receive
the doubleclick and check to see if the event target is an input of type
'date' or 'datetime-local'. If that is true, swap the type, select the contents,
attach a focusout handler to reset the type to it's original type.

I am not handling any touch events, so table users will not be able to copy,
but I don't think the calendar popup worked well on touch displays so this
should be a net win for them too.

I also had some failed experiments trying to capture copy/paste on the date
element. I was able to capture them at the body level, but it seems like the
target was (in most cases) the body element itself not the focused date element.

For reference and easy review here is datecopy.js:

=====
/* capture doubleclicks and if it's a date element, select the date for
   copying. Derived from
   https://stackoverflow.com/questions/49981660/enable-copy-paste-on-html5-date-field
*/

document.querySelector("body").addEventListener('dblclick', (evt) => {
    if (evt.target.tagName != "INPUT") {
        return
    }

    if (! ["date", "datetime-local"].includes(
        evt.target.attributes.type.value.toLowerCase())) {
        return
    }

    /* we have a date type input */
    target = evt.target
    original_type = target.attributes.type.value;
    target.type = "text";

    // After changing input type with JS .select() won't
    // work as usual
    // Needs timeout fn() to make it work
    setTimeout(() => {
        target.select();
    })

    // register the focusout event to reset the input back
    // to a date input field. Once it triggers the handler
    // is deleted to be added on the next doubleclick.
    // This also should end the closure of original_type.
    target.addEventListener('focusout', () => {
        target.type = original_type;
    }, {once: true});
})
=====
History
Date User Action Args
2025-01-14 17:32:53rouiljsetmessageid: <1736875973.47.0.0524411495114.issue2550858@roundup.psfhosted.org>
2025-01-14 17:32:53rouiljsetrecipients: + rouilj, schlatterbeck, ber, ThomasAH
2025-01-14 17:32:53rouiljlinkissue2550858 messages
2025-01-14 17:32:53rouiljcreate