MediaWiki:Gadget-GrAnnotations.js - Revision history

Vaishnavi at 11:58, 30 September 2026

2026-09-30T11:58:42Z

@@ Line 948: / Line 948: @@
    // which build of this gadget a page is actually running. Check with
    //   window.grAnnotationsVersion
-   // Set false to drop "Retrieved <date>, from" and give just the URL.
+   // APA 7 asks for a retrieval date only when the content is designed to
-   var SHOW_RETRIEVAL_DATE = true;
+  // change and is not archived. These are settled texts with a fixed
    window.grAnnotationsVersion = '2026-09-30a';
@@ Line 1,003: / Line 1,005: @@
    // Titles of standalone works are italicised, which only the HTML flavour
    // of the clipboard can carry.
    function buildCitation(rec) {
      var src    = rec.citeSource || {};
-     var author = (src.author || '').trim();
+     var author = citationAuthor(src.author);
      var title  = (src.title  || '').trim();
      var anchor = rec.anchor || '';
@@ Line 1,214: / Line 1,234: @@
              // in a sentence, but it copies on click rather than earning a
              // button of its own.
              + '<div class="gra-bookmark-cite">'+cite.referenceHtml+'</div>'
              + '<div class="gra-cite-actions">'
              + '<button type="button" class="gra-cite-copy" data-cite-what="reference"'
@@ Line 1,519: / Line 1,542: @@
        if ($(e.target).hasClass('gra-bookmark-del')) return;
        if ($(e.target).hasClass('gra-cite-copy')) return;
        var id = $(this).attr('data-gra-id');
        if (id) { closePanel(); scrollToHighlight(id); }
      });
      $paneBookmarks.on('click', '.gra-cite-copy', function(e){

Vaishnavi at 11:32, 30 September 2026

2026-09-30T11:32:13Z

← Older revision		Revision as of 11:32, 30 September 2026
Line 948:		Line 948:
	// which build of this gadget a page is actually running. Check with		// which build of this gadget a page is actually running. Check with
	// window.grAnnotationsVersion		// window.grAnnotationsVersion
			// Set false to drop "Retrieved <date>, from" and give just the URL.
			var SHOW_RETRIEVAL_DATE = true;

	window.grAnnotationsVersion = '2026-09-30a';		window.grAnnotationsVersion = '2026-09-30a';

Line 1,023:		Line 1,026:
	}		}

	var tail = ' Retrieved ' + retrieved + ', from ' + url;		// APA 7 (section 9.16) asks for a retrieval date only when the content
			// is designed to change and is not archived. A wiki page can change, so
			// the date is defensible - but these are settled texts, and a reader may
			// reasonably prefer the shorter form. Set SHOW_RETRIEVAL_DATE to false
			// for: Author. (n.d.). Title. Site. URL
			var tail = SHOW_RETRIEVAL_DATE
			? ' Retrieved ' + retrieved + ', from ' + url
			: ' ' + url;
	var reference = head + (showSite ? ' ' + site + '.' : '') + tail;		var reference = head + (showSite ? ' ' + site + '.' : '') + tail;
	var referenceHtml = headHtml + (showSite ? ' ' + esc(site) + '.' : '')		var referenceHtml = headHtml + (showSite ? ' ' + esc(site) + '.' : '') + ' '
	+ ' Retrieved ' + esc(retrieved) + ', from '		+ (SHOW_RETRIEVAL_DATE ? 'Retrieved ' + esc(retrieved) + ', from ' : '')
	+ '<a href="' + esc(url) + '">' + esc(url) + '</a>';		+ '<a href="' + esc(url) + '">' + esc(url) + '</a>';

Vaishnavi at 11:04, 30 September 2026

2026-09-30T11:04:53Z

← Older revision		Revision as of 11:04, 30 September 2026
Line 588:		Line 588:
	'<button id="gra-toggle" aria-label="Notes">',		'<button id="gra-toggle" aria-label="Notes">',
	' <span class="gra-icon gra-icon-note" id="gra-toggle-icon" aria-hidden="true"></span>',		' <span class="gra-icon gra-icon-note" id="gra-toggle-icon" aria-hidden="true"></span>',
	~~' <span id="gra-toggle-badge" aria-live="polite"></span>',~~
	'</button>',		'</button>',
	].join('') );		].join('') );
