henry-search 1.0.2 → 1.0.4

package/src/components/constants.js

@@ -0,0 +1 @@
+export const INSTANT_SEARCH_INDEX_NAME = "archived_performances"

package/src/composables/FocusableElements.js

@@ -0,0 +1,13 @@
+import { toValue } from 'vue'
+
+const FOCUSABLE_SELECTOR = `:not([tabindex^="-"]):not([disabled]):is(a[href],audio[controls],button,details summary,input,map area[href],select,svg a[xlink\:href],[tabindex],textarea,video[controls])`
+
+export default function focusableElements(element, includeSelf = true) {
+  element = toValue(element)
+  const elements = [...element.querySelectorAll(FOCUSABLE_SELECTOR)]
+  if (includeSelf && element.matches(FOCUSABLE_SELECTOR)) {
+    elements.unshift(element)
+  }
+
+  return elements
+}

package/src/composables/UseDirectionalKeys.js

@@ -0,0 +1,105 @@
+import { toValue, onMounted } from 'vue'
+
+import focusableElements from './FocusableElements.js'
+
+/**
+ * Default key filters. These should be functions that 'filter out' what
+ * elements should be considered when a key is hit.
+ */
+const KEY_FILTERS = {
+  ArrowRight: elements => elements.filter(({ x, top, bottom }) => x > 0 && top < 0 && bottom > 0),
+  ArrowLeft: elements => elements.filter(({ x, top, bottom }) => x < 0 && top < 0 && bottom > 0),
+  ArrowDown: elements => elements.filter(({ y, left, right }) => y > 0 && left < 0 && right > 0),
+  ArrowUp: elements => elements.filter(({ y, left, right }) => y < 0 && left < 0 && right > 0),
+  Home: elements => elements.length && elements.slice(0, 1),
+  End: elements => elements.length && elements.slice(-1),
+}
+
+/**
+ * Retrieves where the element is drawn on screen (client rects).
+ * Adds in x and y for the center of the element.
+ */
+const getElementRects = el => {
+  const rects = el.getClientRects()[0]
+
+  if (!rects || !rects.left) {
+    return null
+  }
+
+  return {
+    bottom: rects.bottom,
+    height: rects.height,
+    left: rects.left,
+    right: rects.right,
+    top: rects.top,
+    width: rects.width,
+    x: rects.left + rects.width / 2,
+    y: rects.top + rects.height / 2,
+  }
+}
+
+/**
+ * Calls getElementRects for every element in nodeList, and adjust the
+ * values to be relative to origin for simpler follow up math. Also
+ * calculates the distance between the two elements' centers.
+ */
+const augmentElementRects = (nodeList, origin) => {
+  const elements = []
+  origin = getElementRects(origin)
+
+  if (!origin) {
+    return elements
+  }
+
+  nodeList.forEach(el => {
+    const rects = getElementRects(el)
+    if (rects === null) {
+      return
+    }
+
+    rects.bottom -= origin.y
+    rects.left -= origin.x
+    rects.right -= origin.x
+    rects.top -= origin.y
+    rects.x -= origin.x
+    rects.y -= origin.y
+
+    const distance = Math.sqrt(rects.x * rects.x + rects.y * rects.y)
+
+    elements.push({ el, ...rects, distance })
+  })
+
+  return elements
+}
+
+/**
+ * useDirectionalKeys() takes any number of rootElements that it searches for
+ * focusable elements and handles directional arrow moves between. Also
+ * supports Home and End.
+ */
+export default function useDirectionalKeys (element) {
+  const findTarget = (el, key) => {
+    const elements = augmentElementRects(focusableElements(element), el)
+    if (key in KEY_FILTERS) {
+      return KEY_FILTERS[key](elements).reduce(
+        (closest, el) => {
+          return el.distance < closest.distance ? el : closest
+        },
+        { distance: Infinity }
+      )
+    }
+    return null
+  }
+
+  const handler = evt => {
+    const newTarget = findTarget(evt.target, evt.key)
+
+    if (newTarget?.el) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      newTarget.el.focus()
+    }
+  }
+
+  element.addEventListener('keydown', handler)
+}

