MediaWiki:Common.js: Difference between revisions

Help

Revision as of 20:41, 15 February 2026

  1 /* Any JavaScript here will be loaded for all users on every page load. */
  2 
  3 /* ============================================================
  4    THEME TOGGLE — Dark/Light mode switcher
  5    Defaults to dark. Saves preference to localStorage.
  6    ============================================================ */
  7 (function() {
  8     // Apply theme from localStorage BEFORE page renders (avoid flash)
  9     var saved = localStorage.getItem('flatmmo-theme') || 'dark';
 10     document.documentElement.className += ' ' + saved + '-theme';
 11 
 12     // Apply search bar mode BEFORE page renders (avoid flash)
 13     var searchMode = localStorage.getItem('flatmmo-search') || 'top';
 14     document.documentElement.className += ' search-' + searchMode;
 15 
 16     document.addEventListener('DOMContentLoaded', function() {
 17         document.body.classList.add(saved + '-theme');
 18         document.body.classList.add('search-' + searchMode);
 19     });
 20 })();
 21 
 22 $(document).ready(function () {
 23 console.log("loaded");
 24 
 25 // --- Theme toggle button ---
 26 (function() {
 27     var currentTheme = localStorage.getItem('flatmmo-theme') || 'dark';
 28 
 29     // Ensure body has the right class
 30     document.body.classList.remove('dark-theme', 'light-theme');
 31     document.body.classList.add(currentTheme + '-theme');
 32 
 33     // Create toggle button
 34     var btn = document.createElement('button');
 35     btn.className = 'theme-toggle-btn';
 36     btn.title = 'Toggle light/dark mode';
 37     btn.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
 38 
 39     btn.addEventListener('click', function() {
 40         var isDark = document.body.classList.contains('dark-theme');
 41         var newTheme = isDark ? 'light' : 'dark';
 42 
 43         document.body.classList.remove('dark-theme', 'light-theme');
 44         document.body.classList.add(newTheme + '-theme');
 45         document.documentElement.classList.remove('dark-theme', 'light-theme');
 46         document.documentElement.classList.add(newTheme + '-theme');
 47 
 48         localStorage.setItem('flatmmo-theme', newTheme);
 49         btn.textContent = newTheme === 'dark' ? '☀️' : '🌙';
 50     });
 51 
 52     // Insert into Cosmos header (next to wiki buttons) or fallback to content area
 53     var target = document.querySelector('.cosmos-header__wiki-buttons')
 54               || document.querySelector('.cosmos-actions')
 55               || document.querySelector('.wds-button-group')
 56               || document.querySelector('#content');
 57     if (target) {
 58         if (target.id === 'content') {
 59             // Fallback: put it at the top of content
 60             target.insertBefore(btn, target.firstChild);
 61         } else {
 62             target.appendChild(btn);
 63         }
 64     }
 65 
 66 })();
 67 
 68 // --- Search bar toggle + compact header search bar ---
 69 (function() {
 70     var searchMode = localStorage.getItem('flatmmo-search') || 'top';
 71 
 72     // Ensure body has the right class
 73     document.body.classList.remove('search-top', 'search-header');
 74     document.body.classList.add('search-' + searchMode);
 75 
 76     // Create toggle button
 77     var searchToggle = document.createElement('button');
 78     searchToggle.className = 'search-toggle-btn';
 79     searchToggle.title = 'Toggle search bar position';
 80     searchToggle.textContent = searchMode === 'top' ? '🔍' : '🔎';
 81 
 82     searchToggle.addEventListener('click', function() {
 83         var isTop = document.body.classList.contains('search-top');
 84         var newMode = isTop ? 'header' : 'top';
 85 
 86         document.body.classList.remove('search-top', 'search-header');
 87         document.body.classList.add('search-' + newMode);
 88         document.documentElement.classList.remove('search-top', 'search-header');
 89         document.documentElement.classList.add('search-' + newMode);
 90 
 91         localStorage.setItem('flatmmo-search', newMode);
 92         searchToggle.textContent = newMode === 'top' ? '🔍' : '🔎';
 93     });
 94 
 95     // Create compact header search bar
 96     var searchWrap = document.createElement('div');
 97     searchWrap.className = 'header-search-wrap';
 98 
 99     var searchInput = document.createElement('input');
100     searchInput.type = 'text';
101     searchInput.className = 'header-search-input';
102     searchInput.placeholder = 'Search wiki...';
103     searchInput.setAttribute('autocomplete', 'off');
104 
105     var searchBtn = document.createElement('button');
106     searchBtn.className = 'header-search-btn';
107     searchBtn.innerHTML = '&#x1F50D;';
108     searchBtn.title = 'Search';
109 
110     function doSearch() {
111         var q = searchInput.value.trim();
112         if (q) {
113             window.location.href = mw.util.getUrl('Special:Search') + '?search=' + encodeURIComponent(q);
114         }
115     }
116 
117     searchBtn.addEventListener('click', doSearch);
118     searchInput.addEventListener('keydown', function(e) {
119         if (e.key === 'Enter') doSearch();
120     });
121 
122     searchWrap.appendChild(searchInput);
123     searchWrap.appendChild(searchBtn);
124 
125     // Insert toggle button inline with other header buttons
126     var target = document.querySelector('.cosmos-header__wiki-buttons')
127               || document.querySelector('.cosmos-actions')
128               || document.querySelector('.wds-button-group')
129               || document.querySelector('#content');
130     if (target && target.id !== 'content') {
131         target.appendChild(searchToggle);
132         // Make target the positioning anchor, append search bar inside
133         target.style.position = 'relative';
134         target.appendChild(searchWrap);
135 
136         // Relocate username from banner into header for header mode
137         var bannerUser = document.querySelector('.cosmos-userButton-label')
138                       || document.querySelector('#p-personal-label');
139         var userName = bannerUser ? bannerUser.textContent.trim() : '';
140         if (userName) {
141             var userLink = document.createElement('a');
142             userLink.className = 'relocated-user';
143             userLink.href = mw.util.getUrl('User:' + userName);
144             userLink.title = userName;
145 
146             var userIcon = document.createElement('span');
147             userIcon.className = 'relocated-user-icon';
148             userIcon.innerHTML = '👤';
149 
150             var userText = document.createElement('span');
151             userText.className = 'relocated-user-name';
152             userText.textContent = userName;
153 
154             userLink.appendChild(userIcon);
155             userLink.appendChild(userText);
156             target.appendChild(userLink);
157         }
158     }
159 })();
160 
161 $.getScript(mw.util.getUrl("MediaWiki:ProfileTags.js") + "?action=raw&ctype=text/javascript");
162 	if (document.getElementById("interactiveMap")) {
163 console.log("map loaded")
164 		$.getScript(mw.util.getUrl("MediaWiki:InteractiveMap/Objects.js") + "?action=raw&ctype=text/javascript", function() {
165             $.getScript(mw.util.getUrl("MediaWiki:InteractiveMap/NPCs.js") + "?action=raw&ctype=text/javascript", function() {
166                 $.getScript(mw.util.getUrl("MediaWiki:InteractiveMap/Maps.js") + "?action=raw&ctype=text/javascript", function() {
167                     $.getScript(mw.util.getUrl("MediaWiki:InteractiveMap.js") + "?action=raw&ctype=text/javascript", function() {
168                     });
169                 });
170             });
171         });
172 	}
173 
174 	if (document.getElementById("wardrobe")) {
175 		$.getScript(mw.util.getUrl("MediaWiki:Wardrobe.js") + "?action=raw&ctype=text/javascript");
176 		console.log("wardrobe loaded")
177 	}
178 
179     if (document.getElementById("mapEditor")) {
180         $.getScript("https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js", function() {
181             $.getScript(mw.util.getUrl("MediaWiki:InteractiveMap/Objects.js") + "?action=raw&ctype=text/javascript", function() {
182                 $.getScript(mw.util.getUrl("MediaWiki:InteractiveMap/NPCs.js") + "?action=raw&ctype=text/javascript", function() {
183                     $.getScript(mw.util.getUrl("MediaWiki:InteractiveMap/Maps.js") + "?action=raw&ctype=text/javascript", function() {
184                         $.getScript(mw.util.getUrl("MediaWiki:MapEditor.js") + "?action=raw&ctype=text/javascript", function() {
185                         });
186                     });
187                 });
188             });
189         });
190     }
191 if (document.querySelector(".code")) {
192 	$.getScript("../custom/highlight.min.js", ()=>{
193 		document.querySelectorAll(".code").forEach(el=>hljs.highlightElement(el))
194 		console.log('Code highlighted');
195 	});
196 }
197 
198 if (document.querySelector('[class*="Tracker"]') && !document.querySelector('[class*="page-MediaWiki"]')) {
199 	$.getScript(mw.util.getUrl("MediaWiki:Trackers.js") + "?action=raw&ctype=text/javascript");
200     console.log("Tracker loaded");
201 }
202 
203 if (document.getElementById("enemiesDB")) {
204 	$.getScript(mw.util.getUrl("MediaWiki:Update_DB.js") + "?action=raw&ctype=text/javascript");
205 	console.log("DB Updater Loaded")
206 }
207 function hitChance(accuracy, defence) {
208     accuracy = parseInt(accuracy);
209     defence = parseInt(defence);
210     let hitChance = 0;
211     if(accuracy >= defence) {
212         hitChance = 1;
213     } else {
214         hitChance = 1 / (1 + defence - accuracy)
215     }
216     return (hitChance * 100).toFixed(2);
217 }
218 if (document.querySelector('.hitChance')) {
219     document.querySelectorAll(".hitChance").forEach(el => {
220         let [acc, def] = el.innerText.split(",")
221         el.innerText = "";
222         const accSpan = document.createElement("span");
223         const defSpan = document.createElement("span");
224         const hitSpan = document.createElement("span");
225         const accInput = document.createElement("input");
226         const defInput = document.createElement("input");
227         const hitValueSpan = document.createElement("span");
228 
229         accSpan.innerText = "Accuracy:";
230         defSpan.innerText = "Defence:";
231         hitSpan.innerText = "Hit Chance:";
232 
233         accInput.type = "number";
234         defInput.type = "number";
235         accInput.min = 0;
236         defInput.min = 0;
237         if(acc !== "0") {
238             accInput.disabled = true;
239         }
240         if(def !== "0") {
241             defInput.disabled = true
242         }
243         def = def < 0 ? 0 : def;
244         acc = acc < 0 ? 0 : acc;
245         accInput.defaultValue = acc;
246         defInput.defaultValue = def;
247         accInput.onchange = function(){
248             hitValueSpan.innerText = hitChance(accInput.value, defInput.value) + "%";
249         }
250         defInput.onchange = function(){
251             hitValueSpan.innerText = hitChance(accInput.value, defInput.value) + "%";
252         }
253         el.append(accSpan, accInput, defSpan, defInput, hitSpan, hitValueSpan);
254         hitValueSpan.innerText = hitChance(accInput.value, defInput.value) + "%";
255     })
256 }
257 
258 });

