MediaWiki:Gadget-GrAnnotations.js - Revision history

Vaishnavi at 11:05, 28 July 2026

2026-07-28T11:05:26Z

← Older revision		Revision as of 11:05, 28 July 2026
Line 544:		Line 544:
	Array.prototype.forEach.call(items, function (li) {		Array.prototype.forEach.call(items, function (li) {
	var numEl = li.querySelector('.gra-qe-footnote-num');		var numEl = li.querySelector('.gra-qe-footnote-num');
	var textEl = li.querySelector('~~span:last~~-~~child~~');		var quoteEl = li.querySelector('.gra-qe-footnote-quote');
			var textEl = li.querySelector('.gra-qe-footnote-text');
	var num = numEl ? numEl.textContent.trim() : '';		var num = numEl ? numEl.textContent.trim() : '';
	~~var text = textEl ? textEl.textContent~~ : ~~li.textContent;~~		// CHANGED: was showing the NUMBER as the card's primary line and the
	// ~~CHANGED: li.id no longer exists (~~footnote ~~items only carry~~		// footnote's own note text as secondary — nowhere did it show WHICH
	// ~~data-gra-id now — see quickedit.js's redesign~~, which ~~fixed a~~		// text in the document the footnote actually belongs to, which was
	// ~~duplicate-id bug the old id= approach had). Also reuses~~ the		// the whole point of being able to identify one footnote from
	// ~~EXACT~~ .~~gra-bookmark-card / .gra-bookmark-info classes so this~~		// another. Now shows the referenced quote as primary (matching how
	// ~~matches~~ Notes/Bookmarks ~~styling~~ with ~~zero new CSS needed, rather~~		// Notes/Bookmarks already identify themselves by quote, not by an
	// ~~than inventing separate~~ .~~gra-~~footnote~~-card rules that would need~~		// arbitrary id), with the number as a small prefix and the
	// ~~to be kept in sync by hand~~.		// footnote's own note text as secondary. Falls back to the note
			// text alone if a footnote predates this change and has no quote
			// span at all, rather than showing nothing.
			var quote = quoteEl ? quoteEl.textContent : '';
			var text = textEl ? textEl.textContent : (quoteEl ? '' : li.textContent);
			var primary = quote ? (num + ' ' + quote) : (num + ' ' + text);
	var id = li.getAttribute('data-gra-id') \|\| '';		var id = li.getAttribute('data-gra-id') \|\| '';
	html += '<div class="gra-bookmark-card gra-footnote-card" data-gra-id="'+esc(id)+'">'		html += '<div class="gra-bookmark-card gra-footnote-card" data-gra-id="'+esc(id)+'">'
	+ '<span class="gra-icon gra-icon-footnote" aria-hidden="true"></span>'		+ '<span class="gra-icon gra-icon-footnote" aria-hidden="true"></span>'
	+ '<div class="gra-bookmark-info">'		+ '<div class="gra-bookmark-info">'
	+ '<div class="gra-bookmark-name">'+esc(~~num~~)+'</div>'		+ '<div class="gra-bookmark-name">'+esc(primary)+'</div>'
	+ '<div class="gra-bookmark-quote">'+esc(text)+'</div>'		+ (quote ? '<div class="gra-bookmark-quote">'+esc(text)+'</div>' : '')
	+ '</div>'		+ '</div>'
	+ '</div>';		+ '</div>';

Vaishnavi at 20:02, 27 July 2026

2026-07-27T20:02:39Z

← Older revision		Revision as of 20:02, 27 July 2026
Line 547:		Line 547:
	var num = numEl ? numEl.textContent.trim() : '';		var num = numEl ? numEl.textContent.trim() : '';
	var text = textEl ? textEl.textContent : li.textContent;		var text = textEl ? textEl.textContent : li.textContent;
	html += '<div class="gra-footnote-card" data-gra-id="'+esc(~~li.~~id)+'">'		// CHANGED: li.id no longer exists (footnote items only carry
			// data-gra-id now — see quickedit.js's redesign, which fixed a
			// duplicate-id bug the old id= approach had). Also reuses the
			// EXACT .gra-bookmark-card / .gra-bookmark-info classes so this
			// matches Notes/Bookmarks styling with zero new CSS needed, rather
			// than inventing separate .gra-footnote-card rules that would need
			// to be kept in sync by hand.
			var id = li.getAttribute('data-gra-id') \|\| '';
			html += '<div class="gra-bookmark-card gra-footnote-card" data-gra-id="'+esc(id)+'">'
	+ '<span class="gra-icon gra-icon-footnote" aria-hidden="true"></span>'		+ '<span class="gra-icon gra-icon-footnote" aria-hidden="true"></span>'
	+ '<div class="gra-~~footnote~~-info">'		+ '<div class="gra-bookmark-info">'
	+ '<div class="gra-~~footnote~~-~~num~~">'+esc(num)+'</div>'		+ '<div class="gra-bookmark-name">'+esc(num)+'</div>'
	+ '<div class="gra-~~footnote~~-~~text~~">'+esc(text)+'</div>'		+ '<div class="gra-bookmark-quote">'+esc(text)+'</div>'
	+ '</div>'		+ '</div>'
	+ '</div>';		+ '</div>';
Line 758:		Line 766:
	if (id) deleteBookmark(id);		if (id) deleteBookmark(id);
	});		});
	// ~~NEW~~: ~~Direction 1 — click a~~ footnote ~~card in the panel: scroll the~~		// CHANGED: footnote highlights now carry data-gra-id (see quickedit.js's
	// ~~MAIN TEXT to its~~ marker ~~(not another card — footnotes' source of~~		// redesign — plain highlight span, no href/marker element anymore), so
	// ~~truth is~~ the ~~page text, unlike~~ Notes/Bookmarks).		// this can reuse the EXACT same scrollToHighlight(id) helper Notes/
			// Bookmarks already use below, instead of custom href-parsing logic
			// that broke every time the marker format changed.
	$paneFootnotes.on('click', '.gra-footnote-card', function(){		$paneFootnotes.on('click', '.gra-footnote-card', function(){
	var id = $(this).attr('data-gra-id');		var id = $(this).attr('data-gra-id');
	if (!id) ~~return;~~		if (id) { closePanel(); scrollToHighlight(id); }
	~~var marker = document.querySelector('.gra-qe-footnote-ref a[href="#' + id + '"]');~~
	~~if (!marker) return;~~
	closePanel();
	~~marker.scrollIntoView~~(~~{behavior:'smooth', block:'center'});~~
	~~marker.closest('.gra-qe-footnote-ref').classList.add('gra-hl-active');~~
	~~setTimeout(function(){~~
	~~marker.closest('.gra-qe-footnote-ref').classList.remove('gra-hl-active'~~);
	}~~, 2000);~~
	});		});

