Update some JS Libraries and fix small issues

- Updated JS Libraries
- Downgraded bootstrap.css to v5.0.2 which works with Bootstrap-Native.
- Fixed issue with settings being able to open/collapse on some systems.
- Added .js and .css to the exclude list for the end-of-file-fixer pre-commit

.pre-commit-config.yaml

@@ -7,6 +7,7 @@ repos:
     - id: check-json
     - id: check-toml
     - id: end-of-file-fixer
+      exclude: "(.*js$|.*css$)"
     - id: check-case-conflict
     - id: check-merge-conflict
     - id: detect-private-key

src/static/scripts/bootstrap-native.js

@@ -1,5 +1,5 @@
 /*!
-  * Native JavaScript for Bootstrap v4.0.4 (https://thednp.github.io/bootstrap.native/)
+  * Native JavaScript for Bootstrap v4.0.6 (https://thednp.github.io/bootstrap.native/)
   * Copyright 2015-2021 © dnp_theme
   * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
   */
@@ -1467,19 +1467,26 @@
     }
   }
 
-  const modalOpenClass = 'modal-open';
   const modalBackdropClass = 'modal-backdrop';
+  const offcanvasBackdropClass = 'offcanvas-backdrop';
   const modalActiveSelector = `.modal.${showClass}`;
   const offcanvasActiveSelector = `.offcanvas.${showClass}`;
-
   const overlay = document.createElement('div');
-  overlay.setAttribute('class', `${modalBackdropClass}`);
 
   function getCurrentOpen() {
     return queryElement(`${modalActiveSelector},${offcanvasActiveSelector}`);
   }
 
