From 9205fcced8a7e413fb8c6bbe555b76585ca4a46a Mon Sep 17 00:00:00 2001 From: Brenden Tuck Date: Sun, 8 Apr 2018 12:33:38 -0400 Subject: [PATCH] Added an undo button for multi-level undo of splits --- .../static/webclient/css/webclient.css | 13 ++++ .../static/webclient/js/splithandler.js | 68 ++++++++++++++++++- .../static/webclient/js/webclient_gui.js | 5 +- .../templates/webclient/webclient.html | 1 + 4 files changed, 85 insertions(+), 2 deletions(-) diff --git a/evennia/web/webclient/static/webclient/css/webclient.css b/evennia/web/webclient/static/webclient/css/webclient.css index 75dd91ce2a..7a33cfa207 100644 --- a/evennia/web/webclient/static/webclient/css/webclient.css +++ b/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; diff --git a/evennia/web/webclient/static/webclient/js/splithandler.js b/evennia/web/webclient/static/webclient/js/splithandler.js index aa6ea4364a..81210df854 100644 --- a/evennia/web/webclient/static/webclient/js/splithandler.js +++ b/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 = $( '
' ) + + // 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, } })(); diff --git a/evennia/web/webclient/static/webclient/js/webclient_gui.js b/evennia/web/webclient/static/webclient/js/webclient_gui.js index b975ae7044..8929a7529c 100644 --- a/evennia/web/webclient/static/webclient/js/webclient_gui.js +++ b/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) { diff --git a/evennia/web/webclient/templates/webclient/webclient.html b/evennia/web/webclient/templates/webclient/webclient.html index b750257048..74bef631cf 100644 --- a/evennia/web/webclient/templates/webclient/webclient.html +++ b/evennia/web/webclient/templates/webclient/webclient.html @@ -12,6 +12,7 @@ +