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 _selRange  = null;

   var _selText    = '';

   var _selVersion = 0;

   var _fabSelVer  = -1;

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

     $fab = $( [

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

       '  </button>',

       '  </button>',

       '  </button>',

       '</div>',

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

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

     $fbComposer = $( [

       '<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',

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

     $ntComposer = $( [

       '<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',

       '  <div class="gra-composer-user">',

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

       '  </div>',

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

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

     $bmComposer = $( [

       '<div class="gra-bm-composer" id="gra-bm-composer" role="dialog" aria-label="Bookmark">',

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

     $panel = $( [

       '<div id="gra-panel" role="complementary" aria-label="Notes">',

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

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

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

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

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

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

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

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

   }

   function captureSelection() {

     var contentEl = document.querySelector(CONTENT_SEL);

     if (!contentEl) return false;

     _selText  = text;

     _selRect  = range.getBoundingClientRect();

     return true;

   }

   function tryShowActions() {

     _fabSelVer = _selVersion;

   }

   function showFab(rect) {

     if (!rect) return;

     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 wrapSelection(id, cssClass) {

     var range = _selRange;

     _selRange = null;

     try {

       range.surroundContents(span);

   }

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

     setTimeout(closeFeedbackComposer, 2500);

   }

   function showFeedbackError(msg) {

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

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

   }

   function openNoteComposer() {

     hideActions();

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

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

   }

     var ts    = nowIso();

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

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

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

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

   }

   function openBookmarkComposer() {

     hideActions();

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

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

   }

     var id    = uid();

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

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

     if (span) { span.setAttribute('data-gra-id', id); span.setAttribute('data-gra-name', name); }

     _bookmarks = _bookmarks.filter(function(b){ return b.id !== id; });

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

       var p = span.parentNode;

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

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

     _notes = _notes.filter(function(n){ return n.id !== id; });

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

       var p = span.parentNode;

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

   }

   function scrollToHighlight(id) {

   }

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

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

       setTimeout(tryShowActions, 20);

     });

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

       _selVersion++;

       clearTimeout(_selTimer);

         if (v !== _selVersion) return;

         if (_fabSelVer === v) return;

         tryShowActions();

     });

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

       var t = e.target;

       hideActions();

     });

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

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

     });

     $fbSubmit.on('click', submitFeedback);

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

     $ntSubmit.on('click', submitNote);

     });

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

       if (!needle) return;

       var range = findTextInContent(document.querySelector(CONTENT_SEL), needle);

     });

   }

       if (!needle) return;

       var found = findTextInContent(document.querySelector(CONTENT_SEL), needle);

     });

   }

   function findTextInContent(root, needle) {

     var text = root.textContent || '';

     var idx  = text.indexOf(needle);

     }

     if (!startNode || !endNode) return null;

   }

   $(function() {

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

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

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

     });

     buildDom();

     wireEvents();

     loadNotes();

     loadBookmarks();

   });

}() );