Add reduced motion toggle

2025-03-14 02:50:12 +01:00 · 2023-12-10 20:02:25 +02:00 · 2023-12-10 20:02:25 +02:00 · 420d186823
commit 420d186823
parent 13e016f3e5
5 changed files with 71 additions and 27 deletions
--- a/public/index.html
+++ b/public/index.html
@ -2895,6 +2895,10 @@
                    <div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p flexNoGap">
                        <div name="themeToggles">
                            <h4 data-i18n="Theme Toggles">Theme Toggles</h4>
+                            <label for="reduced_motion" class="checkbox_label" title="Disables animations and transitions" data-i18n="[title]Disables animations and transitions">
+                                <input id="reduced_motion" type="checkbox" />
+                                <span data-i18n="Reduced Motion">Reduced Motion</span>
+                            </label>
                            <label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="removes blur from window backgrounds" data-i18n="[title]removes blur from window backgrounds">
                                <input id="fast_ui_mode" type="checkbox" />
                                <span data-i18n="No Blur Effect">No Blur Effect</span>
--- a/public/script.js
+++ b/public/script.js
@ -651,7 +651,8 @@ let create_save = {
 };

 //animation right menu
-export let animation_duration = 125;
+export const ANIMATION_DURATION_DEFAULT = 125;
+export let animation_duration = ANIMATION_DURATION_DEFAULT;
 let animation_easing = 'ease-in-out';
 let popup_type = '';
 let chat_file_for_del = '';
@ -765,6 +766,14 @@ function displayOnlineStatus() {
    }
 }

+/**
+ * Sets the duration of JS animations.
+ * @param {number} ms Duration in milliseconds. Resets to default if null.
+ */
+export function setAnimationDuration(ms = null) {
+    animation_duration = ms ?? ANIMATION_DURATION_DEFAULT;
+}
+
 export function setActiveCharacter(character) {
    active_character = character;
 }
@ -6494,7 +6503,7 @@ function callPopup(text, type, inputValue = '', { okButton, rows, wide, large }
    }
    $('#shadow_popup').transition({
        opacity: 1,
-        duration: 200,
+        duration: animation_duration,
        easing: animation_easing,
    });

