Fandom Developers Wiki
Fandom Developers Wiki
Fandom Developers Wiki
3,278
pages
in: JavaScript
English

JavaScript Cookbook/uk

< JavaScript Cookbook
Sign in to edit

Для розробників скриптів[]

Якщо ви в рамках Фандому багато користуєтесь JavaScript, ви помітите, що використовуєте одні і ті ж функції знову і знову. Ми зібрали колекцію цих функцій, які можна скопіювати звідси і вставити в свій проєкт.

Змінні[]

Кешування API[]

Кешує посилання на екземпляр об'єкта mw.Api. Для найбільш детальної інформації відвідайте документацію MediaWiki. 

var api = new mw.Api();

Кешування налаштувань[]

Кешує змінні параметрів конфігурації. 

var config = mw.config.get([
    'wgAction',
    'wgArticlePath',
    'wgCanonicalSpecialPageName',
    'wgPagename',
    'wgTitle',
    'wgSiteName'
]);

Кольори[]

Визначення яскравості[]

Визначає, чи світлий колір. Може бути використаний для того, щоб зрозуміти, чи світлий передній план і фон статті, або темний. Це дозволяє вам вибирати висококонтрастний колір для цих елементів.

Параметр color застосовує значення кольору у форматі RGB або HEX. Функція повертає логічне значення, рівне true, якщо заданий колір світлий. 

function isBright(color) {
    var m = color.match(/(?:([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2}))|(?:(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3}))/);
    if (!m) return false;
    var rgb = m[1] ? { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) }
                   : { r: parseInt(m[4], 10), g: parseInt(m[5], 10), b: parseInt(m[6], 10) };
    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 >= 128;
}

Отримання кольору фону[]

Отримує колір фону статті і повертає рядок, що представляє цей колір в якості значення в CSS. 

function getBackgroundColor() {
    return getComputedStyle(document.body).getPropertyValue('--theme-page-background-color');
}

Елементи[]

Додання HTML-елементу у вміст сторінки[]

Додає елемент HTML в кінець вмісту сторінки: 

var element = document.createElement("p"); // "p" — тип створеного елементу
element.style = "color:blue"; // для зміни атрибутів елемента використовуйте element.(атрибут) = "значення"
element.contentText = "Текст параграфу"; // це встановлює innerHTML елемента на "Текст параграфу"
document.getElementById('mw-content-text').appendChild(element); // а це додає готовий елемент на сторінку

Порада. Ви можете замінити 'mw-content-text' ідентифікатором потрібного елемента на сторінці.

Modals[]

Open image lightbox[]

Function to open the image lightbox for an arbitrary image programmatically, without modifying url query or reloading the page. 

function openLightbox(fileName) {
	const page = document.querySelector('.page');
	if (!page) return;

	// create a minimal lightbox trigger element
	// <a class="image">
	//   <img data-image-key="${fileName}.png">
	// </a>
	const link = document.createElement('a');
	link.className = 'image';
	const img = document.createElement('img');
	img.dataset.imageKey = fileName;
	link.appendChild(img);

	// note: lightbox is shown only for images inside
	// the <div class="page"> element
	page.appendChild(link);

	// open lightbox
	link.click();

	// delete the trigger
	page.removeChild(link);
}

The function can then be called using an image name, for example: 

openLightbox('Site-logo.png');
openLightbox('Site-background-dark');
openLightbox('nonexistent.png');

Введення[]

Текстове поле[]

такий код додасть текстове поле в кінець сторінки «Example Page»: 

if (mw.config.get("wgPageName") === "Example_Page") {
  // якщо завантажена сторінка називається "Example Page", код почне роботу
  var inputBox = document.createElement("div"); // створює елемент div, який буде містити в собі поле введення
  var input = document.createElement("input"); // створює елемент input, який і буде приймати введення
  input.id = "input"; // встановлює ID елемента input на "input"
  input.style.display = "inline-block"; // встановлює style.display на "inline-block", і він буде в один рядок
  var textParagraph = document.createElement("p"); // створює абзац тексту
  textParagraph.innerHTML = "двічі два: "; // встановлює стандартний текст абзацу
  textParagraph.style.display = "inline-block"; // встановлює style.display на "inline-block", і він буде в один рядок
  textParagraph.id = "textParagraph"; // змінює id абзаца на "textParagraph"
  var newLine = document.createElement("br"); // створює елемент br для початку нового рядка
  var getAnswer = document.createElement("button"); // створює клавішу перевірки
  getAnswer.innerHTML = "Перевірити"; // змінює текст клавіши на "Перевірити"
  getAnswer.addEventListener("click", function() {
    document.getElementById("textParagraph").innerHTML= "двічі два: " + document.getElementById("input").value * 2;
  }); // додає клавіші обробник кліка по ній, і тепер вона буде виставляти елементу textParagraph такий текст: "двічі два: (значення)"
  inputBox.appendChild(textParagraph.appendChild(input)); // додає елемент input в блок з полем введення
  inputBox.appendChild(textParagraph); // додає елемент textParagraph в блок з полем введення
  inputBox.appendChild(newLine); // додає новий рядок в блок з полем введення
  inputBox.appendChild(getAnswer); // додає клавішу getAnswer в блок з полем введення
  document.getElementById("mw-content-text").appendChild(inputBox); // вставляє блок з полем введення на сторінку
}

