Move inline JavaScript to Webpack entry points

Issue #111
TomaszGasior · Sep 26, 2020 · 60ef5a6 · 60ef5a6
1 parent 21d5550
commit 60ef5a6
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 121 deletions.
diff --git a/assets/js/radio-station-edit-add.js b/assets/js/radio-station-edit-add.js
@@ -0,0 +1,71 @@
+// Enforce leading zeros in typed values ("87.6" -> "87.60").
+// Do not use "input" event. It looks better but makes manual typing hard.
+// Works only in Webkit/Blink. "input.valueAsNumber" condition needed for MSEdge.
+// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6367416/
+function setupDecimalFields()
+{
+    let inputs = document.querySelectorAll('input.decimal');
+
+    inputs.forEach(input => {
+        let decimals = (input.step.match(/\..*/) || [''])[0].length - 1;
+
+        if (decimals && input.valueAsNumber != undefined) {
+            let updateFixed = () => {
+                input.value = input.valueAsNumber.toFixed(decimals);
+            };
+
+            input.addEventListener('change', updateFixed);
+            updateFixed();
+        }
+    });
+}
+
+// Keep original "0.01" step for values smaller than 74, otherwise use "0.05".
+// This way entering usual frequencies is simpler while OIRT frequencies are
+// available too. See https://github.com/TomaszGasior/RadioLista-v3/issues/35
+function setupFrequencyField()
+{
+    let frequencyInput = document.querySelector('.frequency-input');
+
+    const REPLACED_STEP = '0.05';
+    const ORIGINAL_STEP = frequencyInput.step;
+
+    let updateStep = () => {
+        if (frequencyInput.value >= 74) {
+            if (frequencyInput.step != REPLACED_STEP) {
+                frequencyInput.step = REPLACED_STEP;
+                frequencyInput.min = REPLACED_STEP;
+            }
+        }
+        else if (frequencyInput.step != ORIGINAL_STEP) {
+            frequencyInput.step = ORIGINAL_STEP;
+            frequencyInput.min = ORIGINAL_STEP;
+        }
+    };
+
+    updateStep();
+    frequencyInput.addEventListener('input', updateStep);
+    frequencyInput.addEventListener('blur', updateStep);
+}
+
+function setupLocalityField()
+{
+    let localityTypeInput = document.querySelector('.locality-type-input');
+    let localityCityWrapper = document.querySelector('.locality-city-wrapper');
+
+    const LOCALITY_COUNTRY = localityTypeInput.dataset.localityCountryValue;
+
+    let updateFieldVisibility = () => {
+        localityCityWrapper.hidden = (localityTypeInput.value == LOCALITY_COUNTRY);
+    };
+
+    updateFieldVisibility();
+    localityTypeInput.addEventListener('change', updateFieldVisibility);
+    localityTypeInput.addEventListener('blur', updateFieldVisibility);
+}
+
+document.addEventListener('DOMContentLoaded', function(){
+    setupDecimalFields();
+    setupFrequencyField();
+    setupLocalityField();
+});
diff --git a/assets/js/radio-table-remove.js b/assets/js/radio-table-remove.js
@@ -0,0 +1,19 @@
+function setupRemoveConfirmDialog()
+{
+    let input = document.querySelector('.radio-table-remove-confirm');
+
+    let confirmDialog = () => {
+        if (input.checked && false === window.confirm(input.dataset.confirmMessage)) {
+            input.checked = false;
+            input.blur();
+        }
+
+        input.removeEventListener('change', confirmDialog);
+    };
+
+    input.addEventListener('change', confirmDialog);
+}
+
+document.addEventListener('DOMContentLoaded', function(){
+    setupRemoveConfirmDialog();
+});
diff --git a/assets/js/radio-table-settings.js b/assets/js/radio-table-settings.js
@@ -1,9 +1,44 @@
 import { RadioTableColumnsUI } from './src/RadioTableColumnsUI.js';
 
