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

47
src/info-popup.js
View File

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

81
src/map.js
View File

@ -1,40 +1,63 @@
import 'ol/ol.css'; import "ol/ol.css";
import Map from 'ol/Map'; import Map from "ol/Map";
import View from 'ol/View'; import View from "ol/View";
import TileLayer from 'ol/layer/Tile'; import TileLayer from "ol/layer/Tile";
import { fromLonLat } from 'ol/proj'; import { fromLonLat } from "ol/proj";
import { XYZ } from 'ol/source'; import { XYZ } from "ol/source";
import { Control, defaults as defaultControls } from "ol/control.js";
// import { createXYZ } from 'ol/tilegrid'; // 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_CENTER = fromLonLat([37.57725139554275, 48.02287702854201]);
const MAP_ZOOM = 8.5; const MAP_ZOOM = 8.5;
const customTileSource = new TileLayer({ const customTileSource = new TileLayer({
source: new XYZ({ source: new XYZ({
attributionsCollapsible: false, attributionsCollapsible: false,
attributions: [ attributions: ['&#169; <a href="https://wikimapia.org/">Wikimapia</a>'],
'&#169; <a href="https://wikimapia.org/">Wikimapia</a>' tileUrlFunction: ([z, x, y]) => {
], const s = (x % 4) + (y % 4) * 4;
tileUrlFunction: ([z, x, y]) => { return `https://i${s}.wikimapia.org/?x=${x}&y=${y}&zoom=${z}&type=map&lng=1`;
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,
}, }),
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({ export const view = new View({
center: MAP_CENTER, center: MAP_CENTER,
zoom: MAP_ZOOM, zoom: MAP_ZOOM,
})
const map = new Map({
target: MAP_TARGET,
layers: [
customTileSource
],
view,
}); });
export default map; const map = new Map({
controls: defaultControls().extend([new InfoButton()]),
target: MAP_TARGET,
layers: [customTileSource],
view,
});
export default map;

7
src/style.css
View File

@ -77,4 +77,9 @@ body {
text-decoration: underline; text-decoration: underline;
} }
.info-popup-content > p { text-align:justify; } .info-popup-content > p { text-align:justify; }
.info-button {
top: 5em;
left: .5em;
}