Pumping pads as files into publishing frameworks!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

129 lines
2.7 KiB

9 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
}
td {
vertical-align: top;
}
table ul {
margin: 0;
padding-left: 0;
list-style: none;
}
#content {
position: absolute;
left:0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
background: gray;
}
iframe {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
background: white;
}
#overlay {
position: absolute;
z-index: 10;
right: 20px;
top: 40px;
width: auto;
height: auto;
overflow: hidden;
background: black;
color: white;
padding: 10px;
font-size: 10px;
font-family: monospace;
}
#overlay a {
color: white;
text-decoration: none;
}
#overlay a:hover {
background: gray;
color: black;
}
a.active {
background: white !important;
color: black !important;
}
td.key {
font-style: italic;
}
#overlay.open {}
#overlay .closedcontent { display: block; }
#overlay.open .closedcontent { display: none; }
#overlay .opencontent { display: none; }
#overlay.open .opencontent { display: block; }
</style>
</head>
<body>
<div id="content">
<iframe src="{{padid}}.html" id="frame" name="frame"></iframe>
<div id="overlay">
<div class="closedcontent">
versions
</div>
<table class="opencontent">
<tr><td class="key">padid</td><td>{{padid}}</td></tr>
<tr><td class="key">lastedited</td><td>{{lastedited_iso}}</td></tr>
<tr><td class="key">revisions</td><td>{{revisions}}</td></tr>
<tr>
<td class="key">versions</td>
<td>
<ul>
<li><a href="{{padurl}}" target="frame">Etherpad (editable)</a><li>
<li><a href="{{padid}}.html" target="frame">HTML</a></li>
<li><a href="{{padid}}.txt" target="frame">plain text</a></li>
<li><a href="{{padid}}.diff.html" target="frame">HTML with authorship colors</a></li>
<li><a href="{{padid}}.meta.json" target="frame">Meta data (JSON)</a></li>
</ul>
</td>
</tr>
</table>
</div>
<script>
(function () {
var frame = document.getElementById("frame"),
overlay = document.getElementById("overlay");
frame.addEventListener("load", function () {
var loaded_href = frame.contentDocument.location.href,
links = document.querySelectorAll("#overlay a");
// console.log("load", loaded_href);
for (var i=0, len=links.length; i<len; i++) {
var linkhref = links[i].href;
// console.log("*", linkhref);
if (linkhref == loaded_href) {
links[i].classList.add("active");
} else {
links[i].classList.remove("active");
}
}
});
overlay.addEventListener("mouseenter", function () {
overlay.classList.add("open");
}, false);
overlay.addEventListener("mouseleave", function () {
overlay.classList.remove("open");
}, false);
})()
</script>
</body>
</html>