MediaWiki:Common.js
Увага: Після публікування слід очистити кеш браузера, щоб побачити зміни.
- Firefox / Safari: тримайте Shift, коли натискаєте Оновити, або натисніть Ctrl-F5 чи Ctrl-Shift-R (⌘-R на Apple Mac)
- Google Chrome: натисніть Ctrl-Shift-R (⌘-Shift-R на Apple Mac)
- Edge: тримайте Ctrl, коли натискаєте Оновити, або натисніть Ctrl-F5.
/* ══════════════════════════════════════════════
MediaWiki:Common.js — КНЛУ
══════════════════════════════════════════════ */
/* ── 1. Viewport ── */
(function () {
var vp = document.querySelector('meta[name="viewport"]');
if (vp) {
vp.setAttribute('content', 'width=device-width, initial-scale=1.0');
} else {
var m = document.createElement('meta');
m.name = 'viewport';
m.content = 'width=device-width, initial-scale=1.0';
document.head.appendChild(m);
}
})();
/* ── 2. Клікабельні category-card ── */
$(function () {
$('.category-card').each(function () {
var $card = $(this);
var href = $card.attr('data-href');
if (!href) return;
$card.css('cursor', 'pointer');
$card.on('click', function (e) {
if ($(e.target).closest('a').length === 0) window.location.href = href;
});
$card.hover(
function () { $card.addClass('card-hover'); },
function () { $card.removeClass('card-hover'); }
);
});
});
/* ══════════════════════════════════════════════
ЗАГАЛЬНІ ПАРСЕРИ (використовуються і у Vue,
і у «Випадкових статтях»)
══════════════════════════════════════════════ */
/** Знайти назву зображення у вікітексті */
function extractImageName(wikitext) {
if (!wikitext) return null;
var m = wikitext.match(/\|\s*image\s*=\s*([^\|\n\}]+)/i);
if (m && m[1].trim()) return m[1].trim();
m = wikitext.match(/\[\[(?:Файл|File|Зображення|Image):([^\|\]]+)/i);
return m ? m[1].trim() : null;
}
/** Витягнути перший змістовний абзац */
function extractDescription(wikitext) {
if (!wikitext) return '';
var text = wikitext;
/* Прибрати перший {{ }} інфобокс */
var depth = 0, end = -1;
for (var i = 0; i < text.length - 1; i++) {
if (text[i] === '{' && text[i + 1] === '{') { depth++; i++; }
else if (text[i] === '}' && text[i + 1] === '}') {
depth--;
if (depth === 0) { end = i + 2; break; }
i++;
}
}
if (end > 0) text = text.substring(end);
text = text
.replace(/\[\[(?:Файл|File|Зображення|Image):[^\]]*\]\]/gi, '')
.replace(/\{\|[\s\S]*?\|\}/g, '')
.replace(/\{\{[^}]*\}\}/g, '')
.replace(/={2,6}[^=\n]+=+/g, '')
.replace(/\[\[(?:[^\|\]]*\|)?([^\]]+)\]\]/g, '$1')
.replace(/\[[^\s\]]+\s+([^\]]+)\]/g, '$1')
.replace(/\[[^\]]+\]/g, '')
.replace(/'{2,3}/g, '')
.replace(/<[^>]+>/g, '')
.replace(/^[\*#:;].*/gm, '');
var lines = text.split('\n')
.map(function (l) { return l.trim(); })
.filter(function (l) { return l.length > 20; });
if (!lines.length) return '';
var result = lines[0].substring(0, 160);
return lines[0].length > 160 ? result + '…' : result;
}
/* ══════════════════════════════════════════════
ВИПАДКОВІ СТАТТІ
══════════════════════════════════════════════ */
function loadRandomArticles() {
var list = document.getElementById('random-articles-list');
if (!list) return;
list.innerHTML = '<div class="random-articles-loading">Завантаження...</div>';
var apiBase = mw.config.get('wgScriptPath') + '/api.php';
var excludedPages = ['Головна сторінка', 'Структурні підрозділи', 'Викладачі'];
fetch(apiBase + '?action=query&list=random&rnnamespace=0&rnlimit=10&format=json')
.then(function (r) { return r.json(); })
.then(function (data) {
var pages = data.query.random
.filter(function (p) { return excludedPages.indexOf(p.title) === -1; })
.slice(0, 3);
var titles = pages.map(function (p) { return p.title; }).join('|');
return fetch(
apiBase + '?action=query' +
'&titles=' + encodeURIComponent(titles) +
'&prop=revisions&rvprop=content&format=json'
);
})
.then(function (r) { return r.json(); })
.then(function (data) {
var pages = Object.values(data.query.pages);
list.innerHTML = '';
var promises = pages.map(function (page) {
var title = page.title;
var pageUrl = mw.config.get('wgArticlePath').replace(
'$1', encodeURIComponent(title.replace(/ /g, '_'))
);
var content = (page.revisions && page.revisions[0])
? (page.revisions[0]['*'] || '') : '';
var excerpt = extractDescription(content) || 'Немає опису.';
var imgName = extractImageName(content);
if (imgName) {
var fileTitle = /^(Файл|File|Image|Зображення):/i.test(imgName)
? imgName : 'File:' + imgName;
return fetch(
apiBase + '?action=query' +
'&titles=' + encodeURIComponent(fileTitle) +
'&prop=imageinfo&iiprop=url&iiurlwidth=120&format=json'
)
.then(function (r) { return r.json(); })
.then(function (imgData) {
var ip = Object.values(imgData.query.pages);
var ii = ip[0] && ip[0].imageinfo && ip[0].imageinfo[0];
return { title: title, excerpt: excerpt, pageUrl: pageUrl,
imgSrc: ii ? (ii.thumburl || ii.url) : null };
})
.catch(function () {
return { title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null };
});
}
return Promise.resolve({ title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null });
});
return Promise.all(promises);
})
.then(function (results) {
var el = document.getElementById('random-articles-list');
if (!el) return;
el.innerHTML = '';
results.forEach(function (item) {
var thumbHtml = item.imgSrc
? '<img class="random-article-thumb" src="' + item.imgSrc + '" alt="">'
: '<div class="random-article-thumb-placeholder">📄</div>';
var card = document.createElement('a');
card.href = item.pageUrl;
card.className = 'random-article-card';
card.innerHTML =
thumbHtml +
'<div class="random-article-info">' +
'<div class="random-article-title">' + mw.html.escape(item.title) + '</div>' +
'<div class="random-article-excerpt">' + mw.html.escape(item.excerpt) + '</div>' +
'</div>';
el.appendChild(card);
});
})
.catch(function (err) {
var el = document.getElementById('random-articles-list');
if (el) el.innerHTML = '<div class="random-articles-loading">Не вдалося завантажити статті.</div>';
console.error('[RA]', err);
});
}
mw.hook('wikipage.content').add(function () {
var panel = document.getElementById('random-articles-panel');
if (!panel) return;
loadRandomArticles();
var btn = document.getElementById('random-articles-refresh');
if (btn) btn.addEventListener('click', loadRandomArticles);
});
/* ══════════════════════════════════════════════
VUE — УНІВЕРСАЛЬНИЙ КОМПОНЕНТ КАТЕГОРІЙ
<div id="vue-category-cards" data-category="Викладачі"></div>
══════════════════════════════════════════════ */
/* Налаштування для кожної категорії */
var VCC_CONFIG = {
'Викладачі': { filterFields: ['посада','title','position'], badgeField: 'посада', subtitleField: 'occupation', columns: '4' },
'Факультети і кафедри': { filterFields: ['тип','type'], badgeField: 'тип', subtitleField: 'факультет', columns: '3' },
'Видатні випускники': { filterFields: ['спеціальність','occupation','галузь'], badgeField: 'спеціальність',subtitleField: 'occupation', columns: '4' },
'Наукові конференції': { filterFields: ['рік','year','тип'], badgeField: 'рік', subtitleField: 'тема', columns: '3' },
'Історичні постаті': { filterFields: ['епоха','period','галузь'], badgeField: 'епоха', subtitleField: 'occupation', columns: '4' },
'Керівництво університету': { filterFields: ['посада','title','position'], badgeField: 'посада', subtitleField: 'occupation', columns: '3' },
'Освітні програми': { filterFields: ['рівень','level','галузь','тип'], badgeField: 'рівень', subtitleField: 'галузь', columns: '3' },
'Структурні підрозділи': { filterFields: ['тип','type','напрям'], badgeField: 'тип', subtitleField: 'керівник', columns: '3' },
'__default__': {
filterFields: ['посада','position','title','тип','type','рік','year','галузь','спеціальність'],
badgeField: null,
subtitleField: null,
columns: '3',
},
};
mw.hook('wikipage.content').add(function () {
var mountEl = document.getElementById('vue-category-cards');
if (!mountEl) return;
var categoryName = mountEl.getAttribute('data-category') || '';
var attrFilter = mountEl.getAttribute('data-filter-field') || null;
var attrLimit = mountEl.getAttribute('data-limit') || null;
var attrColumns = mountEl.getAttribute('data-columns') || null;
var attrSort = mountEl.getAttribute('data-sort') || null;
if (!categoryName) {
mountEl.innerHTML = '<p style="color:red">[vue-category-cards] Вкажіть data-category</p>';
return;
}
var cfg = VCC_CONFIG[categoryName] || VCC_CONFIG['__default__'];
var filterFields = attrFilter ? [attrFilter] : cfg.filterFields;
var badgeField = attrFilter ? attrFilter : cfg.badgeField;
var subtitleField = cfg.subtitleField || null;
var pageLimit = parseInt(attrLimit || '50', 10);
var columns = attrColumns || cfg.columns || '3';
var sortMode = attrSort || 'alpha';
mw.loader.getScript('https://unpkg.com/vue@3/dist/vue.global.prod.js').then(function () {
var apiBase = mw.config.get('wgScriptPath') + '/api.php';
/* ── Парсер інфобоксу → { ключ: значення } ── */
function parseInfobox(wikitext) {
if (!wikitext) return {};
var fields = {};
var depth = 0, boxStart = -1, boxEnd = -1;
for (var i = 0; i < wikitext.length - 1; i++) {
if (wikitext[i] === '{' && wikitext[i+1] === '{') {
if (depth === 0) boxStart = i;
depth++; i++;
} else if (wikitext[i] === '}' && wikitext[i+1] === '}') {
depth--;
if (depth === 0) { boxEnd = i + 2; break; }
i++;
}
}
var box = (boxStart >= 0 && boxEnd > boxStart)
? wikitext.substring(boxStart, boxEnd) : wikitext;
var re = /\|\s*([\w\u0400-\u04FF]+)\s*=\s*([^\|\n\}]*)/gi, m;
while ((m = re.exec(box)) !== null) {
var k = m[1].trim().toLowerCase();
var v = m[2].trim()
.replace(/\[\[(?:[^\|\]]*\|)?([^\]]+)\]\]/g, '$1')
.replace(/'{2,3}/g, '')
.replace(/<[^>]+>/g, '');
if (v) fields[k] = v;
}
return fields;
}
/* ── Перше непусте поле зі списку ── */
function firstField(fields, keys) {
for (var i = 0; i < keys.length; i++) {
var v = fields[keys[i].toLowerCase()];
if (v) return v;
}
return '';
}
/* ── Отримати URL зображення через API ── */
async function fetchImageSrc(imgName) {
if (!imgName) return null;
try {
var fileTitle = /^(Файл|File|Image|Зображення):/i.test(imgName)
? imgName : 'File:' + imgName;
var r = await fetch(apiBase + '?action=query&titles=' +
encodeURIComponent(fileTitle) +
'&prop=imageinfo&iiprop=url&iiurlwidth=220&format=json');
var d = await r.json();
var ip = Object.values((d.query || {}).pages || {});
var ii = ip[0] && ip[0].imageinfo && ip[0].imageinfo[0];
return ii ? (ii.thumburl || ii.url) : null;
} catch (e) { return null; }
}
/* ════════════════════════════════════════
VUE ДОДАТОК
════════════════════════════════════════ */
Vue.createApp({
data() {
return {
items: [],
loading: true,
error: null,
activeFilter: 'Всі',
filters: ['Всі'],
searchQuery: '',
preview: null,
previewX: 0,
previewY: 0,
previewTimer: null,
};
},
computed: {
filteredItems() {
var vm = this;
var q = vm.searchQuery.trim().toLowerCase();
var result = vm.items.filter(function (item) {
var mf = vm.activeFilter === 'Всі' || item.badge === vm.activeFilter;
var ms = !q || item.title.toLowerCase().includes(q) ||
(item.subtitle && item.subtitle.toLowerCase().includes(q)) ||
(item.description && item.description.toLowerCase().includes(q));
return mf && ms;
});
if (sortMode === 'alpha') {
result = result.slice().sort(function (a, b) {
return a.title.localeCompare(b.title, 'uk');
});
}
return result;
},
gridStyle() {
return 'grid-template-columns: repeat(' + columns + ', 1fr);';
},
},
mounted() { this.loadItems(); },
methods: {
showPreview(item, e) {
var vm = this;
clearTimeout(vm.previewTimer);
var rect = (e.currentTarget || e.target).getBoundingClientRect();
var sY = window.scrollY || window.pageYOffset;
var sX = window.scrollX || window.pageXOffset;
vm.previewTimer = setTimeout(function () {
vm.previewX = (window.innerWidth - rect.right) > 290
? rect.right + sX + 10 : rect.left + sX - 280;
vm.previewY = rect.top + sY;
vm.preview = item;
}, 220);
},
hidePreview() {
clearTimeout(this.previewTimer);
this.previewTimer = setTimeout(() => { this.preview = null; }, 140);
},
keepPreview() { clearTimeout(this.previewTimer); },
async loadItems() {
this.loading = true;
this.error = null;
try {
/* 1. Список статей категорії */
var cr = await fetch(
apiBase + '?action=query&list=categorymembers' +
'&cmtitle=' + encodeURIComponent('Категорія:' + categoryName) +
'&cmlimit=' + pageLimit + '&cmnamespace=0&format=json'
);
var cd = await cr.json();
var members = (cd.query || {}).categorymembers || [];
if (!members.length) { this.loading = false; return; }
/* 2. Вміст статей (до 50 за раз) */
var titles = members.map(function (m) { return m.title; }).join('|');
var pr = await fetch(
apiBase + '?action=query&titles=' + encodeURIComponent(titles) +
'&prop=revisions&rvprop=content&format=json'
);
var pd = await pr.json();
var pages = Object.values((pd.query || {}).pages || {});
/* 3. Формуємо елементи */
var filterSet = new Set();
var promises = pages.map(async function (page) {
var content = (page.revisions && page.revisions[0])
? (page.revisions[0]['*'] || '') : '';
var fields = parseInfobox(content);
/* Badge */
var badgeVal = badgeField
? (fields[badgeField.toLowerCase()] || firstField(fields, filterFields))
: firstField(fields, filterFields);
var badge = badgeVal.length > 14
? badgeVal.split(/[\s,]/)[0] : badgeVal;
if (badge) filterSet.add(badge);
/* Підзаголовок */
var subtitle = subtitleField
? (fields[subtitleField.toLowerCase()] || '')
: firstField(fields, ['occupation','спеціальність','тема','напрям','керівник','галузь']);
/* Опис */
var description = extractDescription(content);
/* Зображення */
var imgSrc = await fetchImageSrc(extractImageName(content));
var pageUrl = mw.config.get('wgArticlePath').replace(
'$1', encodeURIComponent(page.title.replace(/ /g, '_'))
);
return {
title: page.title,
badge: badge || '',
subtitle: subtitle,
description: description,
imgSrc: imgSrc,
pageUrl: pageUrl,
};
});
this.items = await Promise.all(promises);
/* Фільтри */
this.filters = ['Всі'].concat(
Array.from(filterSet).sort(function (a, b) {
return a.localeCompare(b, 'uk');
})
);
} catch (e) {
console.error('[vcc]', e);
this.error = 'Не вдалося завантажити дані.';
}
this.loading = false;
},
},
template: `
<div class="vcc-app">
<div class="vcc-topbar">
<input class="vcc-search" type="text" v-model="searchQuery" placeholder="Пошук..."/>
<span class="vcc-count" v-if="!loading">
Знайдено: <strong>{{ filteredItems.length }}</strong> з {{ items.length }}
</span>
</div>
<div class="vcc-layout">
<div class="vcc-main">
<div class="vcc-loading" v-if="loading">
<div class="vcc-spinner"></div><span>Завантаження...</span>
</div>
<div class="vcc-error" v-else-if="error">{{ error }}</div>
<div class="vcc-empty" v-else-if="!filteredItems.length">
<div class="vcc-empty-icon">🔍</div>
<p>Нічого не знайдено</p>
<button class="vcc-reset-btn" @click="activeFilter='Всі'; searchQuery=''">Скинути фільтри</button>
</div>
<div class="vcc-grid" :style="gridStyle" v-else>
<a
v-for="item in filteredItems" :key="item.title"
:href="item.pageUrl" class="vcc-card"
@mouseenter="showPreview(item,$event)" @mouseleave="hidePreview"
>
<div class="vcc-card-avatar">
<img v-if="item.imgSrc" :src="item.imgSrc" :alt="item.title" class="vcc-card-img"/>
<div v-else class="vcc-card-placeholder">{{ item.title.charAt(0) }}</div>
</div>
<div class="vcc-card-body">
<div v-if="item.badge" class="vcc-card-badge">{{ item.badge }}</div>
<div class="vcc-card-name">{{ item.title }}</div>
<div v-if="item.subtitle" class="vcc-card-sub">{{ item.subtitle }}</div>
<div v-else-if="item.description" class="vcc-card-sub">{{ item.description }}</div>
</div>
</a>
</div>
</div>
<div class="vcc-sidebar" v-if="filters.length > 2">
<div class="vcc-sidebar-title">Фільтр</div>
<div class="vcc-filters">
<button
v-for="f in filters" :key="f"
class="vcc-filter-btn" :class="{ active: activeFilter === f }"
@click="activeFilter = f"
>{{ f }}</button>
</div>
</div>
</div>
<teleport to="body">
<a v-if="preview" :href="preview.pageUrl" class="vcc-preview"
:style="{ top: previewY+'px', left: previewX+'px' }"
@mouseenter="keepPreview" @mouseleave="hidePreview">
<div class="vcc-preview-top">
<img v-if="preview.imgSrc" :src="preview.imgSrc" class="vcc-preview-img" :alt="preview.title"/>
<div v-else class="vcc-preview-placeholder">{{ preview.title.charAt(0) }}</div>
<div class="vcc-preview-info">
<div v-if="preview.badge" class="vcc-preview-badge">{{ preview.badge }}</div>
<div class="vcc-preview-name">{{ preview.title }}</div>
</div>
</div>
<div class="vcc-preview-divider"></div>
<div v-if="preview.subtitle" class="vcc-preview-row">
<span class="vcc-preview-lbl">Деталі</span>
<span class="vcc-preview-val">{{ preview.subtitle }}</span>
</div>
<div v-if="preview.description" class="vcc-preview-desc">{{ preview.description }}</div>
</a>
</teleport>
</div>`,
}).mount('#vue-category-cards');
});
});
/* ══════════════════════════════════════════════
ГОЛОВНА СТОРІНКА
══════════════════════════════════════════════ */
/* ── Анімація чисел статистики ── */
function animateNumber(element, target) {
element.classList.add('animating');
var current = 0, increment = target / 60;
var timer = setInterval(function () {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
setTimeout(function () { element.classList.remove('animating'); }, 100);
}
element.textContent = Math.floor(current);
}, 16);
}
mw.hook('wikipage.content').add(function () {
if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
var statsNumbers = document.querySelectorAll('.stats-panel-number');
var animated = false;
function checkAndAnimate() {
if (animated) return;
var statsPanel = document.querySelector('.stats-panel');
if (!statsPanel) return;
var rect = statsPanel.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
animated = true;
statsNumbers.forEach(function (el) {
var num = parseInt(el.textContent.trim().replace(/[^\d]/g, ''), 10);
if (!isNaN(num) && num > 0) {
el.textContent = '0';
setTimeout(function () { animateNumber(el, num); }, 200);
}
});
}
}
window.addEventListener('scroll', checkAndAnimate);
checkAndAnimate();
});
/* ── Сортування карточок за прізвищем ── */
mw.hook('wikipage.content').add(function () {
document.querySelectorAll('div[style*="grid-template-columns"]').forEach(function (grid) {
var cards = Array.from(grid.children);
if (cards.length < 2) return;
cards.sort(function (a, b) {
var aLink = a.querySelector('div[style*="flex-grow"] a');
var bLink = b.querySelector('div[style*="flex-grow"] a');
if (!aLink || !bLink) return 0;
return aLink.textContent.trim().split(' ')[0]
.localeCompare(bLink.textContent.trim().split(' ')[0], 'uk');
});
cards.forEach(function (card) { grid.appendChild(card); });
});
});
/* ── Прогрес скролла ── */
mw.hook('wikipage.content').add(function () {
if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
var progressBar = document.createElement('div');
progressBar.className = 'scroll-progress';
document.body.appendChild(progressBar);
function updateProgress() {
var winScroll = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
progressBar.style.width = (height > 0 ? (winScroll / height) * 100 : 0) + '%';
}
window.addEventListener('scroll', updateProgress);
updateProgress();
});
/* ── Particles.js canvas фон ── */
mw.hook('wikipage.content').add(function () {
if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
var welcomeWrapper = document.querySelector('.welcome-wrapper');
if (!welcomeWrapper) return;
var canvas = document.createElement('canvas');
canvas.className = 'particles-canvas';
canvas.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;';
var maskVal = 'linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%),' +
'linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%)';
canvas.style.webkitMaskImage = maskVal;
canvas.style.maskImage = maskVal;
canvas.style.webkitMaskComposite = 'source-in';
canvas.style.maskComposite = 'intersect';
welcomeWrapper.style.position = 'relative';
welcomeWrapper.insertBefore(canvas, welcomeWrapper.firstChild);
var ctx = canvas.getContext('2d');
canvas.width = welcomeWrapper.offsetWidth;
canvas.height = welcomeWrapper.offsetHeight;
var particles = [], COUNT = 40;
function Particle() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 0.5;
this.vy = (Math.random() - 0.5) * 0.5;
this.r = Math.random() * 2 + 1;
}
Particle.prototype.update = function () {
if (this.x > canvas.width || this.x < 0) this.vx = -this.vx;
if (this.y > canvas.height || this.y < 0) this.vy = -this.vy;
this.x += this.vx;
this.y += this.vy;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,215,0,0.6)';
ctx.fill();
};
for (var i = 0; i < COUNT; i++) particles.push(new Particle());
(function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].update();
for (var j = i + 1; j < particles.length; j++) {
var dx = particles[i].x - particles[j].x;
var dy = particles[i].y - particles[j].y;
var d = Math.sqrt(dx * dx + dy * dy);
if (d < 120) {
ctx.beginPath();
ctx.strokeStyle = 'rgba(255,215,0,' + (1 - d / 120) * 0.3 + ')';
ctx.lineWidth = 1;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
requestAnimationFrame(animate);
})();
window.addEventListener('resize', function () {
canvas.width = welcomeWrapper.offsetWidth;
canvas.height = welcomeWrapper.offsetHeight;
});
});