MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

No edit summary
No edit summary
Line 118: Line 118:
     // ── FAB strip ────────────────────────────────────────────────────
     // ── FAB strip ────────────────────────────────────────────────────
     $fab = $( [
     $fab = $( [
       '<div id="gra-fab" role="toolbar" aria-label="टिप्पणी / चिह्नांकन">',
       '<div id="gra-fab" role="toolbar" aria-label="Comment / Bookmark">',
       '  <button class="gra-fab-btn" id="gra-fab-comment" type="button" aria-label="टिप्पणी जोड़ें">',
       '  <button class="gra-fab-btn" id="gra-fab-comment" type="button" aria-label="Add comment">',
       '    <span class="gra-icon gra-icon-comment" aria-hidden="true"></span>',
       '    <span class="gra-icon gra-icon-comment" aria-hidden="true"></span>',
       '    <span class="gra-fab-tooltip">टिप्पणी</span>',
       '    <span class="gra-fab-tooltip">Comment</span>',
       '  </button>',
       '  </button>',
       '  <button class="gra-fab-btn" id="gra-fab-bookmark" type="button" aria-label="चिह्नांकन">',
       '  <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-icon gra-icon-bookmark" aria-hidden="true"></span>',
       '    <span class="gra-fab-tooltip">चिह्नांकन</span>',
       '    <span class="gra-fab-tooltip">Bookmark</span>',
       '  </button>',
       '  </button>',
       '</div>',
       '</div>',
Line 136: Line 136:
       '  <div class="gra-composer-name-row">',
       '  <div class="gra-composer-name-row">',
       '    <input class="gra-composer-input gra-name-input" id="gra-cmp-name"',
       '    <input class="gra-composer-input gra-name-input" id="gra-cmp-name"',
       '      type="text" placeholder="आपका नाम (ऐच्छिक)" autocomplete="name">',
       '      type="text" placeholder="Your name (optional)" autocomplete="name">',
       '  </div>',
       '  </div>',
     ].join('');
     ].join('');


     $cmpComposer = $( [
     $cmpComposer = $( [
       '<div class="gra-composer" id="gra-cmp-composer" role="dialog" aria-label="टिप्पणी जोड़ें">',
       '<div class="gra-composer" id="gra-cmp-composer" role="dialog" aria-label="Add comment">',
       '  <div class="gra-composer-user">',
       '  <div class="gra-composer-user">',
       '    <div class="gra-avatar" id="gra-cmp-avatar">' + esc(currentUser ? userInitial : '?') + '</div>',
       '    <div class="gra-avatar" id="gra-cmp-avatar">' + esc(currentUser ? userInitial : '?') + '</div>',
       '    <div class="gra-composer-uname">' + esc(currentUser || 'अतिथि') + '</div>',
       '    <div class="gra-composer-uname">' + esc(currentUser || 'Guest') + '</div>',
       '  </div>',
       '  </div>',
       nameRow,
       nameRow,
       '  <textarea class="gra-composer-input" id="gra-cmp-input"',
       '  <textarea class="gra-composer-input" id="gra-cmp-input"',
       '    placeholder="टिप्पणी लिखें…" rows="3"></textarea>',
       '    placeholder="Write a comment…" rows="3"></textarea>',
       '  <div class="gra-composer-actions">',
       '  <div class="gra-composer-actions">',
       '    <button class="gra-btn-cancel" id="gra-cmp-cancel">रद्द</button>',
       '    <button class="gra-btn-cancel" id="gra-cmp-cancel">Cancel</button>',
       '    <button class="gra-btn-submit" id="gra-cmp-submit" disabled>भेजें</button>',
       '    <button class="gra-btn-submit" id="gra-cmp-submit" disabled>Comment</button>',
       '  </div>',
       '  </div>',
       '</div>',
       '</div>',
Line 159: Line 159:
     // ── Bookmark composer ─────────────────────────────────────────────
     // ── Bookmark composer ─────────────────────────────────────────────
     $bmComposer = $( [
     $bmComposer = $( [
       '<div class="gra-bm-composer" id="gra-bm-composer" role="dialog" aria-label="चिह्नांकन">',
       '<div class="gra-bm-composer" id="gra-bm-composer" role="dialog" aria-label="Bookmark">',
       '  <div class="gra-bm-composer-label">',
       '  <div class="gra-bm-composer-label">',
       '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
       '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
       '    चिह्नांकन सहेजें',
       '    Save bookmark',
       '  </div>',
       '  </div>',
       '  <input class="gra-composer-input" id="gra-bm-input"',
       '  <input class="gra-composer-input" id="gra-bm-input"',
       '    type="text" placeholder="नाम दें…" autocomplete="off">',
       '    type="text" placeholder="Name this bookmark…" autocomplete="off">',
       '  <div class="gra-composer-actions">',
       '  <div class="gra-composer-actions">',
       '    <button class="gra-btn-cancel" id="gra-bm-cancel">रद्द</button>',
       '    <button class="gra-btn-cancel" id="gra-bm-cancel">Cancel</button>',
       '    <button class="gra-btn-submit" id="gra-bm-submit">सहेजें</button>',
       '    <button class="gra-btn-submit" id="gra-bm-submit">Save</button>',
       '  </div>',
       '  </div>',
       '</div>',
       '</div>',
Line 176: Line 176:
     // ── Right panel ───────────────────────────────────────────────────
     // ── Right panel ───────────────────────────────────────────────────
     $panel = $( [
     $panel = $( [
       '<div id="gra-panel" role="complementary" aria-label="टिप्पणियाँ">',
       '<div id="gra-panel" role="complementary" aria-label="Comments">',
       '  <div id="gra-panel-head">',
       '  <div id="gra-panel-head">',
       '    <div id="gra-panel-title"></div>',
       '    <div id="gra-panel-title"></div>',
       '    <button id="gra-panel-close" title="बन्द करें">✕</button>',
       '    <button id="gra-panel-close" title="Close">✕</button>',
       '  </div>',
       '  </div>',
       '  <div id="gra-tabs">',
       '  <div id="gra-tabs">',
       '    <button class="gra-tab gra-tab-active" id="gra-tab-comments">',
       '    <button class="gra-tab gra-tab-active" id="gra-tab-comments">',
       '      <span class="gra-icon gra-icon-comment" aria-hidden="true"></span> टिप्पण्यः',
       '      <span class="gra-icon gra-icon-comment" aria-hidden="true"></span> Comments',
       '    </button>',
       '    </button>',
       '    <button class="gra-tab" id="gra-tab-bookmarks">',
       '    <button class="gra-tab" id="gra-tab-bookmarks">',
       '      <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span> चिह्नाः',
       '      <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span> Bookmarks',
       '    </button>',
       '    </button>',
       '  </div>',
       '  </div>',
Line 202: Line 202:
     // Toggle FAB (bottom-right, persistent)
     // Toggle FAB (bottom-right, persistent)
     var $toggle = $( [
     var $toggle = $( [
       '<button id="gra-toggle" aria-label="टिप्पणियाँ">',
       '<button id="gra-toggle" aria-label="Comments">',
       '  <span class="gra-icon gra-icon-comment" id="gra-toggle-icon" aria-hidden="true"></span>',
       '  <span class="gra-icon gra-icon-comment" id="gra-toggle-icon" aria-hidden="true"></span>',
       '  <span id="gra-toggle-badge" aria-live="polite"></span>',
       '  <span id="gra-toggle-badge" aria-live="polite"></span>',
Line 392: Line 392:
       api.postWithEditToken({
       api.postWithEditToken({
         action:'edit', title:commentsPage, text:updated,
         action:'edit', title:commentsPage, text:updated,
         summary:'टिप्पणी — ' + author,
         summary:'Comment — ' + author,
         bot:0,
         bot:0,
       }).catch(function(){});
       }).catch(function(){});
Line 405: Line 405:
     var pageDisplay = pageTitle.replace(/_/g,' ');
     var pageDisplay = pageTitle.replace(/_/g,' ');


     var subject = encodeURIComponent('[Grantha] टिप्पणी — "' + pageDisplay + '"');
     var subject = encodeURIComponent('[Grantha] Comment — "' + pageDisplay + '"');
     var body    = encodeURIComponent(
     var body    = encodeURIComponent(
       'Page    : ' + pageDisplay + '\n'
       'Page    : ' + pageDisplay + '\n'
Line 476: Line 476:


   function submitBookmark() {
   function submitBookmark() {
     var name  = $bmInput.val().trim() || ('चिह्न ' + (_bookmarks.length + 1));
     var name  = $bmInput.val().trim() || ('Bookmark ' + (_bookmarks.length + 1));
     var id    = uid();
     var id    = uid();
     var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');
     var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');
Line 536: Line 536:
   function renderCommentCards() {
   function renderCommentCards() {
     if (!_comments.length) {
     if (!_comments.length) {
       $paneComments.html('<div class="gra-empty-state">अभी कोई टिप्पणी नहीं।<br>पाठ चुनें और 💬 पर क्लिक करें।</div>');
       $paneComments.html('<div class="gra-empty-state">No comments yet.<br>Select text and click 💬 to add one.</div>');
       return;
       return;
     }
     }
Line 557: Line 557:
   function renderBookmarkCards() {
   function renderBookmarkCards() {
     if (!_bookmarks.length) {
     if (!_bookmarks.length) {
       $paneBookmarks.html('<div class="gra-empty-state">अभी कोई चिह्न नहीं।<br>पाठ चुनें और 🔖 पर क्लिक करें।</div>');
       $paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and click 🔖 to save one.</div>');
       return;
       return;
     }
     }
Line 568: Line 568:
             + (b.quote ? '<div class="gra-bookmark-quote">' + esc(b.quote) + '</div>' : '')
             + (b.quote ? '<div class="gra-bookmark-quote">' + esc(b.quote) + '</div>' : '')
             + '</div>'
             + '</div>'
             + '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="हटाएं">×</button>'
             + '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="Remove">×</button>'
             + '</div>';
             + '</div>';
     });
     });