endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

resolve comments on PR #187

Browse source
This commit is contained in:
fin444 2022-08-03 10:45:29 -07:00
parent 1fe52dfca3
commit 1319a92864
1 changed files with 5 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
js/atree.js
View file

@ -1028,29 +1028,24 @@ function render_AT(UI_elem, list_elem, tree) {
// listeners differ between mobile and desktop since hovering is a bit fucky on mobile // listeners differ between mobile and desktop since hovering is a bit fucky on mobile
if (!isMobile) { // desktop if (!isMobile) { // desktop
hitbox.addEventListener('click', function(e) { hitbox.addEventListener('click', function(e) {
if (e.target !== this) {return;}
atree_set_state(node_wrap, !node_wrap.active); atree_set_state(node_wrap, !node_wrap.active);
atree_state_node.mark_dirty().update(); atree_state_node.mark_dirty().update();
}); });
// add tooltip // add tooltip
hitbox.addEventListener('mouseover', function(e) { hitbox.addEventListener('mouseover', function(e) {
if (e.target !== this) {return;}
if (node_wrap.tooltip_elem) { if (node_wrap.tooltip_elem) {
node_wrap.tooltip_elem.remove(); node_wrap.tooltip_elem.remove();
delete node_wrap.tooltip_elem; delete node_wrap.tooltip_elem;
} }
node_wrap.tooltip_elem = make_elem("div", ["rounded-bottom", "dark-4", "border", "mx-2", "my-4", "dark-shadow", "text-start"], {"style": "position: absolute; z-index: 100;"}); node_wrap.tooltip_elem = make_elem("div", ["rounded-bottom", "dark-4", "border", "mx-2", "my-4", "dark-shadow", "text-start"],
node_wrap.tooltip_elem.style.top = (node_elem.getBoundingClientRect().top + window.pageYOffset + 50) + "px"; {style: "position: absolute; z-index: 100; top: " + (node_elem.getBoundingClientRect().top + window.pageYOffset + 50) + "px; left: " + UI_elem.getBoundingClientRect().left + "px; width: " + UI_elem.getBoundingClientRect().width * 0.95 + "px;"});
node_wrap.tooltip_elem.style.left = UI_elem.getBoundingClientRect().left + "px";
node_wrap.tooltip_elem.style.width = UI_elem.getBoundingClientRect().width * 0.95 + "px";
generateTooltip(node_wrap.tooltip_elem, node_elem, ability, atree_map); generateTooltip(node_wrap.tooltip_elem, node_elem, ability, atree_map);
UI_elem.appendChild(node_wrap.tooltip_elem); UI_elem.appendChild(node_wrap.tooltip_elem);
}); });
hitbox.addEventListener('mouseout', function(e) { hitbox.addEventListener('mouseout', function(e) {
if (e.target !== this) {return;}
if (node_wrap.tooltip_elem) { if (node_wrap.tooltip_elem) {
node_wrap.tooltip_elem.remove(); node_wrap.tooltip_elem.remove();
delete node_wrap.tooltip_elem; delete node_wrap.tooltip_elem;
@ -1059,17 +1054,16 @@ function render_AT(UI_elem, list_elem, tree) {
} else { // mobile } else { // mobile
// tap to toggle // tap to toggle
// long press to make a popup with the tooltip and a button to turn off/on // long press to make a popup with the tooltip and a button to turn off/on
var touchTimer = null; let touchTimer = null;
var didLongPress = false; let didLongPress = false;
hitbox.addEventListener("touchstart", function(e) { hitbox.addEventListener("touchstart", function(e) {
if (e.target !== this) {return;}
clearTimeout(touchTimer); clearTimeout(touchTimer);
touchTimer = setTimeout(function() { touchTimer = setTimeout(function() {
let popup = make_elem("div", [], {style: "position: fixed; z-index: 10000; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); padding-top: 10vh; padding-left: 2.5vw; user-select: none;"}); let popup = make_elem("div", [], {style: "position: fixed; z-index: 10000; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); padding-top: 10vh; padding-left: 2.5vw; user-select: none;"});
popup.addEventListener("click", function(e) { popup.addEventListener("click", function(e) {
// close popup if the background is clicked // close popup if the background is clicked
if (e.target !== this || e.target == this.children[0]) {return;} if (e.target !== this) {return;} // e.target is the lowest element that was the target of the event
popup.remove(); popup.remove();
}); });
@ -1079,7 +1073,6 @@ function render_AT(UI_elem, list_elem, tree) {
let toggleButton = make_elem("button", ["scaled-font", "disable-select"], {innerHTML: (node_wrap.active ? "Unselect Ability" : "Select Ability"), style: "width: 95vw; height: 8vh; margin-top: 2vh; text-align: center;"}); let toggleButton = make_elem("button", ["scaled-font", "disable-select"], {innerHTML: (node_wrap.active ? "Unselect Ability" : "Select Ability"), style: "width: 95vw; height: 8vh; margin-top: 2vh; text-align: center;"});
toggleButton.addEventListener("click", function(e) { toggleButton.addEventListener("click", function(e) {
if (e.target !== this) {return;}
atree_set_state(node_wrap, !node_wrap.active); atree_set_state(node_wrap, !node_wrap.active);
atree_state_node.mark_dirty().update(); atree_state_node.mark_dirty().update();
popup.remove(); popup.remove();
@ -1093,7 +1086,6 @@ function render_AT(UI_elem, list_elem, tree) {
}, 500); }, 500);
}); });
hitbox.addEventListener("touchend", function(e) { hitbox.addEventListener("touchend", function(e) {
if (e.target !== this) {return;}
if (!didLongPress) { if (!didLongPress) {
clearTimeout(touchTimer); clearTimeout(touchTimer);
touchTimer = null; touchTimer = null;