use the new toast in md-editor

This commit is contained in:
ed 2021-07-26 19:20:36 +02:00
parent 7671d791fa
commit f3dc6a217b
8 changed files with 97 additions and 104 deletions

View file

@ -65,7 +65,7 @@ body {
border-color: #8e4;
}
#toast.warn {
background: #a70;
background: #970;
border-color: #fc0;
}
#toast.err {
@ -1033,7 +1033,7 @@ html.light #tt {
}
html.light #tt,
html.light #toast {
box-shadow: 0 .3em 1em rgba(0,0,0,0.4);
box-shadow: 0 .3em 1em rgba(0,0,0,0.4);
}
html.light #tt code {
background: #060;

View file

@ -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;
z-index: 9001;
}
#toast {
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;
}

View file

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

View file

@ -84,13 +84,10 @@ html.dark #save.force-save {
#save.disabled {
opacity: .4;
}
#helpbox,
#toast {
#helpbox {
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;
}

View file

@ -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",
36, "<p>" + msg.join('</p>\n<p>') + '</p>');
return toast.warn(0, "<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) {
toast(true, ";font-size:2em;color:#c90", 9, "no changes");
return;
}
if (save_cls.indexOf('disabled') >= 0)
return toast.inf(2000, "no changes");
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')) {
alert('ok, aborted');
return;
}
if (force && !confirm('confirm that you wish to lose the changes made on the server since you opened this document'))
return alert('ok, aborted');
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,
'OK✔<span style="font-size:.2em;color:#999;position:absolute">' + this.ntry + '</span>');
toast.ok(2000, 'save OK' + (this.ntry ? '<br />attempt ' + this.ntry : ''));
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 () {

View file

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

View file

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

View file

@ -447,19 +447,14 @@ function jcp(obj) {
function sread(key) {
if (window.localStorage)
return localStorage.getItem(key);
return null;
return localStorage.getItem(key);
}
function swrite(key, val) {
if (window.localStorage) {
if (val === undefined || val === null)
localStorage.removeItem(key);
else
localStorage.setItem(key, val);
}
if (val === undefined || val === null)
localStorage.removeItem(key);
else
localStorage.setItem(key, val);
}
function jread(key, fb) {
@ -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);
te = setTimeout(r.hide, ms);
if (ms)
te = setTimeout(r.hide, ms);
obj.innerHTML = txt;
obj.className = cl + ' vis';
r.visible = true;
};
r.ok = function (ms, txt) {