refine UI
Iris Lightshard nilix@nilfm.cc
PGP Signature
-----BEGIN PGP SIGNATURE----- iQIzBAABCAAdFiEEkFh6dA+k/6CXFXU4O3+8IhROY5gFAmL4d3gACgkQO3+8IhRO Y5httg/9Ei4rEPMg1os06nY95ziW6Z0qbh8/HID/TVMXWEucXTrGJ6tWzaWd6NxJ Gcl+T0oO36da1iLbZOaWWxRzXfnviiTzxDxwBH/vDB86IQoCQ4uLxRWSjmcAXyie r0aZVytplqo6EW4Q4r8ajzBS8HXocpsig2ckhAcOR3JUei67KiXhvDcWsLeXe3xg RJDPZZzwxvsxzRUKK7p1hpK5Veg3jQwczKgvknBePY6laLcLSAlvHiAack1KizlU r8C0lFHPhiZ/NdhoqUJhF/n3gdVWWD0Guu2qex8zVfCubZYHljCD7n7r3OVF3QIU iWGlrRQg72E8uYKyBlCFG4wO4SasURPFs/7lFOp+P/MBwvdx8ZKwmJsQnpqu89IH qeHWSTE77sJp7WxjFrTw2aOKZCgVcRnGqGtr7HrSz8TUAb3UxS+Sfk6to4BZJxaq 7xgnYyeiPUFk0KUPfzxjQdSNxNx9PdmMJBZRGmWNS0MCSkwpaPFKeLsixDA6j1Kw 5WKTRINnJl+7xmsuUtsfhM2QCWQZ/5iGHIHnLz/TQyauXBtxzIVBsCWk1hHb/S0Y o1oxC9kOZtuTy3pMh7CqsRPbKnZsNUpzpZUXPuhmKmjpi5LG0cxdo8cfuU9bSKPz mlocy+ltvfGuTcaYVkqpRwtGMVB0bWYdbLtn1oV2y2Qa3cR7cpc= =uvLg -----END PGP SIGNATURE-----
10 files changed,
411 insertions(+),
314 deletions(-)
M
site/index.html
→
site/index.html
@@ -9,7 +9,12 @@ <!--<link rel='shortcut icon' href='/img/favicon.png'>-->
<title>ONYX - Scry/Pendulum</title> </head> <body> - +<noscript> + <div id="noscript-container"> + <p>This is a javascript application - <a href="https://nilfm.cc/git/onyx-scry">ONYX/scry</a>;</p> + <p>You must enable javascript in your browser to use it.</p> + </div> +</noscript> <div id="map"></div> <div id="mapControls">@@ -17,45 +22,70 @@ <button id="addPoint-btn">·</button>
<button id="addCircle-btn">∘</button> <button id="addPolygon-btn">⋄</button> <div id="subControls"> - <button id="save-btn"><3</button> - <button id="tiles-btn">←→</button> - <button id="clear-btn">XXX</button> + <button id="save-btn">↓</button> + <button id="tiles-btn">∷</button> + <button id="clear-btn">↺</button> <button id="menu-btn">≡</button> </div> </div> -<div id="modal-container"> - <button class="closeBtn" id="modalCloseBtn">x</button> - <h2 id="modal-title"></h2> - <div id="modal-content"> +<div id="createOverlay-container"> + <div class="modalHeader"> + <button class="closeBtn" id="createOverlay-closeBtn">x</button> + <h2 id="createOverlay-title"></h2> + </div> + <div id="createOverlay-content"> + <label for="createOverlay-name">Name</label><br/> + <input type="text" id="createOverlay-name"><br/> + <label for="createOverlay-desc">Description</label><br/> + <textarea id="createOverlay-desc"></textarea><br/> + <div id="radius-container"> + <label for="createOverlay-radius">Radius (meters)</label><br/> + <input type="number" step="1" id="createOverlay-radius" value="500"><br/> + </div> + + <button id="createOverlay-submitBtn">OK</button> </div> </div> <div id="cancel-container"> - <button class="cancel-btn">Cancel</button> + <button class="negative-btn" id="cancel-btn">Cancel</button> +</div> + +<div id="info-container"> + <button class="closeBtn" id="info-closeBtn">x</button> + <div class="info-content> + </div> </div> <div id="confirm-container"> <span id="confirm-msg"></span> - <button id="yes-btn">Yes</button> - <button id="no-btn">No</button> + <div class="multiBtn-container"> + <button class="positive-btn" id="yes-btn">Yes</button> + <button class="negative-btn" id="no-btn">No</button> + </div> </div> <div id="import-export-container"> <h2></h2> <textarea id="import-export-textarea"></textarea> - <button id="import-export-ok-btn">OK</button> - <button id="import-export-cancel-btn">Cancel</button> + <div class="multiBtn-container"> + <button id="import-export-ok-btn">OK</button> + <button id="import-export-cancel-btn">Cancel</button> + </div> </div> <div id="overlays-menu-container"> + <button class="closeBtn" id="overlys-closeBtn">x</button> <details id="markers-wrapper"><summary>Markers</summary><ul id="markers-list"></ul></details> <details id="circles-wrapper"><summary>Circles</summary><ul id="circles-list"></ul></details> <details id="polygons-wrapper"><summary>Polygons</summary><ul id="polygons-list"></ul></details> - <button id="import-btn">Import</button> - <button id="export-all-btn">Export All</button> + <div class="multiBtn-container"> + <button id="import-btn">Import</button> + <button id="export-all-btn">Export All</button> + </div> </div> - +<!--</div>--> </body> <link rel='stylesheet' type="text/css" href="/static/leaflet.css"> <script src="/static/leaflet.js"></script>
M
src/.srcmap
→
src/.srcmap
@@ -1,5 +1,5 @@
10-overlay.ts 147 11-tilelayer.ts 37 -20-modal.ts 112 -30-handlers.ts 2 -99-onyx-scry.ts 103 +20-createOverlayModal.ts 96 +30-handlers.ts 11 +99-onyx-scry.ts 125
A
src/20-createOverlayModal.ts
@@ -0,0 +1,97 @@
+class CreateOverlayModal { + + constructor() { + const _this = this; + const closeBtn = document.getElementById("createOverlay-closeBtn"); + if (closeBtn) { + closeBtn.onclick = ()=>{_this.setVisible(false)}; + } + } + + self(): HTMLElement | null { + return document.getElementById("createOverlay-container"); + } + + title(): HTMLElement | null{ + return document.getElementById("createOverlay-title"); + } + + content(): HTMLElement | null { + return document.getElementById("createOverlay-content"); + } + + submitBtn(): HTMLElement | null { + return document.getElementById("createOverlay-submitBtn"); + } + + radiusContainer(): HTMLElement | null { + return document.getElementById("radius-container"); + } + + nameField(): string { + return (document.getElementById("createOverlay-name") as HTMLInputElement)?.value ?? ""; + } + + descField(): string { + return (document.getElementById("createOverlay-desc") as HTMLInputElement)?.value ?? ""; + } + + radiusField(): string { + return (document.getElementById("createOverlay-radius") as HTMLInputElement)?.value ?? ""; + } + + visible(): boolean { + return this.self()?.style.display != "none"; + } + + setVisible(v: boolean): void { + const modal = this.self(); + if (modal) { + modal.style.display = v ? "block" : "none"; + } + } + + setState(state: OverlayType, args: any): void { + const _this = this; + const title = this.title() + const radiusContainer = _this.radiusContainer(); + const radius = _this.radiusField(); + const name = _this.nameField(); + const desc = _this.descField(); + const submitBtn = _this.submitBtn(); + + switch (state) { + case OverlayType.POINT: + if (title) { + title.innerHTML = "Add Marker"; + } + if (submitBtn) { + submitBtn.onclick = () => { + const point = new Marker(name, desc, args.latlng, {title: name, alt: name}); + point.add(args.map); + args.overlays.markers.push(point); + _this.setVisible(false); + } + } + break; + case OverlayType.CIRCLE: + if (title) { + title.innerHTML = "Add Circle"; + } + if (radiusContainer) { + radiusContainer.style.display = "block"; + } + if (submitBtn) { + submitBtn.onclick = () => { + const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500}); + circle.add(args.map); + args.overlays.circles.push(circle); + _this.setVisible(false); + } + } + break; + case OverlayType.POLYGON: + break; + } + } +}
D
src/20-modal.ts
@@ -1,113 +0,0 @@
-class Modal { - - constructor() { - const _this = this; - const closeBtn = document.getElementById("modalCloseBtn"); - if (closeBtn) { - closeBtn.onclick = ()=>{_this.setVisible(false)}; - } - } - - self(): HTMLElement | null { - return document.getElementById("modal-container"); - } - - title(): HTMLElement | null{ - return document.getElementById("modal-title"); - } - - content(): HTMLElement | null { - return document.getElementById("modal-content"); - } - - submitBtn(): HTMLElement | null { - return document.getElementById("modal-submitBtn"); - } - - radiusContainer(): HTMLElement | null { - return document.getElementById("radius-container"); - } - - nameField(): string { - return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? ""; - } - - descField(): string { - return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? ""; - } - - radiusField(): string { - return (document.getElementById("modal-radius") as HTMLInputElement)?.value ?? ""; - } - - visible(): boolean { - return this.self()?.style.display != "none"; - } - - setVisible(v: boolean): void { - const modal = this.self(); - if (modal) { - modal.style.display = v ? "block" : "none"; - } - } - - setState(state: OverlayType, args: any): void { - const _this = this; - const title = this.title() - switch (state) { - case OverlayType.POINT: - if (title) { - title.innerHTML = "Add Marker"; - } - fetch("/static/pointModal.html") - .then(r=>r.text()) - .then(t=> { - const content = _this.content(); - if (content) { content.innerHTML = t; } - const submitBtn = _this.submitBtn(); - if (submitBtn) { - submitBtn.onclick = () => { - const name = _this.nameField(); - const desc = _this.descField(); - const point = new Marker(name, desc, args.latlng, {title: name, alt: name}); - point.add(args.map); - args.overlays.markers.push(point); - _this.setVisible(false); - } - } - }); - - break; - case OverlayType.CIRCLE: - if (title) { - title.innerHTML = "Add Circle"; - } - fetch("/static/pointModal.html") - .then(r=>r.text()) - .then(t=> { - const content = _this.content(); - if (content) { content.innerHTML = t; } - const radiusContainer = _this.radiusContainer(); - if (radiusContainer) { - radiusContainer.style.display = "block"; - } - const submitBtn = _this.submitBtn(); - if (submitBtn) { - submitBtn.onclick = () => { - const name = _this.nameField(); - const desc = _this.descField(); - const radius = _this.radiusField(); - const circle = new Circle(name, desc, args.latlng, {radius: Number(radius)}); - circle.add(args.map); - args.overlays.circles.push(circle); - _this.setVisible(false); - } - } - }); - - break; - case OverlayType.POLYGON: - break; - } - } -}
M
src/30-handlers.ts
→
src/30-handlers.ts
@@ -1,3 +1,12 @@
-class MapHandlers { - +class MapHandler { + map: L.Map; + overlays: OverlayState; + layers: TileLayerWrapper[]; + + + constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[]) { + this.map = map; + this.overlays = overlays; + this.layers = layers; + } }
M
src/99-onyx-scry.ts
→
src/99-onyx-scry.ts
@@ -9,7 +9,7 @@ L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: '© OpenStreetMap' + attribution: "street map tiles © OpenStreetMap" })); const satelliteLayer = TileLayerWrapper.constructLayer(@@ -18,7 +18,7 @@ L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 19, - attribution: "© Esri" + attribution: "satellite tiles © Esri" })); TileLayerWrapper.enableOnly(streetLayer, map);@@ -27,41 +27,56 @@ overlays.markers.forEach(m=>m.add(map));
overlays.circles.forEach(m=>m.add(map)); overlays.polygons.forEach(m=>m.add(map)); - const modal = new Modal(); - + const createOverlayModal = new CreateOverlayModal(); + + const closeAllModals = (): void => { + createOverlayModal.setVisible(false); + } + const resetMapClick = (): void => { try { + const addPointBtn = document.getElementById("addPoint-btn"); + if (addPointBtn) { + addPointBtn.classList.remove("activeBtn"); + } map.off("click", addMarkerHandler); + } catch {} try { + const addCircleBtn = document.getElementById("addCircle-btn"); + if (addCircleBtn) { + addCircleBtn.classList.remove("activeBtn"); + } map.off("click", addCircleHandler); } catch {} } const addMarkerHandler = (e: any): void => { - modal.setVisible(true); - modal.setState(OverlayType.POINT, { + createOverlayModal.setVisible(true); + createOverlayModal.setState(OverlayType.POINT, { latlng: e.latlng, map: map, overlays: overlays, }); - map.off("click", addMarkerHandler); + resetMapClick(); } const addCircleHandler = (e: any): void => { - modal.setVisible(true); - modal.setState(OverlayType.CIRCLE, { + createOverlayModal.setVisible(true); + createOverlayModal.setState(OverlayType.CIRCLE, { latlng: e.latlng, map: map, overlays: overlays, }); - map.off("click", addCircleHandler); + resetMapClick(); } const addMarkerBtn = document.getElementById("addPoint-btn"); if (addMarkerBtn) { addMarkerBtn.onclick = (e: any): void => { + closeAllModals(); resetMapClick() + addMarkerBtn.classList.add("activeBtn"); map.on("click", addMarkerHandler); }; }@@ -69,7 +84,9 @@
const addCircleBtn = document.getElementById("addCircle-btn"); if (addCircleBtn) { addCircleBtn.onclick = (e: any): void => { + closeAllModals(); resetMapClick(); + addCircleBtn.classList.add("activeBtn"); map.on("click", addCircleHandler); } }@@ -97,6 +114,11 @@ } else {
TileLayerWrapper.enableOnly(satelliteLayer, map); } }; + } + + const main = document.getElementById("app-container"); + if (main) { + main.style.display = "initial"; } }
M
src/onyx-scry.ts
→
src/onyx-scry.ts
@@ -182,30 +182,30 @@ l.visible = true;
} } } -}class Modal { +}class CreateOverlayModal { constructor() { const _this = this; - const closeBtn = document.getElementById("modalCloseBtn"); + const closeBtn = document.getElementById("createOverlay-closeBtn"); if (closeBtn) { closeBtn.onclick = ()=>{_this.setVisible(false)}; } } self(): HTMLElement | null { - return document.getElementById("modal-container"); + return document.getElementById("createOverlay-container"); } title(): HTMLElement | null{ - return document.getElementById("modal-title"); + return document.getElementById("createOverlay-title"); } content(): HTMLElement | null { - return document.getElementById("modal-content"); + return document.getElementById("createOverlay-content"); } submitBtn(): HTMLElement | null { - return document.getElementById("modal-submitBtn"); + return document.getElementById("createOverlay-submitBtn"); } radiusContainer(): HTMLElement | null {@@ -213,15 +213,15 @@ return document.getElementById("radius-container");
} nameField(): string { - return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? ""; + return (document.getElementById("createOverlay-name") as HTMLInputElement)?.value ?? ""; } descField(): string { - return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? ""; + return (document.getElementById("createOverlay-desc") as HTMLInputElement)?.value ?? ""; } radiusField(): string { - return (document.getElementById("modal-radius") as HTMLInputElement)?.value ?? ""; + return (document.getElementById("createOverlay-radius") as HTMLInputElement)?.value ?? ""; } visible(): boolean {@@ -238,64 +238,57 @@
setState(state: OverlayType, args: any): void { const _this = this; const title = this.title() + const radiusContainer = _this.radiusContainer(); + const radius = _this.radiusField(); + const name = _this.nameField(); + const desc = _this.descField(); + const submitBtn = _this.submitBtn(); + switch (state) { case OverlayType.POINT: if (title) { title.innerHTML = "Add Marker"; } - fetch("/static/pointModal.html") - .then(r=>r.text()) - .then(t=> { - const content = _this.content(); - if (content) { content.innerHTML = t; } - const submitBtn = _this.submitBtn(); - if (submitBtn) { - submitBtn.onclick = () => { - const name = _this.nameField(); - const desc = _this.descField(); - const point = new Marker(name, desc, args.latlng, {title: name, alt: name}); - point.add(args.map); - args.overlays.markers.push(point); - _this.setVisible(false); - } - } - }); - + if (submitBtn) { + submitBtn.onclick = () => { + const point = new Marker(name, desc, args.latlng, {title: name, alt: name}); + point.add(args.map); + args.overlays.markers.push(point); + _this.setVisible(false); + } + } break; case OverlayType.CIRCLE: if (title) { title.innerHTML = "Add Circle"; } - fetch("/static/pointModal.html") - .then(r=>r.text()) - .then(t=> { - const content = _this.content(); - if (content) { content.innerHTML = t; } - const radiusContainer = _this.radiusContainer(); - if (radiusContainer) { - radiusContainer.style.display = "block"; - } - const submitBtn = _this.submitBtn(); - if (submitBtn) { - submitBtn.onclick = () => { - const name = _this.nameField(); - const desc = _this.descField(); - const radius = _this.radiusField(); - const circle = new Circle(name, desc, args.latlng, {radius: Number(radius)}); - circle.add(args.map); - args.overlays.circles.push(circle); - _this.setVisible(false); - } - } - }); - + if (radiusContainer) { + radiusContainer.style.display = "block"; + } + if (submitBtn) { + submitBtn.onclick = () => { + const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500}); + circle.add(args.map); + args.overlays.circles.push(circle); + _this.setVisible(false); + } + } break; case OverlayType.POLYGON: break; } } -}class MapHandlers { - +}class MapHandler { + map: L.Map; + overlays: OverlayState; + layers: TileLayerWrapper[]; + + + constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[]) { + this.map = map; + this.overlays = overlays; + this.layers = layers; + } } function init(): void { let overlays: OverlayState = OverlayState.load() ?? new OverlayState();@@ -307,7 +300,7 @@ L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: '© OpenStreetMap' + attribution: "street map tiles © OpenStreetMap" })); const satelliteLayer = TileLayerWrapper.constructLayer(@@ -316,7 +309,7 @@ L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 19, - attribution: "© Esri" + attribution: "satellite tiles © Esri" })); TileLayerWrapper.enableOnly(streetLayer, map);@@ -325,41 +318,56 @@ overlays.markers.forEach(m=>m.add(map));
overlays.circles.forEach(m=>m.add(map)); overlays.polygons.forEach(m=>m.add(map)); - const modal = new Modal(); - + const createOverlayModal = new CreateOverlayModal(); + + const closeAllModals = (): void => { + createOverlayModal.setVisible(false); + } + const resetMapClick = (): void => { try { + const addPointBtn = document.getElementById("addPoint-btn"); + if (addPointBtn) { + addPointBtn.classList.remove("activeBtn"); + } map.off("click", addMarkerHandler); + } catch {} try { + const addCircleBtn = document.getElementById("addCircle-btn"); + if (addCircleBtn) { + addCircleBtn.classList.remove("activeBtn"); + } map.off("click", addCircleHandler); } catch {} } const addMarkerHandler = (e: any): void => { - modal.setVisible(true); - modal.setState(OverlayType.POINT, { + createOverlayModal.setVisible(true); + createOverlayModal.setState(OverlayType.POINT, { latlng: e.latlng, map: map, overlays: overlays, }); - map.off("click", addMarkerHandler); + resetMapClick(); } const addCircleHandler = (e: any): void => { - modal.setVisible(true); - modal.setState(OverlayType.CIRCLE, { + createOverlayModal.setVisible(true); + createOverlayModal.setState(OverlayType.CIRCLE, { latlng: e.latlng, map: map, overlays: overlays, }); - map.off("click", addCircleHandler); + resetMapClick(); } const addMarkerBtn = document.getElementById("addPoint-btn"); if (addMarkerBtn) { addMarkerBtn.onclick = (e: any): void => { + closeAllModals(); resetMapClick() + addMarkerBtn.classList.add("activeBtn"); map.on("click", addMarkerHandler); }; }@@ -367,7 +375,9 @@
const addCircleBtn = document.getElementById("addCircle-btn"); if (addCircleBtn) { addCircleBtn.onclick = (e: any): void => { + closeAllModals(); resetMapClick(); + addCircleBtn.classList.add("activeBtn"); map.on("click", addCircleHandler); } }@@ -395,6 +405,11 @@ } else {
TileLayerWrapper.enableOnly(satelliteLayer, map); } }; + } + + const main = document.getElementById("app-container"); + if (main) { + main.style.display = "initial"; } }
M
static/onyx-scry.js
→
static/onyx-scry.js
@@ -170,118 +170,102 @@ };
TileLayerWrapper.layers = new Array(); return TileLayerWrapper; }()); -var Modal = /** @class */ (function () { - function Modal() { +var CreateOverlayModal = /** @class */ (function () { + function CreateOverlayModal() { var _this = this; - var closeBtn = document.getElementById("modalCloseBtn"); + var closeBtn = document.getElementById("createOverlay-closeBtn"); if (closeBtn) { closeBtn.onclick = function () { _this.setVisible(false); }; } } - Modal.prototype.self = function () { - return document.getElementById("modal-container"); + CreateOverlayModal.prototype.self = function () { + return document.getElementById("createOverlay-container"); }; - Modal.prototype.title = function () { - return document.getElementById("modal-title"); + CreateOverlayModal.prototype.title = function () { + return document.getElementById("createOverlay-title"); }; - Modal.prototype.content = function () { - return document.getElementById("modal-content"); + CreateOverlayModal.prototype.content = function () { + return document.getElementById("createOverlay-content"); }; - Modal.prototype.submitBtn = function () { - return document.getElementById("modal-submitBtn"); + CreateOverlayModal.prototype.submitBtn = function () { + return document.getElementById("createOverlay-submitBtn"); }; - Modal.prototype.radiusContainer = function () { + CreateOverlayModal.prototype.radiusContainer = function () { return document.getElementById("radius-container"); }; - Modal.prototype.nameField = function () { + CreateOverlayModal.prototype.nameField = function () { var _a, _b; - return (_b = (_a = document.getElementById("modal-name")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; + return (_b = (_a = document.getElementById("createOverlay-name")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; }; - Modal.prototype.descField = function () { + CreateOverlayModal.prototype.descField = function () { var _a, _b; - return (_b = (_a = document.getElementById("modal-desc")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; + return (_b = (_a = document.getElementById("createOverlay-desc")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; }; - Modal.prototype.radiusField = function () { + CreateOverlayModal.prototype.radiusField = function () { var _a, _b; - return (_b = (_a = document.getElementById("modal-radius")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; + return (_b = (_a = document.getElementById("createOverlay-radius")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; }; - Modal.prototype.visible = function () { + CreateOverlayModal.prototype.visible = function () { var _a; return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) != "none"; }; - Modal.prototype.setVisible = function (v) { + CreateOverlayModal.prototype.setVisible = function (v) { var modal = this.self(); if (modal) { modal.style.display = v ? "block" : "none"; } }; - Modal.prototype.setState = function (state, args) { + CreateOverlayModal.prototype.setState = function (state, args) { var _this = this; var title = this.title(); + var radiusContainer = _this.radiusContainer(); + var radius = _this.radiusField(); + var name = _this.nameField(); + var desc = _this.descField(); + var submitBtn = _this.submitBtn(); switch (state) { case OverlayType.POINT: if (title) { title.innerHTML = "Add Marker"; } - fetch("/static/pointModal.html") - .then(function (r) { return r.text(); }) - .then(function (t) { - var content = _this.content(); - if (content) { - content.innerHTML = t; - } - var submitBtn = _this.submitBtn(); - if (submitBtn) { - submitBtn.onclick = function () { - var name = _this.nameField(); - var desc = _this.descField(); - var point = new Marker(name, desc, args.latlng, { title: name, alt: name }); - point.add(args.map); - args.overlays.markers.push(point); - _this.setVisible(false); - }; - } - }); + if (submitBtn) { + submitBtn.onclick = function () { + var point = new Marker(name, desc, args.latlng, { title: name, alt: name }); + point.add(args.map); + args.overlays.markers.push(point); + _this.setVisible(false); + }; + } break; case OverlayType.CIRCLE: if (title) { title.innerHTML = "Add Circle"; } - fetch("/static/pointModal.html") - .then(function (r) { return r.text(); }) - .then(function (t) { - var content = _this.content(); - if (content) { - content.innerHTML = t; - } - var radiusContainer = _this.radiusContainer(); - if (radiusContainer) { - radiusContainer.style.display = "block"; - } - var submitBtn = _this.submitBtn(); - if (submitBtn) { - submitBtn.onclick = function () { - var name = _this.nameField(); - var desc = _this.descField(); - var radius = _this.radiusField(); - var circle = new Circle(name, desc, args.latlng, { radius: Number(radius) }); - circle.add(args.map); - args.overlays.circles.push(circle); - _this.setVisible(false); - }; - } - }); + if (radiusContainer) { + radiusContainer.style.display = "block"; + } + if (submitBtn) { + submitBtn.onclick = function () { + var circle = new Circle(name, desc, args.latlng, { radius: Number(radius) || 500 }); + circle.add(args.map); + args.overlays.circles.push(circle); + _this.setVisible(false); + }; + } break; case OverlayType.POLYGON: break; } }; - return Modal; + return CreateOverlayModal; }()); -var MapHandlers = /** @class */ (function () { - function MapHandlers() { +var MapHandler = /** @class */ (function () { + function MapHandler(map, overlays, layers) { + this.map = map; + this.overlays = overlays; + this.layers = layers; } - return MapHandlers; + return MapHandler; }()); function init() { var _a;@@ -289,56 +273,71 @@ var overlays = (_a = OverlayState.load()) !== null && _a !== void 0 ? _a : new OverlayState();
var map = L.map('map').setView([35.6653, -105.9507], 13); var streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: '© OpenStreetMap' + attribution: "street map tiles © OpenStreetMap" })); var satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 19, - attribution: "© Esri" + attribution: "satellite tiles © Esri" })); TileLayerWrapper.enableOnly(streetLayer, map); overlays.markers.forEach(function (m) { return m.add(map); }); overlays.circles.forEach(function (m) { return m.add(map); }); overlays.polygons.forEach(function (m) { return m.add(map); }); - var modal = new Modal(); + var createOverlayModal = new CreateOverlayModal(); + var closeAllModals = function () { + createOverlayModal.setVisible(false); + }; var resetMapClick = function () { try { + var addPointBtn = document.getElementById("addPoint-btn"); + if (addPointBtn) { + addPointBtn.classList.remove("activeBtn"); + } map.off("click", addMarkerHandler); } catch (_a) { } try { + var addCircleBtn_1 = document.getElementById("addCircle-btn"); + if (addCircleBtn_1) { + addCircleBtn_1.classList.remove("activeBtn"); + } map.off("click", addCircleHandler); } catch (_b) { } }; var addMarkerHandler = function (e) { - modal.setVisible(true); - modal.setState(OverlayType.POINT, { + createOverlayModal.setVisible(true); + createOverlayModal.setState(OverlayType.POINT, { latlng: e.latlng, map: map, overlays: overlays }); - map.off("click", addMarkerHandler); + resetMapClick(); }; var addCircleHandler = function (e) { - modal.setVisible(true); - modal.setState(OverlayType.CIRCLE, { + createOverlayModal.setVisible(true); + createOverlayModal.setState(OverlayType.CIRCLE, { latlng: e.latlng, map: map, overlays: overlays }); - map.off("click", addCircleHandler); + resetMapClick(); }; var addMarkerBtn = document.getElementById("addPoint-btn"); if (addMarkerBtn) { addMarkerBtn.onclick = function (e) { + closeAllModals(); resetMapClick(); + addMarkerBtn.classList.add("activeBtn"); map.on("click", addMarkerHandler); }; } var addCircleBtn = document.getElementById("addCircle-btn"); if (addCircleBtn) { addCircleBtn.onclick = function (e) { + closeAllModals(); resetMapClick(); + addCircleBtn.classList.add("activeBtn"); map.on("click", addCircleHandler); }; }@@ -364,6 +363,10 @@ else {
TileLayerWrapper.enableOnly(satelliteLayer, map); } }; + } + var main = document.getElementById("app-container"); + if (main) { + main.style.display = "initial"; } } init();
D
static/pointModal.html
@@ -1,9 +0,0 @@
-<label for="modal-name">Name</label><br/> -<input type="text" id="modal-name"><br/> -<label for="modal-desc">Description</label><br/> -<textarea id="modal-desc"></textarea><br/> -<div id="radius-container"> -<label for="modal-radius">Radius (meters)</label><br/> -<input type="number" step="1" id="modal-radius" value="500"><br/> -</div> -<button id="modal-submitBtn">Add</button>
M
static/style.css
→
static/style.css
@@ -13,40 +13,74 @@ }
body { align: center; + position: relative; +} + +#noscript-container { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + box-sizing: border-box; + background: black; + z-index: 999; + text-align: center; + color: #c9c9c9; + line-height: 150%; + font-size: 2vw; + padding-top: calc(50vh - 5vw); +} + +#noscript-container a { + color: #1f9b92; +} + +#noscript-container a:hover { + color: white; } #mapControls { - position: relative; + position: fixed; width: 100vw; + bottom: 0; background: black; - height: 2em; padding: 0; box-sizing: border-box; z-index: 3; +} + +#mapControls button { + color: #1fb9b2; + border: none; + background: black; + font-size: 5vh; + padding-left: 0.5ch; + padding-right: 0.5ch; + border-bottom: solid 0.1em black; +} + +#mapControls button.activeBtn, #mapControls button:hover { + color: white; + border-bottom: solid 0.1em #1f9b92; } #subControls { backgorund: transparent; float: right; - height: 2em; padding: 0; box-sizing: border-box; -} - -#mapControls button { - margin-top: 0.25em; - margin-bottom: 0.25em; } #map { display: block; position: relative; - height: calc(100vh - 2.5em); + height: 100vh; width: 100vw; z-index: 1; } -#modal-container { +#createOverlay-container { background: #000000; color: #c9c9c9; position: fixed;@@ -56,37 +90,46 @@ top: 50%;
left: 50%; transform: translate3d(-50%, -50%, 0); height: auto; - max-height: calc(100vh - 2.5em); + max-height: 100vh; + overflow: auto; z-index: 4; text-align: left; display: none; } -#modal-container h2 { - text-align: center; +.modalHeader { + position: sticky; + top: 0; + width: 100%; + height: auto; +} + +#createOverlay-container h2 { + text-align: left; font-size: 200%; font-wieght: normal; text-transform: uppercase; line-height: 2em; + margin-left: 1em; } -#modal-content { +#createOverlay-content { margin: 2em; text-align: right; } -#modal-content label{ +#createOverlay-content label{ display: block; float: left; text-transform: uppercase; color: white; } -#modal-content #radius-container { +#createOverlay-content #radius-container { display: none; } -#modal-content input[type="text"], #modal-content textarea, #modal-content input[type="number"] { +#createOverlay-content input[type="text"], #createOverlay-content textarea, #createOverlay-content input[type="number"] { display: block; width: 100%; font-size: 150%;@@ -100,13 +143,13 @@ background: #222222;
} -#modal-content textarea { +#createOverlay-content textarea { resize: none; height: 8em; } -#modal-content input[type="number"] { +#createOverlay-content input[type="number"] { width: 12ch; text-align: right; }@@ -126,7 +169,7 @@ button.closeBtn:hover {
color: crimson; } -button#modal-submitBtn { +button#createOverlay-submitBtn { font-size: 150%; background: transparent;; color: white;@@ -137,13 +180,13 @@ padding: 0.25em;
text-transform: uppercase; } -button#modal-submitBtn:hover { +button#createOverlay-submitBtn:hover { background: white; color: black; border: solid 2px white; } -#cancel-container, #confirm-container { +#cancel-container, #confirm-container, #info-container { position: fixed; font-size: 200%; bottom: 1.5em;