marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue with <select multiple> and BxSelect element

Browse Source
This commit is contained in:
redphx 2024-07-19 21:10:28 +07:00
parent 6a8eecab06
commit 7db004ede3
3 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dist/better-xcloud.user.js vendored
View File

@ -1,7 +1,7 @@
// ==UserScript==
// @name Better xCloud
// @namespace https://github.com/redphx
// @version 5.4.1
// @version 5.4.2-beta
// @description Improve Xbox Cloud Gaming (xCloud) experience
// @author redphx
// @license MIT
@ -138,7 +138,7 @@ function deepClone(obj) {
return {};
return JSON.parse(JSON.stringify(obj));
}
var SCRIPT_VERSION = "5.4.1", AppInterface = window.AppInterface;
var SCRIPT_VERSION = "5.4.2-beta", AppInterface = window.AppInterface;
UserAgent.init();
var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.includes("smart-tv") || userAgent.includes("smarttv") || /\baft.*\b/.test(userAgent), isVr = window.navigator.userAgent.includes("VR") && window.navigator.userAgent.includes("OculusBrowser"), browserHasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0, userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport, STATES = {
supportedRegion: !0,
@ -3388,7 +3388,7 @@ class BxSelectElement {
tabindex: 0
}
}), isMultiple = $select.multiple;
let $checkBox, $label, $content;
let $checkBox, $label, visibleIndex = $select.selectedIndex, $content;
if (isMultiple)
$content = CE("button", {
class: "bx-select-value bx-focusable",
@ -3396,15 +3396,18 @@ class BxSelectElement {
}, $checkBox = CE("input", { type: "checkbox" }), $label = CE("span", {}, "")), $content.addEventListener("click", (e) => {
$checkBox.click();
}), $checkBox.addEventListener("input", (e) => {
const $option = getOptionAtIndex($select.selectedIndex);
const $option = getOptionAtIndex(visibleIndex);
$option && ($option.selected = e.target.checked), $select.dispatchEvent(new Event("input"));
});
else
$content = CE("div", {}, $label = CE("label", { for: $select.id + "_checkbox" }, ""));
const getOptionAtIndex = (index) => {
return Array.from($select.querySelectorAll("option"))[index];
}, render = () => {
const visibleIndex = normalizeIndex($select.selectedIndex), $option = getOptionAtIndex(visibleIndex);
}, render = (e) => {
if (e && e.manualTrigger)
visibleIndex = $select.selectedIndex;
visibleIndex = normalizeIndex(visibleIndex);
const $option = getOptionAtIndex(visibleIndex);
let content = "";
if ($option)
if (content = $option.textContent || "", content && $option.parentElement.tagName === "OPTGROUP") {
@ -3422,13 +3425,16 @@ class BxSelectElement {
}, normalizeIndex = (index) => {
return Math.min(Math.max(index, 0), $select.querySelectorAll("option").length - 1);
}, onPrevNext = (e) => {
const goNext = e.target === $btnNext, currentIndex = $select.selectedIndex;
const goNext = e.target === $btnNext, currentIndex = visibleIndex;
let newIndex = goNext ? currentIndex + 1 : currentIndex - 1;
if (newIndex = normalizeIndex(newIndex), !isMultiple && newIndex !== currentIndex)
if (newIndex = normalizeIndex(newIndex), visibleIndex = newIndex, !isMultiple && newIndex !== currentIndex)
$select.selectedIndex = newIndex;
$select.dispatchEvent(new Event("input"));
if (isMultiple)
render();
else
$select.dispatchEvent(new Event("input"));
};
return $select.addEventListener("input", (e) => render()), $btnPrev.addEventListener("click", onPrevNext), $btnNext.addEventListener("click", onPrevNext), new MutationObserver((mutationList, observer2) => {
return $select.addEventListener("input", render), $btnPrev.addEventListener("click", onPrevNext), $btnNext.addEventListener("click", onPrevNext), new MutationObserver((mutationList, observer2) => {
mutationList.forEach((mutation) => {
if (mutation.type === "childList" || mutation.type === "attributes")
render();
@ -4509,7 +4515,8 @@ class ControllerShortcut {
for (button in ControllerShortcut.#$selectActions) {
const $select = ControllerShortcut.#$selectActions[button];
$select.value = actions[button] || "", BxEvent.dispatch($select, "input", {
ignoreOnChange: !0
ignoreOnChange: !0,
manualTrigger: !0
});
}
}

1
src/modules/controller-shortcut.ts
View File

@ -207,6 +207,7 @@ export class ControllerShortcut {
BxEvent.dispatch($select, 'input', {
ignoreOnChange: true,
manualTrigger: true,
});
}
}

22
src/web-components/bx-select.ts
View File

@ -24,6 +24,7 @@ export class BxSelectElement {
const isMultiple = $select.multiple;
let $checkBox: HTMLInputElement;
let $label: HTMLElement;
let visibleIndex = $select.selectedIndex;
let $content;
@ -41,7 +42,7 @@ export class BxSelectElement {
});
$checkBox.addEventListener('input', e => {
const $option = getOptionAtIndex($select.selectedIndex);
const $option = getOptionAtIndex(visibleIndex);
$option && ($option.selected = (e.target as HTMLInputElement).checked);
$select.dispatchEvent(new Event('input'));
@ -57,11 +58,13 @@ export class BxSelectElement {
return options[index];
}
const render = () => {
const render = (e?: Event) => {
// console.log('options', this.options, 'selectedIndices', this.selectedIndices, 'selectedOptions', this.selectedOptions);
if (e && (e as any).manualTrigger) {
visibleIndex = $select.selectedIndex;
}
const visibleIndex = normalizeIndex($select.selectedIndex);
visibleIndex = normalizeIndex(visibleIndex);
const $option = getOptionAtIndex(visibleIndex);
let content = '';
if ($option) {
@ -107,18 +110,23 @@ export class BxSelectElement {
const onPrevNext = (e: Event) => {
const goNext = e.target === $btnNext;
const currentIndex = $select.selectedIndex;
const currentIndex = visibleIndex;
let newIndex = goNext ? currentIndex + 1 : currentIndex - 1;
newIndex = normalizeIndex(newIndex);
visibleIndex = newIndex;
if (!isMultiple && newIndex !== currentIndex) {
$select.selectedIndex = newIndex;
}
$select.dispatchEvent(new Event('input'));
if (isMultiple) {
render();
} else {
$select.dispatchEvent(new Event('input'));
}
};
$select.addEventListener('input', e => render());
$select.addEventListener('input', render);
$btnPrev.addEventListener('click', onPrevNext);
$btnNext.addEventListener('click', onPrevNext);