templates/_includes/selectZipcodeOrCity.html.twig line 1

Open in your IDE?
  1. {% if feature_flag_service.featureEnabledForUser(
  2. constant('App\\Service\\FeatureFlagService::FEATURE_SHOW_SELECT_ZIPCODE_OR_CITY'), app.user) %}
  4. <script>
  5. {{ inlineJsWrapperBegin() }}
  6. var listElement;
  7. var inputZipcodeId;
  8. var inputCityId;
  9. var inputZipcodeField;
  10. const dropdownIcon = jQuery('#select-zipcode-or-city-dropdown-icon')
  12. if (jQuery('#jobseeker_profile_zipcode').length > 0) {
  13. inputZipcodeField = jQuery('#jobseeker_profile_zipcode');
  14. listElement = jQuery('#select-zipcode-or-city2');
  15. bindEvents();
  16. }
  19. inputZipcodeField = jQuery('#recurrent_jobs_search_parameters_filterZipcode');
  20. inputZipcodeField = inputZipcodeField.length === 0 ? jQuery('#wanted_jobs_search_parameters_filterZipcode') : inputZipcodeField;
  21. inputZipcodeField = inputZipcodeField.length === 0 ? jQuery('#jobseeker_profile_availabilityZipcode') : inputZipcodeField;
  22. inputZipcodeField = inputZipcodeField.length === 0 ? jQuery('#jobofferer_profile_zipcode') : inputZipcodeField;
  23. inputZipcodeField = inputZipcodeField.length === 0 ? jQuery('#recurrent_job_zipcode') : inputZipcodeField;
  24. inputZipcodeField = inputZipcodeField.length === 0 ? jQuery('#recurrent-jobs-search-for-one-customer-zipcode') : inputZipcodeField
  25. if (inputZipcodeField.length > 0) {
  26. inputZipcodeId = '#' + inputZipcodeField[0].id;
  27. }
  29. inputCityId = jQuery('#jobofferer_profile_city').length > 0 ? jQuery('#jobofferer_profile_city') : null;
  30. if (inputCityId === null && jQuery('#recurrent_job_city').length > 0) {
  31. inputCityId = jQuery('#recurrent_job_city');
  32. }
  33. listElement = jQuery('#select-zipcode-or-city');
  35. bindEvents();
  38. jQuery('#jobseeker_profile_availabilityZipcode').focus(function () {
  39. if (listElement[0].id === 'select-zipcode-or-city2') {
  40. listElement.hide().empty();
  41. listElement = jQuery('#select-zipcode-or-city');
  42. inputCityId = null;
  43. inputZipcodeField = jQuery(this);
  44. if (inputZipcodeField.length > 0) {
  45. inputZipcodeId = '#' + inputZipcodeField[0].id;
  46. }
  47. }
  48. });
  50. jQuery('#jobseeker_profile_zipcode').focus(function () {
  51. if (listElement[0].id === 'select-zipcode-or-city') {
  52. listElement.hide().empty();
  53. listElement = jQuery('#select-zipcode-or-city2');
  54. inputCityId = jQuery('#jobseeker_profile_city');
  55. inputZipcodeField = jQuery(this);
  56. if (inputZipcodeField.length > 0) {
  57. inputZipcodeId = '#' + inputZipcodeField[0].id;
  58. }
  59. }
  60. });
  62. function checkKeyCodes(event) {
  63. if (event.which === 38) { // ArrowUp
  64. if (listElement.is(':visible')) {
  65. return focusElement(event.which)
  66. }
  67. } else if (event.which === 40) { // ArrowDown
  68. if (listElement.length > 0) {
  69. listElement.show();
  70. return focusElement(event.which)
  71. }
  72. } else if (event.which === 13 || event.which === 27) { // Escape und Return
  73. listElement.hide();
  74. return false;
  75. }
  76. return true;
  77. }
  79. function getZipcodes(filter, joboffererProfileId = null) {
  80. jQuery.ajax({
  81. url: joboffererProfileId !== null ? '{{ path('searchhelper.zipcode_or_city_for_limited_search.api') }}' : '{{ path('searchhelper.zipcode_or_city.api') }}',
  82. method: 'post',
  83. dataType: 'json',
  84. data: joboffererProfileId !== null ? 'joboffererProfileId=' + joboffererProfileId :'filter=' + filter
  85. }).done(function (response) {
  86. listElement.empty();
  87. response.forEach(function (item) {
  88. if (item['city'] !== null && item['city'] !== undefined) {
  89. listElement.append('<li tabindex="-1" zipcode="' + item['zipcode'] + '" city="' + item['city'] + '" class="list-group-item list-group-item-action py-1 tw-font-semibold">' + item['zipcode'] + ' ' + item['city'] + '</li>')
  90. } else {
  91. listElement.append('<li tabindex="-1" zipcode="' + item['zipcode'] + '" class="list-group-item list-group-item-action py-1 tw-font-semibold">' + item['zipcode'] + '</li>')
  92. }
  93. });
  94. listElement.show();
  95. jQuery(listElement.children()[0]).addClass('bg-darkblue');
  96. })
  97. }
  99. function focusElement(direction) {
  100. var element;
  101. var activeElement = jQuery('#' + listElement[0].id + ' li.active');
  102. if (activeElement.length === 0) {
  103. element = listElement.children()[0];
  104. } else {
  105. element = direction === 40 ? activeElement[0].nextElementSibling : activeElement[0].previousElementSibling;
  106. activeElement.removeClass('active');
  107. }
  108. jQuery(element).focus().addClass('active');
  109. if (element !== undefined) {
  110. updateFieldValues(element['attributes']['zipcode']['nodeValue'], element['attributes']['city']['nodeValue']);
  111. }
  112. return false;
  113. }
  115. function updateFieldValues(zipcode, city) {
  116. if (inputCityId && city !== null) {
  117. inputCityId.focus().val(city);
  118. }
  119. inputZipcodeField.val(zipcode).focus();
  120. }
  122. function bindEvents() {
  123. listElement.click(function (event) {
  124. jQuery('#' + listElement[0].id + ' li.active').removeClass('active');
  125. jQuery(event.target).addClass('active');
  126. if ( event.target !== undefined
  127. && event.target !== null
  128. && event.target['attributes'] !== undefined
  129. && event.target['attributes'] !== null
  130. && event.target['attributes']['zipcode'] !== undefined
  131. && event.target['attributes']['zipcode'] !== null
  132. && event.target['attributes']['zipcode']['nodeValue'] !== undefined
  133. && event.target['attributes']['zipcode']['nodeValue'] !== null
  134. && event.target['attributes']['city'] !== undefined
  135. && event.target['attributes']['city'] !== null
  136. && event.target['attributes']['city']['nodeValue'] !== undefined
  137. && event.target['attributes']['city']['nodeValue'] !== null
  138. ) {
  139. updateFieldValues(event.target['attributes']['zipcode']['nodeValue'], event.target['attributes']['city']['nodeValue']);
  140. } else if(
  141. event.target !== undefined
  142. && event.target !== null
  143. && event.target['attributes'] !== undefined
  144. && event.target['attributes'] !== null
  145. && event.target['attributes']['zipcode'] !== undefined
  146. && event.target['attributes']['zipcode'] !== null
  147. && event.target['attributes']['zipcode']['nodeValue'] !== undefined
  148. && event.target['attributes']['zipcode']['nodeValue'] !== null
  149. ) {
  150. updateFieldValues(event.target['attributes']['zipcode']['nodeValue'], null);
  151. }
  152. jQuery(this).hide();
  153. });
  155. listElement.mouseover(function () {
  156. jQuery(this).css('cursor', 'pointer');
  157. });
  159. const clickHandler = function (){
  160. let joboffererProfileId = null;
  162. if (listElement.data('jobofferer-profile-id')) {
  163. joboffererProfileId = listElement.data('jobofferer-profile-id');
  164. joboffererProfileId = joboffererProfileId !== undefined ? joboffererProfileId : null;
  165. }
  167. listElement.hide().empty();
  168. getZipcodes('', joboffererProfileId);
  169. }
  171. if (inputZipcodeField.attr('readonly')) {
  172. inputZipcodeField.click(clickHandler);
  173. }
  174. dropdownIcon.click(clickHandler);
  176. inputZipcodeField.keydown(function (event) {
  177. var element;
  178. // Key-Codes von 48 - 57 sind die Ziffern von 0-9
  179. if ((event.which >= 48 && event.which <= 57) && jQuery('#restriced-wanted-jobs-search').length > 0) {
  180. jQuery('#zipcode-info-box').modal('toggle');
  181. }
  182. if ((event.which === 9 || event.which === 13) && listElement.is(':visible')) { //Tab and Return
  183. event.preventDefault();
  184. element = jQuery('#' + listElement[0].id + ' li.active');
  185. if (element !== undefined && element[0] !== undefined) {
  186. updateFieldValues(element[0]['attributes']['zipcode']['nodeValue'], element[0]['attributes']['city']['nodeValue']);
  187. }
  188. listElement.hide();
  189. }
  190. });
  192. inputZipcodeField.keyup(function (event) {
  193. var filter = jQuery(this).val();
  195. setTimeout(function () {
  196. if (filter === jQuery(inputZipcodeId).val() && filter.length > 2) {
  197. if (checkKeyCodes(event)) {
  198. getZipcodes(filter);
  199. }
  200. } else if (filter.length < 3) {
  201. listElement.hide();
  202. } else if (listElement.is(':visible')) {
  203. checkKeyCodes(event);
  204. }
  205. }, 150);
  206. });
  207. }
  208. {{ inlineJsWrapperEnd() }}
  209. </script>
  211. {% endif %}