Skip to content

Commit e6ad042

Browse files
1j011j01
committed
Use OS-GUI's new AccessKeys API
1 parent be233d0 commit e6ad042

File tree

5 files changed

+42
-76
lines changed

5 files changed

+42
-76
lines changed

‎src/app-localization.js‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-check
2-
/* global $G, are_you_sure, exit_fullscreen_if_ios, show_error_message, showMessageBox */
2+
/* global $G, AccessKeys, are_you_sure, exit_fullscreen_if_ios, show_error_message, showMessageBox */
33

44
// const { are_you_sure, exit_fullscreen_if_ios, show_error_message } = require("./functions.js");
55
// const { $G } = require("./helpers.js");
@@ -8,31 +8,6 @@
88
// const { are_you_sure, exit_fullscreen_if_ios, show_error_message, $G, showMessageBox } = window;
99

1010
((exports) => {
11-
// @TODO: DRY hotkey helpers
12-
// & defines accelerators (hotkeys) in menus and buttons and things, which get underlined in the UI.
13-
// & can be escaped by doubling it, e.g. "&Taskbar && Start Menu"
14-
function index_of_hotkey(text) {
15-
// Returns the index of the ampersand that defines a hotkey, or -1 if not present.
16-
17-
// return english_text.search(/(?<!&)&(?!&|\s)/); // not enough browser support for negative lookbehind assertions
18-
19-
// The space here handles beginning-of-string matching and counteracts the offset for the [^&] so it acts like a negative lookbehind
20-
return ` ${text}`.search(/[^&]&[^&\s]/);
21-
}
22-
function has_hotkey(text) {
23-
return index_of_hotkey(text) !== -1;
24-
}
25-
function remove_hotkey(text) {
26-
return text.replace(/\s?\(&.\)/, "").replace(/([^&]|^)&([^&\s])/, "$1$2");
27-
}
28-
function display_hotkey(text) {
29-
// misnomer: using .menu-hotkey out of laziness, instead of a more general term like .hotkey or .accelerator
30-
return `<span style="white-space: pre">${text.replace(/([^&]|^)&([^&\s])/, "$1<span class='menu-hotkey'>$2</span>").replace(/&&/g, "&")}</span>`;
31-
}
32-
function get_hotkey(text) {
33-
return text[index_of_hotkey(text) + 1].toUpperCase();
34-
}
35-
3611
let localizations = {};
3712
/**
3813
* @param {string} english_text - The English text to localize
@@ -41,18 +16,17 @@
4116
*/
4217
function localize(english_text, ...interpolations) {
4318
function find_localization(english_text) {
44-
const amp_index = index_of_hotkey(english_text);
45-
if (amp_index > -1) {
46-
const without_hotkey = remove_hotkey(english_text);
19+
if (AccessKeys.has(english_text)) {
20+
const without_hotkey = AccessKeys.remove(english_text);
4721
if (localizations[without_hotkey]) {
48-
const hotkey_def = english_text.slice(amp_index, amp_index + 2);
22+
const hotkey_def = AccessKeys.get(english_text);
4923
if (localizations[without_hotkey].toUpperCase().indexOf(hotkey_def.toUpperCase()) > -1) {
5024
return localizations[without_hotkey];
5125
} else {
52-
if (has_hotkey(localizations[without_hotkey])) {
53-
// window.console && console.warn(`Localization has differing accelerator (hotkey) hint: '${localizations[without_hotkey]}' vs '${english_text}'`);
54-
// @TODO: detect differing accelerator more generally
55-
return `${remove_hotkey(localizations[without_hotkey])} (${hotkey_def})`;
26+
if (AccessKeys.has(localizations[without_hotkey])) {
27+
// window.console && console.warn(`Localization has differing access key hint: '${localizations[without_hotkey]}' vs '${english_text}'`);
28+
// @TODO: detect differing access key more generally
29+
return `${AccessKeys.remove(localizations[without_hotkey])} (${hotkey_def})`;
5630
}
5731
return `${localizations[without_hotkey]} (${hotkey_def})`;
5832
}
@@ -1145,9 +1119,4 @@
11451119
exports.get_direction = get_direction;
11461120
exports.available_languages = available_languages;
11471121

1148-
// @TODO: these should come from os-gui.js (new AccessKeys API)
1149-
exports.remove_hotkey = remove_hotkey;
1150-
exports.display_hotkey = display_hotkey;
1151-
exports.get_hotkey = get_hotkey;
1152-
11531122
})(window);

‎src/app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// @ts-check
22
// eslint-disable-next-line no-unused-vars
33
/* global airbrush_size:writable, brush_shape:writable, brush_size:writable, button:writable, ctrl:writable, eraser_size:writable, fill_color:writable, fill_color_k:writable, history_node_to_cancel_to:writable, MenuBar:writable, my_canvas_height:writable, my_canvas_width:writable, palette:writable, pencil_size:writable, pointer:writable, pointer_active:writable, pointer_buttons:writable, pointer_over_canvas:writable, pointer_previous:writable, pointer_start:writable, pointer_type:writable, pointers:writable, reverse:writable, shift:writable, stroke_color:writable, stroke_color_k:writable, stroke_size:writable, update_helper_layer_on_pointermove_active:writable */
4-
/* global current_history_node, default_airbrush_size, default_brush_shape, default_brush_size, default_canvas_height, default_canvas_width, default_eraser_size, default_magnification, default_pencil_size, default_stroke_size, enable_fs_access_api, file_name, FileSystemFileHandle, get_direction, localize, magnification, main_canvas, main_ctx, remove_hotkey, return_to_tools, selected_colors, selected_tool, selected_tools, selection, showSaveFilePicker, systemHooks, textbox, transparency */
4+
/* global AccessKeys, current_history_node, default_airbrush_size, default_brush_shape, default_brush_size, default_canvas_height, default_canvas_width, default_eraser_size, default_magnification, default_pencil_size, default_stroke_size, enable_fs_access_api, file_name, FileSystemFileHandle, get_direction, localize, magnification, main_canvas, main_ctx, return_to_tools, selected_colors, selected_tool, selected_tools, selection, showSaveFilePicker, systemHooks, textbox, transparency */
55

66
import { $ColorBox } from "./$ColorBox.js";
77
import { $ToolBox } from "./$ToolBox.js";
88
import { Handles } from "./Handles.js";
9-
// import { get_direction, localize, remove_hotkey } from "./app-localization.js";
9+
// import { get_direction, localize } from "./app-localization.js";
1010
import { default_palette, get_winter_palette } from "./color-data.js";
1111
import { image_formats } from "./file-format-data.js";
1212
import { $this_version_news, cancel, change_url_param, clear, confirm_overwrite_capability, delete_selection, deselect, edit_copy, edit_cut, edit_paste, file_new, file_open, file_save, file_save_as, get_tool_by_id, get_uris, image_attributes, image_flip_and_rotate, image_invert_colors, image_stretch_and_skew, load_image_from_uri, make_or_update_undoable, open_from_file, paste, paste_image_from_file, redo, render_history_as_gif, reset_canvas_and_history, reset_file, reset_selected_colors, resize_canvas_and_save_dimensions, resize_canvas_without_saving_dimensions, save_as_prompt, select_all, select_tool, select_tools, set_magnification, show_document_history, show_error_message, show_news, show_resource_load_error_message, toggle_grid, undo, update_canvas_rect, update_disable_aa, update_helper_layer, update_magnified_canvas_size, view_bitmap, write_image_file } from "./functions.js";
@@ -702,7 +702,7 @@ function* traverse_menu(menu_items, menu_element) {
702702
if (typeof menu_item !== "object" || !("label" in menu_item)) {
703703
continue;
704704
}
705-
const aria_label = remove_hotkey(menu_item.label); // TODO: replace with OS-GUI's new AccessKeys API
705+
const aria_label = AccessKeys.toText(menu_item.label);
706706
const menu_item_element = menu_item_elements.filter((el) =>
707707
el.getAttribute("aria-label") === aria_label
708708
)[0];

‎src/edit-colors.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// @ts-check
22
/* global palette:writable */
3-
/* global $colorbox, display_hotkey, localize, main_ctx, monochrome, selected_colors, selection */
3+
/* global $colorbox, AccessKeys, localize, main_ctx, monochrome, selected_colors, selection */
44
import { $Swatch, update_$swatch } from "./$ColorBox.js";
55
import { $DialogWindow } from "./$ToolWindow.js";
6-
// import { display_hotkey, localize } from "./app-localization.js";
6+
// import { localize } from "./app-localization.js";
77
import { basic_colors, custom_colors } from "./color-data.js";
88
import { detect_monochrome, make_monochrome_palette, show_error_message, undoable } from "./functions.js";
99
import { $G, get_help_folder_icon, get_rgba_from_color, make_canvas, rgb_to_hsl } from "./helpers.js";
@@ -265,9 +265,9 @@ function choose_color(initial_color, callback) {
265265
const $left_right_split = $(`<div class="left-right-split">`).appendTo($w.$main);
266266
const $left = $(`<div class="left-side">`).appendTo($left_right_split);
267267
const $right = $(`<div class="right-side">`).appendTo($left_right_split).hide();
268-
$left.append(`<label for="basic-colors">${display_hotkey("&Basic colors:")}</label>`);
268+
$left.append(`<label for="basic-colors">${AccessKeys.toHTML("&Basic colors:")}</label>`);
269269
const $basic_colors_grid = make_color_grid(basic_colors, "basic-colors").appendTo($left);
270-
$left.append(`<label for="custom-colors">${display_hotkey("&Custom colors:")}</label>`);
270+
$left.append(`<label for="custom-colors">${AccessKeys.toHTML("&Custom colors:")}</label>`);
271271
const custom_colors_dom_order = []; // (wanting) horizontal top to bottom
272272
for (let list_index = 0; list_index < custom_colors.length; list_index++) {
273273
const row = list_index % 2;
@@ -287,7 +287,7 @@ function choose_color(initial_color, callback) {
287287
}
288288

289289
const $define_custom_colors_button = $(`<button class="define-custom-colors-button" type="button">`)
290-
.html(display_hotkey("&Define Custom Colors >>"))
290+
.html(AccessKeys.toHTML("&Define Custom Colors >>"))
291291
.appendTo($left)
292292
.on("click", (e) => {
293293
// prevent the form from submitting
@@ -314,7 +314,7 @@ function choose_color(initial_color, callback) {
314314
};
315315
$(window).on("resize", maybe_reenable_button_for_mobile_navigation);
316316

317-
const $color_solid_label = $(`<label for="color-solid-canvas">${display_hotkey("Color|S&olid")}</label>`);
317+
const $color_solid_label = $(`<label for="color-solid-canvas">${AccessKeys.toHTML("Color|S&olid")}</label>`);
318318
$color_solid_label.css({
319319
position: "absolute",
320320
left: 10,
@@ -446,7 +446,7 @@ function choose_color(initial_color, callback) {
446446
b: 255,
447447
}[component_letter];
448448
const label = document.createElement("label");
449-
label.innerHTML = display_hotkey(text_with_hotkey);
449+
label.innerHTML = AccessKeys.toHTML(text_with_hotkey);
450450
const input_y_spacing = 22;
451451
$(label).css({
452452
position: "absolute",
@@ -614,7 +614,7 @@ function choose_color(initial_color, callback) {
614614
$right.append(rainbow_canvas, luminosity_canvas, result_canvas, $color_solid_label, lum_arrow_canvas);
615615

616616
const $add_to_custom_colors_button = $(`<button class="add-to-custom-colors-button" type="button">`)
617-
.html(display_hotkey("&Add To Custom Colors"))
617+
.html(AccessKeys.toHTML("&Add To Custom Colors"))
618618
.appendTo($right)
619619
.on("click", (event) => {
620620
// prevent the form from submitting

0 commit comments

Comments
 (0)