5E/AideDeJeu
1
0
Fork 0
mirror of https://github.com/Nioux/AideDeJeu.git synced 2025-10-29 22:45:44 +00:00
Code Issues Projects Releases Wiki Activity

Molette + drag&drop

Browse source
This commit is contained in:
Yan Maniez 2020-01-20 18:29:47 +01:00
parent 5aa5b35a24
commit 7563210c5d
68 changed files with 669 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

20
AideDeJeu/AideDeJeuCmd/Program.cs
View file

@ -403,13 +403,13 @@ namespace AideDeJeuCmd
static string nsSvg = "http://www.w3.org/2000/svg"; static string nsSvg = "http://www.w3.org/2000/svg";
static async Task ConvertMapsAsync() static async Task ConvertMapsAsync()
{ {
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\osgild"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\osgild");
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\ferrance"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\ferrance");
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\fourche"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\fourche");
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\hauterive"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\hauterive");
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\portsable"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\portsable");
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\vercelise"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\vercelise");
//await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\xelys"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Osgild\xelys");
await ConvertMapAsync(@"..\..\..\..\..\Docs\Alarian\alarian"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Alarian\alarian");
await ConvertMapAsync(@"..\..\..\..\..\Docs\Alarian\gramlin"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Alarian\gramlin");
await ConvertMapAsync(@"..\..\..\..\..\Docs\Alarian\norven"); await ConvertMapAsync(@"..\..\..\..\..\Docs\Alarian\norven");
@ -427,6 +427,7 @@ namespace AideDeJeuCmd
document.Load($"{basename}.map"); document.Load($"{basename}.map");
var svg = new XmlDocument(); var svg = new XmlDocument();
var svgElt = svg.CreateElement("svg", nsSvg); var svgElt = svg.CreateElement("svg", nsSvg);
svgElt.SetAttribute("id", "map");
svgElt.SetAttribute("style", "fill: transparent"); svgElt.SetAttribute("style", "fill: transparent");
svg.AppendChild(svgElt); svg.AppendChild(svgElt);
@ -485,6 +486,11 @@ namespace AideDeJeuCmd
} }
} }
svg.Save($"{basename}.svg"); svg.Save($"{basename}.svg");
var html = File.ReadAllText($"{basename}.base.html");
html = new Regex("(<object id=\"map\" .*?/>)").Replace(html, svg.OuterXml);
//html = html.Replace("<svg>", svg.ToString());
File.WriteAllText($"{basename}.html", html, Encoding.UTF8);
} }
static async Task ExtractYamlAsync() static async Task ExtractYamlAsync()

10
Docs/Alarian/alarian.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<object id="map" data="alarian.svg" width="100%" type="image/svg+xml" />
</body>
</html>

4
Docs/Alarian/alarian.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="alarian.svg" width="100%" type="image/svg+xml" /></div> <svg id="map" style="fill: transparent" viewBox="0 0 1082 1529" xmlns="http://www.w3.org/2000/svg"><image href="alarian.png" /><a href="norven.html" target="details"><polygon points="234,394 324,424 409,402 428,386 513,383 582,354 622,307 673,279 740,241 732,104 125,110 94,152 154,220 219,248 254,337 244,364 229,377"><title>Norven</title></polygon></a><a href="ystaad.html" target="details"><polygon points="219,406 239,399 329,428 443,385 518,387 587,353 620,312 711,262 626,363 616,393 630,497 601,528 587,582 519,631 459,576 353,601 344,566 320,567 303,591 258,624 259,639 247,654 197,653 188,616 204,582 194,572 174,576 162,553 174,535 155,520 161,464 200,418 218,406"><title>Ystaad</title></polygon></a><a href="talban.html" target="details"><polygon points="355,605 457,580 516,629 532,664 472,819 434,832 416,875 417,908 372,914 388,859 362,804 372,783 335,763 278,775 260,785 191,806 167,777 246,720 277,704 285,680 324,662 330,632 346,617"><title>Talban</title></polygon></a><a href="yelin.html" target="details"><polygon points="476,821 525,685 539,666 521,634 587,588 674,612 742,641 779,670 662,827 657,896 647,909 611,903 601,895 580,898 550,888 536,858 540,841 538,836 527,842 509,837 501,831 478,825"><title>Yelin</title></polygon></a><a href="rhu.html" target="details"><polygon points="741,243 709,267 632,368 618,396 638,488 604,538 591,584 701,617 744,641 779,667 853,690 1026,742 1056,743 1057,252"><title>Rhü</title></polygon></a><a href="gramlin.html" target="details"><polygon points="649,910 662,896 665,825 779,670 1026,744 1053,744 1056,931 1043,927 1010,940 975,978 925,972 890,962 850,954 773,963 777,978 760,985 760,1000 742,1007 739,1002 734,1015 718,1036 683,1022 683,1016 647,1001 645,987 665,974 659,936 647,918"><title>Gramlin</title></polygon></a><a href="smitin.html" target="details"><polygon points="116,1000 135,960 193,929 347,907 380,925 389,958 461,923 479,947 464,975 480,1009 465,1019 446,1015 394,1063 396,1093 383,1099 361,1072 394,1018 362,1016 342,1005 235,1063 225,1060 211,1020 203,1005 186,1012 174,1006 161,1013 148,1001 129,1003"><title>Smitin</title></polygon></a><a href="rhagarron.html" target="details"><polygon points="681,1023 725,1042 770,1081 745,1105 707,1102 687,1107 730,1136 719,1153 694,1154 689,1163 658,1168 657,1176 678,1185 747,1195 803,1222 826,1184 870,1181 900,1214 957,1229 940,1252 947,1279 910,1304 908,1319 797,1327 716,1327 723,1437 726,1498 493,1501 513,1455 542,1449 614,1467 638,1459 635,1433 563,1424 550,1400 584,1363 572,1352 533,1363 484,1343 436,1324 443,1305 478,1299 480,1294 436,1288 409,1259 414,1232 467,1207 475,1193 462,1169 448,1156 459,1106 472,1113 490,1078 475,1028 486,1019 505,1034 516,1087 509,1125 516,1134 561,1136 578,1126 572,1107 620,1084 624,1070 620,1048 671,1026"><title>Rhagarron</title></polygon></a></svg>
</body> </body>
</html> </html>

