mirrors/ArchiveBox
1
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox.git synced 2025-05-24 19:54:25 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

allow hotlinking directly to a specific extractor output using hash on Snapshot detail page

Browse source
This commit is contained in:
Nick Sweeting 2021-02-15 20:55:22 -05:00
parent a089136fea
commit 56ec19fb29
1 changed files with 39 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

53
archivebox/templates/core/snapshot.html
View file

@ -348,7 +348,7 @@
<div class="row header-bottom-frames"> <div class="row header-bottom-frames">
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card selected-card"> <div class="card selected-card">
<iframe class="card-img-top" src="{{singlefile_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{singlefile_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./singlefile.html</code></p> <p class="card-text"><code>./singlefile.html</code></p>
@ -381,7 +381,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{archive_url}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{archive_url}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./{{domain}}</code></p> <p class="card-text"><code>./{{domain}}</code></p>
@ -393,30 +393,30 @@
{% if SAVE_ARCHIVE_DOT_ORG %} {% if SAVE_ARCHIVE_DOT_ORG %}
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{archive_org_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{archive_org_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>🌐 web.archive.org/web/...</code></p> <p class="card-text"><code>🌐 web.archive.org/web/...</code></p>
</a> </a>
<a href="{{archive_org_path}}" target="preview"><h4 class="card-title">Archive.Org</h4></a> <a href="{{archive_org_path}}" target="preview" id="archive_dot_org-btn"><h4 class="card-title">Archive.Org</h4></a>
</div> </div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{url}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{url}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>🌐 {{domain}}</code></p> <p class="card-text"><code>🌐 {{domain}}</code></p>
</a> </a>
<a href="{{url}}" target="preview"><h4 class="card-title">Original</h4></a> <a href="{{url}}" target="preview" id="original-btn"><h4 class="card-title">Original</h4></a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{headers_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{headers_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./headers.json</code></p> <p class="card-text"><code>./headers.json</code></p>
@ -427,7 +427,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{dom_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{dom_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./output.html</code></p> <p class="card-text"><code>./output.html</code></p>
@ -438,7 +438,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{readability_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{readability_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./readability/content.html</code></p> <p class="card-text"><code>./readability/content.html</code></p>
@ -450,7 +450,7 @@
<br/> <br/>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{mercury_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{mercury_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./mercury/content.html</code></p> <p class="card-text"><code>./mercury/content.html</code></p>
@ -461,7 +461,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{media_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{media_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./media/*.mp4</code></p> <p class="card-text"><code>./media/*.mp4</code></p>
@ -472,7 +472,7 @@
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<div class="card"> <div class="card">
<iframe class="card-img-top" src="{{git_path}}" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe> <iframe class="card-img-top" src="{{git_path}}" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no"></iframe>
<div class="card-body"> <div class="card-body">
<a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener"> <a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener">
<p class="card-text"><code>./git/*.git</code></p> <p class="card-text"><code>./git/*.git</code></p>
@ -484,7 +484,7 @@
</div> </div>
</div> </div>
</header> </header>
<iframe sandbox="allow-same-origin allow-scripts allow-forms" class="full-page-iframe" src="{{singlefile_path}}" name="preview"></iframe> <iframe sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" class="full-page-iframe" src="{{singlefile_path}}" name="preview"></iframe>
<script <script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
@ -493,6 +493,16 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script> <script>
function getPreviewTypeFromPath(link) {
if (link.id == 'original-btn') {
return 'original'
}
if (link.id == 'archive_dot_org-btn') {
return 'archive_dot_org'
}
return link.pathname.split('/').filter(a => a.length).slice(-1)[0].toLowerCase()
}
// show selected file in iframe when preview card is clicked // show selected file in iframe when preview card is clicked
jQuery('.card').on('click', function(e) { jQuery('.card').on('click', function(e) {
jQuery('.selected-card').removeClass('selected-card') jQuery('.selected-card').removeClass('selected-card')
@ -502,11 +512,26 @@
if (e.currentTarget.href.endsWith('.pdf')) { if (e.currentTarget.href.endsWith('.pdf')) {
jQuery('.full-page-iframe')[0].removeAttribute('sandbox') jQuery('.full-page-iframe')[0].removeAttribute('sandbox')
} else { } else {
jQuery('.full-page-iframe')[0].sandbox = "allow-same-origin allow-scripts allow-forms" jQuery('.full-page-iframe')[0].sandbox = "allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation"
} }
window.location.hash = getPreviewTypeFromPath(e.currentTarget)
return true return true
}) })
// check URL for hash e.g. #git and load relevant preview
jQuery(document).ready(function() {
if (window.location.hash) {
for (const link of jQuery('a[target=preview]')) {
console.log(link.pathname)
if (getPreviewTypeFromPath(link) == window.location.hash.slice(1).toLowerCase()) {
jQuery(link).closest('.card').click()
jQuery(link).click()
link.click()
}
}
}
})
// un-sandbox iframes showing pdfs (required to display pdf viewer) // un-sandbox iframes showing pdfs (required to display pdf viewer)
jQuery('iframe').map(function() { jQuery('iframe').map(function() {
if (this.src.endsWith('.pdf')) { if (this.src.endsWith('.pdf')) {