package/src/composables/focusWithArrows.js

@@ -0,0 +1,52 @@
+import { ref, toValue, watchEffect } from 'vue'
+
+export default function focusWithArrows(
+  elements,
+  {
+    includeHomeEnd = true,
+  } = {}
+) {
+
+  const KEY_BEHAVIORS = {
+    ArrowLeft: i => Math.max(0, i - 1),
+    ArrowRight: i => Math.min(handledElements.length - 1, i + 1),
+  }
+
+  if (includeHomeEnd) {
+    KEY_BEHAVIORS.Home = () => 0
+    KEY_BEHAVIORS.End = () => handledElements.length - 1
+  }
+
+  const focus = ref(null)
+
+  const handleKeydown = event => {
+    if (event.key in KEY_BEHAVIORS) {
+      event.preventDefault()
+      const i = handledElements.indexOf(event.target)
+
+      focus.value = handledElements[KEY_BEHAVIORS[event.key](i)]
+      focus.value.focus()
+    }
+  }
+
+  const handledElements = []
+
+  watchEffect(() => {
+    (toValue(elements) || [])
+      .filter(elem => !handledElements.includes(elem))
+      .forEach(elem => {
+        elem.addEventListener('keydown', handleKeydown)
+        elem.addEventListener('focus', event => {
+          focus.value = event.target
+          event.target.addEventListener('blur', () => focus.value = null, { once: true })
+        })
+        handledElements.push(elem)
+
+        if (document.activeElement === elem) {
+          focus.value = elem
+        }
+      })
+  })
+
+  return focus
+}

package/src/composables/formatDate.js

@@ -0,0 +1,15 @@
+export default function formatDate(unix_timestamp, detail = false) {
+    // multiplied by 1000 so that the argument is in milliseconds, not seconds
+    const date = new Date(unix_timestamp * 1000)
+    const days = ["Sun", "Mon", "Tues", "Weds", "Thurs", "Fri", "Sat"]
+    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+    const hour = date.getHours() + 1 > 12 ? date.getHours() - 11 : date.getHours() + 1
+    const amPm = date.getHours() + 1 > 12 ? "pm" : "am"
+    const minutes = "0" + date.getMinutes()
+
+    if (detail) {
+        return `${days[date.getDate()]}, ${(months[date.getMonth()]).substring(0, 3)} ${date.getDate()}, ${hour}:${minutes.substr(-2)}${amPm} EDT`
+    } else {
+        return `${date.getMonth() + 1}-${date.getDate() + 1}-${date.getFullYear()}`
+    }
+}

package/src/composables/slugify.js

@@ -0,0 +1,10 @@
+export default function  slugify(str) {
+    return String(str)
+    .normalize('NFKD') // split accented characters into their base characters and diacritical marks
+    .replace(/[\u0300-\u036f]/g, '') // remove all the accents, which happen to be all in the \u03xx UNICODE block.
+    .trim() // trim leading or trailing whitespace
+    .toLowerCase() // convert to lowercase
+    .replace(/[^a-z0-9 -]/g, '') // remove non-alphanumeric characters
+    .replace(/\s+/g, '-') // replace spaces with hyphens
+    .replace(/-+/g, '-'); // remove consecutive hyphens
+}

package/src/main.js

@@ -5,6 +5,8 @@ import { createApp } from 'vue'
 // createApp(App).mount('#app')
 
 import Search from './components/Search.vue'
+import SearchDetail from './components/SearchDetail.vue'
+import SearchHistory from './components/SearchHistory.vue'
 
 export default {
 
@@ -16,4 +18,4 @@ export default {
 
 }
 
-export { Search }
+export { Search, SearchDetail, SearchHistory }