MediaWiki:Common.js: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
 $(function () {
-    // Only show on article/content pages, not special pages
      if (mw.config.get('wgNamespaceNumber') !== 0) return;
-     var buttons = $('<div>', { style: 'margin-bottom: 1em;' }).append(
+     var pageName = mw.config.get('wgPageName');
-        $('<span>').addClass('ao3-button').text('Kudos ♥'),
-        $('<span>').addClass('ao3-button').text('Bookmark').css('margin-left', '6px'),
-    );
-     // Insert before the first heading or at the top of the content area
+     // --- Kudos ---
-     $('#mw-content-text').prepend(buttons);
+     var kudosKey = 'kudos_' + pageName;
-});
+    var kudosGiven = localStorage.getItem(kudosKey) === 'true';
+    var kudosBtn = $('<span>')
+        .addClass('ao3-button')
+        .text(kudosGiven ? 'Kudos given! ♥' : 'Kudos ♥')
+        .css('background-color', kudosGiven ? '#c8e6c9' : '')
+        .on('click', function () {
+            if (!kudosGiven) {
+                kudosGiven = true;
+                localStorage.setItem(kudosKey, 'true');
+                $(this).text('Kudos given! ♥');
+                $(this).css('background-color', '#c8e6c9');
+            }
+        });
+    // --- Bookmark ---
+    var bookmarkKey = 'bookmark_' + pageName;
+    var isBookmarked = localStorage.getItem(bookmarkKey) === 'true';
+    var bookmarkBtn = $('<span>')
+        .addClass('ao3-button')
+        .text(isBookmarked ? 'Bookmarked ✓' : 'Bookmark')
+        .css({ 'margin-left': '6px', 'background-color': isBookmarked ? '#c8e6c9' : '' })
+        .on('click', function () {
+            isBookmarked = !isBookmarked;
+            localStorage.setItem(bookmarkKey, isBookmarked);
+            $(this).text(isBookmarked ? 'Bookmarked ✓' : 'Bookmark');
+            $(this).css('background-color', isBookmarked ? '#c8e6c9' : '');
+        });
+    // --- Inject ---
+    var bar = $('<div>', { style: 'margin-bottom: 1em;' })
+        .append(kudosBtn, bookmarkBtn);
-$('<span>').addClass('ao3-button').text('Kudos ♥').on('click', function () {
+    $('#mw-content-text').prepend(bar);
-    $(this).text('Kudos given! ♥');
+});
-    $(this).css('background-color', '#c8e6c9'); // light green feedback
-})