Line 794:		Line 796:
	}, 100);		}, 100);
	});		});
	// ~~NEW~~: ~~Direction 2 — click~~ a ~~footnote MARKER in the text: open the~~		// CHANGED: was .gra-qe-footnote-ref a with e.preventDefault() (it used
	// ~~panel on the Footnotes tab~~, ~~scroll~~/~~highlight the matching card.~~		// to be a real link). Now a plain highlight span, same as notes/
	// ~~Prevents the marker's native #fragment jump so the experience is~~		// bookmarks — no href to prevent, id read directly via data-gra-id,
	// ~~consistently panel-based, matching~~ the two ~~handlers just~~ above.		// and the handler is now identical in shape to the two right above it.
	$(CONTENT_SEL).on('click', '.gra-qe-footnote-~~ref a~~', function(e){		$(CONTENT_SEL).on('click', '.gra-qe-footnote-highlight', function(){
	~~e.preventDefault();~~		var id = $(this).attr('data-gra-id');
	var id = $(this).attr('~~href~~'~~).slice(1~~);
	openPanel('footnotes');		openPanel('footnotes');
	setTimeout(function(){		setTimeout(function(){

Vaishnavi at 18:59, 27 July 2026

2026-07-27T18:59:42Z

Show changes

Vaishnavi at 09:42, 11 July 2026

2026-07-11T09:42:30Z

← Older revision		Revision as of 09:42, 11 July 2026
Line 217:		Line 217:
	document.querySelector('.se-outer');		document.querySelector('.se-outer');
	if ( _editorEl && _editorEl.contains(ancestor) ) return false;		if ( _editorEl && _editorEl.contains(ancestor) ) return false;
			if ( document.body.classList.contains('gra-editing') ) return false;
	_selText = text;		_selText = text;
	_selRect = range.getBoundingClientRect();		_selRect = range.getBoundingClientRect();

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>',