From e164b63d2b3a4e4263204e8c0963e04f9c4f73b2 Mon Sep 17 00:00:00 2001 From: Jeremy Osborne Date: Mon, 20 Feb 2012 20:34:28 -0800 Subject: [PATCH] Some webclient suggestions and practice committing to evennia. text2html.py and webclient.css * Remove inline formatting and place in CSS file. This frees up the client to change the basic color scheme without modifying the server file. * Added a target="_blank" to links that are created to force a new tab (or window) to be opened in lieu of leaving the web client when a link is clicked. webclient.html * Added a void action to the form, just in case. evennia_webclient.js * Added code to move the caret to the end of the input box when the history is changed (up or down arrow listeners). --- src/utils/text2html.py | 17 +++--- src/web/media/css/webclient.css | 17 ++++++ src/web/media/javascript/evennia_webclient.js | 57 +++++++++++++++---- src/web/templates/prosimii/webclient.html | 2 +- 4 files changed, 75 insertions(+), 18 deletions(-) diff --git a/src/utils/text2html.py b/src/utils/text2html.py index d7b175938a..8c72ba3934 100644 --- a/src/utils/text2html.py +++ b/src/utils/text2html.py @@ -41,24 +41,25 @@ class TextToHTMLparser(object): re.S|re.M|re.I) def re_color(self, text): - "Replace ansi colors with html color tags" + """Replace ansi colors with html color class names. + Let the client choose how it will display colors, if it wishes to.""" for colorname, code in self.colorcodes: regexp = "(?:%s)(.*?)(?:%s)" % (code, self.normalcode) regexp = regexp.replace('[', r'\[') - text = re.sub(regexp, r'''\1''' % colorname, text) + text = re.sub(regexp, r'''\1''' % colorname, text) return text def re_bold(self, text): - "Replace ansi hilight with bold text" + "Replace ansi hilight with strong text element." regexp = "(?:%s)(.*?)(?:%s)" % ('\033[1m', self.normalcode) regexp = regexp.replace('[', r'\[') - return re.sub(regexp, r'\1', text) + return re.sub(regexp, r'\1', text) def re_underline(self, text): - "Replace ansi underline with html equivalent" + "Replace ansi underline with html underline class name." regexp = "(?:%s)(.*?)(?:%s)" % ('\033[4m', self.normalcode) regexp = regexp.replace('[', r'\[') - return re.sub(regexp, r'\1', text) + return re.sub(regexp, r'\1', text) def remove_bells(self, text): "Remove ansi specials" @@ -79,7 +80,9 @@ class TextToHTMLparser(object): def convert_urls(self, text): "Replace urls (http://...) by valid HTML" regexp = r"((ftp|www|http)(\W+\S+[^).,:;?\]\}(\) \r\n$]+))" - return re.sub(regexp, r'\1 ', text) + # -> added target to output prevent the web browser from attempting to + # change pages (and losing our webclient session). + return re.sub(regexp, r'\1', text) def do_sub(self, m): "Helper method to be passed to re.sub." diff --git a/src/web/media/css/webclient.css b/src/web/media/css/webclient.css index 4844c590ac..cde38ffcd4 100644 --- a/src/web/media/css/webclient.css +++ b/src/web/media/css/webclient.css @@ -39,6 +39,23 @@ a:hover, a:active { color: #ccc } /* Error messages (red) */ .err { color: #f00 } +/* Style specific classes corresponding to formatted, narative text. */ +.white { color: white; } +.cyan { color: #00FFFF; } +.blue { color: blue; } +.red { color: red; } +.magenta { color: #FF00FF; } +.lime { color: lime; } +.yellow { color: yellow; } +.gray { color: gray; } +.teal { color: teal; } +.navy { color: navy; } +.maroon { color: maroon; } +.purple { color: purple; } +.green { color: green; } +.olive { color: olive; } +.underline { text-decoration: underline; } + /* Container surrounding entire chat */ #wrapper { position: relative; diff --git a/src/web/media/javascript/evennia_webclient.js b/src/web/media/javascript/evennia_webclient.js index ce162c0ee8..d9e6dc5b1a 100644 --- a/src/web/media/javascript/evennia_webclient.js +++ b/src/web/media/javascript/evennia_webclient.js @@ -34,6 +34,46 @@ contain the 'mode' of the request to be handled by the protocol: // jQuery must be imported by the calling html page before this script // There are plenty of help on using the jQuery library on http://jquery.com/ +/** + * jQuery extension that will forward the caret to the end of the input, and + * won't harm other elements (although calling this on multiple inputs might + * not have the expectec consequences). + * + * Thank you + * http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area + * for the good starting point. + */ +$.fn.appendCaret = function() { + return this.each(function() { + var range, + // Index at where to place the caret. + end, + self = this; + + if (self.setSelectionRange) { + // other browsers + end = self.value.length; + self.focus(); + // NOTE: Need to delay the caret movement until after the callstack. + setTimeout(function() { + self.setSelectionRange(end, end); + }, 0); + } + else if (self.createTextRange) { + // IE + end = self.value.length - 1; + range = self.createTextRange(); + range.collapse(true); + range.moveEnd('character', end); + range.moveStart('character', end); + // NOTE: I haven't tested to see if IE has the same problem as + // W3C browsers seem to have in this context (needing to fire + // select after callstack). + range.select(); + } + }); +}; + // Server communications @@ -192,10 +232,12 @@ function history_add(input) { // Catching keyboard shortcuts $(document).keydown( function(event) { - // Get the pressed key - var code = event.keyCode ? event.keyCode : event.which; + // Get the pressed key (normalized by jQuery) + var code = event.which, + inputField = $("#inputfield"); + // always focus input field no matter which key is pressed - $("#inputfield")[0].focus(); + inputField.focus(); // Special keys recognized by client @@ -204,18 +246,13 @@ $(document).keydown( function(event) { if (code == 13) { // Enter Key webclient_input(); event.preventDefault(); - return false; } else { if (code == 38) { // arrow up 38 - $("#inputfield").val(function(index, value){ - return history_step_back(); - }); + inputField.val(history_step_back()).appendCaret(); } else if (code == 40) { // arrow down 40 - $("#inputfield").val(function(index, value){ - return history_step_fwd(); - }); + inputField.val(history_step_fwd()).appendCaret(); } } }); diff --git a/src/web/templates/prosimii/webclient.html b/src/web/templates/prosimii/webclient.html index ddab711f4d..313736329e 100644 --- a/src/web/templates/prosimii/webclient.html +++ b/src/web/templates/prosimii/webclient.html @@ -36,7 +36,7 @@ to the local copy.

-
+
Logged in Players: {{num_players_connected}}