MediaWiki:Common.js: Difference between revisions

No edit summary
No edit summary
Line 235: Line 235:
  * Note: Page Forms creates the actual <input> element dynamically inside a
  * Note: Page Forms creates the actual <input> element dynamically inside a
  * .pfFormInputWrapper div, so we must wait for it to appear before attaching
  * .pfFormInputWrapper div, so we must wait for it to appear before attaching
  * listeners.
  * listeners.  PF uses jQuery UI Autocomplete, so we hook into its "select"
* event to navigate immediately when a suggestion is clicked.
  */
  */
(function () {
(function () {
Line 242: Line 243:
     if (mw.config.get('wgPageName') !== 'Main_Page') return;
     if (mw.config.get('wgPageName') !== 'Main_Page') return;


     function goToPage(input) {
     function goToPage(value) {
         var value = input.value.trim();
         value = $.trim(value);
         if (value) {
         if (value) {
             window.location.href = mw.util.getUrl(value);
             window.location.href = mw.util.getUrl(value);
Line 250: Line 251:


     function setup(container, form) {
     function setup(container, form) {
        // The actual text input created by Page Forms inside .pfFormInputWrapper
         var input = container.querySelector('.pfFormInputWrapper input[type="text"], .pfFormInputWrapper input:not([type="hidden"])');
         var input = container.querySelector('.pfFormInputWrapper input[type="text"], .pfFormInputWrapper input:not([type="hidden"])');
         if (!input) return false;
         if (!input) return false;
        var $input = $(input);


         // Intercept form submission (Enter key / Go button)
         // Intercept form submission (Enter key / Go button)
Line 258: Line 260:
             e.preventDefault();
             e.preventDefault();
             e.stopPropagation();
             e.stopPropagation();
             goToPage(input);
             goToPage(input.value);
         });
         });


         // Navigate immediately when an autocomplete suggestion is selected
         // Hook into jQuery UI Autocomplete's "select" event.
         $(input).on('pfautocomplete', function () {
        // PF may attach autocomplete after our code, so we try now and
             setTimeout(function () { goToPage(input); }, 50);
        // also poll briefly until the widget is available.
         function hookAutocomplete() {
            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;
        }
 
        if (!hookAutocomplete()) {
            // Autocomplete widget not ready yet — poll for it
            var attempts = 0;
            var poll = setInterval(function () {
                attempts++;
                if (hookAutocomplete() || attempts > 50) {
                    clearInterval(poll);
                }
            }, 200);
        }
 
        // Also listen for pfautocomplete (some PF versions fire this)
        $input.on('pfautocomplete', function () {
             setTimeout(function () { goToPage(input.value); }, 50);
         });
         });


Line 276: Line 305:
         if (!form) return;
         if (!form) return;


        // Try immediately — if PF has already initialized, we're done
         if (setup(container, form)) return;
         if (setup(container, form)) return;


         // Otherwise watch for PF to inject the <input> dynamically
         // Watch for PF to inject the <input> dynamically
         var observer = new MutationObserver(function (mutations, obs) {
         var observer = new MutationObserver(function (mutations, obs) {
             if (setup(container, form)) {
             if (setup(container, form)) {
Line 286: Line 314:
         });
         });
         observer.observe(container, { childList: true, subtree: true });
         observer.observe(container, { childList: true, subtree: true });
        // Safety timeout: stop observing after 10s
         setTimeout(function () { observer.disconnect(); }, 10000);
         setTimeout(function () { observer.disconnect(); }, 10000);
     }
     }
MediaWiki Appliance - Powered by TurnKey Linux