Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

"touch mode" improvement

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-11-05 21:57:50 +00:00
parent dcbcdc425a
commit 9413b96c1a
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/TouchButton.vue
View file

@ -1,10 +1,12 @@
<template> <template>
<span>Eingabemodus:&nbsp;</span>
<BulmaButton <BulmaButton
v-bind="$attrs"
:icon=" :icon="
'fa-solid fa-' + 'fa-solid fa-' +
(store.is_touch_device ? 'hand-pointer' : 'arrow-pointer') (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
" "
text="Eingabemodus" :text="store.is_touch_device ? 'Touch' : 'Desktop'"
@click.left="store.toggle_touch_device" @click.left="store.toggle_touch_device"
/> />
</template> </template>

23
ui/src/plugins/store.ts
View file

@ -3,16 +3,23 @@ import { Advent22 } from "@/plugins/advent22";
import { AxiosBasicCredentials } from "axios"; import { AxiosBasicCredentials } from "axios";
import { acceptHMRUpdate, defineStore } from "pinia"; import { acceptHMRUpdate, defineStore } from "pinia";
const check_touch_device = () => window.matchMedia("(any-hover: none)").matches; declare global {
const empty_creds = () => ["", ""] as Credentials; interface Navigator {
readonly msMaxTouchPoints: number;
}
}
export const advent22Store = defineStore({ export const advent22Store = defineStore({
id: "advent22", id: "advent22",
state: () => ({ state: () => ({
advent22: {} as Advent22, advent22: {} as Advent22,
api_creds: empty_creds(), api_creds: ["", ""] as Credentials,
is_touch_device: check_touch_device(), is_touch_device:
window.matchMedia("(any-hover: none)").matches ||
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0,
is_admin: false, is_admin: false,
site_config: { site_config: {
title: document.title, title: document.title,
@ -70,7 +77,7 @@ export const advent22Store = defineStore({
.catch(advent22.alert_user_error); .catch(advent22.alert_user_error);
}, },
login(creds: Credentials = empty_creds()): Promise<boolean> { login(creds: Credentials): Promise<boolean> {
this.api_creds = creds; this.api_creds = creds;
return new Promise<boolean>((resolve, reject) => { return new Promise<boolean>((resolve, reject) => {
@ -85,11 +92,7 @@ export const advent22Store = defineStore({
}, },
logout(): Promise<boolean> { logout(): Promise<boolean> {
return this.login(); return this.login(["", ""]);
},
set_touch_device(state: boolean = check_touch_device()): void {
this.is_touch_device = state;
}, },
toggle_touch_device(): void { toggle_touch_device(): void {