https://www.ncdor.gov/themes/custom/nc_barrio/src/js/modules/textEditorDatatables.js?v=2

1(function ($) {
2  Drupal.behaviors.ncInitDatatables = {
3    attach: function (context, settings) {
4
5      // DataTables Configuration for Tables in Text Editor
6      let dtTextEd_config = {
7        order: [],
8        responsive: true,
9        autoWidth: false,
10        dom: 'lfrtip',
11        'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
12        'pageLength': 25,
13      };
14      // DataTables Configuration for Small Tables in Text Editor
15      let dtSmallTable_config = {
16        responsive: true,
17        autoWidth: false,
18        dom: 'lfrtip',
19        info: false,
20        order: [],
21        paging: false,
22        searching: false,
23      };
24
25      once('checkfortables', 'html').forEach(function (element) {
26        let multiples = false;
27        // check for tables that have more than 2 rows or 2 cells. Load Datatables if true
28        $(element).find('table').each(function () {
29          let tablerows = $(this).find('tr').length;
30          let tablecells = $(this).find('td').length;
31          if (tablerows > 2 || tablecells > 2) {
32            multiples = true;
33          }
34        });
35
36        if (multiples) {
37          // Responsive
38          InitializeTables();
39        }
40      });
41
42      function InitializeTables() {
43        // If DataTables is already loaded, initialize directly
44        if ($.fn.dataTable) {
45          onDataTablesReady();
46          return;
47        }
48        var dtScript = document.createElement('script');
49        var dtScriptUrl = 'https://cdn.datatables.net/v/bs5/dt-2.3.7/r-3.0.8/datatables.min.js';
50        var loadHandled = false;
51        var dtScriptTimeout = setTimeout(function () {
52          if (!loadHandled) {
53            loadHandled = true;
54            console.error('Failed to load DataTables: request timed out for ' + dtScriptUrl);
55          }
56        }, 10000);
57
58        dtScript.src = dtScriptUrl;
59        dtScript.onload = function(){
60          if (loadHandled) {
61            return;
62          }
63          loadHandled = true;
64          clearTimeout(dtScriptTimeout);
65          onDataTablesReady();
66        };
67        dtScript.onerror = function () {
68          if (loadHandled) {
69            return;
70          }
71          loadHandled = true;
72          clearTimeout(dtScriptTimeout);
73          console.error('Failed to load DataTables script from CDN: ' + dtScriptUrl);
74        };
75        document.head.appendChild(dtScript);
76
77        $('head title').after(
78          $('<link>', {
79            rel: 'stylesheet',
80            media: 'all',
81            href: 'https://cdn.datatables.net/v/bs5/dt-2.3.7/r-3.0.8/datatables.min.css',
82          }),
83        );
84      }
85
86      function onDataTablesReady(){
87          // Set error logging to console.
88          $.fn.dataTable.ext.errMode = 'console';
89
90          // Check tables in node content and add Datatables init class
91          $('table').each(function () {
92            // check if table has rowspan and do not enable Datatables DC-5149
93            if ($(this).find('[rowspan]').length) {
94              // Use scroll mode, not responsive
95              // Bootstrap 5 requires table-responsive on a wrapper div, not the table itself
96              if (!$(this).parent().hasClass('table-responsive')) {
97                $(this).wrap('<div class="table-responsive"></div>');
98              }
99            }
100            // check that table is properly formed with thead headings DC-3516
101            else if ($(this).has('thead').length) {
102              if (!$(this).hasClass('enableDT')) {
103                var tablerows = $(this).find('tr').length;
104                (tablerows > 25) ? $(this).addClass('enableTextEdDT') : $(this).addClass('enableSmallDT');
105              }
106            }
107          });
108          /*
109           * Initialize DataTables for Text Editor Tables to add Responsive styles
110           */
111          if ($('.enableTextEdDT').length) {
112            $(once('.enableTextEdDT', 'body')).each(function () {
113              $('.enableTextEdDT').DataTable(dtTextEd_config);
114            });
115          }
116          /*
117          * Initialize DataTables for Text Editor Tables to add Responsive styles without search for tables less than 25 rows
118          */
119          if ($('.enableSmallDT').length) {
120            $(once('.enableSmallDT', 'body')).each(function () {
121              $('.enableSmallDT').DataTable(dtSmallTable_config);
122              $(this).find('th').removeClass('sorting');
123            });
124          }
125

126          // DC-4055 fixing responsive issues with datatables in accordions
127          $('.accordion-collapse').on('show.bs.collapse', function () {
128            $(this).find('.dataTable').DataTable().columns.adjust().responsive.recalc();
129            setTimeout(function () { $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust(); }, 100);
130            onResize(this);
131          });
132      }
133
134      function onResize(accordionitem) {
135        setTimeout(function () {
136          let tablewidth = $(accordionitem).find('.text-formatted').width();
137          $(accordionitem).find('.dataTable').css('width', tablewidth);
138        }, 100);
139      }
140
141    },
142  };
143}(jQuery));