-
Notifications
You must be signed in to change notification settings - Fork 0
/
picdif.htm
111 lines (102 loc) · 3.31 KB
/
picdif.htm
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<meta charset="UTF-8" />
<title>picdif - diff 2 pictures by overlaying</title>
<!-- Side by side without JavaScript -->
<html onclick="toggle();" ontouchend="
// Unnecessary for Firefox (or non-touch input): removal may improve reliability.
if ( ! _m && event.touches.length === 0 ) {
/*
`touches` appears buggy:
https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches
(apparent misalignment; likely unfixable at this point)
*/
var X = _X, Y = _Y;
_X = event.changedTouches[0].screenX;
_Y = event.changedTouches[0].screenY;
if (
_ - ( _ = event.timeStamp ) >= -500 &&
Math.abs( _X - X ) <= 16 &&
Math.abs( _Y - Y ) <= 16
) { toggle(); return false; };
// Mainly to workaround double-click zooming on some mobile browsers.
}; _m = false;
"
ontouchmove="_m = true;"
onkeydown="return kbd_toggle( event );">
<!--
Trick simulating "preventDefault": Broader browser compatibility.
Must be specified so. (may not work merely specified in "onkeydown" function)
"event" here is context-dependent multi-meaning. (don't change its name)
-->
<meta name="viewport" content="initial-scale=1" /><!--
<meta name="viewport" content="initial-scale=1, user-scalable=no" />
https://github.com/MasterInQuestion/Markup/commit/47793e7005d838a6eafdf2289b2cb4100178e12e
-->
<style>
html { background-color: #002b36; }
body { display: inline-block; margin: 5em;
user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
/*
img { width: 2048px; height: 2048px; }
#\30 { background-color: #F00; }
#\31 { background-color: #0F0; }
*/
</style>
<img id="0" src="" />
<img id="1" src="" />
<script>
var _m; // Not defining this pointless undefined may cause misbehavior...
_ = _X = _Y = 0;
_0 = document.getElementById( "0" );
_1 = document.getElementById( "1" );
getTitle( _0 ); getTitle( _1 );
function getTitle ( x ) {
x.title = "#" + x.id + " " +
decodeURIComponent( x.src.match( /(?:\/|^)([^\/]*)\/*$/ )[1] );
};
onload = function () {
_0.onload = _0.onerror = function () { f( _0 ); };
_1.onload = _1.onerror = function () { f( _1 ); };
// "loadstart" maybe unavailable for "<img>".
function f ( x ) {
getTitle( x );
( x.style.display !== "none" ) && ( document.title = x.title );
};
( _0.style.display !== "none" &&
_1.style.display !== "none" ) && toggle();
};
function toggle () {
_1.style.display === "none" ? (
_0.style.display = "none",
_1.style.display = "inline",
toggleTitle( _1 ) )
: (
_1.style.display = "none",
_0.style.display = "inline",
toggleTitle( _0 ) );
};
function toggleTitle ( x ) {
document.title = x.title;
// location.replace( location.href.replace( /(?:#.*)?$/, "#" + x.id ) );
// ^ May cause unwanted viewport jump.
};
function kbd_toggle ( e ) {
if (
e.keyCode === 0x20 ||
e.which === 0x20 /* 【Space】 */
/*
Call it non-standard whatsoever whatever you like:
It works, reliably across browsers:
Far more than those so called standard ways.
Related: https://github.com/microsoft/vscode/issues/163432#issuecomment-1312029773
*/
) {
toggle();
return false;
};
return true;
};
</script>
<!--
At the moment browsers have limited support for programmatic interoperation with zoom.
Hacky workaround is indeed possible. Yet reluctant to bother.
-->