implement modal service/component

projects/frontend/src/components/inflators/image.ts

@@ -1,4 +1,4 @@
-//import { ModalService } from 'src/components/services/modal'
+import { useModalStore } from 'src/modal'
 
 /**
  * Queries for HTMLImageElement nodes and inflates them with extra functionality
@@ -42,10 +42,12 @@ export class ImageElement {
    * @param event the click event
    */
   onClick = (event: Event) => {
-    // event.preventDefault()
+    event.preventDefault()
-    // let cloned = this.wrapper.cloneNode(true) as HTMLElement
+    let cloned = this.wrapper.cloneNode(true) as HTMLElement
-    // let image = cloned.firstChild as HTMLElement
+    let image = cloned.firstChild as HTMLElement
-    // image.removeEventListener('click', this.onClick)
+    image.removeEventListener('click', this.onClick)
-    // ModalService.open(cloned)
+    const store = useModalStore()
+    store.content = cloned.outerHTML
+    store.isOpen = true
   }
 }

projects/frontend/src/components/shared/content-modal.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useModalStore } from 'src/modal'
+
+const modalState = useModalStore()
+
+const onClose = (event: Event) => {
+  event.preventDefault()
+  modalState.isOpen = false
+}
+</script>
+
+<template lang="pug">
+.modal-outlet
+  .modal-wrapper(
+    v-if='modalState.isOpen'
+  )
+    .modal-container
+      .modal-header
+        .modal-title
+          span(
+            v-if="!!modalState.title"
+          )
+            span {{ modalState.title }}
+        .modal-controls
+          button(
+            @click='onClose($event)'
+          ) Close
+      .modal-content(
+        v-if='modalState.content'
+        v-html='modalState.content'
+      )
+</template>
+
+<style scoped lang="sass">
+.modal-outlet
+  .modal-wrapper
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    z-index: 9999
+    .modal-container
+      height: 100%
+      overflow: auto
+      width: 100%
+      .modal-header
+        display: flex
+        width: 100%
+        .modal-title
+          margin-right: auto
+        .modal-controls
+          flex: 0 1 auto
+          button
+            cursor: pointer
+</style>

projects/frontend/src/main.vue

@@ -7,8 +7,9 @@ import { injectStylesheet } from 'src/utilities/dom'
 import { storage } from './utilities/fetch'
 import { useRouteStore } from 'src/routes'
 
-import type { Link, RoutedWindow, WarningModal } from '@goldenwere/mackenzii-types'
+import type { RoutedWindow, WarningModal } from '@goldenwere/mackenzii-types'
 
+import ContentModal from 'src/components/shared/content-modal.vue'
 import HeaderLink from 'src/components/shared/header-link.vue'
 import ThemePicker from 'src/components/shared/theme-picker.vue'
 import WarningPrompt from 'src/components/shared/warning-prompt.vue'
@@ -182,6 +183,7 @@ onMounted(async () => {
           :warning='warning'
           @acknowledged='onAcknowledgedWarning()'
         )
+  ContentModal
 </template>
 
 <style scoped lang="sass">

projects/frontend/src/modal.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useModalStore = defineStore('modalStore', {
+  state: () => ({
+    content: '',
+    isOpen: false,
+    title: '',
+  }),
+})
+
+export type ModalStoreDefinition = Omit<
+  ReturnType<typeof useModalStore>,
+  keyof ReturnType<typeof defineStore>
+>

projects/frontend/src/styles/embed.sass

@@ -1,6 +1,11 @@
 @import './mixins.scss'
 @import './tag.sass'
 
+.modal-outlet
+  .embed
+    img
+      cursor: default
+
 .embed
   video,
   iframe,