미디어위키:Gadget-Timeless.js: 두 판 사이의 차이

/* MediaWiki:Timeless.js
 * 문단 제목 아래 잔디밭 구분선 삽입
 */

(function () {
	'use strict';

	function installGrassDividers(root) {
		var scope = root || document;
		var wrappers;
		var legacyHeadings;

		wrappers = scope.querySelectorAll(
			'.skin-timeless .mw-parser-output .mw-heading2'
		);

		Array.prototype.forEach.call(wrappers, function (wrapper) {
			var divider;

			wrapper.classList.add('pvz-grass-heading');

			divider = wrapper.querySelector(
				':scope > .pvz-grass-divider'
			);

			if (!divider) {
				divider = document.createElement('span');
				divider.className = 'pvz-grass-divider';
				divider.setAttribute('aria-hidden', 'true');
				wrapper.appendChild(divider);
			}
		});

		legacyHeadings = scope.querySelectorAll(
			'.skin-timeless .mw-parser-output > h2'
		);

		Array.prototype.forEach.call(legacyHeadings, function (heading) {
			var divider;

			if (heading.closest('.mw-heading2')) {
				return;
			}

			heading.classList.add('pvz-grass-heading');

			divider = heading.querySelector(
				':scope > .pvz-grass-divider'
			);

			if (!divider) {
				divider = document.createElement('span');
				divider.className = 'pvz-grass-divider';
				divider.setAttribute('aria-hidden', 'true');
				heading.appendChild(divider);
			}
		});
	}

	function initGrassDividers() {
		var observer;

		installGrassDividers(document);

		observer = new MutationObserver(function (mutations) {
			mutations.forEach(function (mutation) {
				Array.prototype.forEach.call(
					mutation.addedNodes,
					function (node) {
						if (node.nodeType !== Node.ELEMENT_NODE) {
							return;
						}

						if (
							node.matches(
								'.mw-heading2, .mw-parser-output > h2'
							)
						) {
							installGrassDividers(node.parentNode);
							return;
						}

						installGrassDividers(node);
					}
				);
			});
		});

		observer.observe(document.body, {
			childList: true,
			subtree: true
		});
	}

	if (document.readyState === 'loading') {
		document.addEventListener(
			'DOMContentLoaded',
			initGrassDividers,
			{ once: true }
		);
	} else {
		initGrassDividers();
	}
}());