MediaWiki:Common.js - Revision history

Myriad-admin: Notifications icon and unification in user dropdown

2025-10-13T12:43:10Z

Notifications icon and unification in user dropdown

← Older revision		Revision as of 13:43, 13 October 2025
Line 16:		Line 16:
	}		}

	// Build a clean Echo ~~link that won't inherit text-hiding styles~~		// Build a clean anchor (no Echo classes) with icon + label (+ optional count badge)
	function ~~buildEchoLink~~($a~~, label~~) {		function buildCombinedNotifications() {
	~~if (!~~$~~a \|\| !~~$a.~~length~~) ~~return null~~;		var $alertA = $('#pt-notifications-alert a').first();
			var $noticeA = $('#pt-notifications-notice a').first();

	// href ~~+ rel/target if present~~		// Pick an href we can trust; fall back to Special:Notifications
	var href = $a.attr('href') \|\| ~~'#';~~		var href = ($alertA.attr('href') \|\| $noticeA.attr('href') \|\| mw.util.getUrl('Special:Notifications'));
	~~var rel =~~ $a.attr('~~rel~~') \|\| ~~'';~~
	~~var target = $a~~.~~attr~~('~~target~~') ~~\|\| ''~~;

	// ~~Try to capture a count~~ if Echo provides it		// Reuse an icon if Echo provides one; otherwise a simple bell glyph
	var ~~count~~ = $a.~~attr~~('~~data-counter-num~~') ~~\|\| ''~~;		var $icon = ($alertA.find('span, i, svg').first().clone());
	if (~~count && /^\d+~~$/.~~test~~(~~count~~) ~~&& parseInt~~(~~count, 10~~) ~~> 0~~) {		if (!$icon.length) $icon = ($noticeA.find('span, i, svg').first().clone());
	~~label +~~= ' (' ~~+ count +~~ ')';		var iconHtml = $icon.length ? $icon.prop('outerHTML') : '🔔';
	}

	// ~~Try to reuse a child icon~~ if ~~present~~		// Sum counts if Echo exposes them
	~~var $icon = $a.find~~(~~'span, i, svg'~~).~~first~~()~~.clone~~();		function n(x){ return x && /^\d+$/.test(x) ? parseInt(x,10) : 0; }
	var ~~iconHtml~~ = $~~icon~~.~~length ?~~ $~~icon~~.~~prop~~('~~outerHTML~~') ~~: ''~~;		var count = n($alertA.attr('data-counter-num')) + n($noticeA.attr('data-counter-num'));

	~~// Return a fresh anchor with minimal classes (no text-hiding)~~
	return [		return [
	'<a href="', href, '"',		'<a href="', href, '" class="drg-echo-link">',
	~~(rel ? ' rel="' + rel + '"' : ''),~~
	~~(target ? ' target="' + target + '"' : ''),~~
	' class="drg-echo-link"',
	'>',
	iconHtml,		iconHtml,
	'<span class="drg-echo-label">', label, '</span>',		'<span class="drg-echo-label">Notifications</span>',
			(count > 0 ? '<span class="drg-echo-count" aria-label="unread notifications">'+count+'</span>' : ''),
	'</a>'		'</a>'
	].join('');		].join('');
Line 85:		Line 79:

	// ===== User dropdown =====		// ===== User dropdown =====
	~~// We restore Echo (alerts/notices) + Watchlist inside the dropdown.~~
	let userHtml;		let userHtml;
	if (mw.config.get('wgUserName')) {		if (mw.config.get('wgUserName')) {
	const items = [];		const items = [];

	// --- ~~Echo notifications: build clean, labeled links~~ ---		// --- Single combined Notifications item ---
	const ~~$alertA~~ = $(~~'#pt-notifications-alert a').first();~~		const notifHtml = buildCombinedNotifications();
	~~const $noticeA = $('#pt-notifications-notice a').first();~~		if (notifHtml) items.push('<li>' + notifHtml + '</li>');

	~~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) ---		// --- Personal tools (except duplicate logout at the end) ---
Line 138:		Line 125:
	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 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');

Myriad-admin at 12:37, 13 October 2025

2025-10-13T12:37:04Z

← Older revision		Revision as of 13:37, 13 October 2025
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 ~~(ensure visible labels)~~ ---		// --- Echo notifications: build clean, labeled links ---
	~~function cloneWithLabel($a, fallback) {~~		const $alertA = $('#pt-notifications-alert a').first();
	~~if (!$a \|\| !$a.length) return null;~~		const $noticeA = $('#pt-notifications-notice a').first();
	~~const $c = $a.clone(); // keep original intact~~
	~~const hasText = ($c.text() \|\| '').trim().length > 0;~~

	~~if (!hasText) {~~
	~~// Prefer a label from title (strip trailing counts), else fallback~~
	~~let fromTitle = ($c.attr('title') \|\| '').trim();~~
	~~// Remove common trailing counters like " (3)" or " – 2"~~
	~~fromTitle = fromTitle.replace(/\s[\-–—]?\s$?\d+$?\s*$/, '').trim();~~
	~~// If still empty, use fallback~~
	const ~~label = fromTitle \|\| fallback;~~
	~~// Append a plain text node so the icon remains first~~
	$~~c.append(document.createTextNode(' ' + label));~~
	}
	~~return $c;~~
	}

	~~const~~ alertA = $('#pt-notifications-alert a').first();
	const noticeA = $('#pt-notifications-notice a').first();

	const ~~alertC~~ = ~~cloneWithLabel~~(alertA, 'Your Alerts');		const alertHtml = buildEchoLink($alertA, 'Your Alerts');
	const ~~noticeC~~ = ~~cloneWithLabel~~(noticeA, 'Your Notices');		const noticeHtml = buildEchoLink($noticeA, 'Your Notices');

	if (~~alertC~~) items.push(`<li>~~${alertC.prop(~~'~~outerHTML~~')}</li>`);		if (alertHtml) items.push('<li>' + alertHtml + '</li>');
	if (~~noticeC~~) items.push(`<li>~~${noticeC.prop(~~'~~outerHTML~~')}</li>`);		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 ~~copied~~		// 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 ~~(href.match~~(/Watchlist/i)) {		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 ~~a clean one at the end~~)		// Skip Logout (we add our own)
	if ~~(titleText.match~~(/^log ?out$/i)) return;		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) =====
	~~// Actions: #p-cactions; General: #p-tb (Toolbox + extensions)~~
	const actionsLis = htmlFromPortlet('#p-cactions'); // Actions		const actionsLis = htmlFromPortlet('#p-cactions'); // Actions
	let generalLis = htmlFromPortlet('#p-tb'); // General ~~(What links here, Upload, Special pages, etc.)~~		let generalLis = htmlFromPortlet('#p-tb'); // General

	// Fallback~~: also look~~ for ~~toolbox under~~ Vector-2022 portlet structure ~~if needed~~		// 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');

Myriad-admin at 12:24, 13 October 2025

2025-10-13T12:24:45Z

@@ Line 58: / Line 58: @@
        const items = [];
-       // Echo notifications (if present)
+       // --- Echo notifications (ensure visible labels) ---
        const alertA  = $('#pt-notifications-alert a').first();
        const noticeA = $('#pt-notifications-notice a').first();
-       // Personal tools (except duplicate logout at the end)
+      const alertC  = cloneWithLabel(alertA,  'Your Alerts');
        $('#p-personal ul li').each(function () {
          const $a = $(this).find('a');
@@ Line 73: / Line 95: @@
          if (href.includes('Notifications') || href.includes('Echo')) return;
-         // Keep Watchlist (EU reviewers wanted it)
+         // Keep Watchlist
          if (href.match(/Watchlist/i)) {
            items.push(`<li>${$a.prop('outerHTML')}</li>`);

Myriad-admin at 10:09, 30 September 2025

2025-09-30T10:09:33Z

Show changes

Myriad-admin at 11:54, 14 August 2025

2025-08-14T11:54:37Z

← Older revision		Revision as of 12:54, 14 August 2025
Line 8:		Line 8:
	<a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">		<a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
	<img src="${logoSrc}" alt="MYRIAD Logo">		<img src="${logoSrc}" alt="MYRIAD Logo">
	~~<span class="drg-logo-text">DRG</span>~~
	</a>`;		</a>`;

Myriad-admin: Undo revision 3312 by Myriad-admin (talk)

2025-08-14T11:00:04Z

Undo revision 3312 by Myriad-admin (talk)

← Older revision		Revision as of 12:00, 14 August 2025
Line 13:		Line 13:
	// ===== Navigation Dropdown =====		// ===== Navigation Dropdown =====
	const navItems = [		const navItems = [
	{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },		{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },
	{ title: 'Definitions', url: mw.util.getUrl('Definitions') },		{ title: 'Definitions', url: mw.util.getUrl('Definitions') },
	{ title: 'Resources', url: mw.util.getUrl('Resources') }		{ title: 'Resources', url: mw.util.getUrl('Resources') }
	];		];
	const navHtml = `		const navHtml = `
Line 30:		Line 30:
	<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;		<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;

	// ===== Search Dropdown =====		// ===== Search Dropdown (toggle + form) =====
	const searchDropdownHtml = `		const searchDropdownHtml = `
	<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">		<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
Line 92:		Line 92:
	$('#drg-search-form input[type="search"]').focus();		$('#drg-search-form input[type="search"]').focus();
	});		});

			// Close search dropdown when clicking outside
	$(document).on('click', function () {		$(document).on('click', function () {
	$('#drg-search-form').hide();		$('#drg-search-form').hide();
	});		});

			// Prevent clicks inside the form from closing it
	$('#drg-search-form').on('click', function (e) {		$('#drg-search-form').on('click', function (e) {
	e.stopPropagation();		e.stopPropagation();
	});		});

	// ===== Inject ~~DRG~~ Footer =====		// ===== Inject Footer =====
	function insertFooter() {		function insertFooter() {
	const icons = document.getElementById('footer-icons');		const icons = document.getElementById('footer-icons');
Line 139:		Line 143:
	`);		`);
	}		}

	insertFooter();		insertFooter();
	});		});
	});		});

