bipp-sneltoetsen: Zoeken, Reset, Nieuw, Opslaan, Indienen, Terug (1.1.0)
Ctrl+Z/R/N/S/I/T next to Ctrl+B, one table of label, letter, key. Hints for all buttons while Ctrl is held. BIPP's own title kept, shortcut on a line below. AGENTS.md: Claude installs the dev-stub itself, only the Install click is left, pick the UA Chrome profile. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Glenn Goossens
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
6d9ae45a2f
commit
3b2528d72a
@@ -1,15 +1,28 @@
|
||||
# bipp-sneltoetsen
|
||||
|
||||
Ctrl+B drukt in BIPP op *Bevestigen*. Op de knop is de B onderstreept, de tooltip toont *Ctrl+B*, en zolang je Ctrl ingedrukt houdt verschijnt *Ctrl+B* boven de knop.
|
||||
Ctrl+letter drukt in BIPP op een knop. De letter is onderstreept, de tooltip toont de sneltoets, en zolang je Ctrl ingedrukt houdt verschijnt de sneltoets boven elke knop die er een heeft.
|
||||
|
||||
| toets | knop | waar |
|
||||
| ------ | ---------- | ------------------------------------------------- |
|
||||
| Ctrl+B | Bevestigen | Aanvraag evalueren, bestelbon detail |
|
||||
| Ctrl+Z | Zoeken | Artikelen, Favorietenlijsten, Aanvragen, Bestelbonnen, Ontvangstregistratie |
|
||||
| Ctrl+R | Reset | idem |
|
||||
| Ctrl+N | Nieuw | Artikelen, Favorietenlijsten |
|
||||
| Ctrl+S | Opslaan | Winkelmandje, bestelbon detail |
|
||||
| Ctrl+I | Indienen | Winkelmandje |
|
||||
| Ctrl+T | Terug | detailpagina's |
|
||||
|
||||
Verwijderen, Annuleren en In wachtstand krijgen bewust geen sneltoets: die zijn niet terug te draaien of komen zelden voor.
|
||||
|
||||
[**Installeren**](https://raw.githubusercontent.com/glgoose/ua-userscripts/main/scripts/bipp-sneltoetsen/bipp-sneltoetsen.user.js)
|
||||
· gebeurt er niets, zie de [installatie-uitleg](../../README.md).
|
||||
|
||||
## Hoe het werkt
|
||||
|
||||
- Het script zoekt op elke pagina onder `/web/` de eerste zichtbare, actieve knop met het label *Bevestigen*. Is er geen, dan doet Ctrl+B niets.
|
||||
- Ctrl+B werkt ook in tekstvelden. Op macOS betekent het daar normaal "cursor één teken terug" (Emacs-binding), die je dan niet meer hebt.
|
||||
- De onderstreping en de hint verschuiven niets: ze staan `position:absolute` buiten de flow. Bij een `<input>` kan de letter niet onderstreept worden met HTML, dus komt er een lijntje over, berekend uit de lettermaat.
|
||||
- Het script zoekt op elke pagina onder `/web/` per sneltoets de eerste zichtbare, actieve knop met dat label. Is er geen, dan doet de toets niets en gaat hij gewoon door naar de browser.
|
||||
- Op macOS gebruikt Chrome Cmd voor zijn eigen sneltoetsen, dus Ctrl+letter is vrij. In tekstvelden zijn sommige Ctrl-letters Emacs-bindings (Ctrl+B één teken terug, Ctrl+N volgende regel, Ctrl+T letters wisselen): die heb je in BIPP niet meer.
|
||||
- Zet BIPP zelf al een tooltip op de knop (Bevestigen, Indienen), dan komt de sneltoets op een eigen regel eronder.
|
||||
- De onderstreping en de hints verschuiven niets: ze staan `position:absolute` buiten de flow. Bij een `<input>` kan de letter niet onderstreept worden met HTML, dus komt er een lijntje onder, berekend uit de lettermaat.
|
||||
- Pagina's die hun knoppen later opbouwen krijgen tot 15 seconden de tijd.
|
||||
|
||||
## Licentie
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// ==UserScript==
|
||||
// @name BIPP: sneltoets Ctrl+B voor Bevestigen
|
||||
// @name BIPP: sneltoetsen voor knoppen
|
||||
// @namespace https://github.com/glgoose/ua-userscripts
|
||||
// @version 1.0.0
|
||||
// @description Ctrl+B drukt op Bevestigen. De B in de knop is onderstreept en bij ingedrukte Ctrl verschijnt Ctrl+B boven de knop.
|
||||
// @version 1.1.0
|
||||
// @description Ctrl+letter drukt op Bevestigen (B), Zoeken (Z), Reset (R), Nieuw (N), Opslaan (S), Indienen (I) en Terug (T). De letter is onderstreept en bij ingedrukte Ctrl verschijnt de sneltoets boven de knop.
|
||||
// @author glgoose
|
||||
// @license GPL-3.0-or-later
|
||||
// @homepageURL https://github.com/glgoose/ua-userscripts/tree/main/scripts/bipp-sneltoetsen
|
||||
@@ -16,32 +16,43 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var LABEL = 'bevestigen';
|
||||
var HINT = 'Ctrl+B';
|
||||
// Knoplabel (kleine letters), de letter die onderstreept wordt, en de toets.
|
||||
var KEYS = [
|
||||
{ label: 'bevestigen', letter: 'b', code: 'KeyB' },
|
||||
{ label: 'zoeken', letter: 'z', code: 'KeyZ' },
|
||||
{ label: 'reset', letter: 'r', code: 'KeyR' },
|
||||
{ label: 'nieuw', letter: 'n', code: 'KeyN' },
|
||||
{ label: 'opslaan', letter: 's', code: 'KeyS' },
|
||||
{ label: 'indienen', letter: 'i', code: 'KeyI' },
|
||||
{ label: 'terug', letter: 't', code: 'KeyT' }
|
||||
];
|
||||
var MARK = 'data-bipp-sneltoets';
|
||||
|
||||
function hint(k) { return 'Ctrl+' + k.letter.toUpperCase(); }
|
||||
|
||||
function norm(s) { return (s || '').replace(/\s+/g, ' ').trim().toLowerCase(); }
|
||||
|
||||
function visible(el) { return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length); }
|
||||
|
||||
// Eerste zichtbare, actieve knop met dit label. Een postback-pagina kan er verborgen kopieën van hebben.
|
||||
function findButton() {
|
||||
function findButton(k) {
|
||||
var btns = document.querySelectorAll('input[type="submit"], input[type="button"], button');
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
var b = btns[i];
|
||||
if (norm(b.value || b.textContent) === LABEL && !b.disabled && visible(b)) return b;
|
||||
if (norm(b.value || b.textContent) === k.label && !b.disabled && visible(b)) return b;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// <button>: de B in een <u>. <input> kan geen HTML bevatten, dus daar komt een lijntje over de letter.
|
||||
function underline(btn) {
|
||||
// <button>: de letter in een <u>. <input> kan geen HTML bevatten, dus daar komt een lijntje onder de letter.
|
||||
function underline(btn, k) {
|
||||
if (btn.getAttribute(MARK)) return;
|
||||
btn.setAttribute(MARK, '1');
|
||||
if (!btn.title) btn.title = HINT;
|
||||
btn.setAttribute(MARK, k.letter);
|
||||
// BIPP zet soms zelf een title (Bevestigen): dan komt de sneltoets op een eigen regel eronder.
|
||||
btn.title = btn.title ? btn.title + '\n' + hint(k) : hint(k);
|
||||
if (btn.tagName === 'BUTTON' && btn.children.length === 0) {
|
||||
var t = btn.textContent;
|
||||
var i = t.toLowerCase().indexOf('b');
|
||||
var i = t.toLowerCase().indexOf(k.letter);
|
||||
btn.textContent = '';
|
||||
btn.appendChild(document.createTextNode(t.slice(0, i)));
|
||||
var u = document.createElement('u');
|
||||
@@ -50,18 +61,18 @@
|
||||
btn.appendChild(document.createTextNode(t.slice(i + 1)));
|
||||
return;
|
||||
}
|
||||
drawLine(btn);
|
||||
window.addEventListener('resize', function () { drawLine(btn); });
|
||||
drawLine(btn, k);
|
||||
window.addEventListener('resize', function () { drawLine(btn, k); });
|
||||
}
|
||||
|
||||
function drawLine(btn) {
|
||||
function drawLine(btn, k) {
|
||||
var old = btn.nextSibling && btn.nextSibling.getAttribute && btn.nextSibling.getAttribute(MARK + '-line');
|
||||
if (old) btn.parentNode.removeChild(btn.nextSibling);
|
||||
var cs = getComputedStyle(btn);
|
||||
var ctx = document.createElement('canvas').getContext('2d');
|
||||
ctx.font = cs.fontStyle + ' ' + cs.fontWeight + ' ' + cs.fontSize + ' ' + cs.fontFamily;
|
||||
var text = btn.value || btn.textContent;
|
||||
var i = text.toLowerCase().indexOf('b');
|
||||
var i = text.toLowerCase().indexOf(k.letter);
|
||||
var before = ctx.measureText(text.slice(0, i)).width;
|
||||
var letter = ctx.measureText(text.charAt(i)).width;
|
||||
var total = ctx.measureText(text).width;
|
||||
@@ -77,39 +88,51 @@
|
||||
btn.parentNode.insertBefore(line, btn.nextSibling);
|
||||
}
|
||||
|
||||
var tip = null;
|
||||
function showTip() {
|
||||
var btn = findButton();
|
||||
if (!btn) return;
|
||||
hideTip();
|
||||
var r = btn.getBoundingClientRect();
|
||||
tip = document.createElement('span');
|
||||
tip.textContent = 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.top + window.scrollY - 22) + 'px;transform:translateX(-50%)';
|
||||
document.body.appendChild(tip);
|
||||
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 = hint(k);
|
||||
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.top + window.scrollY - 22) + 'px;transform:translateX(-50%)';
|
||||
document.body.appendChild(tip);
|
||||
tips.push(tip);
|
||||
});
|
||||
}
|
||||
function hideTips() {
|
||||
tips.forEach(function (t) { if (t.parentNode) t.parentNode.removeChild(t); });
|
||||
tips = [];
|
||||
}
|
||||
function hideTip() { if (tip && tip.parentNode) tip.parentNode.removeChild(tip); tip = null; }
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Control') { if (!e.repeat) showTip(); return; }
|
||||
if (e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && e.code === 'KeyB') {
|
||||
var btn = findButton();
|
||||
if (e.key === 'Control') { if (!e.repeat) showTips(); return; }
|
||||
if (!e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
|
||||
for (var i = 0; i < KEYS.length; i++) {
|
||||
if (e.code !== KEYS[i].code) continue;
|
||||
var btn = findButton(KEYS[i]);
|
||||
if (!btn) return;
|
||||
e.preventDefault();
|
||||
hideTip();
|
||||
hideTips();
|
||||
btn.click();
|
||||
return;
|
||||
}
|
||||
}, true);
|
||||
document.addEventListener('keyup', function (e) { if (e.key === 'Control') hideTip(); }, true);
|
||||
window.addEventListener('blur', hideTip);
|
||||
document.addEventListener('keyup', function (e) { if (e.key === 'Control') 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 btn = findButton();
|
||||
if (btn) { underline(btn); return; }
|
||||
if (++tries < 30) setTimeout(init, 500);
|
||||
var left = 0;
|
||||
KEYS.forEach(function (k) {
|
||||
var btn = findButton(k);
|
||||
if (btn) underline(btn, k); else left++;
|
||||
});
|
||||
if (left && ++tries < 30) setTimeout(init, 500);
|
||||
})();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user