2
Docs/Alarian/alarian.svg
View file

@ -1,4 +1,4 @@
<svg style="fill: transparent" viewBox="0 0 1082 1529" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 1082 1529" xmlns="http://www.w3.org/2000/svg">
<image href="alarian.png" /> <image href="alarian.png" />
<a href="norven.html" target="details"> <a href="norven.html" target="details">
<polygon points="234,394 324,424 409,402 428,386 513,383 582,354 622,307 673,279 740,241 732,104 125,110 94,152 154,220 219,248 254,337 244,364 229,377"> <polygon points="234,394 324,424 409,402 428,386 513,383 582,354 622,307 673,279 740,241 732,104 125,110 94,152 154,220 219,248 254,337 244,364 229,377">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

20
Docs/Alarian/default.html Normal file
View file

@ -0,0 +1,20 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Terres d'Alarian</h1>
<h3>Description Générale</h3>
<br />
<h3>Usage</h3>
<div>Vous pouvez naviguer sur les cartes en cliquant sur les différents lieux, scroller en drag & drop et zoomer avec la molette de la souris.</div>
<br />
<h3>Données</h3>
<br />
<h3>CGU</h3>
<div>Cette aide de jeu utilise des marques déposées et/ou des droits d’auteurs qui sont la propriété de Black Book Editions comme l’y autorisent les conditions d’utilisation de Black Book Editions .</div>
<div>Cette aide de jeu n’est pas publiée par Black Book Editions et n’a pas reçu son aval ni une quelconque approbation de sa part .</div>
<div>Pour de plus amples informations sur Black Book Editions, consultez <a href="https://www.black-book-editions.fr" target="_blank">www.black-book-editions.fr</a>.</div>
</div>
</body>
</html>

10
Docs/Alarian/gramlin.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="gramlin.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/gramlin.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="gramlin.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 840 784" xmlns="http://www.w3.org/2000/svg"><image href="gramlin.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/gramlin.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 840 784" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 840 784" xmlns="http://www.w3.org/2000/svg">
<image href="gramlin.png" /> <image href="gramlin.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 126 B

After

Width:  |  Height:  |  Size: 135 B

Before After
Before After

10
Docs/Alarian/norven.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="norven.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/norven.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="norven.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 958 629" xmlns="http://www.w3.org/2000/svg"><image href="norven.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/norven.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 958 629" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 958 629" xmlns="http://www.w3.org/2000/svg">
<image href="norven.png" /> <image href="norven.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 125 B

After

Width:  |  Height:  |  Size: 134 B

Before After
Before After

10
Docs/Alarian/rhagarron.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="rhagarron.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

10
Docs/Alarian/rhu.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="rhu.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/rhu.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="rhu.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 950 892" xmlns="http://www.w3.org/2000/svg"><image href="rhu.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/rhu.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 950 892" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 950 892" xmlns="http://www.w3.org/2000/svg">
<image href="rhu.png" /> <image href="rhu.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 122 B

After

Width:  |  Height:  |  Size: 131 B

Before After
Before After

104
Docs/Alarian/scripts.js
View file

@ -1,21 +1,119 @@
function init() { function init() {
var body = document.documentElement;
var range = document.getElementById("range"); var range = document.getElementById("range");
var map = document.getElementById("map"); var map = document.getElementById("map");
map.style.width = "" + range.value + "%"; map.style.width = "" + range.value + "%";
range.oninput = function() { range.oninput = function() {
map.style.width = "" + range.value + "%"; map.style.width = "" + range.value + "%";
console.log(range.value);
} }
//range.addEventListener("wheel", onwheel); //range.addEventListener("wheel", onwheel);
addWheelListener(body, onwheel);
var curYPos = 0,
curXPos = 0,
curDown = false;
window.addEventListener('mousemove', function(e) {
if (curDown === true) {
window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
}
e.preventDefault();
});
window.addEventListener('mousedown', function(e) {
curDown = true;
curYPos = e.pageY;
curXPos = e.pageX;
e.preventDefault();
});
window.addEventListener('mouseup', function(e) {
curDown = false;
e.preventDefault();
});
} }
function onwheel() { function onwheel(e) {
var range = document.getElementById("range"); var range = document.getElementById("range");
var map = document.getElementById("map"); var map = document.getElementById("map");
//alert(range.value); //alert(range.value);
//var percent = range.value.toString().substring(0, range.length - 1); //var percent = range.value.toString().substring(0, range.length - 1);
//alert(percent); //alert(percent);
range.value = range.value + 10; console.log(range.value);
range.value = parseInt(range.value) - Math.sign(e.deltaY) * 10;
map.style.width = "" + range.value + "%"; map.style.width = "" + range.value + "%";
//map.style.width = "" + range.value + "%";
//map.style.width = "" + (parseInt(range.value) + 10) + "%"; //map.style.width = "" + (parseInt(range.value) + 10) + "%";
console.log(range.value); console.log(range.value);
} e.preventDefault();
}
// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {
var prefix = "", _addEventListener, support;
// detect event model
if ( window.addEventListener ) {
_addEventListener = "addEventListener";
} else {
_addEventListener = "attachEvent";
prefix = "on";
}
// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
window.addWheelListener = function( elem, callback, useCapture ) {
_addWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
};
function _addWheelListener( elem, eventName, callback, useCapture ) {
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
!originalEvent && ( originalEvent = window.event );
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: "wheel",
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
deltaX: 0,
deltaY: 0,
deltaZ: 0,
preventDefault: function() {
originalEvent.preventDefault ?
originalEvent.preventDefault() :
originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if ( support == "mousewheel" ) {
event.deltaY = - 1/40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
} else {
event.deltaY = originalEvent.deltaY || originalEvent.detail;
}
// it's time to fire the callback
return callback( event );
}, useCapture || false );
}
})(window,document);

