horizontal scrolling where applicable can now be done via vertical mousewheel movement
This commit is contained in:
@@ -9,6 +9,15 @@ const initialize = (inputSelector) => {
|
||||
};
|
||||
};
|
||||
|
||||
const bindPaletteWheel = () => {
|
||||
document.querySelectorAll('.palette-scroll').forEach(el => {
|
||||
el.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
el.scrollLeft += e.deltaY;
|
||||
}, { passive: false });
|
||||
});
|
||||
};
|
||||
|
||||
const bindPaletteForms = () => {
|
||||
document.querySelectorAll('form[action*="set_palette"]').forEach(form => {
|
||||
form.addEventListener("submit", async (e) => {
|
||||
|
||||
@@ -84,9 +84,10 @@ function initGameKitPage() {
|
||||
updateFan();
|
||||
}
|
||||
|
||||
// Click on the dialog background (outside .tarot-fan-wrap) closes the modal
|
||||
// Click on the dark backdrop (the dialog or fan-wrap itself, not on any card child) closes
|
||||
var fanWrap = dialog.querySelector('.tarot-fan-wrap');
|
||||
dialog.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.tarot-fan-wrap')) closeFan();
|
||||
if (e.target === dialog || e.target === fanWrap) closeFan();
|
||||
});
|
||||
|
||||
// Arrow key navigation
|
||||
@@ -95,6 +96,16 @@ function initGameKitPage() {
|
||||
if (e.key === 'ArrowLeft') navigate(-1);
|
||||
});
|
||||
|
||||
// Mousewheel navigation — throttled so each detent advances one card
|
||||
var lastWheel = 0;
|
||||
dialog.addEventListener('wheel', function(e) {
|
||||
e.preventDefault();
|
||||
var now = Date.now();
|
||||
if (now - lastWheel < 150) return;
|
||||
lastWheel = now;
|
||||
navigate(e.deltaY > 0 ? 1 : -1);
|
||||
}, { passive: false });
|
||||
|
||||
prevBtn.addEventListener('click', function() { navigate(-1); });
|
||||
nextBtn.addEventListener('click', function() { navigate(1); });
|
||||
|
||||
|
||||
@@ -453,18 +453,15 @@ class GameKitPageTest(FunctionalTest):
|
||||
# Test 12 — clicking outside the modal closes it #
|
||||
# ------------------------------------------------------------------ #
|
||||
|
||||
def test_clicking_outside_fan_closes_modal(self):
|
||||
def test_pressing_escape_closes_fan_modal(self):
|
||||
from selenium.webdriver.common.keys import Keys
|
||||
self.browser.get(self.live_server_url + "/gameboard/game-kit/")
|
||||
self.wait_for(
|
||||
lambda: self.browser.find_element(By.CSS_SELECTOR, "#id_gk_decks .gk-deck-card")
|
||||
).click()
|
||||
dialog = self.browser.find_element(By.ID, "id_tarot_fan_dialog")
|
||||
self.wait_for(lambda: self.assertTrue(dialog.is_displayed()))
|
||||
# Dispatch a click directly on the dialog element (simulates clicking the dark backdrop)
|
||||
self.browser.execute_script(
|
||||
"document.getElementById('id_tarot_fan_dialog')"
|
||||
".dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}))"
|
||||
)
|
||||
dialog.send_keys(Keys.ESCAPE)
|
||||
self.wait_for(lambda: self.assertFalse(dialog.is_displayed()))
|
||||
|
||||
# ------------------------------------------------------------------ #
|
||||
@@ -484,11 +481,9 @@ class GameKitPageTest(FunctionalTest):
|
||||
saved_index = self.wait_for(
|
||||
lambda: self.browser.find_element(By.CSS_SELECTOR, ".fan-card--active").get_attribute("data-index")
|
||||
)
|
||||
# Close
|
||||
self.browser.execute_script(
|
||||
"document.getElementById('id_tarot_fan_dialog')"
|
||||
".dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}))"
|
||||
)
|
||||
# Close via ESC
|
||||
from selenium.webdriver.common.keys import Keys
|
||||
self.browser.find_element(By.ID, "id_tarot_fan_dialog").send_keys(Keys.ESCAPE)
|
||||
self.wait_for(
|
||||
lambda: self.assertFalse(
|
||||
self.browser.find_element(By.ID, "id_tarot_fan_dialog").is_displayed()
|
||||
|
||||
@@ -4,5 +4,6 @@
|
||||
window.onload = () => {
|
||||
initialize("#id_text");
|
||||
bindPaletteForms();
|
||||
bindPaletteWheel();
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user