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 = () => {
|
const bindPaletteForms = () => {
|
||||||
document.querySelectorAll('form[action*="set_palette"]').forEach(form => {
|
document.querySelectorAll('form[action*="set_palette"]').forEach(form => {
|
||||||
form.addEventListener("submit", async (e) => {
|
form.addEventListener("submit", async (e) => {
|
||||||
|
|||||||
@@ -84,9 +84,10 @@ function initGameKitPage() {
|
|||||||
updateFan();
|
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) {
|
dialog.addEventListener('click', function(e) {
|
||||||
if (!e.target.closest('.tarot-fan-wrap')) closeFan();
|
if (e.target === dialog || e.target === fanWrap) closeFan();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Arrow key navigation
|
// Arrow key navigation
|
||||||
@@ -95,6 +96,16 @@ function initGameKitPage() {
|
|||||||
if (e.key === 'ArrowLeft') navigate(-1);
|
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); });
|
prevBtn.addEventListener('click', function() { navigate(-1); });
|
||||||
nextBtn.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 #
|
# 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.browser.get(self.live_server_url + "/gameboard/game-kit/")
|
||||||
self.wait_for(
|
self.wait_for(
|
||||||
lambda: self.browser.find_element(By.CSS_SELECTOR, "#id_gk_decks .gk-deck-card")
|
lambda: self.browser.find_element(By.CSS_SELECTOR, "#id_gk_decks .gk-deck-card")
|
||||||
).click()
|
).click()
|
||||||
dialog = self.browser.find_element(By.ID, "id_tarot_fan_dialog")
|
dialog = self.browser.find_element(By.ID, "id_tarot_fan_dialog")
|
||||||
self.wait_for(lambda: self.assertTrue(dialog.is_displayed()))
|
self.wait_for(lambda: self.assertTrue(dialog.is_displayed()))
|
||||||
# Dispatch a click directly on the dialog element (simulates clicking the dark backdrop)
|
dialog.send_keys(Keys.ESCAPE)
|
||||||
self.browser.execute_script(
|
|
||||||
"document.getElementById('id_tarot_fan_dialog')"
|
|
||||||
".dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}))"
|
|
||||||
)
|
|
||||||
self.wait_for(lambda: self.assertFalse(dialog.is_displayed()))
|
self.wait_for(lambda: self.assertFalse(dialog.is_displayed()))
|
||||||
|
|
||||||
# ------------------------------------------------------------------ #
|
# ------------------------------------------------------------------ #
|
||||||
@@ -484,11 +481,9 @@ class GameKitPageTest(FunctionalTest):
|
|||||||
saved_index = self.wait_for(
|
saved_index = self.wait_for(
|
||||||
lambda: self.browser.find_element(By.CSS_SELECTOR, ".fan-card--active").get_attribute("data-index")
|
lambda: self.browser.find_element(By.CSS_SELECTOR, ".fan-card--active").get_attribute("data-index")
|
||||||
)
|
)
|
||||||
# Close
|
# Close via ESC
|
||||||
self.browser.execute_script(
|
from selenium.webdriver.common.keys import Keys
|
||||||
"document.getElementById('id_tarot_fan_dialog')"
|
self.browser.find_element(By.ID, "id_tarot_fan_dialog").send_keys(Keys.ESCAPE)
|
||||||
".dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}))"
|
|
||||||
)
|
|
||||||
self.wait_for(
|
self.wait_for(
|
||||||
lambda: self.assertFalse(
|
lambda: self.assertFalse(
|
||||||
self.browser.find_element(By.ID, "id_tarot_fan_dialog").is_displayed()
|
self.browser.find_element(By.ID, "id_tarot_fan_dialog").is_displayed()
|
||||||
|
|||||||
@@ -4,5 +4,6 @@
|
|||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
initialize("#id_text");
|
initialize("#id_text");
|
||||||
bindPaletteForms();
|
bindPaletteForms();
|
||||||
|
bindPaletteWheel();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user