MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

  * gr_annotations.js  —  grantha.io inline Comments + Bookmarks (v2)

  * CHANGES FROM v1

*  (logged-in, falls back to mailto: if email not configured).

  * • Email target changed to feedback@anandamakaranda.in.

  * 1. User selects text anywhere in #mw-content-text (desktop mouse or

*    mobile long-press).

  * 2. FAB strip (Comment / Bookmark) appears near the selection.

  *    – Opens composer. Anonymous users see a "Your name" field.

  *    – On submit: wraps selection in yellow highlight, saves to wiki,

  *      emails feedback@anandamakaranda.in, updates panel.

  *    – Opens name composer. Saves to localStorage, wraps in blue highlight.

  * 5. Right panel (slide-in overlay):

  *    – Tab 1: Comments   (loaded from Talk page)

  *    – Tab 2: Bookmarks (localStorage)

  * Comments  → Talk:<PageTitle>/GrComments  ({{GrComment|…}} templates)

  * Bookmarks → localStorage key grantha_bm_<pageName>

  * Highlight anchors → localStorage key grantha_cmt_<pageName>

  * NOTIFICATION

  * Logged-in : MW EmailUser API → feedback@anandamakaranda.in (admin account)

  *             Falls back to Talk page notification + mailto: link.

  * Anonymous : Opens mailto:feedback@anandamakaranda.in in a new tab.

  *             The comment is still stored on the wiki Talk page.

   var FEEDBACK_EMAIL = 'feedback@anandamakaranda.in';

   var CONTENT_SEL   = '#mw-content-text';

   var BM_LS_KEY     = 'grantha_bm_'  + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

   var CMT_LS_KEY   = 'grantha_cmt_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

   var pageTitle     = ( window.mw && mw.config.get( 'wgPageName' ) ) || '';

   var commentsPage = 'Talk:' + pageTitle + '/GrComments';

   var currentUser   = ( window.mw && mw.config.get( 'wgUserName' ) ) || '';

   var userInitial   = currentUser ? currentUser.charAt( 0 ).toUpperCase() : '?';

   // Run on all content namespaces except the /GrComments page itself

     if ( /\/GrComments$/.test( pageTitle ) ) return;

   var _selRange  = null;

   var _selText    = '';

   var _selRect    = null;

   var _comments  = [];

   var _bookmarks  = [];

   var _activeTab  = 'comments';

 

  var _fabSelVer  = -1;  // the _selVersion when FAB was last shown

   function clamp( v, lo, hi ) { return Math.max(lo, Math.min(hi, v)); }

  function isMobile() { return window.innerWidth < 768 || 'ontouchstart' in window; }

   // ── DOM references ───────────────────────────────────────────────────

   var $fab, $panel, $backdrop;

   var $cmpComposer, $cmpInput, $cmpSubmit, $cmpName;

     // ── FAB strip ────────────────────────────────────────────────────

       '<div id="gra-fab" role="toolbar" aria-label="टिप्पणी / चिह्नांकन">',

       '  <button class="gra-fab-btn" id="gra-fab-comment" type="button" aria-label="टिप्पणी जोड़ें">',

       '    <span class="gra-icon gra-icon-comment" aria-hidden="true"></span>',

       '    <span class="gra-fab-tooltip">टिप्पणी</span>',

       '  <button class="gra-fab-btn" id="gra-fab-bookmark" type="button" aria-label="चिह्नांकन">',

       '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',

       '    <span class="gra-fab-tooltip">चिह्नांकन</span>',

     // ── Comment composer ─────────────────────────────────────────────

 

       '<div class="gra-composer" id="gra-cmp-composer" role="dialog" aria-label="टिप्पणी जोड़ें">',

       '    <div class="gra-avatar" id="gra-cmp-avatar">' + esc(currentUser ? userInitial : '?') + '</div>',

       '    <div class="gra-composer-uname">' + esc(currentUser || 'अतिथि') + '</div>',

       '    placeholder="टिप्पणी लिखें…" rows="3"></textarea>',

       '    <button class="gra-btn-cancel" id="gra-cmp-cancel">रद्द</button>',

       '    <button class="gra-btn-submit" id="gra-cmp-submit" disabled>भेजें</button>',

     $( 'body' ).append( $cmpComposer );

     // ── Bookmark composer ─────────────────────────────────────────────

       '<div class="gra-bm-composer" id="gra-bm-composer" role="dialog" aria-label="चिह्नांकन">',

       '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',

       '    चिह्नांकन सहेजें',

       '    type="text" placeholder="नाम दें…" autocomplete="off">',

       '    <button class="gra-btn-cancel" id="gra-bm-cancel">रद्द</button>',

       '    <button class="gra-btn-submit" id="gra-bm-submit">सहेजें</button>',

       '<div id="gra-panel" role="complementary" aria-label="टिप्पणियाँ">',

       '    <div id="gra-panel-title"></div>',

       '    <button id="gra-panel-close" title="बन्द करें">✕</button>',

       '      <span class="gra-icon gra-icon-comment" aria-hidden="true"></span> टिप्पण्यः',

       '      <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span> चिह्नाः',

     $backdrop = $( '<div id="gra-backdrop" aria-hidden="true"></div>' );

     // Toggle FAB (bottom-right, persistent)

       '<button id="gra-toggle" aria-label="टिप्पणियाँ">',

       '  <span class="gra-icon gra-icon-comment" id="gra-toggle-icon" aria-hidden="true"></span>',

       '  <span id="gra-toggle-badge" aria-live="polite"></span>',

       $panel.hasClass('gra-panel-open') ? closePanel() : openPanel( _activeTab );

     // Cache

     $( '#gra-panel-title' )

       .text( pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30) );

     $tabComments = $( '#gra-tab-comments' );

     $tabBookmarks = $( '#gra-tab-bookmarks' );

     $paneComments = $( '#gra-pane-comments' );

     $paneBookmarks= $( '#gra-pane-bookmarks' );

     $cmpInput     = $( '#gra-cmp-input' );

     $cmpSubmit   = $( '#gra-cmp-submit' );

     $cmpName      = $( '#gra-cmp-name' );   // may be empty set for logged-in users

     $bmInput     = $( '#gra-bm-input' );

     $bmSubmit     = $( '#gra-bm-submit' );

   // SELECTION — desktop + mobile

     var range = sel.getRangeAt(0);

     var text = sel.toString().trim();

     var start = range.commonAncestorContainer;

     if ( start.nodeType === 3 ) start = start.parentNode;

     if ( !contentEl.contains( start ) ) return false;

     var W  = 308;

     if ( left + W > window.innerWidth - 8 ) left = window.innerWidth - W - 8;

     if ( top + 200 > window.innerHeight ) top = _selRect.top - 210;

     top = Math.max( top, 8 );

    if ( window.innerWidth < 400 ) left = ( window.innerWidth - W ) / 2;

   // WRAP SELECTION

     } catch (e) {

         var sp2  = document.createElement('span');

         sp2.className = cssClass;

         sp2.setAttribute('data-gra-id', id);

         sp2.appendChild(frag);

         range.insertNode(sp2);

         return sp2;

     // On mobile, delay focus so keyboard doesn't displace the composer

    setTimeout( function() { $cmpInput.focus(); }, isMobile() ? 300 : 0 );

     _selRange = null; _selText = ''; _selRect = null;

     var text = $cmpInput.val().trim();

     if ( !text ) return;

 

      || ( $cmpName.length ? $cmpName.val().trim() : '' )

      || 'अतिथि';

 

     var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');

     var entry = { id:id, author:author, ts:ts, quote:quote, text:text };

   function saveCommentToWiki( id, author, quote, text, ts ) {

       var page = ((data.query && data.query.pages)||[])[0]||{};

                 + '| id        = ' + id   + '\n'

                 + '| author    = ' + author + '\n'

                 + '| timestamp = ' + ts   + '\n'

         summary:'टिप्पणी — ' + author,

   function notifyByEmail( anchorId, author, quote, text, ts ) {

     var artPath = (window.mw ? mw.config.get('wgArticlePath') : '/wiki/$1') || '/wiki/$1';

    var anchorLink = window.location.origin

                  + artPath.replace('$1', pageTitle)

                  + (anchorId ? '#' + anchorId : '');

    var pageDisplay = pageTitle.replace(/_/g,' ');

     var subject = encodeURIComponent('[Grantha] टिप्पणी — "' + pageDisplay + '"');

     var body    = encodeURIComponent(

    + 'Comment :\n' + text      + '\n\n'

    + '──────────────────────────────────\n'

     + 'Link: ' + anchorLink     + '\n'

    + 'Comments page: ' + window.location.origin

        + artPath.replace('$1', 'Talk:' + pageTitle + '/GrComments')

    );

     // Always notify via mailto to feedback@anandamakaranda.in

     var a = document.createElement('a');

     a.href = 'mailto:' + FEEDBACK_EMAIL + '?subject=' + subject + '&body=' + body;

     a.target = '_blank';

     a.rel = 'noopener';

    document.body.appendChild(a);

    a.click();

    document.body.removeChild(a);

   // ── Load + parse comments ────────────────────────────────────────────

     if ( !window.mw ) { _cmtLoaded = true; if (cb) cb(); return; }

       var page = ((data.query && data.query.pages)||[])[0]||{};

     }).catch(function(){ _cmtLoaded = true; if (cb) cb(); });

     var out = [], re = /\{\{GrComment\s*\n([\s\S]*?)\}\}/g, m;

       var block = m[1], f = {}, lr = /\|\s*([\w_]+)\s*=\s*([\s\S]*?)(?=\n\||\n\}\}|$)/g, lm;

       while ((lm = lr.exec(block)) !== null) f[lm[1].trim()] = lm[2].trim();

       if (f.id) out.push({ id:f.id, author:f.author||'अतिथि', ts:f.timestamp||'', quote:f.quote||'', text:f.text||'' });

     setTimeout( function() { $bmInput.focus(); }, isMobile() ? 300 : 0 );

     _selRange = null; _selText = ''; _selRect = null;

     var name  = $bmInput.val().trim() || ('चिह्न ' + (_bookmarks.length + 1));

     var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');

     var span = wrapSelection(id, 'gra-bookmark-highlight');

     if (span) { span.setAttribute('data-gra-id', id); span.setAttribute('data-gra-name', name); }

     _bookmarks.push({ id:id, name:name, quote:quote, ts:nowIso() });

     var span = document.querySelector('[data-gra-id="'+id+'"].gra-bookmark-highlight');

     persistBookmarks(); renderBookmarkCards();

     try { var r = localStorage.getItem(BM_LS_KEY); if (r) _bookmarks = JSON.parse(r)||[]; } catch(e){}

   // PANEL

   function openPanel(tab) {

     switchTab(_activeTab);

   function switchTab(tab) {

     if (tab==='comments') loadComments(function(){ renderCommentCards(); });

     else renderBookmarkCards();

     if (!_comments.length) {

       $paneComments.html('<div class="gra-empty-state">अभी कोई टिप्पणी नहीं।<br>पाठ चुनें और 💬 पर क्लिक करें।</div>');

             + '</div></div>'

     if (!_bookmarks.length) {

       $paneBookmarks.html('<div class="gra-empty-state">अभी कोई चिह्न नहीं।<br>पाठ चुनें और 🔖 पर क्लिक करें।</div>');

             + '<span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>'

             + '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="हटाएं">×</button>'

   function scrollToHighlight(id) {

   // EVENT WIRING (desktop + mobile)

     // ── Desktop: mouseup / keyup ──────────────────────────────────

       if ( e.type === 'mouseup' && e.button !== 0 ) return;  // left-click only

       setTimeout( tryShowFab, 20 );

 

    // ── Mobile: selectionchange (iOS + Android) ───────────────────

    // 'selectionchange' fires continuously while user drags selection handles.

    var _selChangeTimer = null;

    document.addEventListener('selectionchange', function() {

      clearTimeout( _selChangeTimer );

      _selChangeTimer = setTimeout(function(){

        if ( v !== _selVersion ) return;

         if ( _fabSelVer === v ) return; // already showed FAB for this selection

         tryShowFab();

       }, 400);

     $( document ).on('mousedown touchstart', function(e){

       var t = e.target;

       if ( $fab[0] && $fab[0].contains(t) ) return;

      if ( $cmpComposer[0] && $cmpComposer[0].contains(t) ) return;

      if ( $bmComposer[0]  && $bmComposer[0].contains(t) ) return;

      hideFab();

     // ── FAB buttons ───────────────────────────────────────────────

     $( '#gra-fab-comment' ).on('click touchend', function(e){

       e.preventDefault(); e.stopPropagation();

       if ( !_selRange && !captureSelection() ) return;

     $( '#gra-fab-bookmark' ).on('click touchend', function(e){

       e.preventDefault(); e.stopPropagation();

       if ( !_selRange && !captureSelection() ) return;

       $cmpSubmit.prop('disabled', !$( this ).val().trim());

       if ((e.ctrlKey||e.metaKey) && e.key==='Enter') submitComment();

     $( '#gra-bm-cancel' ).on('click', function(){ closeBookmarkComposer(); hideFab(); });

       if (e.key==='Escape') { closeBookmarkComposer(); hideFab(); }

     // ── Panel ─────────────────────────────────────────────────────

     $backdrop.on('click touchstart', closePanel);

     // Click comment card → scroll to highlight

       var id = $( this ).attr('data-gra-id');

       if (id) { closePanel(); scrollToHighlight(id); }

     // Click bookmark card → scroll

       if ($( e.target ).hasClass('gra-bookmark-del')) return;

       var id = $( this ).attr('data-gra-id');

       if (id) { closePanel(); scrollToHighlight(id); }

     // Delete bookmark

       var id = $( this ).attr('data-del-id');

     // Highlight in text → open panel

       var id = $( this ).attr('data-gra-id');

           $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});

       var id = $( this ).attr('data-gra-id');

         if ($card.length) $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});

     // Escape

       if (e.key !== 'Escape') return;

      if ($cmpComposer.hasClass('gra-composer-visible')) { closeCommentComposer(); hideFab(); }

      else if ($bmComposer.hasClass('gra-composer-visible')) { closeBookmarkComposer(); hideFab(); }

      else closePanel();

   // RESTORE HIGHLIGHTS on page reload

   function persistCommentHighlight(id, quote) {

       var s = JSON.parse(localStorage.getItem(CMT_LS_KEY)||'[]');

       s = s.filter(function(h){ return h.id !== id; });

       s.push({id:id, quote:quote});

       localStorage.setItem(CMT_LS_KEY, JSON.stringify(s));

     var s = [];

     try { s = JSON.parse(localStorage.getItem(CMT_LS_KEY)||'[]'); } catch(e){}

     s.forEach(function(h){

       if (!h.quote || !h.id) return;

       if (document.querySelector('[data-gra-id="'+h.id+'"].gra-comment-highlight')) return;

       var needle = h.quote.replace(/…$/,'').trim().slice(0,80);

       if (!needle) return;

       var range = findTextInContent(document.querySelector(CONTENT_SEL), needle);

       if (range) {

         var sp = document.createElement('span');

         sp.className = 'gra-comment-highlight';

         sp.setAttribute('data-gra-id', h.id);

         try { range.surroundContents(sp); } catch(e){}

       if (!b.quote) return;

       if (document.querySelector('[data-gra-id="'+b.id+'"].gra-bookmark-highlight')) return;

       var found = findTextInContent(document.querySelector(CONTENT_SEL), needle);

         var sp = document.createElement('span');

         sp.className = 'gra-bookmark-highlight';

         sp.setAttribute('data-gra-id', b.id);

         sp.setAttribute('data-gra-name', b.name);

         try { found.surroundContents(sp); } catch(e){}

   function findTextInContent(root, needle) {

     if (!root) return null;

     var pos = 0, node, startNode, startOffset, endNode, endOffset;

       if (!startNode && pos + len > idx) { startNode = node; startOffset = idx - pos; }

       if (startNode && pos + len >= endIdx) { endNode = node; endOffset = endIdx - pos; break; }

     var r = document.createRange();

     r.setStart(startNode, startOffset);

     r.setEnd(endNode, endOffset);

     return r;

         $tabComments.find('.gra-icon').after(

           ' <span style="background:#e53935;color:#fff;border-radius:9px;font-size:10px;padding:0 5px;margin-left:2px;">'

          + _comments.length + '</span>'

         if ($badge.length) $badge.text(_comments.length).css('display','flex');

   });