MediaWiki:Common.js: Difference between revisions
Myriad-admin (talk | contribs) No edit summary |
Myriad-admin (talk | contribs) No edit summary |
||
Line 14: | Line 14: | ||
var h = $('#drg-navbar').outerHeight() || 60; | var h = $('#drg-navbar').outerHeight() || 60; | ||
$('body').css('padding-top', h + 'px'); | $('body').css('padding-top', h + 'px'); | ||
} | |||
// Build a clean Echo link that won't inherit text-hiding styles | |||
function buildEchoLink($a, label) { | |||
if (!$a || !$a.length) return null; | |||
// href + rel/target if present | |||
var href = $a.attr('href') || '#'; | |||
var rel = $a.attr('rel') || ''; | |||
var target = $a.attr('target') || ''; | |||
// Try to capture a count if Echo provides it | |||
var count = $a.attr('data-counter-num') || ''; | |||
if (count && /^\d+$/.test(count) && parseInt(count, 10) > 0) { | |||
label += ' (' + count + ')'; | |||
} | |||
// Try to reuse a child icon if present | |||
var $icon = $a.find('span, i, svg').first().clone(); | |||
var iconHtml = $icon.length ? $icon.prop('outerHTML') : ''; | |||
// Return a fresh anchor with minimal classes (no text-hiding) | |||
return [ | |||
'<a href="', href, '"', | |||
(rel ? ' rel="' + rel + '"' : ''), | |||
(target ? ' target="' + target + '"' : ''), | |||
' class="drg-echo-link"', | |||
'>', | |||
iconHtml, | |||
'<span class="drg-echo-label">', label, '</span>', | |||
'</a>' | |||
].join(''); | |||
} | } | ||
Line 58: | Line 90: | ||
const items = []; | const items = []; | ||
// --- Echo notifications | // --- Echo notifications: build clean, labeled links --- | ||
const $alertA = $('#pt-notifications-alert a').first(); | |||
const $noticeA = $('#pt-notifications-notice a').first(); | |||
const noticeA = $('#pt-notifications-notice a').first(); | |||
const | const alertHtml = buildEchoLink($alertA, 'Your Alerts'); | ||
const | const noticeHtml = buildEchoLink($noticeA, 'Your Notices'); | ||
if ( | if (alertHtml) items.push('<li>' + alertHtml + '</li>'); | ||
if ( | if (noticeHtml) items.push('<li>' + noticeHtml + '</li>'); | ||
// --- Personal tools (except duplicate logout at the end) --- | // --- Personal tools (except duplicate logout at the end) --- | ||
Line 92: | Line 106: | ||
const titleText = ($a.text() || '').trim(); | const titleText = ($a.text() || '').trim(); | ||
// Skip Echo items we already | // Skip Echo items we already handled | ||
if (href.includes('Notifications') || href.includes('Echo')) return; | if (href.includes('Notifications') || href.includes('Echo')) return; | ||
// Keep Watchlist | // Keep Watchlist | ||
if | if (/Watchlist/i.test(href + titleText)) { | ||
items.push(`<li>${$a.prop('outerHTML')}</li>`); | items.push(`<li>${$a.prop('outerHTML')}</li>`); | ||
return; | return; | ||
} | } | ||
// Skip Logout (we add | // Skip Logout (we add our own) | ||
if | if (/^log ?out$/i.test(titleText)) return; | ||
// Include everyone else (Preferences, Contributions, etc.) | // Include everyone else (Preferences, Contributions, etc.) | ||
Line 122: | Line 136: | ||
// ===== Tools dropdown (merge Actions + General like production) ===== | // ===== Tools dropdown (merge Actions + General like production) ===== | ||
const actionsLis = htmlFromPortlet('#p-cactions'); // Actions | const actionsLis = htmlFromPortlet('#p-cactions'); // Actions | ||
let generalLis = htmlFromPortlet('#p-tb'); // General | let generalLis = htmlFromPortlet('#p-tb'); // General | ||
// Fallback | // Fallback for Vector-2022 portlet structure | ||
if (generalLis.length === 0) { | if (generalLis.length === 0) { | ||
generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content'); | generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content'); |
Revision as of 13:37, 13 October 2025
mw.loader.using(['mediawiki.util', 'mediawiki.searchSuggest'], function () {
$(function () {
if ($('#drg-navbar').length) return;
// ===== Helpers =====
function htmlFromPortlet(selector) {
// Return array of <li>...</li> HTML for all anchors in a portlet list (if present)
return $(selector).find('li a').map(function () {
return '<li>' + $(this).prop('outerHTML') + '</li>';
}).get();
}
function setBodyTopPaddingToNavbar() {
var h = $('#drg-navbar').outerHeight() || 60;
$('body').css('padding-top', h + 'px');
}
// Build a clean Echo link that won't inherit text-hiding styles
function buildEchoLink($a, label) {
if (!$a || !$a.length) return null;
// href + rel/target if present
var href = $a.attr('href') || '#';
var rel = $a.attr('rel') || '';
var target = $a.attr('target') || '';
// Try to capture a count if Echo provides it
var count = $a.attr('data-counter-num') || '';
if (count && /^\d+$/.test(count) && parseInt(count, 10) > 0) {
label += ' (' + count + ')';
}
// Try to reuse a child icon if present
var $icon = $a.find('span, i, svg').first().clone();
var iconHtml = $icon.length ? $icon.prop('outerHTML') : '';
// Return a fresh anchor with minimal classes (no text-hiding)
return [
'<a href="', href, '"',
(rel ? ' rel="' + rel + '"' : ''),
(target ? ' target="' + target + '"' : ''),
' class="drg-echo-link"',
'>',
iconHtml,
'<span class="drg-echo-label">', label, '</span>',
'</a>'
].join('');
}
// ===== Logo =====
const logoSrc = $('.mw-logo-icon').attr('src') || '/images/3/3f/Myriad_logo_icon_transparent.png';
const logoHtml = `
<a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
<img src="${logoSrc}" alt="MYRIAD Logo">
</a>`;
// ===== Build left-side links in order: About, Navigation, Contribute =====
const aboutHtml = `<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;
const navItems = [
{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },
{ title: 'Definitions', url: mw.util.getUrl('Definitions') },
{ title: 'Resources', url: mw.util.getUrl('Resources') }
];
const navHtml = `
<div class="drg-nav">
<span>Navigation</span>
<ul class="drg-nav-dropdown">
${navItems.map(i => `<li><a href="${i.url}">${i.title}</a></li>`).join('')}
</ul>
</div>`;
const contributeHtml = `<a href="${mw.util.getUrl('Contribute')}" class="flat-link">Contribute</a>`;
// ===== Search (with autocomplete) =====
const searchDropdownHtml = `
<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
<span id="drg-search-toggle" class="flat-link" style="cursor:pointer;">Search</span>
<form class="drg-search" id="drg-search-form" action="${mw.util.getUrl('Special:Search')}" method="get"
style="display:none; position: absolute; top: 100%; left: 0; background: white; padding: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 100;">
<input type="search" name="search" placeholder="Search..." class="mw-searchInput" autocapitalize="off" autocomplete="off">
<input type="submit" value="Search">
</form>
</div>`;
// ===== User dropdown =====
// We restore Echo (alerts/notices) + Watchlist inside the dropdown.
let userHtml;
if (mw.config.get('wgUserName')) {
const items = [];
// --- Echo notifications: build clean, labeled links ---
const $alertA = $('#pt-notifications-alert a').first();
const $noticeA = $('#pt-notifications-notice a').first();
const alertHtml = buildEchoLink($alertA, 'Your Alerts');
const noticeHtml = buildEchoLink($noticeA, 'Your Notices');
if (alertHtml) items.push('<li>' + alertHtml + '</li>');
if (noticeHtml) items.push('<li>' + noticeHtml + '</li>');
// --- Personal tools (except duplicate logout at the end) ---
$('#p-personal ul li').each(function () {
const $a = $(this).find('a');
const href = ($a.attr('href') || '');
const titleText = ($a.text() || '').trim();
// Skip Echo items we already handled
if (href.includes('Notifications') || href.includes('Echo')) return;
// Keep Watchlist
if (/Watchlist/i.test(href + titleText)) {
items.push(`<li>${$a.prop('outerHTML')}</li>`);
return;
}
// Skip Logout (we add our own)
if (/^log ?out$/i.test(titleText)) return;
// Include everyone else (Preferences, Contributions, etc.)
items.push(`<li>${$a.prop('outerHTML')}</li>`);
});
// Add a divider then Logout
items.push('<li class="drg-menu-divider"></li>');
items.push(`<li><a href="${mw.util.getUrl('Special:UserLogout')}">Logout</a></li>`);
userHtml = `
<div class="drg-user">
<span>Welcome, ${mw.config.get('wgUserName')}</span>
<ul class="drg-user-dropdown">${items.join('')}</ul>
</div>`;
} else {
userHtml = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
}
// ===== Tools dropdown (merge Actions + General like production) =====
const actionsLis = htmlFromPortlet('#p-cactions'); // Actions
let generalLis = htmlFromPortlet('#p-tb'); // General
// Fallback for Vector-2022 portlet structure
if (generalLis.length === 0) {
generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content');
}
const toolsHtml = `
<div class="drg-tools">
<span>Tools</span>
<ul class="drg-tools-dropdown">
${actionsLis.length ? `<li class="drg-menu-header">Actions</li>${actionsLis.join('')}` : ''}
${actionsLis.length && generalLis.length ? '<li class="drg-menu-divider"></li>' : ''}
${generalLis.length ? `<li class="drg-menu-header">General</li>${generalLis.join('')}` : ''}
</ul>
</div>`;
// ===== Inject Navbar =====
$('body').prepend(`
<div id="drg-navbar">
<div class="drg-navbar-container">
${logoHtml}
${aboutHtml}
${navHtml}
${contributeHtml}
${searchDropdownHtml}
<div class="drg-navbar-actions">
${userHtml}
${toolsHtml}
</div>
</div>
</div>
`);
// ===== Toggle search input visibility + autocomplete focus =====
$('#drg-search-toggle').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$('#drg-search-form').toggle();
$('#drg-search-form input[type="search"]').trigger('focus');
});
// Close search dropdown when clicking outside
$(document).on('click', function () { $('#drg-search-form').hide(); });
$('#drg-search-form').on('click', function (e) { e.stopPropagation(); });
// Make sure body top padding matches navbar height (since it can wrap)
setBodyTopPaddingToNavbar();
$(window).on('load resize', setBodyTopPaddingToNavbar);
// ===== Footer =====
function insertFooter() {
const icons = document.getElementById('footer-icons');
if (!icons) return setTimeout(insertFooter, 100);
icons.insertAdjacentHTML('beforebegin', `
<footer id="drg-footer">
<div class="drg-footer-inner">
<div class="drg-columns">
<div class="drg-column drg-column-left">
<a href="/index.php/Disaster_Risk_Gateway">About</a>
<a href="/index.php/Disaster_Risk_Gateway:Privacy_Notice">Privacy Notice</a>
<a href="/index.php/Disaster_Risk_Gateway:Terms_of_Use">Terms of Use</a>
<a href="mailto:DisasterRiskGateway@bgs.ac.uk"><strong>Contact Us</strong></a>
</div>
<div class="drg-column drg-column-center">
<div class="drg-eu-flag">
<img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg" alt="EU logo">
</div>
<div class="drg-eu-text">
MYRIAD-EU project has received funding from the European Union’s Horizon 2020 Research and Innovation Programme under Grant Agreement No. 101003276.
</div>
</div>
<div class="drg-column drg-column-right">
<a href="https://www.myriadproject.eu" target="_blank">MYRIAD-EU</a>
<a href="https://be.linkedin.com/company/myriad-eu-project" target="_blank">LinkedIn</a>
<a href="#" target="_blank">MYRIAD-EU dashboard</a>
</div>
</div>
<div class="drg-disclaimer-wrapper">
<div class="drg-disclaimer">
This site is hosted by the British Geological Survey but responsibility for the content of the site lies with the
<a href="https://www.myriadproject.eu" target="_blank" rel="noopener noreferrer">MYRIAD-EU project</a>.<br>
Questions or comments: <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>
</div>
</div>
</div>
</footer>
`);
}
insertFooter();
});
});