backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 01:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(hierarchy tree): buttons style

Browse source
This commit is contained in:
Azgaar 2022-06-09 23:47:39 +03:00
parent 127eafb656
commit b9a578e0be
1 changed files with 46 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

50
modules/dynamic/editors/religions-editor.js
View file

@ -9,6 +9,7 @@ export function open() {
if (layerIsOn("toggleCultures")) toggleReligions();
if (layerIsOn("toggleProvinces")) toggleProvinces();
appendStyleSheet();
refreshReligionsEditor();
drawReligionCenters();
@ -21,6 +22,38 @@ export function open() {
$body.focus();
}
function appendStyleSheet() {
const styles = /* css */ `
#religionSelectedOrigins > button {
margin: 0 4px;
}
.religionSelectedButton {
border: 1px solid #aaa;
background: none;
padding: 1px 2px;
}
.religionSelectedButton:hover {
border: 1px solid #333;
}
.religionSelectedOrigin::after {
content: "✕";
margin-left: 8px;
color: #999;
}
.religionSelectedOrigin:hover:after {
color: #333;
}
`;
const style = document.createElement("style");
style.appendChild(document.createTextNode(styles));
document.head.appendChild(style);
}
function insertEditorHtml() {
const editorHtml = /* html */ `<div id="religionsEditor" class="dialog stable">
<div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em">
@ -587,8 +620,9 @@ function showHierarchy() {
<div id='religionSelected' style="display: none">
<span><span id='religionSelectedName'></span>. </span>
<span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
<span id='religionSelectedOrigins'></span>
<button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
<span>Origins: <span id='religionSelectedOrigins'></span></span>
<button data-tip='Add origin' class="religionSelectedButton" id='religionSelectedAdd'>Add</button>
<button data-tip='Exit edit mode' class="religionSelectedButton" id='religionSelectedClose'>Exit</button>
</div>
</div>
</div>`;
@ -713,13 +747,13 @@ function showHierarchy() {
function religionSelect(d) {
d3.event.stopPropagation();
const religion = d.data;
nodes.selectAll("g").style("outline", "none");
this.style.outline = "1px solid #c13119";
byId("religionSelected").style.display = "block";
byId("religionInfo").style.display = "none";
const religion = d.data;
byId("religionSelectedName").innerText = religion.name;
byId("religionSelectedCode").value = religion.code;
@ -736,7 +770,7 @@ function showHierarchy() {
const {name, code} = validReligions.find(r => r.i === origin) || {};
const type = index ? "Secondary" : "Primary";
const tip = `${type} origin: ${name}. Click to remove link to that origin`;
return `<button data-id="${origin}" class='religionSelectedOrigin' data-tip="${tip}">${code}</button>`;
return `<button data-id="${origin}" class="religionSelectedButton religionSelectedOrigin" data-tip="${tip}">${code}</button>`;
})
.join("");
@ -750,6 +784,14 @@ function showHierarchy() {
rerenderTree();
};
byId("religionSelectedAdd").onclick = () => {
const ancestors = d.ancestors().map(({id}) => Number(id));
const origins = religion.origins;
const selectableReligions = validReligions.filter(({i}) => i && !origins.includes(i) && !ancestors.includes(i));
console.log(selectableReligions);
};
byId("religionSelectedClose").onclick = () => {
this.style.outline = "none";
byId("religionSelected").style.display = "none";