vikarti.anatra/bondage-college-mirr
1
0
Fork 0
mirror of https://gitgud.io/BondageProjects/Bondage-College.git synced 2025-04-09 18:09:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'craft-dom' into 'master'

Browse source 
MAINT: Use DOM lists for the crafting component of button tooltips

See merge request
This commit is contained in:
BondageProjects 2025-03-31 00:02:09 +00:00
commit d57ed35554
4 changed files with 65 additions and 37 deletions

3
BondageClub/CSS/button.css
View file

@ -57,6 +57,9 @@
}
.button-tooltip-craft {
list-style-type: none;
padding: unset;
margin: unset;
padding-left: 1em;
}

6
BondageClub/CSS/dialog.css
View file

@ -222,6 +222,12 @@
"dialog-crafted-footer dialog-crafted-footer dialog-crafted-footer dialog-crafted-footer" minmax(auto, min-content) / auto var(--gap) min(100%, calc(0.8 * var(--button-height))) var(--scrollbar-gutter)
}
#dialog-crafted ul {
padding: unset;
margin: unset;
list-style-type: none;
}
.dialog-crafted-info {
font: inherit;
overflow-wrap: break-word;

31
BondageClub/Scripts/Dialog.js
View file

@ -4066,6 +4066,7 @@ class _DialogCraftedMenu extends _DialogFocusMenu {
const ids = this.ids;
return document.getElementById(ids.root) ?? ElementCreate({
tag: "div",
attributes: { "aria-owns": ids.icon },
children: [
{
tag: "span",
@ -4073,23 +4074,33 @@ class _DialogCraftedMenu extends _DialogFocusMenu {
classList: ["dialog-status", "scroll-box"],
},
{
tag: "div",
tag: "ul",
attributes: { id: ids.info, "aria-labelledby": ids.status },
children: [
{ tag: "span", attributes: { id: ids.name }, classList: [ids.info] },
{ tag: "span", attributes: { id: ids.crafter }, classList: [ids.info] },
{ tag: "span", attributes: { id: ids.property }, classList: [ids.info] },
{ tag: "span", attributes: { id: ids.private }, classList: [ids.info] },
{ tag: "div", attributes: { id: ids.gap } },
{ tag: "div", classList: ["button", "blank-button", "button-styling", "dialog-grid-button", "dialog-icon"], attributes: { id: ids.icon } },
{ tag: "li", attributes: { id: ids.name }, classList: [ids.info] },
{ tag: "li", attributes: { id: ids.crafter }, classList: [ids.info] },
{ tag: "li", attributes: { id: ids.property }, classList: [ids.info] },
{ tag: "li", attributes: { id: ids.private }, classList: [ids.info] },
{ tag: "div", attributes: { id: ids.gap, "aria-hidden": "true" } },
{
tag: "div",
classList: ["button", "blank-button", "button-styling", "dialog-grid-button", "dialog-icon"],
attributes: { id: ids.icon, role: "img", "aria-labelledby": `${ids.icon}-label` },
},
{
tag: "li",
attributes: { id: ids.footer },
classList: [ids.info, "scroll-box"],
children: [
{ tag: "span", attributes: { id: ids.description } },
],
},
{
tag: "ul",
children: [
{ tag: "li", attributes: { id: ids.description } },
],
},
]
}
],
},
],

62
BondageClub/Scripts/Element.js
View file

@ -1110,7 +1110,7 @@ var ElementButton = {
* Parse the passed icon list, returning its corresponding `<img>` grid and tooltip if non-empty
* @param {string} id - The ID of the parent element
* @param {readonly (InventoryIcon | ElementButton.CustomIcon)[]} [icons] - The (optional) list of icons
* @returns {null | { iconGrid: HTMLDivElement, tooltip: [string, HTMLElement, HTMLElement] }} - `null` if the provided icon list is empty and otherwise an object containing the icon grid and a icon-specific tooltip
* @returns {null | { iconGrid: HTMLDivElement, tooltip: [string, HTMLElement] }} - `null` if the provided icon list is empty and otherwise an object containing the icon grid and a icon-specific tooltip
*/
_ParseIcons: function _ParseIcons(id, icons) {
icons = icons?.filter(i => i != null);
@ -1178,7 +1178,7 @@ var ElementButton = {
parent: iconGrid,
});
});
return { iconGrid, tooltip: [InterfaceTextGet("StatusAndEffects"), ElementCreate({ tag: "br" }), tooltip] };
return { iconGrid, tooltip: [InterfaceTextGet("StatusAndEffects"), tooltip] };
},
/**
@ -1394,32 +1394,40 @@ var ElementButton = {
children: [InterfaceTextGet("DialogMenuCrafting") + ":"],
},
{
tag: "div",
tag: "ul",
classList: ["button-tooltip-craft"],
children: [
...(item.Craft.Property ? [
InterfaceTextGet("CraftingProperty").replace("CraftProperty", ""),
{ tag: "q", children: [
{ tag: "dfn", children: [item.Craft.Property] },
" - ",
]},
{ tag: "br" },
] : []),
...((item.Craft.MemberName && item.Craft.MemberNumber) ? [
InterfaceTextGet("CraftingMember").replace("MemberName (MemberNumber)", ""),
{ tag: "q", children: [`${item.Craft.MemberName} (${item.Craft.MemberNumber})`] },
{ tag: "br" },
] : []),
...([
InterfaceTextGet("CraftingPrivate").replace("CraftPrivate", ""),
{ tag: "q", children: [CommonCapitalize(item.Craft.Private.toString())] },
{ tag: "br" },
]),
...(item.Craft.Description ? [
InterfaceTextGet("CraftingDescription").replace("CraftDescription", ""),
{ tag: "q", children: CraftingDescription.DecodeToHTML(item.Craft.Description) },
{ tag: "br" },
] : []),
item.Craft.Property ? {
tag: "li",
children: [
InterfaceTextGet("CraftingProperty").replace("CraftProperty", ""),
{
tag: "q",
children: [{ tag: "dfn", children: [item.Craft.Property] }, " - "],
},
],
} : undefined,
(item.Craft.MemberName && item.Craft.MemberNumber) ? {
tag: "li",
children: [
InterfaceTextGet("CraftingMember").replace("MemberName (MemberNumber)", ""),
{ tag: "q", children: [`${item.Craft.MemberName} (${item.Craft.MemberNumber})`] },
],
} : undefined,
{
tag: "li",
children: [
InterfaceTextGet("CraftingPrivate").replace("CraftPrivate", ""),
{ tag: "q", children: [CommonCapitalize(item.Craft.Private.toString())] },
],
},
item.Craft.Description ? {
tag: "li",
children: [
InterfaceTextGet("CraftingDescription").replace("CraftDescription", ""),
{ tag: "q", children: CraftingDescription.DecodeToHTML(item.Craft.Description) },
],
} : undefined,
],
},
]);
@ -1520,7 +1528,7 @@ var ElementButton = {
if (iconGrid && !button.contains(iconGrid)) {
button.append(iconGrid);
}
if (tooltip[2] && !button.contains(tooltip[2])) {
if (tooltip[1] && !button.contains(tooltip[1])) {
button.querySelector(".button-tooltip")?.append(...tooltip);
}
return true;