diff --git a/data/core.yaml b/data/core.yaml index fa2359301..b5472bd77 100644 --- 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 index 13e795dcc..02c5f6440 100644 --- 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 index abb9a0537..ee1e0c1ee 100644 --- 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; }