Open tables in a pop-up when viewed in expanded mode

assets/js/expandable-table.js

@@ -0,0 +1,110 @@
+(function () {
+  'use strict';
+
+  var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  // Makes a scroll container keyboard accessible only when it actually scrolls
+  function updateScrollable(el, label) {
+    var scrolls = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+    if (scrolls) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'region');
+      el.setAttribute('aria-label', label);
+    } else {
+      el.removeAttribute('tabindex');
+      el.removeAttribute('role');
+      el.removeAttribute('aria-label');
+    }
+  }
+
+  function tableLabel(wrap) {
+    return (wrap.dataset.title || 'Table') + ' (scrollable)';
+  }
+
+  function init() {
+    document.querySelectorAll('.expandable-table-btn').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var wrap = btn.closest('.expandable-table-wrap');
+        var modal = wrap.nextElementSibling;
+        openModal(wrap, modal);
+      });
+    });
+
+    document.querySelectorAll('.expandable-table-wrap').forEach(function (wrap) {
+      var inner = wrap.querySelector('.expandable-table-inner');
+      var check = function () { updateScrollable(inner, tableLabel(wrap)); };
+      check();
+      if (window.ResizeObserver) {
+        new ResizeObserver(check).observe(inner);
+      } else {
+        window.addEventListener('resize', check);
+      }
+    });
+  }
+
+  function openModal(wrap, modal) {
+    var title = wrap.dataset.title || '';
+    modal.querySelector('.expandable-table-title').textContent = title;
+    if (title) modal.setAttribute('aria-label', title);
+
+    var body = modal.querySelector('.expandable-table-body');
+    body.innerHTML = '';
+    var clone = wrap.querySelector('.expandable-table-inner').cloneNode(true);
+    // The modal body is the scroll container, so the cloned wrapper must not be a second tab stop
+    clone.removeAttribute('tabindex');
+    clone.removeAttribute('role');
+    clone.removeAttribute('aria-label');
+    body.appendChild(clone);
+
+    modal.removeAttribute('hidden');
+    document.body.classList.add('expandable-table-open');
+    updateScrollable(body, tableLabel(wrap));
+
+    var closeBtn = modal.querySelector('.expandable-table-close');
+    closeBtn.focus();
+
+    function close() {
+      modal.setAttribute('hidden', '');
+      document.body.classList.remove('expandable-table-open');
+      btn.focus();
+      modal.querySelector('.expandable-table-overlay').removeEventListener('click', close);
+      document.removeEventListener('keydown', onKey);
+    }
+
+    var btn = wrap.querySelector('.expandable-table-btn');
+    closeBtn.onclick = close;
+    modal.querySelector('.expandable-table-overlay').addEventListener('click', close);
+
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        close();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+
+      // Keep focus inside the dialog while it is open
+      var items = modal.querySelector('.expandable-table-dialog').querySelectorAll(FOCUSABLE);
+      if (!items.length) return;
+      var first = items[0];
+      var last = items[items.length - 1];
+      var active = document.activeElement;
+      if (!modal.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      } else if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener('keydown', onKey);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

assets/scss/_styles_project.scss

@@ -694,4 +694,154 @@ img.ToC-icon{
         overflow-y: auto;
         padding-top: 1.25rem;
     }
-}
+}
+
+// Expandable table modal
+
+.expandable-table-wrap {
+    margin-bottom: $spacer;
+
+    .expandable-table-toolbar {
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: 0.25rem;
+    }
+
+    .expandable-table-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border: 1px solid $gray-border;
+        color: $link-color;
+        background: transparent;
+        border-radius: 4px;
+        white-space: nowrap;
+
+        &:hover {
+            background: $gray-100;
+            border-color: $link-color;
+        }
+
+        &:focus {
+            outline: 2px solid $link-color;
+            outline-offset: 2px;
+        }
+    }
+
+    .expandable-table-inner {
+        overflow-x: auto;
+
+        // Docsy makes tables display:block with overflow:auto; keep the wrapper as the only scroll container
+        table {
+            display: table;
+            overflow: visible;
+            width: auto;
+            min-width: 100%;
+        }
+    }
+}
+
+.expandable-table-inner[tabindex],
+.expandable-table-body[tabindex] {
+    &:focus-visible {
+        outline: 2px solid $link-color;
+        outline-offset: 2px;
+    }
+}
+
+body.expandable-table-open {
+    overflow: hidden;
+}
+
+.expandable-table-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &[hidden] { display: none; }
+
+    .expandable-table-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    .expandable-table-dialog {
+        position: relative;
+        z-index: 1;
+        width: 90%;
+        max-width: 1100px;
+        max-height: 85vh;
+        background: white;
+        border-radius: 6px;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .expandable-table-header {
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid $gray-border;
+        background: $gray-100;
+        display: grid;
+        grid-template-columns: 1fr minmax(0, auto) 1fr;
+        align-items: center;
+        gap: 1rem;
+
+        .expandable-table-title {
+            grid-column: 2;
+            grid-row: 1;
+            text-align: center;
+            font-weight: 600;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .expandable-table-close {
+            grid-column: 1;
+            grid-row: 1;
+            justify-self: start;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+            font-size: 0.875rem;
+
+            &:focus {
+                outline: 2px solid $link-color;
+                outline-offset: 2px;
+            }
+        }
+    }
+
+    .expandable-table-body {
+        overflow: auto;
+        padding: 1.25rem;
+
+        .expandable-table-inner {
+            border: none;
+            border-radius: 0;
+            overflow: visible;
+            display: flex;
+        }
+
+        // Auto margins center small tables in the flex container; shrinking lets wide tables wrap their text to fit the dialog
+        // The modal is outside .expandable-table-wrap, so reset Docsy's display:block/overflow:auto here too; the modal body must be the only (focusable) scroll container
+        .expandable-table-inner table { display: table; overflow: visible; flex: 0 1 auto; width: auto; max-width: 100%; margin: 0 auto !important; }
+        .expandable-table-inner th,
+        .expandable-table-inner td { white-space: normal; overflow-wrap: break-word; }
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .expandable-table-modal .expandable-table-dialog {
+        width: 95%;
+        max-height: 90vh;
+    }
+}

content/en/docs/community-tools/contribute-to-mendix-docs/markdown-shortcodes.md

@@ -108,6 +108,53 @@ public class Hello1
 
 2. Second list item
 
+### Expandable Tables
+
+Use the `expandable-table` shortcode to add an **Expand Table** button above a wide table. When readers click the button, the table opens in a window on the same page, which makes it easier to read. Place the table between the opening and closing tags, with a blank line after the opening tag and before the closing tag:
+
+```md
+{{% expandable-table title="Attribute Mapping" %}}
+
+| IdP Attribute | Configured Entity Attribute |
+| --- | --- |
+| email | Email |
+| name | FullName |
+
+{{% /expandable-table %}}
+```
+
+The optional `title` parameter sets the title shown at the top of the window. If you omit it or leave it blank, the window has no title.
+
+Here is an example:
+
+{{% expandable-table title="Attribute Mapping" %}}
+
+| IdP Attribute | Configured Entity Attribute |
+| --- | --- |
+| email | Email |
+| name | FullName |
+
+{{% /expandable-table %}}
+
+#### Expandable Tables in Lists
+
+To use the shortcode in a list item, indent the shortcode tags and the table by four spaces, like any other content in the list item, and use the `<` delimiter instead of `%`. The shortcode removes the indentation from the table, so the table does not render as a code block:
+
+```md
+1. Review the mapping:
+
+    {{< expandable-table title="Attribute Mapping" >}}
+
+    | IdP Attribute | Configured Entity Attribute |
+    | --- | --- |
+    | email | Email |
+    | name | FullName |
+
+    {{< /expandable-table >}}
+
+2. Continue with the next step.
+```
+
 ### Images (Figures)
 
 #### Image with Alt Text and Max-Width Class

content/en/docs/marketplace/platform-supported-content/modules/SAML/saml-installation-configuration.md

@@ -62,6 +62,8 @@ If you use this method, do not forget to set the **SSOLandingPage** constant to
 
 The table below introduces you to several key updates when you upgrade the SAML module from V3.x to V4.x.
 
+{{% expandable-table title="Changes in SAML Module Version 4.X" %}}
+
 | Feature | Changes in Version 4.X |
 | --- | --- |
 | SSO Configuration | You can perform SSO configuration during design time and deploy time. <br>For versions below 4.2.0, the module introduced deploy-time configuration and `Custom_Create_IdPConfiguration` microflow for customized SSO configuration. <br> From version 4.2.0 onwards, you can instead use the `IdPConfiguration_MicroflowName` constant and configure your custom microflow name in it. |
@@ -70,6 +72,8 @@ The table below introduces you to several key updates when you upgrade the SAML
 | InCommon Federation Support | Pre-configured support for InCommon Federation has been removed. You now need to create custom user provisioning microflows in version 4.0.0 |
 | MxModeleReflection | In the **MxObjects_Overview** page, the MxModeleReflection module refresh is no longer required. It is handled automatically in the **SAML20.Startup**. |
 
+{{% /expandable-table %}}
+
 ## Choosing a SAML Configuration Approach{#config-approach}
 
 The SAML module offers several ways to configure the Service Provider (SP) and Identity Provider (IdP). The best approach depends on when you want to define the configuration, how you deploy your applications, and whether you need to support one or multiple IdPs.
@@ -216,6 +220,8 @@ The following entities are used to create IdP configurations:
 
 The table below shows you the different attributes and their values for quick reference. You can see the details of these attributes of the above entities in the [Reference Guide for SAML IdP Configuration](/appstore/modules/saml/idp-attributes/) document.
 
+{{% expandable-table title="IdP Configuration Attributes" %}}
+
 | IDPConfiguration(Non-Persistable entity) | Description | Default Value |
 | --- | --- | --- |
 | **Alias** (mandatory) | This represents IdPconfiguration Alias | |
@@ -254,6 +260,8 @@ The table below shows you the different attributes and their values for quick re
 | **EncryptionKeyLength** | This constant represents the Encryption length | 2048 bits |
 | Active | After completion of IdP config it will make the Toggle Active | true |
 
+{{% /expandable-table %}}
+
 Deploy the application and log in with the SSO. For more information, see the [Deploy the Application and Login with SSO](#deploy-application) section above.
 
 ### Manual Configuration{#runtime-config}