Commit 7d37c07a authored by julien's avatar julien
Browse files

update image and add map

parent 52abbf9b
Pipeline #901 failed with stage
in 1 second
......@@ -63,6 +63,8 @@
}
</style>
<style data-pagedjs-inserted-styles="true">
.controls {
z-index: 3000;
......@@ -453,9 +455,13 @@ ${positions != undefined ? positions : ""}
<p>note</p>
<p>image can be either cover (all the image space is used), contains (all the image is shown, creating white space) or auto-size:width is chosen and image is height is homotéttique</p>
<p>image can be either cover (all the image space is used), contains (all the image is shown, creating white space) or auto: the image height will depend of the width. <p>
<p>you can still change its position</p>
<h2>click a image to start playing with it. Warning the image becomes a backgroudn element. This is a test more than a real thing</h2>
<img id='img1' src="../images/hamid-tajik-FY-um1rfLOA-unsplash.jpg" alt="" class="changes">
<img id='img2' src="../images/photo-1633007400080-f37dfabbf2e3.jpeg" alt="" class="changes">
......
......@@ -35,7 +35,6 @@
display: block;
}
input::after {}
</style>
<script>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/interface.css">
<!-- <script src="https://unpkg.com/pagedjs@0.2.0/dist/paged.polyfill.js"></script> -->
<style>
.img-wrap {
overflow: hidden;
width: 200px;
height: 200px;
}
.img-wrap.active {
overflow: visible;
box-shadow: 0 0 0 200px rgba(255, 255, 255, .8);
}
.img-dup {
width: 400%;
height: 400%;
}
.imgEdit {
box-shadow: 0 0 0 10px black;
}
</style>
</head>
<body>
<img id='img1' src="../images/hamid-tajik-FY-um1rfLOA-unsplash.jpg" alt="">
<script>
// duplicate the image
function imgSetup() {
document.querySelectorAll('img').forEach((img, imgNum) => {
const wrapper = document.createElement('div');
wrapper.classList.add('img-wrap');
wrapper.id = `wrap-imag-${imgNum}`
const dupImage = document.createElement('div');
dupImage.classList.add('img-dup');
dupImage.id = `dup-imag-${imgNum}`
dupImage.style.backgroundImage = `url(${img.src})`
img.insertAdjacentElement('beforebegin', wrapper);
wrapper.insertAdjacentElement('afterbegin', img);
wrapper.insertAdjacentElement('afterbegin', dupImage);
img.style.display = "none";
})
}
function selectImg() {
document.querySelectorAll('.img-wrap').forEach((img, index) => {
img.addEventListener('click', function () {
this.classList.toggle('active');
})
});
};
imgSetup();
selectImg();
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="../css/interface.css">
<script src="https://unpkg.com/pagedjs@0.2.0/dist/paged.polyfill.js"></script>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
#map1 {
--zoom-level: 5;
--map-center: LatLng(49.49382, 1.565552);
}
.mapData {
position: absolute;
width: 200px;
z-index: 2000;
left: 2em;
top: 2em;
background: white;
border: 2px solid black;
opacity: .6;
}
.mapData:hover {
opacity: 1;
}
.map {
width: 300px;
height: 300px;
background: orange;
}
.map .leaflet-control-zoom.leaflet-bar.leaflet-control {
display: none;
}
.map:hover .leaflet-control-zoom.leaflet-bar.leaflet-control {
display: block;
}
</style>
<script>
class MyHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterRendered(pages) {
let mapData = document.createElement('div')
mapData.classList.add('mapData');
document.body.insertAdjacentElement('beforeend', mapData)
document.querySelectorAll('.map').forEach(carte => {
let id = carte.id;
let values = getComputedStyle(carte);
let zoom = values.getPropertyValue('--zoom-level');
let center = filterMap(values.getPropertyValue('--map-center'));
if (!zoom.length) {
console.log(`zoom empty`, zoom)
zoom = 10;
}
if (!values.getPropertyValue('--map-center').length) {
console.log(`center empty`, center)
center = filterMap(`LatLng(49.49382, 1.565552)`);
}
console.log(`zoom ${zoom}, center ${center}, map: ${id}`)
leaf(carte.id, center, zoom);
})
}
}
Paged.registerHandlers(MyHandler);
function leaf(id, center, zoom) {
let gauge = document.querySelector('.mapData');
var map = L.map(id).setView(center, zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// L.marker([51.5, -0.09]).addTo(map)
gauge.innerHTML = `#${id}{--zoom-level: ${map.getZoom()}; \n --map-center: ${map.getCenter()};}`;
map.on('zoomstart zoom zoomend dragend', function (ev) {
gauge.innerHTML = `#${id}{--zoom-level: ${map.getZoom()}; \n --map-center: ${map.getCenter()};}`;
})
}
function filterMap(center) {
center = center.replace(`LatLng(`, '')
center = center.replace(`)`, '');
let value = center.split(',')
return value;
}
</script>
</head>
<body>
<div class="map" id="map1"></div>
<div class="map" id="map2"></div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
......@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
</head>
<body>
......@@ -18,6 +18,8 @@
<li>how to use <a href="examples/footnotes.html">footnotes</a></li>
<li>how to create an interface with tools <a href="examples/imgTools.html">designer tools</a></li>
<li>how to create an interface to modify image/background-image crop and size <a href="examples/img-to-background-and-Tools.html">image/background-image</a></li>
<li>how to RTL <a href="examples/rtl.html">right to left</a></li>
<li>how to change a map, and set the new value as some css to copy paste <a href="examples/map.html">thanks to leaflet</a></li>
</ul>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment