MediaWiki:Gadget-GrAnnotations.js - Revision history

Vaishnavi at 19:07, 12 June 2026

2026-06-12T19:07:44Z

← Older revision		Revision as of 19:07, 12 June 2026
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-~~bookmark~~" aria-hidden="true"></span>'		+ '<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>' : '')

Vaishnavi at 19:07, 12 June 2026

2026-06-12T19:07:00Z

← Older revision		Revision as of 19:07, 12 June 2026
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">'
	+ '<~~div~~ class="gra-~~avatar~~">✎</~~div~~>'		+ '<span class="gra-icon gra-icon-bookmark" 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>' : '')

Vaishnavi at 07:57, 11 June 2026

2026-06-11T07:57:14Z

← Older revision		Revision as of 07:57, 11 June 2026
Line 81:		Line 81:
	' </button>',		' </button>',
	' <button class="gra-fab-btn gra-fab-btn-dismiss" id="gra-fab-dismiss" type="button" aria-label="Dismiss">',		' <button class="gra-fab-btn gra-fab-btn-dismiss" id="gra-fab-dismiss" type="button" aria-label="Dismiss">',
	' <span class="gra-icon gra-icon-dismiss" aria-hidden="true">~~\u2715~~</span>',		' <span class="gra-icon gra-icon-dismiss" aria-hidden="true"></span>',
	' <span class="gra-fab-btn-label">Close</span>',		' <span class="gra-fab-btn-label">Close</span>',
	' </button>',		' </button>',

Vaishnavi at 07:55, 11 June 2026

2026-06-11T07:55:43Z

← Older revision		Revision as of 07:55, 11 June 2026
Line 81:		Line 81:
	' </button>',		' </button>',
	' <button class="gra-fab-btn gra-fab-btn-dismiss" id="gra-fab-dismiss" type="button" aria-label="Dismiss">',		' <button class="gra-fab-btn gra-fab-btn-dismiss" id="gra-fab-dismiss" type="button" aria-label="Dismiss">',
	' <span class="gra-icon gra-icon-dismiss" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-dismiss" aria-hidden="true">\u2715</span>',
	' <span class="gra-fab-btn-label">Close</span>',		' <span class="gra-fab-btn-label">Close</span>',
	' </button>',		' </button>',
Line 123:		Line 123:
	$ntComposer = $( [		$ntComposer = $( [
	'<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',		'<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',
	' <div class="gra~~-bm~~-composer-~~label~~">',		' <div class="gra-composer-user">',
	' <~~span~~ class="gra-~~icon gra-icon-note" aria-hidden="true~~"></~~span~~>',		' <div class="gra-avatar">' + esc(currentUser ? userInitial : '✎') + '</div>',
	' <~~span~~> ~~Add Note~~ </~~span~~>',		' <div class="gra-composer-uname">' + esc(currentUser \|\| 'Notes') + '</div>',
	' </div>',		' </div>',
	' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',		' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',
	' <div class="gra-composer-actions">',		' <div class="gra-composer-actions">',
	' <button class="gra-btn-cancel" id="gra-nt-cancel">Cancel</button>',		' <button class="gra-btn-cancel" id="gra-nt-cancel">Cancel</button>',
	' <button class="gra-btn-submit" id="gra-nt-submit" disabled>Save</button>',		' <button class="gra-btn-submit" id="gra-nt-submit" disabled>Save Note</button>',
	' </div>',		' </div>',
	'</div>',		'</div>',
Line 140:		Line 140:
	' <div class="gra-bm-composer-label">',		' <div class="gra-bm-composer-label">',
	' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
	' ~~<span>~~ Save bookmark ~~</span>~~',		' Save bookmark',
	' </div>',		' </div>',
	' <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',		' <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',
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~~"></~~span~~>'		+ '<div class="gra-avatar">✎</div>'
	+ '<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 ~~once~~ selection ~~settles (~350ms, alongside native menu~~).		/* Separate timers so mobile + desktop never clobber each other */
	~~Strategy B: don't race~~ the ~~native menu — appear with it, in our own space~~. */		var _selTimer = null; /* desktop debounce */
	~~var _lastTouchEnd = 0;~~		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;
	~~_lastTouchEnd = Date.now();~~		clearTimeout(_mobShowTimer);
	clearTimeout(~~_selTimer~~);		_mobShowTimer = setTimeout(function() {
	~~_selTimer~~ = 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();
	}, ~~350~~);		}, 180);
	}, { passive: true });		}, { passive: true });

	/* Mobile: ~~reposition~~ fab ~~live~~ while ~~user drags~~ the ~~selection handles~~,		/* Mobile: only HIDE the fab when selection is cleared while it's visible.
	~~hide it if selection is cleared~~ */		(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;
	~~clearTimeout(_selTimer);~~		var sel = window.getSelection();
	~~_selTimer = setTimeout(function() {~~		if (!sel \|\| sel.isCollapsed \|\| !sel.toString().trim()) {
	var sel = window.getSelection();		clearTimeout(_mobShowTimer);
	if (!sel \|\| sel.isCollapsed \|\| !sel.toString().trim()) { ~~hideActions~~(); ~~return; }~~		hideActions();
	~~if (captureSelection~~(~~)) showFab(_selRect~~);		}
	}~~, 250);~~
	});		});

	/* selectionchange debounced (desktop) */		/* selectionchange debounced (desktop only) */
	~~var _selTimer = null;~~
	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;
	~~if (_mobile) return; /* mobile uses touchend instead */~~
	tryShowActions();		tryShowActions();
	}, 600);		}, 600);

