Merge pull request #1534 from mathjax/fix/menu-sliders

Fix problem with sliders and add keyboard controls.

Author: dpvc

ts/ui/menu/Menu.ts

@@ -43,6 +43,7 @@ import { SVG } from '../../output/svg.js';
 import * as AnnotationMenu from './AnnotationMenu.js';
 import { MJContextMenu } from './MJContextMenu.js';
 import { RadioCompare } from './RadioCompare.js';
+import { mjSlider } from './Slider.js';
 import { MmlVisitor } from './MmlVisitor.js';
 import { MenuMathDocument } from './MenuHandler.js';
 import * as MenuUtil from './MenuUtil.js';
@@ -586,6 +587,7 @@ export class Menu {
     const parser = new Parser([
       ['contextMenu', MJContextMenu.fromJson.bind(MJContextMenu)],
       ['radioCompare', RadioCompare.fromJson.bind(RadioCompare)],
+      ['slider', mjSlider.fromJson.bind(mjSlider)],
     ]);
     this.menu = parser.parse({
       type: 'contextMenu',
@@ -810,7 +812,7 @@ export class Menu {
                 'Black',
               ])
             ),
-            { type: 'slider', variable: 'backgroundOpacity', content: ' ' },
+            this.slider('backgroundOpacity'),
             this.submenu(
               'Highlight/Foreground',
               this.radioGroup('foregroundColor', 'Highlight', [
@@ -824,7 +826,7 @@ export class Menu {
                 'Blue',
               ])
             ),
-            { type: 'slider', variable: 'foregroundOpacity', content: ' ' },
+            this.slider('foregroundOpacity'),
             this.rule(),
             this.radioGroup('highlight', 'Highlight', [
               'None',
@@ -2038,5 +2040,15 @@ export class Menu {
     return { type: 'rule' };
   }
 
+  /**
+   * Create JSON for a slider
+   *
+   * @param {string} variable     The (pool) variable to attach to this slider
+   * @returns {object}            The JSON for the slider item
+   */
+  public slider(variable: string): object {
+    return {type: 'slider', variable, content: ' '};
+  }
+
   /*======================================================================*/
 }

ts/ui/menu/Slider.ts

@@ -0,0 +1,98 @@
+/*************************************************************
+ *
+ *  Copyright (c) 2022-2026 The MathJax Consortium
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/**
+ * @file  Implements a radio button with customizable comparator.
+ *
+ * @author dpvc@mathjax.org (Davide Cervone)
+ */
+
+import {Slider} from './mj-context-menu.js';
+
+//
+// Fix slider actions (FIXME: remove when mj-context-menu is merged into MathJax-src repo)
+//
+export class mjSlider extends Slider {
+  /**
+   * @override
+   */
+  focus() {
+    super.focus();
+    this.html.focus(); // needed since super.focus uses setTimout for this
+    (this as any).input.focus();
+  }
+
+  /**
+   * @override
+   */
+  mouseup(event: MouseEvent) {
+    super.mouseup(event);
+    this.stop(event); // needs to prevent default action
+  }
+
+  /**
+   * @override
+   */
+  keydown(event: KeyboardEvent) {
+    let value = parseInt(((this as any).input as HTMLInputElement).value);
+    switch (event.key) {
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      if (!event.shiftKey) {
+        super.keydown(event);
+        return;
+      }
+    /* @eslint-ignore: no-fallthrough */
+    case '-':
+      value = Math.max(0, value - (event.ctrlKey ? 5 : 1));
+      break;
+
+    case 'ArrowRight':
+    case 'ArrowUp':
+      if (!event.shiftKey) {
+        super.keydown(event);
+        return;
+      }
+    /* @eslint-ignore: no-fallthrough */
+    case '+':
+      value = Math.min(100, value + (event.ctrlKey ? 5 : 1));
+      break
+
+    case 'PageDown':
+      value = Math.max(0, value - 5);
+      break;
+
+    case 'PageUp':
+      value= Math.max(0, value + 5);
+      break;
+
+    case 'Home':
+      value = 0;
+      break;
+
+    case 'End':
+      value = 100;
+      break;
+
+    default:
+      super.keydown(event);
+      return;
+    }
+    this.variable.setValue(String(value));
+    this.stop(event);
+  }
+}

ts/ui/menu/mj-context-menu.ts

@@ -27,6 +27,7 @@ export { SubMenu } from '#menu/sub_menu.js';
 export { Submenu } from '#menu/item_submenu.js';
 export { Radio } from '#menu/item_radio.js';
 export { Rule } from '#menu/item_rule.js';
+export { Slider } from '#menu/item_slider.js';
 export { ParserFactory } from '#menu/parser_factory.js';
 export { Parser } from '#menu/parse.js';
 export * as CssStyles from '#menu/css_util.js';