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>