Anandamakaranda

MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
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');
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Gadget-GrAnnotations.js"