From f88a0abb0b4abcc3f2fb8f5f15810330d76d93e3 Mon Sep 17 00:00:00 2001 From: Paul Schneider Date: Fri, 17 Mar 2017 21:09:24 +0100 Subject: [PATCH] refabrique --- Yavsc/Views/Home/Chat.cshtml | 186 +--------------------------- Yavsc/wwwroot/css/main/site.min.css | 2 +- Yavsc/wwwroot/js/chat.js | 176 ++++++++++++++++++++++++++ 3 files changed, 179 insertions(+), 185 deletions(-) create mode 100644 Yavsc/wwwroot/js/chat.js diff --git a/Yavsc/Views/Home/Chat.cshtml b/Yavsc/Views/Home/Chat.cshtml index 2372ea67..5cb98020 100644 --- a/Yavsc/Views/Home/Chat.cshtml +++ b/Yavsc/Views/Home/Chat.cshtml @@ -45,195 +45,13 @@ - @if (!ViewBag.IsAuthenticated) { // Get the user name and store it to prepend to messages. } - - + } diff --git a/Yavsc/wwwroot/css/main/site.min.css b/Yavsc/wwwroot/css/main/site.min.css index c33c14a4..3ef4e95d 100644 --- a/Yavsc/wwwroot/css/main/site.min.css +++ b/Yavsc/wwwroot/css/main/site.min.css @@ -1 +1 @@ -.discussion,.notif,.pv{font-family:monospace}.smalltofhol,tr.visiblepost{max-height:3em}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}.smalltofhol{max-width:3em;float:left;margin:.5em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:x-large;border:2px solid #000;border-radius:1em}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}#targets{display:block}tr.hiddenpost{background-color:#888;font-size:smaller;max-height:2em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{float:left;margin:1em;color:#000;background-color:inherit}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .btn{-webkit-transition:-webkit-transform 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .active .btn{-webkit-transform:initial;transform:initial}.disabled{background-color:#555}.carousel-caption-s p{font-family:jubilat;font-weight:600;font-size:large;line-height:1.1;text-decoration:overline;text-decoration-line:overline;text-shadow:3px 3px 7px #000;-webkit-text-shadow:inset 0 3px 5px #000;color:#000;margin:.5em;padding:.5em;animation:mymove 3s infinite;background-color:rgba(256,256,256,.6)}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;text-shadow:0 4px 8px rgba(0,0,0,.6);min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#444;background-color:#210912}footer{vertical-align:bottom;padding:1.5em;color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{float:left;margin:1em} \ No newline at end of file +.discussion,.notif,.pv{font-family:monospace}.smalltofhol,tr.visiblepost{max-height:3em}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.smalltofhol{max-width:3em;float:left;margin:.5em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:x-large;border:2px solid #000;border-radius:1em}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}#targets{display:block}tr.hiddenpost{background-color:#888;font-size:smaller;max-height:2em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .btn{-webkit-transition:-webkit-transform 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .active .btn{-webkit-transform:initial;transform:initial}.disabled{background-color:#555}.carousel-caption-s p{font-family:jubilat;font-weight:600;font-size:large;line-height:1.1;text-decoration:overline;text-decoration-line:overline;text-shadow:3px 3px 7px #000;-webkit-text-shadow:inset 0 3px 5px #000;color:#000;margin:.5em;padding:.5em;animation:mymove 3s infinite;background-color:rgba(256,256,256,.6)}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;text-shadow:0 4px 8px rgba(0,0,0,.6);min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#444;background-color:#210912}footer{vertical-align:bottom;padding:1.5em;color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em} \ No newline at end of file diff --git a/Yavsc/wwwroot/js/chat.js b/Yavsc/wwwroot/js/chat.js new file mode 100644 index 00000000..6ce3f923 --- /dev/null +++ b/Yavsc/wwwroot/js/chat.js @@ -0,0 +1,176 @@ +var chatscript = function (){ + var pvuis; + + var audio = new Audio('/sounds/bell.mp3'); + + function addULI(uname, cxids) + { + $('
    • ') + .data("name", uname) + .data("cxids", cxids) + .css('cursor', 'pointer') + .click(function () { setPrivate(this); }) + .appendTo('#userlist') + } + + function getUsers() { + $('#userlist').empty(); + $('#to').empty(); + $.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); + }); + addULI(user.UserName,cxids) + }); + } + ); + }; + + function onCx() { + setTimeout(function () { + getUsers(); + },120), + $('#targets').removeClass('disabled') + }; + function onDisCx () { + $('#targets').addClass('disabled'); + }; + // This optional function html-encodes messages for display in the page. + function htmlEncode(value) { + var encodedValue = $('
    ').text(value).html(); + return encodedValue; + } + + var setPrivate = function (li) { + $("#sendmessagebox").addClass("hidden"); + $("#sendpvbox").removeClass("hidden"); + pvuis = { CXs: $(li).data("cxids"), UserName: $(li).data("name") }; + $('#sendpvdest').html(pvuis.UserName) + $('#pv').focus(); + } + var setPublic = function () { + $("#sendmessagebox").removeClass("hidden"); + $("#sendpvbox").addClass("hidden"); + $('#message').focus(); + } + $('#pubChan').css('cursor', 'pointer'); + $('#pubChan').click(setPublic); + setPublic(); + // Reference the auto-generated proxy for the hub. + var chat = $.connection.chatHub; + // Create a function that the hub can call back to display messages. + chat.client.addMessage = function (name, message) { + // Add the message to the page. + $('#discussion').append('
  • ' + htmlEncode(name) + + ': ' + htmlEncode(message) + '
    • ') + }; + chat.client.addPV = function (name, message) { + if (!$("#mute").prop('checked')) + { + audio.play(); + } + // Add the pv to the page. + $('#discussion').append('
  • ' + htmlEncode(name) + + ': ' + htmlEncode(message) + '
    • ') + }; + $.fn.filterByData = function (prop, val) { + return this.filter( + function () { return $(this).data(prop) == val; } + ); + } + + var onUserDisconnected = function (cxid, username) { + $('#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 onUserConnected = function (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 { + addULI(username, [cxid]) + } + }; + chat.client.notify = function (tag, message, data) { + if (data) { + // Add the pv to the page. + + if (tag === 'connected') { + onUserConnected(message, data); + $('#discussion').append('
  • ' + htmlEncode(tag) + + ' ' + htmlEncode(data) + '
    • ') + } + else if (tag === 'disconnected') { + onUserDisconnected(message, data); + $('#discussion').append('
  • ' + htmlEncode(tag) + + ' ' + htmlEncode(data) + '
    • ') + } + else { + $('#discussion').append('
  • ' + htmlEncode(tag) + + ' ' + htmlEncode(message) + ' : ' + htmlEncode(data) + '
    • ') + } + } + }; + + var sendMessage = function () { + chat.server.send($('#displayname').val(), $('#message').val()); + // Clear text box and reset focus for next comment. + $('#message').val('') + }; + + var sendPV = function () { + var msg = $('#pv').val(); + // Call the Send method on the hub. + $.each(pvuis.CXs, function () { + chat.server.sendPV(this, msg); + }); + $('#discussion').append('
  • ' + htmlEncode(pvuis.UserName) + + '<< ' + htmlEncode(msg) +'
    • '); + // Clear text box and reset focus for next comment. + $('#pv').val(''); + } + + // Start the connection. + $.connection.hub.start().done(function () { + onCx(); + $('#sendmessage').click(function () { + // Call the Send method on the hub. + sendMessage(); + $('#message').focus(); + }); + $("#message").keydown(function (event) { + if (event.which == 13) { + sendMessage() + } + }); + $("#pv").keydown(function (event) { + if (event.which == 13) { + sendPV() + } + }); + $('#sendpv').click(function () { + // Call the Send method on the hub. + sendPV(); + $("#sendpv").focus() + }); + }); + +$.connection.hub.disconnected(function () { + onDisCx(); +}); + +$(window).unload(function () { chat.server.abort(); delete chat; }); +}() \ No newline at end of file