feat: hotkey for color scheme switch

facebook · Apr 27, 2024 · 8bf199d · 8bf199d
1 parent 18872c1
commit 8bf199d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 31 deletions.
diff --git a/data/core.yaml b/data/core.yaml
@@ -1007,6 +1007,8 @@ en:
       colorblind_ibm: Colorblind Mode - IBM
       colorblind_paul_tol_vibrant: Colorblind Mode - Paul Tol (Vibrant)
       placeholder: Select color scheme
+      switch_color_scheme:
+        key: C
     colorblind_options:
       title: Colorblind Mode
       tooltip: Switch between colorblind modes

diff --git a/data/shortcuts.json b/data/shortcuts.json
@@ -79,6 +79,11 @@
             "shortcuts": ["preferences.key"],
             "text": "shortcuts.browsing.display_options.preferences"
           },
+          {
+            "modifiers": ["⌥", "⇧"],
+            "shortcuts": ["preferences.color_selection.switch_color_scheme.key"],
+            "text": "shortcuts.browsing.display_options.switch_color_scheme"
+          },
           {
             "modifiers": ["⌃", "⌘"],
             "shortcuts": ["F"],

diff --git a/modules/ui/sections/color_selection.js b/modules/ui/sections/color_selection.js
@@ -2,6 +2,7 @@ import { uiTooltip } from '../tooltip.js';
 import { uiCombobox } from '../combobox.js';
 import { uiSection } from '../section.js';
 import { utilNoAuto } from '../../util/index.js';
+import { uiCmd } from '../index.js';
 
 export function uiSectionColorSelection(context) {
   const l10n = context.systems.l10n;
@@ -55,47 +56,72 @@ export function uiSectionColorSelection(context) {
       .attr('placeholder', l10n.t('preferences.color_selection.placeholder'))
       .call(utilNoAuto)
       .call(colorCombo)
-      .on('blur change', d3_event => {
-        const element = d3_event.currentTarget;
-        const val = (element && element.value) || '';
-        const data = colorCombo.data();
-        if (data.some(item => item.value === val)) {
-          _colorSelectedId = val;
-          let colorSchemeName = getColorSchemeName(_colorSelectedId);
-
-          if (styles.currentColorScheme !== colorSchemeName) {
-            styles.setColorScheme(colorSchemeName);
-            context.scene().dirtyScene();
-            context.systems.map.deferredRedraw();
-          }
-
-        } else {
-          d3_event.currentTarget.value = '';
-          _colorSelectedId = null;
-        }
-      });
+      .on('blur change', d3_event => updateColorScheme(d3_event) );
 
     colorCombo.data(comboData);
 
-    update();
+    update(selection);
 
-    function update() {
-      selection.selectAll('.preferences-color-selection-item')
-        .classed('active', (_checkboxState === 'true'))
-        .select('input')
-        .property('checked', (_checkboxState === 'true'));
+  }
+
+  function update(selection) {
+    selection.selectAll('.preferences-color-selection-item')
+      .classed('active', (_checkboxState === 'true'))
+      .select('input')
+      .property('checked', (_checkboxState === 'true'));
+  }
+
+  function getColorSchemeName(val) {
+    for (let i = 0; i < comboData.length; i++) {
+      let colorSchemeObj = comboData[i];
+      if (colorSchemeObj.value === val) {
+        return colorSchemeObj.title;
+      }
     }
+  }
 
-    function getColorSchemeName(val) {
-      for (let i = 0; i < comboData.length; i++) {
-        let colorSchemeObj = comboData[i];
-        if (colorSchemeObj.value === val) {
-          return colorSchemeObj.title;
-        }
+  function updateColorScheme(d3_event) {
+    const element = d3_event.currentTarget;
+    const val = (element && element.value) || '';
+    const data = colorCombo.data();
+    if (data.some(item => item.value === val)) {
+      _colorSelectedId = val;
+      let colorSchemeName = getColorSchemeName(_colorSelectedId);
+
+      if (styles.currentColorScheme !== colorSchemeName) {
+        styles.setColorScheme(colorSchemeName);
+        context.scene().dirtyScene();
+        context.systems.map.deferredRedraw();
       }
+
+    } else {
+      d3_event.currentTarget.value = '';
+      _colorSelectedId = null;
     }
+  }
+
+  function switchColorScheme() {
+    // Get all color schemes
+    const colorSchemesOrdered = ['default', 'high_contrast', 'colorblind_general', 'colorblind_ibm', 'colorblind_paul_tol_vibrant'];
+    const allColorSchemes = styles.getAllColorSchemes();
 
+    // Identify the name and index of the current color scheme
+    const currentColorSchemeName = colorSchemesOrdered.find( item => allColorSchemes[item] == styles.getColorScheme() );
+    const currentColorSchemeIndex = colorSchemesOrdered.findIndex( item => item == currentColorSchemeName);
+
+    // Use the index of the current color scheme to identify the next one
+    const numColorSchemes = Object.keys(styles.getAllColorSchemes()).length;
+    const nextColorSchemeIndex = (currentColorSchemeIndex + 1) % numColorSchemes;
+    const nextColorSchemeName = colorSchemesOrdered[nextColorSchemeIndex];
+
+    // Update the color scheme
+    styles.setColorScheme(nextColorSchemeName);
+    context.scene().dirtyScene();
+    context.systems.map.deferredRedraw();
   }
 
+  context.keybinding()
+    .on(uiCmd('⌥⇧' + l10n.t('preferences.color_selection.switch_color_scheme.key')), switchColorScheme)
+
   return section;
 }