Skip to content

Instantly share code, notes, and snippets.

@cneud

cneud/voyant_this.html

Last active November 22, 2017 20:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cneud/9c52ec6b5d686148eea796ed7e63946c to your computer and use it in GitHub Desktop.
Save cneud/9c52ec6b5d686148eea796ed7e63946c to your computer and use it in GitHub Desktop.
Download ZIP
Voyant embedder
Raw
voyant_this.html
<html>
<head>
<title>Voyant This!</title>
<style type=text/css>
body {
text-align: center;
}
input[value] {
font-family: Verdana;
font-size: 24px;
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 0;
}
.tooltip .tooltiptext {
visibility: true;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -75px;
font-family: Verdana;
font-size: 20px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.hidden {
display: none;
}
</style>
</head>
<!--
Voyant tools URL: http://voyant-tools.org/tool/Cirrus/?input='inputUrl'
SBB OCR URL: http://digital.staatsbibliothek-berlin.de/ocrresolver/PPN767137728/00000051.xml
SBB text stream: http://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN767137728&PHYSID=PHYS_0005&DMDID=DMDLOG_0001&view=fulltext-endless
SBB OCR objects: http://digital.staatsbibliothek-berlin.de/suche?fulltext=true&current_page=1&results_on_page=20&sort_on=relevance&sort_direction=desc
-->
<body>
<div>
<br><br>
<input type="text" name="inputUrl" style="width:80%;" onclick="this.select();" value="Copy the URL of the digital object that you want to analyze in Voyant here">
<br><br><br>
<div class="tooltip">
<input type="image" name="voyant" src="https://voyant-tools.org/docs/favicon.ico" onclick="voyant();"><span class="tooltiptext">Voyant This!</span>
</div>
<br><br><br><br><br>
<div class="hidden">
<iframe id="results" src="http://voyant-tools.org/?view=corpusset&input=" style="width:80%; height:70%;"></iframe>
</div>
</div>
</body>
<script type="text/javascript">
function voyant(){
var inputUrl = document.querySelector('[name="inputUrl"]').value;
// construct iframe src from voyant base url + value
var voyantUrl = "http://voyant-tools.org/?view=corpusset?input=" + inputUrl;
// reload iframe with voyantUrl target
document.getElementById("results").src = voyantUrl;
// set div class="hidden" to visible
var results = document.getElementsByClassName("hidden");
results[0].style.display = results[0].style.display == "block" ? "none" : "block";
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment