MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

/**

  */

   // ── State ────────────────────────────────────────────────────────────

   var _selText    = '';

   var _selRect    = null;

   var _selVersion = 0;

   var _fabSelVer  = -1;

   // ── Helpers ──────────────────────────────────────────────────────────

   function buildDom() {

     $fab = $( [

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

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

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

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

       '  </button>',

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

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

       '    <span class="gra-fab-tooltip">Bookmark</span>',

       '  </button>',

       '</div>',

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

     $mobileBar = $( [

       '<div id="gra-mobile-bar" role="toolbar" aria-label="Actions">',

       '    <button class="gra-mob-btn" id="gra-mob-note" type="button">',

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

       '    </button>',

       '    <button class="gra-mob-btn" id="gra-mob-bookmark" type="button">',

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

       '      <span class="gra-mob-label">Bookmark</span>',

       '    </button>',

       '    <button class="gra-mob-btn gra-mob-dismiss" id="gra-mob-dismiss" type="button">',

     $('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">',

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

     });

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

   // ════════════════════════════════════════════════════════════════════

   // ════════════════════════════════════════════════════════════════════

   function captureSelection() {

     var sel = window.getSelection();

     var contentEl = document.querySelector(CONTENT_SEL);

     if (!contentEl) return false;

     _selText  = text;

     _selRect  = range.getBoundingClientRect();

     return true;

   }

   function tryShowActions() {

     if (!captureSelection()) {

       hideActions();

   function showFab(rect) {

     if (!rect) return;

     var fabW = 46, fabH = 126;

   // ════════════════════════════════════════════════════════════════════

     }

     try {

   }

     setTimeout(closeFeedbackComposer, 2500);

   }

   function showFeedbackError(msg) {

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

   function openNoteComposer() {

     hideActions();

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

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

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

   function openBookmarkComposer() {

     hideActions();

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

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

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

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

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

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

       setTimeout(tryShowActions, 20);

     });

     var _selTimer = null;

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

         if (_fabSelVer === v) return;

         tryShowActions();

     });

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

       var t = e.target;

     });

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

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

       openFeedbackComposer();

     });

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

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

       openNoteComposer();

     });

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

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

       openBookmarkComposer();

     });

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

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

       hideMobileBar();

       openFeedbackComposer();

     });

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

       hideMobileBar();

       openNoteComposer();

     });

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

       hideMobileBar();

       openBookmarkComposer();

     });

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

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

       hideMobileBar();

       if (window.getSelection) window.getSelection().removeAllRanges();

     });

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

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

     loadNotes();

     loadBookmarks();

   });

}() );