MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

/**

  */

   'use strict';

   var CONTENT_SEL  = '#mw-content-text';

   var BM_LS_KEY    = 'grantha_bm_'  + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

   if ( currentUser && window.mw ) {

   }

   }

   var _selText    = '';

   var _selRect    = null;

   var _fabSelVer  = -1;

   var _mobile    = window.innerWidth < 768 || 'ontouchstart' in window;

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

   function esc(s) {

   function isMobile() { return _mobile; }

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

   var $ntComposer, $ntInput, $ntSubmit;

   var $bmComposer, $bmInput, $bmSubmit;

   var $fbComposer, $fbIssueType, $fbText, $fbEmail, $fbSubmit, $fbQuote;

   function buildDom() {

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

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

       '  </button>',

       '</div>',

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

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

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

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

       '    </button>',

       '  </div>',

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

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

       '  </div>',

       '</div>',

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

   }

   function captureSelection() {

     var sel = window.getSelection();

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

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

     var _editorEl = document.getElementById('se-surface') ||

                     document.querySelector('.se-outer');

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

     _selText  = text;

     _selRect  = range.getBoundingClientRect();

     try { _selRange = range.cloneRange(); }

     catch(e){ _selRange = null; }

     return true;

   }

   function reCaptureFromDOM() {

     if (!_selText) return false;

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

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

     _fabSelVer = _selVersion;

     if (_mobile) {

     }

   }

   function wrapSelection(id, cssClass) {

     var range = _selRange;

     _selRange = null;

     if (!range) return null;

     try {

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

     } catch(e) { return null; }

     function makeSpan() {

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

       return sp;

     }

     try {

       var span = makeSpan();

       range.surroundContents(span);

       if (span.parentNode) return span;

     try {

       var frag = range.extractContents();

       sp2.appendChild(frag);

       range.insertNode(sp2);

       if (sp2 && sp2.parentNode) return sp2;

     return null;

   }

   function openFeedbackComposer() {

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

     else $fbEmail.val('');

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

     $backdrop.addClass('gra-backdrop-visible');

     var quote    = $fbQuote.text();

     if (!issueType) return;

     $fbSubmit.prop('disabled', true).text('Sending…');

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

     var issueLabels = {

       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('user_email',    email || currentUserEmail || '');

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

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

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

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

   }

   function openNoteComposer() {

     hideActions();

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

     $backdrop.addClass('gra-backdrop-visible');

     var ts    = nowIso();

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

     if (!_selRange && _selText) reCaptureFromDOM();

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

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

   }

   function openBookmarkComposer() {

     hideActions();

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

     $backdrop.addClass('gra-backdrop-visible');

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

   }

   function openPanel(tab) {

     $backdrop.removeClass('gra-backdrop-visible');

   }

   function switchTab(tab) {

     _activeTab = tab;

     $tabNotes.toggleClass('gra-tab-active', tab==='notes');

     $tabBookmarks.toggleClass('gra-tab-active', tab==='bookmarks');

     $paneNotes.toggleClass('gra-pane-active', tab==='notes');

     $paneBookmarks.toggleClass('gra-pane-active', tab==='bookmarks');

     if (tab==='notes') renderNoteCards();

   }

   function renderNoteCards() {

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

             + '<div class="gra-card-header">'

             + '<div class="gra-card-meta">'

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

   }

   function scrollToHighlight(id) {

   }

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

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

     });

       if (!_mobile) return;

     }, { passive: true });

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

       _selVersion++;

       clearTimeout(_selTimer);

     });

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

       var t = e.target;

       hideActions();

     });

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

       var q = _selText;

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

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

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

       var q = _selText;

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

     });

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

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

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

     });

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

     $bmSubmit.on('click', submitBookmark);

     });

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

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

     $tabNotes.on('click', function(){ switchTab('notes'); });

     $tabBookmarks.on('click', function(){ switchTab('bookmarks'); });

     $paneNotes.on('click', '.gra-note-card', function(e){

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

       if (id) deleteBookmark(id);

     });

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

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

       }, 100);

     });

     });

   }

   function persistNoteHighlight(id, quote) {

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

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

     });

   }

     } catch(e){ return null; }

   }

   $(function() {

       _mobile = window.innerWidth < 768 || 'ontouchstart' in window;

     });

     buildDom();

     wireEvents();

     loadNotes();

     loadBookmarks();

     setTimeout(function(){

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