From d9d68cffba7dd3007abc5e679eb67f2618d527be Mon Sep 17 00:00:00 2001
From: EhsanParsania <ehsan.parsa69@gmail.com>
Date: Tue, 1 Jun 2021 00:45:14 +0430
Subject: [PATCH] Add Reset Button

---
 css/explaingit.css |  17 ++++
 index.html         | 224 ++++++++++++++++++++++++---------------------
 2 files changed, 135 insertions(+), 106 deletions(-)
diff --git a/css/explaingit.css b/css/explaingit.css
index 13f9b22..4a1ee5b 100644
--- a/css/explaingit.css
+++ b/css/explaingit.css
@@ -322,3 +322,20 @@ g.head-tag > text {
   font-weight: bold;
   text-transform: uppercase;
 }
+
+.reset-button{
+  position: absolute;
+  right: 25px;
+  bottom: 25px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  z-index: 100 ;
+  background-color: rgb(218, 0, 0);
+  color: white;
+  box-shadow: 0 0px 5px #555;
+  font-size: 14px;
+}
+.reset-button:active{
+  transform: translateY(2px);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a87e584..9558c80 100644
--- a/index.html
+++ b/index.html
@@ -1,141 +1,153 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115441830-1"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'UA-115441830-1');
-</script>
-
-<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-<title>Visualizing Git</title>
-<script src="js/vendor/jquery.js"></script>
-<script src="js/vendor/jquery-ui.min.js"></script>
-<script data-main="js/main" src="js/vendor/require.min.js"></script>
-<link rel="stylesheet" href="css/normalize.css">
-<link rel="stylesheet" href="css/1140.css">
-<link rel="stylesheet" href="css/explaingit.css">
-<link rel="stylesheet" href="css/jquery-ui.min.css">
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-115441830-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-115441830-1');
+  </script>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <title>Visualizing Git</title>
+  <script src="js/vendor/jquery.js"></script>
+  <script src="js/vendor/jquery-ui.min.js"></script>
+  <script data-main="js/main" src="js/vendor/require.min.js"></script>
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/1140.css">
+  <link rel="stylesheet" href="css/explaingit.css">
+  <link rel="stylesheet" href="css/jquery-ui.min.css">
 </head>
+
 <body>
 
-<div id="ExplainGitZen-Container" style="display:none">
+  <div id="ExplainGitZen-Container" style="display:none">
     <div class="playground-container">
       <pre id='last-command' style='display: none;'></pre>
     </div>
-</div>
+  </div>
+  <button onclick='clearCache()' class="reset-button">Reset</button>
 
-<svg version="1.1" baseProfile="full"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     xmlns:ev="http://www.w3.org/2001/xml-events"
-     width="0" height="0">
+  <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:ev="http://www.w3.org/2001/xml-events" width="0" height="0">
 
-    <marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="rgba(100,100,100,0.8)"
-            markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
-        <path d="M 0 0 L 10 5 L 0 10 z"/>
+    <marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="rgba(100,100,100,0.8)" markerWidth="4"
+      markerHeight="3" orient="auto" viewBox="0 0 10 10">
+      <path d="M 0 0 L 10 5 L 0 10 z" />
     </marker>
-    <marker id="faded-triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#DDD"
-            markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
-        <path d="M 0 0 L 10 5 L 0 10 z"/>
+    <marker id="faded-triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#DDD" markerWidth="4" markerHeight="3"
+      orient="auto" viewBox="0 0 10 10">
+      <path d="M 0 0 L 10 5 L 0 10 z" />
     </marker>
-    <marker id="brown-triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="rgba(100,100,100,0.8)"
-            markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
-        <path d="M 0 0 L 10 5 L 0 10 z"/>
+    <marker id="brown-triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="rgba(100,100,100,0.8)" markerWidth="4"
+      markerHeight="3" orient="auto" viewBox="0 0 10 10">
+      <path d="M 0 0 L 10 5 L 0 10 z" />
     </marker>
-</svg>
-
-<script type="text/javascript">
-require(['explaingit', 'demos'], function (explainGit, demos) {
-    function ready(fn) {
-      if (document.readyState != 'loading'){
-        fn();
-      } else {
-        document.addEventListener('DOMContentLoaded', fn);
+  </svg>
+
+  <script type="text/javascript">
+    require(['explaingit', 'demos'], function (explainGit, demos) {
+      function ready(fn) {
+        if (document.readyState != 'loading') {
+          fn();
+        } else {
+          document.addEventListener('DOMContentLoaded', fn);
+        }
       }
-    }
 
-    function clearSavedState () {
-      if (window.localStorage) {
-        window.localStorage.removeItem('git-viz-snapshot')
+      function clearSavedState() {
+        if (window.localStorage) {
+          window.localStorage.removeItem('git-viz-snapshot')
+        }
       }
-    }
 
-    function cleanupDom () {
-      $('.svg-container.remote-container').remove()
-    }
+      function cleanupDom() {
+        $('.svg-container.remote-container').remove()
+      }
 
-    function clean () {
-      clearSavedState()
-      cleanupDom()
-    }
+      function clean() {
+        clearSavedState()
+        cleanupDom()
+      }
 
-    function cleanHash (hash) {
-      return hash.replace(/^#/, '')
-    }
+      function cleanHash(hash) {
+        return hash.replace(/^#/, '')
+      }
 
-    function findDemo (demos, name) {
-      return demos.filter(function (d) {
-        return d.key === name
-      })[0]
-    }
+      function findDemo(demos, name) {
+        return demos.filter(function (d) {
+          return d.key === name
+        })[0]
+      }
 
-    function copyDemo (demo) {
-      // make a deep copy
-      return JSON.parse(JSON.stringify(demo))
-    }
+      function copyDemo(demo) {
+        // make a deep copy
+        return JSON.parse(JSON.stringify(demo))
+      }
 
-    var lastDemo = findDemo(demos, cleanHash(window.location.hash)) || demos[0]
+      var lastDemo = findDemo(demos, cleanHash(window.location.hash)) || demos[0]
+
+      ready(function () {
+        window.onhashchange = function () {
+          var demo = findDemo(demos, cleanHash(window.location.hash)) || lastDemo
+          if (demo) {
+            lastDemo = demo
+            document.getElementById('last-command').textContent = ""
+            clean()
+            open()
+          }
+        }
 
-    ready(function () {
-      window.onhashchange = function () {
-        var demo = findDemo(demos, cleanHash(window.location.hash)) || lastDemo
-        if (demo) {
-          lastDemo = demo
-          document.getElementById('last-command').textContent = ""
-          clean()
-          open()
+        open()
+      })
+
+      function open() {
+        explainGit.reset();
+
+        var savedState = null
+        if (window.localStorage) {
+          savedState = JSON.parse(window.localStorage.getItem('git-viz-snapshot') || 'null')
         }
-      }
 
-      open()
-    })
+        var initial = Object.assign(copyDemo(lastDemo), {
+          name: 'Zen',
+          height: '100%',
+          initialMessage: lastDemo.message,
+          undoHistory: savedState,
+          hvSavedState: savedState && savedState.stack[savedState.pointer].hv,
+          ovSavedState: savedState && savedState.stack[savedState.pointer].ov
+        })
 
-    function open() {
-      explainGit.reset();
+        explainGit.open(initial);
+      }
 
-      var savedState = null
-      if (window.localStorage) {
-        savedState = JSON.parse(window.localStorage.getItem('git-viz-snapshot') || 'null')
+      window.resetVis = function () {
+        if (confirm('This will reset your visualization. Are you sure?')) {
+          clean()
+          open()
+        }
       }
 
-      var initial = Object.assign(copyDemo(lastDemo), {
-        name: 'Zen',
-        height: '100%',
-        initialMessage: lastDemo.message,
-        undoHistory: savedState,
-        hvSavedState: savedState && savedState.stack[savedState.pointer].hv,
-        ovSavedState: savedState && savedState.stack[savedState.pointer].ov
-      })
+      window.pres = function () {
+        document.getElementById('last-command').style.display = 'block'
+      }
+    });
+    function clearCache() {
 
-      explainGit.open(initial);
-    }
+      if (window.localStorage) {
+        const flag = confirm('are you sure you want to reset?')
+        if (flag) {
+          window.localStorage.removeItem('git-viz-snapshot')
+          location.reload()
+        }
 
-    window.resetVis = function () {
-      if (confirm('This will reset your visualization. Are you sure?')) {
-        clean()
-        open()
       }
     }
-
-    window.pres = function () {
-      document.getElementById('last-command').style.display = 'block'
-    }
-});
-</script>
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
