From c98869ab7eaa166a2990843b296a608dfdaa41a6 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 6 Aug 2017 13:07:51 -0700
Subject: [PATCH] Add a blur effect when a modal dialog is open

---
 src/css/main.scss                 |  4 ++
 src/js/components/App.vue         | 79 +++++++++++++++----------------
 src/js/components/Modal.vue       | 33 +++++++++++++
 src/js/components/ScheduleBox.vue |  9 ++--
 src/js/components/Stage.vue       | 29 ++++++------
 5 files changed, 95 insertions(+), 59 deletions(-)
 create mode 100644 src/js/components/Modal.vue

diff --git a/src/css/main.scss b/src/css/main.scss
index f1b2b35..3bbac9a 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -9,6 +9,10 @@ html {
     @extend .bg-squids;
 }
 
+body.has-modal #main {
+    filter: blur(4px);
+}
+
 .fa {
     &:before {
         display: inline-block;
diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index d9778bd..7dab096 100644
--- a/src/js/components/App.vue
+++ b/src/js/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="hero is-fullheight">
+    <div class="hero is-fullheight" id="main">
         <div class="hero-head">
             <div class="container is-fluid">
                 <div class="level is-marginless">
@@ -87,59 +87,58 @@
             </div>
         </div>
 
-        <div class="modal is-active" v-if="aboutOpen" v-portal>
-            <div class="modal-background" @click="aboutOpen = false"></div>
-                <div class="modal-content tilt-left-slight" style="max-height: 100vh">
-                    <div class="about-box">
-                        <div class="hook-box">
-                            <div class="content">
-                                <h3 class="font-splatoon2 title is-3">
-                                    <div class="image is-pulled-right hero-image is-hidden-touch" style="width: 307px; height: 250px;">
-                                        <img src="../../img/hero-char.png" />
-                                    </div>
-                                    Hello!
-                                </h3>
-                                <p>
-                                    Splatoon2.ink shows the current and upcoming map schedule for Splatoon 2.
-                                </p>
-                                <p>
-                                    This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
-                                    and <a href="http://bulma.io/" target="_blank">Bulma</a>.
-                                    All data comes from the SplatNet 2 API.
-                                </p>
-                                <p>
-                                    <a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
-                                    or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
-                                </p>
-                                <h5 class="font-splatoon2 title is-5">Known Issues</h5>
-                                <p>
-                                    <strong>Salmon Run:</strong>
-                                    Times are only displayed when a Salmon Run stage is open.
-                                    The API doesn't provide a way to see maps, available weapons, or upcoming Salmon Run times.
-                                </p>
-                                <p>
-                                    <strong>Splatfests:</strong>
-                                    Only North American Splatfests are displayed since the API seems to be restricted to the region you purchased the game from.
-                                    I may manually enter times for Splatfests in other regions in the future.
-                                </p>
-                            </div>
+        <Modal v-if="aboutOpen" @close="aboutOpen = false">
+            <div class="modal-content tilt-left-slight" style="max-height: 100vh">
+                <div class="about-box">
+                    <div class="hook-box">
+                        <div class="content">
+                            <h3 class="font-splatoon2 title is-3">
+                                <div class="image is-pulled-right hero-image is-hidden-touch" style="width: 307px; height: 250px;">
+                                    <img src="../../img/hero-char.png" />
+                                </div>
+                                Hello!
+                            </h3>
+                            <p>
+                                Splatoon2.ink shows the current and upcoming map schedule for Splatoon 2.
+                            </p>
+                            <p>
+                                This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
+                                and <a href="http://bulma.io/" target="_blank">Bulma</a>.
+                                All data comes from the SplatNet 2 API.
+                            </p>
+                            <p>
+                                <a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
+                                or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
+                            </p>
+                            <h5 class="font-splatoon2 title is-5">Known Issues</h5>
+                            <p>
+                                <strong>Salmon Run:</strong>
+                                Times are only displayed when a Salmon Run stage is open.
+                                The API doesn't provide a way to see maps, available weapons, or upcoming Salmon Run times.
+                            </p>
+                            <p>
+                                <strong>Splatfests:</strong>
+                                Only North American Splatfests are displayed since the API seems to be restricted to the region you purchased the game from.
+                                I may manually enter times for Splatfests in other regions in the future.
+                            </p>
                         </div>
                     </div>
                 </div>
-            <button class="modal-close is-large" @click="aboutOpen = false"></button>
-        </div>
+            </div>
+        </Modal>
     </div>
 </template>
 
 <script>
 import axios from 'axios';
 import Dropdown from './Dropdown.vue';
+import Modal from './Modal.vue';
 import ScheduleBox from './ScheduleBox.vue';
 import SalmonRunBox from './SalmonRunBox.vue';
 import SplatfestBox from './SplatfestBox.vue';
 
 export default {
-    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox },
+    components: { Dropdown, Modal, ScheduleBox, SalmonRunBox, SplatfestBox },
     data() {
         return {
             regions: [
diff --git a/src/js/components/Modal.vue b/src/js/components/Modal.vue
new file mode 100644
index 0000000..79356ba
--- /dev/null
+++ b/src/js/components/Modal.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="modal is-active" v-portal>
+        <div class="modal-background" @click="$emit('close')"></div>
+        <slot />
+        <button class="modal-close is-large" @click="$emit('close')"></button>
+    </div>
+</template>
+
+<script>
+const openModals = [];
+
+function opened(vm) {
+    openModals.push(vm);
+    document.body.classList.add('has-modal');
+}
+
+function closed(vm) {
+    let index = openModals.indexOf(vm);
+    if (index > -1)
+        openModals.splice(index, 1);
+    if (openModals.length === 0)
+        document.body.classList.remove('has-modal');
+}
+
+export default {
+    mounted() {
+        opened(this);
+    },
+    beforeDestroy() {
+        closed(this);
+    },
+}
+</script>
diff --git a/src/js/components/ScheduleBox.vue b/src/js/components/ScheduleBox.vue
index a854e07..76a6b54 100644
--- a/src/js/components/ScheduleBox.vue
+++ b/src/js/components/ScheduleBox.vue
@@ -35,8 +35,7 @@
             </button>
         </p>
 
-        <div class="modal is-active font-splatoon2" v-if="isOpen" v-portal>
-            <div class="modal-background" @click="isOpen = false"></div>
+        <Modal v-if="isOpen" @close="isOpen = false" class="font-splatoon2">
             <div class="modal-card schedule-box tilt-left-slight" :class="cssClass">
                 <header class="modal-card-head">
 
@@ -46,18 +45,18 @@
                     <ScheduleList :schedules="schedules" :now="now" :onlyFirst="false"></ScheduleList>
                 </section>
             </div>
-            <button class="modal-close is-large" @click="isOpen = false"></button>
-        </div>
+        </Modal>
     </div>
 </template>
 
 <script>
+import Modal from './Modal.vue';
 import GameModeHeader from './GameModeHeader.vue';
 import Stage from './Stage.vue';
 import ScheduleList from './ScheduleList.vue';
 
 export default {
-    components: { GameModeHeader, Stage, ScheduleList },
+    components: { Modal, GameModeHeader, Stage, ScheduleList },
     props: ['schedules', 'cssClass', 'festival', 'now'],
     data() {
         return {
diff --git a/src/js/components/Stage.vue b/src/js/components/Stage.vue
index 3ed6ff2..e728718 100644
--- a/src/js/components/Stage.vue
+++ b/src/js/components/Stage.vue
@@ -3,25 +3,26 @@
         <figure class="image is-16by9"></figure>
         <span class="stage-title">{{ stage.name }}</span>
 
-        <div class="modal is-active" v-if="isOpen" v-portal>
-            <div class="modal-background" @click="isOpen = false"></div>
-                <div class="modal-content tilt-right-slight">
-                    <p class="image is-16by9">
-                        <img :src="image" />
-                    </p>
-                    <p class="has-text-centered">
-                        <span class="font-splatoon2">
-                            {{ stage.name }}
-                        </span>
-                    </p>
-                </div>
-            <button class="modal-close is-large" @click="isOpen = false"></button>
-        </div>
+        <Modal v-if="isOpen" @close="isOpen = false">
+            <div class="modal-content tilt-right-slight">
+                <p class="image is-16by9">
+                    <img :src="image" />
+                </p>
+                <p class="has-text-centered">
+                    <span class="font-splatoon2">
+                        {{ stage.name }}
+                    </span>
+                </p>
+            </div>
+        </Modal>
     </div>
 </template>
 
 <script>
+import Modal from './Modal.vue';
+
 export default {
+    components: { Modal },
     props: ['stage'],
     data() {
         return {