vuejs · yyx990803 · Nov 20, 2020 · Nov 17, 2020 · Nov 17, 2020 · Nov 19, 2020
diff --git a/src/images/background.png b/src/images/background.png
diff --git a/src/images/black-hole.png b/src/images/black-hole.png
diff --git a/src/images/logo-vuemastery.svg b/src/images/logo-vuemastery.svg
diff --git a/src/images/planets.png b/src/images/planets.png
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -90,6 +90,7 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
+    <%- partial('partials/vuemastery_banner.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -0,0 +1,102 @@
+<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+<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/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 id="vm-close" class="vuemastery-banner--close"></div>
+</div>
+
+<script>
+  (function () {
+    // Get elements
+    var elBody = document.getElementsByTagName("body")[0];
+    var elBanner = document.getElementById("vm-banner");
+    var elClose = document.getElementById("vm-close");
+    var elMenu = document.getElementById("mobile-bar");
+
+    // Variable names
+    var nameWrapper = "vuemastery-promo";
+    var nameFixMenu = "vuemastery-menu-fixed";
+    var nameStorage = "vuemastery-black-firday-2020-banner";
+
+    // Defaults values
+    var isMenuFixed = false;
+    var posMenu = 80;
+
+    var initBanner = function () {
+      // Add event listeners
+      toggleBannerEvents(true);
+      // Add class to the body to push fixed elements
+      elBody.classList.add(nameWrapper);
+      // Display the banner
+      elBanner.style.display = "block";
+      // Init close button action
+      elClose.onclick = closeBanner;
+      // Get the menu position
+      getMenuPosition();
+      // Check current page offset position
+      isMenuFixed = isUnderBanner();
+      // And position menu accordingly
+      if (isMenuFixed) {
+        elBody.classList.add("fixed");
+      }
+    }
+
+    var closeBanner = function(e) {
+      // Prevent bubbling event that redirect to vuemastery.com
+      e.preventDefault();
+      // Remove events
+      toggleBannerEvents(false);
+      // Hide the banner
+      elBanner.style.display = "none";
+      // Remove class to the body that push fixed elements
+      elBody.classList.remove(nameWrapper);
+      // Save action in the local storage
+      localStorage.setItem(nameStorage, true);
+    }
+
+    var getMenuPosition = function() {
+      posMenu = elBanner.clientHeight;
+    }
+
+    var isUnderBanner = function() {
+      return window.pageYOffset > posMenu;
+    }
+
+    var fixMenuAfterBanner = function() {
+      if (isUnderBanner()) {
+        if (!isMenuFixed) {
+          // The menu will be fixed
+          toggleFixedPosition(true);
+        }
+      } else if (isMenuFixed) {
+        // The menu stay under the banner
+        toggleFixedPosition(false);
+      }
+    }
+
+    var toggleBannerEvents = function (on) {
+      // Add or remove event listerners attached to the DOM
+      var method = on ? "addEventListener" : "removeEventListener";
+      window[method]("resize", getMenuPosition);
+      window[method]("scroll", fixMenuAfterBanner);
+    }
+
+    var toggleFixedPosition = function (on) {
+      // Switch between relative and fixed position
+      var method = on ? "add" : "remove";
+      elBody.classList[method](nameFixMenu);
+      isMenuFixed = on;
+    }
+
+    // Load component according to user preferences
+    if (!localStorage.getItem(nameStorage)) {
+      initBanner();
+    }
+  })()
+</script>