|
Tags: Blanking Manual revert |
| (42 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| {| class="wikitable"
| |
| ! Item
| |
| ! Done
| |
| ! Time
| |
| |-
| |
| | Example task 1
| |
| | <input type="checkbox" class="mw-checkbox-ts" />
| |
| | <span class="mw-ts-box"></span>
| |
| |-
| |
| | Example task 2
| |
| | <input type="checkbox" class="mw-checkbox-ts" />
| |
| | <span class="mw-ts-box"></span>
| |
| |-
| |
| | Example task 3
| |
| | <input type="checkbox" class="mw-checkbox-ts" />
| |
| | <span class="mw-ts-box"></span>
| |
| |}
| |
|
| |
|
| <!--
| |
| JavaScript: when a checkbox with class "mw-checkbox-ts" is checked, its
| |
| sibling .mw-ts-box in the same row gets the current time (formatted like 3:08:55 PM).
| |
| If the checkbox is unchecked the timestamp is cleared.
| |
| This uses event delegation and works on touch devices.
| |
| -->
| |
| <script>
| |
| (function () {
| |
| 'use strict';
| |
|
| |
| // Format Date as "h:mm:ss AM/PM" (en-US)
| |
| function formatTime(d) {
| |
| try {
| |
| return d.toLocaleTimeString('en-US', {
| |
| hour: 'numeric',
| |
| minute: '2-digit',
| |
| second: '2-digit'
| |
| });
| |
| } catch (e) {
| |
| // fallback
| |
| var H = d.getHours();
| |
| var h = H % 12 || 12;
| |
| var m = String(d.getMinutes()).padStart(2, '0');
| |
| var s = String(d.getSeconds()).padStart(2, '0');
| |
| var ampm = H < 12 ? 'AM' : 'PM';
| |
| return h + ':' + m + ':' + s + ' ' + ampm;
| |
| }
| |
| }
| |
|
| |
| // Find the timestamp box in the same table row as the checkbox
| |
| function findTsBox(cb) {
| |
| var tr = cb.closest('tr');
| |
| if (!tr) return null;
| |
| return tr.querySelector('.mw-ts-box');
| |
| }
| |
|
| |
| // Handle change events on checkboxes (works for keyboard, mouse, and touch)
| |
| document.addEventListener('change', function (ev) {
| |
| var target = ev.target;
| |
| if (!target) return;
| |
| if (target.matches && target.matches('.mw-checkbox-ts')) {
| |
| var tsBox = findTsBox(target);
| |
| if (!tsBox) return;
| |
| if (target.checked) {
| |
| tsBox.textContent = formatTime(new Date());
| |
| } else {
| |
| tsBox.textContent = '';
| |
| }
| |
| }
| |
| }, false);
| |
|
| |
| // Some phones/browsers can behave unexpectedly — also handle click/touchend
| |
| // (this won't duplicate because change already handled the state; this just
| |
| // provides extra reliability on weird devices)
| |
| document.addEventListener('click', function (ev) {
| |
| var t = ev.target;
| |
| if (t && t.matches && t.matches('.mw-checkbox-ts')) {
| |
| // tiny delay to let the input state update, then mirror the change handler
| |
| setTimeout(function () {
| |
| var tsBox = findTsBox(t);
| |
| if (!tsBox) return;
| |
| if (t.checked) tsBox.textContent = formatTime(new Date());
| |
| else tsBox.textContent = '';
| |
| }, 5);
| |
| }
| |
| }, false);
| |
|
| |
| })();
| |
| </script>
| |
