EveryCRT Wiki

MediaWiki:Common.js: Difference between revisions

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


/**
/**
  * Quick Search — Navigate directly to wiki page
  * Quick Search — DEBUG v2
  * Intercepts the Page Forms #forminput inside #crt-quick-search so that
  * Focused on finding the right event for OOUI autocomplete selection
* clicking "Go" (or pressing Enter, or selecting an autocomplete suggestion)
* navigates to the wiki article instead of opening the form editor.
*
* Note: Page Forms creates the actual <input> element dynamically inside a
* .pfFormInputWrapper div, so we must wait for it to appear before attaching
* listeners.  PF uses jQuery UI Autocomplete, so we hook into its "select"
* event to navigate immediately when a suggestion is clicked.
  */
  */
(function () {
(function () {
Line 243: Line 236:
     if (mw.config.get('wgPageName') !== 'Main_Page') return;
     if (mw.config.get('wgPageName') !== 'Main_Page') return;


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


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


         var $input = $(input);
         // Wait for OOUI to create the input
        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;


        // Intercept form submission (Enter key / Go button)
            console.log('[QS] Found input:', input, 'classes:', input.className);
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            goToPage(input.value);
        });


        // Hook into jQuery UI Autocomplete's "select" event.
            // Log ALL events on the input to find the right one
        // PF may attach autocomplete after our code, so we try now and
             ['change', 'input', 'blur', 'focus', 'select'].forEach(function (evt) {
        // also poll briefly until the widget is available.
                 input.addEventListener(evt, function (e) {
        function hookAutocomplete() {
                     console.log('[QS] Native event:', evt, '| value:', JSON.stringify(input.value));
             if ($input.data('ui-autocomplete') || $input.data('autocomplete')) {
                 $input.on('autocompleteselect', function (event, ui) {
                     // ui.item.value is the selected suggestion text
                    var selected = (ui && ui.item) ? ui.item.value : input.value;
                    // Prevent PF from processing its own handler first
                    setTimeout(function () { goToPage(selected); }, 0);
                 });
                 });
                return true;
            });
             }
 
             return false;
            // jQuery events that PF/OOUI might use
        }
             var $input = $(input);
             $input.on('change input blur select autocompleteselect autocompleteclose pfautocomplete', function (e) {
                console.log('[QS] jQuery event:', e.type, '| value:', JSON.stringify(input.value));
            });


        if (!hookAutocomplete()) {
             // Look for OOUI widget instance
             // Autocomplete widget not ready yet — poll for it
             var $wrapper = $(container).find('.pfFormInputWrapper');
            var attempts = 0;
             console.log('[QS] pfFormInputWrapper:', $wrapper.length ? $wrapper[0] : 'not found');
             var poll = setInterval(function () {
                attempts++;
                if (hookAutocomplete() || attempts > 50) {
                    clearInterval(poll);
                }
             }, 200);
        }


        // Also listen for pfautocomplete (some PF versions fire this)
            // Check if there's an OOUI widget attached
        $input.on('pfautocomplete', function () {
            var widget = OO && OO.ui ? OO.ui.infuse && $wrapper.find('.oo-ui-widget')[0] : null;
             setTimeout(function () { goToPage(input.value); }, 50);
             console.log('[QS] OO.ui available:', typeof OO !== 'undefined' && !!OO.ui);
        });


        return true;
            // Use event delegation to catch clicks on autocomplete menu items
    }
            // OOUI menus are often appended to <body>, not inside the container
            $(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);
            });


    function init() {
            // Also watch for any new elements appearing (the dropdown)
        var container = document.getElementById('crt-quick-search');
            console.log('[QS] Searching for any autocomplete-related elements...');
        if (!container) return;
            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);


        var form = container.querySelector('form');
            // Form submit still works
        if (!form) return;
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                e.stopPropagation();
                var value = input.value.trim();
                console.log('[QS] Form submit, value:', JSON.stringify(value));
                if (value) {
                    window.location.href = mw.util.getUrl(value);
                }
            });


        if (setup(container, form)) return;
            console.log('[QS] Debug setup complete. Type something and click a suggestion.');
            return true;
        }


         // Watch for PF to inject the <input> dynamically
         if (!trySetup()) {
        var observer = new MutationObserver(function (mutations, obs) {
            var observer = new MutationObserver(function (mutations, obs) {
            if (setup(container, form)) {
                if (trySetup()) obs.disconnect();
                obs.disconnect();
             });
             }
            observer.observe(container, { childList: true, subtree: true });
        });
            setTimeout(function () { observer.disconnect(); }, 10000);
        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