Popup Overlays with Vue Router and Portal Vue

<template>
  <div
    role="dialog"
    :aria-label="label"
    aria-modal="true"
    class="PopupWrap"
    :class="{ 'PopupWrap--centered': centered }"
  >
    <div
      class="PopupWrap__backdrop"
      @click="$emit('close')"
    >
      <slot name="backdrop"/>
    </div>
    <slot/>
  </div>
</template>

<script>
export default {
  name: 'PopupWrap',
  props: {
    centered: {
      default: true,
      type: Boolean,
    },
    focusElement: {
      default: null,
      type: Object,
    },
    label: {
      required: true,
      type: String,
    },
  },
  mounted() {
    const close = (e) => {
      const ESC = 27;
      if (e.keyCode !== ESC) return;
      this.$emit('close');
    };
    // Close the modal when the
    // user presses the ESC key.
    document.addEventListener('keyup', close);
    this.$on('hook:destroyed', () => {
      document.removeEventListener('keyup', close);
    });

    // Activate the modal when the component is mounted.
    this.activate();
    this.$on('hook:destroyed', () => {
      // Deactivate when the component is destroyed.
      this.deactivate();
    });
  },
  methods: {
    activate() {
      // Save the current active element
      // so we can restore it when closing
      // the popup overlay.
      this.previousActiveElement = document.activeElement;

      // Prevent the background to be scrollable.
      this.disableScrolling();
      // Make it impossible to focus elements in
      // the background when using the TAB key.
      this.inert();
      // Focus the first focusable element in the dialog.
      this.focusFirstDescendant();
    },
    async deactivate() {
      this.enableScrolling();
      await this.inert(false);
      this.restoreFocus();
    },
    // Disable scrolling on all devices (including iOS).
    disableScrolling() {
      this.scrollPosition = window.pageYOffset;

      const $body = document.querySelector('body');
      $body.style.overflow = 'hidden';
      $body.style.position = 'fixed';
      $body.style.top = `-${this.scrollPosition}px`;
      $body.style.width = '100%';
    },
    enableScrolling() {
      const $body = document.querySelector('body');
      $body.style.removeProperty('overflow');
      $body.style.removeProperty('position');
      $body.style.removeProperty('top');
      $body.style.removeProperty('width');

      window.scrollTo(0, this.scrollPosition);
    },
    // Make all elements except the overlay inert.
    async inert(status = true) {
      await this.$nextTick();
      [...this.$root.$el.children].forEach((child) => {
        if (child === this.$el || child.contains(this.$el)) return;
        child.inert = status;
      });
    },
    focusFirstDescendant(element) {
      const focusable = this.$el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
      if (focusable[0] && focusable[0].focus) focusable[0].focus();
    },
    restoreFocus() {
      const element = this.focusElement || this.previousActiveElement;

      if (element && element.focus) element.focus();
    },
  },
};
</script>

<style>
.PopupWrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.PopupWrap--centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.PopupWrap__backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>

<template>
  <Portal to="popup">
    <PopupBase
      :label="label"
      @close="$router.back()"
    >
      <slot name="backdrop" slot="backdrop"/>
      <slot/>
    </PopupBase>
  </Portal>
</template>

<script>
import PopupBase from './PopupBase.vue';

export default {
  name: 'PopupRouterView',
  props: {
    label: {
      required: true,
      type: String,
    },
  },
  components: {
    PopupBase,
  },
};
</script>

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

import Product from '../components/Product.vue';
import ProductImagePopup from '../components/ProductImagePopup.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      // In a real world application the path
      // would be something like `/product/:id`.
      path: '/',
      component: Product,
      children: [
        // Here we specify that the `ProductImagePopup`
        // component should be rendered as a nested
        // route of the `Product` component.
        {
          path: '/product/:id/image',
          component: ProductImagePopup,
        },
      ],
    },
  ],
});

<template>
  <div>
    <h1>{{ product.name }}</h1>
    <ul>
      <!-- Feature list -->
    </ul>
    <RouterLink :to="`/product/${product.id}/image`">
      Show preview image
    </RouterLink>
    <AddToCartButton/>
    <!-- The child route is rendered here. -->
    <RouterView/>
  </div>
</template>

<script>
import AddToCartButton from './AddToCartButton.vue';

export default {
  name: 'Product',
  components: {
    AddToCartButton,
  },
};
</script>

<template>
  <button @click="showDialog = true">
    Add to cart
    <PopupModalDialog
      v-if="showDialog"
      label="Add to cart"
      @yes="addToCart"
      @no="showDialog = false"
      @close="showDialog = false"
    >
      Are you sure you want to add this product to your cart?
    </PopupModalDialog>
  </button>
</template>

<script>
import PopupModalDialog from './PopupModalDialog.vue';

export default {
  name: 'AddToCartButton',
  components: {
    PopupModalDialog,
  },
  data() {
    return {
      showDialog: false,
    };
  },
  methods: {
    addToCart() {
      // Do things...
      this.showDialog = false;
    },
  },
};
</script>