From 8906e89a5184be5944707d93316fcd9411c6742c Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Wed, 6 Sep 2023 23:03:12 -0700 Subject: [PATCH] Refactor some modals and features into components Move some chat modals into external components: * LoginModal * ExplicitOpenModal * ReportModal * The Photo Modal was hoisted into the main index.html page, because it is not a Vue component and relied on global onclick handlers and the DOM. Spin off some external JS modules: * isAppleWebkit moved to lib/browsers.js * Local Storage management centralized and moved to lib/LocalStorage.js --- index.html | 21 + src/App.vue | 1258 ++++++++++---------------- src/components/ExplicitOpenModal.vue | 71 ++ src/components/LoginModal.vue | 65 ++ src/components/ReportModal.vue | 113 +++ src/lib/LocalStorage.js | 79 ++ src/lib/browsers.js | 18 + 7 files changed, 840 insertions(+), 785 deletions(-) create mode 100644 src/components/ExplicitOpenModal.vue create mode 100644 src/components/LoginModal.vue create mode 100644 src/components/ReportModal.vue create mode 100644 src/lib/LocalStorage.js create mode 100644 src/lib/browsers.js diff --git a/index.html b/index.html index 50196c2..1da8699 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,18 @@ {{.Config.Title}} + + + +
@@ -27,6 +39,15 @@ const UserJWTValid = {{if .JWTAuthOK}}true{{else}}false{{end}}; const UserJWTClaims = {{.JWTClaims.ToJSON}}; const CachedBlocklist = {{.CachedBlocklist}}; + + // Show the photo detail modal. + function setModalImage(url) { + let $modalImg = document.querySelector("#modalImage"), + $modal = document.querySelector("#photo-modal"); + $modalImg.src = url; + $modal.classList.add("is-active"); + return false; + } diff --git a/src/App.vue b/src/App.vue index b8873e0..09f3a78 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,13 @@ - +import LoginModal from './components/LoginModal.vue'; +import ExplicitOpenModal from './components/ExplicitOpenModal.vue'; +import ReportModal from './components/ReportModal.vue'; -