Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Reset Button #131

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Add Reset Button #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions css/explaingit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
224 changes: 118 additions & 106 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>