Movie popup is now a prototype on the vue instance. Initialized in App and accessible on this.$popup

src/App.vue

@@ -10,7 +10,7 @@
       </div>
     </header>
 
-      <movie-popup v-if="moviePopupIsVisible" @close="closeMoviePopup" :id="moviePopupId" :type="moviePopupType"></movie-popup>
+    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
 
     <section class="main">
       <transition name="fade" @after-leave="afterLeave">
@@ -120,16 +120,24 @@ export default {
     }
   },
   created(){
-    window.addEventListener('popstate', this.onHistoryState);
-    window.addEventListener('pagehide', this.changeHistoryState);
-    eventHub.$on('openMoviePopup', this.openMoviePopup);
-    eventHub.$on('setSearchQuery', this.setSearchQuery);
-    eventHub.$on('requestToken', this.requestToken);
-    eventHub.$on('setUserStatus', this.setUserStatus);
-    if (this.isTouchDevice()) {
-      document.querySelector('body').classList.add('touch');
+    let that = this
+    Vue.prototype.$popup = {
+      get isOpen() {
+        return that.moviePopupIsVisible
+      },
+      open: (id, type) => {
+        this.popupID = id || this.popupID
+        this.popupType = type || this.popupType
+        this.moviePopupIsVisible = true
+        console.log('opened')
+      },
+      close: () => {
+        this.moviePopupIsVisible = false
+        console.log('closed')
       }
     }
+    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
+  }
 }
 </script>
 

src/components/MoviePopup.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="movie-popup" @click="$emit('close')">
+  <div class="movie-popup" @click="$popup.close()">
     <div class="movie-popup__box" @click.stop>
-      <movie :id="id" :mediaType="type"></movie>
-      <button class="movie-popup__close" @click="$emit('close')"></button>
+      <movie :id="id" :type="type"></movie>
+      <button class="movie-popup__close" @click="$popup.close()"></button>
     </div>
     <i class="loader"></i>
   </div>
@@ -15,11 +15,12 @@ export default {
   props: ['id', 'type'],
   components: { Movie },
   created(){
+    let that = this
     window.addEventListener('keyup', function(e){
       if (e.keyCode == 27) {
-        this.$emit('close');
+        that.$popup.close()
       }
-    }.bind(this));
+    })
   }
 }
 </script>
@@ -35,7 +36,7 @@ export default {
   z-index: 20;
   width: 100%;
   height: 100vh;
-  background: rgba($c-dark, 0.98);
+  background: rgba($c-dark, 0.93);
   -webkit-overflow-scrolling: touch;
   overflow: auto;
   &__box{