Myriad-admin at 10:58, 14 August 2025

2025-08-14T10:58:37Z

← Older revision		Revision as of 11:58, 14 August 2025
Line 13:		Line 13:
	// ===== Navigation Dropdown =====		// ===== Navigation Dropdown =====
	const navItems = [		const navItems = [
	{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },		{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },
	{ title: 'Definitions', url: mw.util.getUrl('Definitions') },		{ title: 'Definitions', url: mw.util.getUrl('Definitions') },
	{ title: 'Resources', url: mw.util.getUrl('Resources') }		{ title: 'Resources', url: mw.util.getUrl('Resources') }
	];		];
	const navHtml = `		const navHtml = `
Line 30:		Line 30:
	<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;		<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;

	// ===== Search Dropdown ~~(toggle + form)~~ =====		// ===== Search Dropdown =====
	const searchDropdownHtml = `		const searchDropdownHtml = `
	<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">		<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
Line 92:		Line 92:
	$('#drg-search-form input[type="search"]').focus();		$('#drg-search-form input[type="search"]').focus();
	});		});

	~~// Close search dropdown when clicking outside~~
	$(document).on('click', function () {		$(document).on('click', function () {
	$('#drg-search-form').hide();		$('#drg-search-form').hide();
	});		});

	~~// Prevent clicks inside the form from closing it~~
	$('#drg-search-form').on('click', function (e) {		$('#drg-search-form').on('click', function (e) {
	e.stopPropagation();		e.stopPropagation();
	});		});

	// ===== Inject Footer =====		// ===== Inject DRG Footer =====
	function insertFooter() {		function insertFooter() {
	const icons = document.getElementById('footer-icons');		const icons = document.getElementById('footer-icons');
Line 143:		Line 139:
	`);		`);
	}		}

	insertFooter();		insertFooter();
	});		});
	});		});