+function setupCustomThemeField()
+{
+    let themeSelectorField = document.querySelector('.radio-table-theme');
+    let customThemeFieldsWrapper = document.querySelector('.radio-table-custom-theme-wrapper');
+
+    const CUSTOM_THEME_NAME = themeSelectorField.dataset.customThemeName;
+
+    let updateFieldVisibility = () => {
+        customThemeFieldsWrapper.hidden = (themeSelectorField.value != CUSTOM_THEME_NAME);
+    };
+
+    updateFieldVisibility();
+    themeSelectorField.addEventListener('change', updateFieldVisibility);
+    themeSelectorField.addEventListener('blur', updateFieldVisibility);
+}
+
+function setupCustomWidthField()
+{
+    let widthTypeInput = document.querySelector('.radio-table-width-type');
+    let customWidthFieldWrapper = document.querySelector('.radio-table-custom-width-wrapper');
+
+    const WIDTH_CUSTOM = widthTypeInput.dataset.customWidthValue;
+
+    let updateFieldVisibility = () => {
+        customWidthFieldWrapper.hidden = (widthTypeInput.value != WIDTH_CUSTOM);
+    };
+
+    updateFieldVisibility();
+    widthTypeInput.addEventListener('change', updateFieldVisibility);
+    widthTypeInput.addEventListener('blur', updateFieldVisibility);
+}
+
 document.addEventListener('DOMContentLoaded', function(){
-    let container = document.querySelector('.radio-table-columns');
+    let radioTableColumnsContainer = document.querySelector('.radio-table-columns');
 
-    if (container) {
-        new RadioTableColumnsUI(container);
+    if (radioTableColumnsContainer) {
+        new RadioTableColumnsUI(radioTableColumnsContainer);
     }
+
+    setupCustomThemeField();
+    setupCustomWidthField();
 });
diff --git a/templates/common/form/custom_types.html.twig b/templates/common/form/custom_types.html.twig
@@ -10,26 +10,6 @@
         'min': step,
     }) %}
     {{ block('integer_unit_widget') }}