10
Docs/Alarian/smitin.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="smitin.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/smitin.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="smitin.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 958 618" xmlns="http://www.w3.org/2000/svg"><image href="smitin.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/smitin.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 958 618" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 958 618" xmlns="http://www.w3.org/2000/svg">
<image href="smitin.png" /> <image href="smitin.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 125 B

After

Width:  |  Height:  |  Size: 134 B

Before After
Before After

5
Docs/Alarian/style.css
View file

@ -5,7 +5,12 @@ pre {
} }
body { body {
font-family: 'Noto Serif', serif; font-family: 'Noto Serif', serif;
margin: 0;
padding: 0;
} }
h1 { h1 {
font-family: 'UnifrakturCook', cursive; font-family: 'UnifrakturCook', cursive;
} }
#range {
position: fixed; top: 0; left: 0; z-index: 2; visibility: hidden;
}

10
Docs/Alarian/talban.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="talban.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/talban.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="talban.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 957 682" xmlns="http://www.w3.org/2000/svg"><image href="talban.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/talban.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 957 682" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 957 682" xmlns="http://www.w3.org/2000/svg">
<image href="talban.png" /> <image href="talban.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 125 B

After

Width:  |  Height:  |  Size: 134 B

Before After
Before After

10
Docs/Alarian/talbethhav.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="talbethhav.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/talbethhav.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="talbethhav.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 1116 789" xmlns="http://www.w3.org/2000/svg"><image href="talbethhav.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/talbethhav.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 1116 789" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 1116 789" xmlns="http://www.w3.org/2000/svg">
<image href="talbethhav.png" /> <image href="talbethhav.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 139 B

Before After
Before After

10
Docs/Alarian/yagotalb.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="yagotalb.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/yagotalb.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="yagotalb.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 1069 756" xmlns="http://www.w3.org/2000/svg"><image href="yagotalb.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/yagotalb.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 1069 756" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 1069 756" xmlns="http://www.w3.org/2000/svg">
<image href="yagotalb.png" /> <image href="yagotalb.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 128 B

After

Width:  |  Height:  |  Size: 137 B

Before After
Before After

10
Docs/Alarian/yelin.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="yelin.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/yelin.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="yelin.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 949 1084" xmlns="http://www.w3.org/2000/svg"><image href="yelin.png" /></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/yelin.svg
View file

@ -1,3 +1,3 @@
<svg style="fill: transparent" viewBox="0 0 949 1084" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 949 1084" xmlns="http://www.w3.org/2000/svg">
<image href="yelin.png" /> <image href="yelin.png" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 125 B

After

Width:  |  Height:  |  Size: 134 B

Before After
Before After

10
Docs/Alarian/ystaad.base.html Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="ystaad.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Alarian/ystaad.html
View file

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="ystaad.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 1047 564" xmlns="http://www.w3.org/2000/svg"><image href="ystaad.png" /><a href="talbethhav.html" target="details"><circle cx="472" cy="436" r="15"><title>Talbeth-Hav</title></circle></a><a href="talbethhav.html" target="details"><rect x="294" y="433" width="160" height="24"><title>Talbeth-Hav</title></rect></a><a href="yagotalb.html" target="details"><circle cx="465" cy="466" r="13"><title>Yago-talb</title></circle></a><a href="yagotalb.html" target="details"><rect x="358" y="474" width="101" height="28"><title>Yago-talb</title></rect></a></svg></div>
</body> </body>
</html> </html>

2
Docs/Alarian/ystaad.svg
View file

@ -1,4 +1,4 @@
<svg style="fill: transparent" viewBox="0 0 1047 564" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 1047 564" xmlns="http://www.w3.org/2000/svg">
<image href="ystaad.png" /> <image href="ystaad.png" />
<a href="talbethhav.html" target="details"> <a href="talbethhav.html" target="details">
<circle cx="472" cy="436" r="15"> <circle cx="472" cy="436" r="15">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 692 B

After

Width:  |  Height:  |  Size: 701 B

Before After
Before After

2
Docs/Osgild/default.html
View file

@ -10,7 +10,7 @@
<div>Source : <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p 7</div> <div>Source : <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p 7</div>
<br /> <br />
<h3>Usage</h3> <h3>Usage</h3>
<div>Vous pouvez naviguer sur les cartes en cliquant sur les différents lieux et zoomer avec le slider en haut à gauche de chaque carte.</div> <div>Vous pouvez naviguer sur les cartes en cliquant sur les différents lieux, scroller en drag & drop et zoomer avec la molette de la souris.</div>
<br /> <br />
<h3>Données</h3> <h3>Données</h3>
<div>Données extraites de : <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a>, <a href="https://www.black-book-editions.fr/produit.php?id=3157" target="_blank">Invincible</a>, <a href="https://www.black-book-editions.fr/produit.php?id=4213" target="_blank">Boite d'Initiation (BI)</a>, <a href="https://www.black-book-editions.fr/produit.php?id=5895" target="_blank">Casus Belli HS01</a>, <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">Casus Belli 01</a>, <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">Casus Belli 02</a>, <a href="https://www.black-book-editions.fr/produit.php?id=241" target="_blank">Casus Belli 03</a></div> <div>Données extraites de : <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a>, <a href="https://www.black-book-editions.fr/produit.php?id=3157" target="_blank">Invincible</a>, <a href="https://www.black-book-editions.fr/produit.php?id=4213" target="_blank">Boite d'Initiation (BI)</a>, <a href="https://www.black-book-editions.fr/produit.php?id=5895" target="_blank">Casus Belli HS01</a>, <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">Casus Belli 01</a>, <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">Casus Belli 02</a>, <a href="https://www.black-book-editions.fr/produit.php?id=241" target="_blank">Casus Belli 03</a></div>

