Home Reference Source

src/resList/index.js

  1. import getJquery from './../utilities/getJquery';
  2. import { prependClass } from '../utilities/index';
  3.  
  4. function convertListToDropdown(config = {}) {
  5. getJquery().then(($) => {
  6. // console.log(config);
  7. const { breakPoint = 'lg', className } = config;
  8. const windowUrl = window.location.href;
  9. // console.log('windowUrl: ', windowUrl);
  10. $('body')
  11. .find('ul[bse-resList]')
  12. .each((ulIndex, ulElement) => {
  13. // Loop through all menus
  14. prependClass(ulElement, `d-none d-${breakPoint}-flex`);
  15. const isDropdownExist = $(ulElement).siblings('select').length !== 0;
  16. if (isDropdownExist) {
  17. // Update drop down list's select
  18. const $dropDown = $($(ulElement).siblings('select')[0]);
  19. $dropDown.find('option').each((optionIndex, optionElement) => {
  20. const href = optionElement.value;
  21. const isActived = windowUrl.indexOf(href) !== -1;
  22. if (isActived) {
  23. optionElement.selected = true;
  24. } else {
  25. optionElement.selected = false;
  26. }
  27. // console.log(optionElement.selected);
  28. // console.log(optionElement.value);
  29. });
  30. } else {
  31. // Crete new drop down list
  32. const $dropDown = $('<select />', {
  33. class: `d-${breakPoint}-none ${className}`,
  34. });
  35. $(ulElement)
  36. .find('li')
  37. .each((liIndex, liElement) => {
  38. // console.log(liElement);
  39. // console.log($(liElement).find('a'));
  40. $(liElement)
  41. .find('a')
  42. .each((aIndex, aElement) => {
  43. const href = $(aElement).attr('href');
  44. const text = $(aElement).text();
  45. const isActived = windowUrl.indexOf(href) !== -1;
  46. const $option = $('<option />', {
  47. value: href,
  48. text,
  49. selected: isActived,
  50. });
  51. $option.appendTo($dropDown);
  52. });
  53. });
  54. // console.log($dropDown);
  55. $dropDown.insertAfter($(ulElement));
  56. // Add navigate funcitonality to options
  57. $dropDown.on('change', (event) => {
  58. // console.log(event.currentTarget);
  59. window.location = $(event.currentTarget)
  60. .find('option:selected')
  61. .val();
  62. });
  63. }
  64. });
  65. });
  66. }
  67.  
  68. /**
  69. * Convert a ul li menu to a select options element and display it on small device
  70. * Add bse-resList attribute to ul and run bse.resList.init();
  71. * @example
  72. * <ul bse-resList>
  73. * <li><a class="h7" href="PASSENGER">PASSENGER</a></li>
  74. * <li><a class="h7" href="TRUCK">TRUCK</a></li>
  75. * <li><a class="h7" href="EARTHMOVER">EARTHMOVER</a></li>
  76. * <li><a class="h7" href="AGRICULTURE">AGRICULTURE</a></li>
  77. * <li><a class="h7" href="AVIATION">AVIATION</a></li>
  78. * <li><a class="h7" href="2R">2R</a></li>
  79. * </ul>
  80. * bse.resList.init();
  81. * @param {Object} config - Config object
  82. * @param {string} config.breakPoint - BreakPoint
  83. * @param {string} config.className - calss name that you want to add to select
  84. */
  85. export function init(config) {
  86. getJquery().then(($) => {
  87. convertListToDropdown(config);
  88. $(window).on('hashchange', () => {
  89. convertListToDropdown(config);
  90. });
  91. });
  92. }
  93.  
  94. // Force upate
  95. export function update() {}