[EQK-24] Results table: add resizable columns

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css

@@ -11,9 +11,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.foundation-layout-panel-content {
-    overflow: hidden;
-}
 
 .foundation-layout-util-vmargin {
     margin: 0.625rem 0;
@@ -50,6 +47,7 @@
     background-color: #fff;
     border: 1px solid #e9e9e9;
     border-radius: 0.25rem;
+    box-sizing: border-box;
 }
 
 .eqk-action-label {
@@ -69,4 +67,4 @@
 
 .coral3-Dialog--error .coral3-Dialog-wrapper {
     max-width: 550px;
-}
+}

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css

@@ -45,6 +45,7 @@
 .results-table-cell {
     position: relative;
     vertical-align: top;
+    word-break: break-word;
 }
 
 .results-table-cell.ordinal {
@@ -57,10 +58,6 @@
     padding: 0 0.625rem 0 0.3125rem;
 }
 
-.results-table-cell {
-    position: relative;
-}
-
 .results-table-cell .actions {
     position: absolute;
     bottom: 0.3125rem;
@@ -80,3 +77,29 @@
     padding: 0.3125rem;
     margin: 0 0.3125rem 0 0;
 }
+
+#resultsTable table {
+    table-layout: fixed;
+}
+
+#resultsTable coral-table-headercell-content {
+    overflow: hidden;
+}
+
+#resultsTable .results-table-cell:first-of-type,
+#resultsTable .coral-Table-headerCell:first-of-type {
+    width: 40px;
+}
+
+#resultsTable th:not(:first-child):not(:last-child) .resizer {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    content: '';
+    background-color: #ececec;
+    width: 5px;
+    cursor: ew-resize;
+    z-index: 10;
+}

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js.txt

@@ -27,3 +27,5 @@ noop-adapter.js
 #base=js
 profiles.js
 startup.js
+
+results/table.js

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js

@@ -19,7 +19,7 @@
     const registry = $(window).adaptTo('foundation-registry');
     const foundationUi = $(window).adaptTo('foundation-ui');
 
-    function executeAndUpdateUi(args) {
+    function executeAndUpdateUi(args, saveColStyles = false) {
         if (!args || !args.query) {
             return;
         }
@@ -42,7 +42,8 @@
                 const isBackendException = $errorMessage.length;
                 if (!isBackendException) {
                     $('#resultsColumn').empty().prepend($result.html());
-                    $(document).trigger('eqk-success-response', args);
+                    const table = document.getElementById('resultsTable');
+                    Coral.commons.ready(table, ns.initResizableCols.bind(null, saveColStyles));
                 } else {
                     foundationUi.alert('EToolbox Query Console', 'Could not retrieve results: ' + $errorMessage.text(), 'error');
                     $errorMessage.remove();
@@ -63,7 +64,7 @@
         if ($button.is('.coral3-Button--primary')) {
             return;
         }
-        executeAndUpdateUi(getQueryArgs($button));
+        executeAndUpdateUi(getQueryArgs($button), true);
     });
 
     function getQueryArgs($navButton) {
@@ -108,7 +109,7 @@
                 return;
             }
             const args = getQueryArgs($button);
-            executeAndUpdateUi(args);
+            executeAndUpdateUi(args, true);
         }
     });
 })(document, Granite.$, Granite.Eqk = (Granite.Eqk || {}));

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js

@@ -0,0 +1,106 @@
+(function ($, ns) {
+    'use strict';
+
+    const TABLE_RESULTS_ID = '#resultsTable';
+    const COL_STYLES_ID = 'colStyles';
+    const RESIZER_CLASS = 'resizer';
+
+    $(`<style id="${COL_STYLES_ID}">`).prependTo(document.head);
+    const $savedColStyles = $(`#${COL_STYLES_ID}`);
+
+    ns.initResizableCols = (saveColStyles, table) => {
+        // Hack for Coral to enable sticky header scrolling with content
+        table._preventLayoutStickyCellOnScroll = false;
+        table._layoutStickyCellOnScroll = true;
+
+        if (!saveColStyles) {
+            $savedColStyles.text('');
+        }
+        $(table).find('table colgroup').remove();
+
+        $(table).find('coral-table-headercell-content').each((i, coralCell) => {
+            const $resizer = $(`<div class="${RESIZER_CLASS}">`);
+            $resizer.appendTo($(coralCell));
+            createResizableColumn($(coralCell), $(coralCell).closest('th'), $resizer);
+        });
+    };
+
+    const createResizableColumn = function ($coralCell, $col, $resizer) {
+        let x = 0;
+        let curColWidth = 0;
+        let nextColWidth = 0;
+
+        const $nextCol = $col.next();
+
+        const mouseDownHandler = function (e) {
+            x = e.clientX;
+
+            curColWidth = parseFloat($col.css('width'));
+            if ($nextCol.length) {
+                nextColWidth = parseFloat($nextCol.css('width'));
+            }
+
+            $(document).on('mousemove', mouseMoveHandler);
+            $(document).on('mouseup', mouseUpHandler);
+        };
+
+        const mouseMoveHandler = (e) => requestAnimationFrame(() => {
+            $savedColStyles.text('');
+
+            const dx = e.clientX - x;
+
+            const curColMinWidth = parseFloat($col.css('min-width')) || Number.POSITIVE_INFINITY;
+            const nextColMinWith = parseFloat($nextCol.css('min-width')) || Number.POSITIVE_INFINITY;
+            const curColPadding = getPadding($col);
+            const nextColPadding = getPadding($nextCol);
+
+            if (curColWidth + dx + curColPadding < curColMinWidth) return;
+            if ($nextCol.length && nextColWidth - dx + nextColPadding < nextColMinWith) return;
+
+            setWidth($col, curColWidth + dx, curColPadding);
+            $nextCol.length && setWidth($nextCol, nextColWidth - dx, nextColPadding);
+        });
+
+        const mouseUpHandler = function () {
+            $(document).off('mousemove', mouseMoveHandler);
+            $(document).off('mouseup', mouseUpHandler);
+
+            saveColStyles();
+        };
+
+        $resizer.on('mousedown', mouseDownHandler);
+    };
+
+    function saveColStyles() {
+        const thSelector = `${TABLE_RESULTS_ID} th`;
+        let result = '';
+
+        $(thSelector).each((i, col) => {
+            result += `${thSelector}:nth-child(${i + 1}) { 
+            width: ${$(col).css('width')};
+            }`;
+
+            result += `${thSelector}:nth-child(${i + 1}) coral-table-headercell-content { 
+            width: ${$(col).children().first().css('width')} !important;
+            }`;
+        });
+
+        $savedColStyles.text(result);
+    }
+
+    function setWidth($col, width, padding) {
+        $col.css('width', width);
+        const $coralCell = $col.children('coral-table-headercell-content').first();
+        $coralCell.css('width', width + padding);
+    }
+
+    function getPadding($col) {
+        if ($col.css('box-sizing') === 'border-box') {
+            return 0;
+        }
+
+        const padLeft = $col.css('padding-left');
+        const padRight = $col.css('padding-right');
+        return (parseFloat(padLeft) + parseFloat(padRight));
+    }
+})(Granite.$, Granite.Eqk = (Granite.Eqk || {}));