15
Docs/Osgild/ferrance.base.html Normal file
View file

@ -0,0 +1,15 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Ferrance</h1>
<div><b>Capitale</b> de la <a href="principautedarly.html">principauté d'Arly</a></div>
<div><b>Lieux importants :</b> L'académie de magie</div>
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p7, S4 Les Faux-Monnayeurs p88</div>
<div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="ferrance.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/ferrance.html
View file

@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
@ -10,6 +10,6 @@
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p7, S4 Les Faux-Monnayeurs p88</div> <div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p7, S4 Les Faux-Monnayeurs p88</div>
<div>Carte par <b>Romje</b> :</div> <div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="ferrance.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="ferrance.jpg" /><a href="oceanpelurique.html" target="details"><rect x="1" y="103" width="192" height="40"><title>Océan Pelurique</title></rect></a><a href="oceanpelurique.html" target="details"><rect x="1" y="1363" width="206" height="172"><title>Océan Pelurique</title></rect></a><a href="portsable.html" target="details"><rect x="1348" y="1480" width="251" height="40"><title>Port-Sable</title></rect></a><a href="fourche.html" target="details"><rect x="1666" y="17" width="211" height="40"><title>Fourche</title></rect></a><a href="valastir.html" target="details"><rect x="1836" y="382" width="208" height="35"><title>Valastir</title></rect></a></svg></div>
</body> </body>
</html> </html>

10
Docs/Osgild/ferrance.map.html → Docs/Osgild/ferrance.map
View file

@ -6,9 +6,9 @@
<!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:fr19960 --> <!-- #$AUTHOR:fr19960 -->
<area shape="rect" coords="1,103,193,143" alt="Océan Pelurique" href="oceanpelurique.html" target="_parent" /> <area shape="rect" coords="1,103,193,143" alt="Océan Pelurique" href="oceanpelurique.html" target="details" />
<area shape="rect" coords="1,1363,207,1535" alt="Océan Pelurique" href="oceanpelurique.html" target="_parent" /> <area shape="rect" coords="1,1363,207,1535" alt="Océan Pelurique" href="oceanpelurique.html" target="details" />
<area shape="rect" coords="1348,1480,1599,1520" alt="Port-Sable" href="portsable.html" target="_parent" /> <area shape="rect" coords="1348,1480,1599,1520" alt="Port-Sable" href="portsable.html" target="details" />
<area shape="rect" coords="1666,17,1877,57" alt="Fourche" href="fourche.html" target="_parent" /> <area shape="rect" coords="1666,17,1877,57" alt="Fourche" href="fourche.html" target="details" />
<area shape="rect" coords="1836,382,2044,417" alt="Valastir" href="valastir.html" target="_parent" /> <area shape="rect" coords="1836,382,2044,417" alt="Valastir" href="valastir.html" target="details" />
</map> </map>

12
Docs/Osgild/ferrance.svg
View file

@ -1,26 +1,26 @@
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
<image href="ferrance.jpg" /> <image href="ferrance.jpg" />
<a href="oceanpelurique.html" target="_parent"> <a href="oceanpelurique.html" target="details">
<rect x="1" y="103" width="192" height="40"> <rect x="1" y="103" width="192" height="40">
<title>Océan Pelurique</title> <title>Océan Pelurique</title>
</rect> </rect>
</a> </a>
<a href="oceanpelurique.html" target="_parent"> <a href="oceanpelurique.html" target="details">
<rect x="1" y="1363" width="206" height="172"> <rect x="1" y="1363" width="206" height="172">
<title>Océan Pelurique</title> <title>Océan Pelurique</title>
</rect> </rect>
</a> </a>
<a href="portsable.html" target="_parent"> <a href="portsable.html" target="details">
<rect x="1348" y="1480" width="251" height="40"> <rect x="1348" y="1480" width="251" height="40">
<title>Port-Sable</title> <title>Port-Sable</title>
</rect> </rect>
</a> </a>
<a href="fourche.html" target="_parent"> <a href="fourche.html" target="details">
<rect x="1666" y="17" width="211" height="40"> <rect x="1666" y="17" width="211" height="40">
<title>Fourche</title> <title>Fourche</title>
</rect> </rect>
</a> </a>
<a href="valastir.html" target="_parent"> <a href="valastir.html" target="details">
<rect x="1836" y="382" width="208" height="35"> <rect x="1836" y="382" width="208" height="35">
<title>Valastir</title> <title>Valastir</title>
</rect> </rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 879 B

After

Width:  |  Height:  |  Size: 888 B

Before After
Before After

14
Docs/Osgild/fourche.base.html Normal file
View file

@ -0,0 +1,14 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Fourche</h1>
<div><b>Ville marchande</b></div>
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">CB02</a> : <a href="courseduprintemps.html">La course du printemps</a> p149</div>
<div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="fourche.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/fourche.html
View file

