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 @@ + + + + + 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