MediaWiki:Citizen.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// Citizen.js
// needs a heavy refactor

// new article icon button

$( document ).ready( function () {
	if ( document.getElementById( 'citizen-newarticle' ) ) {
		return;
	}

	const insert_anchor = document.querySelector( '.citizen-drawer.citizen-header__item' )
		|| document.querySelector( '.citizen-drawer' );

	if ( !insert_anchor ) {
		return;
	}



	const clone_source = document.querySelector( '.citizen-header__item.citizen-search' )
		|| insert_anchor;

	const new_article_button = clone_source.cloneNode( true );

	new_article_button.id = 'citizen-newarticle';
	new_article_button.classList.remove( 'citizen-search', 'citizen-drawer' );
	new_article_button.classList.add( 'citizen-newarticle' );



	Array.from( new_article_button.children ).forEach( function ( child ) {
		if ( child.tagName !== 'DETAILS' ) {
			child.remove();
		}
	} );



	const new_article_button_details = new_article_button.querySelector( 'details' );

	if ( !new_article_button_details ) {
		return;
	}



	new_article_button_details.id = 'citizen-newarticle-details';
	new_article_button_details.removeAttribute( 'open' );



	const new_article_button_summary = new_article_button_details.querySelector( 'summary' );

	if ( !new_article_button_summary ) {
		return;
	}



	new_article_button_summary.classList.add( 'owaf-new-article-trigger' );
	new_article_button_summary.setAttribute( 'aria-details', 'citizen-newarticle-details' );



	const new_article_button_svg = new_article_button_summary.querySelector( 'svg' );

	if ( new_article_button_svg ) {
		new_article_button_svg.setAttribute( 'height', '24' );
		new_article_button_svg.setAttribute( 'width', '24' );
		new_article_button_svg.setAttribute( 'viewBox', '0 -960 960 960' );
		new_article_button_svg.setAttribute( 'aria-hidden', 'true' );
		new_article_button_svg.setAttribute( 'focusable', 'false' );
		new_article_button_svg.setAttribute( 'title', 'New article' );
		new_article_button_svg.setAttribute( 'fill', 'currentColor' );
		new_article_button_svg.innerHTML = '<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>';
	}



	const new_article_button_label = new_article_button_summary.querySelector( 'span' );

	if ( new_article_button_label ) {
		new_article_button_label.textContent = 'New article';
	}

	insert_anchor.after( new_article_button );
} );

/**
 * @name SidebarIcons
 * Prepend icons to the MediaWiki sidebar
*/

const icons_by_ids = {
    'randomobby': {
        class: 'mw-ui-icon-controller',
    }
}

for (const [k, v] of Object.entries(icons_by_ids)) {
    const element = document.querySelector('.citizen-menu__content ' + '#n-' + k + ' a')

    const icon_element = document.createElement('span')
    icon_element.classList.add('citizen-ui-icon', v.class)

    element.prepend(icon_element)
}

/**
 * @name LinkifyYears
 * Automatically hyper-link years in the short description (#siteSub) to their respective Category:YYYY pages.
*/

(function () {
  const targetId = "siteSub";

  const linkifyYears = () => {
    const siteSub = document.getElementById(targetId);
    if (!siteSub) return;

    const yearRegex = /\b2\d{3}\b/g;

    if (siteSub.querySelector(".year-link")) return;

    const originalText = siteSub.textContent;
    if (yearRegex.test(originalText)) {
      const newHTML = originalText.replace(yearRegex, (year) => {
        const url = mw.util.getUrl("Category:" + year);
        return `<a href="${url}" class="year-link" style="opacity: 0.7;">${year}</a>`;
      });
      siteSub.innerHTML = newHTML;
    }
  };

  linkifyYears();

  const observer = new MutationObserver(() => {
    linkifyYears();
  });

  const targetNode = document.getElementById(targetId);
  if (targetNode) {
    observer.observe(targetNode, { childList: true, characterData: true, subtree: true });
  }
})();

document.addEventListener('DOMContentLoaded', function () {
setTimeout(() => {
  document.querySelectorAll('.citizen-overflow-wrapper').forEach(wrapper => {
    if (wrapper.querySelector('.full-width')) {
      wrapper.style.maxWidth = 'none';
    }
  });
}, 250);
});