@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
@ -9,6 +9,6 @@
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">CB02</a> : <a href="courseduprintemps.html">La course du printemps</a> p149</div> <div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">CB02</a> : <a href="courseduprintemps.html">La course du printemps</a> p149</div>
<div>Carte par <b>Romje</b> :</div> <div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="fourche.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="fourche.jpg" /><a href="virylene.html" target="details"><rect x="28" y="100" width="212" height="34"><title>Virylène</title></rect></a><a href="hauterive.html" target="details"><rect x="1172" y="0" width="230" height="29"><title>Hauterive</title></rect></a><a href="wyks.html" target="details"><rect x="1876" y="1429" width="160" height="33"><title>Wyks</title></rect></a><a href="ferrance.html" target="details"><rect x="333" y="1476" width="215" height="34"><title>Ferrance</title></rect></a></svg></div>
</body> </body>
</html> </html>

8
Docs/Osgild/fourche.map.html → Docs/Osgild/fourche.map
View file

@ -6,8 +6,8 @@
<!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$VERSION:2.3 -->
<!-- #$AUTHOR: --> <!-- #$AUTHOR: -->
<area shape="rect" coords="28,100,240,134" alt="Virylène" target="_parent" href="virylene.html" /> <area shape="rect" coords="28,100,240,134" alt="Virylène" target="details" href="virylene.html" />
<area shape="rect" coords="1172,0,1402,29" alt="Hauterive" target="_parent" href="hauterive.html" /> <area shape="rect" coords="1172,0,1402,29" alt="Hauterive" target="details" href="hauterive.html" />
<area shape="rect" coords="1876,1429,2036,1462" alt="Wyks" target="_parent" href="wyks.html" /> <area shape="rect" coords="1876,1429,2036,1462" alt="Wyks" target="details" href="wyks.html" />
<area shape="rect" coords="333,1476,548,1510" alt="Ferrance" target="_parent" href="ferrance.html" /> <area shape="rect" coords="333,1476,548,1510" alt="Ferrance" target="details" href="ferrance.html" />
</map> </map>

10
Docs/Osgild/fourche.svg
View file

@ -1,21 +1,21 @@
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
<image href="fourche.jpg" /> <image href="fourche.jpg" />
<a href="virylene.html" target="_parent"> <a href="virylene.html" target="details">
<rect x="28" y="100" width="212" height="34"> <rect x="28" y="100" width="212" height="34">
<title>Virylène</title> <title>Virylène</title>
</rect> </rect>
</a> </a>
<a href="hauterive.html" target="_parent"> <a href="hauterive.html" target="details">
<rect x="1172" y="0" width="230" height="29"> <rect x="1172" y="0" width="230" height="29">
<title>Hauterive</title> <title>Hauterive</title>
</rect> </rect>
</a> </a>
<a href="wyks.html" target="_parent"> <a href="wyks.html" target="details">
<rect x="1876" y="1429" width="160" height="33"> <rect x="1876" y="1429" width="160" height="33">
<title>Wyks</title> <title>Wyks</title>
</rect> </rect>
</a> </a>
<a href="ferrance.html" target="_parent"> <a href="ferrance.html" target="details">
<rect x="333" y="1476" width="215" height="34"> <rect x="333" y="1476" width="215" height="34">
<title>Ferrance</title> <title>Ferrance</title>
</rect> </rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 700 B

After

Width:  |  Height:  |  Size: 709 B

Before After
Before After

15
Docs/Osgild/hauterive.base.html Normal file
View file

@ -0,0 +1,15 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Hauterive</h1>
<div><b>Ville fortifiée</b></div>
<div><b>Lieux importants :</b> Castel-Froid, la Bibliothèque du baron, la Tour de l’alchimiste</div>
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
<div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="hauterive.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/hauterive.html
View file

@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
@ -10,6 +10,6 @@
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div> <div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
<div>Carte par <b>Romje</b> :</div> <div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="hauterive.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="hauterive.jpg" /><a href="vercelise.html" target="details"><rect x="1144" y="1500" width="224" height="33"><title>Vercélise</title></rect></a></svg></div>
</body> </body>
</html> </html>

2
Docs/Osgild/hauterive.map.html → Docs/Osgild/hauterive.map
View file

@ -6,5 +6,5 @@
<!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$VERSION:2.3 -->
<!-- #$AUTHOR: --> <!-- #$AUTHOR: -->
<area shape="rect" coords="1144,1500,1368,1533" alt="Vercélise" target="_parent" href="vercelise.html" /> <area shape="rect" coords="1144,1500,1368,1533" alt="Vercélise" target="details" href="vercelise.html" />
</map> </map>

4
Docs/Osgild/hauterive.svg
View file

@ -1,6 +1,6 @@
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
<image href="hauterive.jpg" /> <image href="hauterive.jpg" />
<a href="vercelise.html" target="_parent"> <a href="vercelise.html" target="details">
<rect x="1144" y="1500" width="224" height="33"> <rect x="1144" y="1500" width="224" height="33">
<title>Vercélise</title> <title>Vercélise</title>
</rect> </rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 279 B

After

Width:  |  Height:  |  Size: 288 B

Before After
Before After

11
Docs/Osgild/osgild.base.html Normal file
View file

@ -0,0 +1,11 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Terres d'Osgild</h1>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="osgild.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/osgild.html
View file

File diff suppressed because one or more lines are too long

0
Docs/Osgild/osgild.map.html → Docs/Osgild/osgild.map
View file

6
Docs/Osgild/osgild.svg
View file

