client/settings/disable motion: refactor

This commit is contained in:
Adorian Doran
2025-08-23 00:19:26 +03:00
parent d1538508e8
commit 3e3cc8c541
4 changed files with 19 additions and 12 deletions

View File

@@ -1,6 +1,8 @@
import utils from "../../services/utils.js";
import type BasicWidget from "../basic_widget.js";
import { EventData } from "../../components/app_context.js";
import FlexContainer from "./flex_container.js";
import options from "../../services/options.js";
import type BasicWidget from "../basic_widget.js";
import utils from "../../services/utils.js";
/**
* The root container is the top-most widget/container, from which the entire layout derives.
@@ -20,6 +22,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
this.id("root-widget");
this.css("height", "100dvh");
this.originalViewportHeight = getViewportHeight();
}
render(): JQuery<HTMLElement> {
@@ -27,15 +30,27 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
}
this.#setMotion(options.is("motionEnabled"));
return super.render();
}
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("motionEnabled")) {
this.#setMotion(options.is("motionEnabled"));
}
}
#onMobileResize() {
const currentViewportHeight = getViewportHeight();
const isKeyboardOpened = (currentViewportHeight < this.originalViewportHeight);
this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
}
#setMotion(enabled: boolean) {
document.body.classList.toggle("motion-disabled", !enabled);
jQuery.fx.off = !enabled;
}
}
function getViewportHeight() {

View File

@@ -247,7 +247,7 @@ function ElectronIntegration() {
}
function Performance() {
const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled", true);
const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled");
return <OptionsSection title={t("ui-performance.title")}>
<FormGroup name="motion-enabled">

View File

@@ -9,7 +9,7 @@
<link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
<title>Trilium Notes</title>
</head>
<body id="trilium-app" class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %> <%= motionEnabled ? '' : 'motion-disabled' %>">
<body id="trilium-app" class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>">
<noscript><%= t("javascript-required") %></noscript>
<script>
@@ -56,12 +56,5 @@
<script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
<script src="<%= appPath %>/desktop.js" crossorigin type="module"></script>
<script>
// Turn off jQuery animations if motion is disabled
addEventListener("DOMContentLoaded", () => {
jQuery.fx.off = <%= motionEnabled !== true %>;
});
</script>
</body>
</html>

View File

@@ -53,7 +53,6 @@ function index(req: Request, res: Response) {
isDev,
isMainWindow: view === "mobile" ? true : !req.query.extraWindow,
isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(),
motionEnabled: options.motionEnabled === "true",
maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)),
triliumVersion: packageJson.version,
assetPath: assetPath,