From a923b3bfa7c569fc338e05a0db007116513a5be7 Mon Sep 17 00:00:00 2001 From: Gnome Ann <> Date: Thu, 30 Sep 2021 14:13:54 -0400 Subject: [PATCH 1/3] Safari compatibility Only tested on macOS so far, not iOS. --- static/application.js | 42 ++++++++++++++++++++++++++++++++++++++---- templates/index.html | 2 +- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/static/application.js b/static/application.js index 51767f10..83b4376b 100644 --- a/static/application.js +++ b/static/application.js @@ -78,6 +78,9 @@ var override_focusout = false; var sman_allow_delete = false; var sman_allow_rename = false; +// This is true iff [we're in macOS and the browser is Safari] or [we're in iOS] +var using_webkit_patch = false; + // Key states var shift_down = false; var do_clear_ent = false; @@ -985,10 +988,12 @@ function chunkOnSelectionChange(event) { highlightEditingChunks(); // Attempt to prevent Chromium-based browsers on Android from // scrolling away from the current selection - setTimeout(function() { - game_text.blur(); - game_text.focus(); - }, 144); + if(!using_webkit_patch) { + setTimeout(function() { + game_text.blur(); + game_text.focus(); + }, 144); + } }, 2); }, 2); } @@ -1091,6 +1096,35 @@ $(document).ready(function(){ rs_close = $("#btn_rsclose"); seqselmenu = $("#seqselmenu"); seqselcontents = $("#seqselcontents"); + + // A simple feature detection test to determine whether the user interface + // is using WebKit (Safari browser's rendering engine) because WebKit + // requires special treatment to work correctly with the KoboldAI editor + using_webkit_patch = (function() { + try { + var active_element = document.activeElement; + var c = document.createElement("chunk"); + var t = document.createTextNode("KoboldAI"); + c.appendChild(t); + game_text[0].appendChild(c); + var r = rangy.createRange(); + r.setStart(t, 6); + r.collapse(true); + var s = rangy.getSelection(); + s.removeAllRanges(); + s.addRange(r); + game_text.blur(); + game_text.focus(); + var offset = rangy.getSelection().focusOffset; + c.removeChild(t); + game_text[0].removeChild(c); + document.activeElement.blur(); + active_element.focus(); + return offset !== 6; + } catch (e) { + return false; + } + })(); // Connect to SocketIO server socket = io.connect(window.document.origin); diff --git a/templates/index.html b/templates/index.html index 7098a824..3a078f88 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,7 +6,7 @@ - + From 00c1f49ca14d44efafa7c14d1f46c422bd088fe1 Mon Sep 17 00:00:00 2001 From: Gnome Ann <> Date: Thu, 30 Sep 2021 17:52:35 -0400 Subject: [PATCH 2/3] Fix slow typing speed on mobile devices --- static/application.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/static/application.js b/static/application.js index 83b4376b..e6c05c08 100644 --- a/static/application.js +++ b/static/application.js @@ -977,7 +977,7 @@ function chunkOnPaste(event) { } // This gets run every time the caret moves in the editor -function chunkOnSelectionChange(event) { +function _chunkOnSelectionChange(event, do_blur_focus) { if(!gametext_bound || !allowedit || override_focusout) { override_focusout = false; return; @@ -988,7 +988,7 @@ function chunkOnSelectionChange(event) { highlightEditingChunks(); // Attempt to prevent Chromium-based browsers on Android from // scrolling away from the current selection - if(!using_webkit_patch) { + if(do_blur_focus && !using_webkit_patch) { setTimeout(function() { game_text.blur(); game_text.focus(); @@ -998,6 +998,14 @@ function chunkOnSelectionChange(event) { }, 2); } +function chunkOnSelectionChange(event) { + return _chunkOnSelectionChange(event, true); +} + +function chunkOnKeyDownSelectionChange(event) { + return _chunkOnSelectionChange(event, false); +} + // This gets run when you defocus the editor by clicking // outside of the editor or by pressing escape or tab function chunkOnFocusOut(event) { @@ -1432,7 +1440,7 @@ $(document).ready(function(){ ).on('click', chunkOnSelectionChange ).on('keydown', - chunkOnSelectionChange + chunkOnKeyDownSelectionChange ).on('focusout', chunkOnFocusOut ); From d7893a0b52541b2ec988dda1c7196a7645425586 Mon Sep 17 00:00:00 2001 From: Gnome Ann <> Date: Thu, 30 Sep 2021 19:00:15 -0400 Subject: [PATCH 3/3] Check for WebKit after connecting to the server For some reason the original way only works in Safari after pressing the refresh button. It did not work if you typed the URL into the address bar in Safari without refreshing afterwards. --- static/application.js | 61 ++++++++++++++++++++++--------------------- templates/index.html | 2 +- 2 files changed, 32 insertions(+), 31 deletions(-) diff --git a/static/application.js b/static/application.js index e6c05c08..04cf862e 100644 --- a/static/application.js +++ b/static/application.js @@ -79,7 +79,7 @@ var sman_allow_delete = false; var sman_allow_rename = false; // This is true iff [we're in macOS and the browser is Safari] or [we're in iOS] -var using_webkit_patch = false; +var using_webkit_patch = null; // Key states var shift_down = false; @@ -1105,35 +1105,6 @@ $(document).ready(function(){ seqselmenu = $("#seqselmenu"); seqselcontents = $("#seqselcontents"); - // A simple feature detection test to determine whether the user interface - // is using WebKit (Safari browser's rendering engine) because WebKit - // requires special treatment to work correctly with the KoboldAI editor - using_webkit_patch = (function() { - try { - var active_element = document.activeElement; - var c = document.createElement("chunk"); - var t = document.createTextNode("KoboldAI"); - c.appendChild(t); - game_text[0].appendChild(c); - var r = rangy.createRange(); - r.setStart(t, 6); - r.collapse(true); - var s = rangy.getSelection(); - s.removeAllRanges(); - s.addRange(r); - game_text.blur(); - game_text.focus(); - var offset = rangy.getSelection().focusOffset; - c.removeChild(t); - game_text[0].removeChild(c); - document.activeElement.blur(); - active_element.focus(); - return offset !== 6; - } catch (e) { - return false; - } - })(); - // Connect to SocketIO server socket = io.connect(window.document.origin); @@ -1158,6 +1129,36 @@ $(document).ready(function(){ game_text.attr('contenteditable', allowedit); } }); + // A simple feature detection test to determine whether the user interface + // is using WebKit (Safari browser's rendering engine) because WebKit + // requires special treatment to work correctly with the KoboldAI editor + if(using_webkit_patch === null) { + using_webkit_patch = (function() { + try { + var active_element = document.activeElement; + var c = document.createElement("chunk"); + var t = document.createTextNode("KoboldAI"); + c.appendChild(t); + game_text[0].appendChild(c); + var r = rangy.createRange(); + r.setStart(t, 6); + r.collapse(true); + var s = rangy.getSelection(); + s.removeAllRanges(); + s.addRange(r); + game_text.blur(); + game_text.focus(); + var offset = rangy.getSelection().focusOffset; + c.removeChild(t); + game_text[0].removeChild(c); + document.activeElement.blur(); + active_element.focus(); + return offset !== 6; + } catch (e) { + return false; + } + })(); + } } else if(msg.cmd == "updatescreen") { var _gamestarted = gamestarted; gamestarted = msg.gamestarted; diff --git a/templates/index.html b/templates/index.html index 3a078f88..55978aec 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,7 +6,7 @@ - +