MediaWiki:Common.js - История изменений

Burenka. .: Содержимое страницы заменено на «/* Размещённый здесь код JavaScript будет загружаться пользователям при обращении к каждой странице */ // console.log("Привет");»

2025-04-25T18:26:43Z

Содержимое страницы заменено на «Размещённый здесь код JavaScript будет загружаться пользователям при обращении к каждой странице: // console.log("Привет");»

← Предыдущая версия		Версия от 18:26, 25 апреля 2025
Строка 2:		Строка 2:

	// console.log("Привет");		// console.log("Привет");
	~~/_____________________/~~
	~~mw.loader.using('jquery').then(function() {~~
	~~$(document).ready(function() {~~
	~~// Удаляем старые элементы~~
	~~$('.citizen-header__custom-bottom, .citizen-panel-overlay').remove();~~

	~~// Создаем новую панель~~
	~~const $panel = $('<div>')~~
	~~.addClass('citizen-header__custom-bottom')~~
	~~.hide();~~

	~~// Создаем оверлей~~
	~~const $overlay = $('<div>')~~
	~~.addClass('citizen-panel-overlay')~~
	~~.hide();~~

	~~// Добавляем элементы на страницу~~
	~~$('body').append($overlay, $panel);~~

	~~// Контент панели~~
	~~const items = [~~
	{
	~~src: 'https://wiki.ss220.club/resources/assets/logo.png',~~
	~~link: 'https://wiki.ss220.club',~~
	~~width: '40px'~~
	},
	{
	~~src: 'https://bs.ss220.club/resources/assets/logo.png',~~
	~~link: 'https://bs.ss220.club',~~
	~~width: '40px'~~
	}
	];

	~~// Заполняем панель~~
	~~$panel.append(~~
	~~items.map(item =>~~
	~~$('<a>')~~
	~~.attr('href', item.link)~~
	~~.append(~~
	~~$('<img>')~~
	~~.attr('src', item.src)~~
	~~.css('width', item.width)~~
	)
	~~.css({~~
	~~display: 'block',~~
	~~transition: '0.2s transform'~~
	})
	~~.hover(~~
	~~() => $(this).css('transform', 'scale(1.1)'),~~
	~~() => $(this).css('transform', 'none')~~
	)
	)
	);

	~~// Управление видимостью~~
	~~function togglePanel(show) {~~
	~~$panel.toggle(show);~~
	~~$overlay.toggle(show);~~
	~~$('body').toggleClass('citizen-panel-active', show);~~
	}

	~~// Открытие/закрытие~~
	~~$overlay.click(() => togglePanel(false));~~
	~~$(document).on('keyup', e => e.key === 'Escape' && togglePanel(false));~~

	~~// Инициализация~~
	~~togglePanel(true); // Для теста - сразу показать панель~~
	~~});~~
	~~});~~

Burenka. . в 06:47, 2 апреля 2025

2025-04-02T06:47:05Z

