feat(modal): close on click outside (#86)

* feat(modal): close modal on click outside * feat(modal): close modal on click outside * refactor(component): extract inline method * refactor(component): sort methods alphabetically * feat(modal): added 'closeModalOnClickOutside' option description to README.md * docs(readme): minor rewording --------- Co-authored-by: Jonas Thelemann <[email protected]>
dargmuesli · Apr 13, 2023 · 0147e3d · 0147e3d
1 parent 83e74df
commit 0147e3d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -99,6 +99,9 @@ if (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {
 // 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'
 barPosition: 'bottom-full',
 
+// Switch to toggle if clicking the overlay outside the configuration modal closes the modal.
+closeModalOnClickOutside: true,
+
 // Component colors.
 // If you want to disable colors set colors property to false.
 colors: {

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -14,6 +14,7 @@ export default defineNuxtConfig({
     colors: {
       checkboxActiveBackground: '#00A34A', // text-green-600
     },
+    closeModalOnClickOutside: true,
     cookies: {
       necessary: [
         {

diff --git a/src/runtime/components/CookieControl.vue b/src/runtime/components/CookieControl.vue
@@ -43,7 +43,11 @@
         </svg>
       </button>
       <transition name="cookieControl__Modal">
-        <div v-if="isModalActive" class="cookieControl__Modal">
+        <div
+          v-if="isModalActive"
+          class="cookieControl__Modal"
+          @click.self="onModalClick"
+        >
           <p
             v-if="isSaved"
             class="cookieControl__ModalUnsaved"
@@ -238,12 +242,6 @@ const accept = () => {
     cookiesOptionalEnabled: moduleOptions.cookies.optional,
   })
 }
-const decline = () => {
-  setCookies({
-    isConsentGiven: true,
-    cookiesOptionalEnabled: moduleOptions.cookies.necessary,
-  })
-}
 const acceptPartial = () => {
   const localCookiesEnabledIds = getCookieIds(localCookiesEnabled.value)
 
@@ -255,23 +253,18 @@ const acceptPartial = () => {
     ].filter((cookie) => localCookiesEnabledIds.includes(getCookieId(cookie))),
   })
 }
+const decline = () => {
+  setCookies({
+    isConsentGiven: true,
+    cookiesOptionalEnabled: moduleOptions.cookies.necessary,
+  })
+}
 const declineAll = () => {
   setCookies({
     isConsentGiven: false,
     cookiesOptionalEnabled: [],
   })
 }
-const toogleCookie = (cookie: Cookie) => {
-  const cookieIndex = getCookieIds(localCookiesEnabled.value).indexOf(
-    getCookieId(cookie)
-  )
-
-  if (cookieIndex < 0) {
-    localCookiesEnabled.value.push(cookie)
-  } else {
-    localCookiesEnabled.value.splice(cookieIndex, 1)
-  }
-}
 const getDescription = (description: Translatable) =>
   `${
     moduleOptions.isDashInDescriptionEnabled === false ? '' : '-'
@@ -284,6 +277,11 @@ const getName = (name: Translatable) => {
 const init = () => {
   expires.setTime(expires.getTime() + moduleOptions.cookieExpiryOffsetMs)
 }
+const onModalClick = () => {
+  if (moduleOptions.closeModalOnClickOutside) {
+    isModalActive.value = false
+  }
+}
 const setCookies = ({
   cookiesOptionalEnabled: cookiesOptionalEnabledNew,
   isConsentGiven: isConsentGivenNew,
@@ -310,6 +308,17 @@ const toggleButton = ($event: MouseEvent) => {
       ?.nextSibling as HTMLLabelElement | null
   )?.click()
 }
+const toogleCookie = (cookie: Cookie) => {
+  const cookieIndex = getCookieIds(localCookiesEnabled.value).indexOf(
+    getCookieId(cookie)
+  )
+
+  if (cookieIndex < 0) {
+    localCookiesEnabled.value.push(cookie)
+  } else {
+    localCookiesEnabled.value.splice(cookieIndex, 1)
+  }
+}
 const toggleLabel = ($event: KeyboardEvent) => {
   if ($event.key === ' ') ($event.target as HTMLLabelElement | null)?.click()
 }

diff --git a/src/runtime/types.ts b/src/runtime/types.ts
@@ -72,6 +72,7 @@ export interface ModuleOptions {
     | 'bottom-left'
     | 'bottom-right'
     | 'bottom-full'
+  closeModalOnClickOutside: boolean
   colors: false | Record<string, any>
   cookieExpiryOffsetMs: number
   cookieNameCookiesEnabledIds: string
@@ -95,6 +96,7 @@ export interface ModuleOptions {
 
 export const DEFAULTS: Required<ModuleOptions> = {
   barPosition: 'bottom-full',
+  closeModalOnClickOutside: false,
   colors: {
     barBackground: '#000',
     barButtonBackground: '#fff',