https://www.usgs.gov/themes/custom/usgs_tantalum/assets/js/usgs-tables.js?v=1

1(function ($, Drupal, drupalSettings) {
2
3  'use strict';
4
5  Drupal.behaviors.usgs_tables = {
6    attach: function(context, settings) {
7      if (settings.views && settings.views.ajaxViews) {
8        var instances = settings.views.ajaxViews;
9        $.each( instances , function getInstance( index, element){
10          var viewName = element.view_name;
11          var viewDisplay = element.view_display_id;
12
13          if ((viewName === 'group_lp' && viewDisplay === 'directory') || (viewName === 'hq_page' && viewDisplay === 'location_table')) {
14
15            $(once("usgsTableMagnify", ".usgs-table-magnify", context)).click(function() {
16              var clickedColumn = $(this);
17              // Insert exposed form into each of the columns inside table
18              $(".usgs-table-exposed-form").show().detach().appendTo($(clickedColumn).siblings('.usgs-table-searchbox').children('.usgs-table-bubble'));
19              $(clickedColumn).siblings('.usgs-table-searchbox').toggle();
20              $('.usgs-table-magnify').not($(this)).siblings('.usgs-table-searchbox').hide();
21              var activeColumn = clickedColumn.data('filter').replaceAll('-', '_');
22              var split = activeColumn.split(" ")[0];
23              // Hide all form fields and select by default
24              $(this).siblings('.usgs-table-searchbox').find( "input.fa-search" ).show();
25              $(this).siblings('.usgs-table-searchbox').find('input.form-text').hide();
26              $(this).siblings('.usgs-table-searchbox').find('input.fa-times').hide();
27              $(this).siblings('.usgs-table-searchbox').find('select.form-select').hide();
28              $('.table-reset').hide();
29              var active = $(this).siblings('.usgs-table-searchbox').find( "input[name*='"+split+"']" );
30              var search = $(this).siblings('.usgs-table-searchbox').find( "input.fa-search" );
31
32              // Special case for location type
33              var textsplit = 'node_location_type';
34              $(this).siblings('.hq_page-node-title').find( "select[name*='"+textsplit+"']" ).show();
35              $(active).show();
36
37              if(active.val().length !== 0 ) {
38                $('.submit-test').show();
39                $(this).siblings('.usgs-table-searchbox').find( "input.fa-times" ).show();
40                $(this).siblings('.usgs-table-searchbox').find( "input.fa-search" ).hide();
41              }
42
43              $('.table-reset').click(function(e){
44                e.preventDefault();
45                // reset form field val to mimick a 'reset'
46                $(active).val("");
47                $(search).click();
48              });
49
50            });
51          }
52
53        });
54
55      }
56    }
57  };
58
59  Drupal.behaviors.sortSearchTable = {
60    attach: function (context, settings) {
61      $(once("tableSearchSort", "table.usgs-ckeditor-table", context))
62        .each(function() {
63
64          let stickyRow = false;
65          let scrollable = false;
66          let enableSearch = false;
67          let ordering = false;
68          let order = '';
69          let id = $(this).attr('table-id') + Math.random().toString(36).substring(2,7);
70          $(this).attr('table-id', id);
71
72          if ( $(this).hasClass('sticky-row')) {
73            stickyRow = true;
74          }
75          if ( $(this).hasClass('usa-table--scrollable')) {
76            scrollable = true;
77          }
78
79          if ( $(this).hasClass('enable-search')) {
80            enableSearch = true;
81          }
82          if ( $(this).hasClass('enable-sort')) {
83            order = [[0, 'asc']];
84            ordering = true;
85          }
86          let currentTable = $("table[table-id=" + id + "]");
87          const filterCols = (col) => {
88            col.every(function (colIdx) {
89              const that = this;
90              $("input", this.column(colIdx).header()).keyup(function () {
91                if ($(this).val() === "") {
92                  $(this).siblings(".search-col--searchicon").removeClass("close");
93                  $(this).siblings(".search-col--searchicon").find("i").addClass("fa-search").removeClass("fa-times");
94                  that.search("").draw();
95                } else {
96                  $(this).siblings(".search-col--searchicon").addClass("close");
97                  $(this).siblings(".search-col--searchicon").find("i").removeClass("fa-search").addClass("fa-times");
98                  if (that.search() !== this.value) {
99                    that.search(this.value).draw();
100                  }
101                }
102              });
103              $(".search-col--searchicon", this.column(colIdx).header()).on("click", function (e) {
104                e.stopPropagation();
105                if ($(this).hasClass("close")) {
106                  $(this).removeClass("close");
107                  $(this).html('<i class="fa fa-search"></i>');
108                  $(this).siblings("input").val("");
109                  $(currentTable).DataTable().column(colIdx).search("").draw();
110                }
111              });
112              // Stop column from sorting on click.
113              $("input", this.column(colIdx).header()).on("click", function (e) {
114                e.stopPropagation();
115              });
116            });
117          };
118
119          if (ordering || enableSearch || scrollable && stickyRow) {
120            if (enableSearch) {

121              Drupal.behaviors.sortSearchTable.searchWrapper($(this));
122            }
123            if (scrollable && stickyRow) {
124              if ($(currentTable).parents('.usa-table-container--scrollable').length) {
125                $(currentTable).parents('.usa-table-container--scrollable').css({'overflow-y' : 'unset'});
126              }
127            }
128            setTimeout(function() {
129              $(currentTable).DataTable( {
130                initComplete() {
131                  if (enableSearch) {
132                    $(".search-col--magnify").click(function(event) {
133                      event.stopImmediatePropagation();
134                      const clickedColumn = $(this);
135                      $(clickedColumn).siblings(".search-col--searchbox").toggleClass("active");
136                    });
137                    filterCols(this.api().columns());
138                  }
139                },
140                order,
141                ordering,
142                dom: "lrtip",
143                scrollX: scrollable,
144                paging: false,
145                info: false
146              });
147            }, 300);
148          }
149        });
150    },
151
152    searchWrapper: function searchWrapper(header) {
153      let tableHeaders = $(header).find('thead th');
154
155      $(tableHeaders).each(function (index, tableHeader) {
156        let searchWrapper =
157          `<div class="search-col--wrapper">
158                    <span class="usgs-table-magnify search-col--magnify">
159                      <i class="fa fa-search"></i>
160                    </span>
161                    <div class="search-col--searchbox">
162                      <div class="search-col--input">
163                        <label for="tableSearch" id="science-products-table-name" class="sr-only">Search</label>
164                        <input aria-labelledby="science-products-table-name" type="text" placeholder="Search" />
165                        <span class="search-col--searchicon">
166                          <i class="fa fa-search"></i>
167                        </span>
168                      </div>
169                    </div>
170                  </div>`;

171        $(tableHeader).append(searchWrapper);
172      });
173    }
174  };
175
176  Drupal.calculateToolbarHeight = function() {
177    const $toolbarBar = $('#toolbar-bar');
178    if ($toolbarBar.length == 0) { return 0; }
179
180    let toolbarHeight = $toolbarBar.height();
181    const $secondaryToolbar = $('.toolbar-tab > .toolbar-tray.is-active');
182    const isHorizToolbar = window.outerWidth >= 1024; // admin toolbar breakpoint
183    const isToolbarOpen = $secondaryToolbar.length > 0;
184
185    if (isHorizToolbar && isToolbarOpen && $secondaryToolbar.length > 0) {
186      toolbarHeight += $secondaryToolbar.height();
187    }
188
189    return toolbarHeight;
190  }
191
192})(jQuery, Drupal, drupalSettings);