Added an undo button for multi-level undo of splits

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

@@ -155,6 +155,19 @@ div {margin:0px;}
     cursor: pointer;
 }
 
+#undobutton {
+    width: 2rem;
+    font-size: 2rem;
+    color: #a6a6a6;
+    background-color: transparent;
+    border: 0px;
+}
+
+#undobutton:hover {
+    color: white;
+    cursor: pointer;
+}
+
 .button {
     width: fit-content;
     padding: 1em;

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

@@ -1,6 +1,7 @@
 // Use split.js to create a basic ui
 var SplitHandler = (function () {
   var split_panes = {};
+  var backout_list = new Array;
 
   var set_pane_types = function(splitpane, types) {
     split_panes[splitpane]['types'] = types;
@@ -26,7 +27,8 @@ var SplitHandler = (function () {
     first_div.append( first_sub );
     second_div.append( second_sub );
 
-    // update the split_panes array to remove this pane name
+    // update the split_panes array to remove this pane name, but store it for the backout stack
+    var backout_settings = split_panes[splitpane];
     delete( split_panes[splitpane] );
 
     // now vaporize the current split_N-sub placeholder and create two new panes.
@@ -45,6 +47,69 @@ var SplitHandler = (function () {
     // store our new split sub-divs for future splits/uses by the main UI.
     split_panes[pane_name1] = { 'types': [], 'update_method': update_method1 };
     split_panes[pane_name2] = { 'types': [], 'update_method': update_method2 };
+
+    // add our new split to the backout stack
+    backout_list.push( {'pane1': pane_name1, 'pane2': pane_name2, 'undo': backout_settings} );
+  }
+
+
+  var undo_split = function() {
+    // pop off the last split pair
+    var back = backout_list.pop();
+    if( !back ) {
+      return;
+    }
+
+    // Collect all the divs/subs in play
+    var pane1 = back['pane1'];
+    var pane2 = back['pane2'];
+    var pane1_sub = $('#'+pane1+'-sub');
+    var pane2_sub = $('#'+pane2+'-sub');
+    var pane1_parent = $('#'+pane1).parent();
+    var pane2_parent = $('#'+pane2).parent();
+
+    if( pane1_parent.attr('id') != pane2_parent.attr('id') ) {
+      // sanity check failed...somebody did something weird...bail out
+      console.log( pane1 );
+      console.log( pane2 );
+      console.log( pane1_parent );
+      console.log( pane2_parent );
+      return;
+    }
+
+    // create a new sub-pane in the panes parent
+    var parent_sub = $( '<div id="'+pane1_parent.attr('id')+'-sub" class="split-sub" />' )
+
+    // check to see if the special #messagewindow is in either of our sub-panes.
+    var msgwindow = pane1_sub.find('#messagewindow')
+    if( !msgwindow ) {
+        //didn't find it in pane 1, try pane 2
+        msgwindow = pane2_sub.find('#messagewindow')
+    }
+    if( msgwindow ) {
+        // It is, so collect all contents into it instead of our parent_sub div
+        // then move it to parent sub div, this allows future #messagewindow divs to flow properly
+        msgwindow.append( pane1_sub.contents() );
+        msgwindow.append( pane2_sub.contents() );
+        parent_sub.append( msgwindow );
+    } else {
+        //didn't find it, so move the contents of the two panes' sub-panes into the new sub-pane
+        parent_sub.append( pane1_sub.contents() );
+        parent_sub.append( pane2_sub.contents() );
+    }
+
+    // clear the parent
+    pane1_parent.empty();
+
+    // add the new sub-pane back to the parent div
+    pane1_parent.append(parent_sub);
+
+    // pull the sub-div's from split_panes
+    delete split_panes[pane1];
+    delete split_panes[pane2];
+
+    // add our parent pane back into the split_panes list for future splitting
+    split_panes[pane1_parent.attr('id')] = back['undo'];
   }
 
 
@@ -75,5 +140,6 @@ var SplitHandler = (function () {
     set_pane_types: set_pane_types,
     dynamic_split: dynamic_split,
     split_panes: split_panes,
+    undo_split: undo_split,
   }
 })();

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

@@ -15,7 +15,7 @@
 (function () {
 "use strict"
 
-var num_splits = 0;
+var num_splits = 0; //unique id counter for default split-panel names
 
 var options = {};
 
@@ -544,9 +544,12 @@ $(document).ready(function() {
       SplitHandler.init();
       $("#splitbutton").bind("click", onSplitDialog);
       $("#panebutton").bind("click", onPaneControlDialog);
+      $("#undobutton").bind("click", SplitHandler.undo_split);
+      $("#optionsbutton").hide();
     } else {
       $("#splitbutton").hide();
       $("#panebutton").hide();
+      $("#undobutton").hide();
     }
 
     if ("Notification" in window) {

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

@@ -12,6 +12,7 @@
   <button id="optionsbutton" type="button" aria-haspopup="true" aria-owns="#optionsdialog">&#x2699;<span class="sr-only sr-only-focusable">Settings</span></button>
   <button id="splitbutton" type="button" aria-haspopup="true" aria-owns="#optionsdialog">&#x21f9;<span class="sr-only sr-only-focusable">Splits</span></button>
   <button id="panebutton" type="button" aria-haspopup="true" aria-owns="#optionsdialog">&#x2699;<span class="sr-only sr-only-focusable">Splits</span></button>
+  <button id="undobutton" type="button" aria-haspopup="true" aria-owns="#optionsdialog">&#x21B6;<span class="sr-only sr-only-focusable">Splits</span></button>
 </div>
 
 <!-- The "Main" Content -->