Add user selected names to each new pane and some CSS

evennia/web/webclient/static/webclient/css/webclient.css

@@ -147,6 +147,19 @@ div {margin:0px;}
     cursor: pointer;
 }
 
+.button {
+    width: fit-content;
+    padding: 1em;
+    color: black;
+    border: 1px solid black;
+    background-color: darkgray;
+    margin: 0 auto;
+}
+
+.splitbutton:hover {
+    cursor: pointer;
+}
+
 #optionsbutton {
     width: 2rem;
     font-size: 2rem;
@@ -256,6 +269,10 @@ div {margin:0px;}
     overflow-x: hidden;
 }
 
+.split-sub {
+    padding: .5rem;
+}
+
 .content {
     border: 1px solid #C0C0C0;
     box-shadow: inset 0 1px 2px #e4e4e4;

evennia/web/webclient/static/webclient/js/splithandler.js

@@ -1,50 +1,50 @@
 // Use split.js to create a basic ui
 var SplitHandler = (function () {
-  var num_splits = 0;
   var split_panes = {};
 
   var set_pane_types = function(splitpane, types) {
     split_panes[splitpane]['types'] = types;
   }
 
-  var dynamic_split = function(splitpane, direction, update_method1, update_method2) {
-    var first  = ++num_splits;
-    var second = ++num_splits;
 
-    var first_div  = $( '<div id="split_'+first +'" class="split split-'+direction+'" />' )
+  var dynamic_split = function(splitpane, direction, pane_name1, pane_name2, update_method1, update_method2, sizes) {
-    var first_sub  = $( '<div id="split_'+first +'-sub"/>' )
+    // find the sub-div of the pane we are being asked to split
-    var second_div = $( '<div id="split_'+second+'" class="split split-'+direction+'" />' )
+    splitpanesub = splitpane + '-sub';
-    var second_sub = $( '<div id="split_'+second+'-sub"/>' )
 
-    // check to see if this pane contains the primary message window.
+    // create the new div stack to replace the sub-div with.
-    contents = $('#'+splitpane).contents();
+    var first_div  = $( '<div id="'+pane_name1+'" class="split split-'+direction+'" />' )
+    var first_sub  = $( '<div id="'+pane_name1+'-sub" class="split-sub" />' )
+    var second_div = $( '<div id="'+pane_name2+'" class="split split-'+direction+'" />' )
+    var second_sub = $( '<div id="'+pane_name2+'-sub" class="split-sub" />' )
+
+    // check to see if this sub-pane contains anything
+    contents = $('#'+splitpanesub).contents();
     if( contents ) {
-      // it does, so move it to the first new div (TODO -- selectable between first/second?)
+      // it does, so move it to the first new div-sub (TODO -- selectable between first/second?)
       contents.appendTo(first_sub);
     }
-
     first_div.append( first_sub );
     second_div.append( second_sub );
 
-    // update the split_panes array to remove this split
+    // update the split_panes array to remove this pane name
     delete( split_panes[splitpane] );
 
     // now vaporize the current split_N-sub placeholder and create two new panes.
-    $('#'+splitpane).parent().append(first_div);
+    $('#'+splitpane).append(first_div);
-    $('#'+splitpane).parent().append(second_div);
+    $('#'+splitpane).append(second_div);
-    $('#'+splitpane).remove();
+    $('#'+splitpane+'-sub').remove();
 
     // And split
-    Split(['#split_'+first,'#split_'+second], {
+    Split(['#'+pane_name1,'#'+pane_name2], {
       direction: direction,
-      sizes: [50,50],
+      sizes: sizes,
       gutterSize: 4,
       minSize: [50,50],
     });
 
-    // store our new splits for future splits/uses by the main UI.
+    // store our new split sub-divs for future splits/uses by the main UI.
-    split_panes['split_'+first +'-sub'] = { 'types': [], 'update_method': update_method1 };
+    split_panes[pane_name1] = { 'types': [], 'update_method': update_method1 };
-    split_panes['split_'+second+'-sub'] = { 'types': [], 'update_method': update_method2 };
+    split_panes[pane_name2] = { 'types': [], 'update_method': update_method2 };
   }
 
 
@@ -63,7 +63,7 @@ var SplitHandler = (function () {
       minSize: [50,50],
     });
 
-    split_panes['main-sub'] = {'types': [], 'update_method': 'append'};
+    split_panes['main']  = { 'types': [], 'update_method': 'append' };
 
     var input_render = Mustache.render(input_template);
     $('[data-role-input]').html(input_render);

evennia/web/webclient/static/webclient/js/webclient_gui.js

@@ -15,6 +15,7 @@
 (function () {
 "use strict"
 
+var num_splits = 0;
 
 var options = {};
 
@@ -167,7 +168,7 @@ function onKeydown (event) {
       return;
     }
 
-    inputfield.focus();
+    //inputfield.focus();
 
     if (code === 13) { // Enter key sends text
         doSendText();
@@ -245,14 +246,6 @@ function onText(args, kwargs) {
             known_types.push(msgtype);
         }
 
-        if ( msgtype == 'help' ) {
-            if (("helppopup" in options) && (options["helppopup"])) {
-                openPopup("#helpdialog", args[0]);
-                return;
-            }
-            // fall through to the default output
-
-        } else {
         // pass this message to each pane that has this msgtype mapped
         if( SplitHandler ) {
             for ( var key in SplitHandler.split_panes) {
@@ -260,12 +253,13 @@ function onText(args, kwargs) {
                 // is this message type mapped to this pane?
                 if ( (pane['types'].length > 0) && pane['types'].includes(msgtype) ) {
                     // yes, so append/replace this pane's inner div with this message
+                    var text_div = $('#'+key+'-sub');
                     if ( pane['update_method'] == 'replace' ) {
-                            $('#'+key).html(args[0])
+                        text_div.html(args[0])
                     } else {
-                            $('#'+key).append(args[0]);
+                        text_div.append(args[0]);
-                            var scrollHeight = $('#'+key).parent().prop("scrollHeight");
+                        var scrollHeight = text_div.parent().prop("scrollHeight");
-                            $('#'+key).parent().animate({ scrollTop: scrollHeight }, 0);
+                        text_div.parent().animate({ scrollTop: scrollHeight }, 0);
                     }
                     // record sending this message to a pane, no need to update the default div
                     use_default_pane = false;
@@ -273,7 +267,6 @@ function onText(args, kwargs) {
             }
         }
     }
-    }
 
     // append message to default pane, then scroll so latest is at the bottom.
     if(use_default_pane) {
@@ -441,19 +434,39 @@ function doStartDragDialog(event) {
     $(document).bind("mouseup", undrag);
 }
 
-
 function onSplitDialogClose() {
     var pane      = $("input[name=pane]:checked").attr("value");
     var direction = $("input[name=direction]:checked").attr("value");
+    var new_pane1 = $("input[name=new_pane1]").val();
+    var new_pane2 = $("input[name=new_pane2]").val();
     var flow1     = $("input[name=flow1]:checked").attr("value");
     var flow2     = $("input[name=flow2]:checked").attr("value");
 
-    SplitHandler.dynamic_split( pane, direction, flow1, flow2 );
+    if( new_pane1 == "" ) {
+        new_pane1 = 'pane_'+num_splits;
+        num_splits++;
+    }
+
+    if( new_pane2 == "" ) {
+        new_pane2 = 'pane_'+num_splits;
+        num_splits++;
+    }
+
+    if( document.getElementById(new_pane1) ) {
+        alert('An element: "' + new_pane1 + '" already exists');
+        return;
+    }
+
+    if( document.getElementById(new_pane2) ) {
+        alert('An element: "' + new_pane2 + '" already exists');
+        return;
+    }
+
+    SplitHandler.dynamic_split( pane, direction, new_pane1, new_pane2, flow1, flow2, [50,50] );
 
     closePopup("#splitdialog");
 }
 
-
 function onSplitDialog() {
     var dialog = $("#splitdialogcontent");
     dialog.empty();
@@ -467,6 +480,10 @@ function onSplitDialog() {
         dialog.append('<input type="radio" name="pane" value="'+ pane +'">'+ pane +'<br />');
     }
 
+    dialog.append("<h3>New Pane Names</h3>");
+    dialog.append('<input type="text" name="new_pane1" value="" />');
+    dialog.append('<input type="text" name="new_pane2" value="" />');
+
     dialog.append("<h3>New First Pane Flow</h3>");
     dialog.append('<input type="radio" name="flow1" value="append" checked>append<br />');
     dialog.append('<input type="radio" name="flow1" value="replace">replace<br />');

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

@@ -16,14 +16,12 @@
 
 <!-- The "Main" Content -->
 <div id="main"  class="split split-vertical" data-role-default>
-  <div id="main-sub">
+  <div id="main-sub" class="split-sub">
     <div id="messagewindow"></div>
   </div>
 </div>
-
 <!-- The "Input" Pane -->
-<div id="input" class="split split-vertical" data-role-input data-update-append>
+<div id="input" class="split split-vertical" data-role-input data-update-append></div>
-</div>
 
 <!-- Basic UI Components -->
 <div id="splitdialog" class="dialog">