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( | function goToPage(value) { | ||
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) { | ||
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); | ||
}); | }); | ||
// | // 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; | ||
if (setup(container, form)) return; | if (setup(container, form)) return; | ||
// | // 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 }); | ||
setTimeout(function () { observer.disconnect(); }, 10000); | setTimeout(function () { observer.disconnect(); }, 10000); | ||
} | } | ||