Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Intermediate refactoring

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-20 15:59:48 +02:00
parent 93db813cfc
commit 069cddf034
103 changed files with 7950 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

129
UI/AddButton.js Normal file
View file

@ -0,0 +1,129 @@
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AddButton = void 0;
var UIEventSource_1 = require("./UIEventSource");
var UIElement_1 = require("./UIElement");
var AddButton = /** @class */ (function (_super) {
__extends(AddButton, _super);
function AddButton(basemap, changes, options) {
var _this = _super.call(this, undefined) || this;
_this.curentAddSelection = new UIEventSource_1.UIEventSource("");
_this.SELECTING_POI = "selecting_POI";
_this.PLACING_POI = "placing_POI";
/*State is one of:
* "": the default stated
* "select_POI": show a 'select which POI to add' query (skipped if only one option exists)
* "placing_point": shown while adding a point
* ""
*/
_this.state = new UIEventSource_1.UIEventSource("");
_this.zoomlevel = basemap.Location;
_this.ListenTo(_this.zoomlevel);
_this._options = options;
_this.ListenTo(_this.curentAddSelection);
_this.ListenTo(_this.state);
_this.state.setData(_this.SELECTING_POI);
_this.changes = changes;
var self = _this;
basemap.map.on("click", function (e) {
var location = e.latlng;
console.log("Clicked at ", location);
self.HandleClick(location.lat, location.lng);
});
basemap.map.on("mousemove", function () {
if (self.state.data === self.PLACING_POI) {
var icon = "crosshair";
for (var _i = 0, _a = self._options; _i < _a.length; _i++) {
var option = _a[_i];
if (option.name === self.curentAddSelection.data && option.icon !== undefined) {
icon = 'url("' + option.icon + '") 32 32 ,crosshair';
console.log("Cursor icon: ", icon);
}
}
document.getElementById('leafletDiv').style.cursor = icon;
}
else {
// @ts-ignore
document.getElementById('leafletDiv').style.cursor = '';
}
});
return _this;
}
AddButton.prototype.HandleClick = function (lat, lon) {
this.state.setData(this.SELECTING_POI);
console.log("Handling click", lat, lon, this.curentAddSelection.data);
for (var _i = 0, _a = this._options; _i < _a.length; _i++) {
var option = _a[_i];
if (this.curentAddSelection.data === option.name) {
console.log("PLACING a ", option);
var feature = this.changes.createElement(option.tags, lat, lon);
option.layerToAddTo.AddNewElement(feature);
return;
}
}
};
AddButton.prototype.InnerRender = function () {
if (this.zoomlevel.data.zoom < 19) {
return "Zoom in om een punt toe te voegen";
}
if (this.state.data === this.SELECTING_POI) {
var html = "<form>";
for (var _i = 0, _a = this._options; _i < _a.length; _i++) {
var option = _a[_i];
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
html += "<button type='button' class='addPOIoption' value='" + option.name + "'>Voeg een " + option.name + " toe</button><br/>";
}
html += "</form>";
return html;
}
if (this.state.data === this.PLACING_POI) {
return "<div id='clickOnMapInstruction'>Klik op de kaart om een nieuw punt toe te voegen<div>" +
"<div id='cancelInstruction'>Klik hier om toevoegen te annuleren</div>";
}
if (this.curentAddSelection.data === "") {
return "<span onclick>Voeg een punt toe...</span>";
}
return "Annuleer";
};
AddButton.prototype.InnerUpdate = function (htmlElement) {
var self = this;
htmlElement.onclick = function (event) {
// @ts-ignore
if (event.consumed) {
return;
}
if (self.state.data === self.PLACING_POI) {
self.state.setData(self.SELECTING_POI);
}
};
var buttons = htmlElement.getElementsByClassName('addPOIoption');
var _loop_1 = function (button) {
button.onclick = function (event) {
self.curentAddSelection.setData(button.value);
self.state.setData(self.PLACING_POI);
event.consumed = true;
};
};
// @ts-ignore
for (var _i = 0, buttons_1 = buttons; _i < buttons_1.length; _i++) {
var button = buttons_1[_i];
_loop_1(button);
}
};
return AddButton;
}(UIElement_1.UIElement));
exports.AddButton = AddButton;