Tag 1.1.0

tags/1.1.0/js/place-select.js

@@ -0,0 +1,180 @@
+jQuery( function($) {
+
+  // wc_city_select_params is required to continue, ensure the object exists
+  // wc_country_select_params is used for select2 texts. This one is added by WC
+  if ( typeof wc_country_select_params === 'undefined' || typeof wc_city_select_params === 'undefined' ) {
+    return false;
+  }
+
+  function getEnhancedSelectFormatString() {
+    var formatString = {
+      formatMatches: function( matches ) {
+        if ( 1 === matches ) {
+          return wc_country_select_params.i18n_matches_1;
+        }
+
+        return wc_country_select_params.i18n_matches_n.replace( '%qty%', matches );
+      },
+      formatNoMatches: function() {
+        return wc_country_select_params.i18n_no_matches;
+      },
+      formatAjaxError: function() {
+        return wc_country_select_params.i18n_ajax_error;
+      },
+      formatInputTooShort: function( input, min ) {
+        var number = min - input.length;
+
+        if ( 1 === number ) {
+          return wc_country_select_params.i18n_input_too_short_1;
+        }
+
+        return wc_country_select_params.i18n_input_too_short_n.replace( '%qty%', number );
+      },
+      formatInputTooLong: function( input, max ) {
+        var number = input.length - max;
+
+        if ( 1 === number ) {
+          return wc_country_select_params.i18n_input_too_long_1;
+        }
+
+        return wc_country_select_params.i18n_input_too_long_n.replace( '%qty%', number );
+      },
+      formatSelectionTooBig: function( limit ) {
+        if ( 1 === limit ) {
+          return wc_country_select_params.i18n_selection_too_long_1;
+        }
+
+        return wc_country_select_params.i18n_selection_too_long_n.replace( '%qty%', limit );
+      },
+      formatLoadMore: function() {
+        return wc_country_select_params.i18n_load_more;
+      },
+      formatSearching: function() {
+        return wc_country_select_params.i18n_searching;
+      }
+    };
+
+    return formatString;
+  }
+
+  // Select2 Enhancement if it exists
+  if ( $().select2 ) {
+    var wc_city_select_select2 = function() {
+      $( 'select.city_select:visible' ).each( function() {
+        var select2_args = $.extend({
+          placeholderOption: 'first',
+          width: '100%'
+        }, getEnhancedSelectFormatString() );
+
+        $( this ).select2( select2_args );
+      });
+    };
+
+    wc_city_select_select2();
+
+    $( document.body ).bind( 'city_to_select', function() {
+      wc_city_select_select2();
+    });
+  }
+
+  /* City select boxes */
+  var cities_json = wc_city_select_params.cities.replace( /"/g, '"' );
+  var cities = $.parseJSON( cities_json );
+
+  $( 'body' ).on( 'country_to_state_changing', function(e, country, $container) {
+    var $statebox = $container.find( '#billing_state, #shipping_state, #calc_shipping_state' );
+    var state = $statebox.val();
+    $( document.body ).trigger( 'state_changing', [country, state, $container ] );
+  });
+
+  $( 'body' ).on( 'change', 'select.state_select, #calc_shipping_state', function() {
+    var $container = $( this ).closest( 'div' );
+    var country = $container.find( '#billing_country, #shipping_country, #calc_shipping_country' ).val();
+    var state = $( this ).val();
+
+    $( document.body ).trigger( 'state_changing', [country, state, $container ] );
+  });
+
+  $( 'body' ).on( 'state_changing', function(e, country, state, $container) {
+    var $citybox = $container.find( '#billing_city, #shipping_city, #calc_shipping_city' );
+
+    if ( cities[ country ] ) {
+      /* if the country has no states */
+      if( cities[country] instanceof Array) {
+        cityToSelect( $citybox, cities[ country ] );
+      } else if ( state ) {
+        if ( cities[ country ][ state ] ) {
+          cityToSelect( $citybox, cities[ country ][ state ] );
+        } else {
+          cityToInput( $citybox );
+        }
+      } else {
+        disableCity( $citybox );
+      }
+    } else {
+      cityToInput( $citybox );
+    }
+  });
+
+  /* Ajax replaces .cart_totals (child of .cart-collaterals) on shipping calculator */
+  if ( $( '.cart-collaterals' ).length && $( '#calc_shipping_state' ).length ) {
+    var calc_observer = new MutationObserver( function() {
+      $( '#calc_shipping_state' ).change();
+    });
+    calc_observer.observe( document.querySelector( '.cart-collaterals' ), { childList: true });
+  }
+
+  function cityToInput( $citybox ) {
+    if ( $citybox.is('input') ) {
+      $citybox.prop( 'disabled', false );
+      return;
+    }
+
+    var input_name = $citybox.attr( 'name' );
+    var input_id = $citybox.attr( 'id' );
+    var placeholder = $citybox.attr( 'placeholder' );
+
+    $citybox.parent().find( '.select2-container' ).remove();
+
+    $citybox.replaceWith( '<input type="text" class="input-text" name="' + input_name + '" id="' + input_id + '" placeholder="' + placeholder + '" />' );
+  }
+
+  function disableCity( $citybox ) {
+    $citybox.val( '' ).change();
+    $citybox.prop( 'disabled', true );
+  }
+
+  function cityToSelect( $citybox, current_cities ) {
+    var value = $citybox.val();
+
+    if ( $citybox.is('input') ) {
+      var input_name = $citybox.attr( 'name' );
+      var input_id = $citybox.attr( 'id' );
+      var placeholder = $citybox.attr( 'placeholder' );
+
+      $citybox.replaceWith( '<select name="' + input_name + '" id="' + input_id + '" class="city_select" placeholder="' + placeholder + '"></select>' );
+      //we have to assign the new object, because of replaceWith
+      $citybox = $('#'+input_id);
+    } else {
+      $citybox.prop( 'disabled', false );
+    }
+
+    var options = '';
+    for( var index in current_cities ) {
+      if ( current_cities.hasOwnProperty( index ) ) {
+        var cityName = current_cities[ index ];
+        options = options + '<option value="' + cityName + '">' + cityName + '</option>';
+      }
+    }
+
+    $citybox.html( '<option value="">' + wc_city_select_params.i18n_select_city_text + '</option>' + options );
+
+    if ( $('option[value="'+value+'"]', $citybox).length ) {
+      $citybox.val( value ).change();
+    } else {
+      $citybox.val( '' ).change();
+    }
+
+    $( document.body ).trigger( 'city_to_select' );
+  }
+});