Sandbox: Difference between revisions
From Hidden Mickey Wiki
(Blanked the page) Tag: Blanking |
No edit summary |
||
| 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> | |||
Revision as of 15:46, 30 September 2025
| Item | Done | Time |
|---|---|---|
| Example task 1 | <input type="checkbox" class="mw-checkbox-ts" /> | |
| Example task 2 | <input type="checkbox" class="mw-checkbox-ts" /> | |
| Example task 3 | <input type="checkbox" class="mw-checkbox-ts" /> |
<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>