simplifying basic chat notifications
This commit is contained in:
@ -27,17 +27,29 @@
|
||||
* btn btn-default
|
||||
|
||||
*/
|
||||
$.fn.filterByData = function (prop, val) {
|
||||
return this.filter(
|
||||
function () { return $(this).data(prop) == val; }
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
var ChatView = function ($view, full)
|
||||
{
|
||||
|
||||
|
||||
if (!full) throw "not implemented";
|
||||
|
||||
// build a channel list
|
||||
var chans = Array();
|
||||
var users = Array();
|
||||
var frontRoomName;
|
||||
|
||||
var ulist = $("<ul></ul>").addClass('userlist');
|
||||
var notifications = $("<ul></ul>").addClass('notifs');
|
||||
|
||||
ulist.appendTo($view);
|
||||
notifications.appendTo($view);
|
||||
|
||||
var chat = $.connection.chatHub
|
||||
// Create a function that the hub can call back to display messages.
|
||||
chat.client.addMessage = function (name, room, message) {
|
||||
@ -54,32 +66,18 @@
|
||||
$('#pv_'+name).append('<li class="pv"><strong>' + htmlEncode(name)
|
||||
+ '</strong>: ' + htmlEncode(message) + '</li>')
|
||||
}
|
||||
chat.client.notify = function (tag, message, data) {
|
||||
if (data) {
|
||||
chat.client.notify = function (tag, message) {
|
||||
// Add the notification to the page.
|
||||
if (tag === 'connected') {
|
||||
onUserConnected(ulist, message, data)
|
||||
$('#notifications').append('<li class="notif"><i>' + htmlEncode(tag)
|
||||
+ '</i> ' + htmlEncode(data) + '</li>')
|
||||
if (tag === 'connected' || tag === "reconnected") {
|
||||
onUserConnected(message);
|
||||
}
|
||||
else if (tag === 'disconnected') {
|
||||
onUserDisconnected(ulist, message, data)
|
||||
$('#notifications').append('<li class="notif"><i>' + htmlEncode(tag)
|
||||
+ '</i> ' + htmlEncode(data) + '</li>')
|
||||
onUserDisconnected(message)
|
||||
} // reconnected userpart userjoin deniedpv
|
||||
else {
|
||||
$('#notifications').append('<li class="notif"><i>' + htmlEncode(tag)
|
||||
+ '</i> ' + htmlEncode(message) + ' : <code>' + htmlEncode(data) + '</code></li>')
|
||||
}
|
||||
}
|
||||
$("<li></li>").append(tag+": ").append(message).addClass(tag).
|
||||
appendTo(notifications);
|
||||
}
|
||||
|
||||
$.fn.filterByData = function (prop, val) {
|
||||
return this.filter(
|
||||
function () { return $(this).data(prop) == val; }
|
||||
)
|
||||
}
|
||||
|
||||
var setActiveRoom = function(room) {
|
||||
var frontRoom;
|
||||
if (frontRoomName!=='') {
|
||||
@ -93,9 +91,19 @@
|
||||
$("#sel_"+room).removeClass("btn-primary");
|
||||
frontRoom.removeClass("hidden");
|
||||
}
|
||||
var chatbar = $('<div class="chatbar"></div>');
|
||||
|
||||
var roomjoin = $('<div class="chatctl" class=\"form-control\"></div>');
|
||||
|
||||
var roomlist = $('<div class="roomlist"></div>');
|
||||
roomlist.appendTo($view);
|
||||
roomlist.appendTo(chatbar);
|
||||
$("<label for=\"channame\">Join :</label>")
|
||||
.appendTo(roomjoin);
|
||||
var chanName = $("<input id=\"channame\" title=\"channel name\" hint=\"yavsc\" >");
|
||||
chanName.appendTo(roomjoin);
|
||||
roomjoin.appendTo(chatbar);
|
||||
|
||||
chatbar.appendTo($view);
|
||||
var chatlist = $('<div class="chatlist" ></div>');
|
||||
chatlist.appendTo($view);
|
||||
|
||||
@ -123,7 +131,7 @@
|
||||
.keydown(function(ev) {
|
||||
if (ev.which == 13) {
|
||||
if (this.value.length==0) return;
|
||||
console.log("sending to "+room+" "+this.value)
|
||||
|
||||
chat.server.send(room, this.value);
|
||||
this.value="";
|
||||
}}).appendTo(roomview);
|
||||
@ -144,7 +152,7 @@
|
||||
|
||||
chans.forEach(function(room) {
|
||||
chat.server.join(room).done(function(chatInfo)
|
||||
{console.log(chatInfo);
|
||||
{
|
||||
setActiveRoom(chatInfo.Name);
|
||||
});
|
||||
})
|
||||
@ -170,20 +178,13 @@
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
$("<label for=\"channame\">> </label>")
|
||||
.appendTo($view);
|
||||
var chanName = $("<input name=\"channame\" title=\"channel name\" hint=\"yavsc\">");
|
||||
chanName.appendTo($view);
|
||||
|
||||
chanName.keydown(
|
||||
function (event) {
|
||||
if (event.which == 13) {
|
||||
if (this.value.length==0) return;
|
||||
buildRoom(this.value);
|
||||
chat.server.join(this.value).done(function(chatInfo)
|
||||
{console.log(chatInfo);
|
||||
{
|
||||
setActiveRoom(chatInfo.Name);
|
||||
});
|
||||
this.value=""
|
||||
@ -192,10 +193,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
var ulist = $("<ul></ul>").addClass('userlist');
|
||||
|
||||
ulist.appendTo($view);
|
||||
|
||||
|
||||
var pvuis
|
||||
// TODO get this data from the chatview element
|
||||
@ -225,30 +222,25 @@
|
||||
}
|
||||
})
|
||||
|
||||
function addChatUser (ulist, uname, cxids) {
|
||||
var addChatUser = function (uname) {
|
||||
|
||||
$("#u_"+uname).remove();
|
||||
// ulist.remove("li.user[data='"+uname+"']");
|
||||
|
||||
$('<li class="user"><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</li>')
|
||||
.data('name', uname)
|
||||
.data('cxids', cxids)
|
||||
.prop('id', 'u_'+uname)
|
||||
.css('cursor', 'pointer')
|
||||
.click(function () { setPrivateTarget(this); })
|
||||
.appendTo(ulist)
|
||||
}
|
||||
|
||||
|
||||
function getUsers (ulist) {
|
||||
$('#userlist').empty()
|
||||
$('#to').empty()
|
||||
var getUsers = function () {
|
||||
$.get('/api/chat/users').done(
|
||||
function (users) {
|
||||
$.each(users, function () {
|
||||
var user = this
|
||||
var existent = $('#userlist li').filterByData('name', user.UserName)
|
||||
if (existent.length > 0) existent.remove()
|
||||
var cxids = []
|
||||
$.each(user.Connections, function () {
|
||||
cxids.push(this.ConnectionId)
|
||||
})
|
||||
addChatUser(ulist,user.UserName, cxids)
|
||||
addChatUser(user.UserName)
|
||||
})
|
||||
}
|
||||
)
|
||||
@ -276,28 +268,13 @@
|
||||
$('#pubChan').css('cursor', 'pointer')
|
||||
$('#pubChan').click(setPublic)
|
||||
setPublic()
|
||||
// Reference the auto-generated proxy for the hub.
|
||||
|
||||
|
||||
var onUserDisconnected = function (cxid) {
|
||||
$('#userlist li').filter(function () {
|
||||
var nids = $(this).data('cxids').filter(function () {
|
||||
return $(this) !== cxid
|
||||
});
|
||||
if (nids.length==0) $(this).remove()
|
||||
else $(this).data('cxids', nids)
|
||||
})
|
||||
var onUserDisconnected = function (uname) {
|
||||
$("#u_"+uname).remove();
|
||||
}
|
||||
|
||||
var onUserConnected = function (ulist, cxid, username) {
|
||||
var connected = $('#userlist li').filterByData('name', username)
|
||||
if (connected.length > 0) {
|
||||
var ids = connected.data('cxids')
|
||||
ids.push(cxid)
|
||||
connected.data('cxids', ids)
|
||||
} else {
|
||||
addChatUser(ulist, username, [cxid])
|
||||
}
|
||||
var onUserConnected = function (username) {
|
||||
addChatUser(username)
|
||||
}
|
||||
|
||||
$(window).unload(function () { chat.server.abort(); })
|
||||
|
||||
2
src/Yavsc/wwwroot/js/chat.min.js
vendored
2
src/Yavsc/wwwroot/js/chat.min.js
vendored
@ -1 +1 @@
|
||||
!function(y){var i=function(n,i){if(!i)throw"not implemented";var e,a=Array(),s=y.connection.chatHub;s.client.addMessage=function(n,i,e){y("#room_"+i).append('<li class="discussion"><strong>'+f(n)+"</strong>: "+f(e)+"</li>")},s.client.addPV=function(n,i){y("#mute").prop("checked")||h.play(),y("#pv_"+n).append('<li class="pv"><strong>'+f(n)+"</strong>: "+f(i)+"</li>")},s.client.notify=function(n,i,e){e&&("connected"===n?(g(p,i,e),y("#notifications").append('<li class="notif"><i>'+f(n)+"</i> "+f(e)+"</li>")):"disconnected"===n?(b(p,i,e),y("#notifications").append('<li class="notif"><i>'+f(n)+"</i> "+f(e)+"</li>")):y("#notifications").append('<li class="notif"><i>'+f(n)+"</i> "+f(i)+" : <code>"+f(e)+"</code></li>"))},y.fn.filterByData=function(n,i){return this.filter(function(){return y(this).data(n)==i})};var o=function(n){var i;""!==e&&((i=y("#vroom_"+e)).addClass("hidden"),y("#sel_"+e).addClass("btn-primary")),i=y("#vroom_"+(e=n)),y("#sel_"+n).removeClass("btn-primary"),i.removeClass("hidden")},c=y('<div class="roomlist"></div>');c.appendTo(n);var d=y('<div class="chatlist" ></div>');d.appendTo(n);var t=function(i){var n=y("<a>"+i+"</a>").addClass("btn");n.prop("id","sel_"+i).click(function(){o(i),y(this).removeClass("btn-primary")}),n.appendTo(c);var e=y("<div></div>").addClass("container");e.appendTo(d),e.prop("id","vroom_"+i);var t=y("<ul></ul>").addClass("mesglist");t.prop("id","room_"+i),t.appendTo(e),y('<input type="text">').prop("id","inp_"+i).prop("enable",!1).prop("hint","hello").prop("title","send to "+i).addClass("form-control").keydown(function(n){if(13==n.which){if(0==this.value.length)return;console.log("sending to "+i+" "+this.value),s.server.send(i,this.value),this.value=""}}).appendTo(e),a.push(i),o(i)};function r(){setTimeout(function(){var e;y("#userlist").empty(),y("#to").empty(),y.get("/api/chat/users").done(function(n){y.each(n,function(){var n=y("#userlist li").filterByData("name",this.UserName);0<n.length&&n.remove();var i=[];y.each(this.Connections,function(){i.push(this.ConnectionId)}),v(e,this.UserName,i)})})},120),y("#chatview").removeClass("disabled"),a.forEach(function(n){s.server.join(n).done(function(n){console.log(n),o(n.Name)})})}n.data("chans").split(",").forEach(function(n){t(n)}),y.connection.hub.start().done(function(){r()}),y.connection.hub.disconnected(function(){y("#chatview").addClass("disabled"),setTimeout(function(){y.connection.hub.start().done(function(){r()},3e4)})}),y('<label for="channame">> </label>').appendTo(n);var l=y('<input name="channame" title="channel name" hint="yavsc">');l.appendTo(n),l.keydown(function(n){if(13==n.which){if(0==this.value.length)return;t(this.value),s.server.join(this.value).done(function(n){console.log(n),o(n.Name)}),this.value=""}});var u,p=y("<ul></ul>").addClass("userlist");p.appendTo(n);var h=new Audio("/sounds/bell.mp3");function v(n,i,e){y('<li class="user"><img src="/Avatars/'+i+'.xs.png"> '+i+"</li>").data("name",i).data("cxids",e).css("cursor","pointer").click(function(){m(this)}).appendTo(n)}function f(n){return y("<div />").text(n).html()}y("#pv").keydown(function(n){var i;13==n.which&&(i=y("#pv").val(),y.each(u.CXs,function(){s.server.sendPV(this,i)}),y("#discussion").append('<li class="pv">'+f(u.UserName)+"<< "+f(i)+"</li>"),y("#pv").val(""))}),y("#command").keydown(function(n){13==n.which&&sendCommand()});var m=function(n){y("#rooms").addClass("hidden"),y("#sendpvbox").removeClass("hidden"),u={CXs:y(n).data("cxids"),UserName:y(n).data("name")},y("#sendpvdest").html(u.UserName),y("#pvs").focus()},C=function(){y("#rooms").removeClass("hidden"),y("#sendpvbox").addClass("hidden"),y("#message").focus()};y("#pubChan").css("cursor","pointer"),y("#pubChan").click(C),C();var b=function(i){y("#userlist li").filter(function(){var n=y(this).data("cxids").filter(function(){return y(this)!==i});0==n.length?y(this).remove():y(this).data("cxids",n)})},g=function(n,i,e){var t=y("#userlist li").filterByData("name",e);if(0<t.length){var a=t.data("cxids");a.push(i),t.data("cxids",a)}else v(n,e,[i])};y(window).unload(function(){s.server.abort()})};y(document).ready(function(n){i(n("#chatview"),!0)})}(jQuery);
|
||||
!function(k){k.fn.filterByData=function(n,e){return this.filter(function(){return k(this).data(n)==e})};var e=function(n,e){if(!e)throw"not implemented";var a,i=Array(),o=(Array(),k("<ul></ul>").addClass("userlist")),s=k("<ul></ul>").addClass("notifs");o.appendTo(n),s.appendTo(n);var t=k.connection.chatHub;t.client.addMessage=function(n,e,a){k("#room_"+e).append('<li class="discussion"><strong>'+y(n)+"</strong>: "+y(a)+"</li>")},t.client.addPV=function(n,e){k("#mute").prop("checked")||m.play(),k("#pv_"+n).append('<li class="pv"><strong>'+y(n)+"</strong>: "+y(e)+"</li>")},t.client.notify=function(n,e){"connected"===n||"reconnected"===n?g(e):"disconnected"===n&&_(e),k("<li></li>").append(n+": ").append(e).addClass(n).appendTo(s)};var d=function(n){var e;""!==a&&((e=k("#vroom_"+a)).addClass("hidden"),k("#sel_"+a).addClass("btn-primary")),e=k("#vroom_"+(a=n)),k("#sel_"+n).removeClass("btn-primary"),e.removeClass("hidden")},c=k('<div class="chatbar"></div>'),r=k('<div class="chatctl" class="form-control"></div>'),l=k('<div class="roomlist"></div>');l.appendTo(c),k('<label for="channame">Join :</label>').appendTo(r);var p=k('<input id="channame" title="channel name" hint="yavsc" >');p.appendTo(r),r.appendTo(c),c.appendTo(n);var u=k('<div class="chatlist" ></div>');u.appendTo(n);var v,h=function(e){var n=k("<a>"+e+"</a>").addClass("btn");n.prop("id","sel_"+e).click(function(){d(e),k(this).removeClass("btn-primary")}),n.appendTo(l);var a=k("<div></div>").addClass("container");a.appendTo(u),a.prop("id","vroom_"+e);var o=k("<ul></ul>").addClass("mesglist");o.prop("id","room_"+e),o.appendTo(a),k('<input type="text">').prop("id","inp_"+e).prop("enable",!1).prop("hint","hello").prop("title","send to "+e).addClass("form-control").keydown(function(n){if(13==n.which){if(0==this.value.length)return;t.server.send(e,this.value),this.value=""}}).appendTo(a),i.push(e),d(e)};function f(){setTimeout(function(){b()},120),k("#chatview").removeClass("disabled"),i.forEach(function(n){t.server.join(n).done(function(n){d(n.Name)})})}n.data("chans").split(",").forEach(function(n){h(n)}),k.connection.hub.start().done(function(){f()}),k.connection.hub.disconnected(function(){k("#chatview").addClass("disabled"),setTimeout(function(){k.connection.hub.start().done(function(){f()},3e4)})}),p.keydown(function(n){if(13==n.which){if(0==this.value.length)return;h(this.value),t.server.join(this.value).done(function(n){d(n.Name)}),this.value=""}});var m=new Audio("/sounds/bell.mp3");k("#pv").keydown(function(n){var e;13==n.which&&(e=k("#pv").val(),k.each(v.CXs,function(){t.server.sendPV(this,e)}),k("#discussion").append('<li class="pv">'+y(v.UserName)+"<< "+y(e)+"</li>"),k("#pv").val(""))}),k("#command").keydown(function(n){13==n.which&&sendCommand()});var C=function(n){k("#u_"+n).remove(),k('<li class="user"><img src="/Avatars/'+n+'.xs.png"> '+n+"</li>").prop("id","u_"+n).css("cursor","pointer").click(function(){T(this)}).appendTo(o)},b=function(){k.get("/api/chat/users").done(function(n){k.each(n,function(){C(this.UserName)})})};function y(n){return k("<div />").text(n).html()}var T=function(n){k("#rooms").addClass("hidden"),k("#sendpvbox").removeClass("hidden"),v={CXs:k(n).data("cxids"),UserName:k(n).data("name")},k("#sendpvdest").html(v.UserName),k("#pvs").focus()},w=function(){k("#rooms").removeClass("hidden"),k("#sendpvbox").addClass("hidden"),k("#message").focus()};k("#pubChan").css("cursor","pointer"),k("#pubChan").click(w),w();var _=function(n){k("#u_"+n).remove()},g=function(n){C(n)};k(window).unload(function(){t.server.abort()})};k(document).ready(function(n){e(n("#chatview"),!0)})}(jQuery);
|
||||
Reference in New Issue
Block a user