github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/component/single-box/single-box.js (about)

     1  (function ($) {
     2    $.fn.singleBox = function (options) {
     3      var defaults = {
     4        fillIn: true,
     5        spanName: "",
     6        defaultValue: "",
     7        dataList: [],
     8        clicked: function () {},
     9        dataUpdate: false,
    10        clickedHead: function () {},
    11      };
    12      let setting = $.extend(defaults, options || {});
    13      let curCLick = setting.spanName;
    14      let dataList = setting.dataList;
    15      this.html(``);
    16      let name = setting.spanName.toLowerCase().replace(" ", "");
    17      this
    18        .append(`<button class="btn dropdown-toggle ${name}-btn" type="button" id="${name}-btn" data-toggle="dropdown" aria-haspopup="true"
    19                                  aria-expanded="false" data-bs-toggle="dropdown" title="Index Name to search on">
    20                                  <span class = "span-name-index" id="${name}-span-name"></span>
    21                                  <div class="dropdown-arrow-show"></div>
    22                              </button>
    23                              <div class="dropdown-menu box-shadow dropdown-plugin" aria-labelledby="index-btn" id="${name}-options">
    24                                  <div id="${name}-listing"></div>
    25                              </div>`);
    26      function updateDropdown() {
    27          $(`#${name}-listing`).empty(); // Clear existing items
    28          dataList.forEach((value, index) => {
    29            let valId = value.replace(" ", "").toLowerCase();
    30            $(`#${name}-listing`).append(`
    31            <div class="single-dropdown-item single-item-${name}" id="single-dropdown-${name}-${valId}" data-index="${index}">${value}</div>
    32          `);
    33          });
    34      }
    35      $(`#${name}-span-name`).text(
    36        setting.defaultValue != "" ? setting.defaultValue : setting.spanName
    37      );
    38      if (setting.dataList.length > 0) {
    39        setting.dataList.forEach((value, index) => {
    40          let valId = value.replace(" ", "").toLowerCase();
    41          $(`#${name}-listing`).append(
    42            `<div class="single-dropdown-item single-item-${name}" id="single-dropdown-${name}-${valId}" data-index="${index}">${value}</div>`
    43          );
    44        });
    45      }
    46      if (setting.defaultValue != "" && !setting.dataUpdate) {
    47        $(
    48          `#single-dropdown-${name}-${setting.defaultValue
    49            .replace(" ", "")
    50            .toLowerCase()}`
    51        ).addClass("active");
    52      }
    53      let dropdownVisible = false;
    54  
    55      $(`#${name}-listing`).on("click", ".single-dropdown-item", function () {
    56        $(`.single-item-${name}`).removeClass("active");
    57        if (!setting.dataUpdate)  $(this).addClass("active");
    58        curCLick = $(this).text();
    59        if (setting.fillIn) $(`#${name}-span-name`).text(curCLick);
    60        $(`#${name}-options`).hide();
    61        dropdownVisible = false;
    62        setting.clicked(curCLick);
    63      });
    64  
    65      $(`#${name}-btn`).click(async function () {
    66        dropdownVisible = !dropdownVisible;
    67        $(`#${name}-options`).toggle(dropdownVisible);
    68        if (dropdownVisible && setting.dataUpdate) {
    69          if (typeof setting.clickedHead === "function") {
    70            // If clickedHead is a function, use its result as dataList
    71            const possiblePromise = setting.clickedHead();
    72  
    73            if (possiblePromise instanceof Promise) {
    74              // If it's a promise, wait for it to resolve
    75              dataList = await possiblePromise;
    76            } else {
    77              dataList = possiblePromise || setting.dataList;
    78            }
    79          }
    80          updateDropdown();
    81        }
    82      });
    83      // Click event on document to close dropdown when clicking outside
    84      $(document).on("click", function (event) {
    85        if (
    86          !$(event.target).closest(`#${name}-btn`).length &&
    87          !$(event.target).closest(`#${name}-options`).length
    88        ) {
    89          $(`#${name}-options`).hide();
    90          dropdownVisible = false;
    91        }
    92      });
    93      return this;
    94    };
    95  })(jQuery);
    96