diff --git a/evennia/web/webclient/static/webclient/js/plugins/default_in.js b/evennia/web/webclient/static/webclient/js/plugins/default_in.js index 044e4e7ec8..51b200f707 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/default_in.js +++ b/evennia/web/webclient/static/webclient/js/plugins/default_in.js @@ -3,7 +3,9 @@ * Evennia Webclient default "send-text-on-enter-key" IO plugin * */ -let defaultin_plugin = (function () { +let defaultInPlugin = (function () { + + var focusOnKeydown = true; // // handle the default key triggering onSend() @@ -50,14 +52,17 @@ let defaultin_plugin = (function () { // Anything else, focus() a textarea if needed, and allow the default event default: - // 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"); - inputfield.focus(); - if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility - $("#inputfield").focus(); + // has some other UI element turned off this behavior temporarily? + 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"); + inputfield.focus(); + if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility + $("#inputfield").focus(); + } } } } @@ -65,6 +70,12 @@ let defaultin_plugin = (function () { return true; } + // + // allow other UI elements to toggle this focus behavior on/off + var setKeydownFocus = function (bool) { + focusOnKeydown = bool; + } + // // Mandatory plugin init function var init = function () { @@ -81,6 +92,7 @@ let defaultin_plugin = (function () { return { init: init, onKeydown: onKeydown, + setKeydownFocus: setKeydownFocus, } })(); -window.plugin_handler.add("defaultin", defaultin_plugin); +window.plugin_handler.add("default_in", defaultInPlugin); diff --git a/evennia/web/webclient/static/webclient/js/plugins/font.js b/evennia/web/webclient/static/webclient/js/plugins/font.js index cf940fab40..8b2bb80caa 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/font.js +++ b/evennia/web/webclient/static/webclient/js/plugins/font.js @@ -18,39 +18,82 @@ let font_plugin = (function () { }; // + // + var setStartingFont = function () { + var fontfamily = localStorage.getItem("evenniaFontFamily"); + if( !fontfamily ) { + $(document.body).css("font-family", fontfamily); + } + + var fontsize = localStorage.getItem("evenniaFontSize"); + if( !fontsize ) { + $(document.body).css("font-size", fontsize+"em"); + } + } + + // + // + var getActiveFontFamily = function () { + var family = "DejaVu Sans Mono"; + var fontfamily = localStorage.getItem("evenniaFontFamily"); + if( fontfamily != null ) { + family = fontfamily; + } + return family; + } + + // + // + var getActiveFontSize = function () { + var size = "0.9"; + var fontsize = localStorage.getItem("evenniaFontSize"); + if( fontsize != null ) { + size = fontsize; + } + return size; + } + + // + // + var onFontFamily = function (evnt) { + var family = $(evnt.target).val(); + $(document.body).css("font-family", family); + localStorage.setItem("evenniaFontFamily", family); + } + + // + // + var onFontSize = function (evnt) { + var size = $(evnt.target).val(); + $(document.body).css("font-size", size+"em"); + localStorage.setItem("evenniaFontSize", size); + } + // // var onOptionsUI = function (parentdiv) { - var fontselect = $(''); + var fontselect = $(""); var fonts = Object.keys(font_urls); - for (var x = 0; x < fonts.length; x++) { - var option = $(''); - fontselect.append(option); + for( const font of fonts ) { + fontselect.append( $("") ); } for (var x = 4; x < 21; x++) { var val = (x/10.0); - var option = $(''); - sizeselect.append(option); + sizeselect.append( $("") ); } - fontselect.val('DejaVu Sans Mono'); // default value - sizeselect.val('0.9'); // default scaling factor + fontselect.val( getActiveFontFamily() ); + sizeselect.val( getActiveFontSize() ); - // font-family change callback - fontselect.on('change', function () { - $(document.body).css('font-family', $(this).val()); - }); - - // font size change callback - sizeselect.on('change', function () { - $(document.body).css('font-size', $(this).val()+"em"); - }); + // font change callbacks + fontselect.on("change", onFontFamily); + sizeselect.on("change", onFontSize); // add the font selection dialog control to our parentdiv - parentdiv.append('
Font Selection:
'); + parentdiv.append("
Font Selection:
"); parentdiv.append(fontselect); parentdiv.append(sizeselect); } @@ -65,10 +108,12 @@ let font_plugin = (function () { for (var x = 0; x < fonts.length; x++) { if ( fonts[x] != "Monospace" ) { var url = font_urls[ fonts[x] ]; - var link = $(''); + var link = $(""); head.append( link ); } } + + setStartingFont(); } return { diff --git a/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js b/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js index 36862272aa..57c509c179 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js +++ b/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js @@ -5,7 +5,12 @@ */ let goldenlayout = (function () { - var myLayout; + var myLayout; // The actively used GoldenLayout API object. + + var evenniaGoldenLayouts = new Map(); // key/value Map for each selectable layout. + var activeLayoutName = "default"; // The object key of the active evenniaGoldenLayout + var activeLayoutModified = false; // Has the active layout been modified by the user, without being saved? + var knownTypes = ["all", "untagged", "testing"]; var untagged = []; @@ -80,6 +85,7 @@ let goldenlayout = (function () { myLayout.emit("stateChanged"); $("#renamebox").remove(); + window.plugins["default_in"].setKeydownFocus(true); } @@ -137,6 +143,7 @@ let goldenlayout = (function () { renamebox = $("
"); renamebox.append(""); renamebox.insertBefore( content ); + window.plugins["default_in"].setKeydownFocus(false); } else { closeRenameDropdown(); } @@ -275,8 +282,35 @@ let goldenlayout = (function () { component.container.extendState({ "types": types, "updateMethod": updateMethod }); }); - var state = JSON.stringify( myLayout.toConfig() ); - localStorage.setItem( "evenniaGoldenLayoutSavedState", state ); + // update localstorage + localStorage.setItem( "evenniaGoldenLayoutSavedState", JSON.stringify(myLayout.toConfig()) ); + localStorage.setItem( "evenniaGoldenLayoutSavedStateName", activeLayoutName ); + } + + + // + // + var onClearLocalstorage = function (evnt) { + myLayout.off( "stateChanged", onStateChanged ); + localStorage.removeItem( "evenniaGoldenLayoutSavedState" ); + localStorage.removeItem( "evenniaGoldenLayoutSavedStateName" ); + location.reload(); + } + + + // + // + var scrollAll = function () { + let components = myLayout.root.getItemsByType("component"); + components.forEach( function (component) { + if( component.hasId("inputComponent") ) { return; } // ignore input components + + let textDiv = component.container.getElement().children(".content"); + let scrollHeight = textDiv.prop("scrollHeight"); + let clientHeight = textDiv.prop("clientHeight"); + textDiv.scrollTop( scrollHeight - clientHeight ); + }); + myLayout.updateSize(); } @@ -331,37 +365,6 @@ let goldenlayout = (function () { tab.header.parent.on( "activeContentItemChanged", onActiveTabChange ); } - // - // - var scrollAll = function () { - let components = myLayout.root.getItemsByType("component"); - components.forEach( function (component) { - if( component.hasId("inputComponent") ) { return; } // ignore input components - - let textDiv = component.container.getElement().children(".content"); - let scrollHeight = textDiv.prop("scrollHeight"); - let clientHeight = textDiv.prop("clientHeight"); - textDiv.scrollTop( scrollHeight - clientHeight ); - }); - myLayout.updateSize(); - } - - - // - // - var routeMsg = function (textDiv, txt, updateMethod) { - if ( updateMethod === "replace" ) { - textDiv.html(txt); - } else if ( updateMethod === "append" ) { - textDiv.append(txt); - } else { // line feed - textDiv.append("
" + txt + "
"); - } - let scrollHeight = textDiv.prop("scrollHeight"); - let clientHeight = textDiv.prop("clientHeight"); - textDiv.scrollTop( scrollHeight - clientHeight ); - } - // // @@ -379,6 +382,210 @@ let goldenlayout = (function () { } + // + // + var registerComponents = function (myLayout) { + + // register our component and replace the default messagewindow with the Main component + myLayout.registerComponent( "Main", function (container, componentState) { + let main = $("#messagewindow").addClass("content"); + initComponent(main, container, componentState, "untagged", "newlines" ); + }); + + // register our input component + myLayout.registerComponent( "input", function (container, componentState) { + var promptfield = $("
"); + var formcontrol = $(""); + var button = $(""); + + var inputfield = $("
") + .append( button ) + .append( formcontrol ); + + $("
") + .append( promptfield ) + .append( inputfield ) + .appendTo( container.getElement() ); + + button.bind("click", function (evnt) { + // focus our textarea + $( $(evnt.target).siblings(".inputfield")[0] ).focus(); + // fake a carriage return event + var e = $.Event("keydown"); + e.which = 13; + $( $(evnt.target).siblings(".inputfield")[0] ).trigger(e); + }); + + container.on("tab", onInputCreate); + }); + + // register the generic "evennia" component + myLayout.registerComponent( "evennia", function (container, componentState) { + let div = $("
"); + initComponent(div, container, componentState, "all", "newlines"); + container.on("destroy", calculateUntaggedTypes); + }); + } + + + // + // + var resetUI = function (newLayout) { + var mainsub = document.getElementById("main-sub"); + + // rebuild the original HTML stacking + var messageDiv = $("#messagewindow").detach(); + messageDiv.prependTo( mainsub ); + + // out with the old + myLayout.destroy(); + + // in with the new + myLayout = new window.GoldenLayout( newLayout, mainsub ); + + // re-register our main, input and generic evennia components. + registerComponents( myLayout ); + + // call all other plugins to give them a chance to registerComponents. + for( let plugin in window.plugins ) { + if( "onLayoutChanged" in window.plugins[plugin] ) { + window.plugins[plugin].onLayoutChanged(); + } + } + + // finish the setup and actually start GoldenLayout + myLayout.init(); + + // work out which types are untagged based on our pre-configured layout + calculateUntaggedTypes(); + + // Set the Event handler for when the client window changes size + $(window).bind("resize", scrollAll); + + // Set Save State callback + myLayout.on( "stateChanged", onStateChanged ); + } + + + // + // + var onSwitchLayout = function (evnt) { + // get the new layout name from the select box + var name = $(evnt.target).val(); + var saveButton = $(".savelayout"); + + // check to see if the layout is in the list of known layouts + if( evenniaGoldenLayouts.has(name) ) { + var newLayout = evenniaGoldenLayouts.get(name); + + // reset the activeLayout + activeLayoutName = name; + activeLayoutModified = false; + + if( activeLayoutName === "default" ) { + saveButton.prop( "disabled", true ); + } else { + saveButton.prop( "disabled", false ); + } + + // store the newly requested layout into localStorage. + localStorage.setItem( "evenniaGoldenLayoutSavedState", JSON.stringify(newLayout) ); + localStorage.setItem( "evenniaGoldenLayoutSavedStateName", activeLayoutName ); + + // pull the trigger + resetUI( newLayout ); + } + } + + + // + // upload the named layout to the Evennia server as an option + var uploadLayouts = function () { + if( window.Evennia.isConnected() && myLayout.isInitialised ) { + var obj = {}; + + // iterate over each layout, storing the json for each into our temp obj + for( const key of evenniaGoldenLayouts.keys() ) { + if( key !== "default" ) { + obj[key] = JSON.stringify( evenniaGoldenLayouts.get(key) ); + } + } + + // store our temp object as json out to window.options.webclientLayouts + window.options["webclientActiveLayout"] = activeLayoutName; + window.options["webclientLayouts"] = JSON.stringify( obj ); + window.Evennia.msg("webclient_options", [], window.options); + } + } + + + + // + // + var onRemoveLayout = function (evnt) { + var name = $(evnt.target).parent().attr("id"); + var layout = $("#"+name); + + evenniaGoldenLayouts.delete(name); + layout.remove(); + + uploadLayouts(); + } + + + // + // This is a helper function for when adding items from the OptionsUI's layout listing + var addLayoutUI = function (layoutDiv, name) { + var div = $("
"); + + var option = $(""); + option.on("click", onSwitchLayout); + div.append(option); + + if( name !== "default" && name !== activeLayoutName ) { + var remove = $(""); + remove.on("click", onRemoveLayout); + div.append(remove); + } + + layoutDiv.append(div); + } + + + // + // + var onSaveLayout = function () { + // get the name from the select box + var name = $("#layoutName").val(); + var layouts = $("#goldenlayouts"); + + // make sure we have a valid name + if( name !== "" ) { + // Is this name new or pre-existing? + if( !evenniaGoldenLayouts.has(name) ) { + // this is a new name, so add a new UI item for it. + addLayoutUI( layouts, name ); + } + + // Force Close the Options Menu so that it isn't part of the saved layout. + window.plugins["options2"].onOpenCloseOptions(); + + // store the current layout to the local list of layouts + evenniaGoldenLayouts.set( name, myLayout.toConfig() ); + activeLayoutName = name; + activeLayoutModified = false; + + // store the newly requested layout into localStorage. + localStorage.setItem( "evenniaGoldenLayoutSavedState", JSON.stringify( evenniaGoldenLayouts.get(name) ) ); + localStorage.setItem( "evenniaGoldenLayoutSavedStateName", activeLayoutName ); + + uploadLayouts(); + + resetUI( evenniaGoldenLayouts.get(name) ); + } + } + + // // Public // @@ -393,13 +600,38 @@ let goldenlayout = (function () { // + // Add new HTML message to an existing Div pane, while + // honoring the pane's updateMethod and scroll state, etc. // - var onKeydown = function(evnt) { - var renamebox = document.getElementById("renamebox"); - if( renamebox ) { - return true; + var addMessageToPaneDiv = function (textDiv, message) { + let atBottom = false; + let updateMethod = textDiv.attr("updateMethod"); + + if ( updateMethod === "replace" ) { + textDiv.html(message); + } else if ( updateMethod === "append" ) { + textDiv.append(message); + } else { // line feed + textDiv.append("
" + message + "
"); + } + + // Calculate the scrollback state. + // + // This check helps us avoid scrolling to the bottom when someone is + // manually scrolled back, trying to read their backlog. + // Auto-scrolling would force them to re-scroll to their previous scroll position. + // Which, on fast updating games, destroys the utility of scrolling entirely. + // + //if( textDiv.scrollTop === (textDiv.scrollHeight - textDiv.offsetHeight) ) { + atBottom = true; + //} + + // if we are at the bottom of the window already, scroll to display the new content + if( atBottom ) { + let scrollHeight = textDiv.prop("scrollHeight"); + let clientHeight = textDiv.prop("clientHeight"); + textDiv.scrollTop( scrollHeight - clientHeight ); } - return false; } @@ -445,6 +677,66 @@ let goldenlayout = (function () { } + // + // + var onGotOptions = function (args, kwargs) { + // Reset the UI if the JSON layout sent from the server doesn't match the client's current JSON + if( "webclientLayouts" in kwargs ) { + var layouts = JSON.parse( kwargs["webclientLayouts"] ); + + // deserialize key/layout pairs into evenniaGoldenLayouts + for( var key in layouts ) { + if( key !== "default" && layouts.hasOwnProperty(key) ) { // codacy.com guard-rail + evenniaGoldenLayouts.set( key, JSON.parse(layouts[key]) ); + } + } + } + } + + + // + // + var onOptionsUI = function (parentdiv) { + var layoutName = $(""); + var saveButton = $(""); + var layoutDiv = $("
"); + + if( activeLayoutName === "default" ) { + saveButton.prop( "disabled", true ); + } + + for (const name of evenniaGoldenLayouts.keys() ) { + addLayoutUI(layoutDiv, name); + } + + // currently active layout + layoutName.val( activeLayoutName ); + layoutName.on("keydown", function (evnt) { + var name = $(evnt.target).val(); + if( name === "default" || name === "" ) { + saveButton.prop( "disabled", true ); + } else { + saveButton.prop( "disabled", false ); + } + }); + + // Layout selection on-change callback + saveButton.on("click", onSaveLayout); + + var saveDiv = $("
"); + saveDiv.append(layoutName); + saveDiv.append(saveButton); + + // add the selection dialog control to our parentdiv + parentdiv.addClass("goldenlayout-options-ui"); + parentdiv.append("
GoldenLayout Options:
"); + parentdiv.append("
Activate a new layout:
"); + parentdiv.append(layoutDiv); + parentdiv.append("
Save current layout as (best if used when logged in):
"); + parentdiv.append(saveDiv); + } + + // // var onText = function (args, kwargs) { @@ -453,11 +745,9 @@ let goldenlayout = (function () { var msgHandled = false; divs.forEach( function (div) { - let updateMethod = div.attr("updateMethod"); let txt = args[0]; - // yes, so add this text message to the target div - routeMsg( div, txt, updateMethod ); + addMessageToPaneDiv( div, txt ); msgHandled = true; }); @@ -483,72 +773,49 @@ let goldenlayout = (function () { // - // required Init me + // required Init var init = function (options) { // Set up our GoldenLayout instance built off of the default main-sub div var savedState = localStorage.getItem( "evenniaGoldenLayoutSavedState" ); + var activeName = localStorage.getItem( "evenniaGoldenLayoutSavedStateName" ); var mainsub = document.getElementById("main-sub"); - if( savedState !== null ) { - // Overwrite the global-variable configuration with the version from localstorage - window.goldenlayout_config = JSON.parse( savedState ); + // pre-load the evenniaGoldenLayouts with the hard-coded default + evenniaGoldenLayouts.set( "default", window.goldenlayout_config ); + + if( activeName !== null ) { + activeLayoutName = activeName; } - myLayout = new GoldenLayout( window.goldenlayout_config, mainsub ); + if( savedState !== null ) { + // Overwrite the global-variable configuration from + // webclient/js/plugins/goldenlayout_default_config.js + // with the version from localstorage + evenniaGoldenLayouts.set( activeLayoutName, JSON.parse(savedState) ); + } else { + localStorage.setItem( "evenniaGoldenLayoutSavedState", JSON.stringify( window.goldenlayout_config ) ); + localStorage.setItem( "evenniaGoldenLayoutSavedStateName", "default" ); + } + + myLayout = new window.GoldenLayout( evenniaGoldenLayouts.get(activeLayoutName), mainsub ); $("#prompt").remove(); // remove the HTML-defined prompt div $("#inputcontrol").remove(); // remove the cluttered, HTML-defined input divs - // register our component and replace the default messagewindow with the Main component - myLayout.registerComponent( "Main", function (container, componentState) { - let main = $("#messagewindow").addClass("content"); - initComponent(main, container, componentState, "untagged", "newlines" ); - }); - - // register our new input component - myLayout.registerComponent( "input", function (container, componentState) { - var promptfield = $("
"); - var formcontrol = $(""); - var button = $(""); - - var inputfield = $("
") - .append( button ) - .append( formcontrol ); - - $("
") - .append( promptfield ) - .append( inputfield ) - .appendTo( container.getElement() ); - - button.bind("click", function (evnt) { - // focus our textarea - $( $(evnt.target).siblings(".inputfield")[0] ).focus(); - // fake a carriage return event - var e = $.Event("keydown"); - e.which = 13; - $( $(evnt.target).siblings(".inputfield")[0] ).trigger(e); - }); - - container.on("tab", onInputCreate); - }); - - myLayout.registerComponent( "evennia", function (container, componentState) { - let div = $("
"); - initComponent(div, container, componentState, "all", "newlines"); - container.on("destroy", calculateUntaggedTypes); - }); + registerComponents( myLayout ); } - return { init: init, postInit: postInit, - onKeydown: onKeydown, + onGotOptions: onGotOptions, + onOptionsUI: onOptionsUI, onText: onText, getGL: function () { return myLayout; }, addKnownType: addKnownType, onTabCreate: onTabCreate, routeMessage: routeMessage, + addMessageToPaneDiv: addMessageToPaneDiv, } }()); window.plugin_handler.add("goldenlayout", goldenlayout); diff --git a/evennia/web/webclient/static/webclient/js/plugins/hotbuttons.js b/evennia/web/webclient/static/webclient/js/plugins/hotbuttons.js index 023db7eb5e..c486663aea 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/hotbuttons.js +++ b/evennia/web/webclient/static/webclient/js/plugins/hotbuttons.js @@ -17,16 +17,16 @@ * Copy evennia/web/webclient/templates/webclient/base.html to * mygame/web/template_overrides/webclient/base.html * - * Edit mygame/web/template_overrides/webclient/base.html to add: + * Edit mygame/web/template_overrides/webclient/base.html and before the goldenlayout.js plugin, add: * - * before the goldenlayout.js plugin tags or after the splithandler.js plugin tags * - * If you are using goldenlayout.js, uncomment the hotbuttons component in goldenlayout_default_config.js + * Then uncomment the hotbuttons component in goldenlayout_default_config.js * * Run: evennia collectstatic (say "yes" to the overwrite prompt) + * * Start Evennia * - * REQUIRES: goldenlayout.js OR splithandler.js + * REQUIRES: goldenlayout.js */ let hotbuttons = (function () { var dependenciesMet = false; @@ -95,47 +95,22 @@ let hotbuttons = (function () { } + // Public + // - // Add Buttons UI for SplitHandler - var addButtonsUI = function () { - var buttons = $( [ - "
", - "
", - "
", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - "
", - "
", - "
", - ].join("\n") ); - - // Add buttons in front of the existing #inputform - $("#input").prev().replaceWith(buttons); - - Split(["#main","#buttons","#input"], { - sizes: [85,5,10], - direction: "vertical", - gutterSize: 4, - minSize: [150,20,50], - }); - - for( var n=0; nDon\'t echo prompts to the main text area', - '
', - '', - '
', - '
', - '', - '
', - '', - '
', - ].join("\n"); - - // Create a new options Dialog - plugins['popups'].createDialog( 'optionsdialog', 'Options', content ); - } - - // - // addHelpUI - var addHelpUI = function () { - // Create a new Help Dialog - plugins['popups'].createDialog( 'helpdialog', 'Help', "" ); - } - - // addToolbarButton - var addToolbarButton = function () { - var optionsbutton = $( [ - '', - ].join("") ); - $('#toolbar').append( optionsbutton ); - } - - // - // Opens the options dialog - var doOpenOptions = function () { - if (!Evennia.isConnected()) { - alert("You need to be connected."); - return; - } - - plugins['popups'].togglePopup("#optionsdialog"); - } - - // - // When the user changes a setting from the interface - var onOptionCheckboxChanged = function () { - var name = $(this).data("setting"); - var value = this.checked; - - var changedoptions = {}; - changedoptions[name] = value; - Evennia.msg("webclient_options", [], changedoptions); - - options[name] = value; - } - - // Public functions - - // - // onKeydown check for 'ESC' key. - var onKeydown = function (event) { - var code = event.which; - - if (code === 27) { // Escape key - if ($('#helpdialog').is(':visible')) { - plugins['popups'].closePopup("#helpdialog"); - return true; - } - if ($('#optionsdialog').is(':visible')) { - plugins['popups'].closePopup("#optionsdialog"); - return true; - } - } - return false; - } - - // - // Called when options settings are sent from server - var onGotOptions = function (args, kwargs) { - options = kwargs; - - $.each(kwargs, function(key, value) { - var elem = $("[data-setting='" + key + "']"); - if (elem.length === 0) { - console.log("Could not find option: " + key); - console.log(args); - console.log(kwargs); - } else { - elem.prop('checked', value); - }; - }); - } - - // - // Called when the user logged in - var onLoggedIn = function (args, kwargs) { - $('#optionsbutton').removeClass('hidden'); - Evennia.msg("webclient_options", [], {}); - } - - // - // Display a "prompt" command from the server - var onPrompt = function (args, kwargs) { - // also display the prompt in the output window if gagging is disabled - if (("gagprompt" in options) && (!options["gagprompt"])) { - plugin_handler.onText(args, kwargs); - } - - // don't claim this Prompt as completed. - return false; - } - - // - // Make sure to close any dialogs on connection lost - var onConnectionClose = function () { - $('#optionsbutton').addClass('hidden'); - plugins['popups'].closePopup("#optionsdialog"); - plugins['popups'].closePopup("#helpdialog"); - } - - // - // Make sure to close any dialogs on connection lost - var onText = function (args, kwargs) { - // is helppopup set? and if so, does this Text have type 'help'? - if ('helppopup' in options && options['helppopup'] ) { - if (kwargs && ('type' in kwargs) && (kwargs['type'] == 'help') ) { - $('#helpdialogcontent').prepend('
'+ args + '
'); - plugins['popups'].togglePopup("#helpdialog"); - return true; - } - } - - return false; - } - - // - // Register and init plugin - var init = function () { - // Add GUI components - addOptionsUI(); - addHelpUI(); - - // Add Options toolbar button. - addToolbarButton(); - - // Pressing the settings button - $("#optionsbutton").bind("click", doOpenOptions); - - // Checking a checkbox in the settings dialog - $("[data-setting]").bind("change", onOptionCheckboxChanged); - - console.log('Options Plugin Initialized.'); - } - - return { - init: init, - onKeydown: onKeydown, - onLoggedIn: onLoggedIn, - onGotOptions: onGotOptions, - onPrompt: onPrompt, - onConnectionClose: onConnectionClose, - onText: onText, - } -})() -plugin_handler.add('options', options_plugin); diff --git a/evennia/web/webclient/static/webclient/js/plugins/options2.js b/evennia/web/webclient/static/webclient/js/plugins/options2.js index 2e5ff4a410..24acd4b314 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/options2.js +++ b/evennia/web/webclient/static/webclient/js/plugins/options2.js @@ -4,7 +4,7 @@ */ let options2 = (function () { - var options_container = null ; + var optionsContainer = null ; // // When the user changes a setting from the interface @@ -51,35 +51,6 @@ let options2 = (function () { } - // - // Create and register the "options" golden-layout component - var createOptionsComponent = function () { - var myLayout = window.plugins["goldenlayout"].getGL(); - - myLayout.registerComponent( "options", function (container, componentState) { - var plugins = window.plugins; - options_container = container.getElement(); - - // build the buttons - var div = $("
"); - - for( let plugin in plugins ) { - if( "onOptionsUI" in plugins[plugin] ) { - var card = $("
"); - var body = $("
"); - - plugins[plugin].onOptionsUI( body ); - - card.append(body); - card.appendTo( div ); - } - } - - div.appendTo( options_container ); - }); - } - - // handler for the "Options" button var onOpenCloseOptions = function () { var optionsComponent = { @@ -92,7 +63,7 @@ let options2 = (function () { // Create a new GoldenLayout tab filled with the optionsComponent above var myLayout = window.plugins["goldenlayout"].getGL(); - if( ! options_container ) { + if( ! optionsContainer ) { // open new optionsComponent var main = myLayout.root.getItemsByType("stack")[0].getActiveContentItem(); @@ -102,16 +73,19 @@ let options2 = (function () { .closeElement .off("click") .click( function () { - options_container = null; + optionsContainer = null; tab.contentItem.remove(); + window.plugins["default_in"].setKeydownFocus(true); }); - options_container = tab.contentItem; + optionsContainer = tab.contentItem; } }); main.parent.addChild( optionsComponent ); + + window.plugins["default_in"].setKeydownFocus(false); } else { - options_container.remove(); - options_container = null; + optionsContainer.remove(); + optionsContainer = null; } } @@ -132,6 +106,34 @@ let options2 = (function () { }); } + // + // Create and register the "options" golden-layout component + var onLayoutChanged = function () { + var myLayout = window.plugins["goldenlayout"].getGL(); + + myLayout.registerComponent( "options", function (container, componentState) { + var plugins = window.plugins; + optionsContainer = container.getElement(); + + // build the buttons + var div = $("
"); + + for( let plugin in plugins ) { + if( "onOptionsUI" in plugins[plugin] ) { + var card = $("
"); + var body = $("
"); + + plugins[plugin].onOptionsUI( body ); + + card.append(body); + card.appendTo( div ); + } + } + + div.appendTo( optionsContainer ); + }); + } + // // Called when the user logged in var onLoggedIn = function (args, kwargs) { @@ -165,7 +167,7 @@ let options2 = (function () { var postInit = function() { // Are we using GoldenLayout? if( window.plugins["goldenlayout"] ) { - createOptionsComponent(); + onLayoutChanged(); $("#optionsbutton").bind("click", onOpenCloseOptions); } @@ -176,10 +178,12 @@ let options2 = (function () { init: init, postInit: postInit, onGotOptions: onGotOptions, + onLayoutChanged: onLayoutChanged, onLoggedIn: onLoggedIn, onOptionsUI: onOptionsUI, onPrompt: onPrompt, onOptionCheckboxChanged: onOptionCheckboxChanged, + onOpenCloseOptions: onOpenCloseOptions, } })(); window.plugin_handler.add("options2", options2);