MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

Line 544:

Array.prototype.forEach.call(items, function (li) {

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 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') || '';

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

+ '<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>';

@@ Line 544: / Line 544: @@
      Array.prototype.forEach.call(items, function (li) {
        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 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') || '';
        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>'
              + '<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>';