-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathlinkmaker.html
100 lines (97 loc) · 4.19 KB
/
linkmaker.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>huroutes | Helyjelölő link készítése</title>
<link rel="icon" type="image/png" sizes="32x32" href="res/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="res/favicon-16.png">
<link rel="shortcut icon" href="res/favicon.ico">
<link rel="mask-icon" href="app/safari-pinned-tab.svg" color="#bae1c7">
<script>
webRoot = 'https://sp3eder.github.io/huroutes/';
/** Parses a WGS84 coordinate given as a string (decimal lat,lng). */
function parseGeo(str) {
const round6 = n => Number(Number(n).toFixed(6))
const geoParse = /\s*(-?[0-9\.]+)\s*,\s*(-?[0-9\.]+)\s*/;
let match = geoParse.exec(str);
if (match === null)
{
alert('Hibás geokoordináta formátum!\nA Google Maps által adott tizedes számos formátummal kell megadni\nPéldául: "47.654321,19.123456".');
throw 'parse error';
}
return [round6(match[1]), round6(match[2])];
}
/** Generates a fragment link from the form data. */
function makeLink() {
function encode(str) {
return encodeURI(str).replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/&/g, '%26');
}
data = {
title: document.getElementById('title').value.trim(),
geo: parseGeo(document.getElementById('geo').value),
desc: document.getElementById('desc').value.trim()
};
var result = `#geo:${encode(data.title)}@${data.geo[0]},${data.geo[1]}`;
if (data.desc)
result += `/?b=${encode(data.desc)}`
with (document.getElementById('linkEdit'))
{
value = result;
focus();
}
with (document.getElementById('link'))
innerText = href = webRoot + result;
document.execCommand('copy');
history.pushState(null, '', result);
return false;
}
/** Parses a geo fragment and inserts its data into the form. */
function parseLink(link = document.getElementById('linkEdit').value) {
const re = /#geo:([^@]+)@(-?[0-9\\.]+),(-?[0-9\\.]+)(?:\/(?:[?&](?:b=([^&]+)))*)?/;
m = re.exec(link);
if (m === null)
{
alert('Hibás link formátum!');
throw 'parse error';
}
document.getElementById('title').value = decodeURI(m[1]);
document.getElementById('geo').value = `${m[2]}, ${m[3]}`;
document.getElementById('desc').value = decodeURI(m[4] ?? "");
with (document.getElementById('link'))
innerText = href = webRoot + m[0];
}
/** Initializes the form from the current fragment. */
function init()
{
if (location.hash)
{
parseLink(location.hash);
document.getElementById('linkEdit').value = location.hash;
}
}
// Handles browser back/forward navigation to update the form
addEventListener('popstate', () => {
if (!location.hash)
{
document.getElementById('title').value = '';
document.getElementById('geo').value = '';
document.getElementById('desc').value = '';
document.getElementById('link').innerText = '';
}
else
parseLink(location.hash);
document.getElementById('linkEdit').value = location.hash;
});
</script>
</head>
<body onload="init()">
<h1>Helyjelölő link készítése</h1>
<p><label for="title">Cím (csak sima szöveg):</label><br/><input type="text" id="title" maxLength="50" size="40"></p>
<p><label for="geo">Geokoordináta (mint a Google koordináta):</label><br/><input type="text" id="geo" maxLength="40" size="40"></p>
<p><label for="desc">Leírás (<a href="https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax" tabindex="-1">Markdown szintaxis</a>):</label><br/><textarea id="desc" rows="20" style="width:100%"></textarea></p>
<p><input type="submit" value="Link Készítése" onclick="return makeLink()"> <input type="submit" value="Link Visszafejtése" onclick="return parseLink()"></p>
<p><label for="result">Link:</label><input type="text" id="linkEdit" style="width: 100%" onfocus="this.select();"></p>
<p><a id="link" target="_blank"></a></p>
</div>
</body>
</html>