use the new toast in md-editor

copyparty/web/browser.css

@@ -65,7 +65,7 @@ body {
 	border-color: #8e4;
 }
 #toast.warn {
-	background: #a70;
+	background: #970;
 	border-color: #fc0;
 }
 #toast.err {

copyparty/web/md.css

@@ -8,20 +8,52 @@ html, body {
 	font-family: sans-serif;
 	line-height: 1.5em;
 }
-#tt {
+#tt, #toast {
 	position: fixed;
 	max-width: 34em;
 	background: #222;
 	border: 0 solid #777;
+	box-shadow: 0 .2em .5em #222;
+	border-radius: .4em;
+	z-index: 9001;
+}
+#tt {
 	overflow: hidden;
 	margin-top: 1em;
 	padding: 0 1.3em;
 	height: 0;
 	opacity: .1;
 	transition: opacity 0.14s, height 0.14s, padding 0.14s;
-	box-shadow: 0 .2em .5em #222;
+}
-	border-radius: .4em;
+#toast {
-	z-index: 9001;
+	top: 1.4em;
+	right: -1em;
+	padding: 1em 1.3em;
+	border-width: .4em 0;
+	transform: translateX(100%);
+	transition: all .3s cubic-bezier(.2, 1.2, .5, 1);
+	text-shadow: 1px 1px 0 #000;
+	color: #fff;
+}
+#toast.vis {
+	right: 1.3em;
+	transform: unset;
+}
+#toast.inf {
+	background: #07a;
+	border-color: #0be;
+}
+#toast.ok {
+	background: #4a0;
+	border-color: #8e4;
+}
+#toast.warn {
+	background: #970;
+	border-color: #fc0;
+}
+#toast.err {
+	background: #b00;
+	border-color: #f00;
 }
 #tt.b {
 	padding: 0 2em;
@@ -49,6 +81,24 @@ html, body {
 #tt em {
 	color: #f6a;
 }
+html.light #tt {
+	background: #fff;
+	border-color: #888 #000 #777 #000;
+}
+html.light #tt,
+html.light #toast {
+	box-shadow: 0 .3em 1em rgba(0,0,0,0.4);
+}
+html.light #tt code {
+	background: #060;
+	color: #fff;
+}
+html.light #tt em {
+	color: #d38;
+}
+
+
+
 #mtw {
 	display: none;
 }

copyparty/web/md.html

@@ -131,18 +131,18 @@ var md_opt = {
 };
 
 (function () {
-    var btn = document.getElementById("lightswitch");
+    var l = localStorage,
-    var toggle = function (e) {
+		drk = l.getItem('lightmode') != 1,
-		if (e) e.preventDefault();
+		btn = document.getElementById("lightswitch"),
-        var dark = !document.documentElement.getAttribute("class");
+		f = function (e) {
-        document.documentElement.setAttribute("class", dark ? "dark" : "");
+if (e) { e.preventDefault(); drk = !drk; }
-        btn.innerHTML = "go " + (dark ? "light" : "dark");
+document.documentElement.setAttribute("class", drk? "dark":"light");
-        if (window.localStorage)
+btn.innerHTML = "go " + (drk ? "light":"dark");
-            localStorage.setItem('lightmode', dark ? 0 : 1);
+l.setItem('lightmode', drk? 0:1);
     	};
-    btn.onclick = toggle;
+	
-    if (window.localStorage && localStorage.getItem('lightmode') != 1)
+	btn.onclick = f;
-		toggle();
+	f();
 })();
 
 	</script>

copyparty/web/md2.css

@@ -84,13 +84,10 @@ html.dark #save.force-save {
 #save.disabled {
 	opacity: .4;
 }
-#helpbox,
+#helpbox {
-#toast {
 	background: #f7f7f7;
 	border-radius: .4em;
 	z-index: 9001;
-}
-#helpbox {
 	display: none;
 	position: fixed;
 	padding: 2em;
@@ -107,19 +104,7 @@ html.dark #save.force-save {
 }
 html.dark #helpbox {
 	box-shadow: 0 .5em 2em #444;
-}
-html.dark #helpbox,
-html.dark #toast {
 	background: #222;
 	border: 1px solid #079;
 	border-width: 1px 0;
 }
-#toast {
-	font-weight: bold;
-	text-align: center;
-	padding: .6em 0;
-	position: fixed;
-	top: 30%;
-	transition: opacity 0.2s ease-in-out;
-	opacity: 1;
-}

copyparty/web/md2.js

@@ -236,7 +236,7 @@ function Modpoll() {
 
         var skip = null;
 
-        if (ebi('toast'))
+        if (toast.visible)
             skip = 'toast';
 
         else if (this.skip_one)
@@ -293,8 +293,7 @@ function Modpoll() {
 
                 "You can click this message to ignore and contnue."
             ];
-            return toast(false, "box-shadow:0 1em 2em rgba(64,64,64,0.8);font-weight:normal",
+            return toast.warn(0, "<p>" + msg.join('</p>\n<p>') + '</p>');
-                36, "<p>" + msg.join('</p>\n<p>') + '</p>');
         }
 
         console.log('modpoll eq');
