MediaWiki:Common.js: відмінності між версіями

Версія за 11:43, 24 березня 2026

// Виправляємо viewport
(function() {
    var viewport = document.querySelector('meta[name="viewport"]');
    if (viewport) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
    } else {
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, initial-scale=1.0';
        document.head.appendChild(meta);
    }
})();

/* ── Глобальні парсери (потрібні для всіх блоків) ── */
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; 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, 180);
    return lines[0].length > 180 ? result + '…' : result;
}

$(function() {
    $('.category-card').each(function() {
        var $card = $(this);
        var href = $card.attr('data-href');
        
        if (href) {
            $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'); }
            );
        }
    });
});
/* ── Випадкові статті на головній сторінці ── */
/* ══════════════════════════════════════════════
   ВИПАДКОВІ СТАТТІ
══════════════════════════════════════════════ */
 
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-додаток для будь-якої категорії MediaWiki
══════════════════════════════════════════════ */

mw.hook('wikipage.content').add(function () {
    var mountEl = document.getElementById('vue-category-cards');
    if (!mountEl) return;

    var categoryName  = mountEl.getAttribute('data-category')     || '';
    var filterField   = mountEl.getAttribute('data-filter-field') || 'auto';
    var pageLimit     = parseInt(mountEl.getAttribute('data-limit') || '50', 10);
    var columns       = mountEl.getAttribute('data-columns')       || '3';

    if (!categoryName) {
        mountEl.innerHTML = '<p style="color:red">Вкажіть атрибут data-category</p>';
        return;
    }

    mw.loader.getScript('https://unpkg.com/vue@3/dist/vue.global.prod.js').then(function () {
        var apiBase = mw.config.get('wgScriptPath') + '/api.php';

        function parseField(wikitext, field) {
            if (!wikitext || !field) return '';
            var re = new RegExp('\\|\\s*' + field + '\\s*=\\s*([^\\|\\n\\}]+)', 'i');
            var m = wikitext.match(re);
            return m ? m[1].trim() : '';
        }

        function parseInfobox(wikitext) {
            if (!wikitext) return {};
            var fields = {};
            var depth = 0, start = -1, end = -1;
            for (var i = 0; i < wikitext.length; i++) {
                if (wikitext[i] === '{' && wikitext[i + 1] === '{') {
                    if (depth === 0) start = i;
                    depth++; i++;
                } else if (wikitext[i] === '}' && wikitext[i + 1] === '}') {
                    depth--;
                    if (depth === 0) { end = i + 2; break; }
                    i++;
                }
            }
            var box = (start >= 0 && end > start) ? wikitext.substring(start, end) : wikitext;
            var lineRe = /\|\s*([\w\u0400-\u04FF]+)\s*=\s*([^\|\n\}]*)/gi;
            var m;
            while ((m = lineRe.exec(box)) !== null) {
                var key = m[1].trim().toLowerCase();
                var val = m[2].trim()
                    .replace(/\[\[(?:[^\|\]]*\|)?([^\]]+)\]\]/g, '$1')
                    .replace(/'{2,3}/g, '')
                    .replace(/<[^>]+>/g, '');
                if (val) fields[key] = val;
            }
            return fields;
        }

        function resolveFilterValue(fields, explicit) {
            if (!explicit || explicit === 'auto') {
                var priority = ['посада', 'position', 'title', 'rank', 'тип', 'type', 'категорія', 'рубрика'];
                for (var i = 0; i < priority.length; i++) {
                    if (fields[priority[i]]) return fields[priority[i]];
                }
                var skip = ['image', 'зображення', 'photo', 'фото'];
                var keys = Object.keys(fields);
                for (var j = 0; j < keys.length; j++) {
                    if (skip.indexOf(keys[j]) === -1) return fields[keys[j]];
                }
                return '';
            }
            return fields[explicit.toLowerCase()] || '';
        }

        function toFilterLabel(val) {
            if (!val) return 'Інше';
            if (val.length <= 12) return val;
            return val.split(/[\s,]/)[0];
        }

        var app = Vue.createApp({
            data() {
                return {
                    items: [], loading: true, error: null,
                    activeFilter: 'Всі', filters: ['Всі'],
                    preview: null, previewX: 0, previewY: 0, previewTimer: null,
                    searchQuery: '', gridColumns: columns,
                };
            },
            computed: {
                filteredItems() {
                    var vm = this;
                    var q = vm.searchQuery.trim().toLowerCase();
                    return vm.items.filter(function (item) {
                        var matchFilter = vm.activeFilter === 'Всі' || item.filterLabel === vm.activeFilter;
                        var matchSearch = !q || item.title.toLowerCase().includes(q) ||
                            (item.description && item.description.toLowerCase().includes(q));
                        return matchFilter && matchSearch;
                    }).slice().sort(function (a, b) {
                        return a.title.localeCompare(b.title, 'uk');
                    });
                },
                gridStyle() {
                    return 'grid-template-columns: repeat(' + this.gridColumns + ', 1fr);';
                }
            },
            mounted() { this.loadItems(); },
            methods: {
                showPreview(item, event) {
                    var vm = this;
                    clearTimeout(vm.previewTimer);
                    var rect = (event.currentTarget || event.target).getBoundingClientRect();
                    var scrollY = window.scrollY || window.pageYOffset;
                    var scrollX = window.scrollX || window.pageXOffset;
                    vm.previewTimer = setTimeout(function () {
                        var spaceRight = window.innerWidth - rect.right;
                        vm.previewX = spaceRight > 290 ? rect.right + scrollX + 12 : rect.left + scrollX - 282;
                        vm.previewY = rect.top + scrollY;
                        vm.preview  = item;
                    }, 250);
                },
                hidePreview() {
                    clearTimeout(this.previewTimer);
                    this.previewTimer = setTimeout(() => { this.preview = null; }, 150);
                },
                keepPreview() { clearTimeout(this.previewTimer); },
                async loadItems() {
                    this.loading = true;
                    try {
                        var catResp = await fetch(apiBase + '?action=query&list=categorymembers&cmtitle=' + encodeURIComponent('Категорія:' + categoryName) + '&cmlimit=' + pageLimit + '&cmnamespace=0&format=json');
                        var catData = await catResp.json();
                        var members = (catData.query || {}).categorymembers || [];
                        if (!members.length) { this.loading = false; return; }
                        var titles = members.map(function (m) { return m.title; }).join('|');
                        var pageResp = await fetch(apiBase + '?action=query&titles=' + encodeURIComponent(titles) + '&prop=revisions&rvprop=content&format=json');
                        var pageData = await pageResp.json();
                        var pages    = Object.values((pageData.query || {}).pages || {});
                        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);
                            var filterVal   = resolveFilterValue(fields, filterField === 'auto' ? 'auto' : filterField);
                            var filterLabel = toFilterLabel(filterVal);
                            if (filterLabel) filterSet.add(filterLabel);
                            var description = extractDescription(content);
                            var imgName     = extractImageName(content);
                            var imgSrc      = null;
                            if (imgName) {
                                try {
                                    var fileTitle = /^(Файл|File|Image|Зображення):/i.test(imgName) ? imgName : 'File:' + imgName;
                                    var imgResp = await fetch(apiBase + '?action=query&titles=' + encodeURIComponent(fileTitle) + '&prop=imageinfo&iiprop=url&iiurlwidth=200&format=json');
                                    var imgData  = await imgResp.json();
                                    var imgPages = Object.values((imgData.query || {}).pages || {});
                                    var ii = imgPages[0] && imgPages[0].imageinfo && imgPages[0].imageinfo[0];
                                    if (ii) imgSrc = ii.thumburl || ii.url;
                                } catch (e) {}
                            }
                            var pageUrl = mw.config.get('wgArticlePath').replace('$1', encodeURIComponent(page.title.replace(/ /g, '_')));
                            var extra = [];
                            var extraKeys = ['посада', 'position', 'occupation', 'спеціальність', 'рік', 'рубрика', 'тип', 'автор', 'faculty'];
                            extraKeys.forEach(function (k) {
                                if (fields[k] && fields[k] !== filterVal) {
                                    extra.push({ label: k, value: fields[k] });
                                }
                            });
                            return { title: page.title, filterLabel: filterLabel || 'Інше', description: description, imgSrc: imgSrc, pageUrl: pageUrl, extra: extra.slice(0, 3) };
                        });
                        this.items = await Promise.all(promises);
                        var sortedFilters = Array.from(filterSet).sort(function (a, b) { return a.localeCompare(b, 'uk'); });
                        this.filters = ['Всі'].concat(sortedFilters);
                    } catch (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-img-wrap">
            <img v-if="item.imgSrc" :src="item.imgSrc" :alt="item.title" class="vcc-card-img" />
            <div v-else class="vcc-card-img-placeholder">{{ item.title.charAt(0) }}</div>
          </div>
          <div class="vcc-card-body">
            <div v-if="item.filterLabel && item.filterLabel !== 'Інше'" class="vcc-card-badge">{{ item.filterLabel }}</div>
            <div class="vcc-card-name">{{ item.title }}</div>
            <div class="vcc-card-desc" v-if="item.description">{{ 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-img-placeholder">{{ preview.title.charAt(0) }}</div>
        <div class="vcc-preview-info">
          <div class="vcc-preview-badge" v-if="preview.filterLabel && preview.filterLabel !== 'Інше'">{{ preview.filterLabel }}</div>
          <div class="vcc-preview-name">{{ preview.title }}</div>