MediaWiki:Common.js: Difference between revisions

  * 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.

     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;

 

    function navigate(title) {

         title = (title || '').trim();

         if (title) window.location.href = mw.util.getUrl(title);

     function injectStyles() {

         if (document.getElementById('ecrt-qs-styles')) return;

        style.textContent = [

 

 

 

 

 

 

        ].join('\n');

        document.head.appendChild(style);

         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.setAttribute('autocomplete', 'off');

 

         var btn = document.createElement('button');

        btn.className = 'ecrt-qs-btn';

        btn.textContent = 'Go';

 

        row.appendChild(input);

        row.appendChild(btn);

 

        var dropdown = document.createElement('div');

 

        // Replace placeholder with real controls

        wrap.innerHTML = '';

 

        var timer    = null;

 

        function openDropdown()  { dropdown.classList.add('is-open'); }

             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) {

 

            if (!results.length) {

 

 

 

        function renderLoading() {

             dropdown.innerHTML = '';

            var msg = document.createElement('div');

 

 

                        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;

 

 

 

 

         });

         input.addEventListener('focus', function () {

             if (items.length && input.value.trim().length >= MIN_CHARS) {

                openDropdown();

             }

         // 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({

            category:    'AV devices',

            placeholder: 'Type an AV device name (e.g. JVC SR-V10U)'

        });

         document.addEventListener('DOMContentLoaded', init);

         init();