@castlabs/ui 8.4.0 → 8.5.0

package/dist/castlabs-ui.module.js

@@ -1,4 +1,4 @@
-/* @castlabs/ui v8.4.0 */
+/* @castlabs/ui v8.5.0 */
 
 /*!
   * Bootstrap v5.3.8 (https://getbootstrap.com/)
@@ -112,6 +112,8 @@ function clSidenavInitiallyOpen () {
   }
 }
 
+import { clGetSettingsTable, clSetSettingsTable } from '../../../utils/ui'
+
 export function clTableSetupResize (id, auto = false) {
   document.querySelectorAll(`#${id} .cl-resizer`).forEach(resizer => {
     clTableSetResizeListeners(resizer, auto)
@@ -145,6 +147,60 @@ export function clTableSortStatic (id, col) {
 let lastX = 0
 let nextCol = null
 
+function isNowrap (id) {
+  return !!document.querySelector(`#${id}.cl-table-nowrap`)
+}
+
+export function clTableGetColWidthArray (id) {
+  const widths = []
+  document.querySelectorAll(`#${id} tr th`).forEach(cel => {
+    widths.push(parseInt('0' + cel.style.width)) // get manual width as int, or 0 if no manual width
+  })
+  while (widths[widths.length - 1] === 0) {
+    widths.pop() // remove trailing zeroes
+  }
+  return widths
+}
+
+function saveColWidth (id) {
+  if (isNowrap(id)) {
+    // saving only works for nowrap tables that have a settings/save ID set
+    const tableId = document.querySelector(`#${id}`)?.closest('.cl-table-scroll')?.id
+    if (!tableId) return
+
+    const widths = clTableGetColWidthArray(id)
+
+    const settings = clGetSettingsTable(tableId) ?? {}
+    settings.w = widths
+    clSetSettingsTable(tableId, settings)
+  }
+}
+
+export function clTableRestoreColWidths (id, override = undefined) {
+  if (isNowrap(id)) {
+    const tableId = document.querySelector(`#${id}`)?.closest('.cl-table-scroll')?.id
+    if (!tableId) return
+
+    const widths = override ? override : ((clGetSettingsTable(tableId) ?? {}).w ?? [])
+    for (
+      let colIndex = 1;
+      colIndex <= document.querySelectorAll(`#${id} tr th`).length;
+      colIndex++
+    ) {
+      document.querySelectorAll(`#${id} tr th:nth-child(${colIndex})`).forEach(cel => {
+        const width = widths?.[colIndex - 1] ?? 0
+        if (width > 0) {
+          cel.style.width = (width > 32 ? width : 32) + 'px'
+          cel.style.maxWidth = (width > 32 ? width : 32) + 'px'
+        } else {
+          cel.style.width = null
+          cel.style.maxWidth = null
+        }
+      })
+    }
+  }
+}
+
 function clTableSetResizeListeners (resizer, auto = false) {
   lastX = 0
   nextCol = null
@@ -170,8 +226,7 @@ const mousemove = mousemove => {
 
     const colIndex = getColIndex(nextCol) - 1
     const id = mousemove.target?.closest('table')?.id ?? 'unknown'
-    const nowrap = !!document.querySelector(`#${id}.cl-table-nowrap`) // are we in nowrap mode?
-    if (nowrap) {
+    if (isNowrap(id)) {
       // in nowrap mode we only adjust the thead col
       document.querySelectorAll(`#${id} tr th:nth-child(${colIndex})`).forEach(cel => {
         const width =
@@ -199,10 +254,15 @@ const mouseup = mouseup => {
     mouseup.preventDefault()
     lastX = 0
     nextCol = null
+
+    // save col widths
+    const id = mouseup.target?.closest('table')?.id ?? 'unknown'
+    saveColWidth(id, 'mouseup')
   }
 }
 
 const mouseclick = click => {
+  // doubleclick = autoresize
   if (click.detail === 2) {
     const table = click.target?.closest('table')
     if (!table) return
@@ -244,6 +304,8 @@ const mouseclick = click => {
         cel.style.maxWidth = `${cel.clWidth + padding}px`
       }
     })
+
+    saveColWidth(id, 'doubleclick')
   }
 }
 
@@ -1828,6 +1890,7 @@ function clSetUISettings (settings) {
   } catch (e) {
     e.ignore?.()
   } // catch & storage or parsing issues
+  return settings
 }
 
 export function clGetSettingsTable (id) {
@@ -1836,8 +1899,9 @@ export function clGetSettingsTable (id) {
 }
 
 export function clSetSettingsTable (id, table) {
+  if (!id) return undefined
   const settings = clGetUISettings()
   if (!settings.tables) settings.tables = {}
   settings.tables[id] = table
-  clSetUISettings(settings)
+  return clSetUISettings(settings)
 }