@ -7988,10 +7997,10 @@ jQuery(async function () {
        is_advanced_char_open = false;
        $('#character_popup').transition({
            opacity: 0,
-            duration: 200,
+            duration: animation_duration,
            easing: animation_easing,
        });
-        setTimeout(function () { $('#character_popup').css('display', 'none'); }, 200);
+        setTimeout(function () { $('#character_popup').css('display', 'none'); }, animation_duration);
    });

    $('#character_popup_ok').click(function () {
@ -8003,7 +8012,7 @@ jQuery(async function () {
        dialogueCloseStop = false;
        $('#shadow_popup').transition({
            opacity: 0,
-            duration: 200,
+            duration: animation_duration,
            easing: animation_easing,
        });
        setTimeout(function () {
@ -8011,7 +8020,7 @@ jQuery(async function () {
            $('#shadow_popup').css('display', 'none');
            $('#dialogue_popup').removeClass('large_dialogue_popup');
            $('#dialogue_popup').removeClass('wide_dialogue_popup');
-        }, 200);
+        }, animation_duration);

        //      $("#shadow_popup").css("opacity:", 0.0);

@ -8098,14 +8107,14 @@ jQuery(async function () {
        dialogueCloseStop = false;
        $('#shadow_popup').transition({
            opacity: 0,
-            duration: 200,
+            duration: animation_duration,
            easing: animation_easing,
        });
        setTimeout(function () {
            if (dialogueCloseStop) return;
            $('#shadow_popup').css('display', 'none');
            $('#dialogue_popup').removeClass('large_dialogue_popup');
-        }, 200);
+        }, animation_duration);

        //$("#shadow_popup").css("opacity:", 0.0);
        popup_type = '';
@ -8681,10 +8690,10 @@ jQuery(async function () {
    $('#select_chat_cross').click(function () {
        $('#shadow_select_chat_popup').transition({
            opacity: 0,
-            duration: 200,
+            duration: animation_duration,
            easing: animation_easing,
        });
-        setTimeout(function () { $('#shadow_select_chat_popup').css('display', 'none'); }, 200);
+        setTimeout(function () { $('#shadow_select_chat_popup').css('display', 'none'); }, animation_duration);
        //$("#shadow_select_chat_popup").css("display", "none");
        $('#load_select_chat_div').css('display', 'block');
    });
@ -8831,7 +8840,7 @@ jQuery(async function () {
        const elmnt = e.target;
        $(elmnt).transition({
            opacity: 0,
-            duration: 150,
+            duration: animation_duration,
            easing: 'ease-in-out',
        });
        setTimeout(function () {
@ -8840,10 +8849,10 @@ jQuery(async function () {
            $(elmnt).siblings('.extraMesButtons').css('display', 'flex');
            $(elmnt).siblings('.extraMesButtons').transition({
                opacity: 1,
-                duration: 150,
+                duration: animation_duration,
                easing: 'ease-in-out',
            });
-        }, 150);
+        }, animation_duration);
    });

    $(document).on('click', function (e) {
@ -8857,7 +8866,7 @@ jQuery(async function () {
            // Transition out the .extraMesButtons first
            $('.extraMesButtons:visible').transition({
                opacity: 0,
-                duration: 150,
+                duration: animation_duration,
                easing: 'ease-in-out',
                complete: function () {
                    $(this).hide(); // Hide the .extraMesButtons after the transition
@ -8865,7 +8874,7 @@ jQuery(async function () {
                    // Transition the .extraMesButtonsHint back in
                    $('.extraMesButtonsHint:not(:visible)').show().transition({
                        opacity: .3,
-                        duration: 150,
+                        duration: animation_duration,
                        easing: 'ease-in-out',
                        complete: function () {
                            $(this).css('opacity', '');
--- a/public/scripts/authors-note.js
+++ b/public/scripts/authors-note.js
@ -1,4 +1,5 @@
 import {
+    animation_duration,
    chat_metadata,
    eventSource,
    event_types,
@ -325,7 +326,7 @@ function onANMenuItemClick() {
            $('#floatingPrompt').css('opacity', 0.0);
            $('#floatingPrompt').transition({
                opacity: 1.0,
-                duration: 250,
+                duration: animation_duration,
            }, async function () {
                await delay(50);
                $('#floatingPrompt').removeClass('resizing');
@ -343,7 +344,7 @@ function onANMenuItemClick() {
            $('#floatingPrompt').addClass('resizing');
            $('#floatingPrompt').transition({
                opacity: 0.0,
-                duration: 250,
+                duration: animation_duration,
            },
            async function () {
                await delay(50);
@ -351,12 +352,12 @@ function onANMenuItemClick() {
            });
            setTimeout(function () {
                $('#floatingPrompt').hide();
-            }, 250);
+            }, animation_duration);

        }
        //duplicate options menu close handler from script.js
        //because this listener takes priority
-        $('#options').stop().fadeOut(250);
+        $('#options').stop().fadeOut(animation_duration);
    } else {
        toastr.warning('Select a character before trying to use Author\'s Note', '', { timeOut: 2000 });
    }
@ -415,10 +416,10 @@ export function initAuthorsNote() {
    $('#ANClose').on('click', function () {
        $('#floatingPrompt').transition({
            opacity: 0,
-            duration: 200,
+            duration: animation_duration,
            easing: 'ease-in-out',
        });
-        setTimeout(function () { $('#floatingPrompt').hide(); }, 200);
+        setTimeout(function () { $('#floatingPrompt').hide(); }, animation_duration);
    });
    $('#option_toggle_AN').on('click', onANMenuItemClick);

--- a/public/scripts/cfg-scale.js
+++ b/public/scripts/cfg-scale.js
@ -5,6 +5,7 @@ import {
    eventSource,
    event_types,
    saveSettingsDebounced,
+    animation_duration,
 } from '../script.js';
 import { extension_settings, saveMetadataDebounced } from './extensions.js';
 import { selected_group } from './group-chats.js';
@ -120,7 +121,7 @@ function onCfgMenuItemClick() {
            $('#cfgConfig').css('opacity', 0.0);
            $('#cfgConfig').transition({
                opacity: 1.0,
-                duration: 250,
+                duration: animation_duration,
            }, async function () {
                await delay(50);
                $('#cfgConfig').removeClass('resizing');
@ -138,7 +139,7 @@ function onCfgMenuItemClick() {
            $('#cfgConfig').addClass('resizing');
            $('#cfgConfig').transition({
                opacity: 0.0,
-                duration: 250,
+                duration: animation_duration,
            },
            async function () {
                await delay(50);
@ -146,12 +147,12 @@ function onCfgMenuItemClick() {
            });
            setTimeout(function () {
                $('#cfgConfig').hide();
-            }, 250);
+            }, animation_duration);

        }
        //duplicate options menu close handler from script.js
        //because this listener takes priority
-        $('#options').stop().fadeOut(250);
+        $('#options').stop().fadeOut(animation_duration);
    } else {
        toastr.warning('Select a character before trying to configure CFG', '', { timeOut: 2000 });
    }
@ -281,10 +282,10 @@ export function initCfg() {
    $('#CFGClose').on('click', function () {
        $('#cfgConfig').transition({
            opacity: 0,
-            duration: 200,
+            duration: animation_duration,
            easing: 'ease-in-out',
        });
-        setTimeout(function () { $('#cfgConfig').hide(); }, 200);
+        setTimeout(function () { $('#cfgConfig').hide(); }, animation_duration);
    });

    $('#chat_cfg_guidance_scale').on('input', function() {
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@ -19,6 +19,8 @@ import {
    showMoreMessages,
    saveSettings,
    saveChatConditional,
+    setAnimationDuration,
+    ANIMATION_DURATION_DEFAULT,
 } from '../script.js';
 import { isMobile, initMovingUI, favsToHotswap } from './RossAscends-mods.js';
 import {
@ -228,6 +230,7 @@ let power_user = {
    bogus_folders: false,
    aux_field: 'character_version',
    restore_user_input: true,
+    reduced_motion: false,
 };

 let themes = [];
@ -268,6 +271,7 @@ const storage_keys = {
    expand_message_actions: 'ExpandMessageActions',
    enableZenSliders: 'enableZenSliders',
    enableLabMode: 'enableLabMode',
+    reduced_motion: 'reduced_motion',
 };

 const contextControls = [
@ -436,6 +440,15 @@ function switchMessageActions() {
    $('.extraMesButtons, .extraMesButtonsHint').removeAttr('style');
 }

+function switchReducedMotion() {
+    const value = localStorage.getItem(storage_keys.reduced_motion);
+    power_user.reduced_motion = value === null ? false : value == 'true';
+    jQuery.fx.off = power_user.reduced_motion;
+    const overrideDuration = power_user.reduced_motion ? 0 : ANIMATION_DURATION_DEFAULT;
+    setAnimationDuration(overrideDuration);
+    $('#reduced_motion').prop('checked', power_user.reduced_motion);
+}
+
 var originalSliderValues = [];

 async function switchLabMode() {
@ -1227,6 +1240,13 @@ async function applyTheme(name) {
                await printCharacters(true);
            },
        },
+        {
+            key: 'reduced_motion',
+            action: async () => {
+                localStorage.setItem(storage_keys.reduced_motion, String(power_user.reduced_motion));
+                $('#reduced_motion').prop('checked', power_user.reduced_motion);
+            },
+        },
    ];

    for (const { key, selector, type, action } of themeProperties) {
@ -1459,6 +1479,7 @@ function loadPowerUserSettings(settings, data) {
    $('#shadow-color-picker').attr('color', power_user.shadow_color);
    $('#border-color-picker').attr('color', power_user.border_color);
    $('#ui_mode_select').val(power_user.ui_mode).find(`option[value="${power_user.ui_mode}"]`).attr('selected', true);
+    $('#reduced_motion').prop('checked', power_user.reduced_motion);

    for (const theme of themes) {
        const option = document.createElement('option');
@ -1478,6 +1499,7 @@ function loadPowerUserSettings(settings, data) {


    $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop('selected', true);
+    switchReducedMotion();
    reloadMarkdownProcessor(power_user.render_formulas);
    loadInstructMode(data);
    loadContextSettings();
@ -3112,6 +3134,13 @@ $(document).ready(() => {
        saveSettingsDebounced();
    });

+    $('#reduced_motion').on('input', function() {
+        power_user.reduced_motion = !!$(this).prop('checked');
+        localStorage.setItem(storage_keys.reduced_motion, String(power_user.reduced_motion));
+        switchReducedMotion();
+        saveSettingsDebounced();
+    });
+
    $(document).on('click', '#debug_table [data-debug-function]', function () {
        const functionId = $(this).data('debug-function');
        const functionRecord = debug_functions.find(f => f.functionId === functionId);