Commit aabb7b14 authored by fred's avatar fred

add a chat page to emissions

parent ad8bc9f9
......@@ -14,6 +14,7 @@ urlpatterns = patterns('',
url(r'^grille$', 'panikweb.views.grid', name='grid'),
url(r'^emissions/$', 'panikweb.views.emissions', name='emissions'),
url(r'^emissions/(?P<slug>[\w,-]+)/episodes/$', 'panikweb.views.emissionEpisodes', name='emissionEpisodes'),
url(r'^emissions/(?P<slug>[\w,-]+)/chat/$', 'panikweb.views.chat', name='emission-chat'),
url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<slug>[\w,-]+)/$', 'panikweb.views.episode', name='episode-view'),
url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<slug>[\w,-]+)/$', 'panikweb.views.episode', name='episode-view'),
url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<episode_slug>[\w,-]+)/embed/(?P<pk>\d+)/$',
......
......@@ -726,3 +726,11 @@ class Party(TemplateView):
return context
party = Party.as_view()
class Chat(DetailView, EmissionMixin):
model = Emission
template_name = 'chat.html'
chat = Chat.as_view()
......@@ -1868,3 +1868,86 @@ p.playlist-disclaimer {
display: inline;
padding-left: 0;
}
div.commands {
display: flex;
width: 90vw;
}
@media screen and (min-width:760px){
div.commands {
width: calc(90vw - 240px);
}
}
input#msg {
flex-grow: 1;
}
div.chat-area {
max-width: 60em;
}
#chat {
margin-top: 1ex;
}
#chat div.msg {
position: relative;
margin-bottom: 1ex;
transition: opacity 1s ease;
}
#chat div.msg.new {
opacity: 0;
}
#chat div.msg.msg-out span.content {
font-size: 90%;
color: #444;
}
#chat span.from {
display: inline-block;
width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
color: #888;
position: absolute;
}
#chat span.content {
display: inline-block;
padding-left: 11rem;
}
#chat div.msg.info span.content {
padding-left: 1rem;
font-style: italic;
color: #666;
}
h1.top > span.chat.with-logo {
position: relative;
left: 140px;
display: inline-block;
max-width: calc(100% - 140px);
}
div.top-logo {
position: absolute;
top: 30px;
}
div.top-logo img {
border: 2px solid black;
}
@media screen and (max-width:760px){
div.top-logo {
display: none;
}
h1.top > span.chat.with-logo {
position: static;
max-width: none;
}
}
var urlParams;
var connection;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
......@@ -52,6 +54,7 @@ $(function() {
if (textStatus == "error") {
doLog('Sorry! And error occur when loading page content','error');
}
if (connection) { connection.disconnect(); }
new_html = $.parseHTML(html);
new_content = $(new_html).find('#Changing>*');
$main.hide().empty().append(new_content).show();
......@@ -541,6 +544,120 @@ $(function() {
$gallery.find('div.first').on('click', function() { $(this).toggle('fade'); return false; });
});
/* CHAT */
var $chat = $('#chat');
if ($chat.length) {
var $msg = $('input#msg');
var $send = $('button#send');
var chat_roster = Object();
if (window.localStorage['pa-nick'] !== undefined) {
$('.nick input').val(window.localStorage['pa-nick']);
}
$('.nick input').on('keydown', function(ev) {
if (ev.keyCode == 13) {
$('.nick button').trigger('click');
return false;
}
return true;
});
$('.nick button').on('click', function() {
window.localStorage['pa-nick'] = $('.nick input').val();
var nick = window.localStorage['pa-nick'];
connection = new Strophe.Connection("/http-bind");
connection.connect('im.panik', null, function(status, error) {
if (status == Strophe.Status.CONNECTING) {
$('.nick').show();
$('.commands').hide();
//console.log('Strophe is connecting.');
} else if (status == Strophe.Status.CONNFAIL) {
$('.nick').show();
$('.commands').hide();
//console.log('Strophe failed to connect.');
} else if (status == Strophe.Status.DISCONNECTING) {
$('.nick').show();
$('.commands').hide();
//console.log('Strophe is disconnecting.');
} else if (status == Strophe.Status.DISCONNECTED) {
$('.nick').show();
$('.commands').hide();
//console.log('Strophe is disconnected.');
} else if (status == Strophe.Status.CONNECTED) {
//console.log('Strophe is connected');
$('.nick').hide();
$('.commands').show();
var jid = nick;
var muc = $('div#chat').data('chatroom');
connection.muc.join(muc + '@conf.panik', jid,
function(msg) {
var from = msg.attributes.from.value.replace(/.*\//, '');
var klass = '';
if (from == jid) {
klass = 'msg-out';
} else {
klass = 'msg-in';
}
var new_msg = $('<div class="msg new ' + klass + '"><span class="from">' + from + '</span> <span class="content">' + msg.textContent + '</span></div>').prependTo($chat);
new_msg[0].offsetHeight; /* trigger reflow */
new_msg.removeClass('new');
$('div#chat div:nth-child(20)').remove()
return true;
},
function(pres) {
if (pres.getElementsByTagName('conflict').length == 1) {
var nick = $('.nick input').val()
$('.nick input').val(nick + '_');
connection.disconnect();
$('.nick button').trigger('click');
}
return true;
},
function(roster) {
if (chat_roster[nick] == true) {
for (contact in roster) {
if (chat_roster[contact] !== true) {
var new_msg = $('<div class="msg info new"><span class="content">' + contact + ' est dans la place.</span></div>').prependTo($chat);
new_msg[0].offsetHeight; /* trigger reflow */
new_msg.removeClass('new');
}
}
}
chat_roster = Object();
for (contact in roster) {
chat_roster[contact] = true;
}
return true;
}
);
}
});
});
function send() {
var text = $msg.val();
var muc = $('div#chat').data('chatroom');
connection.muc.message(muc + '@conf.panik', null, text);
$msg.val('');
return true;
}
$send.click(send);
$msg.keydown(function(ev) {
if (ev.keyCode == 13) {
send();
return false;
}
return true;
});
$(window).on('beforeunload', function() {
if (connection) { connection.disconnect(); }
});
}
}
init();
......@@ -620,5 +737,4 @@ $(function() {
}
return false;
});
});
This diff is collapsed.
This diff is collapsed.
......@@ -29,6 +29,8 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/audioPlayer.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/konami.js"></script>
<script type="text/javascript" src="{{ STATIC_URL}}js/strophe.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL}}js/strophe.muc.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/specifics.js"></script>
{% endcompress %}
......
{% extends "base.html"%}
{% load paniktags i18n thumbnail %}
{% block title %}{% trans 'Chat' %}{% endblock %}
{% block toptitle %}
<h1 class="top"><span class="chat {% if emission.image %}with-logo{% endif %}"><a href="{% url 'emission-view' slug=object.slug %}">{{object.title}}</a> - Chat</span></h1>
{% if emission.image %}
{% thumbnail emission.image "120x120" crop="50% 25%" as im %}
<div class="top-logo">
<img height="120" width="120" src="{{im.url}}"/>
</div>
{% endthumbnail %}
{% endif %}
{% endblock %}
{% block nav %}
{% endblock %}
{% block main %}
<div class="wrapper">
<div id="Emission-container" class="emission">
{% if emission.subtitle %}<h3>{{ emission.subtitle }}</h3>{% endif %}
</div>
</div>
<div>
<div class="wrapper navigation">
<div class="">
<div class="chat-area">
<div class="nick">Pseudo ? <input name="nick"> <button>Se connecter</button></div>
<div class="commands" style="display: none;">
&gt;&nbsp;&nbsp;<input id="msg" name="msg"> <button id="send">ok</button>
</div>
<div id="chat" data-chatroom="{{emission.slug}}">
</div>
</div> <!-- .chat-area -->
</div> <!-- .leftPart -->
</div>
</div>
{% endblock %}
{% block links %}
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment