add previews to babycode editor component
This commit is contained in:
parent
8a00500387
commit
615cd36eab
SSH Key Fingerprint:
SHA256:6xjGb6uA7lAVcULa7byPEN//rQ0wPoG+UzYVMfZnbvc
@ -26,7 +26,7 @@
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
|
||||
.tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
|
||||
cursor: default;
|
||||
color: black;
|
||||
font-size: 0.9em;
|
||||
@ -511,6 +511,50 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
|
||||
|
||||
.babycode-editor {
|
||||
height: 150px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.babycode-editor-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.babycode-preview-errors-container {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background-color: rgb(177, 206, 204.5);
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tab-button:hover {
|
||||
background-color: rgb(192.6, 215.8, 214.6);
|
||||
}
|
||||
.tab-button:active {
|
||||
background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
|
||||
}
|
||||
.tab-button:disabled {
|
||||
background-color: rgb(209.535, 211.565, 211.46);
|
||||
}
|
||||
.tab-button.active {
|
||||
background-color: #beb1ce;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
.tab-content.active {
|
||||
min-height: 250px;
|
||||
display: block;
|
||||
background-color: rgb(191.3137931034, 189.7, 193.3);
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
|
||||
@ -59,4 +59,48 @@
|
||||
e.preventDefault();
|
||||
insertTag("code", true)
|
||||
})
|
||||
|
||||
const previewEndpoint = "/api/babycode-preview";
|
||||
let previousMarkup = "";
|
||||
const previewTab = document.getElementById("tab-preview");
|
||||
previewTab.addEventListener("tab-activated", async () => {
|
||||
const previewContainer = document.getElementById("babycode-preview-container");
|
||||
const previewErrorsContainer = document.getElementById("babycode-preview-errors-container");
|
||||
// previewErrorsContainer.textContent = "";
|
||||
const markup = ta.value.trim();
|
||||
if (markup === "" || markup === previousMarkup) {
|
||||
return;
|
||||
}
|
||||
previousMarkup = markup;
|
||||
const req = await fetch(previewEndpoint, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({markup: markup})
|
||||
})
|
||||
if (!req.ok) {
|
||||
switch (req.status) {
|
||||
case 429:
|
||||
previewErrorsContainer.textContent = "(Old preview, try again in a few seconds.)"
|
||||
previousMarkup = "";
|
||||
break;
|
||||
case 400:
|
||||
previewErrorsContainer.textContent = "(Request got malformed.)"
|
||||
break;
|
||||
case 401:
|
||||
previewErrorsContainer.textContent = "(You are not logged in.)"
|
||||
break;
|
||||
default:
|
||||
previewErrorsContainer.textContent = "(Error. Check console.)"
|
||||
console.error(req.error);
|
||||
break;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const json_resp = await req.json();
|
||||
previewContainer.innerHTML = json_resp.html;
|
||||
previewErrorsContainer.textContent = "";
|
||||
});
|
||||
}
|
||||
|
||||
30
js/tabs.js
Normal file
30
js/tabs.js
Normal file
@ -0,0 +1,30 @@
|
||||
function activateSelfDeactivateSibs(button) {
|
||||
if (button.classList.contains("active")) return;
|
||||
|
||||
Array.from(button.parentNode.children).forEach(s => {
|
||||
if (s === button){
|
||||
button.classList.add('active');
|
||||
} else {
|
||||
s.classList.remove('active');
|
||||
}
|
||||
const targetId = s.dataset.targetId;
|
||||
const target = document.getElementById(targetId);
|
||||
|
||||
if (!target) return;
|
||||
|
||||
if (s.classList.contains('active')) {
|
||||
target.classList.add('active');
|
||||
target.dispatchEvent(new CustomEvent("tab-activated", {bubbles: false}))
|
||||
} else {
|
||||
target.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".tab-button").forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
activateSelfDeactivateSibs(button);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -45,6 +45,7 @@ $lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
|
||||
|
||||
$main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%);
|
||||
$button_color: color.adjust($accent_color, $hue: 90);
|
||||
$button_color2: color.adjust($accent_color, $hue: 180);
|
||||
|
||||
%button-base {
|
||||
cursor: default;
|
||||
@ -524,8 +525,44 @@ input[type="text"], input[type="password"], textarea, select {
|
||||
|
||||
.babycode-editor {
|
||||
height: 150px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.babycode-editor-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.babycode-preview-errors-container {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
@include button($button_color);
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.active {
|
||||
background-color: $button_color2;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
min-height: 250px;
|
||||
display: block;
|
||||
background-color: color.adjust($button_color2, $saturation: -20%);
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 10px 0 10px 30px;
|
||||
|
||||
@ -18,5 +18,6 @@
|
||||
</footer>
|
||||
<script src="/static/js/copy-code.js"></script>
|
||||
<script src="/static/js/date-fmt.js"></script>
|
||||
<script src="/static/js/tabs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
<span>
|
||||
<button type=button id="post-editor-bold" title="Insert Bold">B</button>
|
||||
<button type=button id="post-editor-italics" title="Insert Italics">I</button>
|
||||
<button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
|
||||
<button type=button id="post-editor-code" title="Insert Code block">Code</button>
|
||||
</span>
|
||||
<textarea class="babycode-editor" name="<%= ta_name %>" id="babycode-content" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
|
||||
<script src="/static/js/babycode-editor.js"></script>
|
||||
<div class="babycode-editor-container">
|
||||
<div class="tab-buttons">
|
||||
<button type=button class="tab-button active" data-target-id="tab-edit">Write</button>
|
||||
<button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
|
||||
</div>
|
||||
<div class="tab-content active" id="tab-edit">
|
||||
<span>
|
||||
<button type=button id="post-editor-bold" title="Insert Bold">B</button>
|
||||
<button type=button id="post-editor-italics" title="Insert Italics">I</button>
|
||||
<button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
|
||||
<button type=button id="post-editor-code" title="Insert Code block">Code</button>
|
||||
</span>
|
||||
<textarea class="babycode-editor" name="<%= ta_name %>" id="babycode-content" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
|
||||
</div>
|
||||
<div class="tab-content" id="tab-preview">
|
||||
<div id="babycode-preview-errors-container">Type something!</div>
|
||||
<div id="babycode-preview-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/babycode-editor.js?v=1"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user