@castlabs/ui 5.4.3 → 5.5.0

package/dist/castlabs-ui.core.js

@@ -214,7 +214,7 @@ function clMatomoSetup () {
 
 function clTableSetupResize (id) {
   document.querySelectorAll(`#${id} .cl-resizer`).forEach(resizer => {
-    clTableSetResizeListeners(resizer)
+    clTableSetResizeListeners(resizer, id)
   })
 }
 
@@ -243,37 +243,69 @@ function clTableSortStatic (id, col) {
 }
 
 let lastX = 0
-let column = null
+let nextCol = null
+
+function clTableSetResizeListeners (resizer, id) {
+  const nowrap = !!document.querySelector(`#${id}.cl-table-nowrap`) // are we in nowrap mode?
 
-function clTableSetResizeListeners (resizer) {
   resizer.addEventListener('mousedown', mousedown => {
     mousedown.preventDefault()
-    column = mousedown.target ? mousedown.target.parentElement : null
+    nextCol = mousedown.target ? mousedown.target.parentElement : null
     lastX = mousedown.pageX
   })
 
   document.addEventListener('mousemove', mousemove => {
-    if (column !== null) {
+    if (nextCol !== null) {
       mousemove.preventDefault()
       const delta = mousemove.pageX - lastX
       lastX = mousemove.pageX
-      column.style.width = column.offsetWidth - delta + 'px'
-      const prevElement = column.previousElementSibling
-      if (prevElement != null) {
-        prevElement.style.width = prevElement.offsetWidth + delta + 'px'
+
+      const colIndex = getColIndex(nextCol)
+      if (nowrap) {
+        // in nowrap mode we only adjust the first col
+        document
+          .querySelectorAll(
+            `#${id} tr th:nth-child(${colIndex - 1}), #${id} tr td:nth-child(${colIndex - 1})`
+          )
+          .forEach(cel => {
+            const width =
+              (cel.style.maxWidth === '' ? cel.offsetWidth : parseInt(cel.style.maxWidth)) + delta
+            cel.style.width = (width > 32 ? width : 32) + 'px'
+            cel.style.maxWidth = (width > 32 ? width : 32) + 'px'
+          })
+      } else {
+        // in regular mode we shrink one and enlarge the other col
+        document.querySelectorAll(`#${id} tr td:nth-child(${colIndex - 1})`).forEach(cel => {
+          const width = cel.offsetWidth + delta
+          cel.style.width = (width > 32 ? width : 32) + 'px'
+        })
+        document.querySelectorAll(`#${id} tr td:nth-child(${colIndex})`).forEach(cel => {
+          const width = cel.offsetWidth - delta
+          cel.style.width = (width > 32 ? width : 32) + 'px'
+        })
       }
     }
   })
 
   document.addEventListener('mouseup', mouseup => {
-    if (column !== null) {
+    if (nextCol !== null) {
       mouseup.preventDefault()
       lastX = 0
-      column = null
+      nextCol = null
     }
   })
 }
 
+function getColIndex (col) {
+  // calculate index of a col in a row
+  let colNo = 0
+  while (col) {
+    colNo++
+    col = col.previousElementSibling
+  }
+  return colNo
+}
+
 
 
 // -----------------------------------------------------------------------------