ua-userscripts/scripts/bipp-sneltoetsen/bipp-sneltoetsen.user.js

// ==UserScript==
// @name         BIPP: sneltoetsen voor knoppen
// @namespace    https://github.com/glgoose/ua-userscripts
// @version      1.3.0
// @description  Sneltoetsen per rol van de knop, in het Nederlands en het Engels: Ctrl+Enter (Bevestigen/Authorization/Approve, anders Indienen/Submit), Ctrl+S (Opslaan/Save), Ctrl+[ (Terug/Back), Alt+S (Zoeken/Search), Alt+R (Reset), Alt+N (Nieuw/New), Alt+C (Annuleren/Cancel), Alt+H (In wachtstand/On hold). Bij ingedrukte Ctrl, Cmd of Alt verschijnt de sneltoets onder de knop.
// @author       glgoose
// @license      GPL-3.0-or-later
// @homepageURL  https://gitea.flw.uantwerpen.be/glenn/ua-userscripts/src/branch/main/scripts/bipp-sneltoetsen
// @supportURL   https://gitea.flw.uantwerpen.be/glenn/ua-userscripts/issues
// @downloadURL  https://gitea.flw.uantwerpen.be/glenn/ua-userscripts/raw/branch/main/scripts/bipp-sneltoetsen/bipp-sneltoetsen.user.js
// @updateURL    https://gitea.flw.uantwerpen.be/glenn/ua-userscripts/raw/branch/main/scripts/bipp-sneltoetsen/bipp-sneltoetsen.user.js
// @match        https://bipp.biotechpartner.be/web/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==
(function () {
  'use strict';

  // Een sneltoets hangt aan de rol van de knop, niet aan een letter uit het label, dus NL en EN delen dezelfde toets.
  // labels: kleine letters, in volgorde van voorrang (de eerste die op de pagina staat wint).
  // match: welke toetscombinatie het is. hint: wat de tooltip en de hint onder de knop tonen.
  var KEYS = [
    { labels: ['bevestigen', 'authorization', 'approve', 'goedkeuren', 'confirm', 'indienen', 'submit'],
      // Op een Mac werkt Cmd+Enter ook, maar de hint blijft overal Ctrl+Enter.
      hint: 'Ctrl+Enter',
      match: function (e) { return (e.code === 'Enter' || e.code === 'NumpadEnter') && (e.ctrlKey || e.metaKey) && !(e.ctrlKey && e.metaKey) && !e.altKey && !e.shiftKey; } },
    { labels: ['zoeken', 'search'], hint: 'Alt+S', match: alt('KeyS') },
    { labels: ['opslaan', 'save'], hint: 'Ctrl+S', match: ctrl('KeyS') },
    { labels: ['terug', 'back'], hint: 'Ctrl+[', match: ctrl('BracketLeft') },
    { labels: ['reset'], hint: 'Alt+R', match: alt('KeyR') },
    { labels: ['nieuw', 'new'], hint: 'Alt+N', match: alt('KeyN') },
    { labels: ['annuleren', 'cancel'], hint: 'Alt+C', match: alt('KeyC') },
    { labels: ['in wachtstand', 'on hold'], hint: 'Alt+H', match: alt('KeyH') }
  ];
  var MARK = 'data-bipp-sneltoets';

  // Alt voor de zijacties: Ctrl+N, Ctrl+F en Ctrl+R zijn browsertoetsen, en Ctrl+Alt is AltGr op Windows.
  function alt(code) {
    return function (e) { return e.code === code && e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey; };
  }

  // Alleen Ctrl: Cmd blijft bij de browser (Cmd+F, Cmd+S, Cmd+R zijn zoeken, opslaan en herladen).
  function ctrl(code) {
    return function (e) { return e.code === code && e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey; };
  }

  function norm(s) { return (s || '').replace(/\s+/g, ' ').trim().toLowerCase(); }

  function visible(el) { return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length); }

  // Per label (op volgorde van voorrang) de eerste zichtbare, actieve knop. Een postback-pagina kan er verborgen kopieën van hebben.
  function findButton(k) {
    var btns = document.querySelectorAll('input[type="submit"], input[type="button"], button');
    for (var l = 0; l < k.labels.length; l++) {
      for (var i = 0; i < btns.length; i++) {
        var b = btns[i];
        if (norm(b.value || b.textContent) === k.labels[l] && !b.disabled && visible(b)) return b;
      }
    }
    return null;
  }

  function mark(btn, k) {
    if (btn.getAttribute(MARK)) return;
    btn.setAttribute(MARK, k.hint);
    // BIPP zet soms zelf een title (Bevestigen): dan komt de sneltoets op een eigen regel eronder.
    btn.title = btn.title ? btn.title + '\n' + k.hint : k.hint;
  }

  var tips = [];
  function showTips() {
    hideTips();
    KEYS.forEach(function (k) {
      var btn = findButton(k);
      if (!btn) return;
      var r = btn.getBoundingClientRect();
      var tip = document.createElement('span');
      tip.textContent = k.hint;
      tip.style.cssText = 'position:absolute;z-index:99999;pointer-events:none;white-space:nowrap;' +
        'font:11px ui-monospace,Menlo,Consolas,monospace;background:#1f2937;color:#fff;border-radius:4px;padding:1px 6px;' +
        'left:' + (r.left + window.scrollX + r.width / 2) + 'px;top:' + (r.bottom + window.scrollY + 4) + 'px;transform:translateX(-50%)';
      document.body.appendChild(tip);
      tips.push(tip);
    });
    spread();
  }

  // Smalle knoppen naast elkaar geven hints die elkaar raken: schuif de volgende hint naar rechts, met een kleine tussenruimte.
  function spread() {
    var prevRight = -Infinity;
    tips.slice().sort(function (a, b) { return a.getBoundingClientRect().left - b.getBoundingClientRect().left; })
      .forEach(function (tip) {
        var r = tip.getBoundingClientRect();
        var shift = Math.max(0, prevRight + 4 - r.left);
        if (shift) tip.style.left = (parseFloat(tip.style.left) + shift) + 'px';
        prevRight = r.right + shift;
      });
  }
  function hideTips() {
    tips.forEach(function (t) { if (t.parentNode) t.parentNode.removeChild(t); });
    tips = [];
  }

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Control' || e.key === 'Meta' || e.key === 'Alt') { if (!e.repeat) showTips(); return; }
    for (var i = 0; i < KEYS.length; i++) {
      if (!KEYS[i].match(e)) continue;
      var btn = findButton(KEYS[i]);
      if (!btn) return;
      e.preventDefault();
      hideTips();
      btn.click();
      return;
    }
  }, true);
  document.addEventListener('keyup', function (e) { if (e.key === 'Control' || e.key === 'Meta' || e.key === 'Alt') hideTips(); }, true);
  window.addEventListener('blur', hideTips);

  // De pagina bouwt de knoppen soms pas na een postback op: probeer het een paar keer.
  var tries = 0;
  (function init() {
    var left = 0;
    KEYS.forEach(function (k) {
      var btn = findButton(k);
      if (btn) mark(btn, k); else left++;
    });
    if (left && ++tries < 30) setTimeout(init, 500);
  })();
})();