MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

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

  * CHANGES FROM v1

  * • Mobile support: selectionchange + touchend events trigger the FAB

*  on iOS/Android. Long-press to select text now shows the comment/

  *  bookmark strip correctly.

* • Anonymous comments: any visitor (logged-in or not) can comment.

*  A name field is shown to anonymous users. Comments are stored on

*  Talk:<PageTitle>/GrComments as before and emailed to

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

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

  * • "Add comment" tooltip localised to "टिप्पणी".

* • "Bookmark" tooltip localised to "चिह्नांकन".

  *

  * BEHAVIOUR

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

*    mobile long-press).

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

  * 3. Clicking Comment:

  *   – 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.

  * 4. Clicking Bookmark:

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

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

* 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 CMT_LS_KEY    = 'grantha_cmt_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

   var _comments  = [];

   var _activeTab  = 'comments';

 

   var _selVersion = 0;   // incremented on each new selectionchange

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

   function nowIso() {

    return new Date().toISOString().replace(/\.\d{3}Z$/,'Z');

  }

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

   var $tabComments, $tabBookmarks;

   var $paneComments, $paneBookmarks;

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

       '<div id="gra-fab" role="toolbar" aria-label="Comment / Bookmark">',

       '  <button class="gra-fab-btn" id="gra-fab-comment" type="button" aria-label="Add comment">',

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

       '    <span class="gra-fab-tooltip">Comment</span>',

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

     // Anonymous users see an extra "Your name" field (hidden for logged-in)

    var nameRow = currentUser ? '' : [

       '  <div class="gra-composer-name-row">',

       '   <input class="gra-composer-input gra-name-input" id="gra-cmp-name"',

       '     type="text" placeholder="Your name (optional)" autocomplete="name">',

     ].join('');

     $cmpComposer = $( [

       '<div class="gra-composer" id="gra-cmp-composer" role="dialog" aria-label="Add comment">',

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

       '    <div class="gra-composer-uname">' + esc(currentUser || 'Guest') + '</div>',

       '  <textarea class="gra-composer-input" id="gra-cmp-input"',

       '    placeholder="Write a comment…" rows="3"></textarea>',

       '    <button class="gra-btn-cancel" id="gra-cmp-cancel">Cancel</button>',

       '    <button class="gra-btn-submit" id="gra-cmp-submit" disabled>Comment</button>',

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

       '<div id="gra-panel" role="complementary" aria-label="Comments">',

       '    <button class="gra-tab gra-tab-active" id="gra-tab-comments">',

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

       '    <div class="gra-pane gra-pane-active" id="gra-pane-comments"></div>',

     // Toggle FAB (bottom-right, persistent)

       '<button id="gra-toggle" aria-label="Comments">',

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

     // Cache

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

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

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

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

   // SELECTION — desktop + mobile

     if ( $cmpComposer.hasClass('gra-composer-visible') ) return;

     if ( $bmComposer.hasClass('gra-composer-visible') ) return;

     var fabW = 46, fabH = 84;

     var W = 308;

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

   // COMMENT FLOW

   function openCommentComposer() {

     positionComposer( $cmpComposer );

     $cmpComposer.addClass('gra-composer-visible');

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

   function closeCommentComposer() {

     $cmpComposer.removeClass('gra-composer-visible');

    $cmpSubmit.prop('disabled', true);

   function submitComment() {

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

     if ( !text ) return;

     // Resolve author name: logged-in user or anonymous name or "अतिथि"

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

       || 'Guest';

     var id    = uid();

    var ts    = nowIso();

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

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

     if ( span ) span.setAttribute('data-gra-quote', quote);

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

    _comments.push( entry );

    persistCommentHighlight( id, quote );

     saveCommentToWiki( id, author, quote, text, ts, id );

    notifyByEmail( id, author, quote, text, ts );

     renderCommentCards();

     closeCommentComposer();

     openPanel('comments');

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

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

                + '| quote    = ' + quote.replace(/\n/g,' ') + '\n'

                + '| text      = ' + text.replace(/\n/g,' ')  + '\n'

      var updated = (existing.trim() ? existing.trim() + '\n\n' : '') + entry;

      api.postWithEditToken({

      }).then(function(){

        var adminTalk = 'User_talk:Chandrashekars';

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

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

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

        var notice = '\n<!-- grantha-comment-notify -->\n'

                  + '; [[' + pageTitle.replace(/_/g,' ') + ']] — ' + author + '\n'

                  + ': ' + link + '\n';

        }).catch(function(){});  /* silent — never block the comment flow */

      }).catch(function(){});

    }).catch(function(){});

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

     /* Notification is handled server-side by MediaWiki's Echo extension

    * when saveCommentToWiki() edits the Talk page — no client-side

    * mailto needed. A mailto would abruptly open the user's mail app

   function loadComments( cb ) {

     if ( _cmtLoaded ) { if (cb) cb(); return; }

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

     new mw.Api().get({

      action:'query', prop:'revisions', titles:commentsPage,

      rvprop:'content', rvslots:'main', formatversion:2,

     }).then(function(data){

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

      var wt = '';

      if (page.revisions && page.revisions[0]) {

        var rev = page.revisions[0];

        wt = rev.slots ? rev.slots.main.content : rev['*'] || '';

      _comments = parseCommentsWt(wt);

      _cmtLoaded = true;

      if (cb) cb();

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

   function parseCommentsWt( wt ) {

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

    while ((m = re.exec(wt)) !== null) {

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

     $tabComments.toggleClass('gra-tab-active', tab==='comments');

     $paneComments.toggleClass('gra-pane-active', tab==='comments');

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

   function renderCommentCards() {

     if (!_comments.length) {

       $paneComments.html('<div class="gra-empty-state">No comments yet.<br>Select text and click 💬 to add one.</div>');

     _comments.slice().reverse().forEach(function(c){

       html += '<div class="gra-comment-card" data-gra-id="' + esc(c.id) + '">'

             + '<div class="gra-avatar">' + esc((c.author||'?').charAt(0).toUpperCase()) + '</div>'

             + '<div class="gra-card-author">' + esc(c.author) + '</div>'

             + (c.ts ? '<div class="gra-card-ts">' + esc(fmtTs(c.ts)) + '</div>' : '')

             + '</div></div>'

             + (c.quote ? '<div class="gra-card-quote">' + esc(c.quote) + '</div>' : '')

             + '<div class="gra-card-text">' + esc(c.text) + '</div>'

     $paneComments.html(html);

   // EVENT WIRING (desktop + mobile)

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

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

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

     // ── Mobile: touchend fallback (catch tap-to-end-selection) ────

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

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

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

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

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

       openCommentComposer();

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

     $cmpInput.on('input', function(){

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

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

     $cmpSubmit.on('click', submitComment);

     $cmpInput.on('keydown', function(e){

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

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

     $tabComments.on('click', function(){ switchTab('comments'); });

     // Click comment card → scroll to highlight

     $paneComments.on('click', '.gra-comment-card', function(){

     // Highlight in text → open panel

     $( CONTENT_SEL ).on('click', '.gra-comment-highlight', function(){

       openPanel('comments');

         var $card = $paneComments.find('[data-gra-id="'+id+'"]');

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

   function persistCommentHighlight(id, quote) {

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

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

   function restoreCommentHighlights() {

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

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

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