country-select.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. /*global wc_country_select_params */
  2. jQuery( function( $ ) {
  3. // wc_country_select_params is required to continue, ensure the object exists
  4. if ( typeof wc_country_select_params === 'undefined' ) {
  5. return false;
  6. }
  7. function getEnhancedSelectFormatString() {
  8. return {
  9. 'language': {
  10. errorLoading: function() {
  11. // Workaround for https://github.com/select2/select2/issues/4355 instead of i18n_ajax_error.
  12. return wc_country_select_params.i18n_searching;
  13. },
  14. inputTooLong: function( args ) {
  15. var overChars = args.input.length - args.maximum;
  16. if ( 1 === overChars ) {
  17. return wc_country_select_params.i18n_input_too_long_1;
  18. }
  19. return wc_country_select_params.i18n_input_too_long_n.replace( '%qty%', overChars );
  20. },
  21. inputTooShort: function( args ) {
  22. var remainingChars = args.minimum - args.input.length;
  23. if ( 1 === remainingChars ) {
  24. return wc_country_select_params.i18n_input_too_short_1;
  25. }
  26. return wc_country_select_params.i18n_input_too_short_n.replace( '%qty%', remainingChars );
  27. },
  28. loadingMore: function() {
  29. return wc_country_select_params.i18n_load_more;
  30. },
  31. maximumSelected: function( args ) {
  32. if ( args.maximum === 1 ) {
  33. return wc_country_select_params.i18n_selection_too_long_1;
  34. }
  35. return wc_country_select_params.i18n_selection_too_long_n.replace( '%qty%', args.maximum );
  36. },
  37. noResults: function() {
  38. return wc_country_select_params.i18n_no_matches;
  39. },
  40. searching: function() {
  41. return wc_country_select_params.i18n_searching;
  42. }
  43. }
  44. };
  45. }
  46. // Select2 Enhancement if it exists
  47. if ( $().selectWoo ) {
  48. var wc_country_select_select2 = function() {
  49. $( 'select.country_select:visible, select.state_select:visible' ).each( function() {
  50. var select2_args = $.extend({
  51. placeholderOption: 'first',
  52. width: '100%'
  53. }, getEnhancedSelectFormatString() );
  54. $( this ).selectWoo( select2_args );
  55. // Maintain focus after select https://github.com/select2/select2/issues/4384
  56. $( this ).on( 'select2:select', function() {
  57. $( this ).focus();
  58. } );
  59. });
  60. };
  61. wc_country_select_select2();
  62. $( document.body ).bind( 'country_to_state_changed', function() {
  63. wc_country_select_select2();
  64. });
  65. }
  66. /* State/Country select boxes */
  67. var states_json = wc_country_select_params.countries.replace( /"/g, '"' ),
  68. states = $.parseJSON( states_json );
  69. $( document.body ).on( 'change', 'select.country_to_state, input.country_to_state', function() {
  70. // Grab wrapping element to target only stateboxes in same 'group'
  71. var $wrapper = $( this ).closest('.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-shipping-calculator');
  72. if ( ! $wrapper.length ) {
  73. $wrapper = $( this ).closest('.form-row').parent();
  74. }
  75. var country = $( this ).val(),
  76. $statebox = $wrapper.find( '#billing_state, #shipping_state, #calc_shipping_state' ),
  77. $parent = $statebox.closest( 'p.form-row' ),
  78. input_name = $statebox.attr( 'name' ),
  79. input_id = $statebox.attr( 'id' ),
  80. value = $statebox.val(),
  81. placeholder = $statebox.attr( 'placeholder' ) || $statebox.attr( 'data-placeholder' ) || '';
  82. if ( states[ country ] ) {
  83. if ( $.isEmptyObject( states[ country ] ) ) {
  84. $statebox.closest( 'p.form-row' ).hide().find( '.select2-container' ).remove();
  85. $statebox.replaceWith( '<input type="hidden" class="hidden" name="' + input_name + '" id="' + input_id + '" value="" placeholder="' + placeholder + '" />' );
  86. $( document.body ).trigger( 'country_to_state_changed', [ country, $wrapper ] );
  87. } else {
  88. var options = '',
  89. state = states[ country ];
  90. for( var index in state ) {
  91. if ( state.hasOwnProperty( index ) ) {
  92. options = options + '<option value="' + index + '">' + state[ index ] + '</option>';
  93. }
  94. }
  95. $statebox.closest( 'p.form-row' ).show();
  96. if ( $statebox.is( 'input' ) ) {
  97. // Change for select
  98. $statebox.replaceWith( '<select name="' + input_name + '" id="' + input_id + '" class="state_select" data-placeholder="' + placeholder + '"></select>' );
  99. $statebox = $wrapper.find( '#billing_state, #shipping_state, #calc_shipping_state' );
  100. }
  101. $statebox.html( '<option value="">' + wc_country_select_params.i18n_select_state_text + '</option>' + options );
  102. $statebox.val( value ).change();
  103. $( document.body ).trigger( 'country_to_state_changed', [country, $wrapper ] );
  104. }
  105. } else {
  106. if ( $statebox.is( 'select' ) ) {
  107. $parent.show().find( '.select2-container' ).remove();
  108. $statebox.replaceWith( '<input type="text" class="input-text" name="' + input_name + '" id="' + input_id + '" placeholder="' + placeholder + '" />' );
  109. $( document.body ).trigger( 'country_to_state_changed', [country, $wrapper ] );
  110. } else if ( $statebox.is( 'input[type="hidden"]' ) ) {
  111. $parent.show().find( '.select2-container' ).remove();
  112. $statebox.replaceWith( '<input type="text" class="input-text" name="' + input_name + '" id="' + input_id + '" placeholder="' + placeholder + '" />' );
  113. $( document.body ).trigger( 'country_to_state_changed', [country, $wrapper ] );
  114. }
  115. }
  116. $( document.body ).trigger( 'country_to_state_changing', [country, $wrapper ] );
  117. });
  118. $(function() {
  119. $( ':input.country_to_state' ).change();
  120. });
  121. });