User:Nux/editToolsCollapse.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.

/**
 * Collapsible edit tools.
 * 
 * Info / installation:
 * https://meta.wikimedia.org/wiki/User_talk:Nux/editToolsCollapse.js
 * 
 * License: CC-BY or MIT.
 * Copyright © 2022-2024 Maciej Nux Jaros.
 * Author(s): Nux.
 */
/* global mw */

/* Translatable strings */
mw.messages.set({
	'nuxcet-edit-tools': 'Narzędzia edycji',
});

(function() {
	var logTag = '[collapseEditTools]';
	var prepareDone = false;
	
	// console.log(logTag, 'start', mw, mainEl());
	if (mainEl()) {
		prepare();
	}
	// backup init
	addEventListener('DOMContentLoaded', (event) => {
		console.log(logTag, 'ready', mw);
		if (mainEl()) {
			prepare();
		}
	});

	/** Preprare elements. */
	function prepare() {
		if (prepareDone) {
			return false;
		}
		console.log(logTag, 'prepare');
		var tools = mainEl();
		if (!tools) {
			return false;
		}
		prepareDone = true;

		// new details-summary
		var triggerHtml = `
		  <summary style="cursor: pointer;">${mw.msg('nuxcet-edit-tools')}:</summary>
		`;
		var container = document.createElement('details');
		container.className = 'mw-editTools';
		container.insertAdjacentHTML("afterbegin", triggerHtml);

		// Move all child elements from `tools` to the new container
		while (tools.firstChild) {
			container.appendChild(tools.firstChild);
		}		
		tools.insertAdjacentElement("afterend", container);
		tools.remove();

		// indicator for CSS
		document.body.classList.add('nux-editToolsCollapse-done');
		return true;
	}
	
	/** Main container. */
	function mainEl() {
		return document.querySelector('.mw-editTools');
	}
})();