j0.lol
Blog attempt 5
Remove redundant post-editor.js code & make more robust
+28
-57
+4
static/css/style.css
+4
static/css/style.css
+24
-57
static/js/post-editor.js
+24
-57
static/js/post-editor.js
···
8
8
const editorPreview = document.querySelector("#editorPreview");
9
9
10
10
function preview(render) {
11
-
editorPreview.innerHTML = `
12
-
<h1 class="blog-head">${inputTitle.value}</h1>
13
-
<span class="blog-subhead"><em>${inputSubtitle.value}</em></span>
14
-
<p class='blog-publish'>
15
-
🕒 ${inputDt.value}
16
-
</p>
17
-
<hr class='frontmatter'>
18
-
`;
19
-
editorPreview.innerHTML += render;
11
+
if (render !== false) {
12
+
editorPreview.classList.remove("error");
13
+
editorPreview.innerHTML = `
14
+
<h1 class="blog-head">${inputTitle.value}</h1>
15
+
<span class="blog-subhead"><em>${inputSubtitle.value}</em></span>
16
+
<p class='blog-publish'>
17
+
🕒 ${inputDt.value}
18
+
</p>
19
+
<hr class='frontmatter'>
20
+
`;
21
+
editorPreview.innerHTML += render;
22
+
} else {
23
+
editorPreview.classList.add("error");
24
+
}
20
25
}
21
26
22
27
// Enhanced editor features
···
67
72
}
68
73
69
74
updatePreview(false);
70
-
highlightAll();
71
75
}
72
76
});
73
77
};
···
90
94
el.selectionStart = el.selectionEnd = caretPos;
91
95
92
96
updatePreview(false);
93
-
highlightAll();
94
97
});
95
98
};
96
99
···
106
109
el.selectionStart = el.selectionEnd = selectionStart - 4;
107
110
108
111
updatePreview(false);
109
-
highlightAll();
110
112
}
111
113
});
112
114
};
···
137
139
handleBackspace(el);
138
140
};
139
141
140
-
// SpeechBox web component
141
-
class SpeechBoxElement extends HTMLElement {
142
-
connectedCallback() {
143
-
const char = this.getAttribute("character");
144
-
const emotion = this.getAttribute("emotion");
145
-
146
-
const images = {
147
-
deer: {
148
-
neutral: {
149
-
src: "/static/speech/deer/neutral.png",
150
-
alt: "drawing of a deer, talking to you.",
151
-
},
152
-
happy: {
153
-
src: "/static/speech/deer/happy.png",
154
-
alt: "drawing of a happy deer.",
155
-
},
156
-
shocked: {
157
-
src: "/static/speech/deer/shock.png",
158
-
alt: "drawing of a shocked deer.",
159
-
},
160
-
worried: {
161
-
src: "/static/speech/deer/sad.png",
162
-
alt: "drawing of a sad or worried deer.",
163
-
},
164
-
},
165
-
you: { src: "/static/speech/you.png", alt: "drawing of you, smiling." },
166
-
};
167
-
168
-
const { src, alt } =
169
-
images[char]?.[emotion] || images[char]?.neutral || images.deer;
170
-
171
-
this.innerHTML = `
172
-
<div class="dialog-box">
173
-
<img width="120" height="120" class="raw dialog profile" src="${src}" alt="${alt}">
174
-
<div class="dialog speech ${char}">
175
-
${this.innerHTML}
176
-
</div>
177
-
</div>`;
178
-
}
179
-
}
180
-
181
-
customElements.define("speech-box", SpeechBoxElement);
182
-
183
142
async function syncDraft() {
184
143
const resp = await fetch(`/blog/new/sync`, {
185
144
method: "POST",
···
195
154
}),
196
155
});
197
156
198
-
return await resp.text();
157
+
if (resp.ok) {
158
+
return await resp.text();
159
+
} else {
160
+
return false
161
+
}
199
162
}
200
163
201
164
···
208
171
}),
209
172
});
210
173
211
-
return await resp.text();
174
+
if (resp.ok) {
175
+
return await resp.text();
176
+
} else {
177
+
return false
178
+
}
212
179
}
213
180
214
181
async function updatePreview(sync = false) {