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

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() {