Порада. Ви можете замінити «mw-content-text» ідентифікатором потрібного елемента на сторінці.

Запуск[]

Після DOM[]

Запускає код після закінчення завантаження DOM. Використовує відповідну функцію зворотнього виклику jQuery. 

$(function() {
    // ваш код
});

Після MW API[]

Запускає код тільки після закінчення завантаження API MediaWiki. 

mw.loader.using('mediawiki.api', function() {
    // ваш код
});

Після MW Utilities[]

Запускає код тільки після закінчення завантаження бібліотеки утиліт MediaWiki. 

mw.loader.using('mediawiki.util', function() {
    // ваш код
});

Після MW API і Utilities[]

Запускає код тільки після завантаження API MediaWiki і бібліотеки утиліт. 

mw.loader.using(['mediawiki.util', 'mediawiki.api'], function() {
    // ваш код
});

Після вмісту[]

Запускає код, коли вміст сторінки вікі додається в DOM. Ця функція включає в себе подію готовності сторінки при завантаженні (в тому числі і після редагувань), а також запуск коду при попередньому перегляді вмісту цієї сторінки. 

mw.hook("wikipage.content").add(function($content) {
    // ваш код
});

Для користувачів[]

Додавання цільових назв до червоних посилань[]

Вікі-посилання мають цільову сторінку, що зберігається в атрибуті title, який у багатьох браузерах відображається як підказка під час наведення курсора на посилання. Наступний фрагмент (від HumansCanWinElves) також додає такі назви до червоних посилань. 

$('.main-container').on('mouseover', 'a.new:not([title])[href]', function() {
      var regExp = /(?<=\/wiki\/)([^?]+)(?=(\?.+)?)/,
          match = regExp.exec($(this).attr('href')),
          title;

      if (match) {
          title = decodeURIComponent(match[0]).replace(/_/g, ' ');
          $(this).attr('title', title);
      }
});

Використання іншої теми для певної вікі[]

Special:Preferences дозволяє вибирати між світлою або темною темою, але вибір здійснюється для всієї мережі, з єдиною динамічною опцією, щоб відкласти тему, визначену як тему за замовчуванням адміністраторами кожної вікі. Іноді ви хочете використовувати різні теми для різних вікі на основі вашого власного вибору.

Деякі примітки:

  • Здебільшого це мало б бути можливим лише за допомогою CSS, якби вбудовані таблиці стилів теми не були дивним чином додані під таблицями стилів користувача. Як і зараз, потрібен JavaScript, з невеликою затримкою під час завантаження кожної сторінки, коли відображатиметься тема за замовчуванням, доки нова тема не почне працювати.
  • Скрипт ThemeSelector вже дозволяє попередньо встановити тему для певної вікі, але необхідність імпортувати скрипт робить затримку довшою і, отже, дратує, тому розміщення коду безпосередньо на вашій сторінці JS може бути кращим.
  • Як і інші налаштування, він не працюватиме в області обговорень.)

Щоб перейти на темну тему на певній вікі, додайте такий код на свою локальну особисту сторінку Special:Mypage/common.js на цій вікі (розгорніть, щоб побачити код): 

(function setDarkTheme() {
	var themeSheet1 = document.createElement('link'),
	    themeSheet2 = document.createElement('link');

    themeSheet1.rel = 'stylesheet';
    themeSheet1.href = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=dark';

    themeSheet2.rel = 'stylesheet';
    themeSheet2.href = '/load.php?fandomdesktop=1&lang=en&modules=' +
	    	'ext.fandom.GlobalComponents.GlobalComponentsTheme.dark.css%7C' +
	    	'ext.fandom.GlobalComponents.GlobalNavigationTheme.dark.css' +
	    	'&only=styles&skin=fandomdesktop';

	document.head.appendChild(themeSheet1);
	document.head.appendChild(themeSheet2);

	document.body.classList.remove('theme-fandomdesktop-light');
	document.body.classList.add('theme-fandomdesktop-dark');
	mw.config.set('isDarkTheme', true);
})();

