Merge pull request #1357 from mathjax/feature/draggable-dialogs

Make dialogs movable and sizable.

Author: dpvc

components/mjs/core/config.json

@@ -4,6 +4,8 @@
     "targets": [
       "mathjax.ts",
       "core", "util", "handlers",
+      "ui/dialog/DraggableDialog.ts",
+      "ui/dialog/InfoDialog.ts",
       "adaptors/HTMLAdaptor.ts",
       "adaptors/browserAdaptor.ts",
       "components/global.ts"

testsuite/tests/util/StyleJson.test.ts

@@ -36,4 +36,20 @@ describe('StyleJsonSheet object', () => {
     expect(styles.cssText).toBe('');
   });
 
+  test('Compound style', () => {
+    expect(new StyleJsonSheet({
+      '@media (prefers-color-scheme: dark)': {
+        'mjx-container': {
+          'color': '#E0E0E0',
+        },
+      }
+    }).cssText).toBe([
+      '@media (prefers-color-scheme: dark) {',
+      '  mjx-container {',
+      '    color: #E0E0E0;',
+      '  }',
+      '}'
+    ].join('\n'));
+  });
+
 });

ts/a11y/complexity/collapse.ts

@@ -599,7 +599,7 @@ export class Collapse {
         ),
       },
       [
-        factory.create('mtext', { mathcolor: 'blue', ...variant }, [
+        factory.create('mtext', variant, [
           (factory.create('text') as TextNode).setText(marker),
         ]),
       ]

ts/a11y/explorer.ts

@@ -321,6 +321,7 @@ export function ExplorerMathDocumentMixin<
     public static OPTIONS: OptionList = {
       ...BaseDocument.OPTIONS,
       enableExplorer: hasWindow,           // only activate in interactive contexts
+      enableExplorerHelp: true,            // help dialog is enabled
       renderActions: expandable({
         ...BaseDocument.OPTIONS.renderActions,
         explorable: [STATE.EXPLORER]
@@ -426,77 +427,20 @@ export function ExplorerMathDocumentMixin<
         display: 'inline-flex',
         'align-items': 'center',
       },
-
-      'mjx-help-sizer': {
-        position: 'fixed',
-        width: '40%',
-        'max-width': '30em',
-        top: '3em',
-        left: '50%',
-      },
-      'mjx-help-dialog': {
-        position: 'absolute',
-        width: '200%',
-        left: '-100%',
-        border: '3px outset',
-        'border-radius': '15px',
-        color: 'black',
-        'background-color': '#DDDDDD',
-        'z-index': '301',
-        'text-align': 'right',
-        'font-style': 'normal',
-        'text-indent': 0,
-        'text-transform': 'none',
-        'line-height': 'normal',
-        'letter-spacing': 'normal',
-        'word-spacing': 'normal',
-        'word-wrap': 'normal',
-        float: 'none',
-        'box-shadow': '0px 10px 20px #808080',
-        outline: 'none',
-      },
-      'mjx-help-dialog > h1': {
-        'font-size': '24px',
-        'text-align': 'center',
-        margin: '.5em 0',
-      },
-      'mjx-help-dialog > div': {
-        margin: '0 1em',
-        padding: '3px',
-        overflow: 'auto',
-        height: '20em',
-        border: '2px inset black',
-        'background-color': 'white',
-        'text-align': 'left',
-      },
-      'mjx-help-dialog > input': {
-        margin: '.5em 2em',
-      },
-      'mjx-help-dialog kbd': {
-        display: 'inline-block',
-        padding: '3px 5px',
-        'font-size': '11px',
-        'line-height': '10px',
-        color: '#444d56',
-        'vertical-align': 'middle',
-        'background-color': '#fafbfc',
-        border: 'solid 1.5px #c6cbd1',
-        'border-bottom-color': '#959da5',
-        'border-radius': '3px',
-        'box-shadow': 'inset -.5px -1px 0 #959da5',
-      },
-      'mjx-help-dialog ul': {
-        'list-style-type': 'none',
-      },
-      'mjx-help-dialog li': {
-        'margin-bottom': '.5em',
-      },
-      'mjx-help-background': {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
+      '@media (prefers-color-scheme: dark) /* explorer */': {
+        'mjx-help > svg': {
+          stroke: '#E0E0E0',
+        },
+        'mjx-help > svg > circle': {
+          fill: '#404040',
+        },
+        'mjx-help > svg > circle:nth-child(2)': {
+          fill: 'rgba(132, 132, 255, .3)',
+        },
+        'mjx-help:hover > svg > circle:nth-child(2)': {
+          stroke: '#AAAAAA',
+          fill: '#404040',
+        },
       },
     };
 
@@ -565,7 +509,7 @@ export function ExplorerMathDocumentMixin<
           SVGNS
         ),
       ]);
-      this.tmpFocus = this.adaptor.node('mjx-focus', {
+      this.tmpFocus = adaptor.node('mjx-focus', {
         tabIndex: 0,
         style: {
           outline: 'none',

ts/a11y/explorer/Highlighter.ts

@@ -21,26 +21,9 @@
 interface NamedColor {
   color: string;
   alpha?: number;
+  type?: string;
 }
 
-interface ChannelColor {
-  red: number;
-  green: number;
-  blue: number;
-  alpha?: number;
-}
-
-const namedColors: { [key: string]: ChannelColor } = {
-  red: { red: 255, green: 0, blue: 0 },
-  green: { red: 0, green: 255, blue: 0 },
-  blue: { red: 0, green: 0, blue: 255 },
-  yellow: { red: 255, green: 255, blue: 0 },
-  cyan: { red: 0, green: 255, blue: 255 },
-  magenta: { red: 255, green: 0, blue: 255 },
-  white: { red: 255, green: 255, blue: 255 },
-  black: { red: 0, green: 0, blue: 0 },
-};
-
 /**
  * Turns a named color into a channel color.
  *
@@ -49,30 +32,22 @@ const namedColors: { [key: string]: ChannelColor } = {
  * @returns {string} The channel color.
  */
 function getColorString(color: NamedColor, deflt: NamedColor): string {
-  const channel = namedColors[color.color] || namedColors[deflt.color];
-  channel.alpha = color.alpha ?? deflt.alpha;
-  return rgba(channel);
-}
-
-/**
- * RGBa string version of the channel color.
- *
- * @param {ChannelColor} color The channel color.
- * @returns {string} The color in RGBa format.
- */
-function rgba(color: ChannelColor): string {
-  return `rgba(${color.red},${color.green},${color.blue},${color.alpha ?? 1})`;
+  const type = deflt.type;
+  const name = color.color ?? deflt.color;
+  const opacity = color.alpha ?? deflt.alpha;
+  const alpha = opacity === 1 ? 1 : `var(--mjx-${type}-alpha)`;
+  return `rgba(var(--mjx-${type}-${name}), ${alpha})`;
 }
 
 /**
  * The default background color if a none existing color is provided.
  */
-const DEFAULT_BACKGROUND: NamedColor = { color: 'blue', alpha: 1 };
+const DEFAULT_BACKGROUND: NamedColor = { color: 'blue', alpha: 1, type: 'bg' };
 
 /**
  * The default color if a none existing color is provided.
  */
-const DEFAULT_FOREGROUND: NamedColor = { color: 'black', alpha: 1 };
+const DEFAULT_FOREGROUND: NamedColor = { color: 'black', alpha: 1, type: 'fg' };
 
 export interface Highlighter {
   /**