Anandamakaranda

MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 79: Line 79:
       '    <span class="gra-icon gra-icon-search" aria-hidden="true"></span>',
       '    <span class="gra-icon gra-icon-search" aria-hidden="true"></span>',
       '    <span class="gra-fab-btn-label">Search</span>',
       '    <span class="gra-fab-btn-label">Search</span>',
      '  </button>',
      '  <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>',
       '  </button>',
       '  </button>',
       '</div>',
       '</div>',
Line 243: Line 247:
     var fabW, fabH, top, left;
     var fabW, fabH, top, left;
     if (_mobile) {
     if (_mobile) {
      fabW = 200; fabH = 48;
       /* Docked as a fixed bar below the reader toolbar.
       /* Strategy B: place fab BELOW the selection — the native iOS/Android
         All positioning is handled by CSS via .gra-fab-mobile-docked,
         selection menu appears ABOVE it, so the two never collide. */
        so it never collides with the native selection menu and never
      top  = rect.bottom + window.scrollY + 14;
        clips at screen edges or causes horizontal scroll. */
      left = rect.left + rect.width / 2 - fabW / 2;
       $fab.css({ position: '', top: '', left: '', visibility: '' })
      /* Near viewport bottom: flip above, clearing the native bar (~42px) */
           .addClass('gra-fab-visible gra-fab-mobile-docked');
      if (rect.bottom + fabH + 22 > window.innerHeight) {
        top = rect.top + window.scrollY - fabH - 56;
      }
      top  = clamp(top,  window.scrollY + 8, window.scrollY + window.innerHeight - fabH - 8);
      left = clamp(left, 8, window.innerWidth - fabW - 8);
       $fab.css({ position: 'absolute', top: '108' + 'px', left: '20%' })
           .addClass('gra-fab-visible');
       return;
       return;
     }
     }
Line 267: Line 264:
   }
   }


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


Line 475: Line 472:
       html += '<div class="gra-note-card" data-gra-id="'+esc(n.id)+'">'
       html += '<div class="gra-note-card" data-gra-id="'+esc(n.id)+'">'
             + '<div class="gra-card-header">'
             + '<div class="gra-card-header">'
             + '<div class="gra-avatar">✎</div>'
             + '<span class="gra-icon gra-icon-note" aria-hidden="true"></span>'
             + '<div class="gra-card-meta">'
             + '<div class="gra-card-meta">'
             + (n.ts ? '<div class="gra-card-ts">'+esc(fmtTs(n.ts))+'</div>' : '')
             + (n.ts ? '<div class="gra-card-ts">'+esc(fmtTs(n.ts))+'</div>' : '')
Line 548: Line 545:
     });
     });


     /* Mobile: show fab once selection settles (~350ms, alongside native menu).
    /* Separate timers so mobile + desktop never clobber each other */
       Strategy B: don't race the native menu — appear with it, in our own space. */
    var _selTimer    = null;  /* desktop debounce */
    var _lastTouchEnd = 0;
    var _mobShowTimer = null; /* mobile show-on-touchend */
 
     /* Mobile: show fab quickly after finger lifts (selection settled).
       180ms feels instant while still letting the range stabilise. */
     document.addEventListener('touchend', function(e) {
     document.addEventListener('touchend', function(e) {
       if (!_mobile) return;
       if (!_mobile) return;
       if ($fab[0] && $fab[0].contains(e.target)) return;
       if ($fab[0] && $fab[0].contains(e.target)) return;
      _lastTouchEnd = Date.now();
       clearTimeout(_mobShowTimer);
       clearTimeout(_selTimer);
       _mobShowTimer = setTimeout(function() {
       _selTimer = setTimeout(function() {
         var sel = window.getSelection();
         var sel = window.getSelection();
         if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
         if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
         tryShowActions();
         tryShowActions();
       }, 350);
       }, 180);
     }, { passive: true });
     }, { passive: true });


     /* Mobile: reposition fab live while user drags the selection handles,
     /* Mobile: only HIDE the fab when selection is cleared while it's visible.
       hide it if selection is cleared */
      (Reposition isn't needed now that the bar is docked, and re-running
       showFab here was causing the lag/flicker.) */
     document.addEventListener('selectionchange', function() {
     document.addEventListener('selectionchange', function() {
       if (!_mobile) return;
       if (!_mobile) return;
       if (!$fab.hasClass('gra-fab-visible')) return;
       if (!$fab.hasClass('gra-fab-visible')) return;
       clearTimeout(_selTimer);
       var sel = window.getSelection();
      _selTimer = setTimeout(function() {
      if (!sel || sel.isCollapsed || !sel.toString().trim()) {
        var sel = window.getSelection();
        clearTimeout(_mobShowTimer);
        if (!sel || sel.isCollapsed || !sel.toString().trim()) { hideActions(); return; }
         hideActions();
         if (captureSelection()) showFab(_selRect);
       }
       }, 250);
     });
     });


     /* selectionchange debounced (desktop) */
     /* selectionchange debounced (desktop only) */
    var _selTimer = null;
     document.addEventListener('selectionchange', function() {
     document.addEventListener('selectionchange', function() {
      if (_mobile) return;
       _selVersion++;
       _selVersion++;
       clearTimeout(_selTimer);
       clearTimeout(_selTimer);
Line 585: Line 584:
         if (v !== _selVersion) return;
         if (v !== _selVersion) return;
         if (_fabSelVer === v) return;
         if (_fabSelVer === v) return;
        if (_mobile) return; /* mobile uses touchend instead */
         tryShowActions();
         tryShowActions();
       }, 600);
       }, 600);
Line 647: Line 645:
       else if (q) { $(document).trigger($.Event('keydown', {ctrlKey:true, key:'k', keyCode:75})); }
       else if (q) { $(document).trigger($.Event('keydown', {ctrlKey:true, key:'k', keyCode:75})); }
     });
     });
    /* ── Dismiss button: hide toolbar + clear selection (mobile) ── */
    (function () {
      var dismissEl = document.getElementById('gra-fab-dismiss');
      if (!dismissEl) return;
      function doDismiss(e) {
        e.preventDefault(); e.stopPropagation();
        hideActions();
        _selRange = null; _selText = ''; _selRect = null;
        if (window.getSelection) {
          var s = window.getSelection();
          if (s && s.removeAllRanges) s.removeAllRanges();
        }
      }
      dismissEl.addEventListener('touchend', doDismiss, { passive: false });
      dismissEl.addEventListener('click', doDismiss);
    }());


     /* Feedback composer */
     /* Feedback composer */
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Gadget-GrAnnotations.js"