Файловый менеджер

Файловый менеджер - Редактировать - /home/harasnat/www/horse/wp-content/plugins/woocommerce/assets/js/frontend/address-autocomplete.js

Назад
/** * Address provider registration for WooCommerce shortcode checkout / // Make functions and state available globally under window.wc.addressAutocomplete window.wc = window.wc \|\| {}; window.wc.addressAutocomplete = window.wc.addressAutocomplete \|\| { providers: {}, activeProvider: { billing: null, shipping: null }, }; /* * Register an address autocomplete provider * * @param {Object} provider The provider object * @return {boolean} Whether the registration was successful / function registerAddressAutocompleteProvider( provider ) { try { // Check required properties if ( ! provider \|\| typeof provider !== 'object' ) { throw new Error( 'Address provider must be a valid object' ); } if ( ! provider.id \|\| typeof provider.id !== 'string' ) { throw new Error( 'Address provider must have a valid ID' ); } if ( typeof provider.canSearch !== 'function' ) { throw new Error( 'Address provider must have a canSearch function' ); } if ( typeof provider.search !== 'function' ) { throw new Error( 'Address provider must have a search function' ); } if ( typeof provider.select !== 'function' ) { throw new Error( 'Address provider must have a select function' ); } // Check if provider is registered on server. var serverProviders = []; if ( window && window.wc_checkout_params && Array.isArray( window.wc_checkout_params.address_providers ) && window.wc_checkout_params.address_providers.length > 0 ) { serverProviders = window.wc_checkout_params.address_providers; } if ( ! Array.isArray( serverProviders ) ) { throw new Error( 'Server providers configuration is invalid' ); } var isRegistered = serverProviders.some( function ( serverProvider ) { return ( serverProvider && typeof serverProvider === 'object' && typeof serverProvider.id === 'string' && serverProvider.id === provider.id ); } ); if ( ! isRegistered ) { throw new Error( 'Provider ' + provider.id + ' not registered on server' ); } // Check if a provider with the same ID already exists if ( window.wc.addressAutocomplete.providers[ provider.id ] ) { console.warn( 'Address provider with ID "' + provider.id + '" is already registered.' ); return false; } // Freeze and add provider to registry. Object.freeze( provider ); window.wc.addressAutocomplete.providers[ provider.id ] = provider; return true; } catch ( error ) { console.error( 'Error registering address provider:', error.message ); return false; } } // Export the registration function window.wc.addressAutocomplete.registerAddressAutocompleteProvider = registerAddressAutocompleteProvider; ( function () { /* * Set the active address provider based on which providers' (queried in order) canSearch returns true. * Triggers when country changes. * @param country {string} country code. * @param type {string} type 'billing' or 'shipping' / function setActiveProvider( country, type ) { // Get server providers list (already ordered by preference). const serverProviders = ( window && window.wc_checkout_params && window.wc_checkout_params.address_providers ) \|\| []; // Check providers in preference order (server handles preferred provider ordering). for ( const serverProvider of serverProviders ) { const provider = window.wc.addressAutocomplete.providers[ serverProvider.id ]; if ( provider && provider.canSearch( country ) ) { window.wc.addressAutocomplete.activeProvider[ type ] = provider; // Add autocomplete-available class to parent .woocommerce-input-wrapper const addressInput = document.getElementById( `${ type }_address_1` ); if ( addressInput ) { const wrapper = addressInput.closest( '.woocommerce-input-wrapper' ); if ( wrapper ) { wrapper.classList.add( 'autocomplete-available' ); } } return; } } // No provider can search for this country. window.wc.addressAutocomplete.activeProvider[ type ] = null; // Remove autocomplete-available class from parent .woocommerce-input-wrapper const addressInput = document.getElementById( `${ type }_address_1` ); if ( addressInput ) { const wrapper = addressInput.closest( '.woocommerce-input-wrapper' ); if ( wrapper ) { wrapper.classList.remove( 'autocomplete-available' ); } } } document.addEventListener( 'DOMContentLoaded', function () { // This script would not be enqueued if the feature was not enabled. const addressTypes = [ 'billing', 'shipping' ]; const addressInputs = {}; const suggestionsContainers = {}; const suggestionsLists = {}; let activeSuggestionIndices = {}; let addressSelectionTimeout; const blurHandlers = {}; /* * Cache address fields for a given type, will re-run when country changes. * @param type * @return {{address_2: HTMLElement, city: HTMLElement, country: HTMLElement, postcode: HTMLElement}} / function cacheAddressFields( type ) { addressInputs[ type ] = {}; addressInputs[ type ][ 'address_1' ] = document.getElementById( `${ type }_address_1` ); addressInputs[ type ][ 'city' ] = document.getElementById( `${ type }_city` ); addressInputs[ type ][ 'country' ] = document.getElementById( `${ type }_country` ); addressInputs[ type ][ 'postcode' ] = document.getElementById( `${ type }_postcode` ); addressInputs[ type ][ 'state' ] = document.getElementById( `${ type }_state` ); } // Initialize for both billing and shipping. addressTypes.forEach( ( type ) => { cacheAddressFields( type ); const addressInput = addressInputs[ type ][ 'address_1' ]; const cityInput = addressInputs[ type ][ 'city' ]; const countryInput = addressInputs[ type ][ 'country' ]; const postcodeInput = addressInputs[ type ][ 'postcode' ]; if ( addressInput ) { // Create suggestions container if it doesn't exist. if ( ! document.getElementById( `address_suggestions_${ type }` ) ) { const container = document.createElement( 'div' ); container.id = `address_suggestions_${ type }`; container.className = 'woocommerce-address-suggestions'; container.style.display = 'none'; container.setAttribute( 'role', 'region' ); container.setAttribute( 'aria-live', 'polite' ); const list = document.createElement( 'ul' ); list.className = 'suggestions-list'; list.setAttribute( 'role', 'listbox' ); list.setAttribute( 'aria-label', 'Address suggestions' ); container.appendChild( list ); addressInput.parentNode.insertBefore( container, addressInput.nextSibling ); // Add search icon. const searchIcon = document.createElement( 'div' ); searchIcon.className = 'address-search-icon'; addressInput.parentNode.appendChild( searchIcon ); } addressInputs[ type ] = {}; addressInputs[ type ][ 'address_1' ] = addressInput; addressInputs[ type ][ 'city' ] = cityInput; addressInputs[ type ][ 'country' ] = countryInput; addressInputs[ type ][ 'postcode' ] = postcodeInput; suggestionsContainers[ type ] = document.getElementById( `address_suggestions_${ type }` ); suggestionsLists[ type ] = suggestionsContainers[ type ].querySelector( '.suggestions-list' ); activeSuggestionIndices[ type ] = -1; } // Get country value and set active address provider based on it. if ( countryInput ) { setActiveProvider( countryInput.value, type ); /* * Listen for country changes to re-evaluate provider availability. * Handle both regular change events and Select2 events. / const handleCountryChange = function () { cacheAddressFields( type ); setActiveProvider( countryInput.value, type ); if ( addressInputs[ type ][ 'address_1' ] ) { hideSuggestions( type ); } }; countryInput.addEventListener( 'change', handleCountryChange ); // Also listen for Select2 change event if jQuery and Select2 are available. if ( window.jQuery && window.jQuery( countryInput ).select2 ) { window .jQuery( countryInput ) .on( 'select2:select', handleCountryChange ); } } } ); /* * Disable browser autofill for address inputs to prevent conflicts with autocomplete. * @param input {HTMLInputElement} The input element to disable autofill for. / function disableBrowserAutofill( input ) { if ( input.getAttribute( 'autocomplete' ) === 'off' ) { return; } input.setAttribute( 'autocomplete', 'off' ); input.setAttribute( 'data-lpignore', 'true' ); input.setAttribute( 'data-op-ignore', 'true' ); input.setAttribute( 'data-1p-ignore', 'true' ); // To prevent 1Password/LastPass and autocomplete clashes, we need to refocus the element. // This is achieved by removing and re-adding the element to trigger browser updates. const parentElement = input.parentElement; if ( parentElement ) { parentElement.appendChild( parentElement.removeChild( input ) ); input.focus(); } } /* * Enable browser autofill for address input. * @param input {HTMLInputElement} The input element to enable autofill for. * @param shouldFocus {boolean} Whether to focus the input after enabling autofill. / function enableBrowserAutofill( input, shouldFocus = true ) { if ( input.getAttribute( 'autocomplete' ) !== 'off' ) { return; } input.setAttribute( 'autocomplete', 'address-line1' ); input.setAttribute( 'data-lpignore', 'false' ); input.setAttribute( 'data-op-ignore', 'false' ); input.setAttribute( 'data-1p-ignore', 'false' ); // To ensure browser updates and re-enables autofill, we need to refocus the element. // This is achieved by removing and re-adding the element to trigger browser updates. const parentElement = input.parentElement; if ( parentElement ) { parentElement.appendChild( parentElement.removeChild( input ) ); if ( shouldFocus ) { input.focus(); } } } /* * Get highlighted label parts based on matches returned by `search` results. * @param label {string} The label to highlight. * @param matches {[]} Array of match objects with `offset` and `length`. @return {[]} Array of nodes with highlighted parts. / function getHighlightedLabel( label, matches ) { // Sanitize label for display. const sanitizedLabel = sanitizeForDisplay( label ); const parts = []; let lastIndex = 0; // Validate matches array. if ( ! Array.isArray( matches ) ) { // If matches is invalid, just return plain text. parts.push( document.createTextNode( sanitizedLabel ) ); return parts; } // Validate matches. const safeMatches = matches.filter( ( match ) => match && typeof match.offset === 'number' && typeof match.length === 'number' && match.offset >= 0 && match.length > 0 && match.offset + match.length <= sanitizedLabel.length ); safeMatches.forEach( ( match ) => { // Add text before match. if ( match.offset > lastIndex ) { parts.push( document.createTextNode( sanitizedLabel.slice( lastIndex, match.offset ) ) ); } // Add bold matched text. const bold = document.createElement( 'strong' ); bold.textContent = sanitizedLabel.slice( match.offset, match.offset + match.length ); parts.push( bold ); lastIndex = match.offset + match.length; } ); // Add remaining text. if ( lastIndex < sanitizedLabel.length ) { parts.push( document.createTextNode( sanitizedLabel.slice( lastIndex ) ) ); } return parts; } /** * Sanitize HTML for display by removing any HTML tags. * * @param html * @return {string\|string} / function sanitizeForDisplay( html ) { const doc = document.implementation.createHTMLDocument( '' ); doc.body.innerHTML = html; return doc.body.textContent \|\| ''; } /* * Handle searching and displaying autocomplete results below the address input if the value meets the criteria * of 3 or more characters. No suggestion is initially highlighted. * @param inputValue {string} The value entered into the address input. * @param country {string} The country code to pass to the provider's search method. * @param type {string} The address type ('billing' or 'shipping'). * @return {Promise<void>} / async function displaySuggestions( inputValue, country, type ) { // Sanitize input value. const sanitizedInput = sanitizeForDisplay( inputValue ); if ( sanitizedInput !== inputValue ) { console.warn( 'Input was sanitized for security' ); } // Check if the address section exists (shipping may be disabled/hidden) if ( ! addressInputs[ type ] \|\| ! addressInputs[ type ][ 'address_1' ] ) { return; } if ( ! suggestionsLists[ type ] \|\| ! suggestionsContainers[ type ] ) { return; } const addressInput = addressInputs[ type ][ 'address_1' ]; const suggestionsList = suggestionsLists[ type ]; const suggestionsContainer = suggestionsContainers[ type ]; // Hide suggestions if input has less than 3 characters if ( sanitizedInput.length < 3 ) { hideSuggestions( type ); enableBrowserAutofill( addressInput ); return; } // Check if we have an active provider for this address type. if ( ! window.wc.addressAutocomplete.activeProvider[ type ] ) { hideSuggestions( type ); enableBrowserAutofill( addressInput ); return; } try { const filteredSuggestions = await window.wc.addressAutocomplete.activeProvider[ type ].search( sanitizedInput, country, type ); // Validate suggestions array. if ( ! Array.isArray( filteredSuggestions ) ) { console.error( 'Invalid suggestions response - not an array' ); hideSuggestions( type ); return; } // Limit number of suggestions, API may return many results but we should only show the first 5. const maxSuggestions = 5; const safeSuggestions = filteredSuggestions.slice( 0, maxSuggestions ); if ( safeSuggestions.length === 0 ) { hideSuggestions( type ); return; } // Clear existing suggestions only when we have new results to show. suggestionsList.innerHTML = ''; safeSuggestions.forEach( ( suggestion, index ) => { const li = document.createElement( 'li' ); li.setAttribute( 'role', 'option' ); li.id = `suggestion-item-${ type }-${ index }`; li.dataset.id = suggestion.id; li.setAttribute( 'tabindex', '-1' ); li.textContent = ''; // Clear existing content. const labelParts = getHighlightedLabel( suggestion.label, suggestion.matchedSubstrings \|\| [] ); labelParts.forEach( ( part ) => li.appendChild( part ) ); li.addEventListener( 'click', async function () { // Hide suggestions immediately for better UX. hideSuggestions( type ); await selectAddress( type, this.dataset.id ); addressInput.focus(); } ); li.addEventListener( 'mouseenter', function () { setActiveSuggestion( type, index ); } ); suggestionsList.appendChild( li ); } ); disableBrowserAutofill( addressInput ); suggestionsContainer.style.display = 'block'; suggestionsContainer.style.marginTop = addressInputs[ type ][ 'address_1' ].offsetHeight + 'px'; addressInput.setAttribute( 'aria-expanded', 'true' ); addressInput.setAttribute( 'aria-owns', `address_suggestions_${ type }_list` ); suggestionsList.id = `address_suggestions_${ type }_list`; // Don't auto-highlight first suggestion for better screen reader accessibility activeSuggestionIndices[ type ] = -1; // Add blur event listener when suggestions are shown if ( ! blurHandlers[ type ] ) { blurHandlers[ type ] = function () { // Use a small delay to allow clicks on suggestions to register setTimeout( () => { hideSuggestions( type ); enableBrowserAutofill( addressInput, false ); }, 200 ); }; addressInput.addEventListener( 'blur', blurHandlers[ type ] ); } } catch ( error ) { console.error( 'Address search error:', error ); hideSuggestions( type ); enableBrowserAutofill( addressInput ); } } /* * Hide the suggestions container for a given address type. * @param type {string} The address type ('billing' or 'shipping'). / function hideSuggestions( type ) { // Check if the address section exists (shipping may be disabled/hidden) if ( ! addressInputs[ type ] \|\| ! addressInputs[ type ][ 'address_1' ] ) { return; } if ( ! suggestionsLists[ type ] \|\| ! suggestionsContainers[ type ] ) { return; } const suggestionsList = suggestionsLists[ type ]; const suggestionsContainer = suggestionsContainers[ type ]; const addressInput = addressInputs[ type ][ 'address_1' ]; suggestionsList.innerHTML = ''; suggestionsContainer.style.display = 'none'; addressInput.setAttribute( 'aria-expanded', 'false' ); addressInput.removeAttribute( 'aria-activedescendant' ); addressInput.removeAttribute( 'aria-owns' ); activeSuggestionIndices[ type ] = -1; // Remove blur event listener when suggestions are hidden if ( blurHandlers[ type ] ) { addressInput.removeEventListener( 'blur', blurHandlers[ type ] ); delete blurHandlers[ type ]; } } /* * Helper function to set field value and trigger events. * @param input {HTMLInputElement} The input element to set the value for. * @param value {string} The value to set. / const setFieldValue = ( input, value ) => { if ( input ) { input.value = value; input.dispatchEvent( new Event( 'change' ) ); // Also trigger Select2 update if it's a Select2 field. if ( window.jQuery && window .jQuery( input ) .hasClass( 'select2-hidden-accessible' ) ) { window.jQuery( input ).trigger( 'change' ); } } }; /* * Select an address from the suggestions list and submit it to the provider's `select` method. * @param type {string} The address type ('billing' or 'shipping'). * @param addressId {string} The ID of the address to select. * @return {Promise<void>} / async function selectAddress( type, addressId ) { let addressData; try { addressData = await window.wc.addressAutocomplete.activeProvider[ type ].select( addressId ); } catch ( error ) { console.error( 'Error selecting address from provider', window.wc.addressAutocomplete.activeProvider[ type ].id, error ); return; // Exit early if address selection fails. } if ( typeof addressData !== 'object' \|\| addressData === null \|\| ! addressData ) { // Return without setting the address since response was invalid. return; } if ( addressData.country ) { setFieldValue( addressInputs[ type ][ 'country' ], addressData.country ); } if ( addressData.address_1 ) { setFieldValue( addressInputs[ type ][ 'address_1' ], addressData.address_1 ); } // Note: Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown. if ( addressSelectionTimeout ) { clearTimeout( addressSelectionTimeout ); } addressSelectionTimeout = setTimeout( function () { // Cache address fields again as they may have updated following the country change. cacheAddressFields( type ); // Set all available fields. // Only set fields if the address data property exists and has a value. if ( addressData.address_2 ) { setFieldValue( addressInputs[ type ][ 'address_2' ], addressData.address_2 ); } if ( addressData.city ) { setFieldValue( addressInputs[ type ][ 'city' ], addressData.city ); } if ( addressData.postcode ) { setFieldValue( addressInputs[ type ][ 'postcode' ], addressData.postcode ); } if ( addressData.state ) { setFieldValue( addressInputs[ type ][ 'state' ], addressData.state ); } }, 50 ); } /* * Set the active suggestion in the suggestions list, highlights it. * @param type {string} The address type ('billing' or 'shipping'). * @param index {number} The index of the suggestion to set as active. */ function setActiveSuggestion( type, index ) { // Check if the address section exists (shipping may be disabled/hidden) if ( ! addressInputs[ type ] \|\| ! addressInputs[ type ][ 'address_1' ] ) { return; } if ( ! suggestionsLists[ type ] ) { return; } const suggestionsList = suggestionsLists[ type ]; const addressInput = addressInputs[ type ][ 'address_1' ]; const activeLi = suggestionsList.querySelector( 'li.active' ); if ( activeLi ) { activeLi.classList.remove( 'active' ); activeLi.setAttribute( 'aria-selected', 'false' ); } const newActiveLi = suggestionsList.querySelector( `li#suggestion-item-${ type }-${ index }` ); if ( newActiveLi ) { newActiveLi.classList.add( 'active' ); newActiveLi.setAttribute( 'aria-selected', 'true' ); addressInput.setAttribute( 'aria-activedescendant', newActiveLi.id ); activeSuggestionIndices[ type ] = index; } } // Initialize event handlers for each address type. addressTypes.forEach( ( type ) => { const addressInput = addressInputs[ type ][ 'address_1' ]; const countryInput = addressInputs[ type ][ 'country' ]; if ( addressInput && countryInput ) { addressInput.addEventListener( 'input', function () { displaySuggestions( this.value, countryInput.value, type ); } ); addressInput.addEventListener( 'keydown', async function ( e ) { // Check if suggestions exist before accessing them if ( ! suggestionsLists[ type ] \|\| ! suggestionsContainers[ type ] ) { return; } const items = suggestionsLists[ type ].querySelectorAll( 'li' ); if ( items.length === 0 \|\| suggestionsContainers[ type ].style.display === 'none' ) { return; } let newIndex = activeSuggestionIndices[ type ]; if ( e.key === 'ArrowDown' ) { e.preventDefault(); newIndex = ( activeSuggestionIndices[ type ] + 1 ) % items.length; setActiveSuggestion( type, newIndex ); } else if ( e.key === 'ArrowUp' ) { e.preventDefault(); newIndex = ( activeSuggestionIndices[ type ] - 1 + items.length ) % items.length; setActiveSuggestion( type, newIndex ); } else if ( e.key === 'Enter' ) { if ( activeSuggestionIndices[ type ] > -1 ) { e.preventDefault(); const selectedItem = suggestionsLists[ type ].querySelector( `li#suggestion-item-${ type }-${ activeSuggestionIndices[ type ] }` ); // Hide suggestions immediately for better UX. hideSuggestions( type ); enableBrowserAutofill( addressInput ); await selectAddress( type, selectedItem.dataset.id ); } } else if ( e.key === 'Escape' ) { hideSuggestions( type ); enableBrowserAutofill( addressInput ); } } ); } } ); // Hide suggestions when clicking outside. document.addEventListener( 'click', function ( event ) { addressTypes.forEach( ( type ) => { // Check if the address section exists before accessing elements if ( ! addressInputs[ type ] \|\| ! addressInputs[ type ][ 'address_1' ] ) { return; } if ( ! suggestionsContainers[ type ] ) { return; } const target = event.target; if ( target !== suggestionsContainers[ type ] && ! suggestionsContainers[ type ].contains( target ) && target !== addressInputs[ type ][ 'address_1' ] ) { hideSuggestions( type ); } } ); } ); } ); } )();

| ver. 1.4 | Github | .