MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

  * gr_annotations.js  —  grantha.io inline Notes + Bookmarks + Feedback  (v4)

  * CHANGES FROM v3

  * • Mobile: FAB no longer fights browser's native copy/paste menu.

  *  On mobile, a bottom-sheet action bar slides up after selection

  *  instead of a tiny floating strip next to the text.

  * • Mobile: Long-press detection improved — waits for selectionchange

  *  to settle before showing the action bar.

  * • Mobile: Action bar buttons are large (48px tap targets) with labels.

  * • Desktop: FAB strip unchanged — appears beside selection.

  * • Feedback composer: centered modal on all screen sizes.

   var currentUserEmail = '';

       action: 'query', meta: 'userinfo', uiprop: 'email', formatversion: 2,

     }).then( function (data) {

   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;

     // ── Desktop FAB strip (hidden on mobile) ─────────────────────────

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

 

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

     // ── Feedback composer (centered modal) ───────────────────────────

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

     // ── Note composer ────────────────────────────────────────────────

       '    <div class="gra-avatar">' + esc(currentUser ? userInitial : '✎') + '</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;

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

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

   function tryShowActions() {

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

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

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

     if (!captureSelection()) {

       hideActions();

    _fabSelVer = _selVersion;

       showMobileBar();

       showFab(_selRect);

   // DESKTOP FAB

   function showFab(rect) {

     if (!rect) return;

     var fabW = 46, fabH = 126;

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

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

     $fab.css({top: top+'px', left: left+'px'}).addClass('gra-fab-visible');

   // MOBILE BOTTOM BAR

 

 

 

 

   function positionComposer($el) {

     if (!_selRect) return;

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

     left = Math.max(left, 8);

     if (top + 280 > window.innerHeight) top = _selRect.top - 290;

     top  = Math.max(top, 8);

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

   function wrapSelection(id, cssClass) {

     if (!_selRange) return null;

       range.surroundContents(span);

     } catch(e) {

   // FEEDBACK FLOW

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

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

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

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

     setTimeout(closeFeedbackComposer, 2500);

   function showFeedbackError(msg) {

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

   // NOTE FLOW

     hideActions();

     positionComposer($ntComposer);

     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();

     positionComposer($bmComposer);

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

       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)+'">'

             + (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) {

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

     // ── Desktop mouseup ───────────────────────────────────────────

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

       if (e.button !== 0) return;

       setTimeout(tryShowActions, 20);

     // ── Mobile: selectionchange (debounced 600ms) ─────────────────

     var _selTimer = null;

       clearTimeout(_selTimer);

       _selTimer = setTimeout(function(){

         if (v !== _selVersion) return;

         if (_fabSelVer === v) return;

         if (!isMobile()) return;  // desktop uses mouseup

        tryShowActions();

       }, 600);   // 600ms — after browser copy menu appears

     // ── Click outside → hide actions ──────────────────────────────

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

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

      if ($mobileBar[0]  && $mobileBar[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();

     });

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

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

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

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

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

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

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

       openNoteComposer();

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

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

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

       openBookmarkComposer();

     // ── Mobile bottom bar buttons ─────────────────────────────────

     $('#gra-mob-feedback').on('click touchend', function(e){

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

     $('#gra-mob-note').on('click touchend', function(e){

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

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

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

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

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

       closeFeedbackComposer();

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

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

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

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

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

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

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

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

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

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

       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();

   // RESTORE HIGHLIGHTS

   $(function() {