diff --git a/index.html b/index.html
index 8b22cef1..322c806b 100644
--- a/index.html
+++ b/index.html
@@ -5358,7 +5358,6 @@
- | Default |
Name |
Population |
Percentile |
@@ -5369,15 +5368,12 @@
Features |
Count |
Active |
+ Default |
-
-
-
-
diff --git a/modules/ui/burg-group-editor.js b/modules/ui/burg-group-editor.js
index cd97a593..15222fa9 100644
--- a/modules/ui/burg-group-editor.js
+++ b/modules/ui/burg-group-editor.js
@@ -9,7 +9,16 @@ function editBurgGroups() {
resizable: false,
position: {my: "center", at: "center", of: "svg"},
buttons: {
- Apply: () => byId("burgGroupsForm").requestSubmit(),
+ Apply: () => {
+ byId("burgGroupsForm").requestSubmit();
+ },
+ Add: () => {
+ byId("burgGroupsBody").innerHTML += createLine({name: "", active: true, preview: null});
+ },
+ Restore: () => {
+ options.burgs.groups = Burgs.getDefaultGroups();
+ addLines();
+ },
Cancel: function () {
$(this).dialog("close");
}
@@ -20,102 +29,91 @@ function editBurgGroups() {
modules.editBurgGroups = true;
// add listeners
- byId("burgGroupsForm").on("submit", submitForm);
- byId("burgGroupsForm").on("change", validateForm);
- byId("burgGroupsEditorAdd").on("click", addGroup);
- byId("burgGroupsEditStyle").on("click", () => editStyle("burgIcons"));
+ byId("burgGroupsForm").on("change", validateForm).on("submit", submitForm);
byId("burgGroupsBody").on("click", ev => {
- const group = ev.target.closest(".states")?.dataset.id;
- if (ev.target.classList.contains("editStyle")) editStyle("burgs", group);
- else if (ev.target.classList.contains("removeGroup")) removeGroup(group);
+ const line = ev.target.closest("tr");
+ if (line && ev.target.classList.contains("removeGroup")) {
+ const lines = byId("burgGroupsBody").children;
+ if (lines.length < 2) return tip("At least one group should be defined", false, "error");
+
+ confirmationDialog({
+ title: this.dataset.tip,
+ message:
+ "Are you sure you want to remove the group?
This WON'T change the burgs unless the changes are applied",
+ confirm: "Remove",
+ onConfirm: () => {
+ line.remove();
+ validateForm();
+ }
+ });
+ }
});
function addLines() {
- byId("burgGroupsBody").innerHTML = "";
-
- const lines = options.burgs.groups.map(group => {
- const count = pack.burgs.filter(burg => !burg.removed && burg.group === group.name).length;
- // prettier-ignore
- return /* html */ `
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- ${count} |
- |
-
`;
- });
-
+ const lines = options.burgs.groups.map(createLine);
byId("burgGroupsBody").innerHTML = lines.join("");
}
- const DEFAULT_GROUPS = ["roads", "trails", "seaburgs"];
-
- function addGroup() {
- prompt("Type group name", {default: "burg-group-new"}, v => {
- let group = v
- .toLowerCase()
- .replace(/ /g, "_")
- .replace(/[^\w\s]/gi, "");
-
- if (!group) return tip("Invalid group name", false, "error");
- if (!group.startsWith("burg-")) group = "burg-" + group;
- if (byId(group)) return tip("Element with this name already exists. Provide a unique name", false, "error");
- if (Number.isFinite(+group.charAt(0))) return tip("Group name should start with a letter", false, "error");
-
- burgs
- .append("g")
- .attr("id", group)
- .attr("stroke", "#000000")
- .attr("stroke-width", 0.5)
- .attr("stroke-dasharray", "1 0.5")
- .attr("stroke-linecap", "butt");
- byId("burgGroup")?.options.add(new Option(group, group));
- addLines();
-
- byId("burgCreatorGroupSelect").options.add(new Option(group, group));
- });
+ function createLine(group) {
+ const count = pack.burgs.filter(burg => !burg.removed && burg.group === group.name).length;
+ // prettier-ignore
+ return /* html */ `
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ ${count} |
+ |
+ |
+ |
+
`;
}
- function removeGroup(group) {
- confirmationDialog({
- title: "Remove burg group",
- message:
- "Are you sure you want to remove the entire burg group? All burgs in this group will be removed.
This action can't be reverted",
- confirm: "Remove",
- onConfirm: () => {
- pack.burgs.filter(r => r.group === group).forEach(Burgs.remove);
- if (!DEFAULT_GROUPS.includes(group)) burgs.select(`#${group}`).remove();
- addLines();
- }
- });
- }
+ function validateForm() {
+ const form = byId("burgGroupsForm");
- function validateForm(event) {
- const form = event.target.form;
+ if (form.name.length) {
+ const names = Array.from(form.name).map(input => input.value);
+ form.name.forEach(nameInput => {
+ const value = nameInput.value;
+ const isUnique = names.filter(n => n === value).length === 1;
+ nameInput.setCustomValidity(isUnique ? "" : "Group name should be unique");
+ nameInput.reportValidity();
+ });
+ }
- const names = Array.from(form.name).map(input => input.value);
- form.name.forEach(nameInput => {
- const value = nameInput.value;
- const isUnique = names.filter(n => n === value).length === 1;
- nameInput.setCustomValidity(isUnique ? "" : "Group name should be unique");
- nameInput.reportValidity();
- });
+ if (form.active.length) {
+ const active = Array.from(form.active).map(input => input.checked);
+ form.active[0].setCustomValidity(active.includes(true) ? "" : "At least one group should be active");
+ form.active[0].reportValidity();
+ } else {
+ const active = form.active.checked;
+ form.active.setCustomValidity(active ? "" : "At least one group should be active");
+ form.active.reportValidity();
+ }
- const active = Array.from(form.active).map(input => input.checked);
- form.active[0].setCustomValidity(active.includes(true) ? "" : "At least one group should be active");
- form.active[0].reportValidity();
+ if (form.isDefault.length) {
+ const checked = Array.from(form.isDefault).map(input => input.checked);
+ form.isDefault[0].setCustomValidity(checked.includes(true) ? "" : "At least one group should be default");
+ form.isDefault[0].reportValidity();
+ } else {
+ const checked = form.isDefault.checked;
+ form.isDefault.setCustomValidity(checked ? "" : "At least one group should be default");
+ form.isDefault.reportValidity();
+ }
}
function submitForm(event) {
event.preventDefault();
+ const lines = Array.from(byId("burgGroupsBody").children);
+ if (!lines.length) return tip("At least one group should be defined", false, "error");
+
function parseInput(input) {
if (input.name === "name") return sanitizeId(input.value);
if (input.type === "radio") return input.checked;
@@ -128,7 +126,6 @@ function editBurgGroups() {
return input.value;
}
- const lines = Array.from(byId("burgGroupsBody").children);
options.burgs.groups = lines.map(line => {
const inputs = line.querySelectorAll("input");
const group = Array.from(inputs).reduce((obj, input) => {
diff --git a/utils/shorthands.js b/utils/shorthands.js
index 043599fc..36e9d09a 100644
--- a/utils/shorthands.js
+++ b/utils/shorthands.js
@@ -2,8 +2,10 @@ const byId = document.getElementById.bind(document);
Node.prototype.on = function (name, fn, options) {
this.addEventListener(name, fn, options);
+ return this;
};
Node.prototype.off = function (name, fn) {
this.removeEventListener(name, fn);
+ return this;
};