sqlui 0.1.55 → 0.1.56

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ac5672ec8d9668ee10c58ccf407a63f297b411ff055cadfc89ce9090369bb2d
-  data.tar.gz: 146c7af99506528b86b8721db25dfffec71dbb5af32f9ed711a7b7b781ae0dbb
+  metadata.gz: 54098affe9aed43da3e5cfb8ac348989f4965f790ecdfec200ec9e79d3b7b532
+  data.tar.gz: cd5b2dea4f9f7afc1a465e6c6d68f8e84982547032e90fd5f979c4f6f72eb452
 SHA512:
-  metadata.gz: 31d766b04ba02bf3f0bc4d369614b87bc5c527e6f96634d3019875f71cb84d6906aba812d54175ca65782cadee47355df87018c8c190a8cf33fce2a306a32def
-  data.tar.gz: c05a7fff480f3fe42925a7a07cddebddbff979f74e3bdac898a585439d251c180d682da66a7e6b98d4f0e175def931f03dff23d3d5406fd9c273f1953dcc0d6a
+  metadata.gz: 9444bf4a2cb0bb5d9f397d2ed6ad0ef212846db09172314083f7f951f3a1e58ec9965f1b6f08432ce74739cdf7e35b7d112b4ba0a4c9a5c62abdb7763e8c371a
+  data.tar.gz: c37479f67876f510a7a6c65c72bf4abbb7c0eeb7bd3b82fc6f0571f91a369685db75b177b50db7b95a533254c40a769248b588d79b41cd79fd475a26d6999c14

data/.release-version

@@ -1 +1 @@
-0.1.55
+0.1.56

data/client/resources/sqlui.css

@@ -283,7 +283,6 @@ table {
     color: #333;
     font-size: 18px;
     width: 100%;
-    table-layout: auto; /* Will be overridden if a column is resized. */
 }
 
 table td:last-child, table th:last-child {

data/client/resources/sqlui.js

@@ -24295,17 +24295,22 @@
      return match ? match[1] : identifier
    }
 
