@ditojs/ui 3.2.0 → 3.3.0

package/src/utils/event.js

@@ -1,24 +1,33 @@
 import { asArray } from '@ditojs/utils'
 
-export function addEvents(targets, events) {
+// Adds the `events` handlers to all `targets`, and returns an object with a
+// `remove()` method that removes them again. When a `signal` is passed, the
+// handlers are also removed when it aborts, and not added at all when it
+// already has.
+export function addEvents(targets, events, { signal } = {}) {
   targets =
     targets instanceof NodeList
       ? Array.from(targets)
       : asArray(targets)
 
-  for (const [type, handler] of Object.entries(events)) {
-    for (const target of targets) {
-      target.addEventListener(type, handler, false)
+  const controller = new AbortController()
+  if (!signal?.aborted) {
+    // Remove the handlers along with `signal`, through a listener that is
+    // itself removed when the handlers are removed first:
+    signal?.addEventListener('abort', () => controller.abort(), {
+      once: true,
+      signal: controller.signal
+    })
+    for (const [type, handler] of Object.entries(events)) {
+      for (const target of targets) {
+        target.addEventListener(type, handler, { signal: controller.signal })
+      }
     }
   }
 
   return {
     remove() {
-      for (const [type, handler] of Object.entries(events)) {
-        for (const target of targets) {
-          target.removeEventListener(type, handler, false)
-        }
-      }
+      controller.abort()
     }
   }
 }

package/src/utils/index.js

@@ -1,3 +1,4 @@
+export * from './button.js'
 export * from './date.js'
 export * from './event.js'
 export * from './selection.js'

package/src/utils/time.js

@@ -0,0 +1,107 @@
+// Helpers for the time parts of the date and time pickers.
+
+const timePartNames = ['hour', 'minute', 'second', 'millisecond']
+
+export function isTimePartName(name) {
+  return timePartNames.includes(name)
+}
+
+// Returns the values from 0 to `count - 1` that `isDisabled()` allows.
+export function getEnabledValues(count, isDisabled) {
+  const values = []
+  for (let value = 0; value < count; value++) {
+    if (!isDisabled(value)) {
+      values.push(value)
+    }
+  }
+  return values
+}
+
+// Returns the enabled value that follows `value` in the direction of `step`,
+// wrapping around at the ends. `value` itself doesn't need to be enabled.
+export function stepEnabledValue(values, value, step) {
+  if (values.length === 0) return null
+  if (step > 0) {
+    return values.find(enabled => enabled > value) ?? values[0]
+  } else {
+    return values.findLast(enabled => enabled < value) ?? values.at(-1)
+  }
+}
+
+// Returns `value` if it is enabled, or else the enabled value that follows it.
+export function getEnabledValue(values, value) {
+  return values.includes(value) ? value : stepEnabledValue(values, value, 1)
+}
+
+export function isTimeDisabled(
+  date,
+  { disabledHour, disabledMinute, disabledSecond }
+) {
+  return (
+    disabledHour(date.getHours()) ||
+    disabledMinute(date.getMinutes()) ||
+    disabledSecond(date.getSeconds())
+  )
+}
+
+function isDigit(char) {
+  return /^\d$/.test(char)
+}
+
+// Edits the time in `input` as the key of the keydown `event` is typed, so
+// that digits overwrite the existing ones instead of being inserted, and
+// removed digits are replaced with zeros, keeping the time's format intact.
+// `formattedLength` is the length of the text of the current value.
+export function editTimeText(event, input, formattedLength) {
+  // Leave keyboard shortcuts alone, e.g. Cmd+A, Ctrl+V or Cmd+Z, but not the
+  // characters typed with Option on macOS or with AltGr (Ctrl+Alt) elsewhere.
+  if (event.metaKey || (event.ctrlKey && !event.altKey)) return
+  const start = input.selectionStart
+  if (start !== input.selectionEnd) return
+  const { value } = input
+  let position = start
+  if (event.key.length === 1) {
+    if (isDigit(event.key) && position < value.length) {
+      if (
+        value[position] === ':' &&
+        isDigit(value[position - 1]) &&
+        isDigit(value[position - 2])
+      ) {
+        position++
+      }
+      // Remove next digit so the event overrides it instead of inserting new
+      // chars.
+      if (
+        isDigit(value[position]) && (
+          isDigit(value[position + 1]) ||
+          isDigit(value[position - 1])
+        )
+      ) {
+        input.value = value.slice(0, position) + value.slice(position + 1)
+        input.setSelectionRange(position, position)
+      }
+    } else if (value.length === formattedLength) {
+      event.preventDefault()
+    } else if (value.length > formattedLength) {
+      input.value = value.slice(0, formattedLength)
+      input.setSelectionRange(start, start)
+      event.preventDefault()
+    }
+  } else if (event.key === 'Backspace') {
+    if (position === 1 || [' ', ':'].includes(value[position - 2])) {
+      if (position === value.length || value[position] === ':') {
+        position--
+        input.value = (
+          value.slice(0, position) +
+          ((value[position - 1] ?? '') + '00') +
+          value.slice(position + 1)
+        )
+        input.setSelectionRange(position, position)
+      } else if (isDigit(value[position]) && !isDigit(value[position + 1])) {
+        // When removing the first of two digits, replace with 0
+        input.value = value.slice(0, position) + '0' + value.slice(position)
+        input.setSelectionRange(position, position)
+      }
+    }
+  }
+}