Port utility functions from 2.x of framework

Author: tcannonfodder

package.json

@@ -8,6 +8,15 @@
     "./elements/toast-dialog": "./src/elements/toast-dialog.js",
     "./handlers/json-redirection": "./src/handlers/json-redirection.js",
     "./util/auto-generate-id": "./src/util/auto-generate-id.js",
+    "./util/ensure-delcarative-open-modal-dialogs-are-modal": "./src/util/ensure-delcarative-open-modal-dialogs-are-modal.js",
+    "./util/ensure-delcarative-open-modal-dialogs-are-modal": "./src/util/ensure-delcarative-open-modal-dialogs-are-modal.js",
+    "./util/focus-on-ajax-success-event": "./src/util/focus-on-ajax-success-event.js",
+    "./util/js-enabled-flag": "./src/util/js-enabled-flag.js",
+    "./util/open-modal-dialog-on-cablecar-event": "./src/util/open-modal-dialog-on-cablecar-event.js",
+    "./util/remove-disabled-since-when-loaded": "./src/util/remove-disabled-since-when-loaded.js",
+    "./util/reset-on-ajax-success-event": "./src/util/reset-on-ajax-success-event.js",
+    "./util/submit-form-on-command-enter": "./src/util/submit-form-on-command-enter.js",
+    "./util/theme-preference": "./src/util/theme-preference.js",
     "./passkeys/elements/submit-form-after-reauthentication": "./src/passkeys/elements/submit-form-after-reauthentication.js",
     "./passkeys/elements/unlock-form-after-reauthentication": "./src/passkeys/elements/unlock-form-after-reauthentication.js",
     "./passkeys/handlers/authenticate": "./src/passkeys/handlers/authenticate.js",

src/util/ensure-delcarative-open-modal-dialogs-are-modal.js

@@ -0,0 +1,4 @@
+export async function ensureDeclarativeOpenModalDialogsAreModal(event) {
+  const openDialogs = event.target.querySelectorAll(`dialog[data-ensure-modal][open]`)
+  openDialogs.forEach((dialog) => { dialog.close(); dialog.showModal() })
+}

src/util/focus-on-ajax-success-event.js

@@ -0,0 +1,8 @@
+export async function focusOnAjaxSuccessEvent(event) {
+  const target = event.target
+  const focusTargetSelector = target?.dataset?.focusOnAjaxSuccess
+  if(!focusTargetSelector){ return }
+
+  const focusTarget = document.querySelector(focusTargetSelector)
+  focusTarget?.focus()
+}

src/util/js-enabled-flag.js

@@ -0,0 +1 @@
+document.body.dataset.jsEnabled = 'true';

src/util/open-modal-dialog-on-cablecar-event.js

@@ -0,0 +1,8 @@
+export async function openModalDialogOnCableCarEvent(event) {
+  const openModalDialogId = event?.detail?.openModalDialogId
+  if(!openModalDialogId){return}
+  const modalDialog = document.getElementById(openModalDialogId)
+  if(!modalDialog){ return }
+  if(modalDialog.open){ modalDialog.close() }
+  modalDialog.showModal()
+}

src/util/remove-disabled-since-when-loaded.js

@@ -0,0 +1,4 @@
+export async function removeDisabledSinceJsLoaded(event) {
+  const elementsToEnable = event.target.querySelectorAll(`[data-remove-disabled-when-js-loaded]`)
+  elementsToEnable.forEach((element) => { element.removeAttribute(`disabled`) })
+}

src/util/reset-on-ajax-success-event.js

@@ -0,0 +1,5 @@
+export async function resetOnAjaxSuccessEvent(event) {
+  const target = event.target
+  if(!target?.dataset?.resetOnAjaxSuccess){ return }
+  target.reset()
+}

src/util/submit-form-on-command-enter.js

@@ -0,0 +1,5 @@
+export async function submitFormOnCommandEnter(event) {
+  if(event.key == "Enter" && (event.metaKey || event.ctrlKey)){
+    event.target.form.requestSubmit()
+  }
+}

src/util/theme-preference.js

@@ -0,0 +1,33 @@
+const storageKey = 'theme-preference'
+const htmlDataAttributeName = `data-theme`
+
+export function getColorPreference() {
+  if(!localStorage){ return 'match-system' }
+  //Has an explicit value been set? Use it if so
+  if(localStorage.getItem(storageKey)){
+    return localStorage.getItem(storageKey)
+  } else {
+    if(window.matchMedia(`(prefers-color-scheme:dark)`).matches){
+      return 'dark'
+    } else {
+      return 'light'
+    }
+  }
+}
+
+export function setColorPreference(value){
+  localStorage.setItem(storageKey, value)
+  reflectColorPreference()
+}
+
+export function reflectColorPreference(){
+  document.firstElementChild.setAttribute(htmlDataAttributeName, getColorPreference())
+}
+
+
+export function setDefaultColorPreference(defaultValue){
+  if(defaultValue.toString().trim() == ""){ return }
+  if(!localStorage){ return }
+  if(localStorage.getItem(storageKey)){ return }
+  setColorPreference(defaultValue)
+}

src/util/throw-away-existing-cableready-operation-event.js

@@ -0,0 +1,6 @@
+export async function throwAwayExistingCableReadyOperationEventHandler(event) {
+  const existingSelector = event?.detail?.existingSelector
+  if(!existingSelector){return}
+  if(!document.querySelector(existingSelector)){ return }
+  event.detail.cancel = true
+}