-   const drag = {
-     containerElement: null,
-     tableElement: null,
-     thElement: null,
-     colElement: null,
-     otherColWidths: null,
-     lastColElement: null
-   };
+   class Drag {
+     scrolled = null
+     scrollOffset = null
+     containerOffset = null
+     containerWidth = null
+     thElement = null
+     colElement = null
+     otherColWidths = null
+     lastColElement = null
+   }
+
+   let drag = new Drag();
 
    document.addEventListener('mousedown', (event) => {
      if (event.target.classList.contains('col-resizer')) {
+       drag = new Drag();
        event.preventDefault();
        const thElement = event.target.parentElement.parentElement;
        if (thElement.tagName.toLowerCase() !== 'th') {
@@ -24313,57 +24318,43 @@
        }
        const trElement = thElement.parentElement;
        const theadElement = trElement.parentElement;
-       drag.tableElement = theadElement.parentElement;
-       drag.containerElement = drag.tableElement.parentElement;
+       const tableElement = theadElement.parentElement;
+       const containerElement = tableElement.parentElement;
+       drag.containerWidth = containerElement.clientWidth;
+       drag.scrollOffset = containerElement.scrollLeft;
+       drag.scrolled = drag.scrollOffset > 0;
+       drag.containerOffset = containerElement.offsetLeft;
        drag.thElement = thElement;
        drag.colElement = document.getElementById(event.target.dataset.colId);
 
        const colElements = Array.from(drag.colElement.parentElement.childNodes);
        drag.lastColElement = colElements[colElements.length - 1];
-       drag.otherColWidths = [];
+       drag.otherColsWidth = 0;
        for (let i = 0; i < colElements.length - 1; i++) {
          if (colElements[i] !== drag.colElement) {
-           drag.otherColWidths.push(colElements[i].getBoundingClientRect().width);
+           drag.otherColsWidth += colElements[i].getBoundingClientRect().width;
          }
+         colElements[i].style.width = `${colElements[i].getBoundingClientRect().width}px`;
        }
-       colElements.forEach((element) => {
-         element.style.width = `${element.getBoundingClientRect().width}px`;
-       });
-       drag.tableElement.style.tableLayout = 'fixed';
+       tableElement.style.tableLayout = 'fixed';
      }
    });
 
    document.addEventListener('mouseup', (event) => {
-     drag.containerElement = null;
-     drag.tableElement = null;
-     drag.thElement = null;
-     drag.colElement = null;
-     drag.otherColWidths = null;
-     drag.lastColElement = null;
+     drag = new Drag();
    });
 
    document.addEventListener('mousemove', (event) => {
-     if (drag.colElement) {
-       const scrollOffset = drag.containerElement.scrollLeft;
-       const scrolled = scrollOffset > 0;
-       const containerOffset = drag.containerElement.offsetLeft;
-       const newColumnWidth = Math.max(0, scrollOffset + (event.clientX - containerOffset) - drag.thElement.offsetLeft);
-       if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
-
-       drag.colElement.style.width = `${newColumnWidth}px`;
-       let runningWidth = newColumnWidth;
-       drag.otherColWidths.forEach((width) => {
-         runningWidth += width;
-       });
-       let remainingWidth;
-       if (scrolled) {
-         remainingWidth = (scrollOffset + drag.containerElement.clientWidth) - runningWidth;
-       } else {
-         remainingWidth = Math.max(10, drag.containerElement.clientWidth - runningWidth);
-       }
-       drag.lastColElement.style.width = `${remainingWidth}px`;
-       runningWidth += remainingWidth;
-       drag.tableElement.style.width = `${runningWidth}px`;
+     if (!drag.colElement) return
+
+     const newColumnWidth = Math.max(0, drag.scrollOffset + (event.clientX - drag.containerOffset) - drag.thElement.offsetLeft);
+     if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
+
+     drag.colElement.style.width = `${newColumnWidth}px`;
+     if (drag.scrolled) {
+       drag.lastColElement.style.width = ((drag.scrollOffset + drag.containerWidth) - (newColumnWidth + drag.otherColsWidth)) + 'px';
+     } else {
+       drag.lastColElement.style.width = (Math.max(10, drag.containerWidth - (newColumnWidth + drag.otherColsWidth))) + 'px';
      }
    });
 
@@ -24376,6 +24367,7 @@
      const tableElement = document.createElement('table');
      containerElement.appendChild(tableElement);
      if (id) tableElement.id = id;
+     tableElement.style.tableLayout = 'auto';
 
      const colgroupElement = document.createElement('colgroup');
      tableElement.appendChild(colgroupElement);
@@ -24386,45 +24378,52 @@
      const headerTrElement = document.createElement('tr');
      theadElement.appendChild(headerTrElement);
 
-     const nonLastColElements = [];
-     columns.forEach(function (column, index) {
-       const headerElement = document.createElement('th');
-       headerTrElement.appendChild(headerElement);
-
-       const contentWrapperElement = document.createElement('div');
-       contentWrapperElement.classList.add('col-content-wrapper');
-       headerElement.appendChild(contentWrapperElement);
-
-       const nameElement = document.createElement('div');
-       nameElement.classList.add('col-name');
-       contentWrapperElement.appendChild(nameElement);
-
-       const colElement = document.createElement('col');
-       colElement.id = `${id}-col-${index}`;
-       colgroupElement.appendChild(colElement);
-       nonLastColElements.push(colElement);
-
-       const resizerElement = document.createElement('div');
-       resizerElement.classList.add('col-resizer');
-       resizerElement.dataset.colId = colElement.id;
-       contentWrapperElement.appendChild(resizerElement);
-
-       nameElement.innerText = column;
-     });
      if (columns.length > 0) {
+       const colElements = [];
+       columns.forEach(function (column, index) {
+         const headerElement = document.createElement('th');
+         headerTrElement.appendChild(headerElement);
+
+         const contentWrapperElement = document.createElement('div');
+         contentWrapperElement.classList.add('col-content-wrapper');
+         headerElement.appendChild(contentWrapperElement);
+
+         const nameElement = document.createElement('div');
+         nameElement.classList.add('col-name');
+         contentWrapperElement.appendChild(nameElement);
+
+         const colElement = document.createElement('col');
+         colElement.id = `${id}-col-${index}`;
+         colgroupElement.appendChild(colElement);
+         colElements.push(colElement);
+
+         const resizerElement = document.createElement('div');
+         resizerElement.classList.add('col-resizer');
+         resizerElement.dataset.colId = colElement.id;
+         contentWrapperElement.appendChild(resizerElement);
+
+         nameElement.innerText = column;
+       });
+
        headerTrElement.appendChild(document.createElement('th'));
        const lastColElement = document.createElement('col');
        lastColElement.style.width = '100%';
+       colElements.push(lastColElement);
+
+       let columnsWidth;
        function resize () {
-         let runningWidth = 0;
-         const colElements = Array.from(tableElement.getElementsByTagName('col'));
-         nonLastColElements.forEach((element, index) => {
-           runningWidth += element.getBoundingClientRect().width;
-         });
-         const remainingWidth = Math.max(10, containerElement.clientWidth - runningWidth);
-         colElements[colElements.length - 1].style.width = `${remainingWidth}px`;
-         runningWidth += remainingWidth;
-         tableElement.style.width = `${runningWidth}px`;
+         if (tableElement.style.tableLayout === 'auto') {
+           return
+         }
+         if (!columnsWidth) {
+           columnsWidth = 0;
+           colElements.slice(0, -1).forEach((element, index) => {
+             columnsWidth += element.getBoundingClientRect().width;
+           });
+         }
+         const remainingWidth = Math.max(10, containerElement.clientWidth - columnsWidth);
+         colElements.slice(-1)[0].style.width = `${remainingWidth}px`;
+         tableElement.style.width = `${columnsWidth + remainingWidth}px`;
        }
 
        const resizeObserver = new ResizeObserver(resize);
@@ -24440,12 +24439,23 @@
        mutationObserver.observe(containerElement, { childList: true });
        colgroupElement.appendChild(lastColElement);
 
-       createTableBody(rows, tableElement, cellRenderer);
+       setTableBody(rows, tableElement, cellRenderer);
      }
+
+     return tableElement
+   }
+
+   function getTableBody (tableElement) {
+     return tableElement.getElementsByTagName('tbody')[0]
    }
 
