Merge pull request #1752 from friarzen/master

Some Webclient bugfixes

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

@@ -30,32 +30,31 @@ plugin_handler.add('hotbuttons', (function () {
     // Add Buttons
     var addButtonsUI = function () {
         var buttons = $( [
-                          '<div id="buttons" class="split split-vertical">',
+              '<div id="buttons" class="split split-vertical">',
-                          ' <div id="buttonsform" class="wrapper">',
+              ' <div id="buttonsform">',
-                          '  <div id="buttonscontrol" class="input-group">',
+              '  <div id="buttonscontrol" class="input-group">',
-                          '   <button class="btn" id="assign_button0" type="button" value="button0">unassigned</button>',
+              '   <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_button1" type="button" value="button1">unassigned</button>',
-                          '   <button class="btn" id="assign_button2" type="button" value="button2">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_button3" type="button" value="button3">unassigned</button>',
-                          '   <button class="btn" id="assign_button4" type="button" value="button4">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_button5" type="button" value="button5">unassigned</button>',
-                          '   <button class="btn" id="assign_button6" type="button" value="button6">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_button7" type="button" value="button7">unassigned</button>',
-                          '   <button class="btn" id="assign_button8" type="button" value="button8">unassigned</button>',
+              '   <button class="btn" id="assign_button8" type="button" value="button8">unassigned</button>',
-                          '  </div>',
+              '  </div>',
-                          ' </div>',
+              ' </div>',
-                          '</div>',
+              '</div>',
-                         ].join("\n") );
+            ].join("\n") );
 
         // Add buttons in front of the existing #inputform
-        buttons.insertBefore('#inputform');
+        $('#input').prev().replaceWith(buttons);
-        $('#inputform').addClass('split split-vertical');
 
-        Split(['#buttons','#inputform'], {
+        Split(['#main','#buttons','#input'], {
+            sizes: [85,5,10],
             direction: 'vertical',
-            sizes: [50,50],
             gutterSize: 4,
-            minSize: 150,
+            minSize: [150,20,50],
         });
     }
 

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

@@ -77,10 +77,12 @@ let options_plugin = (function () {
         if (code === 27) { // Escape key
             if ($('#helpdialog').is(':visible')) {
                 plugins['popups'].closePopup("#helpdialog");
-            } else {
+                return true;
-                plugins['popups'].closePopup("#optionsdialog");
+            }
+            if ($('#optionsdialog').is(':visible')) {
+                plugins['popups'].closePopup("#optionsdialog");
+                return true;
             }
-            return true;
         }
         return false;
     }
@@ -129,6 +131,21 @@ let options_plugin = (function () {
         plugins['popups'].closePopup("#helpdialog");
     }
 
+    //
+    // Make sure to close any dialogs on connection lost
+    var onText = function (args, kwargs) {
+        // is helppopup set? and if so, does this Text have type 'help'?
+        if ('helppopup' in options && options['helppopup'] ) {
+            if (kwargs && ('type' in kwargs) && (kwargs['type'] == 'help') ) {
+                $('#helpdialogcontent').append('<div>'+ args + '</div>');
+                plugins['popups'].togglePopup("#helpdialog");
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     //
     // Register and init plugin
     var init = function () {
@@ -155,6 +172,7 @@ let options_plugin = (function () {
         onGotOptions: onGotOptions,
         onPrompt: onPrompt,
         onConnectionClose: onConnectionClose,
+        onText: onText,
     }
 })()
 plugin_handler.add('options', options_plugin);

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

@@ -183,12 +183,12 @@ let splithandler_plugin = (function () {
         var dialog = $("#splitdialogcontent");
         dialog.empty();
 
-	var selection = '<select name="pane">';
+        var selection = '<select name="pane">';
         for ( var pane in split_panes ) {
-	    selection = selection + '<option value="' + pane + '">' + pane + '</option>';
+            selection = selection + '<option value="' + pane + '">' + pane + '</option>';
         }
-	selection = "Pane to split: " + selection + "</select> ";
+        selection = "Pane to split: " + selection + "</select> ";
-	dialog.append(selection);
+        dialog.append(selection);
 
         dialog.append('<input type="radio" name="direction" value="vertical" checked>top/bottom </>');
         dialog.append('<input type="radio" name="direction" value="horizontal">side-by-side <hr />');
@@ -203,7 +203,7 @@ let splithandler_plugin = (function () {
         dialog.append('<input type="radio" name="flow2" value="replace">replace </>');
         dialog.append('<input type="radio" name="flow2" value="append">append <hr />');
 
-	dialog.append('<div id="splitclose" class="btn btn-large btn-outline-primary float-right">Split</div>');
+        dialog.append('<div id="splitclose" class="btn btn-large btn-outline-primary float-right">Split</div>');
 
         $("#splitclose").bind("click", onSplitDialogClose);
 
@@ -251,21 +251,21 @@ let splithandler_plugin = (function () {
         var dialog = $("#panedialogcontent");
         dialog.empty();
 
-	var selection = '<select name="assign-pane">';
+        var selection = '<select name="assign-pane">';
         for ( var pane in split_panes ) {
-	    selection = selection + '<option value="' + pane + '">' + pane + '</option>';
+            selection = selection + '<option value="' + pane + '">' + pane + '</option>';
         }
-	selection = "Assign to pane: " + selection + "</select> <hr />";
+        selection = "Assign to pane: " + selection + "</select> <hr />";
-	dialog.append(selection);
+        dialog.append(selection);
 
-	var multiple = '<select multiple name="assign-type">';
+        var multiple = '<select multiple name="assign-type">';
         for ( var type in known_types ) {
-	    multiple = multiple + '<option value="' + known_types[type] + '">' + known_types[type] + '</option>';
+            multiple = multiple + '<option value="' + known_types[type] + '">' + known_types[type] + '</option>';
         }
-	multiple = "Content types: " + multiple + "</select> <hr />";
+        multiple = "Content types: " + multiple + "</select> <hr />";
-	dialog.append(multiple);
+        dialog.append(multiple);
 
-	dialog.append('<div id="paneclose" class="btn btn-large btn-outline-primary float-right">Assign</div>');
+        dialog.append('<div id="paneclose" class="btn btn-large btn-outline-primary float-right">Assign</div>');
 
         $("#paneclose").bind("click", onPaneControlDialogClose);
 
@@ -276,9 +276,9 @@ let splithandler_plugin = (function () {
     // Close "Pane Controls" dialog
     var onPaneControlDialogClose = function () {
         var pane = $("select[name=assign-pane]").val();
-	var types = $("select[name=assign-type]").val();
+        var types = $("select[name=assign-type]").val();
 
-	// var types = new Array; 
+        // var types = new Array; 
         // $('#splitdialogcontent input[type=checkbox]:checked').each(function() {
         //     types.push( $(this).attr('value') );
         // });
@@ -287,24 +287,24 @@ let splithandler_plugin = (function () {
 
         plugins['popups'].closePopup("#panedialog");
     }
+
     //
     // helper function sending text to a pane
     var txtToPane = function (panekey, txt) {
-	var pane = split_panes[panekey];
+        var pane = split_panes[panekey];
-	var text_div = $('#' + panekey + '-sub');
+        var text_div = $('#' + panekey + '-sub');
 
-	if ( pane['update_method'] == 'replace' ) {
+        if ( pane['update_method'] == 'replace' ) {
-	    text_div.html(txt)
+            text_div.html(txt)
-	} else if ( pane['update_method'] == 'append' ) {
+        } else if ( pane['update_method'] == 'append' ) {
-	    text_div.append(txt);
+            text_div.append(txt);
-	    var scrollHeight = text_div.parent().prop("scrollHeight");
+            var scrollHeight = text_div.parent().prop("scrollHeight");
-	    text_div.parent().animate({ scrollTop: scrollHeight }, 0);
+            text_div.parent().animate({ scrollTop: scrollHeight }, 0);
-	} else {  // line feed
+        } else {  // line feed
-	    text_div.append("<div class='out'>" + txt + "</div>");
+            text_div.append("<div class='out'>" + txt + "</div>");
-	    var scrollHeight = text_div.parent().prop("scrollHeight");
+            var scrollHeight = text_div.parent().prop("scrollHeight");
-	    text_div.parent().animate({ scrollTop: scrollHeight }, 0);
+            text_div.parent().animate({ scrollTop: scrollHeight }, 0);
-	}
+        }
-	
     }
 
 
@@ -316,53 +316,76 @@ let splithandler_plugin = (function () {
     //
     // Accept plugin onText events
     var onText = function (args, kwargs) {
-
+        // If the message is not itself tagged, we'll assume it
-	// If the message is not itself tagged, we'll assume it
+        // should go into any panes with 'all' or 'rest' set
-	// should go into any panes with 'all' or 'rest' set
         var msgtype = "rest";
 
         if ( kwargs && 'type' in kwargs ) {
-	    msgtype = kwargs['type'];
+            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)
                 known_types.push(msgtype);
             }
-	}
+        }
-	var target_panes = [];
+        var target_panes = [];
-	var rest_panes = [];
+        var rest_panes = [];
-	    
+
-	for (var key in split_panes) {
+        for (var key in split_panes) {
-	    var pane = split_panes[key];
+            var pane = split_panes[key];
-	    // is this message type mapped to this pane (or does the pane has an 'all' type)?
+            // is this message type mapped to this pane (or does the pane has an 'all' type)?
-	    if (pane['types'].length > 0) {	
+            if (pane['types'].length > 0) {
-		if (pane['types'].includes(msgtype) || pane['types'].includes('all')) {
+                if (pane['types'].includes(msgtype) || pane['types'].includes('all')) {
-		    target_panes.push(key);
+                    target_panes.push(key);
-		} else if (pane['types'].includes('rest')) {
+                } else if (pane['types'].includes('rest')) {
-		    // store rest-panes in case we have no explicit to send to
+                    // store rest-panes in case we have no explicit to send to
-		    rest_panes.push(key);
+                    rest_panes.push(key);
-		}
+                }
-	    } else {
+            } else {
-		// unassigned panes are assumed to be rest-panes too
+                // unassigned panes are assumed to be rest-panes too
-		rest_panes.push(key);
+                rest_panes.push(key);
-	    }
+            }
-	}
+        }
-	var ntargets = target_panes.length;
+        var ntargets = target_panes.length;
-	var nrests = rest_panes.length;
+        var nrests = rest_panes.length;
-	if (ntargets > 0) {
+        if (ntargets > 0) {
-	    // we have explicit target panes to send to
+            // we have explicit target panes to send to
-	    for (var i=0; i<ntargets; i++) {
+            for (var i=0; i<ntargets; i++) {
-		txtToPane(target_panes[i], args[0]);
+                txtToPane(target_panes[i], args[0]);
-	    }
+            }
-	    return true;
+            return true;
-	} else if (nrests > 0) {
+        } else if (nrests > 0) {
-	    // no targets, send remainder to rest-panes/unassigned
+            // no targets, send remainder to rest-panes/unassigned
-	    for (var i=0; i<nrests; i++) {
+            for (var i=0; i<nrests; i++) {
-		txtToPane(rest_panes[i], args[0]);
+                txtToPane(rest_panes[i], args[0]);
-	    }
+            }
-	    return true;
+            return true;
-	}
+        }
-	// unhandled message
+        // unhandled message
+        return false;
+    }
+
+    //
+    // onKeydown check for 'ESC' key.
+    var onKeydown = function (event) {
+        var code = event.which;
+
+        if (code === 27) { // Escape key
+            if ($('#splitdialog').is(':visible')) {
+                plugins['popups'].closePopup("#splitdialog");
+                return true;
+            }
+            if ($('#panedialog').is(':visible')) {
+                plugins['popups'].closePopup("#panedialog");
+                return true;
+            }
+        }
+
+        // capture all keys while one of our "modal" dialogs is open
+        if ($('#splitdialogcontent').is(':visible') || $('#panedialogcontent').is(':visible')) {
+            return true;
+        }
+
         return false;
     }
 
@@ -409,6 +432,7 @@ let splithandler_plugin = (function () {
         dynamic_split: dynamic_split,
         undo_split: undo_split,
         set_pane_types: set_pane_types,
+        onKeydown: onKeydown,
     }
 })()
 plugin_handler.add('splithandler', splithandler_plugin);

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

@@ -73,10 +73,10 @@ JQuery available.
         <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/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>
-        <script src={% static "webclient/js/plugins/splithandler.js" %} language="javascript" type="text/javascript"></script>
         <script src={% static "webclient/js/plugins/default_out.js" %} language="javascript" type="text/javascript"></script>
     {% endblock %}