MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

  * gr_annotations.js  —  grantha.io inline Notes + Bookmarks + Feedback  (v6 + Strategy B)

   var _notes      = [];

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

   function esc(s) {

     return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;')

                        .replace(/>/g,'&gt;').replace(/"/g,'&quot;');

   function fmtTs(ts) {

       var d = new Date(ts);

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

   function isMobile() { return _mobile; }

   var $fab, $mobileBar, $panel, $backdrop;

   var $tabNotes, $tabBookmarks, $paneNotes, $paneBookmarks;

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

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

      '    <span class="gra-fab-btn-label">Note</span>',

      '  </button>',

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

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

       '    <span class="gra-fab-btn-label">Feedback</span>',

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

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

       '    <span class="gra-fab-btn-label">Search</span>',

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

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

       '    <span class="gra-fab-btn-label">Close</span>',

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

 

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

       '    <option value="wrong_text">Formatting error</option>',

       '  <textarea class="gra-composer-input" id="gra-fb-text" placeholder="Describe the issue…" rows="3"></textarea>',

       '  <input class="gra-composer-input gra-fb-email-input" id="gra-fb-email" type="email" placeholder="you@example.com" autocomplete="email">',

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

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

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

       '  <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',

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

       '  <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',

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

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

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

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

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

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

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

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

     });

     $('#gra-panel-title').text(pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30));

     $tabNotes    = $('#gra-tab-notes');

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

     $paneNotes    = $('#gra-pane-notes');

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

     $ntInput      = $('#gra-nt-input');

     $ntSubmit    = $('#gra-nt-submit');

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

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

     $fbIssueType  = $('#gra-fb-issue');

     $fbText      = $('#gra-fb-text');

     $fbEmail      = $('#gra-fb-email');

     $fbSubmit    = $('#gra-fb-submit');

     $fbQuote      = $('#gra-fb-quote');

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

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

     var contentEl = document.querySelector(CONTENT_SEL);

     if (!contentEl) return false;

     var ancestor = range.commonAncestorContainer;

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

     if (!ancestor || !contentEl.contains(ancestor)) return false;

    if ( _editorEl && _editorEl.contains(ancestor) ) return false;

   function reCaptureFromDOM() {

     if (!_selText) return false;

    var contentEl = document.querySelector(CONTENT_SEL);

     if (!contentEl) return false;

     var found = findTextInContent(contentEl, _selText.slice(0,80).replace(/…$/,'').trim());

     if (!found) return false;

    _selRange = found;

     return true;

   function tryShowActions() {

   }

   function showFab(rect) {

     if (!rect) return;

     var fabW, fabH, top, left;

    fabW = 46; fabH = 126;

     top  = rect.top + (rect.height / 2) - (fabH / 2);

     left = rect.right + 10;

     if (left + fabW > window.innerWidth - 8) left = rect.left - fabW - 10;

     top  = clamp(top,  8, window.innerHeight - fabH - 8);

     left = clamp(left, 8, window.innerWidth  - fabW - 8);

   function hideFab() { $fab.removeClass('gra-fab-visible gra-fab-mobile-docked'); }

   function hideActions() { hideFab(); }

   function wrapSelection(id, cssClass) {

       if (!document.contains(range.startContainer) ||

          !document.contains(range.endContainer)) return null;

     } catch(e) { return null; }

    function makeSpan() {

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

      sp.className = cssClass;

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

       return sp;

     hideActions();

     $fbQuote.text(_selText.slice(0,200) + (_selText.length > 200 ? '…' : ''));

     $('#gra-fb-status').text('').removeClass('gra-fb-ok gra-fb-err');

     if (currentUserEmail) $fbEmail.val(currentUserEmail);

    if (!_mobile) $fbComposer.css({top:'', left:'', transform:''});

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

     if (!issueType) return;

     $('#gra-fb-status').text('').removeClass('gra-fb-ok gra-fb-err');

       wrong_text: 'Formatting error', reference_issue: 'Reference issue',

       spelling_mistake: 'Spelling mistake', other: 'Other'

     var payload = new FormData();

    payload.append('issue_type',   issueLabels[issueType] || issueType);

    payload.append('page',         pageTitle.replace(/_/g,' '));

    payload.append('url',           window.location.href);

     payload.append('selected_text', quote);

     payload.append('details',       details || '');

     payload.append('user_email',    email || currentUserEmail || '');

     payload.append('wiki_user',    currentUser || 'anonymous');

    fetch('/feedback.php', {method:'POST', body:payload})

       .then(function(r){ return r.json(); })

       .then(function(data){

         if (data && data.ok) showFeedbackSuccess();

         else showFeedbackError(data && data.error ? data.error : 'Could not send.');

       })

       .catch(function(){ showFeedbackError('Network error. Please try again.'); });

     $fbSubmit.prop('disabled', false).text('Send');

     $('#gra-fb-status').text('✓ Feedback sent. Thank you!').addClass('gra-fb-ok');

     setTimeout(closeFeedbackComposer, 2500);

    $('#gra-fb-status').text('✗ ' + msg).addClass('gra-fb-err');

     hideActions();

     if (!_mobile) $ntComposer.css({ top: '', left: '', transform: '' });

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

     if (!text) return;

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

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

     _notes.push({id:id, ts:ts, quote:quote, text:text});

     persistNoteHighlight(id, quote);

     try { localStorage.setItem(NT_LS_KEY, JSON.stringify(_notes)); } catch(e){}

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

     hideActions();

     if (!_mobile) $bmComposer.css({ top: '', left: '', transform: '' });

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

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

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

   function deleteBookmark(id) {

     if (span && span.parentNode) {

       var p = span.parentNode;

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

       p.removeChild(span);

       $paneNotes.html('<div class="gra-empty-state">No notes yet.<br>Select text and tap ✎ to add one.</div>');

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

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

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

             + '<button class="gra-note-del" data-del-id="'+esc(n.id)+'" title="Delete">×</button>'

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

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

   function deleteNote(id) {

     if (span && span.parentNode) {

       var p = span.parentNode;

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

       p.removeChild(span);

     persistNotes(); renderNoteCards();

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

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

             + '<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">×</button>'

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

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

   function wireEvents() {

 

 

 

    document.addEventListener('touchend', function(e) {

     /* Mobile: only HIDE the fab when selection is cleared while it's visible.

      showFab here was causing the lag/flicker.) */

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

       if (!_mobile) return;

      if (!$fab.hasClass('gra-fab-visible')) return;

      var sel = window.getSelection();

      if (!sel || sel.isCollapsed || !sel.toString().trim()) {

        clearTimeout(_mobShowTimer);

        hideActions();

     /* selectionchange debounced (desktop only) */

       clearTimeout(_selTimer);

       _selTimer = setTimeout(function(){

         if (v !== _selVersion) return;

         if (_fabSelVer === v) return;

         tryShowActions();

       }, 600);

     /* ── KEY FIX: fab touchstart sets flag to prevent hideActions ── */

     $fab[0].addEventListener('touchstart', function(e) {

       _fabTouched = true;

       /* Don't propagate to document handler */

       e.stopPropagation();

     /* Click outside → hide actions (blocked if fab was touched) */

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

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

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

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

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

       hideActions();

     /* ── FAB buttons — use touchend for mobile, click for desktop ── */

 

     fabAction('gra-fab-note',    openNoteComposer);

    fabAction('gra-fab-feedback', openFeedbackComposer);

 

    document.getElementById('gra-fab-search').addEventListener('touchend', function(e) {

       if (q && window.showSearchDialog) { window.showSearchDialog(q); }

     }, { passive: false });

     document.getElementById('gra-fab-search').addEventListener('click', function(e) {

       var q = _selText;

       hideActions();

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

       if (q && window.showSearchDialog) { window.showSearchDialog(q); }

       else if (q) { $(document).trigger($.Event('keydown', {ctrlKey:true, key:'k', keyCode:75})); }

     /* ── Dismiss button: hide toolbar + clear selection (mobile) ── */

 

    /* Feedback composer */

     $fbIssueType.on('change', function(){ $fbSubmit.prop('disabled', !$(this).val()); });

     $('#gra-fb-cancel, #gra-fb-close').on('click', closeFeedbackComposer);

     $fbText.on('keydown', function(e){ if(e.key==='Escape') closeFeedbackComposer(); });

     /* Note composer */

     $ntInput.on('input', function(){ $ntSubmit.prop('disabled', !$(this).val().trim()); });

     $('#gra-nt-cancel').on('click', closeNoteComposer);

       if (e.key==='Escape') closeNoteComposer();

     /* Bookmark composer */

     $('#gra-bm-cancel').on('click', closeBookmarkComposer);

       if (e.key==='Escape') closeBookmarkComposer();

     /* Panel */

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

     $backdrop.on('click touchend', function(e){

      else closePanel();

    });

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

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

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

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

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

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

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

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

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

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

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

       if ($fbComposer.hasClass('gra-composer-visible')) closeFeedbackComposer();

       else if ($ntComposer.hasClass('gra-composer-visible')) closeNoteComposer();

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

       if (!range) return;

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

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

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

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

       if (!found) return;

      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){}

     if (!root || !needle) return null;

     try {

      var r = document.createRange();

      r.setStart(startNode, startOffset);

      r.setEnd(endNode, endOffset);

      return r;

     } catch(e){ return null; }

   $(function() {

    window.addEventListener('resize', function(){

     setTimeout(function(){

      try { restoreNoteHighlights(); } catch(e){}

      try { restoreBookmarkHighlights(); } catch(e){}

    }, 500);