diff --git a/assets/js/radio-station-edit-add.js b/assets/js/radio-station-edit-add.js new file mode 100644 index 00000000..48cd5cf4 --- /dev/null +++ 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 new file mode 100644 index 00000000..defcd689 --- /dev/null +++ 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 index 4e387bd0..df2dccab 100644 --- 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 index 3f10af89..48554f9e 100644 --- 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/ #} - {% 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 index f5d19992..2b64ad84 100644 --- a/templates/radio_station/_radio_station_tabs.html.twig +++ b/templates/radio_station/_radio_station_tabs.html.twig @@ -4,7 +4,10 @@

{{ 'radio_station.edit.heading.general'|trans }}

- {{ 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), + }}) }} +
{{ form_row(form.localityCity) }}
- -

{{ 'radio_station.edit.heading.reception'|trans }}

diff --git a/templates/radio_station/_radio_station_tabs_theme.html.twig b/templates/radio_station/_radio_station_tabs_theme.html.twig index 773cc867..85d680a8 100644 --- a/templates/radio_station/_radio_station_tabs_theme.html.twig +++ b/templates/radio_station/_radio_station_tabs_theme.html.twig @@ -13,35 +13,3 @@
{% 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 #} - -{% endblock %} diff --git a/templates/radio_station/add.html.twig b/templates/radio_station/add.html.twig index 02f2ee31..4ce7bc26 100644 --- 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 %}