src/resList/index.js
- import getJquery from './../utilities/getJquery';
- import { prependClass } from '../utilities/index';
-
- function convertListToDropdown(config = {}) {
- getJquery().then(($) => {
- // console.log(config);
- const { breakPoint = 'lg', className } = config;
- const windowUrl = window.location.href;
- // console.log('windowUrl: ', windowUrl);
- $('body')
- .find('ul[bse-resList]')
- .each((ulIndex, ulElement) => {
- // Loop through all menus
- prependClass(ulElement, `d-none d-${breakPoint}-flex`);
- const isDropdownExist = $(ulElement).siblings('select').length !== 0;
- if (isDropdownExist) {
- // Update drop down list's select
- const $dropDown = $($(ulElement).siblings('select')[0]);
- $dropDown.find('option').each((optionIndex, optionElement) => {
- const href = optionElement.value;
- const isActived = windowUrl.indexOf(href) !== -1;
- if (isActived) {
- optionElement.selected = true;
- } else {
- optionElement.selected = false;
- }
- // console.log(optionElement.selected);
- // console.log(optionElement.value);
- });
- } else {
- // Crete new drop down list
- const $dropDown = $('<select />', {
- class: `d-${breakPoint}-none ${className}`,
- });
- $(ulElement)
- .find('li')
- .each((liIndex, liElement) => {
- // console.log(liElement);
- // console.log($(liElement).find('a'));
- $(liElement)
- .find('a')
- .each((aIndex, aElement) => {
- const href = $(aElement).attr('href');
- const text = $(aElement).text();
- const isActived = windowUrl.indexOf(href) !== -1;
- const $option = $('<option />', {
- value: href,
- text,
- selected: isActived,
- });
- $option.appendTo($dropDown);
- });
- });
- // console.log($dropDown);
- $dropDown.insertAfter($(ulElement));
- // Add navigate funcitonality to options
- $dropDown.on('change', (event) => {
- // console.log(event.currentTarget);
- window.location = $(event.currentTarget)
- .find('option:selected')
- .val();
- });
- }
- });
- });
- }
-
- /**
- * Convert a ul li menu to a select options element and display it on small device
- * Add bse-resList attribute to ul and run bse.resList.init();
- * @example
- * <ul bse-resList>
- * <li><a class="h7" href="PASSENGER">PASSENGER</a></li>
- * <li><a class="h7" href="TRUCK">TRUCK</a></li>
- * <li><a class="h7" href="EARTHMOVER">EARTHMOVER</a></li>
- * <li><a class="h7" href="AGRICULTURE">AGRICULTURE</a></li>
- * <li><a class="h7" href="AVIATION">AVIATION</a></li>
- * <li><a class="h7" href="2R">2R</a></li>
- * </ul>
- * bse.resList.init();
- * @param {Object} config - Config object
- * @param {string} config.breakPoint - BreakPoint
- * @param {string} config.className - calss name that you want to add to select
- */
- export function init(config) {
- getJquery().then(($) => {
- convertListToDropdown(config);
- $(window).on('hashchange', () => {
- convertListToDropdown(config);
- });
- });
- }
-
- // Force upate
- export function update() {}