Line 1,199:		Line 1,198:
	+ '<div class="gra-bookmark-name">'+esc(b.name)+'</div>'		+ '<div class="gra-bookmark-name">'+esc(b.name)+'</div>'
	+ (b.quote ? '<div class="gra-bookmark-quote">'+esc(b.quote)+'</div>' : '')		+ (b.quote ? '<div class="gra-bookmark-quote">'+esc(b.quote)+'</div>' : '')
			// One button. The reference already carries the work, the
			// locator's page and the link, so a separate "copy link" only
			// asked the reader to decide something they don't need to.
			// The in-text form stays on the card because it is what goes
			// in a sentence, but it copies on click rather than earning a
			// button of its own.
	+ '<div class="gra-bookmark-cite">'+cite.referenceHtml+'</div>'		+ '<div class="gra-bookmark-cite">'+cite.referenceHtml+'</div>'
	+ '<div class="gra-bookmark-intext">In text: '+esc(cite.inText)		+ '<div class="gra-bookmark-intext" data-cite-id="'+esc(b.id)+'"'
			+ ' title="Click to copy the in-text citation">In text: '+esc(cite.inText)
	+ (cite.locatorSpelled ? ' <span class="gra-cite-locator">('		+ (cite.locatorSpelled ? ' <span class="gra-cite-locator">('
	+ esc(cite.locatorSpelled) + ')</span>' : '')		+ esc(cite.locatorSpelled) + ')</span>' : '')
Line 1,206:		Line 1,212:
	+ '<div class="gra-cite-actions">'		+ '<div class="gra-cite-actions">'
	+ '<button type="button" class="gra-cite-copy" data-cite-what="reference"'		+ '<button type="button" class="gra-cite-copy" data-cite-what="reference"'
	+ ' data-cite-id="'+esc(b.id)+'">Copy ~~reference</button>'~~		+ ' data-cite-id="'+esc(b.id)+'">Copy citation</button>'
	~~+ '<button type="button" class="gra-cite-copy" data-cite-what="inText"'~~
	~~+ ' data-cite-id="'+esc(b.id)+'">Copy in-text</button>'~~
	~~+ '<button type="button" class="gra-cite-copy" data-cite-what="url"'~~
	~~+ ' data-cite-id="'+esc(b.id)+'">Copy link~~</button>'
	+ '</div>'		+ '</div>'
	+ '</div>'		+ '</div>'
Line 1,507:		Line 1,509:
	if ($(e.target).hasClass('gra-bookmark-del')) return;		if ($(e.target).hasClass('gra-bookmark-del')) return;
	if ($(e.target).hasClass('gra-cite-copy')) return;		if ($(e.target).hasClass('gra-cite-copy')) return;
			if ($(e.target).closest('.gra-bookmark-intext').length) return;
	var id = $(this).attr('data-gra-id');		var id = $(this).attr('data-gra-id');
	if (id) { closePanel(); scrollToHighlight(id); }		if (id) { closePanel(); scrollToHighlight(id); }
			});
			$paneBookmarks.on('click', '.gra-bookmark-intext', function(e){
			e.stopPropagation();
			var $el = $(this), id = $el.attr('data-cite-id');
			var rec = _bookmarks.filter(function(b){ return b.id === id; })[0];
			if (!rec) return;
			copyToClipboard(buildCitation(rec).inText, function(){
			$el.addClass('gra-intext--done');
			setTimeout(function(){ $el.removeClass('gra-intext--done'); }, 1200);
			});
	});		});
	$paneBookmarks.on('click', '.gra-cite-copy', function(e){		$paneBookmarks.on('click', '.gra-cite-copy', function(e){
Line 1,715:		Line 1,728:
	// the panel without opening it — worth having now that notes can arrive		// the panel without opening it — worth having now that notes can arrive
	// from another device.		// from another device.
	~~function updateBadge() {~~		// The count badge is gone. It sat on the round toggle, which clips its
	~~var n = _notes~~.~~length + _bookmarks.length;~~		// own overflow to stay circular, so the badge was cut off on every side
	~~var $b = $('#gra-toggle-~~badge~~');~~		// and told the reader nothing they could act on. Kept as a no-op so the
	~~if (!$b~~.~~length) return;~~		// five call sites that report a change still read clearly.
	$b.~~text~~(~~n > 99 ? '99+' : String(n~~)~~).css('display', n ? 'block' : 'none');~~		function updateBadge() { }
	}

	}() );		}() );

