Add a dual_input plugin

evennia/web/webclient/static/webclient/js/plugins/default_in.js

@@ -8,9 +8,10 @@ let defaultin_plugin = (function () {
     //
     // handle the default <enter> key triggering onSend()
     var onKeydown = function (event) {
-	$("#inputfield").focus();
+        var inputfield = $("#inputfield");
-        if ( (event.which === 13) && (!event.shiftKey) ) {  // Enter Key without shift
+ 
-            var inputfield = $("#inputfield");
+        // Enter Key without shift
+        if ( inputfield.is(":focus") && (event.which === 13) && (!event.shiftKey) ) {
             var outtext = inputfield.val();
             var lines = outtext.trim().replace(/[\r]+/,"\n").replace(/[\n]+/, "\n").split("\n");
             for (var i = 0; i < lines.length; i++) {

evennia/web/webclient/static/webclient/js/plugins/dual_input.js

@@ -0,0 +1,72 @@
+/*
+ *
+ * Dual Input Pane Plugin (Requires splithandler plugin)
+ *
+ * This adds a second input window for games that really benefit from having two separate,
+ * high-complexity commands being created at the same time.
+ *
+ * Note: Incompatible with hotbuttons plugin because both Split() the same location
+ *       Split.js doesn't seem to support adding multiple splits at the same <tag> level.
+ */
+plugin_handler.add('dual_input', (function () {
+    //
+    // onKeydown check if the second inputfield is focused.
+    // If so, send the input on '<Enter>' key.
+    var onKeydown = function () {
+        let inputfield = $("#inputfield2");
+        if ( inputfield.is(":focus") ) {
+            if( (event.which === 13) && (!event.shiftKey) ) {
+                var outtext = inputfield.val();
+                var lines = outtext.trim().replace(/[\r\n]+/,"\n").split("\n");
+
+                for (var i = 0; i < lines.length; i++) {
+                    plugin_handler.onSend( lines[i].trim() );
+                }
+
+                inputfield.val('');
+                event.preventDefault();
+                return true;
+            }
+        }
+        return false;
+    }
+
+    //
+    // Initialize me
+    var init = function() {
+        // Add buttons to the UI
+        var input2 = $( [
+              '<div id="input2" class="split split-vertical">',
+              ' <textarea id="inputfield2" type="text"></textarea>',
+              '</div>',
+            ].join("\n") );
+
+        // Add second inputform between the existing #main and #inputform,
+        // replacing the previous gutter div added by the splithandler plugin
+        $('#input').prev().replaceWith(input2);
+
+        Split(['#main','#input2','#input'], {
+            sizes: [80,10,10],
+            direction: 'vertical',
+            gutterSize: 4,
+            minSize: [150,50,50],
+        });
+
+        $('#inputfield2').css({
+            "display": "inline",
+            "height": "100%",
+            "width": "100%",
+            "background-color": "black",
+            "color": "white",
+            "padding": "0 .45rem",
+            "font-size": "1.1rem",
+            "font-family": "'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace"
+            });
+        console.log("Dual Input Plugin Initialized.");
+    }
+
+    return {
+        init: init,
+        onKeydown: onKeydown,
+    }
+})());

evennia/web/webclient/static/webclient/js/plugins/history.js

@@ -6,50 +6,72 @@
 let history_plugin = (function () {
 
     // Manage history for input line
-    var history_max = 21;
+    var history_max = 20;
-    var history = new Array();
+    var history = {};
-    var history_pos = 0;
+    var history_pos = {};
-
-    history[0] = ''; // the very latest input is empty for new entry.
 
     //
-    // move back in the history
+    // Add a new textarea to track history for.
-    var back = function () {
+    var track_history_for_id = function(id) {
-        // step backwards in history stack
+        if( ! history.hasOwnProperty( id ) ) {
-        history_pos = Math.min(++history_pos, history.length - 1);
+            history[id] = new Array;
-        return history[history.length - 1 - history_pos];
+            history_pos[id] = -1;
+        } else {
+            console.log('IGNORED -- already tracking history for that DOM element!');
+        }
     }
 
     //
-    // move forward in the history
+    // Return whichever inputfield (if any) is focused, out of the set we are tracking
-    var fwd = function () {
+    var get_focused_input = function () {
-        // step forwards in history stack
+        let inputfield = $( document.activeElement );
-        history_pos = Math.max(--history_pos, 0);
+
-        return history[history.length - 1 - history_pos];
+        // is the focused element one of the ones we are tracking history for?
+        if( history.hasOwnProperty( inputfield.attr('id') ) ) { 
+            return inputfield;
+        }
+        return null;
+    }
+
+    //
+    // move back from the history (to newer elements)
+    var back = function (id) {
+        // step back in history queue, to the most recently stored entry.
+        if( history_pos[id] >= 0 ) {
+            history_pos[id]--;
+
+            // if we've stepped "before" the first element of our queue, return new, empty string
+            if( history_pos[id] == -1 ) {
+                return '';
+            }
+        }
+
+        return history[id][ history_pos[id] ];
+    }
+
+    //
+    // move forward into the history (to older elements)
+    var fwd = function (id) {
+        // step forward in history queue, restricted by bounds checking
+        if( history_pos[id] < Math.min( history[id].length - 1, history_max - 1 ) ) {
+            history_pos[id]++;
+        }
+        return history[id][ history_pos[id] ];
     }
 
     //
     // add a new history line
-    var add = function (input) {
+    var add = function (id, input) {
         // add a new entry to history, don't repeat latest
-        if (input && input != history[history.length-2]) {
+        if (input && input != history[id][0]) {
-            if (history.length >= history_max) {
+            // make sure to trim the history queue length to 'history_max'
-                history.shift(); // kill oldest entry
+            if (history[id].length + 1 >= history_max) {
+                history[id].pop(); // remove oldest entry from queue
             }
-            history[history.length-1] = input;
+            history[id].unshift(input); // add newest entry to beginning of queue
-            history[history.length] = '';
         }
-        // reset the position to the last history entry
+        // reset the position to the beginning of the queue
-        history_pos = 0;
+        history_pos[id] = -1;
-    }
-
-    //
-    // Add input to the scratch line
-    var scratch = function (input) {
-        // Put the input into the last history entry (which is normally empty)
-        // without making the array larger as with add.
-        // Allows for in-progress editing to be saved.
-        history[history.length-1] = input;
     }
 
     // Public
@@ -57,39 +79,52 @@ let history_plugin = (function () {
     //
     // Handle up arrow and down arrow events.
     var onKeydown = function(event) {
-        var code = event.which;
+        var keycode = event.which;
-        var history_entry = null;
-        var inputfield = $("#inputfield");
 
-        if (code === 38) { // Arrow up
+        // Is one of the two input fields focused?
-            history_entry = back();
+        let inputfield = get_focused_input();
-        }
+        if( inputfield != null ) {
-        else if (code === 40) { // Arrow down
+            let id = inputfield.attr('id')
-            history_entry = fwd();
+            let history_entry = null; // check the keycode for up/down arrows
-        }
+            if (keycode === 40) { // Arrow down
+                history_entry = back(id);
+            }
+            else if (keycode === 38) { // Arrow up
+                history_entry = fwd(id);
+            }
 
-        if (history_entry !== null) {
+            if (history_entry !== null) {
-            // Performing a history navigation
+                // Performing a history navigation
-            // replace the text in the input and move the cursor to the end of the new value
+                // replace the text in the input and move the cursor to the end of the new value
-            inputfield.val('');
+                inputfield.blur().focus().val(history_entry);
-            inputfield.blur().focus().val(history_entry);
+                event.preventDefault();
-            event.preventDefault();
+                return true;
-            return true;
+            }
         }
-
         return false;
     }
 
     //
     // Listen for onSend lines to add to history
     var onSend = function (line) {
-        add(line);
+        let inputfield = get_focused_input();
+        if( inputfield != null ) {
+            add(inputfield.attr('id'), line);
+        }
         return null; // we are not returning an altered input line
     }
 
     //
     // Init function
     var init = function () {
+        track_history_for_id('inputfield'); // The default inputfield
+
+        // check to see if the dual_input plugin is enabled.
+        if( !(typeof plugins['dual_input'] === "undefined") ) {
+            console.log('configuring history tracking for dual_input plugin');
+            track_history_for_id('inputfield2');
+        }
+
         console.log('History Plugin Initialized.');
     } 
 

evennia/web/webclient/templates/webclient/base.html

@@ -72,8 +72,10 @@ JQuery available.
         <script src={% static "webclient/js/webclient_gui.js" %} language="javascript" type="text/javascript" charset="utf-8"></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>
         <script src={% static "webclient/js/plugins/splithandler.js" %} language="javascript" type="text/javascript"></script>
+<!-- <script src={% static "webclient/js/plugins/dual_input.js" %} language="javascript" type="text/javascript"></script> -->
+<!-- <script src={% static "webclient/js/plugins/hotbuttons.js" %} language="javascript" type="text/javascript"></script> -->
+        <script src={% static "webclient/js/plugins/history.js" %} language="javascript" type="text/javascript"></script>
         <script src={% static "webclient/js/plugins/default_in.js" %} language="javascript" type="text/javascript"></script>
         <script src={% static "webclient/js/plugins/oob.js" %} language="javascript" type="text/javascript"></script>
         <script src={% static "webclient/js/plugins/notifications.js" %} language="javascript" type="text/javascript"></script>