EveryCRT Wiki

MediaWiki:Common.js: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 141: Line 141:
  * Page Forms editor instead.
  * Page Forms editor instead.
  *
  *
* ADD THIS to MediaWiki:Common.js (before the CRT Search loader at the bottom)
  */
  */
(function () {
(function () {
Line 208: Line 207:
                             'Only use the source editor if you know what you\'re doing.' +
                             'Only use the source editor if you know what you\'re doing.' +
                         '</span>' +
                         '</span>' +
                        '<div style="margin-top:10px;color:#991b1b;font-size:12px;">' +
                            '<strong>Tip:</strong> To go directly to the form editor next time, ' +
                            'click the <strong>"Edit this data"</strong> button on the page instead of "Edit".' +
                        '</div>' +
                     '</div>' +
                     '</div>' +
                 '</div>' +
                 '</div>' +
Line 223: Line 226:




/**
* Quick Search Widgets — Reusable autocomplete for CRT & AV device lookup
* Each widget is configured via a simple object (container ID, controls ID,
* category, placeholder text). The Main Page wikitext contains the styled
* containers with "Loading search…" placeholders; this script replaces them
* with the actual input, button, and dropdown, then wires up event handlers.
*/
(function () {
    'use strict';
    if (mw.config.get('wgPageName') !== 'Main_Page') return;
    // ── Shared config ───────────────────────────────────────────────
    var API_URL      = mw.util.wikiScript('api');
    var DEBOUNCE_MS  = 250;
    var MIN_CHARS    = 2;
    // ── Helpers ─────────────────────────────────────────────────────
    function navigate(title) {
        title = (title || '').trim();
        if (title) window.location.href = mw.util.getUrl(title);
    }
    // ── Styles (injected once) ──────────────────────────────────────
    function injectStyles() {
        if (document.getElementById('ecrt-qs-styles')) return;
        var style = document.createElement('style');
        style.id = 'ecrt-qs-styles';
        style.textContent = [
            /* ── Base (blue) container & label ── */
            '.ecrt-qs-container {',
            '  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);',
            '  border: 2px solid #7dd3fc;',
            '  border-radius: 0.75rem;',
            '  padding: 1rem 1.25rem;',
            '  margin-bottom: 1.25rem;',
            '  box-shadow: 0 2px 4px rgba(0,0,0,0.05);',
            '}',
            '.ecrt-qs-label {',
            '  font-weight: 600;',
            '  color: #0369a1;',
            '  margin-bottom: 0.5rem;',
            '  font-size: 0.9rem;',
            '}',
            /* ── Green variant (AV devices) ── */
            '.ecrt-qs-container--av {',
            '  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);',
            '  border-color: #86efac;',
            '}',
            '.ecrt-qs-container--av .ecrt-qs-label {',
            '  color: #15803d;',
            '}',
            '.ecrt-qs-container--av .ecrt-qs-input:focus {',
            '  border-color: #16a34a;',
            '  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);',
            '}',
            '.ecrt-qs-container--av .ecrt-qs-btn {',
            '  background: #16a34a;',
            '}',
            '.ecrt-qs-container--av .ecrt-qs-btn:hover {',
            '  background: #15803d;',
            '}',
            '.ecrt-qs-container--av .ecrt-qs-btn:active {',
            '  background: #166534;',
            '}',
            '.ecrt-qs-container--av .ecrt-qs-item:hover,',
            '.ecrt-qs-container--av .ecrt-qs-item.is-active {',
            '  background: #dcfce7;',
            '  color: #14532d;',
            '}',
            /* Placeholder shown before JS loads */
            '.ecrt-qs-placeholder {',
            '  padding: 0.625rem 0.875rem;',
            '  font-size: 0.95rem;',
            '  border: 1.5px solid #cbd5e1;',
            '  border-radius: 0.5rem;',
            '  background: #f1f5f9;',
            '  color: #94a3b8;',
            '  font-style: italic;',
            '}',
            /* Interactive controls */
            '.ecrt-qs-wrap {',
            '  position: relative;',
            '}',
            '.ecrt-qs-row {',
            '  display: flex;',
            '  gap: 0.5rem;',
            '}',
            '.ecrt-qs-input {',
            '  flex: 1;',
            '  padding: 0.625rem 0.875rem;',
            '  font-size: 0.95rem;',
            '  border: 1.5px solid #94a3b8;',
            '  border-radius: 0.5rem;',
            '  outline: none;',
            '  background: #fff;',
            '  color: #1e293b;',
            '  transition: border-color 0.15s, box-shadow 0.15s;',
            '  min-width: 0;',
            '}',
            '.ecrt-qs-input:focus {',
            '  border-color: #0284c7;',
            '  box-shadow: 0 0 0 3px rgba(2,132,199,0.15);',
            '}',
            '.ecrt-qs-input::placeholder { color: #94a3b8; }',
            '.ecrt-qs-btn {',
            '  padding: 0.625rem 1.25rem;',
            '  font-size: 0.95rem;',
            '  font-weight: 600;',
            '  color: #fff;',
            '  background: #0284c7;',
            '  border: none;',
            '  border-radius: 0.5rem;',
            '  cursor: pointer;',
            '  transition: background 0.15s;',
            '  white-space: nowrap;',
            '}',
            '.ecrt-qs-btn:hover { background: #0369a1; }',
            '.ecrt-qs-btn:active { background: #075985; }',
            /* Dropdown */
            '.ecrt-qs-dropdown {',
            '  position: absolute;',
            '  top: 100%;',
            '  left: 0;',
            '  right: 0;',
            '  margin-top: 0.25rem;',
            '  background: #fff;',
            '  border: 1.5px solid #cbd5e1;',
            '  border-radius: 0.5rem;',
            '  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12), 0 4px 6px -2px rgba(0,0,0,0.06);',
            '  max-height: 20rem;',
            '  overflow-y: auto;',
            '  z-index: 1000;',
            '  display: none;',
            '}',
            '.ecrt-qs-dropdown.is-open { display: block; }',
            '.ecrt-qs-item {',
            '  padding: 0.5rem 0.875rem;',
            '  cursor: pointer;',
            '  font-size: 0.925rem;',
            '  color: #334155;',
            '  transition: background 0.1s;',
            '}',
            '.ecrt-qs-item:hover,',
            '.ecrt-qs-item.is-active {',
            '  background: #e0f2fe;',
            '  color: #0c4a6e;',
            '}',
            '.ecrt-qs-item + .ecrt-qs-item {',
            '  border-top: 1px solid #f1f5f9;',
            '}',
            '.ecrt-qs-status {',
            '  padding: 0.625rem 0.875rem;',
            '  font-size: 0.85rem;',
            '  color: #94a3b8;',
            '  font-style: italic;',
            '}',
            /* ── Night-mode overrides (base / blue) ── */
            '.skin-theme-clientpref-night .ecrt-qs-container {',
            '  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);',
            '  border-color: #334155;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-label { color: #7dd3fc; }',
            '.skin-theme-clientpref-night .ecrt-qs-placeholder {',
            '  background: #0f172a;',
            '  border-color: #334155;',
            '  color: #475569;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-input {',
            '  background: #1e293b;',
            '  border-color: #475569;',
            '  color: #e2e8f0;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-input:focus {',
            '  border-color: #38bdf8;',
            '  box-shadow: 0 0 0 3px rgba(56,189,248,0.2);',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-input::placeholder { color: #64748b; }',
            '.skin-theme-clientpref-night .ecrt-qs-btn { background: #0369a1; }',
            '.skin-theme-clientpref-night .ecrt-qs-btn:hover { background: #0284c7; }',
            '.skin-theme-clientpref-night .ecrt-qs-dropdown {',
            '  background: #1e293b;',
            '  border-color: #475569;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-item { color: #cbd5e1; }',
            '.skin-theme-clientpref-night .ecrt-qs-item:hover,',
            '.skin-theme-clientpref-night .ecrt-qs-item.is-active {',
            '  background: #0c4a6e;',
            '  color: #e0f2fe;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-item + .ecrt-qs-item {',
            '  border-top-color: #334155;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-status { color: #64748b; }',
            /* ── Night-mode overrides (green / AV) ── */
            '.skin-theme-clientpref-night .ecrt-qs-container--av {',
            '  background: linear-gradient(135deg, #0a1f0f 0%, #14291a 100%);',
            '  border-color: #1e4d2b;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-container--av .ecrt-qs-label {',
            '  color: #86efac;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-container--av .ecrt-qs-input:focus {',
            '  border-color: #4ade80;',
            '  box-shadow: 0 0 0 3px rgba(74,222,128,0.2);',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-container--av .ecrt-qs-btn {',
            '  background: #15803d;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-container--av .ecrt-qs-btn:hover {',
            '  background: #16a34a;',
            '}',
            '.skin-theme-clientpref-night .ecrt-qs-container--av .ecrt-qs-item:hover,',
            '.skin-theme-clientpref-night .ecrt-qs-container--av .ecrt-qs-item.is-active {',
            '  background: #14532d;',
            '  color: #bbf7d0;',
            '}'
        ].join('\n');
        document.head.appendChild(style);
    }
    // ── Generic widget initializer ──────────────────────────────────
    // cfg = { containerId, controlsId, category, placeholder }
    function initWidget(cfg) {
        var container = document.getElementById(cfg.containerId);
        var wrap      = document.getElementById(cfg.controlsId);
        if (!container || !wrap) return;
        // ── Build interactive controls ──────────────────────────────
        var row = document.createElement('div');
        row.className = 'ecrt-qs-row';
        var input = document.createElement('input');
        input.type = 'text';
        input.className = 'ecrt-qs-input';
        input.placeholder = cfg.placeholder;
        input.setAttribute('autocomplete', 'off');
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'ecrt-qs-btn';
        btn.textContent = 'Go';
        row.appendChild(input);
        row.appendChild(btn);
        var dropdown = document.createElement('div');
        dropdown.className = 'ecrt-qs-dropdown';
        // Replace placeholder with real controls
        wrap.innerHTML = '';
        wrap.appendChild(row);
        wrap.appendChild(dropdown);
        // ── State ───────────────────────────────────────────────────
        var items    = [];
        var activeIdx = -1;
        var timer    = null;
        function openDropdown()  { dropdown.classList.add('is-open'); }
        function closeDropdown() {
            dropdown.classList.remove('is-open');
            activeIdx = -1;
        }
        function setActive(idx) {
            var els = dropdown.querySelectorAll('.ecrt-qs-item');
            els.forEach(function (el) { el.classList.remove('is-active'); });
            activeIdx = idx;
            if (idx >= 0 && idx < els.length) {
                els[idx].classList.add('is-active');
                els[idx].scrollIntoView({ block: 'nearest' });
            }
        }
        function renderItems(results) {
            dropdown.innerHTML = '';
            items = [];
            activeIdx = -1;
            if (!results.length) {
                var msg = document.createElement('div');
                msg.className = 'ecrt-qs-status';
                msg.textContent = 'No results found';
                dropdown.appendChild(msg);
                openDropdown();
                return;
            }
            results.forEach(function (r, i) {
                var el = document.createElement('div');
                el.className = 'ecrt-qs-item';
                el.textContent = r.title;
                el.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                    navigate(r.title);
                });
                el.addEventListener('mouseenter', function () {
                    setActive(i);
                });
                dropdown.appendChild(el);
                items.push(r.title);
            });
            openDropdown();
        }
        function renderLoading() {
            dropdown.innerHTML = '';
            var msg = document.createElement('div');
            msg.className = 'ecrt-qs-status';
            msg.textContent = 'Searching\u2026';
            dropdown.appendChild(msg);
            openDropdown();
        }
        // ── API fetch ───────────────────────────────────────────────
        function fetchSuggestions(substr) {
            renderLoading();
            var url = API_URL + '?action=pfautocomplete&format=json'
                + '&substr=' + encodeURIComponent(substr)
                + '&category=' + encodeURIComponent(cfg.category);
            fetch(url)
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (input.value.trim().toLowerCase() === substr.toLowerCase()) {
                        renderItems((data && data.pfautocomplete) || []);
                    }
                })
                .catch(function () {
                    dropdown.innerHTML = '';
                    closeDropdown();
                });
        }
        // ── Event handlers ──────────────────────────────────────────
        input.addEventListener('input', function () {
            clearTimeout(timer);
            var val = input.value.trim();
            if (val.length < MIN_CHARS) {
                closeDropdown();
                return;
            }
            timer = setTimeout(function () {
                fetchSuggestions(val);
            }, DEBOUNCE_MS);
        });
        input.addEventListener('keydown', function (e) {
            if (!dropdown.classList.contains('is-open') || !items.length) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    navigate(input.value);
                }
                return;
            }
            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    setActive(activeIdx < items.length - 1 ? activeIdx + 1 : 0);
                    break;
                case 'ArrowUp':
                    e.preventDefault();
                    setActive(activeIdx > 0 ? activeIdx - 1 : items.length - 1);
                    break;
                case 'Enter':
                    e.preventDefault();
                    if (activeIdx >= 0 && activeIdx < items.length) {
                        navigate(items[activeIdx]);
                    } else {
                        navigate(input.value);
                    }
                    break;
                case 'Escape':
                    closeDropdown();
                    break;
            }
        });
        btn.addEventListener('click', function () {
            navigate(input.value);
        });
        document.addEventListener('click', function (e) {
            if (!container.contains(e.target)) {
                closeDropdown();
            }
        });
        input.addEventListener('focus', function () {
            if (items.length && input.value.trim().length >= MIN_CHARS) {
                openDropdown();
            }
        });
    }
    // ── Init all widgets ────────────────────────────────────────────
    function init() {
        injectStyles();
        // CRT Quick Search
        initWidget({
            containerId: 'crt-quick-search',
            controlsId:  'ecrt-qs-controls-crt',
            category:    'CRT models',
            placeholder: 'Type a CRT model name (e.g. Sony KV-27S42)'
        });
        // AV Device Quick Search
        initWidget({
            containerId: 'av-quick-search',
            controlsId:  'ecrt-qs-controls-av',
            category:    'AV devices',
            placeholder: 'Type an AV device name (e.g. JVC SR-V10U)'
        });
    }
    // ── Run ─────────────────────────────────────────────────────────
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
/**
* Footer Credit — "An Arclight Automata project"
* Appends inline credit text with link after the site name
* in the Minerva Neue footer (.minerva-footer-logo).
*/
(function () {
    'use strict';
    function addFooterCredit() {
        var logo = document.querySelector('.minerva-footer-logo');
        if (!logo || logo.querySelector('.ecrt-footer-credit')) return;
        var span = document.createElement('span');
        span.className = 'ecrt-footer-credit';
        span.innerHTML = ' \u00b7 An <a href="https://arclight.run" '
            + 'style="color:inherit;text-decoration:underline;text-decoration-color:rgba(128,128,128,0.4);'
            + 'text-underline-offset:2px;" '
            + 'target="_blank" rel="noopener">Arclight Automata</a> project';
        span.style.cssText = 'font-weight:normal;font-size:1em;opacity:0.7;';
        logo.appendChild(span);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', addFooterCredit);
    } else {
        addFooterCredit();
    }
})();




Line 229: Line 698:
if (mw.config.get('wgPageName') === 'CRT_Search') {
if (mw.config.get('wgPageName') === 'CRT_Search') {
     mw.loader.load('/wiki/MediaWiki:CRT_Search.js?action=raw&ctype=text/javascript');
     mw.loader.load('/wiki/MediaWiki:CRT_Search.js?action=raw&ctype=text/javascript');
}
// Load AV Device Search module on the AV Device Search page
if (mw.config.get('wgPageName') === 'AV_Device_Search') {
    mw.loader.load('/wiki/MediaWiki:AV_Device_Search.js?action=raw&ctype=text/javascript');
}
}
Retrieved from "https://wiki.everycrt.com/wiki/MediaWiki:Common.js"
MediaWiki Appliance - Powered by TurnKey Linux