MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

  * gr_annotations.js  —  grantha.io inline Comments + Bookmarks

  * BEHAVIOUR (mirrors Google Docs)

* 2. A floating action strip (FAB) appears to the right of the selection

   var ADMIN_USER  = 'GranthaGate';   // MW username for talk-page fallback

  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() : '?';

   var _selRange  = null;   // saved Range for wrapping

   var _selText    = '';     // selected text string

   var _selRect    = null;   // bounding rect of selection

   var _comments  = [];     // [{id, anchor, author, ts, quote, text}]

   var _bookmarks  = [];     // [{id, name, quote, anchorHtml, ts}]

   var _cmtLoaded = false;

   var _activeTab = 'comments';  // 'comments' | 'bookmarks'

   function uid() {

    return 'gra_' + Date.now() + '_' + Math.random().toString(36).slice(2,7);

   function nowIso() {

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

  }

   function fmtTs( ts ) {

       var d = new Date( ts );

   function clamp( val, min, max ) { return Math.max(min, Math.min(max, val)); }

   var $fab, $panel, $backdrop, $panelBody;

   var $cmpComposer, $cmpInput, $cmpSubmit;

   var $tabComments, $tabBookmarks;

   var $paneComments, $paneBookmarks;

 

       '<div id="gra-fab">',

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

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

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

       '  <button class="gra-fab-btn" id="gra-fab-bookmark" type="button">',

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

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

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

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

     $cmpComposer = $( [

       '<div class="gra-composer" id="gra-cmp-composer">',

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

       '    <div class="gra-composer-name" id="gra-cmp-name">' + esc(currentUser || 'Anonymous') + '</div>',

      '    <button class="gra-chip" data-val="Others" type="button">Others ▾</button>',

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

      '    placeholder="Describe the issue…" rows="3"',

      '    style="display:none"></textarea>',

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

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

       '<div class="gra-bm-composer" id="gra-bm-composer">',

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

       '  <input class="gra-composer-input" id="gra-bm-input"',

      '    type="text" placeholder="Bookmark name…" autocomplete="off">',

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

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

       '    <div></div>',

       '    <button id="gra-panel-close" title="Close panel">✕</button>',

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

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

       '      <span class="gra-icon gra-icon-bookmark"></span> Bookmarks',

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

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

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

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

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

       '<button id="gra-toggle" title="Comments &amp; Bookmarks">',

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

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

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

     $toggle.on( 'click', function() {

       if ( $panel.hasClass('gra-panel-open') ) {

        closePanel();

        openPanel( _activeTab );

     } );

     $panelBody    = $( '#gra-panel-body' );

    // Set panel title to page name

    $( '#gra-panel-head div' ).first()

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

      .css({ 'font-size':'13px', 'font-weight':'600', 'color':'#5a3a00' });

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

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

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

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

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

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

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

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

 

     // Disable comment submit when not logged in

    if ( !currentUser ) {

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

      $cmpComposer.find( '.gra-composer-actions' )

        .prepend( '<a href="' + esc( mw ? mw.util.getUrl('Special:UserLogin') : '/wiki/Special:UserLogin' ) +

                  '" style="font-size:11px;color:#999;margin-right:auto">Log in to comment</a>' );

     if ( !sel || sel.isCollapsed || !sel.rangeCount ) return false;

 

     var range   = sel.getRangeAt(0);

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

     if ( !text || text.length < 2 ) return false;

 

     var contentEl = document.querySelector( CONTENT_SEL );

     if ( !contentEl ) return false;

     var startEl = range.commonAncestorContainer;

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

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

 

   // ════════════════════════════════════════════════════════════════════

   // ════════════════════════════════════════════════════════════════════

   function positionComposer( $el ) {

     if ( !_selRect ) return;

     // position:fixed — viewport coords only

     var top  = _selRect.bottom + 8;

     var left = _selRect.left;

     // Keep composer within viewport

     var composerW = 308;

     if ( left + composerW > window.innerWidth - 8 ) {

       left = window.innerWidth - composerW - 8;

     left = Math.max( left, 8 );

     // If composer would appear below viewport, show above selection instead

     if ( top + 160 > window.innerHeight ) {

      top = _selRect.top - 170;

     }

    top = Math.max( top, 8 );

     $el.css({ top: top + 'px', left: left + 'px' });

   // ════════════════════════════════════════════════════════════════════

   // WRAP SELECTION IN HIGHLIGHT SPAN

   function wrapSelection( id, cssClass ) {

     if ( !_selRange ) return null;

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

      span.className = cssClass;

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

      _selRange.surroundContents( span );

      return span;

     } catch ( e ) {

      // surroundContents fails for multi-element selections;

        var frag = _selRange.extractContents();

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

        span2.className = cssClass;

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

        return span2;

       } catch(e2) { return null; }

   // ════════════════════════════════════════════════════════════════════

   // ════════════════════════════════════════════════════════════════════

   function openCommentComposer() {

     hideFab();

    positionComposer( $cmpComposer );

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

     $cmpComposer[0].focus && $cmpComposer[0].setAttribute('tabindex', '-1');

   function closeCommentComposer() {

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

     $( '#gra-quick-chips .gra-chip' ).removeClass('gra-chip-active');

     $cmpInput.hide().val('');

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

     _selRange = null;

     _selText  = '';

     _selRect  = null;

   function submitComment() {

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

     if ( !text || !currentUser ) return;

     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:currentUser, ts:ts, quote:quote, text:text };

     _comments.push( entry );

     // Persist highlight anchor so it survives page refresh

    persistCommentHighlight( id, quote );

 

     // Persist to wiki

    saveCommentToWiki( id, quote, text, ts );

    notifyAdmin( _activeId || '', quote, text, ts );

 

    renderCommentCards();

    closeCommentComposer();

    openPanel('comments');

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

     if ( !window.mw ) return;

    var api = new mw.Api();

     api.get({

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

     }).then(function(data){

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

      var existing = '';

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

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

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

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

                + '}}\n';

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

        action:'edit', title:commentsPage, text:updated,

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

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

   function notifyAdmin( anchorId, quote, commentText, ts ) {

     /* Send notification email directly using MW's EmailUser API, targeting

    * ADMIN_EMAIL via the ADMIN_USER account — no server-side SMTP config needed.

    * ADMIN_EMAIL is set at the top of this file; change it to any address. */

     if ( !window.mw ) return;

 

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

                        .replace( '$1', pageTitle );

     var anchorLink  = window.location.origin + articlePath

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

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

     var subject    = '[Grantha] New comment on "' + pageDisplay + '"';

     var body        = 'Page    : ' + pageDisplay + '\n'

                    + 'By      : ' + ( currentUser || 'Anonymous' ) + '\n'

                    + 'Passage : "' + quote + '"\n\n'

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

 

     /* Primary: send via MW EmailUser API to ADMIN_USER account.

    new mw.Api().post({

      action: 'emailuser',

      target: ADMIN_USER,

      subject: subject,

      text:   body,

    }).catch(function(){

      if ( !currentUser ) return;

                  + '; By: ' + ( currentUser || 'Anonymous' ) + '\n'

                  + '; Passage: //' + quote + '//\n'

                  + commentText.slice(0,500)

                  + ( commentText.length > 500 ? '\n...' : '' )

                  + '\n\n[[User:Chandrashekars|Chandrashekars]] ([[User talk:Chandrashekars|talk]]) 18:31, 25 April 2026 (UTC)';

      new mw.Api().postWithEditToken({

        action:'edit', title:'User_talk:' + ADMIN_USER, section:'new',

    });

   function loadComments( cb ) {

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

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

    new mw.Api().get({

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

    }).then(function(data){

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

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

      }

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

 

   function parseCommentsWt( wt ) {

     var out = [];

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

    var m;

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

      var block = m[1];

      var lr = /\|\s*([\w_]+)\s*=\s*([\s\S]*?)(?=\n\||\n\}\}|$)/g;

        f[lm[1].trim()] = lm[2].trim();

      }

      if (f.id) out.push({

    }

     hideFab();

     positionComposer( $bmComposer );

     $bmInput.val('').focus();

     _selRange = null;

    _selText = '';

    _selRect = null;

     var name  = $bmInput.val().trim() || ( 'Bookmark ' + (_bookmarks.length+1) );

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

 

     // Wrap text in bookmark highlight span

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

     if ( span ) {

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

      span.setAttribute('data-gra-name', name);

    }

 

     var entry = { id:id, name:name, quote:quote, ts:ts };

    _bookmarks.push( entry );

   function deleteBookmark( id ) {

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

     if (span) {

       var parent = span.parentNode;

       while (span.firstChild) parent.insertBefore(span.firstChild, span);

       parent.removeChild(span);

     persistBookmarks();

    renderBookmarkCards();

     try {

      var raw = localStorage.getItem(BM_LS_KEY);

      if (raw) _bookmarks = JSON.parse(raw) || [];

    } catch(e){ _bookmarks = []; }

 

   function openPanel( tab ) {

     switchTab( _activeTab );

 

   function switchTab( tab ) {

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

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

     if (tab==='comments') {

      loadComments(function(){ renderCommentCards(); });

     } else {

      renderBookmarkCards();

 

   function renderCommentCards() {

     if ( _comments.length === 0 ) {

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

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

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

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

     $paneComments.html(html);

     if ( _bookmarks.length === 0 ) {

       $paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and click 🔖 to save a bookmark.</div>');

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

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

             + '<div class="gra-bookmark-name">' + esc(b.name) + '</div>'

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

             + '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="Remove bookmark">×</button>'

 

   function scrollToHighlight( id ) {

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

     el.scrollIntoView({ behavior:'smooth', block:'center' });

   // ════════════════════════════════════════════════════════════════════

  function wireEvents() {

     // ── Selection → show FAB ──────────────────────────────────────

    // On mouseup: capture the selection and show the FAB strip.

    // We use mouseup (not click) so the selection is fully made.

     $( document ).on('mouseup', function(e){

       if ( $(e.target).closest('#gra-fab, .gra-composer, .gra-bm-composer').length ) return;

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

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

       setTimeout(function(){

      }, 10);

     // ── FAB mousedown: block selection collapse ───────────────────

     // Browsers collapse text selection on mousedown. preventDefault

     // keeps the selection alive so the click handler can wrap it.

     $fab.on('mousedown', function(e){

       e.preventDefault();

     // ── Mousedown outside: hide FAB ───────────────────────────────

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

       var $t = $(e.target);

      if ( !$t.closest('#gra-fab, .gra-composer, .gra-bm-composer, #gra-toggle, #gra-panel').length ) {

         hideFab();

       }

     // ── FAB: Comment button ───────────────────────────────────────

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

       openCommentComposer();

     // ── FAB: Bookmark button ──────────────────────────────────────

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

       e.stopPropagation();

       openBookmarkComposer();

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

    /* Quick-select chips: clicking a chip selects it and sets comment text.

    * Any other chip sets the text directly and enables submit. */

     $( '#gra-cmp-composer' ).on( 'click', '.gra-chip', function() {

       var $chip = $( this );

      var val  = $chip.attr('data-val');

      $( '#gra-quick-chips .gra-chip' ).removeClass('gra-chip-active');

       if ( !wasActive ) $chip.addClass('gra-chip-active');

       if ( val === 'Others' && !wasActive ) {

         // Show textarea for free-form input

        $cmpInput.show().focus().val('');

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

      } else if ( !wasActive ) {

        $cmpInput.hide().val(val);

        $cmpSubmit.prop('disabled', !currentUser);

        $cmpInput.hide().val('');

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

     } );

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

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

    });

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

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

     $( '#gra-bm-cancel' ).on('click', function(){

      closeBookmarkComposer();

    });

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

     // ── Panel close ───────────────────────────────────────────────

     $( '#gra-panel-close' ).on('click', closePanel);

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

 

     // ── Tab switching ─────────────────────────────────────────────

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

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

       if (id) scrollToHighlight(id);

       if (id) scrollToHighlight(id);

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

       openPanel('comments');

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

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

 

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

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

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

       if (e.key==='Escape'){

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

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

        else closePanel();