Annikka/evennia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: multiple inputs now retain focus correctly

Browse source
This commit is contained in:
selberhad 2022-10-05 22:23:07 -04:00
parent 6e45ac0cb1
commit 17791e71b7
3 changed files with 31 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
evennia/web/static/webclient/js/plugins/default_in.js
View file

@ -47,7 +47,7 @@ let defaultInPlugin = (function () {
// enter key by itself should toggle focus // enter key by itself should toggle focus
if( inputfield.length < 1 ) { if( inputfield.length < 1 ) {
inputfield = $(".inputfield:last"); inputfield = $(".inputfield.focused");
inputfield.focus(); inputfield.focus();
if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility
$("#inputfield").focus(); $("#inputfield").focus();
@ -64,9 +64,9 @@ let defaultInPlugin = (function () {
if( focusOnKeydown ) { if( focusOnKeydown ) {
// is an inputfield actually focused? // is an inputfield actually focused?
if( inputfield.length < 1 ) { if( inputfield.length < 1 ) {
// Nope, focus the last .inputfield found in the DOM (or #inputfield) // Nope, focus the most recently used input field (or #inputfield)
// :last only matters if multi-input plugins are in use // .focused only matters if multi-input plugins are in use
inputfield = $(".inputfield:last"); inputfield = $(".inputfield.focused");
inputfield.focus(); inputfield.focus();
if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility
$("#inputfield").focus(); $("#inputfield").focus();

29
evennia/web/static/webclient/js/plugins/goldenlayout.js
View file

@ -247,10 +247,28 @@ let goldenlayout = (function () {
} }
} }
//
// ensure only one handler is set up on the parent with _.once
var registerInputTabChangeHandler = _.once(function (tab) {
tab.header.parent.on( "activeContentItemChanged", onActiveInputTabChange );
});
// //
// Handle when the active input tab changes
var onActiveInputTabChange = function (tab) {
$('.inputfield').removeClass('focused');
$('.inputfield', tab.tab.contentItem.element).addClass('focused');
}
// //
var onActiveTabChange = function (tab) { // ensure only one handler is set up on the parent with _.once
var registerMainTabChangeHandler = _.once(function (tab) {
tab.header.parent.on( "activeContentItemChanged", onActiveMainTabChange );
});
//
// Handle when the active main tab changes
var onActiveMainTabChange = function (tab) {
let renamebox = document.getElementById("renamebox"); let renamebox = document.getElementById("renamebox");
let typelist = document.getElementById("typelist"); let typelist = document.getElementById("typelist");
let updatelist = document.getElementById("updatelist"); let updatelist = document.getElementById("updatelist");
@ -268,7 +286,6 @@ let goldenlayout = (function () {
} }
} }
// //
// Save the GoldenLayout state to localstorage whenever it changes. // Save the GoldenLayout state to localstorage whenever it changes.
var onStateChanged = function () { var onStateChanged = function () {
@ -344,7 +361,7 @@ let goldenlayout = (function () {
tab.element.prepend( $("#optionsbutton").clone(true).addClass("lm_title") ); tab.element.prepend( $("#optionsbutton").clone(true).addClass("lm_title") );
} }
tab.header.parent.on( "activeContentItemChanged", onActiveTabChange ); registerMainTabChangeHandler(tab);
} }
@ -352,7 +369,9 @@ let goldenlayout = (function () {
// //
var onInputCreate = function (tab) { var onInputCreate = function (tab) {
//HTML for the typeDropdown //HTML for the typeDropdown
let splitControl = $("<span class='lm_title' style='font-size: 1.5em;width: 1em;'>+</span>"); let splitControl = $(
"<span class='lm_title' style='font-size: 1.5em;width: 1em;'>+</span>"
);
// track adding a new tab // track adding a new tab
splitControl.click( tab, function (evnt) { splitControl.click( tab, function (evnt) {
@ -362,7 +381,7 @@ let goldenlayout = (function () {
// Add the typeDropdown to the header // Add the typeDropdown to the header
tab.element.append( splitControl ); tab.element.append( splitControl );
tab.header.parent.on( "activeContentItemChanged", onActiveTabChange ); registerInputTabChangeHandler(tab);
} }

3
evennia/web/templates/webclient/base.html
View file

@ -21,6 +21,9 @@ JQuery available.
<link rel="icon" type="image/x-icon" href="/static/website/images/evennia_logo.png" /> <link rel="icon" type="image/x-icon" href="/static/website/images/evennia_logo.png" />
<!-- Lodash -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
<!-- Import JQuery and warn if there is a problem --> <!-- Import JQuery and warn if there is a problem -->
{% block jquery_import %} {% block jquery_import %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>