Show help in separate dialog (if option is enabled)

evennia/commands/default/help.py

@@ -42,10 +42,20 @@ class CmdHelp(Command):
     # the current cmdset with the call to self.func().
     return_cmdset = True
 
+
     # Help messages are wrapped in an EvMore call.  If you want to
     # avoid this, simply set the 'help_more' flag to False.
     help_more = True
 
+
+    def msg_help(self, text):
+        """
+        messages text to the caller, adding an extra oob argument to indicate
+        that this is a help command result and could be rendered in a separate
+        help window
+        """
+        self.msg((text, {"window": "help"}));
+
     @staticmethod
     def format_help_entry(title, help_text, aliases=None, suggested=None):
         """
@@ -179,7 +189,7 @@ class CmdHelp(Command):
                     hdict_cmd[cmd.help_category].append(cmd.key)
             [hdict_topic[topic.help_category].append(topic.key) for topic in all_topics]
             # report back
-            self.msg(self.format_help_list(hdict_cmd, hdict_topic))
+            self.msg_help(self.format_help_list(hdict_cmd, hdict_topic))
             return
 
         # Try to access a particular command
@@ -202,7 +212,7 @@ class CmdHelp(Command):
             if type(self).help_more:
                 evmore.msg(caller, formatted)
             else:
-                self.msg(formatted)
+                self.msg_help(formatted)
             return
 
         # try an exact database help entry match
@@ -215,13 +225,13 @@ class CmdHelp(Command):
             if type(self).help_more:
                 evmore.msg(caller, formatted)
             else:
-                self.msg(formatted)
+                self.msg_help(formatted)
             return
 
         # try to see if a category name was entered
         if query in all_categories:
-            self.msg(self.format_help_list({query:[cmd.key for cmd in all_cmds if cmd.help_category==query]},
+            self.msg_help(self.format_help_list({query:[cmd.key for cmd in all_cmds if cmd.help_category==query]},
-                                        {query:[topic.key for topic in all_topics if topic.help_category==query]}))
+                                                {query:[topic.key for topic in all_topics if topic.help_category==query]}))
             return
 
         # no exact matches found. Just give suggestions.

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

@@ -193,12 +193,31 @@ div {margin:0px;}
     z-index: 10;
     background-color: #fefefe;
     border: 1px solid #888;
-    width: 50%;
     color: black;
 
 }
 
+#optionsdialog {
+    width: 50%;
+}
+
+#helpdialog {
+    width: 725px;
+    height: 65%;
+}
+
+#helpdialog .dialogcontent {
+    background-color: #1e1e1e;
+    color: #ccc;
+}
+
+.dialogcontentparent {
+    height: calc(100% - 44px - 40px);
+}
+
 .dialogcontent {
+    overflow: auto;
+    height: 100%;
     padding: 20px;
 }
 

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

@@ -72,6 +72,20 @@ var input_history = function() {
             scratch: scratch}
 }();
 
+function openPopup(dialogname, content) {
+    var dialog = $(dialogname);
+    if (!dialog.length) {
+        console.log("Dialog " + renderto + " not found.");
+        return;
+    }
+
+    if (content) {
+        var contentel = dialog.find(".dialogcontent");
+        contentel.html(content);
+    }
+    dialog.show();
+}
+
 //
 // GUI Event Handlers
 //
@@ -115,9 +129,8 @@ function doOpenOptions() {
         alert("You need to be connected.");
         return;
     }
-    
+
-    var optionsdialog = $("#optionsdialog");
+    openPopup("#optionsdialog");
-    optionsdialog.show();
 }
 
 // Closes the currently open dialog
@@ -220,14 +233,25 @@ function doWindowResize() {
 function onText(args, kwargs) {
     // append message to previous ones, then scroll so latest is at
     // the bottom. Send 'cls' kwarg to modify the output class.
-    var mwin = $("#messagewindow");
+    var renderto = "main";
-    var cls = kwargs == null ? 'out' : kwargs['cls'];
+    if (kwargs["window"] == "help") {
-    mwin.append("<div class='" + cls + "'>" + args[0] + "</div>");
+        if (("helppopup" in options) && (options["helppopup"])) {
-    mwin.animate({
+            renderto = "#helpdialog";
-        scrollTop: document.getElementById("messagewindow").scrollHeight
+        }
-    }, 0);
+    }
 
-    onNewLine(args[0], null);
+    if (renderto == "main") {
+        var mwin = $("#messagewindow");
+        var cls = kwargs == null ? 'out' : kwargs['cls'];
+        mwin.append("<div class='" + cls + "'>" + args[0] + "</div>");
+        mwin.animate({
+            scrollTop: document.getElementById("messagewindow").scrollHeight
+        }, 0);
+
+        onNewLine(args[0], null);
+    } else {
+        openPopup(renderto, args[0]);
+    }
 }
 
 // Handle prompt output from the server

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

@@ -26,16 +26,26 @@
 
 <div id="optionsdialog" class="dialog">
     <div class="dialogtitle">Options<span class="dialogclose">&times;</span></div>
-    <div class="dialogcontent">
+    <div class="dialogcontentparent">
-        <h3>Output display</h3>
+        <div class="dialogcontent">
-        <label><input type="checkbox" data-setting="gagprompt" value="value">Gag prompts from output</label><br />
+            <h3>Output display</h3>
-        <label><input type="checkbox" data-setting="helppopup" value="value">Help in popup window</label><br />
+            <label><input type="checkbox" data-setting="gagprompt" value="value">Gag prompts from output</label><br />
-        <hr />
+            <label><input type="checkbox" data-setting="helppopup" value="value">Help in popup window</label><br />
-        <h3>Notifications</h3>
+            <hr />
-        <label><input type="checkbox" data-setting="notification_popup" value="value">Popup window</label><br />
+            <h3>Notifications</h3>
-        <label><input type="checkbox" data-setting="notification_sound" value="value">Sound</label><br />
+            <label><input type="checkbox" data-setting="notification_popup" value="value">Popup window</label><br />
-        
+            <label><input type="checkbox" data-setting="notification_sound" value="value">Sound</label><br />
+        </div>
     </div>
 </div>
+
+<div id="helpdialog" class="dialog">
+    <div class="dialogtitle">Help<span class="dialogclose">&times;</span></div>
+    <div class="dialogcontentparent">
+        <div class="dialogcontent">
+        </div>
+    </div>
+</div>
+
 {% endblock %}