Vaishnavi at 07:21, 30 September 2026

2026-09-30T07:21:40Z

Show changes

Vaishnavi at 11:06, 29 September 2026

2026-09-29T11:06:43Z

Show changes

Vaishnavi at 10:37, 28 September 2026

2026-09-28T10:37:01Z

Show changes

Vaishnavi at 11:30, 3 September 2026

2026-09-03T11:30:51Z

← Older revision		Revision as of 11:30, 3 September 2026
Line 933:		Line 933:
	}		}

	// ~~CHANGED~~: ~~was targeting~~ .gra-hl-active — the ~~WRONG class. That one is~~		// REMOVED: injectAnnotationCss(), which JS-injected a defensive
	~~// used by scrollToHighlight (panel card clicked -> scrolls to text in~~		// .gra-card-active/.gra-hl-active rule here as a guess, since the real
	// the ~~document), which was already working correctly~~. ~~The actual~~		// gr_annotations.css wasn't available at the time. Now that it is,
	~~// reported gap~~ is ~~the OTHER direction — clicking a footnote/bookmark~~		// confirmed precisely: .gra-hl-active already had working CSS for
	// ~~IN THE DOCUMENT should scroll to and flash~~-~~highlight the~~		// notes and footnotes (that JS rule was unneeded there, though it did
	// ~~corresponding card in the panel —~~ and that ~~direction uses a~~		// fill a real gap for bookmarks' .gra-hl-active, which had none at
	// ~~DIFFERENT class,~~ .gra-~~card~~-active ~~(see the three highlight click~~		// all) — and .gra-card-active genuinely only had a rule for
	~~// handlers above). Confirmed directly: the note~~, ~~bookmark, and~~		// .gra-note-card, nothing for bookmark or footnote cards, confirming
	// ~~footnote click handlers are structurally identical in code (same~~		// that diagnosis exactly. The JS version also risked overriding the
	~~// addClass/scrollIntoView/removeClass sequence~~) — ~~the gap can only be~~		// existing, working note-card style with !important. Fixed directly
	~~// CSS, most likely~~ .gra-card-active ~~having~~ a rule ~~scoped to~~		// in gr_annotations.css instead — see that file.
	// .gra-note-card ~~(the oldest~~, ~~most established of the three) but no~~
	~~// matching rule~~ for ~~.gra-~~bookmark~~-card~~ or ~~.gra-~~footnote~~-card. This~~
	// ~~rule is unconditional across all three card classes~~.
	~~function injectAnnotationCss() {~~
	~~if (document.getElementById('gra-hl-active-css')) return;~~
	~~var css = [~~
	~~'.gra-hl-active{background:#fff176!important;border-radius:2px;box-shadow:0 0 0 2px #ffb300!important;transition:background 0.3s~~,~~box-shadow 0.3s;}',~~
	~~'.gra-~~note-card~~.gra-card-active,.gra-bookmark-card.gra-card-active,.gra-footnote-card.gra-card-active{background:#fdf0eb~~!important~~;box-shadow:0 0 0 2px #b5451b!important;transition:background 0~~.~~3s,box-shadow 0.3s;}',~~
	~~].join('\n');~~
	~~var style = document.createElement('style');~~
	~~style.id = 'gra-hl-active-css';~~
	~~style~~.~~textContent =~~ css;
	~~document~~.~~head.appendChild(style);~~
	}

	$(function() {		$(function() {
Line 964:		Line 950:
	_mobile = window.innerWidth < 768 \|\| 'ontouchstart' in window;		_mobile = window.innerWidth < 768 \|\| 'ontouchstart' in window;
	});		});
	~~injectAnnotationCss();~~
	buildDom();		buildDom();
	wireEvents();		wireEvents();