@@ -323,16 +322,12 @@ function save(e) {
     var save_btn = ebi("save"),
         save_cls = save_btn.getAttribute('class') + '';
 
-    if (save_cls.indexOf('disabled') >= 0) {
+    if (save_cls.indexOf('disabled') >= 0)
-        toast(true, ";font-size:2em;color:#c90", 9, "no changes");
+        return toast.inf(2000, "no changes");
-        return;
-    }
 
     var force = (save_cls.indexOf('force-save') >= 0);
-    if (force && !confirm('confirm that you wish to lose the changes made on the server since you opened this document')) {
+    if (force && !confirm('confirm that you wish to lose the changes made on the server since you opened this document'))
-        alert('ok, aborted');
+        return alert('ok, aborted');
-        return;
-    }
 
     var txt = dom_src.value;
 
@@ -443,46 +438,10 @@ function savechk_cb() {
     last_modified = this.lastmod;
     server_md = this.txt;
     draw_md();
-    toast(true, ";font-size:6em;font-family:serif;color:#9b4", 4,
+    toast.ok(2000, 'save OK' + (this.ntry ? '<br />attempt ' + this.ntry : ''));
-        'OK✔️<span style="font-size:.2em;color:#999;position:absolute">' + this.ntry + '</span>');
-
     modpoll.disabled = false;
 }
 
-function toast(autoclose, style, width, msg) {
-    var ok = ebi("toast");
-    if (ok)
-        ok.parentNode.removeChild(ok);
-
-    style = "width:" + width + "em;left:calc(50% - " + (width / 2) + "em);" + style;
-    ok = mknod('div');
-    ok.setAttribute('id', 'toast');
-    ok.setAttribute('style', style);
-    ok.innerHTML = msg;
-    var parent = ebi('m');
-    document.documentElement.appendChild(ok);
-
-    var hide = function (delay) {
-        delay = delay || 0;
-
-        setTimeout(function () {
-            ok.style.opacity = 0;
-        }, delay);
-
-        setTimeout(function () {
-            if (ok.parentNode)
-                ok.parentNode.removeChild(ok);
-        }, delay + 250);
-    }
-
-    ok.onclick = function () {
-        hide(0);
-    };
-
-    if (autoclose)
-        hide(500);
-}
-
 
 // firefox bug: initial selection offset isn't cleared properly through js
 var ff_clearsel = (function () {

copyparty/web/mde.html

@@ -30,16 +30,15 @@ var md_opt = {
 };
 
 var lightswitch = (function () {
-	var fun = function () {
+	var l = localStorage,
-		var dark = !document.documentElement.getAttribute("class");
+		drk = l.getItem('lightmode') != 1,
-		document.documentElement.setAttribute("class", dark ? "dark" : "");
+		f = function (e) {
-		if (window.localStorage)
+if (e) drk = !drk;
-			localStorage.setItem('lightmode', dark ? 0 : 1);
+document.documentElement.setAttribute("class", drk? "dark":"light");
+l.setItem('lightmode', drk? 0:1);
 		};
-	if (window.localStorage && localStorage.getItem('lightmode') != 1)
+	f();
-		fun();
+	return f;
-	
-	return fun;
 })();
 
 	</script>

copyparty/web/splash.html

@@ -68,7 +68,7 @@
     </div>
     <script>
 
-if (window.localStorage && localStorage.getItem('lightmode') != 1)
+if (localStorage.getItem('lightmode') != 1)
     document.documentElement.setAttribute("class", "dark");
 
 </script>

copyparty/web/util.js

@@ -447,20 +447,15 @@ function jcp(obj) {
 
 
 function sread(key) {
-    if (window.localStorage)
     return localStorage.getItem(key);
-
-    return null;
 }
 
 function swrite(key, val) {
-    if (window.localStorage) {
     if (val === undefined || val === null)
         localStorage.removeItem(key);
     else
         localStorage.setItem(key, val);
 }
-}
 
 function jread(key, fb) {
     var str = sread(key);
@@ -643,6 +638,7 @@ var tt = (function () {
 var toast = (function () {
     var r = {},
         te = null,
+        visible = false,
         obj = mknod('div');
 
     obj.setAttribute('id', 'toast');
@@ -652,13 +648,17 @@ var toast = (function () {
     r.hide = function () {
         clearTimeout(te);
         clmod(obj, 'vis');
+        r.visible = false;
     };
 
     r.show = function (cl, ms, txt) {
         clearTimeout(te);
+        if (ms)
             te = setTimeout(r.hide, ms);
+
         obj.innerHTML = txt;
         obj.className = cl + ' vis';
+        r.visible = true;
     };
 
     r.ok = function (ms, txt) {