@asd20/ui-next 2.2.2 → 2.3.1

package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue

@@ -167,6 +167,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindAccessibilityModalTrigger } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20WayfindingAccessibilityTemplate',
@@ -209,17 +210,18 @@ export default {
     },
   },
   mounted() {
-    this.$nextTick(() => {
-      const btn = document.querySelector('[data-trigger-accessibility-modal]')
-      if (btn) {
-        btn.addEventListener('click', () => {
-          this.modalVisible = true
-          this.$nextTick(() => {
-            this.modalOpen = true
-          })
+    this.removeAccessibilityModalTrigger = bindAccessibilityModalTrigger(
+      this.$el,
+      () => {
+        this.modalVisible = true
+        this.$nextTick(() => {
+          this.modalOpen = true
         })
       }
-    })
+    )
+  },
+  beforeUnmount() {
+    this.removeAccessibilityModalTrigger?.()
   },
 }
 </script>

package/src/helpers/buildFileSearchUrl.js

@@ -1,3 +1,5 @@
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
 /**
  * Creates a Azure Search payload
  *
@@ -10,6 +12,11 @@ export default function buildFileSearchUrl({
   owners = [],
   tags = [],
   top = 5,
+  runtimeConfig = null,
+  searchEndpoint = '',
+  endpoint = '',
+  searchKey = '',
+  apiVersion = '',
 }) {
   let query = keywords || '*'
 
@@ -35,21 +42,42 @@ export default function buildFileSearchUrl({
     search: query,
     $filter: filters.join(' and '),
     $top: top,
-    'api-version':
-      process.env.VUE_APP_AZURE_SEARCH_API_VERSION ||
-      process.env.GRIDSOME_AZURE_SEARCH_API_VERSION,
-    'api-key':
-      process.env.VUE_APP_AZURE_SEARCH_KEY ||
-      process.env.GRIDSOME_AZURE_SEARCH_KEY,
+    'api-version': resolveRuntimeConfigValue({
+      explicitValue: apiVersion,
+      runtimeConfig,
+      runtimeConfigKeys: ['azureSearchVersion'],
+      envKeys: [
+        'VUE_APP_AZURE_SEARCH_API_VERSION',
+        'GRIDSOME_AZURE_SEARCH_API_VERSION',
+      ],
+    }),
+    'api-key': resolveRuntimeConfigValue({
+      explicitValue: searchKey,
+      runtimeConfig,
+      runtimeConfigKeys: ['azureSearchKey'],
+      envKeys: ['VUE_APP_AZURE_SEARCH_KEY', 'GRIDSOME_AZURE_SEARCH_KEY'],
+    }),
   }
 
   const params = Object.entries(payload)
     .map(([key, val]) => `${key}=${val}`)
     .join('&')
 
-  let url = `${process.env.VUE_APP_AZURE_SEARCH_ENDPOINT ||
-    process.env
-      .GRIDSOME_AZURE_SEARCH_ENDPOINT}/indexes/files-index/docs?${params}`
+  const resolvedSearchEndpoint = resolveRuntimeConfigValue({
+    explicitValue: searchEndpoint || endpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchEndpoint'],
+    envKeys: ['VUE_APP_AZURE_SEARCH_ENDPOINT', 'GRIDSOME_AZURE_SEARCH_ENDPOINT'],
+  })
+  if (!resolvedSearchEndpoint || !payload['api-version'] || !payload['api-key']) {
+    throw new Error(
+      'Azure Search configuration is required for buildFileSearchUrl.'
+    )
+  }
+
+  let url = `${normalizeBaseUrl(
+    resolvedSearchEndpoint
+  )}/indexes/files-index/docs?${params}`
 
   return url
 }

package/src/helpers/injectedContentInteractions.js

@@ -0,0 +1,102 @@
+function findClosestInRoot(event, selector, root) {
+  if (!(event.target instanceof Element)) {
+    return null
+  }
+
+  const match = event.target.closest(selector)
+
+  if (!match || !root.contains(match)) {
+    return null
+  }
+
+  return match
+}
+
+export function bindInjectedAccordionInteractions(root) {
+  if (!root?.addEventListener) {
+    return () => {}
+  }
+
+  const onClick = event => {
+    const button = findClosestInRoot(event, '.accordion-button', root)
+
+    if (!button) {
+      return
+    }
+
+    const contentId = button.getAttribute('aria-controls')
+    const content = contentId ? document.getElementById(contentId) : null
+
+    if (!content) {
+      return
+    }
+
+    const expanded = button.getAttribute('aria-expanded') === 'true'
+    const toggleIcon = button.querySelector('.toggle-icon')
+
+    button.setAttribute('aria-expanded', String(!expanded))
+
+    if (toggleIcon) {
+      toggleIcon.textContent = expanded ? '+' : '-'
+    }
+
+    if (!expanded) {
+      content.style.display = 'block'
+      content.style.maxHeight = '0'
+      content.style.padding = '0 var(--space-1, 1em)'
+
+      requestAnimationFrame(() => {
+        content.style.transition = 'max-height 0.4s ease, padding 0.4s ease'
+        content.style.maxHeight = `${content.scrollHeight}px`
+        content.style.padding = 'var(--space-1, 1em)'
+      })
+      return
+    }
+
+    content.style.maxHeight = `${content.scrollHeight}px`
+
+    requestAnimationFrame(() => {
+      content.style.transition = 'max-height 0.4s ease, padding 0.4s ease'
+      content.style.maxHeight = '0'
+      content.style.padding = '0 var(--space-1, 1em)'
+    })
+
+    setTimeout(() => {
+      if (content.style.maxHeight === '0px' || content.style.maxHeight === '0') {
+        content.style.display = 'none'
+      }
+    }, 400)
+  }
+
+  root.addEventListener('click', onClick)
+
+  return () => {
+    root.removeEventListener('click', onClick)
+  }
+}
+
+export function bindAccessibilityModalTrigger(root, onOpen) {
+  if (!root?.addEventListener) {
+    return () => {}
+  }
+
+  const onClick = event => {
+    const trigger = findClosestInRoot(
+      event,
+      '[data-trigger-accessibility-modal]',
+      root
+    )
+
+    if (!trigger) {
+      return
+    }
+
+    onOpen()
+  }
+
+  root.addEventListener('click', onClick)
+
+  return () => {
+    root.removeEventListener('click', onClick)
+  }
+}

package/src/helpers/mapPageQueryResultToPageTemplateProps.js

@@ -1,5 +1,7 @@
 import _get from 'lodash/get'
 
+import { resolveRuntimeConfigValue } from './runtimeConfig'
+
 function getConfigurationValueOrDefault({
   configurations,
   category,
@@ -29,7 +31,10 @@ function getConfigurationValueOrDefault({
  * @param {*} queryResult s
  * @returns An object of common prop values for page templates
  */
-export default function mapPageQueryResultToPageTemplateProps(queryResult) {
+export default function mapPageQueryResultToPageTemplateProps(
+  queryResult,
+  options = {}
+) {
   // Ensure query results is defined with required properties
   if (
     !queryResult.page ||
@@ -189,6 +194,14 @@ export default function mapPageQueryResultToPageTemplateProps(queryResult) {
     }
   }
 
+  const defaultOrganizationId =
+    resolveRuntimeConfigValue({
+      explicitValue: options.organizationId,
+      runtimeConfig: options.runtimeConfig,
+      runtimeConfigKeys: ['organizationId'],
+      envKeys: ['GRIDSOME_ORGANIZATION_ID', 'VUE_APP_ORGANIZATION_ID'],
+    }) || '26eaf390-d8ab-11e9-a3a8-5de5bba4f125'
+
   // Output page props
   let pageProps = {}
   try {
@@ -217,11 +230,8 @@ export default function mapPageQueryResultToPageTemplateProps(queryResult) {
         .map(l => l.link)
         .filter(l => l.type === 'Link'),
       organization: pageData.ownerOrganization || {
-        id:
-          process.env.GRIDSOME_ORGANIZATION_ID ||
-          process.env.VUE_APP_ORGANIZATION_ID ||
-          '26eaf390-d8ab-11e9-a3a8-5de5bba4f125', // District Org Id
-        title: 'Academy District 20',
+        id: defaultOrganizationId, // District Org Id
+        title: options.organizationTitle || 'Academy District 20',
       },
 
       // TODO: add groups / department / committee table to Hasura

package/src/helpers/queryDepartments.js

@@ -1,10 +1,9 @@
 import arraySearch from './arraySearch'
 import axios from 'axios'
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
 // import departments from '../data/departments.json'
 
-const API_ENDPOINT =
-  process.env.VUE_APP_API_ENDPOINT || process.env.GRIDSOME_API_ENDPOINT
-let cachedDepartments = []
+const cachedDepartmentsByEndpoint = new Map()
 
 /**
  * Retrieve departments from API
@@ -13,15 +12,20 @@ let cachedDepartments = []
  * @param {*} { commit }
  * @returns
  */
-async function getDepartments() {
-  if (cachedDepartments.length === 0) {
-    let { data: departments } = await axios.get(
-      `${API_ENDPOINT}/api/departments`
+async function getDepartments(apiEndpoint) {
+  const normalizedApiEndpoint = normalizeBaseUrl(apiEndpoint)
+  if (!normalizedApiEndpoint) {
+    throw new Error('apiEndpoint is required for queryDepartments.')
+  }
+
+  if (!cachedDepartmentsByEndpoint.has(normalizedApiEndpoint)) {
+    const { data: departments } = await axios.get(
+      `${normalizedApiEndpoint}/api/departments`
     )
-    console.log(departments)
-    cachedDepartments = departments
+    cachedDepartmentsByEndpoint.set(normalizedApiEndpoint, departments)
   }
-  return cachedDepartments
+
+  return cachedDepartmentsByEndpoint.get(normalizedApiEndpoint) || []
 }
 
 /**
@@ -29,10 +33,22 @@ async function getDepartments() {
  *
  * @param {*} {keywords = '', top = 0}
  */
-export default async function queryDepartments({ keywords = '', top = 0 }) {
+export default async function queryDepartments({
+  keywords = '',
+  top = 0,
+  apiEndpoint = '',
+  runtimeConfig = null,
+}) {
   if (!keywords) return []
 
-  let departments = await getDepartments()
+  const resolvedApiEndpoint = resolveRuntimeConfigValue({
+    explicitValue: apiEndpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['apiEndpoint'],
+    envKeys: ['VUE_APP_API_ENDPOINT', 'GRIDSOME_API_ENDPOINT'],
+  })
+
+  let departments = await getDepartments(resolvedApiEndpoint)
 
   let results = departments.filter(d => {
     let options = d.searchTerms

package/src/helpers/queryEvents.js

@@ -1,5 +1,8 @@
 import axios from 'axios'
 
+import { hasSearchProxyRuntime, resolveSearchProxyUrl } from './searchProxyUrl'
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
 /**
  * Creates a Azure Search payload
  *
@@ -73,18 +76,41 @@ export default async function queryEvents({
   limit = 5,
   requireKeywords = false,
   indexName = 'events-index',
+  requestUrl = '',
+  runtimeConfig = null,
+  searchKey = '',
+  apiVersion = '',
+  searchEndpoint = '',
+  endpoint = '',
 }) {
-  const env = {
-    searchKey:
-      process.env.VUE_APP_AZURE_SEARCH_KEY ||
-      process.env.GRIDSOME_AZURE_SEARCH_KEY,
-    apiVersion:
-      process.env.VUE_APP_AZURE_SEARCH_API_VERSION ||
-      process.env.GRIDSOME_AZURE_SEARCH_API_VERSION,
-    endpoint:
-      process.env.VUE_APP_AZURE_SEARCH_ENDPOINT ||
-      process.env.GRIDSOME_AZURE_SEARCH_ENDPOINT,
-  }
+  const resolvedSearchKey = resolveRuntimeConfigValue({
+    explicitValue: searchKey,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchKey'],
+    envKeys: ['VUE_APP_AZURE_SEARCH_KEY', 'GRIDSOME_AZURE_SEARCH_KEY'],
+  })
+  const resolvedApiVersion = resolveRuntimeConfigValue({
+    explicitValue: apiVersion,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchVersion'],
+    envKeys: [
+      'VUE_APP_AZURE_SEARCH_API_VERSION',
+      'GRIDSOME_AZURE_SEARCH_API_VERSION',
+    ],
+  })
+  const resolvedSearchEndpoint = resolveRuntimeConfigValue({
+    explicitValue: searchEndpoint || endpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchEndpoint'],
+    envKeys: ['VUE_APP_AZURE_SEARCH_ENDPOINT', 'GRIDSOME_AZURE_SEARCH_ENDPOINT'],
+  })
+  const resolvedRequestUrl =
+    typeof requestUrl === 'string' && requestUrl.trim()
+      ? requestUrl.trim()
+      : !resolvedSearchEndpoint &&
+        hasSearchProxyRuntime(runtimeConfig)
+      ? resolveSearchProxyUrl('events', runtimeConfig)
+      : ''
 
   if (!keywords && requireKeywords)
     return {
@@ -92,27 +118,49 @@ export default async function queryEvents({
       facets: [],
     }
 
-  let result = await axios({
-    method: 'post',
-    headers: {
-      'api-key': env.searchKey,
-    },
-    params: {
-      'api-version': env.apiVersion,
-    },
-    url: `${env.endpoint}/indexes/${indexName}/docs/search`,
-    data: Object.assign(
-      {},
-      searchPayload({
-        startDate,
-        endDate,
-        keywords,
-        calendarIds,
-        enableFuzzySearch: false,
-        limit,
+  if (
+    !resolvedRequestUrl &&
+    (!resolvedSearchEndpoint || !resolvedSearchKey || !resolvedApiVersion)
+  ) {
+    throw new Error('Azure Search or proxy configuration is required for queryEvents.')
+  }
+
+  const payload = {
+    startDate,
+    endDate,
+    keywords,
+    calendarIds,
+    limit,
+    indexName,
+  }
+
+  const result = resolvedRequestUrl
+    ? await axios({
+        method: 'post',
+        url: resolvedRequestUrl,
+        data: payload,
+      })
+    : await axios({
+        method: 'post',
+        headers: {
+          'api-key': resolvedSearchKey,
+        },
+        params: {
+          'api-version': resolvedApiVersion,
+        },
+        url: `${normalizeBaseUrl(resolvedSearchEndpoint)}/indexes/${indexName}/docs/search`,
+        data: Object.assign(
+          {},
+          searchPayload({
+            startDate,
+            endDate,
+            keywords,
+            calendarIds,
+            enableFuzzySearch: false,
+            limit,
+          })
+        ),
       })
-    ),
-  })
 
   const { data } = result
 

package/src/helpers/queryFiles.js

@@ -1,5 +1,8 @@
 import axios from 'axios'
 
+import { hasSearchProxyRuntime, resolveSearchProxyUrl } from './searchProxyUrl'
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
 /**
  * Creates a Azure Search payload
  *
@@ -64,8 +67,17 @@ export default async function queryFiles({
   keywords = '',
   categories = [],
   owners = [],
+  organizations = [],
   top = 5,
+  limit = 0,
   requireKeywords = false,
+  indexName = 'files-index',
+  requestUrl = '',
+  runtimeConfig = null,
+  searchKey = '',
+  apiVersion = '',
+  searchEndpoint = '',
+  endpoint = '',
 }) {
   if (!keywords && requireKeywords)
     return {
@@ -73,32 +85,81 @@ export default async function queryFiles({
       facets: [],
     }
 
-  let { data } = await axios({
-    method: 'post',
-    headers: {
-      'api-key':
-        process.env.VUE_APP_AZURE_SEARCH_KEY ||
-        process.env.GRIDSOME_AZURE_SEARCH_KEY,
-    },
-    params: {
-      'api-version':
-        process.env.VUE_APP_AZURE_SEARCH_API_VERSION ||
-        process.env.GRIDSOME_AZURE_SEARCH_API_VERSION,
-    },
-    url: `${process.env.VUE_APP_AZURE_SEARCH_ENDPOINT ||
-      process.env
-        .GRIDSOME_AZURE_SEARCH_ENDPOINT}/indexes/files-index/docs/search`,
-    data: Object.assign(
-      {},
-      searchPayload({
-        keywords,
-        categories,
-        owners,
-        enableFuzzySearch: true,
-      }),
-      { top }
-    ),
+  const resolvedLimit = Number.isFinite(Number(limit)) && Number(limit) > 0
+    ? Number(limit)
+    : top
+  const resolvedSearchKey = resolveRuntimeConfigValue({
+    explicitValue: searchKey,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchKey'],
+    envKeys: ['VUE_APP_AZURE_SEARCH_KEY', 'GRIDSOME_AZURE_SEARCH_KEY'],
+  })
+  const resolvedApiVersion = resolveRuntimeConfigValue({
+    explicitValue: apiVersion,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchVersion'],
+    envKeys: [
+      'VUE_APP_AZURE_SEARCH_API_VERSION',
+      'GRIDSOME_AZURE_SEARCH_API_VERSION',
+    ],
   })
+  const resolvedSearchEndpoint = resolveRuntimeConfigValue({
+    explicitValue: searchEndpoint || endpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['azureSearchEndpoint'],
+    envKeys: ['VUE_APP_AZURE_SEARCH_ENDPOINT', 'GRIDSOME_AZURE_SEARCH_ENDPOINT'],
+  })
+  const resolvedRequestUrl =
+    typeof requestUrl === 'string' && requestUrl.trim()
+      ? requestUrl.trim()
+      : !resolvedSearchEndpoint &&
+        hasSearchProxyRuntime(runtimeConfig)
+      ? resolveSearchProxyUrl('files', runtimeConfig)
+      : ''
+
+  if (
+    !resolvedRequestUrl &&
+    (!resolvedSearchEndpoint || !resolvedSearchKey || !resolvedApiVersion)
+  ) {
+    throw new Error('Azure Search or proxy configuration is required for queryFiles.')
+  }
+
+  const payload = {
+    keywords,
+    categories,
+    owners,
+    organizations,
+    limit: resolvedLimit,
+    indexName,
+  }
+
+  const { data } = resolvedRequestUrl
+    ? await axios({
+        method: 'post',
+        url: resolvedRequestUrl,
+        data: payload,
+      })
+    : await axios({
+        method: 'post',
+        headers: {
+          'api-key': resolvedSearchKey,
+        },
+        params: {
+          'api-version': resolvedApiVersion,
+        },
+        url: `${normalizeBaseUrl(resolvedSearchEndpoint)}/indexes/${indexName}/docs/search`,
+        data: Object.assign(
+          {},
+          searchPayload({
+            keywords,
+            categories,
+            owners,
+            organizations,
+            enableFuzzySearch: true,
+          }),
+          { top: resolvedLimit }
+        ),
+      })
 
   // Return results
   return {