js: Copy-to-clipboard support

Now using the browser's "copy" operation while the focus is in the
puzzle will copy the puzzle state to the clipboard.  Browsers seem to
have odd ideas about whate element to target with the "copy" event:
Firefox targets the parent of the <canvas> while Chromium targets the
<body>.  To cope with these and possible future weirdness I attach the
event handler to the document and then look to see if it's plausibly
related to the canvas.

Arguably we might want to handle a wider range of "copy" events, maybe
any where the selection isn't empty.  I'm not sure, though, so we'll
start with the minimal change.
This commit is contained in:
Ben Harris
2023-07-05 19:39:57 +01:00
parent c8cc4a5f38
commit ad7042db98
3 changed files with 35 additions and 0 deletions

View File

@ -35,6 +35,9 @@ set(emcc_export_list
_timer_callback _timer_callback
# Callback from button presses in the UI outside the canvas # Callback from button presses in the UI outside the canvas
_command _command
# Text-formatting for copying to clipboard
_get_text_format
_free_text_format
# Game-saving and game-loading functions # Game-saving and game-loading functions
_get_save_file _get_save_file
_free_save_file _free_save_file

12
emcc.c
View File

@ -115,6 +115,8 @@ bool key(int keycode, const char *key, const char *chr, int location,
bool shift, bool ctrl); bool shift, bool ctrl);
void timer_callback(double tplus); void timer_callback(double tplus);
void command(int n); void command(int n);
char *get_text_format(void);
void free_save_file(char *buffer);
char *get_save_file(void); char *get_save_file(void);
void free_save_file(char *buffer); void free_save_file(char *buffer);
void load_game(void); void load_game(void);
@ -880,6 +882,16 @@ void command(int n)
} }
} }
char *get_text_format(void)
{
return midend_text_format(me);
}
void free_text_format(char *buffer)
{
sfree(buffer);
}
/* ---------------------------------------------------------------------- /* ----------------------------------------------------------------------
* Called from JS to prepare a save-game file, and free one after it's * Called from JS to prepare a save-game file, and free one after it's
* been used. * been used.

View File

@ -670,6 +670,26 @@ function initPuzzle() {
} }
}); });
// Handle "copy" actions. Browsers don't reliably target the
// "copy" event at the canvas when it's focused. Firefox 102
// targets the containing <div> while Chromium 114 targets the
// <body>. So we catch the event at the document level and work
// out if it's relevant ourselves.
var get_text_format = Module.cwrap('get_text_format', 'number', []);
var free_text_format = Module.cwrap('free_text_format', 'void', ['number']);
document.addEventListener("copy", function(event) {
// Make sure the target is an ancestor of the canvas. And if
// there's a selection assume the user wants to copy that and
// not the puzzle.
if (event.target.contains(onscreen_canvas) &&
window.getSelection().isCollapsed) {
var ptr = get_text_format();
event.clipboardData.setData('text/plain', UTF8ToString(ptr));
event.preventDefault();
free_text_format(ptr);
}
});
// Event handler to fake :focus-within on browsers too old for // Event handler to fake :focus-within on browsers too old for
// it (like KaiOS 2.5). Browsers without :focus-within are also // it (like KaiOS 2.5). Browsers without :focus-within are also
// too old for focusin/out events, so we have to use focus events // too old for focusin/out events, so we have to use focus events