Vaishnavi at 11:20, 3 September 2026

2026-09-03T11:20:50Z

← Older revision		Revision as of 11:20, 3 September 2026
Line 820:		Line 820:
	setTimeout(function(){		setTimeout(function(){
	var $card = $paneBookmarks.find('[data-gra-id="'+id+'"]');		var $card = $paneBookmarks.find('[data-gra-id="'+id+'"]');
	if ($card.length) $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});		// CHANGED: was missing the gra-card-active flash entirely (only
			// notes and footnotes had it) — a separate inconsistency from
			// the CSS gap below. Now matches the other two exactly.
			if ($card.length) {
			$card.addClass('gra-card-active');
			$card[0].scrollIntoView({behavior:'smooth', block:'nearest'});
			setTimeout(function(){ $card.removeClass('gra-card-active'); }, 2000);
			}
	}, 100);		}, 100);
	});		});
Line 926:		Line 933:
	}		}

	// ~~NEW~~: ~~defensive fix for a reported gap~~ — ~~clicking a footnote (or~~		// CHANGED: was targeting .gra-hl-active — the WRONG class. That one is
	// ~~bookmark)~~ card in the ~~panel~~ correctly ~~scrolled to~~ the ~~right spot~~		// used by scrollToHighlight (panel card clicked -> scrolls to text in
	// ~~(confirmed directly: both the inline marker~~ and the ~~list item share~~		// the document), which was already working correctly. The actual
	// the ~~exact same data-gra-id,~~ and ~~scrollToHighlight's own logic is~~		// reported gap is the OTHER direction — clicking a footnote/bookmark
	// ~~fully generic~~, ~~not specific to notes at all), but~~ the ~~visual~~		// IN THE DOCUMENT should scroll to and flash-highlight the
	// ~~"flash" highlight wasn't visible~~. ~~Best-reasoned explanation~~, ~~not~~		// corresponding card in the panel — and that direction uses a
	// ~~confirmed against the actual site stylesheet~~ (~~not available here~~):		// DIFFERENT class, .gra-card-active (see the three highlight click
	// .gra-hl-active ~~likely has CSS specific~~ to ~~.gra-note-highlight /~~		// handlers above). Confirmed directly: the note, bookmark, and
	// .gra-~~bookmark~~-~~highlight~~ but no ~~matching rule for~~		// footnote click handlers are structurally identical in code (same
	// .gra-qe-footnote-~~highlight~~. This ~~rule is unconditional — the flash~~		// addClass/scrollIntoView/removeClass sequence) — the gap can only be
	// ~~renders the same way regardless of which of the~~ three classes ~~it's~~		// CSS, most likely .gra-card-active having a rule scoped to
	~~// combined with — so it's safe even if the actual cause turns out to~~		// .gra-note-card (the oldest, most established of the three) but no
	~~// be something else~~.		// matching rule for .gra-bookmark-card or .gra-footnote-card. This
			// rule is unconditional across all three card classes.
	function injectAnnotationCss() {		function injectAnnotationCss() {
	if (document.getElementById('gra-hl-active-css')) return;		if (document.getElementById('gra-hl-active-css')) return;
	var css = [		var css = [
	'.gra-hl-active{background:#fff176!important;border-radius:2px;box-shadow:0 0 0 2px #ffb300!important;transition:background 0.3s,box-shadow 0.3s;}',		'.gra-hl-active{background:#fff176!important;border-radius:2px;box-shadow:0 0 0 2px #ffb300!important;transition:background 0.3s,box-shadow 0.3s;}',
			'.gra-note-card.gra-card-active,.gra-bookmark-card.gra-card-active,.gra-footnote-card.gra-card-active{background:#fdf0eb!important;box-shadow:0 0 0 2px #b5451b!important;transition:background 0.3s,box-shadow 0.3s;}',
	].join('\n');		].join('\n');
	var style = document.createElement('style');		var style = document.createElement('style');

Vaishnavi at 11:17, 3 September 2026

2026-09-03T11:17:32Z

Show changes

Vaishnavi at 02:55, 2 September 2026

2026-09-02T02:55:24Z

Show changes