Щоб переключитися на світлу тему на певній вікі, додайте такий код на свою локальну особисту сторінку Special:Mypage/common.js на цій вікі (розгорніть, щоб побачити код): 

(function setLightTheme() {
	var themeSheet1 = document.createElement('link'),
	    themeSheet2 = document.createElement('link');

    themeSheet1.rel = 'stylesheet';
    themeSheet1.href = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=light';

    themeSheet2.rel = 'stylesheet';
    themeSheet2.href = '/load.php?fandomdesktop=1&lang=en&modules=' +
	    	'ext.fandom.GlobalComponents.GlobalComponentsTheme.light.css%7C' +
	    	'ext.fandom.GlobalComponents.GlobalNavigationTheme.light.css' +
	    	'&only=styles&skin=fandomdesktop';

	document.head.appendChild(themeSheet1);
	document.head.appendChild(themeSheet2);

	document.body.classList.remove('theme-fandomdesktop-dark');
	document.body.classList.add('theme-fandomdesktop-light');
	mw.config.set('isDarkTheme', false);
})();

Крім того, додайте наступний код до своєї глобальну сторінку JS і помістіть вікі, для яких ви хочете змінити тему, у рядки, які починаються з case:, замінивши приклад вікі (розгорніть, щоб побачити код): 

(function setTheme() {
	var themeSheet1 = document.createElement('link'),
	    themeURL1 = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=',
	    themeSheet2 = document.createElement('link'),
	    themeURL2 = '/load.php?fandomdesktop=1&lang=en&modules=' +
	    	'ext.fandom.GlobalComponents.GlobalComponentsTheme.$1.css%7C' +
	    	'ext.fandom.GlobalComponents.GlobalNavigationTheme.$1.css' +
	    	'&only=styles&skin=fandomdesktop';
	
	switch (mw.config.get('wgServerName')) {
		// Wikis to switch to dark mode
		case 'community.fandom.com':
		case 'dev.fandom.com':
		case 'math.wikia.org':
			themeSheet1.rel = "stylesheet";
			themeSheet1.href = themeURL1 + 'dark';
			document.head.appendChild(themeSheet1);

			themeSheet2.rel = "stylesheet";
			themeSheet2.href = themeURL2.replace(/\$1/g, 'dark');
			document.head.appendChild(themeSheet2);

			document.body.classList.remove('theme-fandomdesktop-light');
			document.body.classList.add('theme-fandomdesktop-dark');
			mw.config.set('isDarkTheme', true);
			break;

		// Wikis to switch to light mode
		case 'wreckit-woodhouse.fandom.com':
		case 'harrypotter.fandom.com':
			themeSheet1.rel = "stylesheet";
			themeSheet1.href = themeURL1 + 'light';
			document.head.appendChild(themeSheet1);

			themeSheet2.rel = "stylesheet";
			themeSheet2.href = themeURL2.replace(/\$1/g, 'light');
			document.head.appendChild(themeSheet2);

			document.body.classList.remove('theme-fandomdesktop-dark');
			document.body.classList.add('theme-fandomdesktop-light');
			mw.config.set('isDarkTheme', false);
			break;
	}
})();

Tables[]

Table progress tracking[]

This code adds a percent of checked boxes (completion percent) on every table that has progress tracking. The percent is added in the top left cell. 

function percent_completed() {
    // Selects all tables that have progress tracking.
    const tables = document.querySelectorAll('.table-progress-tracking');
    
    for (let i = 0; i < tables.length; i++) {
    	
    	// Important for updating percentages when page loads.
        observer.observe(tables[i], {
            subtree: true,
            childNodes: true,
            attributes: true
        });
        
        var selected_boxes = 0;
    	var total_boxes = -1; // Omits the table header row.
        for (let row of tables[i].rows) {
            total_boxes += 1;
            for (let cell of row.cells) {
                cell.addEventListener("change", percent_completed); // On cell change, update percent.
                if (cell.getAttribute('data-sort-value') == "1") {
                    selected_boxes += 1;
                }
            }
        }
        
        const th = tables[i].querySelector('th'); // Selects the first table header cell (top left).
        const text = Math.round(selected_boxes / total_boxes * 100) + '%';
        if (th.textContent !== text) {
            th.textContent = text;
        }
    }
}

const observer = new MutationObserver(percent_completed);
percent_completed(); // Execute function on page load.
Español हिन्दी Русский Türkçe Українська
Community content is available under CC-BY-SA unless otherwise noted.