Add Vue mastery Promotion Banner (#701)

Author: pieer

src/.vuepress/public/images/vuemastery/background.png

@@ -0,0 +1,19 @@
+<template>
+  <div id="vm-banner" class="vuemastery-banner hide" role="banner">
+    <div class="vuemastery-planet"></div>
+    <a class="vuemastery-banner--link" href="https://www.vuemastery.com/black-friday-2020" target="_blank">
+      <img class="vuemastery-banner--logo" src="/images/vuemastery/logo-vuemastery.svg" alt="vuemastery" />
+      <div class="vuemastery-banner--wrapper">
+        <p><span>Vue Mastery's Black Friday Sale:</span>Save 50% off a year of Vue courses</p>
+        <button class="vuemastery-button">Get discount</button>
+      </div>
+    </a>
+    <div @click.prevent="$emit('close-banner')" class="vuemastery-banner--close"></div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/.vuepress/public/images/vuemastery/black-hole.png

@@ -5,6 +5,7 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
+    <VueMasteryBanner v-if="isBannerOpen" @close-banner="closeBanner" ref='vueMasteryBanner'/>
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -36,6 +37,7 @@ import Home from '@theme/components/Home.vue'
 import Navbar from '@theme/components/Navbar.vue'
 import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
+import VueMasteryBanner from '@theme/components/sponsors/VueMasteryBanner.vue'
 import { resolveSidebarItems } from '../util'
 
 export default {
@@ -45,12 +47,17 @@ export default {
     Home,
     Page,
     Sidebar,
-    Navbar
+    Navbar,
+    VueMasteryBanner
   },
 
   data () {
     return {
-      isSidebarOpen: false
+      isSidebarOpen: false,
+      isBannerOpen:  true,
+      isMenuFixed: false,
+      nameStorage: 'vuemastery-black-firday-2020-banner',
+      menuPosition: 0
     }
   },
 
@@ -94,7 +101,9 @@ export default {
         {
           'no-navbar': !this.shouldShowNavbar,
           'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar
+          'no-sidebar': !this.shouldShowSidebar,
+          'vuemastery-menu-fixed': this.isMenuFixed,
+          'vuemastery-promo': this.isBannerOpen
         },
         userPageClass
       ]
@@ -105,6 +114,13 @@ export default {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
+
+    // Load component according to user preferences
+    if (!localStorage.getItem(this.nameStorage)) {
+      this.initBanner()
+    } else {
+      this.isBannerOpen = false
+    }
   },
 
   methods: {
@@ -131,6 +147,54 @@ export default {
           this.toggleSidebar(false)
         }
       }
+    },
+
+    //  Vue Mastery Banner
+    initBanner() {
+      // Add event listeners
+      this.toggleBannerEvents(true)
+      // Add class to the body to push fixed elements
+      this.isBannerOpen = true
+      // Get the menu position
+      this.getMenuPosition()
+      // Check current page offset position
+      this.isMenuFixed = this.isUnderBanner()
+    },
+
+    closeBanner (e) {
+      // Remove events
+      this.toggleBannerEvents(false)
+      // Hide the banner
+      this.isBannerOpen = false
+      // Save action in the local storage
+      localStorage.setItem(this.nameStorage, true)
+    },
+
+    getMenuPosition() {
+      this.menuPosition = this.$refs.vueMasteryBanner.$el.clientHeight
+    },
+
+    isUnderBanner() {
+      return window.pageYOffset > this.menuPosition
+    },
+
+    fixMenuAfterBanner() {
+      if (this.isUnderBanner()) {
+        if (!this.isMenuFixed) {
+          // The menu will be fixed
+          this.isMenuFixed = true
+        }
+      } else if (this.isMenuFixed) {
+        // The menu stay under the banner
+        this.isMenuFixed = false
+      }
+    },
+
+    toggleBannerEvents(on) {
+      // Add or remove event listerners attached to the DOM
+      let method = on ? "addEventListener" : "removeEventListener"
+      window[method]("resize", this.getMenuPosition)
+      window[method]("scroll", this.fixMenuAfterBanner)
     }
   }
 }

src/.vuepress/public/images/vuemastery/logo-vuemastery.svg

@@ -4,6 +4,7 @@
 @require './arrow'
 @require './wrapper'
 @require './toc'
+@require './vuemastery-banner'
 
 html, body
   padding 0