mirror of
https://github.com/Maks1mS/free-ozon-dpr.git
synced 2024-12-23 10:32:58 +03:00
feat: add info button
This commit is contained in:
parent
9b68dea419
commit
964009cdc3
@ -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>
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
81
src/map.js
81
src/map.js
@ -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: [
|
||||
'© <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: ['© <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,
|
||||
})
|
||||
|
||||
const map = new Map({
|
||||
target: MAP_TARGET,
|
||||
layers: [
|
||||
customTileSource
|
||||
],
|
||||
view,
|
||||
center: MAP_CENTER,
|
||||
zoom: MAP_ZOOM,
|
||||
});
|
||||
|
||||
export default map;
|
||||
const map = new Map({
|
||||
controls: defaultControls().extend([new InfoButton()]),
|
||||
target: MAP_TARGET,
|
||||
layers: [customTileSource],
|
||||
view,
|
||||
});
|
||||
|
||||
export default map;
|
||||
|
@ -77,4 +77,9 @@ body {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info-popup-content > p { text-align:justify; }
|
||||
.info-popup-content > p { text-align:justify; }
|
||||
|
||||
.info-button {
|
||||
top: 5em;
|
||||
left: .5em;
|
||||
}
|
Loading…
Reference in New Issue
Block a user