@@ Line 73: / Line 73: @@
      document.body.classList.remove('search-top', 'search-header');
      document.body.classList.add('search-' + searchMode);
-    // Directly shrink/restore the header via JS (CSS can't override Cosmos inline styles)
-    function applyHeaderShrink(mode) {
-        // Find every element inside .cosmos-header that might have height/padding
-        var header = document.querySelector('.cosmos-header');
-        if (!header) return;
-        var els = header.querySelectorAll('*');
-        if (mode === 'header') {
-            // Store original styles and shrink
-            header.setAttribute('data-orig-pt', header.style.paddingTop || '');
-            header.setAttribute('data-orig-mh', header.style.minHeight || '');
-            header.style.paddingTop = '0px';
-            header.style.minHeight = '0px';
-            for (var i = 0; i < els.length; i++) {
-                var el = els[i];
-                var tag = el.tagName.toLowerCase();
-                var cs = window.getComputedStyle(el);
-                // Shrink any element with large padding-top or min-height
-                if (parseInt(cs.paddingTop) > 20) {
-                    el.setAttribute('data-orig-pt', el.style.paddingTop || '');
-                    el.style.paddingTop = '0px';
-                }
-                if (parseInt(cs.minHeight) > 50) {
-                    el.setAttribute('data-orig-mh', el.style.minHeight || '');
-                    el.style.minHeight = '0px';
-                }
-                if (parseInt(cs.height) > 100 && cs.backgroundImage && cs.backgroundImage !== 'none') {
-                    el.setAttribute('data-orig-h', el.style.height || '');
-                    el.style.height = 'auto';
-                }
-            }
-        } else {
-            // Restore originals
-            header.style.paddingTop = header.getAttribute('data-orig-pt') || '';
-            header.style.minHeight = header.getAttribute('data-orig-mh') || '';
-            for (var j = 0; j < els.length; j++) {
-                var el2 = els[j];
-                if (el2.hasAttribute('data-orig-pt')) {
-                    el2.style.paddingTop = el2.getAttribute('data-orig-pt');
-                }
-                if (el2.hasAttribute('data-orig-mh')) {
-                    el2.style.minHeight = el2.getAttribute('data-orig-mh');
-                }
-                if (el2.hasAttribute('data-orig-h')) {
-                    el2.style.height = el2.getAttribute('data-orig-h');
-                }
-            }
-        }
-    }
-    // Apply on load
-    applyHeaderShrink(searchMode);
      // Create toggle button
@@ Line 143: / Line 91: @@
          localStorage.setItem('flatmmo-search', newMode);
          searchToggle.textContent = newMode === 'top' ? '🔍' : '🔎';
-        applyHeaderShrink(newMode);
      });