← Предыдущая версия		Версия от 06:47, 2 апреля 2025
Строка 4:		Строка 4:
	/_____________________/		/_____________________/
	mw.loader.using('jquery').then(function() {		mw.loader.using('jquery').then(function() {
	$(function() {		$(document).ready(function() {
	// ~~Создаем основные~~ элементы		// Удаляем старые элементы
	~~const $panel =~~ $('.citizen-header__custom-bottom~~').length ?~~		$('.citizen-header__custom-bottom, .citizen-panel-overlay').remove();
	~~$('~~.citizen-~~header__custom~~-~~bottom') :~~
	~~$('<div>~~').~~addClass~~(~~'citizen-header__custom-bottom'~~);

	const $~~overlay~~ = $('<div>').addClass('citizen-~~panel~~-~~overlay~~');		// Создаем новую панель
	$('~~body~~').~~prepend~~($overlay~~, $panel~~);		const $panel = $('<div>')
			.addClass('citizen-header__custom-bottom')
			.hide();

			// Создаем оверлей
			const $overlay = $('<div>')
			.addClass('citizen-panel-overlay')
			.hide();

	// ~~Инициализация содержимого~~		// Добавляем элементы на страницу
			$('body').append($overlay, $panel);

			// Контент панели
	const items = [		const items = [
	{		{
	src: 'https://wiki.ss220.club/resources/assets/logo.png',		src: 'https://wiki.ss220.club/resources/assets/logo.png',
	link: 'https://wiki.ss220.club',		link: 'https://wiki.ss220.club',
	width: '~~32px~~'		width: '40px'
	},		},
	{		{
	src: 'https://bs.ss220.club/resources/assets/logo.png',		src: 'https://bs.ss220.club/resources/assets/logo.png',
	link: 'https://bs.ss220.club',		link: 'https://bs.ss220.club',
	width: '~~32px~~'		width: '40px'
	}		}
	];		];

	$panel~~.empty()~~.append(		// Заполняем панель
			$panel.append(
	items.map(item =>		items.map(item =>
	$('<a>')		$('<a>')
	.attr({		.attr('href', item.link)
	href: item.link,
	~~'aria-label': 'External link' // Для доступности~~
	})
	.append(		.append(
	$('<img>')		$('<img>')
	.attr({		.attr('src', item.src)
	src: item.src,		.css('width', item.width)
	~~alt: '',~~
	~~loading: 'lazy'~~
	})
	.css({
	width: item.width,
	~~height: 'auto',~~
	~~transition: 'transform 0.2s'~~
	})
	)		)
			.css({
			display: 'block',
			transition: '0.2s transform'
			})
	.hover(		.hover(
	~~function~~() { $(this).css('transform', 'scale(1.1)')~~; }~~,		() => $(this).css('transform', 'scale(1.1)'),
	~~function~~() { $(this).css('transform', 'none')~~; }~~		() => $(this).css('transform', 'none')
	)		)
	)		)
	);		);

	// Управление ~~состоянием~~		// Управление видимостью
	function togglePanel(~~state~~) {		function togglePanel(show) {
	$panel.toggleClass('citizen-panel-active', ~~state);~~		$panel.toggle(show);
	~~$overlay.toggle(state~~);		$overlay.toggle(show);
			$('body').toggleClass('citizen-panel-active', show);
	}		}

	// ~~Закрытие по клику вне панели~~		// Открытие/закрытие
	$overlay.on(~~'click',~~ () => togglePanel(false));		$overlay.click(() => togglePanel(false));
			$(document).on('keyup', e => e.key === 'Escape' && togglePanel(false));
	~~// Закрытие по ESC~~
	$(document).on('~~keydown~~', e => {
	~~if (~~e.key === 'Escape') togglePanel(false);
	});

	// ~~Для тестирования: добавьте кнопку активации~~		// Инициализация
	~~$('<button>')~~		togglePanel(true); // Для теста - сразу показать панель
	~~.text('☰')~~
	~~.css({~~
	~~position: 'fixed',~~
	~~left: '20px',~~
	~~top: '20px',~~
	~~zIndex: '1001'~~
	})
	~~.click(() =>~~ togglePanel(true))
	~~.appendTo('body'~~);
	});		});
	});		});

Burenka. . в 06:03, 2 апреля 2025

2025-04-02T06:03:34Z

