EveryCRT Wiki

MediaWiki:Common.js: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 228: Line 228:


/**
/**
  * Quick Search — Navigate directly to wiki page
  * Quick Search Widgets — Reusable autocomplete for CRT & AV device lookup
  * Intercepts the Page Forms #forminput inside #crt-quick-search so that
  * Each widget is configured via a simple object (container ID, controls ID,
  * clicking "Go" (or pressing Enter, or selecting an autocomplete suggestion)
  * category, placeholder text). The Main Page wikitext contains the styled
* navigates to the wiki article instead of opening the form editor.
  * containers with "Loading search…" placeholders; this script replaces them
*
  * with the actual input, button, and dropdown, then wires up event handlers.
* Page Forms uses OOUI and a custom autocomplete.  When a suggestion is
* clicked the input's value changes from the partial text to the full page
  * name, firing a native "change" event.  We detect this by tracking the
  * last value the user actually typed (via "input" events) and navigating
* when "change" produces a *different* value — meaning autocomplete filled
* it in.
  */
  */
(function () {
(function () {
Line 245: Line 239:
     if (mw.config.get('wgPageName') !== 'Main_Page') return;
     if (mw.config.get('wgPageName') !== 'Main_Page') return;


     function goToPage(value) {
    // ── Shared config ───────────────────────────────────────────────
         value = String(value || '').trim();
    var API_URL      = mw.util.wikiScript('api');
         if (value) {
    var DEBOUNCE_MS  = 250;
            window.location.href = mw.util.getUrl(value);
    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();
         }
         }
    }


    function setup(container, form) {
        // ── API fetch ───────────────────────────────────────────────
        var input = container.querySelector('.pfFormInputWrapper input:not([type="hidden"])');
        function fetchSuggestions(substr) {
        if (!input) return false;
            renderLoading();
            var url = API_URL + '?action=pfautocomplete&format=json'
                + '&substr=' + encodeURIComponent(substr)
                + '&category=' + encodeURIComponent(cfg.category);


        var lastTyped = '';
            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();
                });
        }


         // Track what the user is actually typing keystroke-by-keystroke
         // ── Event handlers ──────────────────────────────────────────
         input.addEventListener('input', function () {
         input.addEventListener('input', function () {
             lastTyped = input.value;
             clearTimeout(timer);
            var val = input.value.trim();
            if (val.length < MIN_CHARS) {
                closeDropdown();
                return;
            }
            timer = setTimeout(function () {
                fetchSuggestions(val);
            }, DEBOUNCE_MS);
         });
         });


        // When autocomplete fills in a suggestion and the input loses focus,
         input.addEventListener('keydown', function (e) {
        // "change" fires with a value different from what was last typed.
             if (!dropdown.classList.contains('is-open') || !items.length) {
         input.addEventListener('change', function () {
                if (e.key === 'Enter') {
             var current = input.value.trim();
                    e.preventDefault();
            if (current && current !== lastTyped.trim()) {
                    navigate(input.value);
                 goToPage(current);
                }
                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;
             }
             }
         });
         });


         // Intercept form submission (Enter key / Go button)
         btn.addEventListener('click', function () {
         form.addEventListener('submit', function (e) {
            navigate(input.value);
             e.preventDefault();
         });
            e.stopPropagation();
 
             goToPage(input.value);
        document.addEventListener('click', function (e) {
             if (!container.contains(e.target)) {
                closeDropdown();
             }
         });
         });


         return true;
         input.addEventListener('focus', function () {
            if (items.length && input.value.trim().length >= MIN_CHARS) {
                openDropdown();
            }
        });
     }
     }


    // ── Init all widgets ────────────────────────────────────────────
     function init() {
     function init() {
         var container = document.getElementById('crt-quick-search');
         injectStyles();
        if (!container) return;


         var form = container.querySelector('form');
         // CRT Quick Search
        if (!form) return;
        initWidget({
 
            containerId: 'crt-quick-search',
         if (setup(container, form)) return;
            controlsId:  'ecrt-qs-controls-crt',
            category:    'CRT models',
            placeholder: 'Type a CRT model name (e.g. Sony KV-27S42)'
         });


         // Page Forms creates the input dynamically — wait for it
         // AV Device Quick Search
         var observer = new MutationObserver(function (mutations, obs) {
         initWidget({
             if (setup(container, form)) obs.disconnect();
            containerId: 'av-quick-search',
            controlsId:  'ecrt-qs-controls-av',
            category:    'AV devices',
             placeholder: 'Type an AV device name (e.g. JVC SR-V10U)'
         });
         });
        observer.observe(container, { childList: true, subtree: true });
        setTimeout(function () { observer.disconnect(); }, 10000);
     }
     }


    // ── Run ─────────────────────────────────────────────────────────
     if (document.readyState === 'loading') {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', init);
         document.addEventListener('DOMContentLoaded', init);
Line 307: Line 661:




/**
* 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();
    }
})();




Retrieved from "https://wiki.everycrt.com/wiki/MediaWiki:Common.js"
MediaWiki Appliance - Powered by TurnKey Linux