From 17791e71b7fd782594c94e72b226f886e251e7eb Mon Sep 17 00:00:00 2001 From: selberhad Date: Wed, 5 Oct 2022 22:23:07 -0400 Subject: [PATCH 1/2] fix: multiple inputs now retain focus correctly --- .../static/webclient/js/plugins/default_in.js | 8 ++--- .../webclient/js/plugins/goldenlayout.js | 29 +++++++++++++++---- evennia/web/templates/webclient/base.html | 3 ++ 3 files changed, 31 insertions(+), 9 deletions(-) diff --git a/evennia/web/static/webclient/js/plugins/default_in.js b/evennia/web/static/webclient/js/plugins/default_in.js index 3412730c0e..70683f0774 100644 --- a/evennia/web/static/webclient/js/plugins/default_in.js +++ b/evennia/web/static/webclient/js/plugins/default_in.js @@ -47,7 +47,7 @@ let defaultInPlugin = (function () { // enter key by itself should toggle focus if( inputfield.length < 1 ) { - inputfield = $(".inputfield:last"); + inputfield = $(".inputfield.focused"); inputfield.focus(); if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility $("#inputfield").focus(); @@ -64,9 +64,9 @@ let defaultInPlugin = (function () { if( focusOnKeydown ) { // is an inputfield actually focused? if( inputfield.length < 1 ) { - // Nope, focus the last .inputfield found in the DOM (or #inputfield) - // :last only matters if multi-input plugins are in use - inputfield = $(".inputfield:last"); + // Nope, focus the most recently used input field (or #inputfield) + // .focused only matters if multi-input plugins are in use + inputfield = $(".inputfield.focused"); inputfield.focus(); if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility $("#inputfield").focus(); diff --git a/evennia/web/static/webclient/js/plugins/goldenlayout.js b/evennia/web/static/webclient/js/plugins/goldenlayout.js index 57c509c179..c722706f6d 100644 --- a/evennia/web/static/webclient/js/plugins/goldenlayout.js +++ b/evennia/web/static/webclient/js/plugins/goldenlayout.js @@ -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 typelist = document.getElementById("typelist"); let updatelist = document.getElementById("updatelist"); @@ -268,7 +286,6 @@ let goldenlayout = (function () { } } - // // Save the GoldenLayout state to localstorage whenever it changes. var onStateChanged = function () { @@ -344,7 +361,7 @@ let goldenlayout = (function () { 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) { //HTML for the typeDropdown - let splitControl = $("+"); + let splitControl = $( + "+" + ); // track adding a new tab splitControl.click( tab, function (evnt) { @@ -362,7 +381,7 @@ let goldenlayout = (function () { // Add the typeDropdown to the header tab.element.append( splitControl ); - tab.header.parent.on( "activeContentItemChanged", onActiveTabChange ); + registerInputTabChangeHandler(tab); } diff --git a/evennia/web/templates/webclient/base.html b/evennia/web/templates/webclient/base.html index ca8460c242..4914195f2e 100644 --- a/evennia/web/templates/webclient/base.html +++ b/evennia/web/templates/webclient/base.html @@ -21,6 +21,9 @@ JQuery available. + + + {% block jquery_import %} From 2e9bc79cb997224ec92a8d26cfff9733d8dd4bc8 Mon Sep 17 00:00:00 2001 From: selberhad Date: Thu, 6 Oct 2022 20:47:51 -0400 Subject: [PATCH 2/2] remove lodash dependency and add once helper --- .../webclient/js/plugins/goldenlayout.js | 22 +++++++++++++++---- evennia/web/templates/webclient/base.html | 3 --- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/evennia/web/static/webclient/js/plugins/goldenlayout.js b/evennia/web/static/webclient/js/plugins/goldenlayout.js index b64a9d9e8a..e0147c4b36 100644 --- a/evennia/web/static/webclient/js/plugins/goldenlayout.js +++ b/evennia/web/static/webclient/js/plugins/goldenlayout.js @@ -32,6 +32,20 @@ let goldenlayout = (function () { id: "inputComponent", }; + // helper function: only allow a function to be called once + function once(func) { + function _f() { + if (!_f.isCalled) { + _f.isCalled = true; + _f.res = func.apply(this, arguments); + } + return _f.res; + } + _f.prototype = func.prototype; + _f.isCalled = false; + return _f; + } + // helper function: filter vals out of array function filter (vals, array) { if( Array.isArray( vals ) && Array.isArray( array ) ) { @@ -248,8 +262,8 @@ let goldenlayout = (function () { } // - // ensure only one handler is set up on the parent with _.once - var registerInputTabChangeHandler = _.once(function (tab) { + // ensure only one handler is set up on the parent with once + var registerInputTabChangeHandler = once(function (tab) { tab.header.parent.on( "activeContentItemChanged", onActiveInputTabChange ); }); @@ -261,8 +275,8 @@ let goldenlayout = (function () { } // - // ensure only one handler is set up on the parent with _.once - var registerMainTabChangeHandler = _.once(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 ); }); diff --git a/evennia/web/templates/webclient/base.html b/evennia/web/templates/webclient/base.html index 4914195f2e..ca8460c242 100644 --- a/evennia/web/templates/webclient/base.html +++ b/evennia/web/templates/webclient/base.html @@ -21,9 +21,6 @@ JQuery available. - - - {% block jquery_import %}