← Предыдущая версия		Версия от 06:03, 2 апреля 2025
Строка 3:		Строка 3:
	// console.log("Привет");		// console.log("Привет");
	/_____________________/		/_____________________/
	~~// Проверяем загрузку jQuery~~
	mw.loader.using('jquery').then(function() {		mw.loader.using('jquery').then(function() {
	$(function() {		$(function() {
	// ~~Инициализация кастомной панели~~		// Создаем основные элементы
	const $~~header = $('.citizen-header');~~		const $panel = $('.citizen-header__custom-bottom').length ?
	~~const $customContainer~~ = $('.citizen-header__custom-bottom').length ?
	$('.citizen-header__custom-bottom') :		$('.citizen-header__custom-bottom') :
	$('<div>').addClass('citizen-header__custom-bottom').~~appendTo~~($~~header~~);		$('<div>').addClass('citizen-header__custom-bottom');

			const $overlay = $('<div>').addClass('citizen-panel-overlay');
			$('body').prepend($overlay, $panel);

	~~// Добавление оверлея~~		// Инициализация содержимого
	~~const $overlay = $('<div>').addClass('citizen-overlay');~~
	~~$('body').append($overlay);~~

	~~// Закрытие элементов при клике на оверлей~~
	~~$overlay.on('click', function() {~~
	~~$header.removeClass('menu-open');~~
	~~$overlay.hide();~~
	~~});~~

	// Инициализация ~~элементов управления~~
	~~$('[data-citizen-toggle]').on('click', function() {~~
	~~$header.toggleClass('menu-open');~~
	~~$overlay.toggle();~~
	~~});~~

	~~// Ваши кастомные элементы~~
	const items = [		const items = [
	{		{
	~~type: 'image',~~
	src: 'https://wiki.ss220.club/resources/assets/logo.png',		src: 'https://wiki.ss220.club/resources/assets/logo.png',
	link: 'https://wiki.ss220.club',		link: 'https://wiki.ss220.club',
	width: '~~20px~~'		width: '32px'
	},		},
	{		{
	~~type: 'image',~~
	src: 'https://bs.ss220.club/resources/assets/logo.png',		src: 'https://bs.ss220.club/resources/assets/logo.png',
	link: 'https://bs.ss220.club',		link: 'https://bs.ss220.club',
	width: '~~20px~~'		width: '32px'
	}		}
	];		];

	$~~customContainer~~.empty().append(		$panel.empty().append(
	items.map(item =>		items.map(item =>
	$('<a>')		$('<a>')
	.attr('href', item.link)		.attr({
			href: item.link,
			'aria-label': 'External link' // Для доступности
			})
	.append(		.append(
	$('<img>')		$('<img>')
	.attr('~~src~~', item.~~src~~)		.attr({
	.css('~~width~~', ~~item~~.~~width~~)		src: item.src,
			alt: '',
			loading: 'lazy'
			})
			.css({
			width: item.width,
			height: 'auto',
			transition: 'transform 0.2s'
			})
			)
			.hover(
			function() { $(this).css('transform', 'scale(1.1)'); },
			function() { $(this).css('transform', 'none'); }
	)		)
	~~.css({~~
	~~display: 'flex',~~
	~~alignItems: 'center',~~
	~~padding: '4px'~~
	})
	)		)
	);		);

			// Управление состоянием
			function togglePanel(state) {
			$panel.toggleClass('citizen-panel-active', state);
			$overlay.toggle(state);
			}

			// Закрытие по клику вне панели
			$overlay.on('click', () => togglePanel(false));

			// Закрытие по ESC
			$(document).on('keydown', e => {
			if (e.key === 'Escape') togglePanel(false);
			});

			// Для тестирования: добавьте кнопку активации
			$('<button>')
			.text('☰')
			.css({
			position: 'fixed',
			left: '20px',
			top: '20px',
			zIndex: '1001'
			})
			.click(() => togglePanel(true))
			.appendTo('body');
	});		});
	});		});

Burenka. . в 05:36, 2 апреля 2025

2025-04-02T05:36:15Z

