Merge pull request microsoft#136 from d4rekanguok/time-travel/disable…

…-inner-link

Disable time travel button in time travel mode

docs/time-travel/index.html

@@ -22,7 +22,7 @@
     <main class="display-wrapper">
       <iframe id="js-display" class="display" src="" frameborder="0"></iframe>
     </main>
-    <div class="history">
+    <div id="js-history" class="history">
       <h2 class="history__count">
         <span id="js-history-id">1</span>
         <span class="-text--fade">/</span>
@@ -55,4 +55,4 @@ <h1 id="js-pr-title" class="pr__title" class="history__header"></h1>
   </div>
 </body>
 
-</html>
+</html>

docs/time-travel/style.css

@@ -39,6 +39,35 @@ hr {
 
 /* components */
 
+.toast {
+  position: absolute;
+  bottom: 1rem;
+  right: 2rem;
+  font-size: 1rem;
+  padding: 0.75em 1em;
+  max-width: calc(100% - 4rem);
+  border-radius: 0.25rem;
+  color: #bbb;
+  background: #2e2e2e;
+  opacity: 0;
+  transform: translateY(4rem);
+  transition: all 0.3s ease;
+}
+
+.toast.js-inactive {
+  display: none;
+}
+
+.toast--warning {
+  background: #2e2e2e;
+  color: #ffba08;
+}
+
+.toast.js-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .container {
   position: relative;
   display: flex;
@@ -56,11 +85,13 @@ hr {
 }
 
 .history {
+  position: relative;
   flex: 1 1 10rem;
   padding: 2rem;
   background: rgba(18, 18, 18, 1);
   color: #bbb;
   border-left: 1px solid rgba(255, 255, 255, 0.12);
+  overflow: hidden;
 }
 
 .history > a {

docs/time-travel/time-travel.js

@@ -1,8 +1,67 @@
 /**
  * compile with `babel`, sourcemap inline & preset `babel-preset-env`.
  */
-
 const timeTravel = async () => {
+  class Toast {
+    constructor(parent) {
+      const $parent = parent || document.body;
+      const $toast = document.createElement("div");
+
+      $toast.classList.add("toast", "js-inactive");
+      $toast.id = "js-toast";
+      $parent.appendChild($toast);
+
+      this.toast = $toast;
+      this.currentTimer = null;
+    }
+    show(msg, typeClass) {
+      const $toast = this.toast;
+      $toast.classList.remove("js-inactive");
+
+      setTimeout(() => {
+        $toast.textContent = msg;
+        $toast.classList.add(typeClass, "js-active");
+      }, 16);
+    }
+    hide(typeClass) {
+      const $toast = this.toast;
+      $toast.classList.remove(typeClass, "js-active");
+
+      setTimeout(() => {
+        $toast.classList.add("js-inactive");
+        $toast.textContent = "";
+      }, 300);
+    }
+    send(options) {
+      if (!!this.currentTimer) clearTimeout(this.currentTimer);
+
+      const _options = Object.assign(
+        { duration: 2000, type: "default" },
+        options
+      );
+      const { msg, type, duration } = _options;
+      if (typeof msg !== "string") {
+        console.error(
+          `Error: in \`sendToast({msg, duration})\`,\`msg\` has to be a string. Got ${msg} instead`
+        );
+        return;
+      }
+      if (typeof duration !== "number") {
+        console.error(
+          `Error: in \`sendToast({msg, duration})\`,\`duration\` has to be a number. Got ${duration} instead`
+        );
+        return;
+      }
+
+      const typeClass = `toast--${type}`;
+      this.show(msg, typeClass);
+
+      this.currentTimer = setTimeout(() => {
+        this.hide(typeClass);
+      }, duration);
+    }
+  }
+
   class DisplayCount {
     constructor(length = 0) {
       this.max = length - 1;
@@ -64,6 +123,7 @@ const timeTravel = async () => {
   const $buttonLast = getEl("js-button-last");
 
   const $display = getEl("js-display");
+  const $history = getEl("js-history");
   const $historyId = getEl("js-history-id");
   const $historyMax = getEl("js-history-max");
 
@@ -84,12 +144,42 @@ const timeTravel = async () => {
     return callback;
   };
 
+  // handle links inside iframe
+  const handleInnerLinks = iframe => {
+    iframe.onload = () => {
+      const iframeDoc = iframe.contentWindow.document || iframe.contentDocument;
+      const innerLinks = Array.from(iframeDoc.querySelectorAll("a"));
+
+      if (innerLinks.length === 0) return;
+
+      innerLinks.forEach($link => {
+        // disable time travel
+        if ($link.href.includes("time-travel")) {
+          $link.onclick = e => {
+            e.preventDefault();
+
+            toast.send({
+              msg: `⚠️ Can't time travel while traveling time.`,
+              type: `warning`,
+              duration: 3000
+            });
+          };
+        }
+        // open external link in a new browser window
+        if ($link.href.includes("http")) {
+          $link.setAttribute("target", "_blank");
+        }
+      });
+    };
+  };
+
   const updateDisplay = count => {
     const pr = pullRequests[count];
     const { id, title, author, editor, mergedAt, url } = pr.node;
 
     // https://stackoverflow.com/a/2257295
     $display.contentWindow.location.replace(`./history/${id}/docs/`);
+    handleInnerLinks($display);
 
     $historyId.textContent = count + 1;
     $prTitle.textContent = title;
@@ -139,6 +229,9 @@ const timeTravel = async () => {
   $historyMax.textContent = count.max + 1;
   updateView(count.jumpTo(getHashCount()));
 
+  // placeholder for toast
+  toast = new Toast($history);
+
   // button control
   $buttonFirst.onclick = () => {
     if (!count.isFirst()) {