diff --git a/src/index.html b/src/index.html index 0f370e4..be91bd3 100644 --- a/src/index.html +++ b/src/index.html @@ -66,7 +66,7 @@ -
+

Важная информация перед использованием сайта

Пожалуйста, прочитайте внимательно

diff --git a/src/info-popup.js b/src/info-popup.js index 44e8a66..961fa73 100644 --- a/src/info-popup.js +++ b/src/info-popup.js @@ -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(); }); }); diff --git a/src/map.js b/src/map.js index e436f9f..d075a38 100644 --- a/src/map.js +++ b/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: [ - '© Wikimapia' - ], - 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: ['© Wikimapia'], + 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; \ No newline at end of file +const map = new Map({ + controls: defaultControls().extend([new InfoButton()]), + target: MAP_TARGET, + layers: [customTileSource], + view, +}); + +export default map; diff --git a/src/style.css b/src/style.css index 2b20d74..08bdc76 100644 --- a/src/style.css +++ b/src/style.css @@ -77,4 +77,9 @@ body { text-decoration: underline; } -.info-popup-content > p { text-align:justify; } \ No newline at end of file +.info-popup-content > p { text-align:justify; } + +.info-button { + top: 5em; + left: .5em; +} \ No newline at end of file