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 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 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=" | ' 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 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=" | ' 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 class="gra-btn-cancel" id="gra-cmp-cancel">Cancel</button>', | ||
' <button class="gra-btn-submit" id="gra-cmp-submit" disabled> | ' <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=" | ' 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 class="gra-btn-cancel" id="gra-bm-cancel">Cancel</button>', | ||
' <button class="gra-btn-submit" id="gra-bm-submit"> | ' <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 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:' | 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] | 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() || (' | 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"> | $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"> | $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 class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="Remove">×</button>' | ||
+ '</div>'; | + '</div>'; | ||
}); | }); | ||