@ -1,4 +1,4 @@
<svg style="fill: transparent" viewBox="0 0 2099 1485" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2099 1485" xmlns="http://www.w3.org/2000/svg">
<image href="osgild.png" /> <image href="osgild.png" />
<a href="hauterive.html" target="details"> <a href="hauterive.html" target="details">
<circle cx="144" cy="466" r="12"> <circle cx="144" cy="466" r="12">
@ -115,9 +115,9 @@
<title>Benastir</title> <title>Benastir</title>
</circle> </circle>
</a> </a>
<a href="unknown.html" target="details"> <a href="fourchevive.html" target="details">
<circle cx="518" cy="1201" r="7"> <circle cx="518" cy="1201" r="7">
<title>???6</title> <title>Fourchevive ?</title>
</circle> </circle>
</a> </a>
<a href="ormile.html" target="details"> <a href="ormile.html" target="details">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before After
Before After

12
Docs/Osgild/portsable.base.html Normal file
View file

@ -0,0 +1,12 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Port-Sable</h1>
<div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="portsable.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/portsable.html
View file

@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
@ -7,6 +7,6 @@
<h1>Port-Sable</h1> <h1>Port-Sable</h1>
<div>Carte par <b>Romje</b> :</div> <div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="portsable.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="portsable.jpg" /><a href="oceanpelurique.html" target="details"><rect x="29" y="162" width="246" height="116"><title>Océan Pelurique</title></rect></a><a href="ferrance.html" target="details"><rect x="1521" y="1" width="217" height="28"><title>Ferrance</title></rect></a><a href="desertdetanith.html" target="details"><rect x="838" y="1500" width="332" height="34"><title>Désert de Tanith</title></rect></a></svg></div>
</body> </body>
</html> </html>

6
Docs/Osgild/portsable.map.html → Docs/Osgild/portsable.map
View file

@ -6,7 +6,7 @@
<!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$VERSION:2.3 -->
<!-- #$AUTHOR: --> <!-- #$AUTHOR: -->
<area shape="rect" coords="29,162,275,278" alt="Océan Pelurique" target="_parent" href="oceanpelurique.html" /> <area shape="rect" coords="29,162,275,278" alt="Océan Pelurique" target="details" href="oceanpelurique.html" />
<area shape="rect" coords="1521,1,1738,29" alt="Ferrance" target="_parent" href="ferrance.html" /> <area shape="rect" coords="1521,1,1738,29" alt="Ferrance" target="details" href="ferrance.html" />
<area shape="rect" coords="838,1500,1170,1534" alt="Désert de Tanith" target="_parent" href="desertdetanith.html" /> <area shape="rect" coords="838,1500,1170,1534" alt="Désert de Tanith" target="details" href="desertdetanith.html" />
</map> </map>

8
Docs/Osgild/portsable.svg
View file

@ -1,16 +1,16 @@
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
<image href="portsable.jpg" /> <image href="portsable.jpg" />
<a href="oceanpelurique.html" target="_parent"> <a href="oceanpelurique.html" target="details">
<rect x="29" y="162" width="246" height="116"> <rect x="29" y="162" width="246" height="116">
<title>Océan Pelurique</title> <title>Océan Pelurique</title>
</rect> </rect>
</a> </a>
<a href="ferrance.html" target="_parent"> <a href="ferrance.html" target="details">
<rect x="1521" y="1" width="217" height="28"> <rect x="1521" y="1" width="217" height="28">
<title>Ferrance</title> <title>Ferrance</title>
</rect> </rect>
</a> </a>
<a href="desertdetanith.html" target="_parent"> <a href="desertdetanith.html" target="details">
<rect x="838" y="1500" width="332" height="34"> <rect x="838" y="1500" width="332" height="34">
<title>Désert de Tanith</title> <title>Désert de Tanith</title>
</rect> </rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 591 B

After

Width:  |  Height:  |  Size: 600 B

Before After
Before After

104
Docs/Osgild/scripts.js
View file

@ -1,21 +1,119 @@
function init() { function init() {
var body = document.documentElement;
var range = document.getElementById("range"); var range = document.getElementById("range");
var map = document.getElementById("map"); var map = document.getElementById("map");
map.style.width = "" + range.value + "%"; map.style.width = "" + range.value + "%";
range.oninput = function() { range.oninput = function() {
map.style.width = "" + range.value + "%"; map.style.width = "" + range.value + "%";
console.log(range.value);
} }
//range.addEventListener("wheel", onwheel); //range.addEventListener("wheel", onwheel);
addWheelListener(body, onwheel);
var curYPos = 0,
curXPos = 0,
curDown = false;
window.addEventListener('mousemove', function(e) {
if (curDown === true) {
window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
}
e.preventDefault();
});
window.addEventListener('mousedown', function(e) {
curDown = true;
curYPos = e.pageY;
curXPos = e.pageX;
e.preventDefault();
});
window.addEventListener('mouseup', function(e) {
curDown = false;
e.preventDefault();
});
} }
function onwheel() { function onwheel(e) {
var range = document.getElementById("range"); var range = document.getElementById("range");
var map = document.getElementById("map"); var map = document.getElementById("map");
//alert(range.value); //alert(range.value);
//var percent = range.value.toString().substring(0, range.length - 1); //var percent = range.value.toString().substring(0, range.length - 1);
//alert(percent); //alert(percent);
range.value = range.value + 10; console.log(range.value);
range.value = parseInt(range.value) - Math.sign(e.deltaY) * 10;
map.style.width = "" + range.value + "%"; map.style.width = "" + range.value + "%";
//map.style.width = "" + range.value + "%";
//map.style.width = "" + (parseInt(range.value) + 10) + "%"; //map.style.width = "" + (parseInt(range.value) + 10) + "%";
console.log(range.value); console.log(range.value);
} e.preventDefault();
}
// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {
var prefix = "", _addEventListener, support;
// detect event model
if ( window.addEventListener ) {
_addEventListener = "addEventListener";
} else {
_addEventListener = "attachEvent";
prefix = "on";
}
// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
window.addWheelListener = function( elem, callback, useCapture ) {
_addWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
};
function _addWheelListener( elem, eventName, callback, useCapture ) {
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
!originalEvent && ( originalEvent = window.event );
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: "wheel",
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
deltaX: 0,
deltaY: 0,
deltaZ: 0,
preventDefault: function() {
originalEvent.preventDefault ?
originalEvent.preventDefault() :
originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if ( support == "mousewheel" ) {
event.deltaY = - 1/40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
} else {
event.deltaY = originalEvent.deltaY || originalEvent.detail;
}
// it's time to fire the callback
return callback( event );
}, useCapture || false );
}
})(window,document);

