-
Notifications
You must be signed in to change notification settings - Fork 10
/
open-image-in-new-page.js
53 lines (44 loc) · 1.66 KB
/
open-image-in-new-page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Shrink with https://alanhogan.github.io/bookmarkleter/
// A minor fork from open-linked-images-in-new-page.
// Finds image tags. Opens a new tab and displays all of them (if the src attribute looks reasonable)
// Not always useful, but sometimes very useful!
function isMediaURL(u) {
return !!(u.match(/(^data:image\/)|(\.(jpe?g|gif|png|webp|mng)$)/i) || isVideoURL(u));
}
function isVideoURL(u) {
return !!u.match(/\.(webm|m4v|flv|mp4|avi|qt)/i);
}
function hE(s) {
return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');
}
var z = open().document;
z.write('<!DOCTYPE html><html><head><title>Images</title>' +
'<style type="text/css" />img:not(.fit), video:not(.fit) {cursor: zoom-out;} ' +
'img.fit, video.fit { max-width: 100%; max-height: 110vh; cursor: zoom-in;} ' +
'body {font-family: system-ui, "helvetica neue",arial, helvetica, sans-serif} ' +
'html, body{min-height: 100%; height: 100%;}</style>' +
'</head><body>' +
'<p>Images shown on ' +
hE(location.href) +
':</p><hr>'
);
var seen = {},
q, h, i, isVideo;
for (i = 0; q = document.images[i]; ++i) {
h = q.src;
if (seen[h]) continue;
seen[h] = true;
if (h && isMediaURL(h)) {
isVideo = false; // isVideoURL(h);
z.write('<p>' +
q.innerHTML + ' (' + hE(h) + ')<br>' +
(isVideo ? '<video controls loop autoplay' : '<img') +
' class="fit" onclick="if(this.className==\'fit\'){this.className=\'\';}else{this.className=\'fit\';}"' +
' src="' + hE(h) +
(isVideo ? '" ></video>' : '" />')
)
}
}
seen = {};
z.write('</body></html>');
z.close()