Vaishnavi at 19:50, 10 June 2026

2026-06-10T19:50:07Z

← Older revision		Revision as of 19:50, 10 June 2026
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">'
	+ '<~~div~~ class="gra-~~avatar~~">✎</~~div~~>'		+ '<span class="gra-icon gra-icon-note"></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>' : '')

Vaishnavi at 19:33, 10 June 2026

2026-06-10T19:33:03Z

← Older revision		Revision as of 19:33, 10 June 2026
Line 93:		Line 93:
	$fbComposer = $( [		$fbComposer = $( [
	'<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',		'<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',
	' <div class="gra-composer-~~label~~">',		' <div class="gra-composer-header">',
	' <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',
	' <strong>Feedback</strong>',		' <strong>Feedback</strong>',

Vaishnavi at 19:31, 10 June 2026

2026-06-10T19:31:51Z

← Older revision		Revision as of 19:31, 10 June 2026
Line 93:		Line 93:
	$fbComposer = $( [		$fbComposer = $( [
	'<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',		'<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',
	' <div class="gra-composer-~~header~~">',		' <div class="gra-composer-label">',
	' <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',
	' <strong>Feedback</strong>',		' <strong>Feedback</strong>',

Vaishnavi at 19:28, 10 June 2026

2026-06-10T19:28:30Z

← Older revision		Revision as of 19:28, 10 June 2026
Line 130:		Line 130:
	' <div class="gra-composer-actions">',		' <div class="gra-composer-actions">',
	' <button class="gra-btn-cancel" id="gra-nt-cancel">Cancel</button>',		' <button class="gra-btn-cancel" id="gra-nt-cancel">Cancel</button>',
	' <button class="gra-btn-submit" id="gra-nt-submit" disabled>Save ~~Note~~</button>',		' <button class="gra-btn-submit" id="gra-nt-submit" disabled>Save</button>',
	' </div>',		' </div>',
	'</div>',		'</div>',

Vaishnavi at 19:24, 10 June 2026

2026-06-10T19:24:47Z

← Older revision		Revision as of 19:24, 10 June 2026
Line 125:		Line 125:
	' <div class="gra-bm-composer-label">',		' <div class="gra-bm-composer-label">',
	' <span class="gra-icon gra-icon-note" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-note" aria-hidden="true"></span>',
	' Add Note',		' <span> Add Note </span>',
	' </div>',		' </div>',
	' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',		' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',
Line 140:		Line 140:
	' <div class="gra-bm-composer-label">',		' <div class="gra-bm-composer-label">',
	' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
	' Save bookmark',		' <span> Save bookmark </span>',
	' </div>',		' </div>',
	' <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',		' <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',

Vaishnavi at 19:09, 10 June 2026

2026-06-10T19:09:50Z

← Older revision		Revision as of 19:09, 10 June 2026
Line 123:		Line 123:
	$ntComposer = $( [		$ntComposer = $( [
	'<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',		'<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',
	' <div class="gra-composer-~~user~~">',		' <div class="gra-bm-composer-label">',
	' <~~div~~ class="gra-~~avatar~~">~~' + esc(currentUser ? userInitial : '✎') + '~~</~~div~~>',		' <span class="gra-icon gra-icon-note" aria-hidden="true"></span>',
	' ~~<div class="gra-composer-uname">' + esc(currentUser \|\| 'Notes') + '</div>~~',		' Add Note',
	' </div>',		' </div>',
	' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',		' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',