Clean up a use-before-load dependency error and lint

This commit is contained in:
Brenden Tuck 2019-04-05 20:46:59 -04:00
parent 9ffbb72d8c
commit 764f84d5d2
5 changed files with 161 additions and 182 deletions

View file

@ -6,46 +6,9 @@
let goldenlayout = (function () {
var myLayout;
var input_component = null;
var known_types = ["all", "untagged"];
var untagged = [];
var config = {
content: [{
type: "column",
content: [{
type: "row",
content: [{
type: "column",
content: [{
type: "component",
componentName: "Main",
isClosable: false,
tooltip: "Main - drag to desird position.",
componentState: {
types: "untagged",
update_method: "newlines",
},
}]
}],
}, {
type: "component",
componentName: "input",
id: "inputComponent",
height: 12,
tooltip: "Input - The last input in the layout is always the default.",
}, {
type: "component",
componentName: "input",
id: "inputComponent",
height: 12,
isClosable: false,
tooltip: "Input - The last input in the layout is always the default.",
}]
}]
};
var newTabConfig = {
title: "Untitled",
type: "component",
@ -112,6 +75,40 @@ let goldenlayout = (function () {
}
//
//
var closeTypelistDropdown = function () {
let content = $("#typelist").parent().find(".content");
let checkboxes = $("#typelist :input");
let types = [];
for (let i=0; i<checkboxes.length; i++ ) {
let box = checkboxes[i];
if( $(box).prop("checked") ) {
types.push( $(box).val() );
}
}
content.attr("types", types.join(" "));
myLayout.emit("stateChanged");
calculateUntaggedTypes();
$("#typelist").remove();
}
//
//
var closeUpdatelistDropdown = function () {
let content = $("#updatelist").parent().find(".content");
let value = $("input[name=upmethod]:checked").val();
content.attr("update_method", value );
myLayout.emit("stateChanged");
$("#updatelist").remove();
}
//
// Handle the renameDropdown
var renameDropdown = function (evnt) {
@ -139,28 +136,6 @@ let goldenlayout = (function () {
}
//
//
var closeTypelistDropdown = function () {
let content = $("#typelist").parent().find(".content");
let checkboxes = $("#typelist :input");
let types = [];
for (let i=0; i<checkboxes.length; i++ ) {
let box = checkboxes[i];
if( $(box).prop("checked") ) {
types.push( $(box).val() );
}
}
content.attr("types", types.join(" "));
myLayout.emit("stateChanged");
calculateUntaggedTypes();
$("#typelist").remove();
}
//
//
var onSelectTypesClicked = function (evnt) {
@ -211,27 +186,15 @@ let goldenlayout = (function () {
}
//
//
var closeUpdatelistDropdown = function () {
let content = $("#updatelist").parent().find(".content");
let value = $("input[name=upmethod]:checked").val();
content.attr("update_method", value );
myLayout.emit("stateChanged");
$("#updatelist").remove();
}
//
//
var onUpdateMethodClicked = function (evnt) {
let element = $(evnt.data.contentItem.element);
let content = element.find(".content");
let update_method = content.attr("update_method");
let nlchecked = (update_method == "newlines") ? "checked="checked"" : "";
let apchecked = (update_method == "append") ? "checked="checked"" : "";
let rpchecked = (update_method == "replace") ? "checked="checked"" : "";
let nlchecked = (update_method == "newlines") ? "checked='checked'" : "";
let apchecked = (update_method == "append") ? "checked='checked'" : "";
let rpchecked = (update_method == "replace") ? "checked='checked'" : "";
let menu = $("<div id='updatelist'>");
let div = $("<div class='updatelistsub'>");
@ -383,7 +346,7 @@ let goldenlayout = (function () {
//
var routeMsg = function (text_div, txt, update_method) {
if ( update_method == "replace" ) {
text_div.html(txt)
text_div.html(txt);
} else if ( update_method == "append" ) {
text_div.append(txt);
} else { // line feed
@ -438,7 +401,7 @@ let goldenlayout = (function () {
msgtype = kwargs["type"];
if ( ! known_types.includes(msgtype) ) {
// this is a new output type that can be mapped to panes
console.log("detected new output type: " + msgtype)
console.log("detected new output type: " + msgtype);
known_types.push(msgtype);
untagged.push(msgtype);
}
@ -502,10 +465,11 @@ let goldenlayout = (function () {
var mainsub = document.getElementById("main-sub");
if( savedState !== null ) {
config = JSON.parse( savedState );
// Overwrite the global-variable configuration with the version from localstorage
window.goldenlayout_config = JSON.parse( savedState );
}
myLayout = new GoldenLayout( config, mainsub );
myLayout = new GoldenLayout( window.goldenlayout_config, mainsub );
$("#inputcontrol").remove(); // remove the cluttered, HTML-defined input divs
@ -551,8 +515,6 @@ let goldenlayout = (function () {
onKeydown: onKeydown,
onText: onText,
getGL: function () { return myLayout },
getConfig: function () { return config },
setConfig: function (newconfig) { config = newconfig },
addKnownType: function (newtype) { known_types.push(newtype) },
}
})();

View file

@ -0,0 +1,55 @@
/*
* Define the default GoldenLayout-based config
*
* The layout defined here will need to be customized based on which plugins
* you are using and what layout you want players to see by default.
*
* This needs to be loaded in the HTML before the goldenlayout.js plugin
*
* The contents of the global variable will be overwritten by what is in the
* browser's localstorage after visiting this site.
*
* For full documentation on all of the keywords see:
* http://golden-layout.com/docs/Config.html
*
*/
var goldenlayout_config = { // Global Variable used in goldenlayout.js init()
content: [{
type: "column",
content: [{
type: "row",
content: [{
type: "column",
content: [{
type: "component",
componentName: "Main",
isClosable: false, // remove the 'x' control to close this
tooltip: "Main - drag to desird position.",
componentState: {
types: "untagged",
update_method: "newlines",
},
}]
}],
// }, { // Uncomment the following to add a default hotbuttons component
// type: "component",
// componentName: "hotbuttons",
// id: "inputComponent", // mark 'ignore this component during output message processing'
// height: 6,
// isClosable: false,
}, {
type: "component",
componentName: "input",
id: "inputComponent", // mark for ignore
height: 12, // percentage
tooltip: "Input - The last input in the layout is always the default.",
}, {
type: "component",
componentName: "input",
id: "inputComponent", // mark for ignore
height: 12, // percentage
isClosable: false, // remove the 'x' control to close this
tooltip: "Input - The last input in the layout is always the default.",
}]
}]
};

View file

@ -94,4 +94,4 @@ let history_plugin = (function () {
onSend: onSend,
}
})()
plugin_handler.add("history", history_plugin);
window.plugin_handler.add("history", history_plugin);

View file

@ -2,8 +2,9 @@
*
* Assignable "hot-buttons" Plugin
*
* This adds a bar of 9 buttons that can be shift-click assigned whatever is in the textinput buffer, so you can simply
* click the button again and have it execute those commands, instead of having to type it all out again and again.
* This adds a bar of 9 buttons that can be shift-click assigned,
* whatever text is in the bottom textinput buffer will be copied.
* Once assigned, clicking the button again and have it execute those commands.
*
* It stores these commands as server side options.
*
@ -12,100 +13,27 @@
* Stop Evennia
*
* Copy this file to mygame/web/static_overrides/webclient/js/plugins/hotbuttons.js
* Copy evennia/web/webclient/templates/webclient/base.html to mygame/web/template_overrides/webclient/base.html
*
* 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:
* <script src={% static "webclient/js/plugins/hotbuttons.js" %} language="javascript" type="text/javascript"></script>
* after the other <script></script> plugin tags.
* <script src={% static "webclient/js/plugins/hotbuttons.js" %} type="text/javascript"></script>
* before the goldenlayout.js plugin tags or after the splithandler.js <script></script> plugin tags
*
* If you are using goldenlayout.js, 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
*/
let hotbuttons = (function () {
var dependencies_met = true; // To start, assume either splithandler or goldenlayout plugin is enabled.
var dependencies_met = false;
var num_buttons = 9;
var command_cache = new Array;
var hotButtonConfig = {
content: [{
type: "column",
content: [{
type: "row",
content: [{
type: "column",
content: [{
type: "component",
componentName: "Main",
isClosable: false,
tooltip: "Main - drag to desird position.",
componentState: {
types: "untagged",
update_method: "newlines",
},
}]
}],
}, {
type: "component",
componentName: "hotbuttons",
id: "inputComponent",
height: 12,
tooltip: "Input - The last input in the layout is always the default.",
}, {
type: "component",
componentName: "input",
id: "inputComponent",
height: 12,
tooltip: "Input - The last input in the layout is always the default.",
}, {
type: "component",
componentName: "input",
id: "inputComponent",
height: 12,
isClosable: false,
tooltip: "Input - The last input in the layout is always the default.",
}]
}]
};
//
// Add Buttons UI for SplitHandler
var addButtonsUI = function () {
var buttons = $( [
"<div id='buttons' class='split split-vertical'>",
" <div id='buttonsform'>",
" <div id='buttonscontrol' class='input-group'>",
" <button class='btn' id='assign_button0' type='button' value='button0'>unassigned</button>",
" <button class='btn' id='assign_button1' type='button' value='button1'>unassigned</button>",
" <button class='btn' id='assign_button2' type='button' value='button2'>unassigned</button>",
" <button class='btn' id='assign_button3' type='button' value='button3'>unassigned</button>",
" <button class='btn' id='assign_button4' type='button' value='button4'>unassigned</button>",
" <button class='btn' id='assign_button5' type='button' value='button5'>unassigned</button>",
" <button class='btn' id='assign_button6' type='button' value='button6'>unassigned</button>",
" <button class='btn' id='assign_button7' type='button' value='button7'>unassigned</button>",
" <button class='btn' id='assign_button8' type='button' value='button8'>unassigned</button>",
" </div>",
" </div>",
"</div>",
].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; n<num_buttons; n++ ) {
command_cache.push("unassigned");
$("#assign_button"+n).click( n, hotButtonClicked );
}
}
//
// collect command text
var assignButton = function(n, text) { // n is 1-based
@ -168,10 +96,48 @@ let hotbuttons = (function () {
}
//
// Add Buttons UI for SplitHandler
var addButtonsUI = function () {
var buttons = $( [
"<div id='buttons' class='split split-vertical'>",
" <div id='buttonsform'>",
" <div id='buttonscontrol' class='input-group'>",
" <button class='btn' id='assign_button0' type='button' value='button0'>unassigned</button>",
" <button class='btn' id='assign_button1' type='button' value='button1'>unassigned</button>",
" <button class='btn' id='assign_button2' type='button' value='button2'>unassigned</button>",
" <button class='btn' id='assign_button3' type='button' value='button3'>unassigned</button>",
" <button class='btn' id='assign_button4' type='button' value='button4'>unassigned</button>",
" <button class='btn' id='assign_button5' type='button' value='button5'>unassigned</button>",
" <button class='btn' id='assign_button6' type='button' value='button6'>unassigned</button>",
" <button class='btn' id='assign_button7' type='button' value='button7'>unassigned</button>",
" <button class='btn' id='assign_button8' type='button' value='button8'>unassigned</button>",
" </div>",
" </div>",
"</div>",
].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; n<num_buttons; n++ ) {
command_cache.push("unassigned");
$("#assign_button"+n).click( n, hotButtonClicked );
}
}
//
// Create and register the hotbuttons golden-layout component
var buildComponent = function () {
var myLayout = plugins["goldenlayout"].getGL();
var myLayout = window.plugins["goldenlayout"].getGL();
myLayout.registerComponent( "hotbuttons", function (container, componentState) {
console.log("hotbuttons");
@ -184,7 +150,7 @@ let hotbuttons = (function () {
command_cache.push("unassigned");
// initialize button command cache and onClick handler
button = $("<button class='btn' id='assign_button"+x+"' type='button' value='button"+x+"'>");
var button = $("<button class='btn' id='assign_button"+x+"' type='button' value='button"+x+"'>");
button.html("unassigned");
button.click( x, hotButtonClicked );
@ -213,16 +179,8 @@ let hotbuttons = (function () {
//
// Initialize me
var init = function() {
// Are we using GoldenLayout?
if( plugins["goldenlayout"] ) {
// update goldenlayout"s global config
plugins["goldenlayout"].setConfig( hotButtonConfig );
// wait for postInit() to create the required component
dependencies_met = true;
}
// Are we using splithandler?
if( plugins["splithandler"] ) {
if( window.plugins["splithandler"] ) {
addButtonsUI();
dependencies_met = true;
}
@ -232,14 +190,17 @@ let hotbuttons = (function () {
//
//
var postInit = function() {
// Are we using GoldenLayout?
if( window.plugins["goldenlayout"] ) {
buildComponent();
dependencies_met = true;
}
if( dependencies_met ) {
if( plugins["goldenlayout"] ) {
buildComponent();
}
console.log("HotButtons Plugin Initialized.");
} else {
console.log("HotButtons Plugin Dependencies Not Met. No splithandler.js or goldenlayout.js plugin found.");
console.log("HotButtons Plugin Dependencies Not Met!!");
console.log("No splithandler.js or goldenlayout.js plugin found.");
}
}

View file

@ -75,6 +75,7 @@ JQuery available.
<!-- Load gui library -->
{% block guilib_import %}
<script src={% static "webclient/js/webclient_gui.js" %} language="javascript" type="text/javascript" charset="utf-8"></script>
<script src={% static "webclient/js/plugins/goldenlayout_default_config.js" %} type="text/javascript"></script>
<script src={% static "webclient/js/plugins/popups.js" %} language="javascript" type="text/javascript"></script>
<script src={% static "webclient/js/plugins/options.js" %} language="javascript" type="text/javascript"></script>
<script src={% static "webclient/js/plugins/history.js" %} language="javascript" type="text/javascript"></script>