dropDownListStyling.mjs

"use strict";

import { vanillaSelectBox } from "../thirdparty/vanillaSelectBox.mjs";

/**
 * Use the `vanillaDropDown` library to style the buildings & data points drop down list
 *
 * @returns {undefined}
 */
const styleBuildingsDataPointsDropDown = function () {
  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
  new vanillaSelectBox("#drop-down--bldg-data-point", {
    disableSelectAll: true,
    maxSelect: 5,
    placeHolder: "--Select--",
    search: false,
  });
};

/**
 * Use the `vanillaDropDown` library to style the chart type,
 * aggregation type and sampling rates drop down lists
 *
 * @returns {undefined} undefined
 */
const styleOtherDropDownLists = function () {
  // Array of CSS selector strings
  const cssSelectorStringsArr = [
    "#drop-down--chart-type",
    "#drop-down--aggregation-type",
    "#drop-down--sampling-rate",
  ];

  // Create our dropdown lists using `vanillaSelectBox`
  cssSelectorStringsArr.forEach((cssSelectorString) => {
    new vanillaSelectBox(cssSelectorString, {
      disableSelectAll: true,
      maxSelect: 1,
      placeHolder: "--Select--",
      search: false,
    });
  });
};

/**
 *  Use the `vanillaDropDown` library to style all the drop down lists
 *
 * @returns {undefined} undefined
 */
export const styleAllDropDownLists = function () {
  styleBuildingsDataPointsDropDown();
  styleOtherDropDownLists();
};