[tmp] refactored hover dom creation

cli/dom.js

@@ -130,6 +130,35 @@ function createReactionDom(chanId, msgId, reaction, users) {
     return null;
 }
 
+/**
+ * @param {Element} hover
+ * @param {UiMessage|UiMeMessage|UiNoticeMessage} msg
+**/
+function addHoverButtons(hover, msg) {
+    var hoverReply = document.createElement("li");
+    hoverReply.className = R.klass.msg.hover.reply;
+    hoverReply.style.backgroundImage = 'url("repl.svg")';
+    hover.appendChild(hoverReply);
+
+    var hoverReaction = document.createElement("li");
+    hoverReaction.className = R.klass.msg.hover.reaction;
+    hoverReaction.style.backgroundImage = 'url("smile.svg")';
+    hover.appendChild(hoverReaction);
+
+    if (DATA.context.isMe(msg.userId)) {
+        var hoverEdit = document.createElement("li");
+        hoverEdit.className = R.klass.msg.hover.edit;
+        hoverEdit.style.backgroundImage = 'url("edit.svg")';
+        hover.appendChild(hoverEdit);
+
+        var hoverRemove = document.createElement("li")
+        hoverRemove.className = R.klass.msg.hover.remove;
+        hoverRemove.style.backgroundImage = 'url("remove.svg")';
+        hover.appendChild(hoverRemove);
+    }
+
+}
+
 /**
  * @param {UiMessage|UiMeMessage|UiNoticeMessage} msg
  * @param {boolean=} skipAttachment
@@ -140,8 +169,7 @@ function doCreateMessageDom(msg, skipAttachment) {
     var dom = document.createElement("div")
         ,msgBlock = document.createElement("div")
         ,hoverReaction = document.createElement("li")
-        ,hover = document.createElement("ul")
-        ,hoverReply = document.createElement("li")
+        ,hover = document.createElement("ul");
 
     dom.attachments = document.createElement("ul");
     dom.reactions = document.createElement("ul");
@@ -154,26 +182,9 @@ function doCreateMessageDom(msg, skipAttachment) {
     dom.ts.className = R.klass.msg.ts;
     dom.textDom.className = R.klass.msg.msg;
     dom.authorName.className = R.klass.msg.authorname;
-    hover.className = R.klass.msg.hover.container;
-    hoverReply.className = R.klass.msg.hover.reply;
-    hover.appendChild(hoverReply);
-
-    hoverReaction.className = R.klass.msg.hover.reaction;
-    hoverReaction.style.backgroundImage = 'url("smile.svg")';
-    hoverReply.style.backgroundImage = 'url("repl.svg")';
-    hover.appendChild(hoverReaction);
-
-    if (DATA.context.isMe(msg.userId)) {
-        var hoverEdit = document.createElement("li");
-        hoverEdit.className = R.klass.msg.hover.edit;
-        hoverEdit.style.backgroundImage = 'url("edit.svg")';
-        hover.appendChild(hoverEdit);
 
-        var hoverRemove = document.createElement("li")
-        hoverRemove.className = R.klass.msg.hover.remove;
-        hoverRemove.style.backgroundImage = 'url("remove.svg")';
-        hover.appendChild(hoverRemove);
-    }
+    addHoverButtons(hover, msg);
+    hover.className = R.klass.msg.hover.container;
 
     msgBlock.appendChild(dom.authorName);
     msgBlock.appendChild(dom.textDom);

srv/public/mimouchat.min.js

@@ -38,7 +38,7 @@ function Wa(){var a=M.name||(M.a?M.a.name:void 0);if(!a){var b=[];M.m.forEach(fu
 function U(){if(T){document.body.classList.add("replyingTo");var a=document.getElementById("replyToContainer"),b=document.createElement("a");b.addEventListener("click",function(){T=null;U()});b.className="replyto-close";b.textContent="x";a.textContent="";a.appendChild(b);a.appendChild(T.K())}else document.body.classList.remove("replyingTo"),document.getElementById("replyToContainer").textContent="";R()}
 function W(){if(V){document.body.classList.add("replyingTo");var a=document.getElementById("replyToContainer"),b=document.createElement("a");b.addEventListener("click",function(){V=null;W()});b.className="replyto-close";b.textContent="x";a.textContent="";a.appendChild(b);a.appendChild(V.K());document.getElementById("msgInput").value=V.text}else document.body.classList.remove("replyingTo"),document.getElementById("replyToContainer").textContent="";R()}
 window.toggleReaction=function(a,b,c){var d=E.a[a],e,f;(d=E.a[a])&&(e=ma(d,b))&&(f=H(E.context,a))&&(e.C[c]&&-1!==e.C[c].indexOf(f.self.id)?(d=new XMLHttpRequest,d.open("DELETE","api/reaction?room="+a+"&msg="+b+"&reaction="+encodeURIComponent(c),!0),d.send(null)):Ya(a,b,c))};
-function Za(a){a:{var b={};if(P)for(var c=P;!b[a];){if(c=c.b.data[a])if("alias:"==c.substr(0,6))b[a]=!0,a=c.substr(6);else{a=document.createElement("span");a.className="emoji-custom emoji";a.style.backgroundImage="url('"+c+"')";break a}break}}"string"===typeof a&&"makeEmoji"in window&&(a=window.makeEmoji(a));return"string"===typeof a?null:a}function $a(a,b){document.getElementById("linkFavicon").href=a||b?"favicon.png?h="+a+"&m="+b:"favicon_ok.png"}
+function Za(a){a:{var b={};if(P){var c;for(c=P;!b[a];){if(c=c.b.data[a])if("alias:"==c.substr(0,6))b[a]=!0,a=c.substr(6);else{a=document.createElement("span");a.className="emoji-custom emoji";a.style.backgroundImage="url('"+c+"')";break a}break}}}"string"===typeof a&&"makeEmoji"in window&&(a=window.makeEmoji(a));return"string"===typeof a?null:a}function $a(a,b){document.getElementById("linkFavicon").href=a||b?"favicon.png?h="+a+"&m="+b:"favicon_ok.png"}
 function O(){var a=N.length,b="";if(X)b="!"+K.Ja+" - Mimouchat",document.getElementById("linkFavicon").href="favicon_err.png";else if(a)b="(!"+a+")",$a(a,a);else{var c=0;qa(E.context,function(a){a.N>a.B&&c++});c&&(b="("+c+")");$a(0,c)}!b.length&&M&&(b=M.name);document.title=b.length?b:"Mimouchat"}
 function ab(){if("Notification"in window)if("granted"===Notification.permission){var a=Date.now();if(Ma+3E4<a){var b=new Notification(K.Ka);Ma=a;setTimeout(function(){b.close()},5E3)}}else"denied"!==Notification.permission&&Notification.requestPermission()}
 function Q(){var a=document.createDocumentFragment(),b=M.id,c=null,d=0,e=null,f;M.F?document.getElementById("chatSystemContainer").classList.add("starred"):document.getElementById("chatSystemContainer").classList.remove("starred");La=[];E.a[b]&&E.a[b].a.forEach(function(b){if(b.i)b.S();else{var g=b.L(),h=!1;c&&c.J===b.J&&b.J?30>Math.abs(d-b.l)&&!(b instanceof z)?e.classList.add("chatmsg-same-ts"):d=b.l:(d=b.l,h=!0);(!c||c.l<=M.B)&&b.l>M.B?g.classList.add("chatmsg-first-unread"):g.classList.remove("chatmsg-first-unread");
@@ -62,9 +62,9 @@ d.height=d.width=e.height=e.width=300;var f=d.getContext("2d"),g=e.getContext("2
 ca=h?100*h/m(180/Math.PI*Math.atan(.5*(Math.exp(Math.PI-2*Math.PI*ba/l)-Math.exp(-(Math.PI-2*Math.PI*ba/l)))),F/l*360-180,(F+1)/l*360-180):0;d=b;for(e=0;3>e;e++)for(h=0;3>h;h++)c(a,F+e-1,ba+h-1,{Ua:e,Wa:h,Pa:d}).then(function(a){if(a.Pa===b){g.drawImage(a.M,100*a.Ua,100*a.Wa,100,100);a=k-F;var c=n-ba;a=100*a+100;c=100*c+100;f.putImageData(g.getImageData(0,0,300,300),0,0);void 0!==ca&&(f.beginPath(),f.arc(a,c,Math.max(ca,10),0,2*Math.PI,!1),f.lineWidth=2,f.fillStyle="rgba(244, 146, 66, 0.4)",f.strokeStyle=
 "rgba(244, 146, 66, 0.8)",f.stroke(),f.fill());if(void 0===ca||25<ca)f.strokeStyle="rgba(244, 146, 66, 1)",f.beginPath(),f.moveTo(a-5,c-5),f.lineTo(a+5,c+5),f.stroke(),f.moveTo(a+5,c-5),f.lineTo(a-5,c+5),f.stroke()}})},n,k=function(c){c=Math.max(4,Math.min(19,c));n!==c&&(b++,n=c,h(n,Number(a.latitude),Number(a.longitude),Number(a.accuracy)))};k(12);var e=document.createElement("div"),l=document.createElement("div"),q=document.createElement("button"),r=document.createElement("button");e.className=
 "OSM-wrapper";d.className="OSM-canvas";l.className="OSM-controls";r.className="OSM-controls-zoomMin";q.className="OSM-controls-zoomPlus";r.addEventListener("click",function(){k(n-1)});q.addEventListener("click",function(){k(n+1)});l.appendChild(r);l.appendChild(q);e.appendChild(d);e.appendChild(l);return e}};function Oa(){var a=document.createElement("span"),b=document.createElement("span"),c=document.createElement("span"),d=document.createElement("span");a.className="typing-container";b.className="typing-dot1";c.className="typing-dot2";d.className="typing-dot3";b.textContent=c.textContent=d.textContent=".";a.appendChild(b);a.appendChild(c);a.appendChild(d);return a}var Pa=function(){var a={};return function(b){var c=a[b];c||(c=a[b]=document.createElement("header"),c.textContent=b);return c}}();
-function sb(a){var b=a.b,c=document.createElement("div"),d=document.createElement("div"),e=document.createElement("li"),f=document.createElement("ul"),g=document.createElement("li");c.o=document.createElement("ul");c.C=document.createElement("ul");c.l=document.createElement("div");c.qa=document.createElement("div");c.ia=document.createElement("span");c.id=b+"_"+a.id;c.className="chatmsg-item";c.l.className="chatmsg-ts";c.qa.className="chatmsg-msg";c.ia.className="chatmsg-author-name";f.className=
-"chatmsg-hover";g.className="chatmsg-hover-reply";f.appendChild(g);e.className="chatmsg-hover-reaction";e.style.backgroundImage='url("smile.svg")';g.style.backgroundImage='url("repl.svg")';f.appendChild(e);a:{b=E.context;e=0;for(g=b.a.length;e<g;e++)if(b.a[e].self.id===a.J){a=!0;break a}a=!1}a&&(a=document.createElement("li"),a.className="chatmsg-hover-edit",a.style.backgroundImage='url("edit.svg")',f.appendChild(a),a=document.createElement("li"),a.className="chatmsg-hover-remove",a.style.backgroundImage=
-'url("remove.svg")',f.appendChild(a));d.appendChild(c.ia);d.appendChild(c.qa);d.appendChild(c.l);d.appendChild(c.o);c.D=document.createElement("div");c.D.className="chatmsg-edited";d.appendChild(c.D);d.appendChild(c.C);d.className="chatmsg-content";c.o.className="chatmsg-attachments";c.C.className="chatmsg-reactions";c.appendChild(d);c.appendChild(f);return c}function tb(a){var b={good:"#2fa44f",warning:"#de9e31",danger:"#d50200"};if(a){if("#"===a[0])return a;if(b[a])return b[a]}return"#e3e4e6"}
+function sb(a){var b=a.b,c=document.createElement("div"),d=document.createElement("div"),e=document.createElement("ul");c.o=document.createElement("ul");c.C=document.createElement("ul");c.l=document.createElement("div");c.qa=document.createElement("div");c.ia=document.createElement("span");c.id=b+"_"+a.id;c.className="chatmsg-item";c.l.className="chatmsg-ts";c.qa.className="chatmsg-msg";c.ia.className="chatmsg-author-name";b=document.createElement("li");b.className="chatmsg-hover-reply";b.style.backgroundImage=
+'url("repl.svg")';e.appendChild(b);b=document.createElement("li");b.className="chatmsg-hover-reaction";b.style.backgroundImage='url("smile.svg")';e.appendChild(b);a:{for(var b=E.context,f=0,g=b.a.length;f<g;f++)if(b.a[f].self.id===a.J){a=!0;break a}a=!1}a&&(a=document.createElement("li"),a.className="chatmsg-hover-edit",a.style.backgroundImage='url("edit.svg")',e.appendChild(a),a=document.createElement("li"),a.className="chatmsg-hover-remove",a.style.backgroundImage='url("remove.svg")',e.appendChild(a));
+e.className="chatmsg-hover";d.appendChild(c.ia);d.appendChild(c.qa);d.appendChild(c.l);d.appendChild(c.o);c.D=document.createElement("div");c.D.className="chatmsg-edited";d.appendChild(c.D);d.appendChild(c.C);d.className="chatmsg-content";c.o.className="chatmsg-attachments";c.C.className="chatmsg-reactions";c.appendChild(d);c.appendChild(e);return c}function tb(a){var b={good:"#2fa44f",warning:"#de9e31",danger:"#d50200"};if(a){if("#"===a[0])return a;if(b[a])return b[a]}return"#e3e4e6"}
 function ub(a,b,c){var d=document.createElement("li"),e=document.createElement("div"),f=document.createElement("div"),g=document.createElement("a"),m=document.createElement("div"),h=document.createElement("img"),n=document.createElement("a"),k=document.createElement("div"),l=document.createElement("div"),q=document.createElement("div"),r=document.createElement("img"),w=document.createElement("div");d.className="chatmsg-attachment";e.style.borderColor=tb(b.color||"");e.className="chatmsg-attachment-block";
 f.className="chatmsg-attachment-pretext";b.pretext?f.innerHTML=a.u(b.pretext):f.classList.add("hidden");g.target="_blank";b.title?(g.innerHTML=a.u(b.title),b.title_link&&(g.href=b.title_link),g.className="chatmsg-attachment-title"):g.className="hidden chatmsg-attachment-title";n.target="_blank";m.className="chatmsg-author";b.author_name&&(n.innerHTML=a.u(b.author_name),n.href=b.author_link||"",n.className="chatmsg-author-name",h.className="chatmsg-author-img",b.author_icon&&(h.src=b.author_icon,m.appendChild(h)),
 m.appendChild(n));q.className="chatmsg-attachment-thumb";b.thumb_url?(h=document.createElement("img"),h.src=b.thumb_url,q.appendChild(h),e.classList.add("has-thumb"),b.video_html&&(q.dataset.video=b.video_html)):q.classList.add("hidden");k.className="chatmsg-attachment-content";h=a.u(b.text||"");l.className="chatmsg-attachment-text";h&&""!=h?l.innerHTML=h:l.classList.add("hidden");k.appendChild(q);k.appendChild(l);b.geo&&(l=rb(b.geo))&&k.appendChild(l);r.className="chatmsg-attachment-img";b.image_url?

srv/public/style.css

@@ -43,7 +43,7 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chat-context .typing-container { position: absolute; left: 6.5px; display: none; }
 .chat-context .chat-context-typing .typing-container { display: block; }
 
-.hidden { display: none; }
+.hidden { display: none !important; }
 .error { display: none; position: fixed; top: 0; left: 0; right: 0; height: 2em; line-height: 2em; background: #ffa2a2; padding: 0.5em 1em; }
 .no-network .error { display: inline-block; }
 .chatsystem-content { flex: 1; overflow: auto; }