templates/app/partials/_teacher_fields_js.html.twig line 1

Open in your IDE?
  1. {# JS for the shared teacher fields partial.
  2.  # Param: country_selector = jQuery selector of a country <select> to gate the
  3.  #        school autocomplete dynamically (optional). When omitted, the initial
  4.  #        CZ visibility comes from the wrapper's data-cz flag. #}
  5. <script nonce="{{ app_nonce() }}">
  6.   $(function () {
  7.     const $school = $('#teacher_school');
  8.     const $schoolWrapper = $('[data-school-wrapper]');
  9.     const $schoolTypeOther = $('[data-school-type-other]');
  10.     const $schoolTypeOtherInput = $('#teacher_school_type_other');
  11.     const countrySelector = '{{ country_selector|default('')|e('js') }}';
  12.     const $country = countrySelector ? $(countrySelector) : $();
  14.     function selectedKind () {
  15.       return $('input[name="teacher_school_type"]:checked').val() || '';
  16.     }
  18.     function isOtherSelected () {
  19.       return selectedKind() === 'other';
  20.     }
  22.     function isCz () {
  23.       if ($country.length) {
  24.         return ($country.val() || '').toUpperCase() === 'CZ';
  25.       }
  26.       return String($schoolWrapper.data('cz')) === '1';
  27.     }
  29.     if ($school.length && $.fn.select2) {
  30.       $school.select2({
  31.         placeholder: '{{ 'register.school.placeholder'|trans|e('js') }}',
  32.         allowClear: true,
  33.         width: '100%',
  34.         minimumInputLength: 2,
  35.         ajax: {
  36.           url: $school.data('schools-url'),
  37.           dataType: 'json',
  38.           delay: 200,
  39.           cache: true,
  40.           data: function (params) {
  41.             return {
  42.               q: params.term || '',
  43.               kind: selectedKind()
  44.             };
  45.           },
  46.           processResults: function (data) {
  47.             return { results: data.results || [] };
  48.           }
  49.         },
  50.         templateResult: function (item) {
  51.           if (!item.id) { return item.text; }
  52.           const name = item.name || item.text;
  53.           const addr = item.address || '';
  54.           const $row = $('<div class="register-school__item"></div>');
  55.           $row.append($('<div class="register-school__name"></div>').text(name));
  56.           if (addr) {
  57.             $row.append($('<div class="register-school__addr"></div>').text(addr));
  58.           }
  59.           return $row;
  60.         },
  61.         templateSelection: function (item) {
  62.           return item.name || item.text || '';
  63.         },
  64.         language: {
  65.           inputTooShort: function (args) {
  66.             const n = args.minimum - args.input.length;
  67.             if ('{{ app.request.locale }}' === 'cs') {
  68.               return 'Zadejte ještě ' + n + ' znak' + (n === 1 ? '' : (n < 5 ? 'y' : 'ů'));
  69.             }
  70.             return 'Please enter ' + n + ' more character' + (n === 1 ? '' : 's');
  71.           },
  72.           noResults: function () { return '{{ 'register.school.noresults'|trans|e('js') }}'; },
  73.           searching: function () { return '{{ 'register.school.searching'|trans|e('js') }}'; },
  74.           errorLoading: function () { return '{{ 'register.school.error'|trans|e('js') }}'; }
  75.         }
  76.       });
  77.     }
  79.     // Visibility only - safe to call on init without wiping a prefilled school.
  80.     function applyVisibility () {
  81.       const cz = isCz();
  82.       const $czOptions = $('[data-country="cz"]');
  83.       const $otherOptions = $('[data-country="other"]');
  85.       if (cz) {
  86.         $czOptions.show();
  87.         $czOptions.find('input').prop('disabled', false);
  88.         $otherOptions.hide();
  89.         $otherOptions.find('input').prop('disabled', true).prop('checked', false);
  90.       } else {
  91.         $czOptions.hide();
  92.         $czOptions.find('input').prop('disabled', true).prop('checked', false);
  93.         $otherOptions.show();
  94.         $otherOptions.find('input').prop('disabled', false);
  95.       }
  97.       const other = isOtherSelected();
  98.       $schoolWrapper.prop('hidden', !cz || other);
  99.       $schoolTypeOther.prop('hidden', !other);
  100.     }
  102.     // User-driven change: also reset the previously selected school so the kind
  103.     // filter takes effect and clear the "other" text when it no longer applies.
  104.     function onUserChange () {
  105.       applyVisibility();
  106.       if (isOtherSelected()) {
  107.         $schoolTypeOtherInput.trigger('focus');
  108.       } else {
  109.         $schoolTypeOtherInput.val('');
  110.       }
  111.       if ($school.length) {
  112.         $school.val(null).trigger('change.select2');
  113.       }
  114.     }
  116.     if ($country.length) {
  117.       $country.on('change', onUserChange);
  118.     }
  119.     $(document).on('change', 'input[name="teacher_school_type"]', onUserChange);
  121.     applyVisibility();
  122.   });
  123. </script>