Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added oEmbed to the chat demo

  • Loading branch information...
commit f19b9323f4ed6b6d6a7939b768284f3fd55e8f83 1 parent e3b4b6b
@miyagawa authored
Showing with 40 additions and 17 deletions.
  1. +12 −2 eg/demo.pl
  2. +28 −15 eg/templates/chat.html
View
14 eg/demo.pl
@@ -102,22 +102,32 @@ sub get {
package ChatPostHandler;
use base qw(Tatsumaki::Handler);
+use HTML::Entities;
sub post {
my($self, $channel) = @_;
# TODO: decode should be done in the framework or middleware
my $v = $self->request->params;
- my $text = Encode::decode_utf8($v->{text});
+ my $text = Encode::decode_utf8($v->{text});
+ my $html = $self->format_message($text);
my $mq = Tatsumaki::MessageQueue->instance($channel);
$mq->publish({
- type => "message", text => $text, ident => $v->{ident},
+ type => "message", html => $html, ident => $v->{ident},
avatar => $v->{avatar}, name => $v->{name},
address => $self->request->address, time => scalar localtime(time),
});
$self->write({ success => 1 });
}
+sub format_message {
+ my($self, $text) = @_;
+ $text =~ s{ (https?://\S+) | ([&<>"']+) }
+ { $1 ? do { my $url = HTML::Entities::encode($1); qq(<a href="$url" class="oembed">$url</a>) } :
+ $2 ? HTML::Entities::encode($2) : '' }egx;
+ $text;
+}
+
package ChatBacklogHandler;
use base qw(Tatsumaki::Handler);
__PACKAGE__->asynchronous(1);
View
43 eg/templates/chat.html
@@ -12,6 +12,7 @@
? }
<script src="/static/jquery.md5.js"></script>
<script src="/static/jquery.cookie.js"></script>
+<script src="/static/jquery.oembed.js"></script>
<script>
var cookieName = 'tatsumaki_chat_ident';
function doPost(el1, el) {
@@ -33,17 +34,23 @@
$(function(){
var onNewEvent = function(e) {
try {
- var avatar = e.avatar || ("http://www.gravatar.com/avatar/" + $.md5(e.ident || 'foo'));
+ var src = e.avatar || ("http://www.gravatar.com/avatar/" + $.md5(e.ident || 'foo'));
var name = e.name || e.ident || 'Anonymous';
- var img = $('<img/>').attr('src', avatar).attr('alt', name).addClass('avatar');
+ var avatar = $('<img/>').attr('src', src).attr('alt', name);
if (e.ident) {
var link = e.ident.match(/https?:/) ? e.ident : 'mailto:' + e.ident;
- img = $('<a/>').attr('href', link).attr('target', '_blank').append(img);
+ avatar = $('<a/>').attr('href', link).attr('target', '_blank').append(avatar);
}
- $('#messages').prepend(
- $('<li class="message"/>').text(e.text).prepend(img)
- .append($('<span/>').addClass('meta').text(' (' + e.time + ' from ' + e.address + ')'))
- );
+ avatar = $('<td/>').addClass('avatar').append(avatar);
+
+ var message = $('<td/>').addClass('chat-message');
+ if (e.text) message.text(e.text);
+ if (e.html) message.html(e.html);
+ message.find('a.oembed').oembed();
+
+ var meta = $('<td/>').addClass('meta').text(' (' + e.time + ' from ' + e.address + ')');
+ $('#messages').prepend($('<tr/>').addClass('message').append(avatar).append(message).append(meta));
+ console.log($('#messages').html());
} catch(e) { if (console) console.log(e) };
}
@@ -75,19 +82,25 @@
</script>
<link rel="stylesheet" href="/static/screen.css" />
<style>
-ul#messages {
- list-style-type: none;
+#messages {
margin-top: 1em;
+ margin-right: 3em;
+ width: 100%;
+}
+.avatar {
+ width: 25px;
+ vertical-align: top;
}
-img.avatar {
+.avatar img {
width: 25px; height: 25px;
- vertical-align: middle;
+ vertical-align: top;
margin-right: 0.5em;
}
-.message {
- margin-top: 0.5em;
+.chat-message {
+ width: 70%;
}
.meta {
+ vertical-align: top;
color: #888;
font-size: 0.8em;
}
@@ -105,8 +118,8 @@ <h1 class="chat-room-name">Chat room: <?= $channel ?></h1>
Something to say: <input id="chat" type="text" size="48"/>
</form>
-<ul id="messages">
-</ul>
+<table id="messages">
+</table>
<div id="footer">Powered by <a href="http://github.com/miyagawa/Tatsumaki">Tatsumaki/<?= $Tatsumaki::VERSION ?></a>.</div>
Please sign in to comment.
Something went wrong with that request. Please try again.