5
Docs/Osgild/style.css
View file

@ -5,7 +5,12 @@ pre {
} }
body { body {
font-family: 'Noto Serif', serif; font-family: 'Noto Serif', serif;
margin: 0;
padding: 0;
} }
h1 { h1 {
font-family: 'UnifrakturCook', cursive; font-family: 'UnifrakturCook', cursive;
} }
#range {
position: fixed; top: 0; left: 0; z-index: 2; visibility: hidden;
}

18
Docs/Osgild/vercelise.base.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Vercélise</h1>
<div><b>Ville</b> (~700 habitants)</div>
<div><b>Bourgmestre :</b> Barral Rogenat</div>
<div><b>Rivière :</b> La Reverdie</div>
<div><b>Lieux importants :</b> L’hôtel de ville, le temple, la chapelle de Chloris, l’auberge au toit fleuri, le lac</div>
<div><b>Activité :</b> Agriculture, élevage, pêche</div>
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
<div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="vercelise.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/vercelise.html
View file

@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
@ -13,6 +13,6 @@
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div> <div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
<div>Carte par <b>Romje</b> :</div> <div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="vercelise.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="vercelise.jpg" /><a href="hauterive.html" target="details"><rect x="889" y="0" width="234" height="28"><title>Hauterive</title></rect></a><a href="virylene.html" target="details"><rect x="783" y="1484" width="211" height="34"><title>Virylène</title></rect></a></svg></div>
</body> </body>
</html> </html>

4
Docs/Osgild/vercelise.map.html → Docs/Osgild/vercelise.map
View file

@ -6,6 +6,6 @@
<!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$VERSION:2.3 -->
<!-- #$AUTHOR: --> <!-- #$AUTHOR: -->
<area shape="rect" coords="889,0,1123,28" alt="Hauterive" target="_parent" href="hauterive.html" /> <area shape="rect" coords="889,0,1123,28" alt="Hauterive" target="details" href="hauterive.html" />
<area shape="rect" coords="783,1484,994,1518" alt="Virylène" target="_parent" href="virylene.html" /> <area shape="rect" coords="783,1484,994,1518" alt="Virylène" target="details" href="virylene.html" />
</map> </map>

6
Docs/Osgild/vercelise.svg
View file

@ -1,11 +1,11 @@
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
<image href="vercelise.jpg" /> <image href="vercelise.jpg" />
<a href="hauterive.html" target="_parent"> <a href="hauterive.html" target="details">
<rect x="889" y="0" width="234" height="28"> <rect x="889" y="0" width="234" height="28">
<title>Hauterive</title> <title>Hauterive</title>
</rect> </rect>
</a> </a>
<a href="virylene.html" target="_parent"> <a href="virylene.html" target="details">
<rect x="783" y="1484" width="211" height="34"> <rect x="783" y="1484" width="211" height="34">
<title>Virylène</title> <title>Virylène</title>
</rect> </rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 B

After

Width:  |  Height:  |  Size: 429 B

Before After
Before After

16
Docs/Osgild/xelys.base.html Normal file
View file

@ -0,0 +1,16 @@
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="init()">
<h1>Xelys</h1>
<div><b>Cité-état</b>, ville troglodyte, creusée dans les parois d’un canyon</div>
<div>Aussi appelée <i>Porte d’Or</i> ou <i>Cité des Voleurs</i></div>
<div>Abrite de nombreuses compagnies de Mercenaires et aussi une importante communauté de nains</div>
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : S5 Le Pic d’Anddalf p100</div>
<div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="xelys.svg" width="100%" type="image/svg+xml" /></div>
</body>
</html>

4
Docs/Osgild/xelys.html
View file

@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
@ -11,6 +11,6 @@
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : S5 Le Pic d’Anddalf p100</div> <div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : S5 Le Pic d’Anddalf p100</div>
<div>Carte par <b>Romje</b> :</div> <div>Carte par <b>Romje</b> :</div>
<div><input type="range" min="30" max="250" value="100" id="range" /></div> <div><input type="range" min="30" max="250" value="100" id="range" /></div>
<div><object id="map" data="xelys.svg" width="100%" type="image/svg+xml" /></div> <div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="xelys.jpg" /><a href="forterive.html" target="details"><rect x="834" y="4" width="225" height="32"><title>Forterive</title></rect></a><a href="boisdebaram.html" target="details"><rect x="1084" y="7" width="207" height="26"><title>Bois de Baram</title></rect></a><a href="kaerimbor.html" target="details"><rect x="168" y="1486" width="244" height="40"><title>Kaerimbor</title></rect></a></svg></div>
</body> </body>
</html> </html>

6
Docs/Osgild/xelys.map.html → Docs/Osgild/xelys.map
View file