Myriad-admin at 12:53, 12 August 2025

2025-08-12T12:53:53Z

← Older revision		Revision as of 13:53, 12 August 2025
Line 80:		Line 80:
	${userHtml}		${userHtml}
	${toolsHtml}		${toolsHtml}
	</div>		</div>
	</div>		</div>
	</div>		</div>
Line 86:		Line 86:

	// ===== Toggle search input visibility =====		// ===== Toggle search input visibility =====
	$('#drg-search-toggle').on('click', function () {		$('#drg-search-toggle').on('click', function (e) {
			e.preventDefault();
			e.stopPropagation();
	$('#drg-search-form').toggle();		$('#drg-search-form').toggle();
	$('#drg-search-form input[type="search"]').focus();		$('#drg-search-form input[type="search"]').focus();
			});

			// Close search dropdown when clicking outside
			$(document).on('click', function () {
			$('#drg-search-form').hide();
			});

			// Prevent clicks inside the form from closing it
			$('#drg-search-form').on('click', function (e) {
			e.stopPropagation();
	});		});

Myriad-admin at 11:35, 12 August 2025

2025-08-12T11:35:33Z

← Older revision		Revision as of 12:35, 12 August 2025
Line 76:		Line 76:
	${navHtml}		${navHtml}
	${flatHtml}		${flatHtml}
			${searchDropdownHtml}
	<div class="drg-navbar-actions">		<div class="drg-navbar-actions">
	${userHtml}		${userHtml}
	${toolsHtml}		${toolsHtml}
	~~${searchDropdownHtml}~~		</div>
	</div>
	</div>		</div>
	</div>		</div>

Myriad-admin at 11:34, 12 August 2025

2025-08-12T11:34:46Z

← Older revision		Revision as of 12:34, 12 August 2025
Line 76:		Line 76:
	${navHtml}		${navHtml}
	${flatHtml}		${flatHtml}
	~~${searchDropdownHtml}~~
	<div class="drg-navbar-actions">		<div class="drg-navbar-actions">
	${userHtml}		${userHtml}
	${toolsHtml}		${toolsHtml}
			${searchDropdownHtml}
	</div>		</div>
	</div>		</div>