-
-    {# Enforce leading zeros in typed values ("87.6" -> "87.60"). #}
-    {# Do not use "input" event, it looks better but makes manual typing hard. #}
-    {# Works only in Webkit/Blink. "input.valueAsNumber" condition needed for MSEdge. #}
-    {# See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6367416/ #}
-    <script>
-    (function(){
-        let input = document.getElementById('{{ id }}');
-        let decimals = (input.step.match(/\..*/) || [''])[0].length - 1;
-
-        if (decimals && input.valueAsNumber != undefined) {
-            let updateFixed = () => {
-                input.value = input.valueAsNumber.toFixed(decimals);
-            };
-
-            input.addEventListener('change', updateFixed);
-            updateFixed();
-        }
-    })();
-    </script>
 {% endblock decimal_unit_widget %}
 
 {% block radio_table_columns_row %}

diff --git a/templates/radio_station/_radio_station_tabs.html.twig b/templates/radio_station/_radio_station_tabs.html.twig
@@ -4,7 +4,10 @@
     <div>
         <h2>{{ 'radio_station.edit.heading.general'|trans }}</h2>
 
-        {{ form_row(form.frequency, {'unit_label': get_frequency_label(radio_station.radioTable.frequencyUnit)}) }}
+        {{ form_row(form.frequency, {
+            attr: { 'class': 'frequency-input' },
+            'unit_label': get_frequency_label(radio_station.radioTable.frequencyUnit),
+        }) }}
         {{ form_row(form.name) }}
         {{ form_row(form.radioGroup) }}
         {{ form_row(form.country) }}
@@ -16,25 +19,15 @@
         {{ form_row(form.power, {'unit_label': 'kW'}) }}
         {{ form_row(form.polarization) }}
         {{ form_row(form.type) }}
-        {{ form_row(form.localityType, {'attr': {'class': 'locality-type-input'}}) }}
+
+        {{ form_row(form.localityType, {'attr': {
+            'class': 'locality-type-input',
+            'data-locality-country-value': constant('TYPE_COUNTRY', radio_station.locality),
+        }}) }}
+
         <div class="locality-city-wrapper">
             {{ form_row(form.localityCity) }}
         </div>
-
-        <script>
-        (function(){
-            const LOCALITY_COUNTRY = '{{ constant('TYPE_COUNTRY', radio_station.locality) }}';
-            let localityTypeInput = document.querySelector('.locality-type-input');
-            let localityCityWrapper = document.querySelector('.locality-city-wrapper');
-
-            let updateFieldVisibility = () => {
-                localityCityWrapper.hidden = (localityTypeInput.value == LOCALITY_COUNTRY);
-            };
-            updateFieldVisibility();
-            localityTypeInput.addEventListener('change', updateFieldVisibility);
-            localityTypeInput.addEventListener('blur', updateFieldVisibility);
-        })();
-        </script>
     </div>
     <div>
         <h2>{{ 'radio_station.edit.heading.reception'|trans }}</h2>

diff --git a/templates/radio_station/_radio_station_tabs_theme.html.twig b/templates/radio_station/_radio_station_tabs_theme.html.twig
@@ -13,35 +13,3 @@
         </div>
     {% endif %}
 {% endblock %}
-
-{% block _radio_station_edit_frequency_widget %}
-    {{ block('decimal_unit_widget') }}
-
-    {# Keep original "0.01" step for values smaller than 74, otherwise use "0.05". #}
-    {# This way entering usual frequencies is simpler while OIRT frequencies are #}
-    {# available too. See https://github.com/TomaszGasior/RadioLista-v3/issues/35 #}
-    <script>
-    (function(){
-        let frequencyInput = document.getElementById('{{ id }}');
-        const REPLACED_STEP = '0.05';
-        const ORIGINAL_STEP = frequencyInput.step;
-
-        let updateStep = () => {
-            if (frequencyInput.value >= 74) {
-                if (frequencyInput.step != REPLACED_STEP) {
-                    frequencyInput.step = REPLACED_STEP;
-                    frequencyInput.min = REPLACED_STEP;
-                }
-            }
-            else if (frequencyInput.step != ORIGINAL_STEP) {
-                frequencyInput.step = ORIGINAL_STEP;
-                frequencyInput.min = ORIGINAL_STEP;
-            }
-        };
-
-        updateStep();
-        frequencyInput.addEventListener('input', updateStep);
-        frequencyInput.addEventListener('blur', updateStep);
-    })();
-    </script>
-{% endblock %}
diff --git a/templates/radio_station/add.html.twig b/templates/radio_station/add.html.twig
@@ -2,6 +2,11 @@
 
 {% block page_title %}{{ 'radio_station.add.title'|trans }}{% endblock %}
 
+{% block head_closing %}
+    {{ encore_entry_link_tags('radio-station-edit-add') }}
+    {{ encore_entry_script_tags('radio-station-edit-add') }}
+{% endblock %}
+
 {% block context_menu %}
     <ul>
         <li>

diff --git a/templates/radio_station/edit.html.twig b/templates/radio_station/edit.html.twig
@@ -2,6 +2,11 @@
 
 {% block page_title %}{{ 'radio_station.edit.title'|trans }}{% endblock %}
 
+{% block head_closing %}
+    {{ encore_entry_link_tags('radio-station-edit-add') }}
+    {{ encore_entry_script_tags('radio-station-edit-add') }}
+{% endblock %}
+
 {% block context_menu %}
     <ul>
         <li>

diff --git a/templates/radio_table/remove.html.twig b/templates/radio_table/remove.html.twig
@@ -2,6 +2,11 @@
 
 {% block page_title %}{{ 'radio_table.remove.title'|trans }}{% endblock %}
 
+{% block head_closing %}
+    {{ encore_entry_link_tags('radio-table-remove') }}
+    {{ encore_entry_script_tags('radio-table-remove') }}
+{% endblock %}
+
 {% block context_menu %}
     <ul>
         <li>
@@ -65,30 +70,17 @@
 
             {{ form_start(form_radio_table) }}
 
-            <div class="radio-table-remove-confirm">
-                {{ form_row(form_radio_table.confirm, {label_translation_parameters: {
-                    '%name%': radio_table.name,
-                }}) }}
-            </div>
+            {{ form_row(form_radio_table.confirm, {
+                label_translation_parameters: { '%name%': radio_table.name },
+                attr: {
+                    'class': 'radio-table-remove-confirm',
+                    'data-confirm-message': 'radio_table.remove.text.confirm_alert'|trans,
+                },
+            }) }}
 
             <button>{{ 'radio_table.remove.action.radio_table'|trans }}</button>
 
             {{ form_end(form_radio_table) }}
-
-            <script>
-            (function(){
-                let input = document.querySelector('.radio-table-remove-confirm input');
-                let confirmDialog = () => {
-                    if (input.checked && false === window.confirm("{{ 'radio_table.remove.text.confirm_alert'|trans }}")) {
-                        input.checked = false;
-                        input.blur();
-                    }
-
-                    input.removeEventListener('change', confirmDialog);
-                };
-                input.addEventListener('change', confirmDialog);
-            })();
-            </script>
         </div>
     </div>
 {% endblock %}
diff --git a/templates/radio_table/settings.html.twig b/templates/radio_table/settings.html.twig
@@ -84,7 +84,10 @@
 
             {% set jscolor_settings = '{mode:\'HSV\', required:false, hash:true, borderRadius:0, borderWidth:0, shadowBlur:2}' %}
 
-            {{ form_row(form.appearanceTheme, {attr: {'class': 'radio-table-theme'}}) }}
+            {{ form_row(form.appearanceTheme, {attr: {
+                'class': 'radio-table-theme',
+                'data-custom-theme-name': '',
+            }}) }}
 
             {# style="" is used as dirty hack for box-shadow removing. #}
             <div class="radio-table-custom-theme-wrapper">
@@ -101,39 +104,15 @@
                 {{ form_row(form.appearanceBackgroundImage) }}
             </div>
 
-            {{ form_row(form.appearanceWidthType, {attr: {'class': 'radio-table-width-type'}}) }}
+            {{ form_row(form.appearanceWidthType, {attr: {
+                'class': 'radio-table-width-type',
+                'data-custom-width-value': constant('WIDTH_CUSTOM', radio_table.appearance),
+            }}) }}
 
             <div class="radio-table-custom-width-wrapper">
                 {{ form_row(form.appearanceCustomWidth, {'unit_label': 'px'}) }}
             </div>
 
-            <script>
-            (function(){
-                const CUSTOM_THEME_NAME = '';
-                let themeSelectorField = document.querySelector('.radio-table-theme');
-                let customThemeFieldsWrapper = document.querySelector('.radio-table-custom-theme-wrapper');
-
-                let updateFieldVisibility = () => {
-                    customThemeFieldsWrapper.hidden = (themeSelectorField.value != CUSTOM_THEME_NAME);
-                };
-                updateFieldVisibility();
-                themeSelectorField.addEventListener('change', updateFieldVisibility);
-                themeSelectorField.addEventListener('blur', updateFieldVisibility);
-            })();
-            (function(){
-                const WIDTH_CUSTOM = '{{ constant('WIDTH_CUSTOM', radio_table.appearance) }}';
-                let localityTypeInput = document.querySelector('.radio-table-width-type');
-                let localityCityWrapper = document.querySelector('.radio-table-custom-width-wrapper');
-
-                let updateFieldVisibility = () => {
-                    localityCityWrapper.hidden = (localityTypeInput.value != WIDTH_CUSTOM);
-                };
-                updateFieldVisibility();
-                localityTypeInput.addEventListener('change', updateFieldVisibility);
-                localityTypeInput.addEventListener('blur', updateFieldVisibility);
-            })();
-            </script>
-
             {{ form_row(form.appearanceCollapsedComments) }}
         </div>
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -26,6 +26,8 @@ Encore
     .addEntry('common', './assets/js/common.js')
     .addEntry('radio-table', './assets/js/radio-table.js')
     .addEntry('radio-table-settings', './assets/js/radio-table-settings.js')
+    .addEntry('radio-table-remove', './assets/js/radio-table-remove.js')
+    .addEntry('radio-station-edit-add', './assets/js/radio-station-edit-add.js')
     .addStyleEntry('admin', './assets/css/admin.css')
     .addStyleEntry('error', './assets/css/error.css')