@sfgrp/taxonpages 0.1.0

package/src/components/ImageViewer/ImageViewer.global.vue

@@ -0,0 +1,197 @@
+<template>
+  <div
+    ref="viewerRef"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Image viewer"
+    class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
+  >
+    <div
+      class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
+      @click.stop
+    >
+      <div
+        class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle"
+      >
+        <VSpinner v-if="isLoading" />
+        <div
+          class="flex flex-col justify-center"
+          v-if="errorMessage"
+          v-text="errorMessage"
+        />
+        <img
+          v-show="!errorMessage"
+          ref="imageElement"
+          class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
+          :alt="image?.depictions?.map((d) => d.label).join(';')"
+          :src="image.original"
+          @click="emit('close')"
+        />
+
+        <ControlNextImage
+          v-if="next"
+          class="right-0 absolute my-auto top-1/2 -translate-y-1/2"
+          @click="emit('next')"
+        />
+        <ControlPreviousImage
+          v-if="previous"
+          class="left-0 absolute my-auto top-1/2 -translate-y-1/2"
+          @click="emit('previous')"
+        />
+      </div>
+    </div>
+    <div class="bottom-0 fixed max-w-full w-full">
+      <div
+        class="text-base-content text-sm attributions p-6 align-middle flex justify-between flex-col text-center"
+      >
+        <ImageDepictions
+          class="my-auto"
+          :depictions="image.depictions"
+        />
+        <ImageAttribution
+          class="my-auto"
+          :attribution="image.attribution"
+        />
+        <ImageSource
+          class="my-auto"
+          :source="image.source"
+        />
+      </div>
+      <div class="flex justify-center">
+        <GalleryThumbnailList
+          class="pb-2"
+          :current="index"
+          :images="images"
+          @select-index="emit('selectIndex', $event)"
+          @click.stop
+        />
+      </div>
+    </div>
+    <ImageToolbar class="w-full absolute top-0 h-12 left-0 items-center">
+      <ImageViewerCounter
+        :current-image="index"
+        :total-images="images.length"
+      />
+      <template #right>
+        <ImageViewerClose @click="emit('close')" />
+      </template>
+    </ImageToolbar>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
+import ImageAttribution from './ImageAttribution.vue'
+import ImageDepictions from './ImageDepictions.vue'
+import ImageSource from './ImageSource.vue'
+import ImageViewerCounter from './ImageViewerCounter.vue'
+import ControlNextImage from './ControlImageNext.vue'
+import ControlPreviousImage from './ControlImagePrevious.vue'
+import GalleryThumbnailList from '@/components/Gallery/GalleryThumbnailList.vue'
+import ImageToolbar from './ImageToolbar.vue'
+import ImageViewerClose from './ImageViewerClose.vue'
+
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true
+  },
+
+  images: {
+    type: Array,
+    default: () => []
+  },
+
+  next: {
+    type: Boolean,
+    default: false
+  },
+
+  previous: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'previous', 'next', 'selectIndex'])
+
+let previouslyFocusedElement = null
+const viewerRef = ref(null)
+
+const handleKeyboard = (e) => {
+  switch (e.key) {
+    case 'ArrowLeft':
+      if (props.previous) {
+        emit('previous')
+      }
+      break
+    case 'ArrowRight':
+      if (props.next) {
+        emit('next')
+      }
+      break
+    case 'Escape':
+      emit('close')
+      break
+    case 'Tab':
+      trapFocus(e)
+      break
+  }
+}
+
+function trapFocus(e) {
+  const focusable = viewerRef.value?.querySelectorAll(
+    'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  )
+
+  if (!focusable?.length) return
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+const imageElement = ref(null)
+const isLoading = ref(false)
+const errorMessage = ref(null)
+const image = computed(() => props.images[props.index])
+
+previouslyFocusedElement = document.activeElement
+document.addEventListener('keyup', handleKeyboard)
+
+function handleError() {
+  isLoading.value = false
+  errorMessage.value = 'Image was not found or format is not supported'
+}
+
+function handleLoad() {
+  isLoading.value = false
+}
+
+onMounted(() => {
+  imageElement.value.addEventListener('load', handleLoad)
+  imageElement.value.addEventListener('error', handleError)
+  document.body.classList.add('overflow-hidden')
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keyup', handleKeyboard)
+  document.body.classList.remove('overflow-hidden')
+  previouslyFocusedElement?.focus()
+})
+
+watch(
+  () => props.index,
+  () => {
+    errorMessage.value = null
+    isLoading.value = true
+  }
+)
+</script>

package/src/components/ImageViewer/ImageViewerClose.vue

@@ -0,0 +1,12 @@
+<template>
+  <button
+    type="button"
+    aria-label="Close image viewer"
+    class="p-2 cursor-pointer opacity-50 text-base-content"
+  >
+    <IconClose />
+  </button>
+</template>
+
+<script setup>
+</script>

package/src/components/ImageViewer/ImageViewerCounter.vue

@@ -0,0 +1,16 @@
+<template>
+  <span class="p-2 text-black dark:text-white opacity-50">{{ currentImage + 1 }}/{{ totalImages }}</span>
+</template>
+
+<script setup>
+defineProps({
+  currentImage: {
+    type: Number,
+    required: true
+  },
+  totalImages: {
+    type: Number,
+    required: true
+  }
+})
+</script>

package/src/components/Input/InputText.global.vue

@@ -0,0 +1,30 @@
+<template>
+  <input
+    ref="input"
+    type="text"
+    class="box-border p-1.5 px-2 text-base-content rounded border sm:text-sm placeholder:text-sm border-base-border focus:ring-primary-500 focus:border-primary-500"
+    :value="props.modelValue ?? props.value"
+    @input="onInput"
+  />
+</template>
+
+<script setup>
+import { useTemplateRef } from 'vue'
+
+const props = defineProps({
+  modelValue: [String, Number],
+  value: [String, Number]
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputRef = useTemplateRef('input')
+
+const onInput = (event) => {
+  emit('update:modelValue', event.target.value)
+}
+
+defineExpose({
+  inputRef
+})
+</script>

package/src/components/Input/SelectInput.global.vue

@@ -0,0 +1,31 @@
+<template>
+  <select
+    ref="input"
+    class="box-border p-1.5 px-2 text-base-content rounded border sm:text-sm placeholder:text-sm border-base-border focus:ring-primary-500 focus:border-primary-500"
+    :value="props.modelValue ?? props.value"
+    @change="onInput"
+  >
+    <slot />
+  </select>
+</template>
+
+<script setup>
+import { useTemplateRef } from 'vue'
+
+const props = defineProps({
+  modelValue: [String, Number],
+  value: [String, Number]
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputRef = useTemplateRef('input')
+
+function onInput(e) {
+  emit('update:modelValue', e.target.value)
+}
+
+defineExpose({
+  inputRef
+})
+</script>

package/src/components/Layout/LayoutFooter.vue

@@ -0,0 +1,67 @@
+<template>
+  <footer
+    class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4"
+  >
+    <div class="container mx-auto text-sm pt-2 pb-4">
+      <FooterCitation />
+      <FooterCopyright />
+
+      <hr class="mt-3 mb-3 border-gray-500" />
+
+      <div class="flex flex-col sm:flex-row justify-between gap-4">
+        <div
+          class="[&>*:not(:last-child)]:after:content-['|'] [&>*:not(:last-child)]:after:mx-1"
+        >
+          <span>
+            Data provided by
+            <a
+              class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
+              target="_blank"
+              rel="noopener"
+              href="https://taxonworks.org/"
+            >
+              TaxonWorks
+              <span class="sr-only">(opens in new window)</span>
+            </a>
+          </span>
+          <span>
+            Pages by
+            <a
+              class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
+              target="_blank"
+              rel="noopener"
+              href="https://github.com/SpeciesFileGroup/taxonpages"
+            >
+              TaxonPages
+              <span class="sr-only">(opens in new window)</span>
+            </a>
+          </span>
+          <span>
+            Support (Services) by
+            <a
+              class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
+              target="_blank"
+              rel="noopener"
+              href="https://speciesfilegroup.org"
+            >
+              Species File Group
+              <span class="sr-only">(opens in new window)</span>
+            </a>
+          </span>
+          <FooterAnalytics class="italic" />
+        </div>
+        <TrackerReport
+          icon
+          label="Report a problem"
+          button-class="flex gap-2 items-center pl-0 pr-0 pt-0 pb-0 self-end"
+        />
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import FooterCitation from '@/components/Footer/FooterCitation.vue'
+import FooterCopyright from '@/components/Footer/FooterCopyright.vue'
+import FooterAnalytics from '@/components/Footer/FooterAnalytics.vue'
+</script>

package/src/components/Layout/LayoutHeader.vue

@@ -0,0 +1,62 @@
+<template>
+  <header
+    class="tp-header relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
+  >
+    <div
+      class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
+    >
+      <RouterLink
+        to="/"
+        class="flex items-center text-primary-content"
+      >
+        <img
+          v-if="header_logo_url"
+          class="mr-3 h-10"
+          :src="logoUrl"
+          alt=""
+        />
+        <span>
+          {{ header_logo_text || project_name }}
+        </span>
+      </RouterLink>
+
+      <NavbarMobile />
+
+      <div class="relative hidden md:flex items-center ml-auto">
+        <NavbarMenu :menu="header_links" />
+        <div
+          class="flex items-center border-l ml-6 pl-6 border-base-muted border-opacity-50"
+        >
+          <ClientOnly>
+            <SwitchTheme class="text-primary-content" />
+          </ClientOnly>
+        </div>
+        <div class="flex items-center ml-2 border-base-muted">
+          <TrackerReport
+            icon
+            button-class="text-primary-content"
+          />
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import SwitchTheme from '../SwitchTheme.vue'
+import NavbarMenu from '../Navbar/NavbarMenu.vue'
+import NavbarMobile from '../Navbar/NavbarMobile.vue'
+import { isValidUrl } from '@/utils/url'
+
+const {
+  header_links,
+  header_logo_text,
+  header_logo_url,
+  base_url,
+  project_name
+} = __APP_ENV__
+
+const logoUrl = isValidUrl(header_logo_url)
+  ? header_logo_url
+  : (base_url + header_logo_url).replace('//', '/')
+</script>