← Предыдущая версия		Версия от 05:36, 2 апреля 2025
Строка 6:		Строка 6:
	mw.loader.using('jquery').then(function() {		mw.loader.using('jquery').then(function() {
	$(function() {		$(function() {
	// ~~Создаем контейнер, если его нет~~		// Инициализация кастомной панели
	~~var~~ $customContainer = $('.citizen-header__custom-bottom');		const $header = $('.citizen-header');
	if (~~$customContainer~~.~~length === 0~~) {		const $customContainer = $('.citizen-header__custom-bottom').length ?
	~~$customContainer =~~ $('<div>')		$('.citizen-header__custom-bottom') :
	.addClass('citizen-header__custom-bottom')		$('<div>').addClass('citizen-header__custom-bottom').appendTo($header);
	.appendTo(~~'.citizen-~~header');
	}

	// ~~Пример данных~~ (~~замените~~ на ~~свои!~~)		// Добавление оверлея
	~~var~~ items = [		const $overlay = $('<div>').addClass('citizen-overlay');
			$('body').append($overlay);

			// Закрытие элементов при клике на оверлей
			$overlay.on('click', function() {
			$header.removeClass('menu-open');
			$overlay.hide();
			});

			// Инициализация элементов управления
			$('[data-citizen-toggle]').on('click', function() {
			$header.toggleClass('menu-open');
			$overlay.toggle();
			});

			// Ваши кастомные элементы
			const items = [
	{		{
	type: 'image',		type: 'image',
	src: 'https://wiki.ss220.club/resources/assets/logo.png',		src: 'https://wiki.ss220.club/resources/assets/logo.png',
	link: 'https://wiki.ss220.club',		link: 'https://wiki.ss220.club',
	width: '20px'		width: '20px'
Строка 30:		Строка 44:
	];		];

	~~// Очищаем контейнер перед добавлением~~		$customContainer.empty().append(
	$customContainer.empty();		items.map(item =>
			$('<a>')
	~~// Добавляем элементы~~		.attr('href', item.link)
	~~items~~.~~forEach(function~~(~~item) {~~		.append(
	~~var $element;~~		$('<img>')
	if (item~~.type~~ =~~== 'image') {~~		.attr('src', item.src)
	~~$element =~~ $('<~~img~~>')		.css('width', item.width)
	.attr('~~src~~', item.~~src~~)		)
	.~~css~~(~~'width', item.width);~~		.css({
	~~} else {~~		display: 'flex',
	~~$element =~~ $('<~~span~~>').~~text~~(item.~~text);~~		alignItems: 'center',
	}		padding: '4px'
			})
	~~var $link = $('<a>'~~)		)
	.~~attr~~('~~href~~', item.~~link~~)		);
	~~.append($element~~)
	.css({
	display: '~~grid~~',
	~~margin~~: '~~0 10px~~'
	});

	~~$customContainer.append($link);~~
	});

	~~// Принудительно показываем контейнер~~
	~~$customContainer.css('display', 'flex'~~);
	});		});
	});		});

Burenka. . в 19:23, 1 апреля 2025

2025-04-01T19:23:52Z

@@ Строка 58: / Строка 58: @@
      $customContainer.css('display', 'flex');
    });
 });

Burenka. . в 19:15, 1 апреля 2025

2025-04-01T19:15:04Z

@@ Строка 79: / Строка 79: @@
      $('.citizen-header-custom-bottom').hide();
+   }
 });

Burenka. . в 19:14, 1 апреля 2025

2025-04-01T19:14:33Z

@@ Строка 58: / Строка 58: @@
      $customContainer.css('display', 'flex');
    });
 });

Burenka. . в 18:28, 1 апреля 2025

2025-04-01T18:28:45Z

← Предыдущая версия		Версия от 18:28, 1 апреля 2025
Строка 20:		Строка 20:
	src: 'https://wiki.ss220.club/resources/assets/logo.png',		src: 'https://wiki.ss220.club/resources/assets/logo.png',
	link: 'https://wiki.ss220.club',		link: 'https://wiki.ss220.club',
	width: '~~10px~~'		width: '20px'
	},		},
	{		{
Строка 26:		Строка 26:
	src: 'https://bs.ss220.club/resources/assets/logo.png',		src: 'https://bs.ss220.club/resources/assets/logo.png',
	link: 'https://bs.ss220.club',		link: 'https://bs.ss220.club',
	width: '~~10px~~'		width: '20px'
	}		}
	];		];

Burenka. . в 18:28, 1 апреля 2025

2025-04-01T18:28:17Z

← Предыдущая версия		Версия от 18:28, 1 апреля 2025
Строка 48:		Строка 48:
	.append($element)		.append($element)
	.css({		.css({
	display: '~~inline-block~~',		display: 'grid',
	margin: '0 10px'		margin: '0 10px'
	});		});

Burenka. . в 18:23, 1 апреля 2025

2025-04-01T18:23:38Z

← Предыдущая версия		Версия от 18:23, 1 апреля 2025
Строка 20:		Строка 20:
	src: 'https://wiki.ss220.club/resources/assets/logo.png',		src: 'https://wiki.ss220.club/resources/assets/logo.png',
	link: 'https://wiki.ss220.club',		link: 'https://wiki.ss220.club',
	width: '~~40px~~'		width: '10px'
	},		},
	{		{
Строка 26:		Строка 26:
	src: 'https://bs.ss220.club/resources/assets/logo.png',		src: 'https://bs.ss220.club/resources/assets/logo.png',
	link: 'https://bs.ss220.club',		link: 'https://bs.ss220.club',
	width: '~~40px~~'		width: '10px'
	}		}
	];		];