فهرست منبع

[bugfix] resort messages on receive (recomp js

B Thibault 9 سال پیش
والد
کامیت
bdcc142c66
6فایلهای تغییر یافته به همراه125 افزوده شده و 80 حذف شده
  1. 85 50
      cli/ui.js
  2. 6 4
      srv/public/index.html
  3. 28 26
      srv/public/slack.min.js
  4. 4 0
      srv/public/style.css
  5. 1 0
      srv/src/slack.js
  6. 1 0
      srv/src/slackHistory.js

+ 85 - 50
cli/ui.js

@@ -104,7 +104,7 @@ function onReplyingToUpdated() {
         closeLink.textContent = 'x';
         domParent.textContent = "";
         domParent.appendChild(closeLink);
-        domParent.appendChild(createMessageDom("reply_" +SELECTED_ROOM.id, REPLYING_TO));
+        domParent.appendChild(createMessageDom("reply_" +SELECTED_ROOM.id, REPLYING_TO, true));
     } else {
         document.body.classList.remove(R.klass.replyingTo);
     }
@@ -113,9 +113,10 @@ function onReplyingToUpdated() {
 /**
  * @param {string} channelId
  * @param {SlackMessage} msg
+ * @param {boolean=} skipAttachment
  * @return {Element}
 **/
-function doCreateMessageDom(channelId, msg) {
+function doCreateMessageDom(channelId, msg, skipAttachment) {
     var dom = document.createElement("div")
         ,ts = document.createElement("div")
         ,text = document.createElement("div")
@@ -151,7 +152,7 @@ function doCreateMessageDom(channelId, msg) {
     dom.appendChild(text);
     dom.appendChild(ts);
     dom.appendChild(attachments);
-    if (msg.raw["attachments"]) {
+    if (skipAttachment !== true && msg.raw["attachments"]) {
         msg.raw["attachments"].forEach(function(attachment) {
             var domAttachment = createAttachmentDom(channelId, msg, attachment);
             if (domAttachment)
@@ -163,42 +164,12 @@ function doCreateMessageDom(channelId, msg) {
 }
 
 /**
- * @param {string} msgContents
+ * @param {string} fullText
  * @return {string}
 **/
-function formatSlackText(msgContents) {
-    msgContents = msgContents
-        .replace(new RegExp('<([@#]?)([^>]*)>', 'g'),
-            function(_, type, entity) {
-                var sub = entity.split('|');
+function formatSlackText(fullText) {
+    var msgContents = fullText.split(/\r?\n/g);
 
-                if (type === '@') {
-                    if (!sub[1]) {
-                        var user = SLACK.context.getMember(sub[0]);
-                        sub[1] = user ? ('@' +user.name) : "Unknown member"; // TODO locale
-                    } else if ('@' !== sub[1][0]) {
-                        sub[1] = '@' +sub[1];
-                    }
-                    sub[0] = '#' +sub[0];
-                    sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkuser;
-                } else if (type === '#') {
-                    if (!sub[1]) {
-                        var chan = SLACK.context.getChannel(sub[0]);
-                        sub[1] = chan ? ('#' +chan.name) : "Unknown channel"; // TODO locale
-                    } else if ('#' !== sub[1][0]) {
-                        sub[1] = '#' +sub[1];
-                    }
-                    sub[0] = '#' +sub[0];
-                    sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkchan;
-                } else {
-                    if (!sub[1])
-                        sub[1] = sub[0];
-                    sub[2] = R.klass.msg.link;
-                }
-                return '<a href="' +sub[0] +'" class="' +sub[2] +'"' +(!type ? ' target="_blank"' : '') +'>' +sub[1] +'</a>';
-            })
-        .split(/\r?\n/g);
-    ;
     for (var msgContentIndex=0, nbMsgContents = msgContents.length; msgContentIndex < nbMsgContents; msgContentIndex++) {
         var msgContent = msgContents[msgContentIndex]
             ,_msgContent = ""
@@ -220,6 +191,7 @@ function formatSlackText(msgContents) {
                 return "";
             return '<span class="' +Object.keys(mods).join(' ') +'">';
         };
+
         // Skip trailing
         while (i < msgLength && (msgContent[i] === ' ' || msgContent[i] === '\t'))
             i++;
@@ -280,6 +252,37 @@ function formatSlackText(msgContents) {
             // Should not append
             _msgContent += '</span>';
         }
+        _msgContent = _msgContent.replace(new RegExp('<([@#]?)([^>]*)>', 'g'),
+            function(matched, type, entity) {
+                var sub = entity.split('|');
+
+                if (type === '@') {
+                    if (!sub[1]) {
+                        var user = SLACK.context.getMember(sub[0]);
+                        sub[1] = user ? ('@' +user.name) : "Unknown member"; // TODO locale
+                    } else if ('@' !== sub[1][0]) {
+                        sub[1] = '@' +sub[1];
+                    }
+                    sub[0] = '#' +sub[0];
+                    sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkuser;
+                } else if (type === '#') {
+                    if (!sub[1]) {
+                        var chan = SLACK.context.getChannel(sub[0]);
+                        sub[1] = chan ? ('#' +chan.name) : "Unknown channel"; // TODO locale
+                    } else if ('#' !== sub[1][0]) {
+                        sub[1] = '#' +sub[1];
+                    }
+                    sub[0] = '#' +sub[0];
+                    sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkchan;
+                } else if (sub[0].indexOf("://") !== -1) {
+                    if (!sub[1])
+                        sub[1] = sub[0];
+                    sub[2] = R.klass.msg.link;
+                } else {
+                    return matched;
+                }
+                return '<a href="' +sub[0] +'" class="' +sub[2] +'"' +(!type ? ' target="_blank"' : '') +'>' +sub[1] +'</a>';
+            });
         if (quote)
             msgContents[msgContentIndex] = '<span class="' +R.klass.msg.style.quote +'">' +_msgContent +'</span>';
         else
@@ -307,6 +310,12 @@ function createAttachmentDom(channelId, msg, attachment) {
         ,authorName = document.createElement("a")
 
         ,textBlock = document.createElement("div")
+        ,imgDom = document.createElement("img")
+
+        ,footerBlock = document.createElement("div")
+        ,footerIcon = document.createElement("img")
+        ,footerText = document.createElement("span")
+        ,footerTs = document.createElement("span")
     ;
 
     //Color
@@ -324,12 +333,12 @@ function createAttachmentDom(channelId, msg, attachment) {
 
     //Pretext
     if (attachment["pretext"]) {
-        pretext.textContent = attachment["pretext"];
+        pretext.innerHTML = formatSlackText(attachment["pretext"]);
     }
 
     //Title
     if (attachment["title"]) {
-        titleBlock.textContent = attachment["title"];
+        titleBlock.innerHTML = formatSlackText(attachment["title"]);
         if (attachment["title_link"]) {
             titleBlock.href = attachment["title_link"];
         }
@@ -340,7 +349,7 @@ function createAttachmentDom(channelId, msg, attachment) {
     //Author
     authorName.target = "_blank";
     if (attachment["author_name"]) {
-        authorName.textContent = attachment["author_name"];
+        authorName.innerHTML = formatSlackText(attachment["author_name"]);
         authorName.href = attachment["author_link"];
         if (attachment["author_icon"])
             authorImg.src = attachment["author_icon"];
@@ -353,21 +362,45 @@ function createAttachmentDom(channelId, msg, attachment) {
     //Text
     textBlock.innerHTML = formatSlackText(attachment["text"] || "");
 
-    // Field [ {title, value, short } ]
-    // image_url (str)
+    //Img (the big one)
+    if (attachment["image_url"]) {
+        imgDom.src = attachment["image_url"];
+    } else {
+        imgDom.className = R.klass.hidden;
+    }
+
+    //Footer
+    if (attachment["footer"]) {
+        footerText.innerHTML = formatSlackText(attachment["footer"]);
+        if (attachment["footer_icon"])
+            footerIcon.src = attachment["footer_icon"];
+        else
+            footerIcon.className = R.klass.hidden;
+    } else {
+        footerText.className = R.klass.hidden;
+        footerIcon.className = R.klass.hidden;
+    }
+    if (attachment["ts"])
+        footerTs.textContent = new Date(parseFloat(attachment["ts"])).toString();
+    else
+        footerTs.className = R.klass.hidden;
+    console.log(attachment);
+
     // thumb_url (str)
-    // footer (str)
-    // footer_icon (str)
-    // ts (float)
-    //
+    // Field [ {title, value, short } ]
     // actions (button stuff)
 
     attachmentBlock.style.borderColor = color;
     authorBlock.appendChild(authorImg);
     authorBlock.appendChild(authorName);
+    footerBlock.appendChild(footerIcon);
+    footerBlock.appendChild(footerText);
+    footerBlock.appendChild(footerTs);
     attachmentBlock.appendChild(titleBlock);
     attachmentBlock.appendChild(authorBlock);
     attachmentBlock.appendChild(textBlock);
+    attachmentBlock.appendChild(imgDom);
+    attachmentBlock.appendChild(footerBlock);
     rootDom.appendChild(pretext);
     rootDom.appendChild(attachmentBlock);
     console.log(attachment);
@@ -377,10 +410,11 @@ function createAttachmentDom(channelId, msg, attachment) {
 /**
  * @param {string} channelId
  * @param {SlackMessage} msg
+ * @param {boolean=} skipAttachment
  * @return {Element}
 **/
-function doCreateMeMessageDom(channelId, msg) {
-    var dom = doCreateMessageDom(channelId, msg);
+function doCreateMeMessageDom(channelId, msg, skipAttachment) {
+    var dom = doCreateMessageDom(channelId, msg, skipAttachment);
     dom.classList.add(R.klass.msg.meMessage);
     return dom;
 }
@@ -388,13 +422,14 @@ function doCreateMeMessageDom(channelId, msg) {
 /**
  * @param {string} channelId
  * @param {SlackMessage} msg
+ * @param {boolean=} skipAttachment
  * @return {Element}
 **/
-function createMessageDom(channelId, msg) {
+function createMessageDom(channelId, msg, skipAttachment) {
     if (msg.subtype === "me_message") {
-        return doCreateMeMessageDom(channelId, msg);
+        return doCreateMeMessageDom(channelId, msg, skipAttachment);
     }
-    return doCreateMessageDom(channelId, msg);
+    return doCreateMessageDom(channelId, msg, skipAttachment);
 }
 
 function updateTitle() {

+ 6 - 4
srv/public/index.html

@@ -14,12 +14,14 @@
             <div class="slack-chat-title" id="currentRoomTitle"></div>
             <div class="slack-chat-content" id="chatWindow"></div>
             <div class="slack-chat-control">
-                <form id="msgForm">
+                <form id="msgForm" class="msgform">
                     <div id="replyToContainer" class="replyto-container">
                     </div>
-                    <input type="text" id="msgInput" />
-                    <a id="attachFile" href="#!"><img src="paperclip.svg" alt="Send file" class="attach-file-icon" /></a>
-                    <input type="submit" class="button" />
+                    <input type="text" id="msgInput" class="msgform-input" autocomplete="off" />
+                    <div class="msgform-action">
+                        <input type="submit" class="button" value=">" />
+                        <a id="attachFile" href="#!" class="button"><img src="paperclip.svg" alt="Send file" class="attach-file-icon" /></a>
+                    </div>
                 </form>
             </div>
         </div>

+ 28 - 26
srv/public/slack.min.js

@@ -1,26 +1,28 @@
-function h(a){this.id=a.id;this.name=a.name}function l(a,b){this.id=a.id;this.name=a.name;this.b=parseFloat(a.last_read);this.a={};if(a.members)for(var d=0,c=a.members.length;d<c;d++){var f=p(b,a.members[d]);this.a[f.id]=f;f.f[this.id]=this}}function q(a,b){var d=[];this.id=b.id;this.a={};for(var c=0,f=b.members.length;c<f;c++){var e=p(a,b.members[c]);this.a[b.members[c]]=e;e.f[this.id]=this;d.push(e.name)}this.name=d.join(", ");this.b=parseFloat(b.last_read)}
-function t(a,b){this.id=b.id;this.c=a;this.b=parseFloat(b.last_read)}function v(a){this.id=a.id;this.name=a.name;this.status=a.status;this.b={B:a.profile.image_24,C:a.profile.image_32,l:a.profile.image_48,s:a.profile.image_72,A:a.profile.image_192,F:a.profile.image_512};this.f={};this.a=null}function x(a){this.id=a.id;this.name=a.name;this.b={D:a.icons.image_36,l:a.icons.image_48,s:a.icons.image_72};this.f={};this.a=null}
-function y(){this.i=null;this.f={};this.b={};this.g={};this.a={};this.c=null;this.h={}}function p(a,b){return a.a[b]||a.h[b]||null}function z(a,b){return a.f[b]||a.g[b]||a.b[b]||null}"undefined"!==typeof module&&(module.o.u=y);function A(a){this.g=a.user;this.b=parseFloat(a.ts);this.type=a.type;this.c=a.subtype;this.a=a}function B(a,b,d){this.id="string"===typeof a?a:a.id;this.a=[];this.b=b;d&&C(this,d)}function C(a,b){var d=0;b.forEach(function(a){d=Math.max(this.push(a),d)}.bind(a))}B.prototype.push=function(a){for(var b=parseFloat(a.ts),d=0,c=this.a.length;d<c;d++)if(this.a[d].b===b)return b;for(this.a.push(new A(a));this.a.length>this.b;)this.a.shift();return b};"undefined"!==typeof module&&(module.o.w=B);var D=null;
-function E(){var a=document.createDocumentFragment(),b=F.a.c?Object.keys(F.a.c.f):[];b.sort(function(a,b){return a[0]!==b[0]?a[0]-b[0]:(F.a.f[a]||F.a.b[a]).name.localeCompare((F.a.f[b]||F.a.b[b]).name)});b.forEach(function(b){b=F.a.f[b]||F.a.b[b];var c=document.createElement("li");c.id=b.id;"D"===b.id[0]?c.className="slack-context-room slack-ims":"G"===b.id[0]?c.className="slack-context-room slack-group":"C"===b.id[0]&&(c.className="slack-context-room slack-channel");c.textContent=b.name;c&&a.appendChild(c)});
-b=F.a.a?Object.keys(F.a.a):[];b.sort(function(a,b){return F.a.a[a].name.localeCompare(F.a.a[b].name)});b.forEach(function(b){b=F.a.a[b].a;var c=document.createElement("li");c.id=b.id;c.className="slack-context-room";c.textContent=b.c.name;c&&a.appendChild(c)});document.getElementById("chanList").textContent="";document.getElementById("chanList").appendChild(a)}function G(a){a?document.body.classList.remove("no-network"):document.body.classList.add("no-network")}
-function H(){if(D){document.body.classList.add("replyingTo");var a=document.getElementById("replyToContainer"),b=document.createElement("a");b.addEventListener("click",function(){D=null;H()});b.className="replyto-close";b.textContent="x";a.textContent="";a.appendChild(b);a.appendChild(I("reply_"+J.id,D))}else document.body.classList.remove("replyingTo")}
-function K(a,b){var d=document.createElement("div"),c=document.createElement("div"),f=document.createElement("div"),e=document.createElement("div"),k=document.createElement("img"),g=document.createElement("span"),n=document.createElement("ul"),r=document.createElement("li"),u=document.createElement("ul"),m=b.a.user?F.a.a[b.a.user]:F.a.h[b.a.bot_id];d.id=a+"_"+b.b;d.className="slackmsg-item";c.className="slackmsg-ts";f.className="slackmsg-msg";e.className="slackmsg-author";k.className="slackmsg-author-img";
-g.className="slackmsg-author-name";n.className="slackmsg-hover";r.className="slackmsg-hover-reply";c.textContent=(new Date(1E3*b.b)).toLocaleTimeString();f.innerHTML=L(b.a.text||"");g.textContent=m?m.name:b.a.username||"?";m||b.a.username||(f.textContent=b.a.subtype||JSON.stringify(b.a));k.src=m?m.b.l:"";e.appendChild(k);e.appendChild(g);n.appendChild(r);d.appendChild(e);d.appendChild(f);d.appendChild(c);d.appendChild(u);b.a.attachments&&b.a.attachments.forEach(function(a){var b=document.createElement("li"),
-c=document.createElement("div"),d=document.createElement("div"),e=document.createElement("a"),f=document.createElement("div"),g=document.createElement("img"),k=document.createElement("a"),m=document.createElement("div"),n="#e3e4e6";a.color&&("#"===a.color[0]?n=a.color[0]:"good"===a.color?n="#2fa44f":"warning"===a.color?n="#de9e31":"danger"===a.color&&(n="#d50200"));a.pretext&&(d.textContent=a.pretext);a.title?(e.textContent=a.title,a.title_link&&(e.href=a.title_link)):e.className="hidden";k.target=
-"_blank";a.author_name?(k.textContent=a.author_name,k.href=a.author_link,a.author_icon?g.src=a.author_icon:g.className="hidden"):f.className="hidden";m.innerHTML=L(a.text||"");c.style.borderColor=n;f.appendChild(g);f.appendChild(k);c.appendChild(e);c.appendChild(f);c.appendChild(m);b.appendChild(d);b.appendChild(c);console.log(a);b&&u.appendChild(b)});d.appendChild(n);return d}
-function L(a){a=a.replace(RegExp("<([@#]?)([^>]*)>","g"),function(a,b,c){a=c.split("|");"@"===b?(a[1]?"@"!==a[1][0]&&(a[1]="@"+a[1]):(c=p(F.a,a[0]),a[1]=c?"@"+c.name:"Unknown member"),a[0]="#"+a[0],a[2]="slackmsg-link slackmsg-link-user"):"#"===b?(a[1]?"#"!==a[1][0]&&(a[1]="#"+a[1]):(c=z(F.a,a[0]),a[1]=c?"#"+c.name:"Unknown channel"),a[0]="#"+a[0],a[2]="slackmsg-link slackmsg-link-chan"):(a[1]||(a[1]=a[0]),a[2]="slackmsg-link");return'<a href="'+a[0]+'" class="'+a[2]+'"'+(b?"":' target="_blank"')+
-">"+a[1]+"</a>"}).split(/\r?\n/g);for(var b=0,d=a.length;b<d;b++){for(var c=a[b],f="",e={},k=!1,g=0,n=c.length,r=function(a,b,c){for(;a[b];){if(" "!=a[b]&&a[b]!=c&&a[b+1]==c)return!0;b++}return!1},u=function(a){return Object.keys(e).length?'<span class="'+Object.keys(a).join(" ")+'">':""};g<n&&(" "===c[g]||"\t"===c[g]);)g++;"&gt;"===c.substr(g,4)&&(k=!0,g+=4);for(;g<n;g++){var m=c[g];if(!e["slackmsg-style-bold"]&&"*"===m&&c[g+1]&&r(c,g,m))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-bold"]=
-!0,f+=u(e);else if(!e["slackmsg-style-strike"]&&"~"===m&&c[g+1]&&r(c,g,m))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-strike"]=!0,f+=u(e);else if(!e["slackmsg-style-code"]&&"`"===m&&c[g+1]&&r(c,g,m))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-code"]=!0,f+=u(e);else if(!e["slackmsg-style-italic"]&&"_"===m&&c[g+1]&&r(c,g,m))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-italic"]=!0,f+=u(e);else{var w=!1,f=f+m;do{if(e["slackmsg-style-bold"]&&"*"!==m&&"*"===c[g+1])delete e["slackmsg-style-bold"],
-w=!0;else if(e["slackmsg-style-strike"]&&"~"!==m&&"~"===c[g+1])delete e["slackmsg-style-strike"],w=!0;else if(e["slackmsg-style-code"]&&"`"!==m&&"`"===c[g+1])delete e["slackmsg-style-code"],w=!0;else if(e["slackmsg-style-italic"]&&"_"!==m&&"_"===c[g+1])delete e["slackmsg-style-italic"],w=!0;else break;m=c[++g]}while(g<n);w&&(f+="</span>"+u(e))}}e&&(f+="</span>");a[b]=k?'<span class="slackmsg-style-quote">'+f+"</span>":f}return a.join("<br/>")}
-function I(a,b){var d;"me_message"===b.c?(d=K(a,b),d.classList.add("slackmsg-me_message")):d=K(a,b);return d}function M(){var a=0,b=0,d,c;for(c in N)N.hasOwnProperty(c)&&(a+=N[c].m,b+=N[c].j);b&&(d="(!"+b);a&&(d=(d?d+" - ":"(")+a);d=d?d+(") "+F.a.i.name):F.a.i.name;document.title=d}
-function O(){var a=document.createDocumentFragment(),b=J.id;document.getElementById("chatWindow").textContent="";F.b[b]&&F.b[b].a.forEach(function(c){"message"===c.type&&(c=I(b,c),a.appendChild(c))});var d=document.getElementById("chatWindow");d.appendChild(a);d.scrollTop=d.scrollHeight-d.clientHeight}
-function P(a){for(;a.target!==a.currentTarget&&a.target;){if(a.target.classList.contains("slack-context-room")){if((a=F.a.f[a.target.id]||F.a.g[a.target.id]||F.a.b[a.target.id])&&a!==J){J&&document.getElementById(J.id).classList.remove("selected");document.getElementById(a.id).classList.add("selected");document.body.classList.remove("no-room-selected");J=a;a=void 0;var b=J.name||(J.c?J.c.name:void 0);if(!b){b=[];for(a in J.a)b.push(J.a[a].name);b=b.join(", ")}document.getElementById("currentRoomTitle").textContent=
-b;O();Q();document.getElementById("fileUploadContainer").classList.add("hidden");R();D&&(D=null,H());J.b&&!F.b[J.id]&&(a=new XMLHttpRequest,a.open("GET","api/hist?room="+J.id,!0),a.send(null))}break}a.target=a.target.parentElement}}
-function S(a){for(var b=a.target;b!==a.currentTarget&&b&&!b.classList.contains("slackmsg-hover");){if(b.classList.contains("slackmsg-hover-reply")){a:{for(b=b||a.target;b!==a.currentTarget&&b;){if(b.classList.contains("slackmsg-item")){a=b.id;break a}b=b.parentElement}a=void 0}if(a){a=parseFloat(a.split("_")[1]);for(var b=F.b[J.id].a,d=0,c=b.length;d<c&&b[d].b<=a;d++)if(b[d].b===a){D!==b[d]&&(D=b[d],H());break}}break}b=b.parentElement}}function Q(){document.getElementById("msgInput").focus()}
-document.addEventListener("DOMContentLoaded",function(){document.getElementById("chatList").addEventListener("click",P);document.getElementById("chatWindow").addEventListener("click",S);document.getElementById("fileUploadCancel").addEventListener("click",function(a){a.preventDefault();document.getElementById("fileUploadError").classList.add("hidden");document.getElementById("fileUploadContainer").classList.add("hidden");document.getElementById("fileUploadInput").value="";return!1});document.getElementById("fileUploadForm").addEventListener("submit",
-function(a){a.preventDefault();a=document.getElementById("fileUploadInput");var b=a.value;b&&(b=b.substr(b.lastIndexOf("\\")+1),T(b,a.files[0],function(a){var b=document.getElementById("fileUploadError");a?(b.textContent=a,b.classList.remove("hidden")):(b.classList.add("hidden"),document.getElementById("fileUploadInput").value="",document.getElementById("fileUploadContainer").classList.add("hidden"))}));return!1});document.getElementById("attachFile").addEventListener("click",function(a){a.preventDefault();
-J&&document.getElementById("fileUploadContainer").classList.remove("hidden");return!1});document.getElementById("msgForm").addEventListener("submit",function(a){a.preventDefault();a=document.getElementById("msgInput");if(J&&a.value){var b=J,d=D,c=new XMLHttpRequest,f="api/msg?room="+b.id+"&text="+encodeURIComponent(a.value);if(d){var e=p(F.a,d.g),k="Message";"C"===b.id[0]?k="Channel message":"D"===b.id[0]?k="Direct message":"G"===b.id[0]&&(k="Group message");f+="&attachments="+encodeURIComponent(JSON.stringify([{fallback:d.a.text||
-"",author_name:"<@"+e.id+"|"+e.name+">",author_icon:e.b.l,text:d.a.text||"",footer:k,ts:d.b}]))}c.open("POST",f,!0);c.send(null);a.value="";D&&(D=null,H())}Q();return!1});window.addEventListener("blur",function(){window.hasFocus=!1});window.addEventListener("focus",function(){window.hasFocus=!0;J&&R();Q()});window.hasFocus=!0;U()});var F,N={};function V(a,b){if(a&&(a!==J||!window.hasFocus)){var d=new RegExp("<@"+F.a.c.id),c=!1;N[a.id]||(N[a.id]={j:0,m:0});b.forEach(function(b){"message"===b.type&&("D"===a.id[0]||b.text.match(d)?(N[a.id].j++,c=!0):N[a.id].m++)});M();document.getElementById(a.id).classList.add("unread");c&&document.getElementById(a.id).classList.add("unreadHi")}}function R(){var a=J;N[a.id]&&(N[a.id]={j:0,m:0},M());a=document.getElementById(a.id);a.classList.remove("unread");a.classList.remove("unreadHi")}
-F=new function(){this.c=0;this.a=new y;this.b={}};var W=0,J=null;function X(a){var b=new XMLHttpRequest;b.timeout=6E4;b.onreadystatechange=function(){if(4===b.readyState)if(b.status){var d=null,c=2===Math.floor(b.status/100);if(c){W&&(W=0,G(!0));d=b.response;try{d=JSON.parse(d)}catch(f){d=null}}else W?(W+=Math.floor((W||5)/2),W=Math.min(60,W)):(W=5,G(!1));a(c,d)}else W&&(W=0,G(!0)),X(a)};b.open("GET","api?v="+F.c,!0);b.send(null)}
-function Y(a,b){if(a){if(b){var d=F;b.v&&(d.c=b.v);if(b["static"]){for(var c=d.a,f=b["static"],e=0,k=f.bots.length;e<k;e++)c.h[f.bots[e].id]=new x(f.bots[e]);e=0;for(k=f.users.length;e<k;e++)c.a[f.users[e].id]=new v(f.users[e]);e=0;for(k=f.ims.length;e<k;e++){var g=p(c,f.ims[e].user);g&&(g.a=new t(g,f.ims[e]),c.g[g.a.id]=g.a)}e=0;for(k=f.channels.length;e<k;e++)c.f[f.channels[e].id]=new l(f.channels[e],c);e=0;for(k=f.groups.length;e<k;e++)c.b[f.groups[e].id]=new q(c,f.groups[e]);c.i=new h(f.team);
-c.c=p(c,f.self.id);E()}if(b.live){for(var n in b.live)(c=d.b[n])?C(c,b.live[n]):d.b[n]=new B(n,250,b.live[n]);for(var r in b.live)V(z(d.a,r),b.live[r]),J&&b.live[J.id]&&O()}}U()}else setTimeout(U,1E3*W)}function U(){X(Y)}function T(a,b,d){var c=J;new FileReader;var f=new FormData,e=new XMLHttpRequest;f.append("file",b);f.append("filename",a);e.onreadystatechange=function(){4===e.readyState&&(204===e.status?d(null):d(e.statusText))};e.open("POST","api/file?room="+c.id);e.send(f)};
+function h(a){this.id=a.id;this.name=a.name}function l(a,b){this.id=a.id;this.name=a.name;this.b=parseFloat(a.last_read);this.a={};if(a.members)for(var e=0,c=a.members.length;e<c;e++){var f=t(b,a.members[e]);this.a[f.id]=f;f.f[this.id]=this}}function u(a,b){var e=[];this.id=b.id;this.a={};for(var c=0,f=b.members.length;c<f;c++){var d=t(a,b.members[c]);this.a[b.members[c]]=d;d.f[this.id]=this;e.push(d.name)}this.name=e.join(", ");this.b=parseFloat(b.last_read)}
+function v(a,b){this.id=b.id;this.c=a;this.b=parseFloat(b.last_read)}function w(a){this.id=a.id;this.name=a.name;this.status=a.status;this.b={B:a.profile.image_24,C:a.profile.image_32,l:a.profile.image_48,s:a.profile.image_72,A:a.profile.image_192,F:a.profile.image_512};this.f={};this.a=null}function x(a){this.id=a.id;this.name=a.name;this.b={D:a.icons.image_36,l:a.icons.image_48,s:a.icons.image_72};this.f={};this.a=null}
+function z(){this.i=null;this.f={};this.b={};this.g={};this.a={};this.c=null;this.h={}}function t(a,b){return a.a[b]||a.h[b]||null}function A(a,b){return a.f[b]||a.g[b]||a.b[b]||null}"undefined"!==typeof module&&(module.o.u=z);function B(a){this.g=a.user;this.b=parseFloat(a.ts);this.type=a.type;this.c=a.subtype;this.a=a}function D(a,b,e){this.id="string"===typeof a?a:a.id;this.a=[];this.b=b;e&&E(this,e)}function E(a,b){var e=0;b.forEach(function(a){e=Math.max(this.push(a),e)}.bind(a));F(a)}D.prototype.push=function(a){for(var b=parseFloat(a.ts),e=0,c=this.a.length;e<c;e++)if(this.a[e].b===b)return b;for(this.a.push(new B(a));this.a.length>this.b;)this.a.shift();return b};
+function F(a){a.a.sort(function(a,e){return a.b-e.b})}"undefined"!==typeof module&&(module.o.w=D);var G=null;
+function H(){var a=document.createDocumentFragment(),b=I.a.c?Object.keys(I.a.c.f):[];b.sort(function(a,b){return a[0]!==b[0]?a[0]-b[0]:(I.a.f[a]||I.a.b[a]).name.localeCompare((I.a.f[b]||I.a.b[b]).name)});b.forEach(function(b){b=I.a.f[b]||I.a.b[b];var c=document.createElement("li");c.id=b.id;"D"===b.id[0]?c.className="slack-context-room slack-ims":"G"===b.id[0]?c.className="slack-context-room slack-group":"C"===b.id[0]&&(c.className="slack-context-room slack-channel");c.textContent=b.name;c&&a.appendChild(c)});
+b=I.a.a?Object.keys(I.a.a):[];b.sort(function(a,b){return I.a.a[a].name.localeCompare(I.a.a[b].name)});b.forEach(function(b){b=I.a.a[b].a;var c=document.createElement("li");c.id=b.id;c.className="slack-context-room";c.textContent=b.c.name;c&&a.appendChild(c)});document.getElementById("chanList").textContent="";document.getElementById("chanList").appendChild(a)}function J(a){a?document.body.classList.remove("no-network"):document.body.classList.add("no-network")}
+function L(){if(G){document.body.classList.add("replyingTo");var a=document.getElementById("replyToContainer"),b=document.createElement("a");b.addEventListener("click",function(){G=null;L()});b.className="replyto-close";b.textContent="x";a.textContent="";a.appendChild(b);a.appendChild(M("reply_"+N.id,G,!0))}else document.body.classList.remove("replyingTo")}
+function O(a,b,e){var c=document.createElement("div"),f=document.createElement("div"),d=document.createElement("div"),k=document.createElement("div"),g=document.createElement("img"),m=document.createElement("span"),p=document.createElement("ul"),r=document.createElement("li"),n=document.createElement("ul"),q=b.a.user?I.a.a[b.a.user]:I.a.h[b.a.bot_id];c.id=a+"_"+b.b;c.className="slackmsg-item";f.className="slackmsg-ts";d.className="slackmsg-msg";k.className="slackmsg-author";g.className="slackmsg-author-img";
+m.className="slackmsg-author-name";p.className="slackmsg-hover";r.className="slackmsg-hover-reply";f.textContent=(new Date(1E3*b.b)).toLocaleTimeString();d.innerHTML=P(b.a.text||"");m.textContent=q?q.name:b.a.username||"?";q||b.a.username||(d.textContent=b.a.subtype||JSON.stringify(b.a));g.src=q?q.b.l:"";k.appendChild(g);k.appendChild(m);p.appendChild(r);c.appendChild(k);c.appendChild(d);c.appendChild(f);c.appendChild(n);!0!==e&&b.a.attachments&&b.a.attachments.forEach(function(a){var b=document.createElement("li"),
+c=document.createElement("div"),e=document.createElement("div"),d=document.createElement("a"),f=document.createElement("div"),g=document.createElement("img"),k=document.createElement("a"),K=document.createElement("div"),m=document.createElement("img"),p=document.createElement("div"),q=document.createElement("img"),r=document.createElement("span"),C=document.createElement("span"),y="#e3e4e6";a.color&&("#"===a.color[0]?y=a.color[0]:"good"===a.color?y="#2fa44f":"warning"===a.color?y="#de9e31":"danger"===
+a.color&&(y="#d50200"));a.pretext&&(e.innerHTML=P(a.pretext));a.title?(d.innerHTML=P(a.title),a.title_link&&(d.href=a.title_link)):d.className="hidden";k.target="_blank";a.author_name?(k.innerHTML=P(a.author_name),k.href=a.author_link,a.author_icon?g.src=a.author_icon:g.className="hidden"):f.className="hidden";K.innerHTML=P(a.text||"");a.image_url?m.src=a.image_url:m.className="hidden";a.footer?(r.innerHTML=P(a.footer),a.footer_icon?q.src=a.footer_icon:q.className="hidden"):(r.className="hidden",
+q.className="hidden");a.ts?C.textContent=(new Date(parseFloat(a.ts))).toString():C.className="hidden";console.log(a);c.style.borderColor=y;f.appendChild(g);f.appendChild(k);p.appendChild(q);p.appendChild(r);p.appendChild(C);c.appendChild(d);c.appendChild(f);c.appendChild(K);c.appendChild(m);c.appendChild(p);b.appendChild(e);b.appendChild(c);console.log(a);b&&n.appendChild(b)});c.appendChild(p);return c}
+function P(a){a=a.split(/\r?\n/g);for(var b=0,e=a.length;b<e;b++){for(var c=a[b],f="",d={},k=!1,g=0,m=c.length,p=function(a,b,c){for(;a[b];){if(" "!=a[b]&&a[b]!=c&&a[b+1]==c)return!0;b++}return!1},r=function(a){return Object.keys(d).length?'<span class="'+Object.keys(a).join(" ")+'">':""};g<m&&(" "===c[g]||"\t"===c[g]);)g++;"&gt;"===c.substr(g,4)&&(k=!0,g+=4);for(;g<m;g++){var n=c[g];if(!d["slackmsg-style-bold"]&&"*"===n&&c[g+1]&&p(c,g,n))Object.keys(d).length&&(f+="</span>"),d["slackmsg-style-bold"]=
+!0,f+=r(d);else if(!d["slackmsg-style-strike"]&&"~"===n&&c[g+1]&&p(c,g,n))Object.keys(d).length&&(f+="</span>"),d["slackmsg-style-strike"]=!0,f+=r(d);else if(!d["slackmsg-style-code"]&&"`"===n&&c[g+1]&&p(c,g,n))Object.keys(d).length&&(f+="</span>"),d["slackmsg-style-code"]=!0,f+=r(d);else if(!d["slackmsg-style-italic"]&&"_"===n&&c[g+1]&&p(c,g,n))Object.keys(d).length&&(f+="</span>"),d["slackmsg-style-italic"]=!0,f+=r(d);else{var q=!1,f=f+n;do{if(d["slackmsg-style-bold"]&&"*"!==n&&"*"===c[g+1])delete d["slackmsg-style-bold"],
+q=!0;else if(d["slackmsg-style-strike"]&&"~"!==n&&"~"===c[g+1])delete d["slackmsg-style-strike"],q=!0;else if(d["slackmsg-style-code"]&&"`"!==n&&"`"===c[g+1])delete d["slackmsg-style-code"],q=!0;else if(d["slackmsg-style-italic"]&&"_"!==n&&"_"===c[g+1])delete d["slackmsg-style-italic"],q=!0;else break;n=c[++g]}while(g<m);q&&(f+="</span>"+r(d))}}d&&(f+="</span>");f=f.replace(RegExp("<([@#]?)([^>]*)>","g"),function(a,b,c){c=c.split("|");if("@"===b)c[1]?"@"!==c[1][0]&&(c[1]="@"+c[1]):(a=t(I.a,c[0]),
+c[1]=a?"@"+a.name:"Unknown member"),c[0]="#"+c[0],c[2]="slackmsg-link slackmsg-link-user";else if("#"===b)c[1]?"#"!==c[1][0]&&(c[1]="#"+c[1]):(a=A(I.a,c[0]),c[1]=a?"#"+a.name:"Unknown channel"),c[0]="#"+c[0],c[2]="slackmsg-link slackmsg-link-chan";else if(-1!==c[0].indexOf("://"))c[1]||(c[1]=c[0]),c[2]="slackmsg-link";else return a;return'<a href="'+c[0]+'" class="'+c[2]+'"'+(b?"":' target="_blank"')+">"+c[1]+"</a>"});a[b]=k?'<span class="slackmsg-style-quote">'+f+"</span>":f}return a.join("<br/>")}
+function M(a,b,e){"me_message"===b.c?(a=O(a,b,e),a.classList.add("slackmsg-me_message")):a=O(a,b,e);return a}function Q(){var a=0,b=0,e,c;for(c in R)R.hasOwnProperty(c)&&(a+=R[c].m,b+=R[c].j);b&&(e="(!"+b);a&&(e=(e?e+" - ":"(")+a);e=e?e+(") "+I.a.i.name):I.a.i.name;document.title=e}
+function S(){var a=document.createDocumentFragment(),b=N.id;document.getElementById("chatWindow").textContent="";I.b[b]&&I.b[b].a.forEach(function(c){"message"===c.type&&(c=M(b,c),a.appendChild(c))});var e=document.getElementById("chatWindow");e.appendChild(a);e.scrollTop=e.scrollHeight-e.clientHeight}
+function T(a){for(;a.target!==a.currentTarget&&a.target;){if(a.target.classList.contains("slack-context-room")){if((a=I.a.f[a.target.id]||I.a.g[a.target.id]||I.a.b[a.target.id])&&a!==N){N&&document.getElementById(N.id).classList.remove("selected");document.getElementById(a.id).classList.add("selected");document.body.classList.remove("no-room-selected");N=a;a=void 0;var b=N.name||(N.c?N.c.name:void 0);if(!b){b=[];for(a in N.a)b.push(N.a[a].name);b=b.join(", ")}document.getElementById("currentRoomTitle").textContent=
+b;S();U();document.getElementById("fileUploadContainer").classList.add("hidden");V();G&&(G=null,L());N.b&&!I.b[N.id]&&(a=new XMLHttpRequest,a.open("GET","api/hist?room="+N.id,!0),a.send(null))}break}a.target=a.target.parentElement}}
+function W(a){for(var b=a.target;b!==a.currentTarget&&b&&!b.classList.contains("slackmsg-hover");){if(b.classList.contains("slackmsg-hover-reply")){a:{for(b=b||a.target;b!==a.currentTarget&&b;){if(b.classList.contains("slackmsg-item")){a=b.id;break a}b=b.parentElement}a=void 0}if(a){a=parseFloat(a.split("_")[1]);for(var b=I.b[N.id].a,e=0,c=b.length;e<c&&b[e].b<=a;e++)if(b[e].b===a){G!==b[e]&&(G=b[e],L());break}}break}b=b.parentElement}}function U(){document.getElementById("msgInput").focus()}
+document.addEventListener("DOMContentLoaded",function(){document.getElementById("chatList").addEventListener("click",T);document.getElementById("chatWindow").addEventListener("click",W);document.getElementById("fileUploadCancel").addEventListener("click",function(a){a.preventDefault();document.getElementById("fileUploadError").classList.add("hidden");document.getElementById("fileUploadContainer").classList.add("hidden");document.getElementById("fileUploadInput").value="";return!1});document.getElementById("fileUploadForm").addEventListener("submit",
+function(a){a.preventDefault();a=document.getElementById("fileUploadInput");var b=a.value;b&&(b=b.substr(b.lastIndexOf("\\")+1),aa(b,a.files[0],function(a){var b=document.getElementById("fileUploadError");a?(b.textContent=a,b.classList.remove("hidden")):(b.classList.add("hidden"),document.getElementById("fileUploadInput").value="",document.getElementById("fileUploadContainer").classList.add("hidden"))}));return!1});document.getElementById("attachFile").addEventListener("click",function(a){a.preventDefault();
+N&&document.getElementById("fileUploadContainer").classList.remove("hidden");return!1});document.getElementById("msgForm").addEventListener("submit",function(a){a.preventDefault();a=document.getElementById("msgInput");if(N&&a.value){var b=N,e=G,c=new XMLHttpRequest,f="api/msg?room="+b.id+"&text="+encodeURIComponent(a.value);if(e){var d=t(I.a,e.g),k="Message";"C"===b.id[0]?k="Channel message":"D"===b.id[0]?k="Direct message":"G"===b.id[0]&&(k="Group message");f+="&attachments="+encodeURIComponent(JSON.stringify([{fallback:e.a.text||
+"",author_name:"<@"+d.id+"|"+d.name+">",author_icon:d.b.l,text:e.a.text||"",footer:k,ts:e.b}]))}c.open("POST",f,!0);c.send(null);a.value="";G&&(G=null,L())}U();return!1});window.addEventListener("blur",function(){window.hasFocus=!1});window.addEventListener("focus",function(){window.hasFocus=!0;N&&V();U()});window.hasFocus=!0;X()});var I,R={};function ba(a,b){if(a&&(a!==N||!window.hasFocus)){var e=new RegExp("<@"+I.a.c.id),c=!1;R[a.id]||(R[a.id]={j:0,m:0});b.forEach(function(b){"message"===b.type&&("D"===a.id[0]||b.text.match(e)?(R[a.id].j++,c=!0):R[a.id].m++)});Q();document.getElementById(a.id).classList.add("unread");c&&document.getElementById(a.id).classList.add("unreadHi")}}function V(){var a=N;R[a.id]&&(R[a.id]={j:0,m:0},Q());a=document.getElementById(a.id);a.classList.remove("unread");a.classList.remove("unreadHi")}
+I=new function(){this.c=0;this.a=new z;this.b={}};var Y=0,N=null;function Z(a){var b=new XMLHttpRequest;b.timeout=6E4;b.onreadystatechange=function(){if(4===b.readyState)if(b.status){var e=null,c=2===Math.floor(b.status/100);if(c){Y&&(Y=0,J(!0));e=b.response;try{e=JSON.parse(e)}catch(f){e=null}}else Y?(Y+=Math.floor((Y||5)/2),Y=Math.min(60,Y)):(Y=5,J(!1));a(c,e)}else Y&&(Y=0,J(!0)),Z(a)};b.open("GET","api?v="+I.c,!0);b.send(null)}
+function ca(a,b){if(a){if(b){var e=I;b.v&&(e.c=b.v);if(b["static"]){for(var c=e.a,f=b["static"],d=0,k=f.bots.length;d<k;d++)c.h[f.bots[d].id]=new x(f.bots[d]);d=0;for(k=f.users.length;d<k;d++)c.a[f.users[d].id]=new w(f.users[d]);d=0;for(k=f.ims.length;d<k;d++){var g=t(c,f.ims[d].user);g&&(g.a=new v(g,f.ims[d]),c.g[g.a.id]=g.a)}d=0;for(k=f.channels.length;d<k;d++)c.f[f.channels[d].id]=new l(f.channels[d],c);d=0;for(k=f.groups.length;d<k;d++)c.b[f.groups[d].id]=new u(c,f.groups[d]);c.i=new h(f.team);
+c.c=t(c,f.self.id);H()}if(b.live){for(var m in b.live)(c=e.b[m])?E(c,b.live[m]):e.b[m]=new D(m,250,b.live[m]);for(var p in b.live)ba(A(e.a,p),b.live[p]),N&&b.live[N.id]&&S()}}X()}else setTimeout(X,1E3*Y)}function X(){Z(ca)}function aa(a,b,e){var c=N;new FileReader;var f=new FormData,d=new XMLHttpRequest;f.append("file",b);f.append("filename",a);d.onreadystatechange=function(){4===d.readyState&&(204===d.status?e(null):e(d.statusText))};d.open("POST","api/file?room="+c.id);d.send(f)};

+ 4 - 0
srv/public/style.css

@@ -70,6 +70,10 @@ body {
 .slackmsg-style-quote { border-left: 3px solid #e3e4e6; padding-left: 10px; }
 
 .attach-file-icon { height: 1.5em; vertical-align: bottom; }
+.msgform { width: 100%; }
+.msgform-input { width: calc(100% - 175px); margin-left: 15px; }
+.msgform-action { display: inline-block; }
+.msgform-action * { height: 1.5em; }
 
 .file-upload-container { position: fixed; z-index: 5000; background: rgba(55, 55, 55, 0.8); top: 0; bottom: 0; right: 0; left: 0; max-width: 100%; margin: auto; height: 200px; width: 500px; max-height: 100%; padding: 1.5em; border: 1px solid rgba(55, 55, 55, 1); border-radius: 10px; }
 .file-upload-container > form { display: inline-block; background: white; height: 100%; width: 100%; }

+ 1 - 0
srv/src/slack.js

@@ -164,6 +164,7 @@ Slack.prototype.onMessage = function(msg) {
         var histo = this.history[msg["channel"]];
         if (histo) {
             histo.push(msg);
+            histo.resort();
             this.data.liveV = Math.max(this.data.liveV, parseFloat(msg["ts"]));
         } else if (this.data.getChannel(msg["channel"])) {
             this.fetchHistory(msg["channel"]);

+ 1 - 0
srv/src/slackHistory.js

@@ -54,6 +54,7 @@ SlackHistory.prototype.pushAll = function(evts) {
     evts.forEach(function(e) {
         result = Math.max(this.push(e), result);
     }.bind(this));
+    this.resort();
     return result;
 }