MediaWiki:Gadget-GrAnnotations.js: Difference between revisions
No edit summary |
No edit summary |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 472: | Line 472: | ||
html += '<div class="gra-note-card" data-gra-id="'+esc(n.id)+'">' | html += '<div class="gra-note-card" data-gra-id="'+esc(n.id)+'">' | ||
+ '<div class="gra-card-header">' | + '<div class="gra-card-header">' | ||
+ '< | + '<span class="gra-icon gra-icon-note" aria-hidden="true"></span>' | ||
+ '<div class="gra-card-meta">' | + '<div class="gra-card-meta">' | ||
+ (n.ts ? '<div class="gra-card-ts">'+esc(fmtTs(n.ts))+'</div>' : '') | + (n.ts ? '<div class="gra-card-ts">'+esc(fmtTs(n.ts))+'</div>' : '') | ||
| Line 545: | Line 545: | ||
}); | }); | ||
/* Mobile: show fab | /* Separate timers so mobile + desktop never clobber each other */ | ||
var _selTimer = null; /* desktop debounce */ | |||
var _mobShowTimer = null; /* mobile show-on-touchend */ | |||
/* Mobile: show fab quickly after finger lifts (selection settled). | |||
180ms feels instant while still letting the range stabilise. */ | |||
document.addEventListener('touchend', function(e) { | document.addEventListener('touchend', function(e) { | ||
if (!_mobile) return; | if (!_mobile) return; | ||
if ($fab[0] && $fab[0].contains(e.target)) return; | if ($fab[0] && $fab[0].contains(e.target)) return; | ||
clearTimeout(_mobShowTimer); | |||
clearTimeout( | _mobShowTimer = setTimeout(function() { | ||
var sel = window.getSelection(); | var sel = window.getSelection(); | ||
if (!sel || sel.isCollapsed || !sel.toString().trim()) return; | if (!sel || sel.isCollapsed || !sel.toString().trim()) return; | ||
tryShowActions(); | tryShowActions(); | ||
}, | }, 180); | ||
}, { passive: true }); | }, { passive: true }); | ||
/* Mobile: | /* Mobile: only HIDE the fab when selection is cleared while it's visible. | ||
(Reposition isn't needed now that the bar is docked, and re-running | |||
showFab here was causing the lag/flicker.) */ | |||
document.addEventListener('selectionchange', function() { | document.addEventListener('selectionchange', function() { | ||
if (!_mobile) return; | if (!_mobile) return; | ||
if (!$fab.hasClass('gra-fab-visible')) return; | if (!$fab.hasClass('gra-fab-visible')) return; | ||
var sel = window.getSelection(); | |||
if (!sel || sel.isCollapsed || !sel.toString().trim()) { | |||
clearTimeout(_mobShowTimer); | |||
hideActions(); | |||
} | |||
} | |||
}); | }); | ||
/* selectionchange debounced (desktop) */ | /* selectionchange debounced (desktop only) */ | ||
document.addEventListener('selectionchange', function() { | document.addEventListener('selectionchange', function() { | ||
if (_mobile) return; | |||
_selVersion++; | _selVersion++; | ||
clearTimeout(_selTimer); | clearTimeout(_selTimer); | ||
| Line 582: | Line 584: | ||
if (v !== _selVersion) return; | if (v !== _selVersion) return; | ||
if (_fabSelVer === v) return; | if (_fabSelVer === v) return; | ||
tryShowActions(); | tryShowActions(); | ||
}, 600); | }, 600); | ||