Merge 9240287 into f1ff84e

WcaOnRails/Gemfile

@@ -78,7 +78,6 @@ gem 'enum_help'
 
 source 'https://rails-assets.org' do
   gem 'rails-assets-autosize'
-  gem 'rails-assets-autoNumeric', '~> 2' # TODO: See https://github.com/thewca/worldcubeassociation.org/issues/1900
 end
 
 group :development, :test do

WcaOnRails/Gemfile.lock

@@ -361,7 +361,6 @@ GEM
       bundler (>= 1.3.0)
       railties (= 5.1.4)
       sprockets-rails (>= 2.0.0)
-    rails-assets-autoNumeric (2.0.13)
     rails-assets-autosize (4.0.0)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
@@ -583,7 +582,6 @@ DEPENDENCIES
   premailer-rails
   rack-cors
   rails
-  rails-assets-autoNumeric (~> 2)!
   rails-assets-autosize!
   rails-controller-testing
   rails-i18n

WcaOnRails/app/assets/javascripts/application.js

@@ -49,9 +49,6 @@
 //= require extensions/bootstrap-table-mobile
 //= require autosize
 //= require jquery_plugins
-//= require autoNumeric
-//= require currencies-data
-//= require currencies
 //= require jquery.slick
 //= require_self
 //= require_tree .
