@castlabs/ui 7.24.2 → 8.1.0

package/dist/castlabs-ui.module.d.ts

@@ -9,6 +9,7 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
   export function clModalShow (id: string, value?: any): void
   export function clModalValue (id: string): any
   export function clModalIsShown (id?: string): boolean
+  export function clModalWasShown (): boolean
   export function clModalBack (to: any): boolean
 
   export function clPaginate (array: any[], pageNo?: number, pageSize?: number): any[]

package/dist/castlabs-ui.module.js

@@ -1,4 +1,4 @@
-/* @castlabs/ui v7.24.2 */
+/* @castlabs/ui v8.1.0 */
 
 /*!
   * Bootstrap v5.3.8 (https://getbootstrap.com/)
@@ -112,110 +112,6 @@ function clSidenavInitiallyOpen () {
   }
 }
 
-const cookieName = 'cl_banner_nok'
-
-export function clCookieBannerSetup (siteId = 1, forced = false) {
-  if (
-    !window.location.hostname.match(/castlabs.com$/) &&
-    !window.location.search.match('mtm=DEBUG') &&
-    !forced
-  ) {
-    console.info(`skipping cookie banner on ${window.location.hostname ?? 'unknown domain'}`)
-    return
-  }
-
-  clMatomoSetup(siteId)
-  let show = true
-  for (const cookie of document?.cookie?.split(/; */) ?? []) {
-    const [name, value] = cookie.split('=')
-    if (name === cookieName && ['-mtm', '+mtm'].includes(value)) {
-      show = false
-      break // for
-    }
-  }
-  if (show) clCookieBannerShow()
-}
-
-function clCookieBannerHide () {
-  const banner = document.querySelector('div.cl-cookie-banner')
-  banner.classList.add('cl-fade-away')
-  setTimeout(() => {
-    banner.parentNode.removeChild(banner)
-  }, 500)
-}
-
-function clCookieBannerAccept () {
-  document.cookie = `cl_banner_nok=+mtm; max-age=${60 * 60 * 24 * 395}; domain=.castlabs.com; path=/; SameSite=Lax;`
-  clCookieBannerHide()
-
-  const _paq = (window._paq = window._paq || [])
-  _paq.push(['rememberCookieConsentGiven', 9480])
-  _paq.push(['trackPageView'])
-  _paq.push(['enableLinkTracking'])
-}
-
-function clCookieBannerDecline () {
-  document.cookie = `cl_banner_nok=-mtm; max-age=${60 * 60 * 24 * 395}; domain=.castlabs.com; path=/; SameSite=Lax;`
-  clCookieBannerHide()
-}
-
-function clCookieBannerShow (accept = clCookieBannerAccept, decline = clCookieBannerDecline) {
-  const banner = document.createElement('div')
-  banner.classList.add('card', 'cl-card', 'cl-cookie-banner')
-  banner.innerHTML = `
-    <div class="card-body">
-      <p class="cl-p-small">
-        For our services to work, we use essential cookies which we control.
-        We'd also like to include others to analyze how our site is used to help
-        improve it - but only if you accept. Learn more in our
-        <a
-          class="cl-a-text"
-          href="https://castlabs.com/privacy-cookie-policy/"
-        >privacy policy</a>.
-      </p>
-
-      <div class="cl-spacing-box cl-spread">
-        <button
-          id="cl-button-cookie-decline"
-          type="button"
-          class="btn btn-sm cl-color-night it-cancel"
-        >
-          Decline
-        </button>
-        <button
-          id="cl-button-cookie-accept"
-          type="button"
-          class="btn btn-sm cl-color-red it-ok"
-        >
-          Accept
-        </button>
-      </div>
-    </div>
-  `
-  document.body.appendChild(banner)
-  document.getElementById('cl-button-cookie-accept').addEventListener('click', accept)
-  document.getElementById('cl-button-cookie-decline').addEventListener('click', decline)
-}
-
-function clMatomoSetup (siteId = 1, domain = 'castlabs.com') {
-  const _paq = (window._paq = window._paq || [])
-  _paq.push(['requireCookieConsent'])
-  _paq.push(['setDocumentTitle', document.domain + '/' + document.title])
-  _paq.push(['setCookieDomain', `*.${domain}`])
-  _paq.push(['setDomains', [`*.${domain}`]])
-  _paq.push(['trackPageView'])
-  _paq.push(['enableLinkTracking'])
-  ;(function () {
-    _paq.push(['setTrackerUrl', 'https://castlabs.matomo.cloud/matomo.php'])
-    _paq.push(['setSiteId', `${siteId}`])
-    const g = document.createElement('script')
-    const s = document.getElementsByTagName('script')[0]
-    g.async = true
-    g.src = '//cdn.matomo.cloud/castlabs.matomo.cloud/matomo.js'
-    s.parentNode.insertBefore(g, s)
-  })()
-}
-
 export function clTableSetupResize (id, auto = false) {
   document.querySelectorAll(`#${id} .cl-resizer`).forEach(resizer => {
     clTableSetResizeListeners(resizer, auto)
@@ -1022,6 +918,14 @@ function getDomain () {
 // -----------------------------------------------------------------------------
 
 let modal = null // the open modal (if any)
+let modalDelay = null // a just-closed modal to circumvent unlucky event order
+
+function setModalDelay (newModal) {
+  modal = newModal
+  setTimeout(function () {
+    modalDelay = newModal
+  }, 10)
+}
 
 /**
  * Hide a bootstrap modal via it's ID.
@@ -1032,7 +936,7 @@ let modal = null // the open modal (if any)
  */
 export function clModalHide () {
   modal?.hide()
-  modal = null
+  setModalDelay(null)
 }
 
 /**
@@ -1049,10 +953,11 @@ export function clModalShow (id, value) {
   // find & show the modal
   const element = document.getElementById(id)
   if (element) {
-    modal = new bootstrap.Modal(element, { backdrop: 'static' })
-    modal.value = value
-    modal.id = id
-    modal.show()
+    const newModal = new bootstrap.Modal(element, { backdrop: 'static' })
+    newModal.value = value
+    newModal.id = id
+    newModal.show()
+    setModalDelay(newModal)
 
     // focus the first auto-focus field in the Modal
     const autofocus = document.querySelector(`#${id} [autofocus]`)
@@ -1077,8 +982,16 @@ export function clModalValue (id) {
  */
 export function clModalIsShown (modalId) {
   if (!modal) return false
-  if (!modalId) return modal._isShown
-  return modal.id === modalId && modal._isShown
+  if (modal._isShown) return true
+  return modal.id === modalId
+}
+
+/**
+ * Determine if a modal is/was open. It considers modal a few more ms as open, as
+ * sometimes browser/bootstrap events might fire in unlucky orders.
+ */
+export function clModalWasShown () {
+  return !!modalDelay
 }
 
 /**
@@ -1269,7 +1182,7 @@ export function clFormFieldFocusFirstInvalid (formId, moreSelectors = []) {
   const invalid = document.querySelector(
     clSubselectorQuery(`#${formId}`, [':invalid', '.invalid', ...moreSelectors])
   )
-  invalid?.focus()
+  invalid?.focus({ focusVisible: true })
 }
 
 export function clSubselectorQuery (main, subselectors) {