@ -6,7 +6,7 @@
<!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$VERSION:2.3 -->
<!-- #$AUTHOR: --> <!-- #$AUTHOR: -->
<area shape="rect" coords="834,4,1059,36" alt="Forterive" target="_parent" href="forterive.html" /> <area shape="rect" coords="834,4,1059,36" alt="Forterive" target="details" href="forterive.html" />
<area shape="rect" coords="1084,7,1291,33" alt="Bois de Baram" target="_parent" href="boisdebaram.html" /> <area shape="rect" coords="1084,7,1291,33" alt="Bois de Baram" target="details" href="boisdebaram.html" />
<area shape="rect" coords="168,1486,412,1526" alt="Kaerimbor" target="_parent" href="kaerimbor.html" /> <area shape="rect" coords="168,1486,412,1526" alt="Kaerimbor" target="details" href="kaerimbor.html" />
</map> </map>

8
Docs/Osgild/xelys.svg
View file

@ -1,16 +1,16 @@
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"> <svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
<image href="xelys.jpg" /> <image href="xelys.jpg" />
<a href="forterive.html" target="_parent"> <a href="forterive.html" target="details">
<rect x="834" y="4" width="225" height="32"> <rect x="834" y="4" width="225" height="32">
<title>Forterive</title> <title>Forterive</title>
</rect> </rect>
</a> </a>
<a href="boisdebaram.html" target="_parent"> <a href="boisdebaram.html" target="details">
<rect x="1084" y="7" width="207" height="26"> <rect x="1084" y="7" width="207" height="26">
<title>Bois de Baram</title> <title>Bois de Baram</title>
</rect> </rect>
</a> </a>
<a href="kaerimbor.html" target="_parent"> <a href="kaerimbor.html" target="details">
<rect x="168" y="1486" width="244" height="40"> <rect x="168" y="1486" width="244" height="40">
<title>Kaerimbor</title> <title>Kaerimbor</title>
</rect> </rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 568 B

After

Width:  |  Height:  |  Size: 577 B

Before After
Before After

7
Docs/alariantest.html
View file

@ -13,9 +13,10 @@
} }
--> -->
</style> </style>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript"> <script type="text/javascript">
<!-- <!--
function init() { function init2() {
var slider = document.getElementById("myRange"); var slider = document.getElementById("myRange");
var output = document.getElementById("myImage"); var output = document.getElementById("myImage");
var mySvg = document.getElementById("mySvg"); var mySvg = document.getElementById("mySvg");
@ -44,7 +45,7 @@
<!--<img id="myImage" src="alarian.png" alt="Alarian" />--> <!--<img id="myImage" src="alarian.png" alt="Alarian" />-->
<svg id="mySvg" class="transparent" style="position: absolute; top: 0; left: 0" viewBox="0 0 2500 3250" xmlns="http://www.w3.org/2000/svg"> <svg id="map" class="transparent" viewBox="0 0 2500 3250" xmlns="http://www.w3.org/2000/svg">
<image id="myImage" href="alarian.png" alt="Alarian" /> <image id="myImage" href="alarian.png" alt="Alarian" />
<!-- Norven --> <!-- Norven -->
@ -1042,7 +1043,7 @@
</svg> </svg>
<div style="position: fixed; top: 0; left: 0"> <div style="position: fixed; top: 0; left: 0">
<input type="range" min="30" max="250" value="100" class="slider" id="myRange" /> <input type="range" min="30" max="250" value="100" class="slider" id="range" />
<br /> <br />
<input id="checkPoints" type="checkbox" onclick="togglePoints()" /> <input id="checkPoints" type="checkbox" onclick="togglePoints()" />
<label for="checkPoints">Points</label> <label for="checkPoints">Points</label>

119
Docs/scripts.js Normal file
View file

@ -0,0 +1,119 @@
function init() {
var body = document.documentElement;
var range = document.getElementById("range");
var map = document.getElementById("map");
map.style.width = "" + range.value + "%";
range.oninput = function() {
map.style.width = "" + range.value + "%";
console.log(range.value);
}
//range.addEventListener("wheel", onwheel);
addWheelListener(body, onwheel);
var curYPos = 0,
curXPos = 0,
curDown = false;
window.addEventListener('mousemove', function(e) {
if (curDown === true) {
window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
}
e.preventDefault();
});
window.addEventListener('mousedown', function(e) {
curDown = true;
curYPos = e.pageY;
curXPos = e.pageX;
e.preventDefault();
});
window.addEventListener('mouseup', function(e) {
curDown = false;
e.preventDefault();
});
}
function onwheel(e) {
var range = document.getElementById("range");
var map = document.getElementById("map");
//alert(range.value);
//var percent = range.value.toString().substring(0, range.length - 1);
//alert(percent);
console.log(range.value);
range.value = parseInt(range.value) - Math.sign(e.deltaY) * 10;
map.style.width = "" + range.value + "%";
//map.style.width = "" + range.value + "%";
//map.style.width = "" + (parseInt(range.value) + 10) + "%";
console.log(range.value);
e.preventDefault();
}
// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {
var prefix = "", _addEventListener, support;
// detect event model
if ( window.addEventListener ) {
_addEventListener = "addEventListener";
} else {
_addEventListener = "attachEvent";
prefix = "on";
}
// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
window.addWheelListener = function( elem, callback, useCapture ) {
_addWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
};
function _addWheelListener( elem, eventName, callback, useCapture ) {
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
!originalEvent && ( originalEvent = window.event );
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: "wheel",
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
deltaX: 0,
deltaY: 0,
deltaZ: 0,
preventDefault: function() {
originalEvent.preventDefault ?
originalEvent.preventDefault() :
originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if ( support == "mousewheel" ) {
event.deltaY = - 1/40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
} else {
event.deltaY = originalEvent.deltaY || originalEvent.detail;
}
// it's time to fire the callback
return callback( event );
}, useCapture || false );
}
})(window,document);