@castlabs/ui 5.5.0 → 5.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -214,7 +214,7 @@ function clMatomoSetup () {
214
214
 
215
215
  function clTableSetupResize (id) {
216
216
  document.querySelectorAll(`#${id} .cl-resizer`).forEach(resizer => {
217
- clTableSetResizeListeners(resizer, id)
217
+ clTableSetResizeListeners(resizer)
218
218
  })
219
219
  }
220
220
 
@@ -245,55 +245,61 @@ function clTableSortStatic (id, col) {
245
245
  let lastX = 0
246
246
  let nextCol = null
247
247
 
248
- function clTableSetResizeListeners (resizer, id) {
249
- const nowrap = !!document.querySelector(`#${id}.cl-table-nowrap`) // are we in nowrap mode?
248
+ function clTableSetResizeListeners (resizer) {
249
+ lastX = 0
250
+ nextCol = null
251
+ resizer.addEventListener('mousedown', mousedown)
252
+ document.addEventListener('mousemove', mousemove)
253
+ document.addEventListener('mouseup', mouseup)
254
+ }
250
255
 
251
- resizer.addEventListener('mousedown', mousedown => {
252
- mousedown.preventDefault()
253
- nextCol = mousedown.target ? mousedown.target.parentElement : null
254
- lastX = mousedown.pageX
255
- })
256
+ const mousedown = mousedown => {
257
+ mousedown.preventDefault()
258
+ nextCol = mousedown.target ? mousedown.target.parentElement : null
259
+ lastX = mousedown.pageX
260
+ }
256
261
 
257
- document.addEventListener('mousemove', mousemove => {
258
- if (nextCol !== null) {
259
- mousemove.preventDefault()
260
- const delta = mousemove.pageX - lastX
261
- lastX = mousemove.pageX
262
-
263
- const colIndex = getColIndex(nextCol)
264
- if (nowrap) {
265
- // in nowrap mode we only adjust the first col
266
- document
267
- .querySelectorAll(
268
- `#${id} tr th:nth-child(${colIndex - 1}), #${id} tr td:nth-child(${colIndex - 1})`
269
- )
270
- .forEach(cel => {
271
- const width =
272
- (cel.style.maxWidth === '' ? cel.offsetWidth : parseInt(cel.style.maxWidth)) + delta
273
- cel.style.width = (width > 32 ? width : 32) + 'px'
274
- cel.style.maxWidth = (width > 32 ? width : 32) + 'px'
275
- })
276
- } else {
277
- // in regular mode we shrink one and enlarge the other col
278
- document.querySelectorAll(`#${id} tr td:nth-child(${colIndex - 1})`).forEach(cel => {
279
- const width = cel.offsetWidth + delta
262
+ const mousemove = mousemove => {
263
+ if (nextCol !== null) {
264
+ mousemove.preventDefault()
265
+ const delta = mousemove.pageX - lastX
266
+ lastX = mousemove.pageX
267
+
268
+ const colIndex = getColIndex(nextCol)
269
+ const id = mousemove.target?.closest('table')?.id ?? 'unknown'
270
+ const nowrap = !!document.querySelector(`#${id}.cl-table-nowrap`) // are we in nowrap mode?
271
+ if (nowrap) {
272
+ // in nowrap mode we only adjust the first col
273
+ document
274
+ .querySelectorAll(
275
+ `#${id} tr th:nth-child(${colIndex - 1})` // , #${id} tr td:nth-child(${colIndex - 1})
276
+ )
277
+ .forEach(cel => {
278
+ const width =
279
+ (cel.style.maxWidth === '' ? cel.offsetWidth : parseInt(cel.style.maxWidth)) + delta
280
280
  cel.style.width = (width > 32 ? width : 32) + 'px'
281
+ cel.style.maxWidth = (width > 32 ? width : 32) + 'px'
281
282
  })
282
- document.querySelectorAll(`#${id} tr td:nth-child(${colIndex})`).forEach(cel => {
283
- const width = cel.offsetWidth - delta
284
- cel.style.width = (width > 32 ? width : 32) + 'px'
285
- })
286
- }
283
+ } else {
284
+ // in regular mode we shrink one and enlarge the other col
285
+ document.querySelectorAll(`#${id} tr td:nth-child(${colIndex - 1})`).forEach(cel => {
286
+ const width = cel.offsetWidth + delta
287
+ cel.style.width = (width > 32 ? width : 32) + 'px'
288
+ })
289
+ document.querySelectorAll(`#${id} tr td:nth-child(${colIndex})`).forEach(cel => {
290
+ const width = cel.offsetWidth - delta
291
+ cel.style.width = (width > 32 ? width : 32) + 'px'
292
+ })
287
293
  }
288
- })
294
+ }
295
+ }
289
296
 
290
- document.addEventListener('mouseup', mouseup => {
291
- if (nextCol !== null) {
292
- mouseup.preventDefault()
293
- lastX = 0
294
- nextCol = null
295
- }
296
- })
297
+ const mouseup = mouseup => {
298
+ if (nextCol !== null) {
299
+ mouseup.preventDefault()
300
+ lastX = 0
301
+ nextCol = null
302
+ }
297
303
  }
298
304
 
299
305
  function getColIndex (col) {