Maks1mS/free-ozon-dpr
0
0
Fork 0
mirror of https://github.com/Maks1mS/free-ozon-dpr.git synced 2024-12-23 18:42:59 +03:00
Code Issues

feat: add info button

Browse Source
This commit is contained in:
Maxim Slipenko 2024-06-10 20:58:19 +03:00
parent 9b68dea419
commit 964009cdc3
4 changed files with 95 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -66,7 +66,7 @@
</style>
</head>
<body>
<div class="info-popup">
<div id="info-popup" class="info-popup">
<div class="info-popup-content">
<h1>Важная информация перед использованием сайта</h1>
<h2>Пожалуйста, прочитайте внимательно</h2>

47
src/info-popup.js
View File

@ -3,24 +3,49 @@ import { el } from "./utils.js";
const HIDE_INFO_POPUP = "hideInfoPopup";
let infoPopup;
let map;
function getHidePopup() {
const hidePopupCookie = Cookies.get(HIDE_INFO_POPUP);
return hidePopupCookie === 'true';
}
function setHidePopup(hidePopupCookie) {
Cookies.set(HIDE_INFO_POPUP, hidePopupCookie ? "true" : "false", { expires: 400 });
}
export function showPopup() {
infoPopup.style.display = "block";
map.style.display = "none";
const hidePopupCookie = getHidePopup();
if (hidePopupCookie) {
const noShowCheckbox = document.querySelector('input[name="no-show"]');
noShowCheckbox.checked = true;
}
}
export function hidePopup() {
infoPopup.style.display = "none";
map.style.display = "block";
}
document.addEventListener("DOMContentLoaded", function () {
const infoPopup = document.querySelector(".info-popup");
infoPopup = el("info-popup");
const noShowCheckbox = document.querySelector('input[name="no-show"]');
const confirmButton = document.querySelector(".info-popup footer button");
const map = el("map");
map = el("map");
const hidePopupCookie = getHidePopup();
const hidePopupCookie = Cookies.get(HIDE_INFO_POPUP);
if (!hidePopupCookie) {
infoPopup.style.display = "block";
map.style.display = "none";
showPopup();
}
confirmButton.addEventListener("click", function () {
if (noShowCheckbox.checked) {
Cookies.set(HIDE_INFO_POPUP, "true", { expires: 400 });
}
infoPopup.style.display = "none";
map.style.display = "block";
setHidePopup(noShowCheckbox.checked);
hidePopup();
});
});

75
src/map.js
View File

@ -1,40 +1,63 @@
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import { XYZ } from 'ol/source';
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import { XYZ } from "ol/source";
import { Control, defaults as defaultControls } from "ol/control.js";
// import { createXYZ } from 'ol/tilegrid';
import { showPopup } from "./info-popup.js";
const MAP_TARGET = 'map';
const MAP_TARGET = "map";
const MAP_CENTER = fromLonLat([37.57725139554275, 48.02287702854201]);
const MAP_ZOOM = 8.5;
const customTileSource = new TileLayer({
source: new XYZ({
attributionsCollapsible: false,
attributions: [
'&#169; <a href="https://wikimapia.org/">Wikimapia</a>'
],
tileUrlFunction: ([z, x, y]) => {
const s = x % 4 + (y % 4) * 4
return `https://i${s}.wikimapia.org/?x=${x}&y=${y}&zoom=${z}&type=map&lng=1`
},
maxZoom: 18,
})
source: new XYZ({
attributionsCollapsible: false,
attributions: ['&#169; <a href="https://wikimapia.org/">Wikimapia</a>'],
tileUrlFunction: ([z, x, y]) => {
const s = (x % 4) + (y % 4) * 4;
return `https://i${s}.wikimapia.org/?x=${x}&y=${y}&zoom=${z}&type=map&lng=1`;
},
maxZoom: 18,
}),
});
class InfoButton extends Control {
constructor(opt_options) {
const options = opt_options || {};
const button = document.createElement("button");
button.innerHTML = "i";
const element = document.createElement("div");
element.className = "info-button ol-unselectable ol-control";
element.appendChild(button);
super({
element: element,
target: options.target,
});
button.addEventListener("click", this.showInfo.bind(this), false);
}
showInfo() {
showPopup();
}
}
export const view = new View({
center: MAP_CENTER,
zoom: MAP_ZOOM,
})
center: MAP_CENTER,
zoom: MAP_ZOOM,
});
const map = new Map({
target: MAP_TARGET,
layers: [
customTileSource
],
view,
controls: defaultControls().extend([new InfoButton()]),
target: MAP_TARGET,
layers: [customTileSource],
view,
});
export default map;

5
src/style.css
View File

@ -78,3 +78,8 @@ body {
}
.info-popup-content > p { text-align:justify; }
.info-button {
top: 5em;
left: .5em;
}