Refactor "data-enabled" to "data-activated"

This commit is contained in:
redphx 2024-10-13 17:32:38 +07:00
parent d012d96675
commit 49fb8e2818
8 changed files with 49 additions and 43 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -76,21 +76,21 @@
}
/* Touch controller buttons */
div[data-enabled] {
div[data-activated] {
button {
display: none;
}
}
/* Show enabled button */
div[data-enabled='true'] {
/* Show default button */
div[data-activated='false'] {
button:first-of-type {
display: block;
}
}
/* Show enable button */
div[data-enabled='false'] {
/* Show activated button */
div[data-activated='true'] {
button:last-of-type {
display: block;
}

View File

@ -17,7 +17,7 @@ export class MicrophoneAction extends BaseGameBarAction {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const enabled = MicrophoneShortcut.toggle(false);
this.$content.setAttribute('data-enabled', enabled.toString());
this.$content.dataset.activated = enabled.toString();
};
const $btnDefault = createButton({
@ -34,8 +34,8 @@ export class MicrophoneAction extends BaseGameBarAction {
});
this.$content = CE('div', {},
$btnDefault,
$btnMuted,
$btnDefault,
);
this.reset();
@ -43,8 +43,7 @@ export class MicrophoneAction extends BaseGameBarAction {
window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
const microphoneState = (e as any).microphoneState;
const enabled = microphoneState === MicrophoneState.ENABLED;
this.$content.setAttribute('data-enabled', enabled.toString());
this.$content.dataset.activated = enabled.toString();
// Show the button in Game Bar if the mic is enabled
this.$content.classList.remove('bx-gone');
@ -58,6 +57,6 @@ export class MicrophoneAction extends BaseGameBarAction {
reset(): void {
this.visible = false;
this.$content.classList.add('bx-gone');
this.$content.setAttribute('data-enabled', 'false');
this.$content.dataset.activated = 'false';
}
}

View File

@ -13,7 +13,8 @@ export class RendererAction extends BaseGameBarAction {
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
this.$content.dataset.enabled = RendererShortcut.toggleVisibility().toString();
const isVisible = RendererShortcut.toggleVisibility();
this.$content.dataset.activated = (!isVisible).toString();
};
const $btnDefault = createButton({
@ -42,6 +43,6 @@ export class RendererAction extends BaseGameBarAction {
}
reset(): void {
this.$content.dataset.enabled = 'true';
this.$content.dataset.activated = 'false';
}
}

View File

@ -40,7 +40,7 @@ export class SpeakerAction extends BaseGameBarAction {
const speakerState = (e as any).speakerState;
const enabled = speakerState === SpeakerState.ENABLED;
this.$content.dataset.enabled = enabled.toString();
this.$content.dataset.activated = (!enabled).toString();
});
}
@ -49,6 +49,6 @@ export class SpeakerAction extends BaseGameBarAction {
}
reset(): void {
this.$content.dataset.enabled = 'true';
this.$content.dataset.activated = 'false';
}
}

View File

@ -14,11 +14,9 @@ export class TouchControlAction extends BaseGameBarAction {
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const $parent = (e as any).target.closest('div[data-enabled]');
let enabled = $parent.getAttribute('data-enabled', 'true') === 'true';
$parent.setAttribute('data-enabled', (!enabled).toString());
TouchController.toggleVisibility(enabled);
const $parent = (e as any).target.closest('div[data-activated]');
const isVisible = TouchController.toggleVisibility();
$parent.dataset.activated = (!isVisible).toString();
};
const $btnEnable = createButton({
@ -49,6 +47,6 @@ export class TouchControlAction extends BaseGameBarAction {
}
reset(): void {
this.$content.setAttribute('data-enabled', 'true');
this.$content.dataset.activated = 'false';
}
}

View File

@ -85,16 +85,24 @@ export class TouchController {
document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.remove('bx-offscreen');
}
/*
static #hide() {
document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.add('bx-offscreen');
}
*/
static toggleVisibility(status: boolean) {
static toggleVisibility(): boolean {
if (!TouchController.#dataChannel) {
return;
return false;
}
status ? TouchController.#hide() : TouchController.#show();
const $container = document.querySelector('#BabylonCanvasContainer-main')?.parentElement;
if (!$container) {
return false;
}
$container.classList.toggle('bx-offscreen');
return !$container.classList.contains('bx-offscreen');
}
static reset() {