-   function createTableBody (rows, tableElement, cellRenderer) {
-     const tbodyElement = document.createElement('tbody');
+   function setTableBody (rows, tableElement, cellRenderer) {
+     tableElement.style.tableLayout = 'auto';
+
+     let tbodyElement = getTableBody(tableElement);
+     tbodyElement?.parentElement?.removeChild(tbodyElement);
+
+     tbodyElement = document.createElement('tbody');
      tableElement.appendChild(tbodyElement);
 
      let highlight = false;
@@ -24694,6 +24704,8 @@
        selected.style.display = 'none';
      });
 
+     setStatus('');
+
      switch (window.tab) {
        case 'query':
          selectResultTab(internal);
@@ -25274,28 +25286,27 @@
 
      displaySqlFetchResultStatus(fetch);
 
-     const resultBody = document.querySelector('table[id="result-table"] > tbody');
      const pageStart = fetch.page * fetch.pageSize;
      const rows = fetch.result.rows.slice(pageStart, pageStart + fetch.pageSize);
-     if (resultBody) {
+
+     let tableElement = document.getElementById('result-table');
+     if (tableElement) {
+       const resultBody = getTableBody(tableElement);
        if (resultBody.dataset.page === fetch.page) {
          // Results already displayed.
          return
        }
-       resultBody.parentElement.removeChild(resultBody);
-       createTableBody(rows, document.getElementById('result-table'), resultCellRenderer);
+       setTableBody(rows, tableElement, resultCellRenderer);
      } else {
        clearResultBox();
-       createTable(
+       tableElement = createTable(
          document.getElementById('result-box'),
          fetch.result.columns,
          rows,
          'result-table',
          resultCellRenderer);
      }
-     document
-       .querySelector('table[id="result-table"] > tbody')
-       .setAttribute('data-page', fetch.page);
+     tableElement.setAttribute('data-page', fetch.page);
    }
 
    function disableDownloadButtons () {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.55
+  version: 0.1.56
 platform: ruby
 authors:
 - Nick Dower