-  function appendOverlay(hasFade) {
+  function toggleOverlayType(isModal) {
+    const targetClass = isModal ? modalBackdropClass : offcanvasBackdropClass;
+    [modalBackdropClass, offcanvasBackdropClass].forEach((c) => {
+      removeClass(overlay, c);
+    });
+    addClass(overlay, targetClass);
+  }
+
+  function appendOverlay(hasFade, isModal) {
+    toggleOverlayType(isModal);
     document.body.appendChild(overlay);
     if (hasFade) addClass(overlay, fadeClass);
   }
@@ -1499,7 +1506,6 @@
 
     if (!currentOpen) {
       removeClass(overlay, fadeClass);
-      removeClass(bd, modalOpenClass);
       bd.removeChild(overlay);
       resetScrollbar();
     }
@@ -1518,7 +1524,6 @@
   const modalString = 'modal';
   const modalComponent = 'Modal';
   const modalSelector = `.${modalString}`;
-  // const modalActiveSelector = `.${modalString}.${showClass}`;
   const modalToggleSelector = `[${dataBsToggle}="${modalString}"]`;
   const modalDismissSelector = `[${dataBsDismiss}="${modalString}"]`;
   const modalStaticClass = `${modalString}-static`;
@@ -1567,8 +1572,11 @@
   }
 
   function afterModalHide(self) {
-    const { triggers } = self;
+    const { triggers, options } = self;
-    removeOverlay();
+    if (!getCurrentOpen()) {
+      if (options.backdrop) removeOverlay();
+      resetScrollbar();
+    }
     self.element.style.paddingRight = '';
     self.isAnimating = false;
 
@@ -1594,9 +1602,8 @@
     element.style.display = 'block';
 
     setModalScrollbar(self);
-    if (!queryElement(modalActiveSelector)) {
+    if (!getCurrentOpen()) {
       document.body.style.overflow = 'hidden';
-      addClass(document.body, modalOpenClass);
     }
 
     addClass(element, showClass);
@@ -1609,16 +1616,15 @@
 
   function beforeModalHide(self, force) {
     const {
-      element, relatedTarget, hasFade,
+      element, options, relatedTarget, hasFade,
     } = self;
-    const currentOpen = getCurrentOpen();
 
     element.style.display = '';
 
     // force can also be the transitionEvent object, we wanna make sure it's not
     // call is not forced and overlay is visible
-    if (!force && hasFade && hasClass(overlay, showClass)
+    if (options.backdrop && !force && hasFade && hasClass(overlay, showClass)
-      && !currentOpen) { // AND no modal is visible
+      && !getCurrentOpen()) { // AND no modal is visible
       hideOverlay();
       emulateTransitionEnd(overlay, () => afterModalHide(self));
     } else {
@@ -1666,7 +1672,8 @@
 
     if (self.isAnimating) return;
 
-    const { isStatic, modalDialog } = self;
+    const { options, isStatic, modalDialog } = self;
+    const { backdrop } = options;
     const { target } = e;
     const selectedText = document.getSelection().toString().length;
     const targetInsideDialog = modalDialog.contains(target);
@@ -1676,7 +1683,7 @@
       addClass(element, modalStaticClass);
       self.isAnimating = true;
       emulateTransitionEnd(modalDialog, () => staticTransitionEnd(self));
-    } else if (dismiss || (!selectedText && !isStatic && !targetInsideDialog)) {
+    } else if (dismiss || (!selectedText && !isStatic && !targetInsideDialog && backdrop)) {
       self.relatedTarget = dismiss || null;
       self.hide();
       e.preventDefault();
@@ -1734,8 +1741,9 @@
     show() {
       const self = this;
       const {
-        element, isAnimating, hasFade, relatedTarget,
+        element, options, isAnimating, hasFade, relatedTarget,
       } = self;
+      const { backdrop } = options;
       let overlayDelay = 0;
 
       if (hasClass(element, showClass) && !isAnimating) return;
@@ -1744,8 +1752,6 @@
       element.dispatchEvent(showModalEvent);
       if (showModalEvent.defaultPrevented) return;
 
-      self.isAnimating = true;
-
       // we elegantly hide any opened modal/offcanvas
       const currentOpen = getCurrentOpen();
       if (currentOpen && currentOpen !== element) {
@@ -1755,18 +1761,24 @@
         that.hide();
       }
 
-      if (!queryElement(`.${modalBackdropClass}`)) {
+      self.isAnimating = true;
-        appendOverlay(hasFade);
+
+      if (backdrop) {
+        if (!currentOpen && !hasClass(overlay, showClass)) {
+          appendOverlay(hasFade, 1);
+        } else {
+          toggleOverlayType(1);
         }
         overlayDelay = getElementTransitionDuration(overlay);
 
-      if (!hasClass(overlay, showClass)) {
+        if (!hasClass(overlay, showClass)) showOverlay();
-        showOverlay();
-      }
-
-      if (!currentOpen) {
         setTimeout(() => beforeModalShow(self), overlayDelay);
-      } else beforeModalShow(self);
+      } else {
+        beforeModalShow(self);
+        if (currentOpen && hasClass(overlay, showClass)) {
+          hideOverlay();
+        }
+      }
     }
 
     hide(force) {
@@ -1863,7 +1875,6 @@
     const { element, options } = self;
 
     if (!options.scroll) {
-      addClass(document.body, modalOpenClass);
       document.body.style.overflow = 'hidden';
       setOffCanvasScrollbar(self);
     }
@@ -1909,15 +1920,15 @@
     const self = element[offcanvasComponent];
     if (!self) return;
 
-    const { options, open, triggers } = self;
+    const { options, triggers } = self;
     const { target } = e;
     const trigger = target.closest(offcanvasToggleSelector);
 
     if (trigger && trigger.tagName === 'A') e.preventDefault();
 
-    if (open && ((!element.contains(target) && options.backdrop
+    if ((!element.contains(target) && options.backdrop
       && (!trigger || (trigger && !triggers.includes(trigger))))
-      || offCanvasDismiss.contains(target))) {
+      || offCanvasDismiss.contains(target)) {
       self.relatedTarget = target === offCanvasDismiss ? offCanvasDismiss : null;
       self.hide();
     }
@@ -1965,7 +1976,6 @@
     element.removeAttribute(ariaModal);
     element.removeAttribute('role');
     element.style.visibility = '';
-    self.open = false;
     self.isAnimating = false;
 
     if (triggers.length) {
@@ -1979,7 +1989,6 @@
       if (options.backdrop) removeOverlay();
       if (!options.scroll) {
         resetScrollbar();
-        removeClass(document.body, modalOpenClass);
       }
     }
 
@@ -2005,7 +2014,6 @@
         .filter((btn) => getTargetElement(btn) === element);
 
       // additional instance property
-      self.open = false;
       self.isAnimating = false;
       self.scrollbarWidth = measureScrollbar();
 
@@ -2017,7 +2025,8 @@
     // ========================
     toggle() {
       const self = this;
-      return self.open ? self.hide() : self.show();
+      if (hasClass(self.element, showClass)) self.hide();
+      else self.show();
     }
 
     show() {
@@ -2027,7 +2036,7 @@
       } = self;
       let overlayDelay = 0;
 
-      if (self.open || isAnimating) return;
+      if (hasClass(element, showClass) || isAnimating) return;
 
       showOffcanvasEvent.relatedTarget = relatedTarget || null;
       element.dispatchEvent(showOffcanvasEvent);
@@ -2043,12 +2052,13 @@
         that.hide();
       }
 
-      self.open = true;
       self.isAnimating = true;
 
       if (options.backdrop) {
-        if (!queryElement(`.${modalBackdropClass}`)) {
+        if (!currentOpen) {
           appendOverlay(1);
+        } else {
+          toggleOverlayType();
         }
 
         overlayDelay = getElementTransitionDuration(overlay);
@@ -2056,14 +2066,19 @@
         if (!hasClass(overlay, showClass)) showOverlay();
 
         setTimeout(() => beforeOffcanvasShow(self), overlayDelay);
-      } else beforeOffcanvasShow(self);
+      } else {
+        beforeOffcanvasShow(self);
+        if (currentOpen && hasClass(overlay, showClass)) {
+          hideOverlay();
+        }
+      }
     }
 
     hide(force) {
       const self = this;
       const { element, isAnimating, relatedTarget } = self;
 
-      if (!self.open || isAnimating) return;
+      if (!hasClass(element, showClass) || isAnimating) return;
 
       hideOffcanvasEvent.relatedTarget = relatedTarget || null;
       element.dispatchEvent(hideOffcanvasEvent);
@@ -3483,7 +3498,7 @@
     constructor: Tooltip,
   };
 
-  var version = "4.0.4";
+  var version = "4.0.6";
 
   // import { alertInit } from '../components/alert-native.js';
   // import { buttonInit } from '../components/button-native.js';

src/static/scripts/datatables.css

@@ -4,13 +4,94 @@
  *
  * To rebuild or modify this file with the latest versions of the included
  * software please visit:
- *   https://datatables.net/download/#bs5/dt-1.10.25
+ *   https://datatables.net/download/#bs5/dt-1.11.2
  *
  * Included libraries:
- *   DataTables 1.10.25
+ *   DataTables 1.11.2
  */
 
 @charset "UTF-8";
+td.dt-control {
+  background: url("https://www.datatables.net/examples/resources/details_open.png") no-repeat center center;
+  cursor: pointer;
+}
+
+tr.dt-hasChild td.dt-control {
+  background: url("https://www.datatables.net/examples/resources/details_close.png") no-repeat center center;
+}
+
+table.dataTable th.dt-left,
+table.dataTable td.dt-left {
+  text-align: left;
+}
+table.dataTable th.dt-center,
+table.dataTable td.dt-center,
+table.dataTable td.dataTables_empty {
+  text-align: center;
+}
+table.dataTable th.dt-right,
+table.dataTable td.dt-right {
+  text-align: right;
+}
+table.dataTable th.dt-justify,
+table.dataTable td.dt-justify {
+  text-align: justify;
+}
+table.dataTable th.dt-nowrap,
+table.dataTable td.dt-nowrap {
+  white-space: nowrap;
+}
+table.dataTable thead th.dt-head-left,
+table.dataTable thead td.dt-head-left,
+table.dataTable tfoot th.dt-head-left,
+table.dataTable tfoot td.dt-head-left {
+  text-align: left;
+}
+table.dataTable thead th.dt-head-center,
+table.dataTable thead td.dt-head-center,
+table.dataTable tfoot th.dt-head-center,
+table.dataTable tfoot td.dt-head-center {
+  text-align: center;
+}
+table.dataTable thead th.dt-head-right,
+table.dataTable thead td.dt-head-right,
+table.dataTable tfoot th.dt-head-right,
+table.dataTable tfoot td.dt-head-right {
+  text-align: right;
+}
+table.dataTable thead th.dt-head-justify,
+table.dataTable thead td.dt-head-justify,
+table.dataTable tfoot th.dt-head-justify,
+table.dataTable tfoot td.dt-head-justify {
+  text-align: justify;
+}
+table.dataTable thead th.dt-head-nowrap,
+table.dataTable thead td.dt-head-nowrap,
+table.dataTable tfoot th.dt-head-nowrap,
+table.dataTable tfoot td.dt-head-nowrap {
+  white-space: nowrap;
+}
+table.dataTable tbody th.dt-body-left,
+table.dataTable tbody td.dt-body-left {
+  text-align: left;
+}
+table.dataTable tbody th.dt-body-center,
+table.dataTable tbody td.dt-body-center {
+  text-align: center;
+}
+table.dataTable tbody th.dt-body-right,
+table.dataTable tbody td.dt-body-right {
+  text-align: right;
+}
+table.dataTable tbody th.dt-body-justify,
+table.dataTable tbody td.dt-body-justify {
+  text-align: justify;
+}
+table.dataTable tbody th.dt-body-nowrap,
+table.dataTable tbody td.dt-body-nowrap {
+  white-space: nowrap;
+}
+
 /*! Bootstrap 5 integration for DataTables
  *
  * ©2020 SpryMedia Ltd, all rights reserved.
@@ -143,21 +224,21 @@ div.dataTables_scrollHead table.dataTable {
   margin-bottom: 0 !important;
 }
 
-div.dataTables_scrollBody table {
+div.dataTables_scrollBody > table {
   border-top: none;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
-div.dataTables_scrollBody table thead .sorting:before,
+div.dataTables_scrollBody > table > thead .sorting:before,
-div.dataTables_scrollBody table thead .sorting_asc:before,
+div.dataTables_scrollBody > table > thead .sorting_asc:before,
-div.dataTables_scrollBody table thead .sorting_desc:before,
+div.dataTables_scrollBody > table > thead .sorting_desc:before,
-div.dataTables_scrollBody table thead .sorting:after,
+div.dataTables_scrollBody > table > thead .sorting:after,
-div.dataTables_scrollBody table thead .sorting_asc:after,
+div.dataTables_scrollBody > table > thead .sorting_asc:after,
-div.dataTables_scrollBody table thead .sorting_desc:after {
+div.dataTables_scrollBody > table > thead .sorting_desc:after {
   display: none;
 }
-div.dataTables_scrollBody table tbody tr:first-child th,
+div.dataTables_scrollBody > table > tbody tr:first-child th,
-div.dataTables_scrollBody table tbody tr:first-child td {
+div.dataTables_scrollBody > table > tbody tr:first-child td {
   border-top: none;
 }
 
@@ -235,4 +316,11 @@ div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:last-
   padding-right: 0;
 }
 
+table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) {
+  --bs-table-accent-bg: transparent;
+}
+table.dataTable.table-striped > tbody > tr.odd {
+  --bs-table-accent-bg: var(--bs-table-striped-bg);
+}
+
 

src/static/templates/admin/settings.hbs

@@ -12,9 +12,7 @@
                 {{#each config}}
                 {{#if groupdoc}}
                 <div class="card bg-light mb-3">
-                    <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#g_{{group}}">
+                    <button id="b_{{group}}" type="button" class="card-header text-start btn btn-link text-decoration-none" aria-expanded="false" aria-controls="g_{{group}}" data-bs-toggle="collapse" data-bs-target="#g_{{group}}">{{groupdoc}}</button>
-                        <button type="button" class="btn btn-link text-decoration-none collapsed" data-bs-toggle="collapse" data-bs-target="#g_{{group}}">{{groupdoc}}</button>
-                    </div>
                     <div id="g_{{group}}" class="card-body collapse">
                         {{#each elements}}
                         {{#if editable}}
@@ -61,10 +59,8 @@
                 {{/each}}
 
                 <div class="card bg-light mb-3">
-                    <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#g_readonly">
+                    <button id="b_readonly" type="button" class="card-header text-start btn btn-link text-decoration-none" aria-expanded="false" aria-controls="g_readonly"
-                        <button type="button" class="btn btn-link text-decoration-none collapsed" data-bs-toggle="collapse" data-bs-target="#g_readonly">Read-Only Config</button>
+                            data-bs-toggle="collapse" data-bs-target="#g_readonly">Read-Only Config</button>
-                    </div>
-
                     <div id="g_readonly" class="card-body collapse">
                         <div class="small mb-3">
                             NOTE: These options can't be modified in the editor because they would require the server
@@ -109,9 +105,8 @@
 
                 {{#if can_backup}}
                 <div class="card bg-light mb-3">
-                    <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#g_database">
+                    <button id="b_database" type="button" class="card-header text-start btn btn-link text-decoration-none" aria-expanded="false" aria-controls="g_database"
-                        <button type="button" class="btn btn-link text-decoration-none collapsed" data-bs-toggle="collapse" data-bs-target="#g_database">Backup Database</button>
+                            data-bs-toggle="collapse" data-bs-target="#g_database">Backup Database</button>
-                    </div>
                     <div id="g_database" class="card-body collapse">
                         <div class="small mb-3">
                             WARNING: This function only creates a backup copy of the SQLite database.