@@ -225,9 +222,6 @@ $(function() {
   $('[data-toggle="popover"]').popover();
   $('input.wca-autocomplete').wcaAutocomplete();
 
-  // Activate currency masks for the relevant fields
-  $('input.wca-currency-mask').wcaSetupCurrencyMask();
-
   var $tablesToFloatHeaders = $('table.floatThead');
   $tablesToFloatHeaders.floatThead({
     zIndex: 999, // Allow bootstrap popups (z-index 1000) to show up on top.

WcaOnRails/app/inputs/money_amount_input.rb

@@ -19,9 +19,6 @@ def input(wrapper_options)
     actual_field = @builder.hidden_field(attribute_name, value: value)
     input_id = attribute_name.to_s + "_input_field"
 
-    # On page load, inputs with this class get their mask setup
-    merged_input_options[:class] << "wca-currency-mask"
-
     # This helper create an arbitrary tag (in this case an input), with the given attributes.
     amount_input = template.content_tag(:input, "",
                                         value: value,

WcaOnRails/app/javascript/auto-numeric/index.js

@@ -0,0 +1,69 @@
+import AutoNumeric from 'autonumeric';
+import currenciesData from 'wca/currenciesData.js.erb';
+
+
+function getCurrencyInfo(isoCode) {
+  return currenciesData.byIso[isoCode] || currenciesData.byIso.USD;
+}
+
+// Create a mask for an amount input in the given currency, using autoNumeric
+// 'action' can be either "init" or "update"
+// '$element' is a jquery element for the targeted input field
+wca.applyCurrencyMask = function(action, $element, currencyIsoCode) {
+  let entry = getCurrencyInfo(currencyIsoCode);
+  let currentVal = 0;
+
+  // Get current val
+  if (action == "update") {
+    currentVal = getValueInCurrency($element);
+  } else if (action == "init") {
+    currentVal = $element.val();
+  } else {
+    throw new Error('Unsupported action for currency mask');
+  }
+
+  // Reconfigure
+  $.data($element[0], "current_subunit_to_unit", entry.subunit_to_unit);
+  let maskOptions = {
+    currencySymbol: entry.symbol,
+    currencySymbolPlacement: (entry.symbol_first) ? 'p' : 's',
+    // If the currency has no subunit (subunit_to_unit is 1), then we don't need
+    // decimals. For currencies with subunits we want to show decimals.
+    decimalPlaces: (entry.subunit_to_unit == 1) ? 0 : 2,
+    showWarnings: false,
+  };
+
+  let autoNumericObject = $element.data("autoNumericObject");
+
+  if (autoNumericObject) {
+    autoNumericObject.update(maskOptions);
+  } else {
+    autoNumericObject = new AutoNumeric($element[0], maskOptions);
+    $element.data("autoNumericObject", autoNumericObject);
+  }
+
+  // Set new val
+  autoNumericObject.set(currentVal/entry.subunit_to_unit);
+};
+
+// Retrieve the real value, in the currency's lowest denomination
+// Assumes autoNumeric is running on element, and the number of subunit_to_unit has been set in data
+function getValueInCurrency($element) {
+  let currentVal = $element.data("autoNumericObject").getNumber();
+  let multiplier = $.data($element[0], "current_subunit_to_unit");
+  // Set back the value to the "lowest denomination" in the currency
+  return currentVal * multiplier;
+}
+
+// Setup the mask for the selected element
+wca.setupCurrencyMask = function($element) {
+  let currencyIsoCode = $element.data("currency");
+  let targetElemId = $element.data("target");
+
+  wca.applyCurrencyMask('init', $element, currencyIsoCode);
+
+  // Populate the actual hidden field on change
+  $element.change(function() {
+    $(targetElemId).val(getValueInCurrency($element));
+  });
+};

WcaOnRails/app/javascript/packs/auto_numeric.js

@@ -0,0 +1 @@
+import 'auto-numeric';

WcaOnRails/app/assets/javascripts/currencies-data.js.erb → WcaOnRails/app/javascript/wca/currenciesData.js.erb

@@ -1,4 +1,3 @@
-window.wca = window.wca || {};
 <%
   # Select currencies, for all the iso_code is matching the hash key.
   # However for 2 currencies (JPY, GHS) there is a second currency with the same iso_code but a different key.
@@ -10,5 +9,6 @@ window.wca = window.wca || {};
                     :subunit_to_unit => v[:subunit_to_unit]}]
   end]
 %>
-wca._currenciesInfo =
-<%= raw(JSON.pretty_generate(currencies_info_hash, indent: '', object_nl: '', array_nl: '', space: '', space_after: '')) %>;
+export default {
+  byIso: <%= JSON.pretty_generate(currencies_info_hash, indent: '', object_nl: '', array_nl: '', space: '', space_after: '') %>,
+};

WcaOnRails/app/views/competitions/_competition_form.html.erb

@@ -1,4 +1,5 @@
   <% provide(:include_gmaps, true) %>
+  <%= javascript_pack_tag 'auto_numeric' %>
   <% is_actually_confirmed = @competition.persisted? ? Competition.find(@competition.id).isConfirmed? : false %>
   <%= horizontal_simple_form_for @competition, html: { class: 'are-you-sure no-submit-on-enter', id: 'competition-form' } do |f| %>
     <% if @competition.persisted? %>
@@ -235,10 +236,15 @@
     <%= f.input :currency_code, collection: Money::Currency.table.values, label_method: lambda { |c| c[:name]  }, value_method: lambda { |c| c[:iso_code] }, disabled: disable_money_input  %>
     <%= f.input :base_entry_fee_lowest_denomination, as: :money_amount, currency: @competition.currency_code, disabled: disable_money_input %>
     <script>
+
+      var entry_fee_input_field = $('#base_entry_fee_lowest_denomination_input_field');
+      // Activate currency mask
+      wca.setupCurrencyMask(entry_fee_input_field);
+
       // Setup currency onchange callback
       $('#competition_currency_code').change(function() {
         wca.applyCurrencyMask('update',
-                              '#base_entry_fee_lowest_denomination_input_field',
+                              entry_fee_input_field,
                               $('#competition_currency_code').val());
       });
     </script>

WcaOnRails/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@rails/webpacker": "^3.0.2",
+    "autonumeric": "^4.0.3",
     "autoprefixer": "^7.1.6",
     "babel-core": "^6.25.0",
     "babel-loader": "7.x",

WcaOnRails/yarn.lock

@@ -260,6 +260,10 @@ atob@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
 
+autonumeric@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/autonumeric/-/autonumeric-4.0.3.tgz#9c126f236d9d81519e9149e426bc47a013e7cb6e"
+
 autoprefixer@^6.3.1:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"