diff --git a/projects/frontend/src/components/inflators/image.ts b/projects/frontend/src/components/inflators/image.ts
index 01a818d..bc1a7fb 100644
--- a/projects/frontend/src/components/inflators/image.ts
+++ b/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()
- // let cloned = this.wrapper.cloneNode(true) as HTMLElement
- // let image = cloned.firstChild as HTMLElement
- // image.removeEventListener('click', this.onClick)
- // ModalService.open(cloned)
+ event.preventDefault()
+ let cloned = this.wrapper.cloneNode(true) as HTMLElement
+ let image = cloned.firstChild as HTMLElement
+ image.removeEventListener('click', this.onClick)
+ const store = useModalStore()
+ store.content = cloned.outerHTML
+ store.isOpen = true
}
}
diff --git a/projects/frontend/src/components/shared/content-modal.vue b/projects/frontend/src/components/shared/content-modal.vue
new file mode 100644
index 0000000..f544838
--- /dev/null
+++ b/projects/frontend/src/components/shared/content-modal.vue
@@ -0,0 +1,56 @@
+
+
+
+.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'
+ )
+
+
+
diff --git a/projects/frontend/src/main.vue b/projects/frontend/src/main.vue
index 4ee363d..893af88 100644
--- a/projects/frontend/src/main.vue
+++ b/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