EveryCRT Wiki

MediaWiki:Common.js: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 228: Line 228:


/**
/**
  * Quick Search — DEBUG v2
  * Quick Search — Navigate directly to wiki page
  * Focused on finding the right event for OOUI autocomplete selection
  * Intercepts the Page Forms #forminput inside #crt-quick-search so that
* clicking "Go" (or pressing Enter, or selecting an autocomplete suggestion)
* navigates to the wiki article instead of opening the form editor.
*
* 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 236: Line 245:
     if (mw.config.get('wgPageName') !== 'Main_Page') return;
     if (mw.config.get('wgPageName') !== 'Main_Page') return;


     function init() {
     function goToPage(value) {
         var container = document.getElementById('crt-quick-search');
         value = String(value || '').trim();
         if (!container) return;
         if (value) {
            window.location.href = mw.util.getUrl(value);
        }
    }


         var form = container.querySelector('form');
    function setup(container, form) {
         if (!form) return;
         var input = container.querySelector('.pfFormInputWrapper input:not([type="hidden"])');
         if (!input) return false;


         // Wait for OOUI to create the input
         var lastTyped = '';
        function trySetup() {
            // OOUI creates input with this class
            var input = container.querySelector('input.oo-ui-inputWidget-input, .pfFormInputWrapper input:not([type="hidden"])');
            if (!input) return false;


            console.log('[QS] Found input:', input, 'classes:', input.className);
        // Track what the user is actually typing keystroke-by-keystroke
        input.addEventListener('input', function () {
            lastTyped = input.value;
        });


            // Log ALL events on the input to find the right one
        // When autocomplete fills in a suggestion and the input loses focus,
            ['change', 'input', 'blur', 'focus', 'select'].forEach(function (evt) {
        // "change" fires with a value different from what was last typed.
                input.addEventListener(evt, function (e) {
        input.addEventListener('change', function () {
                    console.log('[QS] Native event:', evt, '| value:', JSON.stringify(input.value));
            var current = input.value.trim();
                 });
            if (current && current !== lastTyped.trim()) {
             });
                 goToPage(current);
             }
        });


            // jQuery events that PF/OOUI might use
        // Intercept form submission (Enter key / Go button)
            var $input = $(input);
        form.addEventListener('submit', function (e) {
            $input.on('change input blur select autocompleteselect autocompleteclose pfautocomplete', function (e) {
            e.preventDefault();
                console.log('[QS] jQuery event:', e.type, '| value:', JSON.stringify(input.value));
            e.stopPropagation();
            });
            goToPage(input.value);
        });


            // Look for OOUI widget instance
        return true;
            var $wrapper = $(container).find('.pfFormInputWrapper');
    }
            console.log('[QS] pfFormInputWrapper:', $wrapper.length ? $wrapper[0] : 'not found');


            // Check if there's an OOUI widget attached
    function init() {
            var widget = OO && OO.ui ? OO.ui.infuse && $wrapper.find('.oo-ui-widget')[0] : null;
        var container = document.getElementById('crt-quick-search');
            console.log('[QS] OO.ui available:', typeof OO !== 'undefined' && !!OO.ui);
        if (!container) return;


            // Use event delegation to catch clicks on autocomplete menu items
        var form = container.querySelector('form');
            // OOUI menus are often appended to <body>, not inside the container
        if (!form) return;
            $(document.body).on('click', '.oo-ui-menuOptionWidget, .oo-ui-optionWidget, .ui-menu-item, .pf-autocomplete-item, .autocomplete-suggestion', function (e) {
                var text = $(this).text().trim();
                console.log('[QS] Autocomplete item clicked! Text:', JSON.stringify(text));
                // After PF updates the input value:
                setTimeout(function () {
                    console.log('[QS] Input value after click:', JSON.stringify(input.value));
                }, 100);
            });


            // Also watch for any new elements appearing (the dropdown)
        if (setup(container, form)) return;
            console.log('[QS] Searching for any autocomplete-related elements...');
            setTimeout(function () {
                // Log all elements with autocomplete-related classes
                var candidates = document.querySelectorAll('[class*="autocomplete"], [class*="menu"], [class*="lookup"], [class*="suggestion"]');
                candidates.forEach(function (el) {
                    console.log('[QS] Candidate element:', el.tagName, el.className.substring(0, 100));
                });
            }, 3000);


            // Form submit still works
        // Page Forms creates the input dynamically — wait for it
            form.addEventListener('submit', function (e) {
         var observer = new MutationObserver(function (mutations, obs) {
                e.preventDefault();
            if (setup(container, form)) obs.disconnect();
                e.stopPropagation();
        });
                var value = input.value.trim();
        observer.observe(container, { childList: true, subtree: true });
                console.log('[QS] Form submit, value:', JSON.stringify(value));
        setTimeout(function () { observer.disconnect(); }, 10000);
                if (value) {
                    window.location.href = mw.util.getUrl(value);
                }
            });
 
            console.log('[QS] Debug setup complete. Type something and click a suggestion.');
            return true;
         }
 
        if (!trySetup()) {
            var observer = new MutationObserver(function (mutations, obs) {
                if (trySetup()) obs.disconnect();
            });
            observer.observe(container, { childList: true, subtree: true });
            setTimeout(function () { observer.disconnect(); }, 10000);
        }
     }
     }


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