Quellcode durchsuchen

[add][Refs #1] Display Emoji detail (name) in emoji picker
[add][Refs #1] Reorder emojis after search in picker
[quickfix][Refs #9] flex align everything
[quickfix][Refs #1] refocus input after emoji insertion

B Thibault vor 8 Jahren
Ursprung
Commit
d4a62b6589
6 geänderte Dateien mit 102 neuen und 91 gelöschten Zeilen
  1. 39 10
      cli/emojiBar.js
  2. 5 0
      cli/resources.js
  3. 1 0
      cli/ui.js
  4. 4 7
      srv/public/index.html
  5. 41 40
      srv/public/slack.min.js
  6. 12 34
      srv/public/style.css

+ 39 - 10
cli/emojiBar.js

@@ -7,6 +7,9 @@ var EMOJI_BAR = (function() {
         ,customEmojis = document.createElement("ul")
         ,searchBar = document.createElement("input")
         ,emojiCache = { unicode: {}, custom: {}}
+        ,emojiDetail = document.createElement("div")
+        ,emojiDetailImg = document.createElement("span")
+        ,emojiDetailName = document.createElement("span")
         /** @type {function((string|null))|undefined} */
         ,emojiSelectedHandler
 
@@ -49,22 +52,23 @@ var EMOJI_BAR = (function() {
     ,search = function(queryString) {
         var emojiCount = 0
             ,toRemove = [];
-
         queryString = queryString === undefined ? searchBar.value : queryString;
         if (isSupported()) {
-            /** @type {Object.<string, *>} */
-            var emojis = window['searchEmojis'](queryString);
+            var
+                /** @type {Object.<string, *>} */
+                foundEmojis = window['searchEmojis'](queryString)
+                ,index = 0;
             for (var i in emojiCache.unicode) {
-                if (emojiCache.unicode[i].visible && !emojis[i]) {
+                if (emojiCache.unicode[i].visible) {
+                    // We remove every item to reorder them (add them in order)
                     emojiCache.unicode[i].visible = false;
                     unicodeEmojis.removeChild(emojiCache.unicode[i].dom);
                 }
             }
-            for (var i in emojis) {
+            for (var i in foundEmojis) {
                 var e = emojiCache.unicode[i];
-
                 if (!e)
-                    e = emojiCache.unicode[i] = makeUnicodeEmojiLi(i, emojis[i]);
+                    e = emojiCache.unicode[i] = makeUnicodeEmojiLi(i, foundEmojis[i]);
                 if (!e.visible) {
                     e.visible = true;
                     unicodeEmojis.appendChild(e.dom);
@@ -99,6 +103,7 @@ var EMOJI_BAR = (function() {
         }
         return false;
     }
+
     /** @type {function():boolean} */
     ,close = function() {
         var closed = doClose();
@@ -108,11 +113,11 @@ var EMOJI_BAR = (function() {
             emojiSelectedHandler(null);
         return true;
     }
+
     ,onEmojiSelected = function(emojiName) {
         if (doClose() && emojiSelectedHandler)
             emojiSelectedHandler(emojiName);
     }
-
     ;
 
     overlay.addEventListener("click", function(e) {
@@ -125,27 +130,51 @@ var EMOJI_BAR = (function() {
     overlay.className = R.klass.emojibar.overlay;
     dom.className = R.klass.emojibar.container;
     emojisDom.className = R.klass.emojibar.emojis;
+    emojiDetail.className = R.klass.emojibar.detail.container;
+    emojiDetailImg.className = R.klass.emojibar.detail.img;
+    emojiDetailName.className = R.klass.emojibar.detail.name;
     unicodeEmojis.className = customEmojis.className = R.klass.emojibar.list;
     searchBar.className = R.klass.emojibar.search;
+    emojiDetail.appendChild(emojiDetailImg);
+    emojiDetail.appendChild(emojiDetailName);
     emojisDom.appendChild(makeHeader(window['emojiProviderHeader']));
     emojisDom.appendChild(unicodeEmojis);
     emojisDom.appendChild(makeHeader("emojicustom.png"));
     emojisDom.appendChild(customEmojis);
     dom.appendChild(emojisDom);
+    dom.appendChild(emojiDetail);
     dom.appendChild(searchBar);
 
     searchBar.addEventListener("keyup", function() {
         search();
     });
 
-    dom.addEventListener("click", function(e) {
+    var makeDelegate = function(e, cb) {
         var target = e.target;
         while (target !== dom && target && target.nodeName !== "LI")
             target = target.parentElement;
         if (target && target.nodeName === "LI" && target.id && target.id.substr(0, "emojibar-".length) === "emojibar-") {
             var emojiId = target.id.substr("emojibar-".length);
-            onEmojiSelected(emojiId);
+            return cb(emojiId);
         }
+        cb(null);
+    };
+
+    dom.addEventListener("mousemove", function(e) {
+        makeDelegate(e, function(emoji) {
+            var emojiCached = emoji ? (emojiCache.unicode[emoji] || emojiCache.custom[emoji]) : null;
+            if (emojiCached) {
+                emojiDetailImg.innerHTML = emojiCached.dom.outerHTML;
+                emojiDetailName.textContent = ':' +emoji +':';
+            } else {
+                emojiDetailImg.textContent = "";
+                emojiDetailName.textContent = "";
+            }
+        });
+    });
+
+    dom.addEventListener("click", function(e) {
+        makeDelegate(e, onEmojiSelected);
     });
 
     return {

+ 5 - 0
cli/resources.js

@@ -46,6 +46,11 @@ var R = {
             ,item: "emojibar-list-item"
             ,search: "emojibar-search"
             ,overlay: "emojibar-overlay"
+            ,detail: {
+                container: "emojibar-detail"
+                ,img: "emojibar-detail-img"
+                ,name: "emojibar-detail-name"
+            }
         }
         ,chatList: {
             entry: "slack-context-room"

+ 1 - 0
cli/ui.js

@@ -866,6 +866,7 @@ document.addEventListener('DOMContentLoaded', function() {
             emojiButton.addEventListener("click", function() {
                 EMOJI_BAR.spawn(document.body, function(e) {
                     if (e) document.getElementById(R.id.message.input).value += ":"+e+":";
+                    focusInput();
                 });
             });
         } else {

+ 4 - 7
srv/public/index.html

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

+ 41 - 40
srv/public/slack.min.js

@@ -1,43 +1,44 @@
 function aa(a){this.id=a.id;this.name=a.name}function ba(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=k(b,a.members[d]);this.a[f.id]=f;f.f[this.id]=this}}function ca(a,b){var d=[];this.id=b.id;this.a={};for(var c=0,f=b.members.length;c<f;c++){var e=k(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 da(a,b){this.id=b.id;this.c=a;this.b=parseFloat(b.last_read)}function ea(a){this.id=a.id;this.name=a.name;this.status=a.status;this.b={J:a.profile.image_24,K:a.profile.image_32,l:a.profile.image_48,F:a.profile.image_72,I:a.profile.image_192,M:a.profile.image_512};this.f={};this.a=null}function fa(a){this.id=a.id;this.name=a.name;this.b={L:a.icons.image_36,l:a.icons.image_48,F:a.icons.image_72};this.f={};this.a=null}
 function p(){this.s=null;this.f={};this.c={};this.i={};this.a={};this.b=null;this.h={};this.o={}}function k(a,b){return a.a[b]||a.h[b]||null}function u(a,b){return a.f[b]||a.i[b]||a.c[b]||null}"undefined"!==typeof module&&(module.D.G=p);function ga(a,b){this.i=a.user;this.id=a.ts;this.c=b||parseFloat(a.ts);this.type=a.type;this.h=a.subtype;this.b=a;this.a={};var d=this;a.reactions&&a.reactions.forEach(function(a){d.a[a.name]=[];a.users.forEach(function(b){d.a[a.name].push(b)})})}function v(a,b,d){this.id="string"===typeof a?a:a.id;this.a=[];this.b=b;d&&w(this,d)}function ha(a,b,d){a.a[b]&&(1===a.a[b].length?delete a.a[b]:a.a[b]=a.a[b].filter(function(a){return a!==d}))}
-function w(a,b){var d=0;b.forEach(function(a){d=Math.max(this.push(a),d)}.bind(a));ia(a)}v.prototype.push=function(a){for(var b=parseFloat(a.ts),d=0,c=this.a.length;d<c;d++)if(this.a[d].c===b)return b;for(this.a.push(new ga(a,b));this.a.length>this.b;)this.a.shift();if("reaction_added"===a.type){if(d=x(this,parseFloat(a.item.ts)))c=a.reaction,a=a.user,d.a[c]||(d.a[c]=[]),d.a[c].push(a)}else"reaction_removed"===a.type&&(d=x(this,parseFloat(a.item.ts)))&&ha(d,a.reaction,a.user);return b};
-function x(a,b){for(var d=0,c=a.a.length;d<c&&b>=a.a[d].c;d++)if(a.a[d].c===b)return a.a[d];return null}function ia(a){a.a.sort(function(a,d){return a.c-d.c})}"undefined"!==typeof module&&(module.D.H=v);var y={},A;function ja(){var a;if(!a){for(var b=0,d=navigator.languages.length;b<d;b++)if(y.hasOwnProperty(navigator.languages[b])){a=navigator.languages[b];break}a||(a="en")}A=y[a];console.log("Loading language pack: "+a);if(A.g)for(b in A.g)document.getElementById(b).textContent=A.g[b]};y.fr={C:"Utilisateur inconnu",B:"Channel inconnu",w:"Nouveau message",u:"Reseau",g:{fileUploadCancel:"Annuler",neterror:"Impossible de se connecter au chat !"}};y.en={C:"Unknown member",B:"Unknown channel",w:"New message",u:"Network",g:{fileUploadCancel:"Cancel",neterror:"Cannot connect to chat !"}};var C=null,D=0;
-function ka(){var a=document.createDocumentFragment(),b=E.a.b?Object.keys(E.a.b.f):[];b.sort(function(a,b){return a[0]!==b[0]?a[0]-b[0]:(E.a.f[a]||E.a.c[a]).name.localeCompare((E.a.f[b]||E.a.c[b]).name)});b.forEach(function(b){b=E.a.f[b]||E.a.c[b];var c=document.createElement("li"),d=document.createElement("a");c.id=b.id;d.href="#"+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");d.textContent=
-b.name;c.appendChild(d);c&&a.appendChild(c)});b=E.a.a?Object.keys(E.a.a):[];b.sort(function(a,b){return E.a.a[a].name.localeCompare(E.a.a[b].name)});b.forEach(function(b){b=E.a.a[b].a;var c=document.createElement("li"),d=document.createElement("a");c.id=b.id;d.href="#"+b.id;c.className="slack-context-room";d.textContent=b.c.name;c.appendChild(d);c&&a.appendChild(c)});document.getElementById("chanList").textContent="";document.getElementById("chanList").appendChild(a);G();H()}
-function I(a){a?document.body.classList.remove("no-network"):document.body.classList.add("no-network");H()}function J(){if(C){document.body.classList.add("replyingTo");var a=document.getElementById("replyToContainer"),b=document.createElement("a");b.addEventListener("click",function(){C=null;J()});b.className="replyto-close";b.textContent="x";a.textContent="";a.appendChild(b);a.appendChild(K("reply_"+M.id,C,!0))}else document.body.classList.remove("replyingTo")}
-function la(a,b,d,c){var f=N(d);if(f){for(var e=document.createElement("li"),h=document.createElement("a"),g=document.createElement("span"),l=document.createElement("span"),q=[],m=0,n=c.length;m<n;m++){var r=k(E.a,c[m]);r&&q.push(r.name)}q.sort();l.textContent=q.join(", ");g.appendChild(f);g.className="emoji-small";h.href="javascript:toggleReaction('"+a+"', '"+b+"', '"+d+"')";h.appendChild(g);h.appendChild(l);e.className="slackmsg-reaction-item";e.appendChild(h);return e}return null}
-window.toggleReaction=function(a,b,d){var c=E.b[a];if(c){a:{for(var f=0,e=c.a.length;f<e;f++)if(c.a[f].id==b){c=c.a[f];break a}c=null}c&&(f=E.a.b.id,c.a[d]&&-1!==c.a[d].indexOf(f)?(c=new XMLHttpRequest,c.open("DELETE","api/reaction?room="+a+"&msg="+b+"&reaction="+encodeURIComponent(d),!0),c.send(null)):O(a,b,d))}};
-function P(a,b,d){var c=document.createElement("div"),f=document.createElement("div"),e=document.createElement("div"),h=document.createElement("div"),g=document.createElement("img"),l=document.createElement("span"),q=document.createElement("ul"),m=document.createElement("li"),n=document.createElement("ul"),r=document.createElement("ul"),t=b.b.user?E.a.a[b.b.user]:E.a.h[b.b.bot_id];c.id=a+"_"+b.c;c.className="slackmsg-item";f.className="slackmsg-ts";e.className="slackmsg-msg";h.className="slackmsg-author";
-g.className="slackmsg-author-img";l.className="slackmsg-author-name";q.className="slackmsg-hover";m.className="slackmsg-hover-reply";f.innerHTML=Q(b.c);e.innerHTML=R(b.b.text||"");l.textContent=t?t.name:b.b.username||"?";t||b.b.username||(e.textContent=b.b.subtype||JSON.stringify(b.b));g.src=t?t.b.l:"";h.appendChild(g);h.appendChild(l);q.appendChild(m);"makeEmoji"in window?(g=document.createElement("li"),l=window.makeEmoji("arrow_heading_down"),t=window.makeEmoji("smile"),g.className="slackmsg-hover-reaction",
-t?(g.classList.add("emoji-small"),g.appendChild(t)):g.style.backgroundImage='url("smile.svg")',l?(m.classList.add("emoji-small"),m.appendChild(l)):m.style.backgroundImage='url("repl.svg")',q.appendChild(g)):m.style.backgroundImage='url("repl.svg")';c.appendChild(h);c.appendChild(e);c.appendChild(f);c.appendChild(n);c.appendChild(r);n.className="slackmsg-attachments";r.className="slackmsg-reactions";if(!0!==d){if(b.a)for(var z in b.a)(d=la(a,b.id,z,b.a[z]))&&r.appendChild(d);b.b.attachments&&b.b.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"),t=document.createElement("img"),g=document.createElement("a"),L=document.createElement("div"),h=document.createElement("div"),z=document.createElement("img"),l=document.createElement("img"),m=document.createElement("div"),q=document.createElement("img"),r=document.createElement("span"),F=document.createElement("span");b.className="slackmsg-attachment";
-var B="#e3e4e6";a.color&&("#"===a.color[0]?B=a.color[0]:"good"===a.color?B="#2fa44f":"warning"===a.color?B="#de9e31":"danger"===a.color&&(B="#d50200"));c.style.borderColor=B;d.className="slackmsg-attachment-pretext";a.pretext?d.innerHTML=R(a.pretext):d.classList.add("hidden");e.target="_blank";a.title?(e.innerHTML=R(a.title),a.title_link&&(e.href=a.title_link),e.className="slackmsg-attachment-title"):e.className="hidden slackmsg-attachment-title";g.target="_blank";f.className="slackmsg-author";a.author_name?
-(g.innerHTML=R(a.author_name),g.href=a.author_link||"",g.className="slackmsg-author-name",t.className="slackmsg-author-img",a.author_icon?t.src=a.author_icon:t.classList.add("hidden")):f.classList.add("hidden");h.innerHTML=R(a.text||"");h.a="slackmsg-attachment-text";z.className="slackmsg-attachment-thumb";a.thumb_url?z.src=a.thumb_url:z.classList.add("hidden");l.className="slackmsg-attachment-img";a.image_url?l.src=a.image_url:l.classList.add("hidden");m.className="slackmsg-attachment-footer";r.className=
-"slackmsg-attachment-footer-text";q.className="slackmsg-attachment-footer-icon";a.footer?(r.innerHTML=R(a.footer),a.footer_icon?q.src=a.footer_icon:q.classList.add("hidden")):(q.classList.add("hidden"),r.classList.add("hidden"));F.className="slackmsg-ts";a.ts?F.innerHTML=Q(a.ts):F.classList.add("hidden");f.appendChild(t);f.appendChild(g);L.appendChild(h);L.appendChild(z);m.appendChild(q);m.appendChild(r);m.appendChild(F);c.appendChild(e);c.appendChild(f);c.appendChild(L);c.appendChild(l);c.appendChild(m);
-b.appendChild(d);b.appendChild(c);b&&n.appendChild(b)})}c.appendChild(q);return c}function Q(a){"string"!==typeof a&&(a=parseFloat(a));return(new Date(1E3*a)).toLocaleTimeString()}
-function N(a){a:{for(var b=a,d={};!d[b];){if(a=E.a.o[b])if("alias:"==a.substr(0,6))d[b]=!0,b=a.substr(6);else{b=document.createElement("span");b.className="emoji-custom emoji";b.style.backgroundImage="url('"+a+"')";a=b;break a}break}a=b}"string"===typeof a&&"makeEmoji"in window&&(a=window.makeEmoji(a));return"string"===typeof a?null:a}
-function ma(a){return a.replace(/:([^ \t]+):/g,function(b,d){var c=N(d);if(c){var f=document.createElement("span");f.className=b===a?"emoji-medium":"emoji-small";f.appendChild(c);return f.outerHTML}return b})}
-function R(a){a=a.split(/\r?\n/g);for(var b=0,d=a.length;b<d;b++){for(var c=a[b],f="",e={},h=!1,g=0,c=c.replace(RegExp("<([@#]?)([^>]*)>","g"),function(a,b,c){c=c.split("|");if("@"===b)c[1]?"@"!==c[1][0]&&(c[1]="@"+c[1]):(a=k(E.a,c[0]),c[1]=a?"@"+a.name:A.C),c[0]="#"+c[0],c[2]="slackmsg-link slackmsg-link-user";else if("#"===b)c[1]?"#"!==c[1][0]&&(c[1]="#"+c[1]):(a=u(E.a,c[0]),c[1]=a?"#"+a.name:A.B),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>"}),c=ma(c),l=c.length,q=function(a,b,c){for(;a[b];){if(" "!=a[b]&&a[b]!=c&&a[b+1]==c)return!0;b++}return!1},m=function(a){return Object.keys(e).length?'<span class="'+Object.keys(a).join(" ")+'">':""};g<l&&(" "===c[g]||"\t"===c[g]);)g++;"&gt;"===c.substr(g,4)&&(h=!0,g+=4);for(;g<l;g++){var n=c[g];if("<"===n){do f+=c[g++];while(">"!==c[g-1]);g--}else if(!e["slackmsg-style-bold"]&&
-"*"===n&&c[g+1]&&q(c,g,n))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-bold"]=!0,f+=m(e);else if(!e["slackmsg-style-strike"]&&"~"===n&&c[g+1]&&q(c,g,n))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-strike"]=!0,f+=m(e);else if(!e["slackmsg-style-code"]&&"`"===n&&c[g+1]&&q(c,g,n))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-code"]=!0,f+=m(e);else if(!e["slackmsg-style-italic"]&&"_"===n&&c[g+1]&&q(c,g,n))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-italic"]=
-!0,f+=m(e);else{var r=!1,f=f+n;do{if(e["slackmsg-style-bold"]&&"*"!==n&&"*"===c[g+1])delete e["slackmsg-style-bold"],r=!0;else if(e["slackmsg-style-strike"]&&"~"!==n&&"~"===c[g+1])delete e["slackmsg-style-strike"],r=!0;else if(e["slackmsg-style-code"]&&"`"!==n&&"`"===c[g+1])delete e["slackmsg-style-code"],r=!0;else if(e["slackmsg-style-italic"]&&"_"!==n&&"_"===c[g+1])delete e["slackmsg-style-italic"],r=!0;else break;n=c[++g]}while(g<l);r&&(f+="</span>"+m(e))}}e&&(f+="</span>");a[b]=h?'<span class="slackmsg-style-quote">'+
-f+"</span>":f}return a.join("<br/>")}function K(a,b,d){"me_message"===b.h?(a=P(a,b,d),a.classList.add("slackmsg-me_message")):a=P(a,b,d);return a}function H(){var a=0,b=0,d="";if(S)d="!"+A.u+" - ",document.getElementById("linkFavicon").href="favicon_err.png";else{for(var c in T)T.hasOwnProperty(c)&&(a+=T[c].m,b+=T[c].j);b?d="(!"+b+") - ":a&&(d="("+a+") - ");document.getElementById("linkFavicon").href=b||a?"favicon.png?h="+b+"&m="+a:"favicon_ok.png"}d+=E.a.s.name;document.title=d}
-function na(){if("Notification"in window)if("granted"===Notification.permission){var a=Date.now();if(D+3E4<a){var b=new Notification(A.w);D=a;setTimeout(function(){b.close()},5E3)}}else"denied"!==Notification.permission&&Notification.requestPermission()}
-function U(){var a=document.createDocumentFragment(),b=M.id;document.getElementById("chatWindow").textContent="";E.b[b]&&E.b[b].a.forEach(function(c){"message"===c.type&&(c=K(b,c),a.appendChild(c))});var d=document.getElementById("chatWindow");d.appendChild(a);d.scrollTop=d.scrollHeight-d.clientHeight}
-function oa(a){function b(a,b){for(b=b||a.target;b!==a.currentTarget&&b;){if(b.classList.contains("slackmsg-item"))return b.id;b=b.parentElement}}for(var d=a.target;d!==a.currentTarget&&d&&!d.classList.contains("slackmsg-hover");){if(d.parentElement&&d.parentElement.classList.contains("slackmsg-hover")){if(a=b(a,d)){a=parseFloat(a.split("_")[1]);var c=x(E.b[M.id],a);c&&d.classList.contains("slackmsg-hover-reply")?C!==c&&(C=c,J()):c&&d.classList.contains("slackmsg-hover-reaction")&&V.A(document.body,
-function(a){a&&O(M.id,c.id,a)})}break}d=d.parentElement}}function W(){document.getElementById("msgInput").focus()}function G(){var a=document.location.hash.substr(1),b=u(E.a,a),a=k(E.a,a);b&&b!==M?X(b):a&&a.a&&X(a.a)}
-document.addEventListener("DOMContentLoaded",function(){ja();document.getElementById("chatWindow").addEventListener("click",oa);window.addEventListener("hashchange",function(){document.location.hash&&"#"===document.location.hash[0]&&G()});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),pa(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();M&&document.getElementById("fileUploadContainer").classList.remove("hidden");return!1});document.getElementById("msgForm").addEventListener("submit",function(a){a.preventDefault();a=document.getElementById("msgInput");if(M&&a.value){var b=M,d=C,c=new XMLHttpRequest,f="api/msg?room="+b.id+"&text="+encodeURIComponent(a.value);if(d){var e=k(E.a,d.i),h="Message";"C"===b.id[0]?h="Channel message":"D"===b.id[0]?
-h="Direct message":"G"===b.id[0]&&(h="Group message");f+="&attachments="+encodeURIComponent(JSON.stringify([{fallback:d.b.text||"",author_name:"<@"+e.id+"|"+e.name+">",author_icon:e.b.l,text:d.b.text||"",footer:h,ts:d.c}]))}c.open("POST",f,!0);c.send(null);a.value="";C&&(C=null,J())}W();return!1});window.addEventListener("blur",function(){window.hasFocus=!1});window.addEventListener("focus",function(){window.hasFocus=!0;D=0;M&&Y();W()});window.hasFocus=!0;(function(){var a=document.getElementById("emojiButton");
-if("makeEmoji"in window){var b=window.makeEmoji("smile");b?a.innerHTML="<span class='emoji-small'>"+b.outerHTML+"</span>":a.style.backgroundImage='url("smile.svg")';(b=window.makeEmoji("paperclip"))?document.getElementById("attachFile").innerHTML="<span class='emoji-small'>"+b.outerHTML+"</span>":document.getElementById("attachFile").style.backgroundImage='url("public/paperclip.svg")';a.addEventListener("click",function(){V.A(document.body,function(a){a&&(document.getElementById("msgInput").value+=
-":"+a+":")})})}else a.classList.add("hidden")})();Z()});var V=function(){function a(){if(!b())return!1;r&&r(null);return!0}function b(){return e.parentElement?(e.parentElement.removeChild(h),e.parentElement.removeChild(e),!0):!1}function d(a){var b=0;a=void 0===a?m.value:a;if(f()){a=window.searchEmojis(a);for(var c in n)n[c].visible&&!a[c]&&(n[c].visible=!1,l.removeChild(n[c].g));for(c in a){var d=n[c];if(!d){var d=n,e=c,g=c,t=window.makeEmoji(a[c]),h=document.createElement("span");h.appendChild(t);h.className="emoji-medium";t=document.createElement("li");
-t.appendChild(h);t.className="emojibar-list-item";t.id="emojibar-"+g;d=d[e]={visible:!1,g:t}}d.visible||(d.visible=!0,l.appendChild(d.g));b++}}return b}function c(a){var b=document.createElement("img"),c=document.createElement("div");b.src=a;c.appendChild(b);c.className="emojibar-header";return c}function f(){return"searchEmojis"in window}var e=document.createElement("div"),h=document.createElement("div"),g=document.createElement("div"),l=document.createElement("ul"),q=document.createElement("ul"),
-m=document.createElement("input"),n={},r;h.addEventListener("click",function(b){var c=e.getBoundingClientRect();(b.screenY<c.top||b.screenY>c.bottom||b.screenX<c.left||b.screenX>c.right)&&a()});h.className="emojibar-overlay";e.className="emojibar";g.className="emojibar-emojis";l.className=q.className="emojibar-list";m.className="emojibar-search";g.appendChild(c(window.emojiProviderHeader));g.appendChild(l);g.appendChild(c("emojicustom.png"));g.appendChild(q);e.appendChild(g);e.appendChild(m);m.addEventListener("keyup",
-function(){d()});e.addEventListener("click",function(a){for(a=a.target;a!==e&&a&&"LI"!==a.nodeName;)a=a.parentElement;a&&"LI"===a.nodeName&&a.id&&"emojibar-"===a.id.substr(0,9)&&(a=a.id.substr(9),b()&&r&&r(a))});return{isSupported:f,A:function(a,b){return f()?(r=b,a.appendChild(h),a.appendChild(e),m.value="",d(),m.focus(),!0):!1},search:d,close:a}}();var E,T={};function qa(a,b){if(a&&(a!==M||!window.hasFocus)){var d=new RegExp("<@"+E.a.b.id),c=!1,f=!1;T[a.id]||(T[a.id]={j:0,m:0});b.forEach(function(b){"message"===b.type&&b.text&&("D"===a.id[0]||b.text.match(d)?(f|=!T[a.id].j,T[a.id].j++,c=!0):T[a.id].m++)});H();document.getElementById(a.id).classList.add("unread");c&&document.getElementById(a.id).classList.add("unreadHi");f&&!window.hasFocus&&na()}}
-function Y(){var a=M;T[a.id]&&(T[a.id]={j:0,m:0},H());a=document.getElementById(a.id);a.classList.remove("unread");a.classList.remove("unreadHi")}E=new function(){this.c=0;this.a=new p;this.b={}};var S=0,M=null;function ra(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){S&&(S=0,I(!0));d=b.response;try{d=JSON.parse(d)}catch(f){d=null}}else S?(S+=Math.floor((S||5)/2),S=Math.min(60,S)):(S=5,I(!1));a(c,d)}else S&&(S=0,I(!0)),ra(a)};b.open("GET","api?v="+E.c,!0);b.send(null)}
-function sa(a,b){if(a){if(b){var d=E;b.v&&(d.c=b.v);if(b["static"]){for(var c=d.a,f=b["static"],e=0,h=f.bots.length;e<h;e++)c.h[f.bots[e].id]=new fa(f.bots[e]);e=0;for(h=f.users.length;e<h;e++)c.a[f.users[e].id]=new ea(f.users[e]);e=0;for(h=f.ims.length;e<h;e++){var g=k(c,f.ims[e].user);g&&(g.a=new da(g,f.ims[e]),c.i[g.a.id]=g.a)}e=0;for(h=f.channels.length;e<h;e++)c.f[f.channels[e].id]=new ba(f.channels[e],c);e=0;for(h=f.groups.length;e<h;e++)c.c[f.groups[e].id]=new ca(c,f.groups[e]);c.o=f.emojis;
-c.s=new aa(f.team);c.b=k(c,f.self.id);ka()}if(b.live){for(var l in b.live)(c=d.b[l])?w(c,b.live[l]):d.b[l]=new v(l,250,b.live[l]);for(var q in b.live)qa(u(d.a,q),b.live[q]),M&&b.live[M.id]&&U()}}Z()}else setTimeout(Z,1E3*S)}function Z(){ra(sa)}
-function X(a){M&&document.getElementById(M.id).classList.remove("selected");document.getElementById(a.id).classList.add("selected");document.body.classList.remove("no-room-selected");M=a;a=M.name||(M.c?M.c.name:void 0);if(!a){a=[];for(var b in M.a)a.push(M.a[b].name);a=a.join(", ")}document.getElementById("currentRoomTitle").textContent=a;U();W();document.getElementById("fileUploadContainer").classList.add("hidden");Y();C&&(C=null,J());M.b&&!E.b[M.id]&&(b=new XMLHttpRequest,b.open("GET","api/hist?room="+
-M.id,!0),b.send(null))}function pa(a,b,d){var c=M;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 O(a,b,d){var c=new XMLHttpRequest;c.open("POST","api/reaction?room="+a+"&msg="+b+"&reaction="+encodeURIComponent(d),!0);c.send(null)};
+function w(a,b){var d=0;b.forEach(function(a){d=Math.max(this.push(a),d)}.bind(a));ia(a)}v.prototype.push=function(a){for(var b=parseFloat(a.ts),d=0,c=this.a.length;d<c;d++)if(this.a[d].c===b)return b;for(this.a.push(new ga(a,b));this.a.length>this.b;)this.a.shift();if("reaction_added"===a.type){if(d=z(this,parseFloat(a.item.ts)))c=a.reaction,a=a.user,d.a[c]||(d.a[c]=[]),d.a[c].push(a)}else"reaction_removed"===a.type&&(d=z(this,parseFloat(a.item.ts)))&&ha(d,a.reaction,a.user);return b};
+function z(a,b){for(var d=0,c=a.a.length;d<c&&b>=a.a[d].c;d++)if(a.a[d].c===b)return a.a[d];return null}function ia(a){a.a.sort(function(a,d){return a.c-d.c})}"undefined"!==typeof module&&(module.D.H=v);var A={},B;function ja(){var a;if(!a){for(var b=0,d=navigator.languages.length;b<d;b++)if(A.hasOwnProperty(navigator.languages[b])){a=navigator.languages[b];break}a||(a="en")}B=A[a];console.log("Loading language pack: "+a);if(B.g)for(b in B.g)document.getElementById(b).textContent=B.g[b]};A.fr={C:"Utilisateur inconnu",B:"Channel inconnu",w:"Nouveau message",u:"Reseau",g:{fileUploadCancel:"Annuler",neterror:"Impossible de se connecter au chat !"}};A.en={C:"Unknown member",B:"Unknown channel",w:"New message",u:"Network",g:{fileUploadCancel:"Cancel",neterror:"Cannot connect to chat !"}};var E=null,F=0;
+function ka(){var a=document.createDocumentFragment(),b=G.a.b?Object.keys(G.a.b.f):[];b.sort(function(a,b){return a[0]!==b[0]?a[0]-b[0]:(G.a.f[a]||G.a.c[a]).name.localeCompare((G.a.f[b]||G.a.c[b]).name)});b.forEach(function(b){b=G.a.f[b]||G.a.c[b];var c=document.createElement("li"),d=document.createElement("a");c.id=b.id;d.href="#"+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");d.textContent=
+b.name;c.appendChild(d);c&&a.appendChild(c)});b=G.a.a?Object.keys(G.a.a):[];b.sort(function(a,b){return G.a.a[a].name.localeCompare(G.a.a[b].name)});b.forEach(function(b){b=G.a.a[b].a;var c=document.createElement("li"),d=document.createElement("a");c.id=b.id;d.href="#"+b.id;c.className="slack-context-room";d.textContent=b.c.name;c.appendChild(d);c&&a.appendChild(c)});document.getElementById("chanList").textContent="";document.getElementById("chanList").appendChild(a);K();L()}
+function M(a){a?document.body.classList.remove("no-network"):document.body.classList.add("no-network");L()}function N(){if(E){document.body.classList.add("replyingTo");var a=document.getElementById("replyToContainer"),b=document.createElement("a");b.addEventListener("click",function(){E=null;N()});b.className="replyto-close";b.textContent="x";a.textContent="";a.appendChild(b);a.appendChild(O("reply_"+P.id,E,!0))}else document.body.classList.remove("replyingTo")}
+function la(a,b,d,c){var f=Q(d);if(f){for(var e=document.createElement("li"),h=document.createElement("a"),g=document.createElement("span"),l=document.createElement("span"),m=[],n=0,r=c.length;n<r;n++){var q=k(G.a,c[n]);q&&m.push(q.name)}m.sort();l.textContent=m.join(", ");g.appendChild(f);g.className="emoji-small";h.href="javascript:toggleReaction('"+a+"', '"+b+"', '"+d+"')";h.appendChild(g);h.appendChild(l);e.className="slackmsg-reaction-item";e.appendChild(h);return e}return null}
+window.toggleReaction=function(a,b,d){var c=G.b[a];if(c){a:{for(var f=0,e=c.a.length;f<e;f++)if(c.a[f].id==b){c=c.a[f];break a}c=null}c&&(f=G.a.b.id,c.a[d]&&-1!==c.a[d].indexOf(f)?(c=new XMLHttpRequest,c.open("DELETE","api/reaction?room="+a+"&msg="+b+"&reaction="+encodeURIComponent(d),!0),c.send(null)):R(a,b,d))}};
+function S(a,b,d){var c=document.createElement("div"),f=document.createElement("div"),e=document.createElement("div"),h=document.createElement("div"),g=document.createElement("img"),l=document.createElement("span"),m=document.createElement("ul"),n=document.createElement("li"),r=document.createElement("ul"),q=document.createElement("ul"),t=b.b.user?G.a.a[b.b.user]:G.a.h[b.b.bot_id];c.id=a+"_"+b.c;c.className="slackmsg-item";f.className="slackmsg-ts";e.className="slackmsg-msg";h.className="slackmsg-author";
+g.className="slackmsg-author-img";l.className="slackmsg-author-name";m.className="slackmsg-hover";n.className="slackmsg-hover-reply";f.innerHTML=T(b.c);e.innerHTML=U(b.b.text||"");l.textContent=t?t.name:b.b.username||"?";t||b.b.username||(e.textContent=b.b.subtype||JSON.stringify(b.b));g.src=t?t.b.l:"";h.appendChild(g);h.appendChild(l);m.appendChild(n);"makeEmoji"in window?(g=document.createElement("li"),l=window.makeEmoji("arrow_heading_down"),t=window.makeEmoji("smile"),g.className="slackmsg-hover-reaction",
+t?(g.classList.add("emoji-small"),g.appendChild(t)):g.style.backgroundImage='url("smile.svg")',l?(n.classList.add("emoji-small"),n.appendChild(l)):n.style.backgroundImage='url("repl.svg")',m.appendChild(g)):n.style.backgroundImage='url("repl.svg")';c.appendChild(h);c.appendChild(e);c.appendChild(f);c.appendChild(r);c.appendChild(q);r.className="slackmsg-attachments";q.className="slackmsg-reactions";if(!0!==d){if(b.a)for(var y in b.a)(d=la(a,b.id,y,b.a[y]))&&q.appendChild(d);b.b.attachments&&b.b.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"),x=document.createElement("a"),h=document.createElement("div"),t=document.createElement("div"),l=document.createElement("img"),m=document.createElement("img"),n=document.createElement("div"),q=document.createElement("img"),y=document.createElement("span"),J=document.createElement("span");b.className="slackmsg-attachment";
+var D="#e3e4e6";a.color&&("#"===a.color[0]?D=a.color[0]:"good"===a.color?D="#2fa44f":"warning"===a.color?D="#de9e31":"danger"===a.color&&(D="#d50200"));c.style.borderColor=D;d.className="slackmsg-attachment-pretext";a.pretext?d.innerHTML=U(a.pretext):d.classList.add("hidden");e.target="_blank";a.title?(e.innerHTML=U(a.title),a.title_link&&(e.href=a.title_link),e.className="slackmsg-attachment-title"):e.className="hidden slackmsg-attachment-title";x.target="_blank";f.className="slackmsg-author";a.author_name?
+(x.innerHTML=U(a.author_name),x.href=a.author_link||"",x.className="slackmsg-author-name",g.className="slackmsg-author-img",a.author_icon?g.src=a.author_icon:g.classList.add("hidden")):f.classList.add("hidden");t.innerHTML=U(a.text||"");t.a="slackmsg-attachment-text";l.className="slackmsg-attachment-thumb";a.thumb_url?l.src=a.thumb_url:l.classList.add("hidden");m.className="slackmsg-attachment-img";a.image_url?m.src=a.image_url:m.classList.add("hidden");n.className="slackmsg-attachment-footer";y.className=
+"slackmsg-attachment-footer-text";q.className="slackmsg-attachment-footer-icon";a.footer?(y.innerHTML=U(a.footer),a.footer_icon?q.src=a.footer_icon:q.classList.add("hidden")):(q.classList.add("hidden"),y.classList.add("hidden"));J.className="slackmsg-ts";a.ts?J.innerHTML=T(a.ts):J.classList.add("hidden");f.appendChild(g);f.appendChild(x);h.appendChild(t);h.appendChild(l);n.appendChild(q);n.appendChild(y);n.appendChild(J);c.appendChild(e);c.appendChild(f);c.appendChild(h);c.appendChild(m);c.appendChild(n);
+b.appendChild(d);b.appendChild(c);b&&r.appendChild(b)})}c.appendChild(m);return c}function T(a){"string"!==typeof a&&(a=parseFloat(a));return(new Date(1E3*a)).toLocaleTimeString()}
+function Q(a){a:{for(var b=a,d={};!d[b];){if(a=G.a.o[b])if("alias:"==a.substr(0,6))d[b]=!0,b=a.substr(6);else{b=document.createElement("span");b.className="emoji-custom emoji";b.style.backgroundImage="url('"+a+"')";a=b;break a}break}a=b}"string"===typeof a&&"makeEmoji"in window&&(a=window.makeEmoji(a));return"string"===typeof a?null:a}
+function ma(a){return a.replace(/:([^ \t]+):/g,function(b,d){var c=Q(d);if(c){var f=document.createElement("span");f.className=b===a?"emoji-medium":"emoji-small";f.appendChild(c);return f.outerHTML}return b})}
+function U(a){a=a.split(/\r?\n/g);for(var b=0,d=a.length;b<d;b++){for(var c=a[b],f="",e={},h=!1,g=0,c=c.replace(RegExp("<([@#]?)([^>]*)>","g"),function(a,b,c){c=c.split("|");if("@"===b)c[1]?"@"!==c[1][0]&&(c[1]="@"+c[1]):(a=k(G.a,c[0]),c[1]=a?"@"+a.name:B.C),c[0]="#"+c[0],c[2]="slackmsg-link slackmsg-link-user";else if("#"===b)c[1]?"#"!==c[1][0]&&(c[1]="#"+c[1]):(a=u(G.a,c[0]),c[1]=a?"#"+a.name:B.B),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>"}),c=ma(c),l=c.length,m=function(a,b,c){for(;a[b];){if(" "!=a[b]&&a[b]!=c&&a[b+1]==c)return!0;b++}return!1},n=function(a){return Object.keys(e).length?'<span class="'+Object.keys(a).join(" ")+'">':""};g<l&&(" "===c[g]||"\t"===c[g]);)g++;"&gt;"===c.substr(g,4)&&(h=!0,g+=4);for(;g<l;g++){var r=c[g];if("<"===r){do f+=c[g++];while(">"!==c[g-1]);g--}else if(!e["slackmsg-style-bold"]&&
+"*"===r&&c[g+1]&&m(c,g,r))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-bold"]=!0,f+=n(e);else if(!e["slackmsg-style-strike"]&&"~"===r&&c[g+1]&&m(c,g,r))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-strike"]=!0,f+=n(e);else if(!e["slackmsg-style-code"]&&"`"===r&&c[g+1]&&m(c,g,r))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-code"]=!0,f+=n(e);else if(!e["slackmsg-style-italic"]&&"_"===r&&c[g+1]&&m(c,g,r))Object.keys(e).length&&(f+="</span>"),e["slackmsg-style-italic"]=
+!0,f+=n(e);else{var q=!1,f=f+r;do{if(e["slackmsg-style-bold"]&&"*"!==r&&"*"===c[g+1])delete e["slackmsg-style-bold"],q=!0;else if(e["slackmsg-style-strike"]&&"~"!==r&&"~"===c[g+1])delete e["slackmsg-style-strike"],q=!0;else if(e["slackmsg-style-code"]&&"`"!==r&&"`"===c[g+1])delete e["slackmsg-style-code"],q=!0;else if(e["slackmsg-style-italic"]&&"_"!==r&&"_"===c[g+1])delete e["slackmsg-style-italic"],q=!0;else break;r=c[++g]}while(g<l);q&&(f+="</span>"+n(e))}}e&&(f+="</span>");a[b]=h?'<span class="slackmsg-style-quote">'+
+f+"</span>":f}return a.join("<br/>")}function O(a,b,d){"me_message"===b.h?(a=S(a,b,d),a.classList.add("slackmsg-me_message")):a=S(a,b,d);return a}function L(){var a=0,b=0,d="";if(V)d="!"+B.u+" - ",document.getElementById("linkFavicon").href="favicon_err.png";else{for(var c in W)W.hasOwnProperty(c)&&(a+=W[c].m,b+=W[c].j);b?d="(!"+b+") - ":a&&(d="("+a+") - ");document.getElementById("linkFavicon").href=b||a?"favicon.png?h="+b+"&m="+a:"favicon_ok.png"}d+=G.a.s.name;document.title=d}
+function na(){if("Notification"in window)if("granted"===Notification.permission){var a=Date.now();if(F+3E4<a){var b=new Notification(B.w);F=a;setTimeout(function(){b.close()},5E3)}}else"denied"!==Notification.permission&&Notification.requestPermission()}
+function X(){var a=document.createDocumentFragment(),b=P.id;document.getElementById("chatWindow").textContent="";G.b[b]&&G.b[b].a.forEach(function(c){"message"===c.type&&(c=O(b,c),a.appendChild(c))});var d=document.getElementById("chatWindow");d.appendChild(a);d.scrollTop=d.scrollHeight-d.clientHeight}
+function oa(a){function b(a,b){for(b=b||a.target;b!==a.currentTarget&&b;){if(b.classList.contains("slackmsg-item"))return b.id;b=b.parentElement}}for(var d=a.target;d!==a.currentTarget&&d&&!d.classList.contains("slackmsg-hover");){if(d.parentElement&&d.parentElement.classList.contains("slackmsg-hover")){if(a=b(a,d)){a=parseFloat(a.split("_")[1]);var c=z(G.b[P.id],a);c&&d.classList.contains("slackmsg-hover-reply")?E!==c&&(E=c,N()):c&&d.classList.contains("slackmsg-hover-reaction")&&pa.A(document.body,
+function(a){a&&R(P.id,c.id,a)})}break}d=d.parentElement}}function Y(){document.getElementById("msgInput").focus()}function K(){var a=document.location.hash.substr(1),b=u(G.a,a),a=k(G.a,a);b&&b!==P?qa(b):a&&a.a&&qa(a.a)}
+document.addEventListener("DOMContentLoaded",function(){ja();document.getElementById("chatWindow").addEventListener("click",oa);window.addEventListener("hashchange",function(){document.location.hash&&"#"===document.location.hash[0]&&K()});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),ra(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();P&&document.getElementById("fileUploadContainer").classList.remove("hidden");return!1});document.getElementById("msgForm").addEventListener("submit",function(a){a.preventDefault();a=document.getElementById("msgInput");if(P&&a.value){var b=P,d=E,c=new XMLHttpRequest,f="api/msg?room="+b.id+"&text="+encodeURIComponent(a.value);if(d){var e=k(G.a,d.i),h="Message";"C"===b.id[0]?h="Channel message":"D"===b.id[0]?
+h="Direct message":"G"===b.id[0]&&(h="Group message");f+="&attachments="+encodeURIComponent(JSON.stringify([{fallback:d.b.text||"",author_name:"<@"+e.id+"|"+e.name+">",author_icon:e.b.l,text:d.b.text||"",footer:h,ts:d.c}]))}c.open("POST",f,!0);c.send(null);a.value="";E&&(E=null,N())}Y();return!1});window.addEventListener("blur",function(){window.hasFocus=!1});window.addEventListener("focus",function(){window.hasFocus=!0;F=0;P&&sa();Y()});window.hasFocus=!0;(function(){var a=document.getElementById("emojiButton");
+if("makeEmoji"in window){var b=window.makeEmoji("smile");b?a.innerHTML="<span class='emoji-small'>"+b.outerHTML+"</span>":a.style.backgroundImage='url("smile.svg")';(b=window.makeEmoji("paperclip"))?document.getElementById("attachFile").innerHTML="<span class='emoji-small'>"+b.outerHTML+"</span>":document.getElementById("attachFile").style.backgroundImage='url("public/paperclip.svg")';a.addEventListener("click",function(){pa.A(document.body,function(a){a&&(document.getElementById("msgInput").value+=
+":"+a+":");Y()})})}else a.classList.add("hidden")})();Z()});var pa=function(){function a(a,b){for(var c=a.target;c!==g&&c&&"LI"!==c.nodeName;)c=c.parentElement;c&&"LI"===c.nodeName&&c.id&&"emojibar-"===c.id.substr(0,9)?b(c.id.substr(9)):b(null)}function b(a){c()&&C&&C(a)}function d(){if(!c())return!1;C&&C(null);return!0}function c(){return g.parentElement?(g.parentElement.removeChild(l),g.parentElement.removeChild(g),!0):!1}function f(a){var b=0;a=void 0===a?q.value:a;if(h()){a=window.searchEmojis(a);for(var c in t)t[c].visible&&(t[c].visible=!1,n.removeChild(t[c].g));
+for(c in a){var d=t[c];if(!d){var d=t,e=c,f=c,g=window.makeEmoji(a[c]),l=document.createElement("span");l.appendChild(g);l.className="emoji-medium";g=document.createElement("li");g.appendChild(l);g.className="emojibar-list-item";g.id="emojibar-"+f;d=d[e]={visible:!1,g:g}}d.visible||(d.visible=!0,n.appendChild(d.g));b++}}return b}function e(a){var b=document.createElement("img"),c=document.createElement("div");b.src=a;c.appendChild(b);c.className="emojibar-header";return c}function h(){return"searchEmojis"in
+window}var g=document.createElement("div"),l=document.createElement("div"),m=document.createElement("div"),n=document.createElement("ul"),r=document.createElement("ul"),q=document.createElement("input"),t={},y={},x=document.createElement("div"),H=document.createElement("span"),I=document.createElement("span"),C;l.addEventListener("click",function(a){var b=g.getBoundingClientRect();(a.screenY<b.top||a.screenY>b.bottom||a.screenX<b.left||a.screenX>b.right)&&d()});l.className="emojibar-overlay";g.className=
+"emojibar";m.className="emojibar-emojis";x.className="emojibar-detail";H.className="emojibar-detail-img";I.className="emojibar-detail-name";n.className=r.className="emojibar-list";q.className="emojibar-search";x.appendChild(H);x.appendChild(I);m.appendChild(e(window.emojiProviderHeader));m.appendChild(n);m.appendChild(e("emojicustom.png"));m.appendChild(r);g.appendChild(m);g.appendChild(x);g.appendChild(q);q.addEventListener("keyup",function(){f()});g.addEventListener("mousemove",function(b){a(b,
+function(a){var b=a?t[a]||y[a]:null;b?(H.innerHTML=b.g.outerHTML,I.textContent=":"+a+":"):(H.textContent="",I.textContent="")})});g.addEventListener("click",function(c){a(c,b)});return{isSupported:h,A:function(a,b){return h()?(C=b,a.appendChild(l),a.appendChild(g),q.value="",f(),q.focus(),!0):!1},search:f,close:d}}();var G,W={};function ta(a,b){if(a&&(a!==P||!window.hasFocus)){var d=new RegExp("<@"+G.a.b.id),c=!1,f=!1;W[a.id]||(W[a.id]={j:0,m:0});b.forEach(function(b){"message"===b.type&&b.text&&("D"===a.id[0]||b.text.match(d)?(f|=!W[a.id].j,W[a.id].j++,c=!0):W[a.id].m++)});L();document.getElementById(a.id).classList.add("unread");c&&document.getElementById(a.id).classList.add("unreadHi");f&&!window.hasFocus&&na()}}
+function sa(){var a=P;W[a.id]&&(W[a.id]={j:0,m:0},L());a=document.getElementById(a.id);a.classList.remove("unread");a.classList.remove("unreadHi")}G=new function(){this.c=0;this.a=new p;this.b={}};var V=0,P=null;function ua(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){V&&(V=0,M(!0));d=b.response;try{d=JSON.parse(d)}catch(f){d=null}}else V?(V+=Math.floor((V||5)/2),V=Math.min(60,V)):(V=5,M(!1));a(c,d)}else V&&(V=0,M(!0)),ua(a)};b.open("GET","api?v="+G.c,!0);b.send(null)}
+function va(a,b){if(a){if(b){var d=G;b.v&&(d.c=b.v);if(b["static"]){for(var c=d.a,f=b["static"],e=0,h=f.bots.length;e<h;e++)c.h[f.bots[e].id]=new fa(f.bots[e]);e=0;for(h=f.users.length;e<h;e++)c.a[f.users[e].id]=new ea(f.users[e]);e=0;for(h=f.ims.length;e<h;e++){var g=k(c,f.ims[e].user);g&&(g.a=new da(g,f.ims[e]),c.i[g.a.id]=g.a)}e=0;for(h=f.channels.length;e<h;e++)c.f[f.channels[e].id]=new ba(f.channels[e],c);e=0;for(h=f.groups.length;e<h;e++)c.c[f.groups[e].id]=new ca(c,f.groups[e]);c.o=f.emojis;
+c.s=new aa(f.team);c.b=k(c,f.self.id);ka()}if(b.live){for(var l in b.live)(c=d.b[l])?w(c,b.live[l]):d.b[l]=new v(l,250,b.live[l]);for(var m in b.live)ta(u(d.a,m),b.live[m]),P&&b.live[P.id]&&X()}}Z()}else setTimeout(Z,1E3*V)}function Z(){ua(va)}
+function qa(a){P&&document.getElementById(P.id).classList.remove("selected");document.getElementById(a.id).classList.add("selected");document.body.classList.remove("no-room-selected");P=a;a=P.name||(P.c?P.c.name:void 0);if(!a){a=[];for(var b in P.a)a.push(P.a[b].name);a=a.join(", ")}document.getElementById("currentRoomTitle").textContent=a;X();Y();document.getElementById("fileUploadContainer").classList.add("hidden");sa();E&&(E=null,N());P.b&&!G.b[P.id]&&(b=new XMLHttpRequest,b.open("GET","api/hist?room="+
+P.id,!0),b.send(null))}function ra(a,b,d){var c=P;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 R(a,b,d){var c=new XMLHttpRequest;c.open("POST","api/reaction?room="+a+"&msg="+b+"&reaction="+encodeURIComponent(d),!0);c.send(null)};

+ 12 - 34
srv/public/style.css

@@ -1,31 +1,8 @@
 
-body {
-    margin: 0;
-    padding: 0;
-}
+body { display: flex; margin: 0; padding: 0; }
 
-.slack-context {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 250px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: #4D394B;
-}
-
-.slack-chat-container {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 250px;
-    right: 0;
-    overflow: hidden;
-    padding: 0 10px;
-}
+.slack-context { display: inline-block; width: 250px; overflow-x: hidden; overflow-y: auto; background-color: #4D394B; }
+.slack-chat-container { display: flex; flex-direction: column; flex: 1; overflow: hidden; padding: 0 10px; }
 
 .slack-context-channellist { padding-left: 0; list-style: none; }
 .slack-context-room > a { display: block; padding: 3px 0 3px 1.5em; text-decoration: none; color: #AB9BA9; margin-right: 15px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
@@ -36,9 +13,9 @@ body {
 .error { display: none; position: fixed; top: 0; left: 0; right: 0; height: 2em; line-height: 2em; background: #ffa2a2; padding: 0.5em 1em; }
 .button { border: 1px solid black; background: white; cursor: pointer; font: 13.3333px Arial; margin: 0; padding: 1px 6px; }
 .no-network .error { display: inline-block; }
-.slack-chat-content { height: calc(100vh - 8em); overflow: auto; }
-.slack-chat-title { display: inline-block; height: 1.75em; font-size: 1.75em; font-style: italic; }
-.slack-chat-control { display: inline-block; position: relative; width: 100%; height: 2em; padding: 1.5em 0; }
+.slack-chat-content { flex: 1; overflow: auto; }
+.slack-chat-title { display: inline-block; padding: 14px 0; font-size: 1.75em; font-style: italic; }
+.slack-chat-control { display: inline-block; width: 100%; height: 2em; padding: 14px 0; }
 .slack-chat-control > * { display: inline-block; height: 100%; }
 .slack-context-room.unread, .slack-context-room.unread > a { font-weight: bold; color: white; }
 .slack-context-room.unreadHi, .slack-context-room.unreadHi > a { font-weight: bold; color: #4c9689; }
@@ -78,9 +55,9 @@ body {
 .slackmsg-attachment-img { max-height: 200px; max-width: 400px; }
 
 .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 { display: flex; width: 100%; }
+.msgform-input { flex: 1; }
+.msgform-action { margin: 0 0 0 10px; }
 .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; }
@@ -94,12 +71,13 @@ body {
 .emoji-medium .emoji { transform: scale(0.5); position: absolute; left: -19px; top: -16px; }
 .emoji-custom { text-indent: -9999em; image-rendering: optimizeQuality; font-size: inherit; height: 64px; width: 64px; top: -3px; position: relative; display: inline-block; margin: 0 .15em; line-height: normal; vertical-align: middle; background-repeat: no-repeat; background-size: contain; }
 
-.emojibar { position: fixed; display: flex; flex-direction: column; height: 250px; width: 300px; padding: 5px; overflow: hidden; background: #ddd; z-index: 1000; text-align: right; }
+.emojibar { position: fixed; display: flex; flex-direction: column; height: 300px; width: 300px; padding: 5px; overflow: hidden; background: #ddd; z-index: 1000; text-align: right; }
 .emojibar-emojis { display: block; flex: 1; width: 100%; overflow: auto; text-align: left; }
 .emojibar-header { height: 30px; display: block; text-align: center; }
 .emojibar-header > img { max-width: 100%; max-height: 20px; }
-.emojibar-list { list-style: none; padding: 0; margin: 0; }
+.emojibar-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
 .emojibar-list-item { display: inline-block; margin: 5px; cursor: pointer; }
+.emojibar-detail { display: block; height: 40px; text-align: left; }
 .emojibar-search { width: 300px; margin: 5px auto; }
 .emojibar-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0;  background: transparent; }