toast close-handle

copyparty/web/browser.css

@@ -52,26 +52,52 @@ body {
 	text-shadow: 1px 1px 0 #000;
 	color: #fff;
 }
+#toastc {
+	position: relative;
+	left: -2.35em;
+	margin: 0 -1.05em;
+	padding: .5em .8em;
+	border-radius: .3em 0 0 .3em;
+	color: #000;
+	text-shadow: none;
+	opacity: 0;
+	transition: all .3s cubic-bezier(.2, 1.2, .5, 1);
+}
 #toast.vis {
 	right: 1.3em;
 	transform: unset;
 }
+#toast.vis #toastc {
+	opacity: 1;
+}
 #toast.inf {
 	background: #07a;
 	border-color: #0be;
 }
+#toast.inf #toastc {
+	background: #0be;
+}
 #toast.ok {
 	background: #4a0;
 	border-color: #8e4;
 }
+#toast.ok #toastc {
+	background: #8e4;
+}
 #toast.warn {
 	background: #970;
 	border-color: #fc0;
 }
+#toast.warn #toastc {
+	background: #fc0;
+}
 #toast.err {
 	background: #900;
 	border-color: #d06;
 }
+#toast.err #toastc {
+	background: #d06;
+}
 #tt.b {
 	padding: 0 2em;
 	border-radius: .5em;

copyparty/web/md.css

@@ -35,26 +35,53 @@ html, body {
 	text-shadow: 1px 1px 0 #000;
 	color: #fff;
 }
+#toastc {
+	position: relative;
+	left: -2.35em;
+	margin: 0 -1.05em;
+	padding: .5em .8em;
+	border-radius: .3em 0 0 .3em;
+	color: #000;
+	text-shadow: none;
+	opacity: 0;
+	transition: all .3s cubic-bezier(.2, 1.2, .5, 1);
+}
 #toast.vis {
 	right: 1.3em;
 	transform: unset;
 }
+#toast.vis #toastc {
+	opacity: 1;
+}
 #toast.inf {
 	background: #07a;
 	border-color: #0be;
 }
+#toast.inf #toastc {
+	background: #0be;
+}
 #toast.ok {
 	background: #4a0;
 	border-color: #8e4;
 }
+#toast.ok #toastc {
+	background: #8e4;
+}
 #toast.warn {
 	background: #970;
 	border-color: #fc0;
 }
+#toast.warn #toastc {
+	background: #fc0;
+}
 #toast.err {
 	background: #900;
 	border-color: #d06;
 }
+#toast.err #toastc {
+	background: #d06;
+};
+}
 #tt.b {
 	padding: 0 2em;
 	border-radius: .5em;

copyparty/web/md2.js

@@ -291,7 +291,7 @@ function Modpoll() {
                 "Press F5 or CTRL-R to refresh the page,<br />" +
                 "replacing your document with the server copy.",
 
-                "You can click this message to ignore and contnue."
+                "You can close this message to ignore and contnue."
             ];
             return toast.warn(0, "<p>" + msg.join('</p>\n<p>') + '</p>');
         }

copyparty/web/util.js

@@ -656,7 +656,8 @@ var toast = (function () {
     obj.setAttribute('id', 'toast');
     document.body.appendChild(obj);;
 
-    r.hide = function () {
+    r.hide = function (e) {
+        ev(e);
         clearTimeout(te);
         clmod(obj, 'vis');
         r.visible = false;
@@ -667,8 +668,14 @@ var toast = (function () {
         if (ms)
             te = setTimeout(r.hide, ms * 1000);
 
-        obj.innerHTML = txt.replace(/\n/g, '<br />\n');
+        var html = '', hp = txt.split(/(?=<.?pre>)/i);
+        for (var a = 0; a < hp.length; a++)
+            html += hp[a].startsWith('<pre>') ? hp[a] :
+                hp[a].replace(/<br ?.?>\n/g, '\n').replace(/\n<br ?.?>/g, '\n').replace(/\n/g, '<br />\n');
+
+        obj.innerHTML = '<a href="#" id="toastc">x</a>' + html;
         obj.className = cl + ' vis';
+        ebi('toastc').onclick = r.hide;
         r.visible = true;
     };
 
@@ -685,6 +692,5 @@ var toast = (function () {
         r.show('err', ms, txt);
     };
 
-    obj.onclick = r.hide;
     return r;
 })();