`
const button = {
element: document.createElement('button'),
location: e.location,
type: 'container',
contains: []
};
button.element.textContent = 'Spoiler';
button.element.classList.add('btn', 'btn-sm', 'btn-warning', 'btn-spoiler');
accum.push(button);
const element = {
element: document.createElement('p'),
location: e.location,
type: 'container',
contains: []
};
accum.push(element);
element.element.classList.add('spoiler', 'display-none');
element.contains = pegAstToHtml_v2(e.content);
element.contains.forEach(child_ast_element => {
element.element.appendChild(child_ast_element.element);
});
/* In a perfect world. it would work like this... but md is a bit broken
;(button.element as HTMLButtonElement).addEventListener('click',()=>{
;(element.element as HTMLDivElement).classList.toggle('display-none')
})
Code to do this is afer makepreview, to ensure buggieness is preserved*/
}
else if (e.tag === 'center' || e.tag === 'left' || e.tag === 'right') {
//accum += `
${pegAstToHtml(e.content)}
`
const element = {
element: document.createElement('p'),
location: e.location,
type: 'container',
contains: []
};
accum.push(element);
element.element.classList.add(`text-${e.tag}`);
element.contains = pegAstToHtml_v2(e.content);
element.contains.forEach(child_ast_element => {
element.element.appendChild(child_ast_element.element);
});
}
else if (e.tag == "*") {
// must parse the inside for v2
//accum += `
`
const element = {
element: document.createElement('li'),
location: e.location,
type: 'container',
contains: []
};
accum.push(element);
element.contains = pegAstToHtml_v2(e.content);
element.contains.forEach(child_ast_element => {
element.element.appendChild(child_ast_element.element);
});
}
else if (e.content != null) {
// FIXME? Is this possible? Root?
pegAstToHtml_v2(e.content).forEach(e => {
accum.push(e);
});
}
else {
// FIXME: Does this every happed
accum.push({
type: 'text',
element: document.createTextNode(e.content),
location: e.location
});
}
return accum;
}, []);
return res;
}
function makePreview(txt) {
//dbg(pegAstToHtml(bbcodePegParser.parse(txt)))
// Faster, but less dynamic
//let html = bbCodeParser.parse(txt)
// Slower, but more dynamic
//let html = pegAstToHtml(bbcodePegParser.parse(txt))
let astHtml = pegAstToHtml_v2(bbcodePegParser_v2.parse(txt));
//dbg(JSON.stringify(bbcodePegParser_v2.parse(txt)))
let previewDiv = document.createElement("div");
previewDiv.style.flexGrow = '1';
astHtml.forEach(e => previewDiv.appendChild(e.element));
//tmpl.innerHTML = html
return [previewDiv, astHtml];
}
function createPreviewInterface(forum) {
const container = forum.parentElement;
const previewDiv = document.createElement("div");
previewDiv.style.flexGrow = '1';
container.style.alignItems = 'flex-start';
container.classList.add('d-flex', '');
container.insertBefore(previewDiv, forum);
}
function createPreviewCallbacks() {
const nav = document.querySelector('nav.navbar.fixed-top');
//@ts-ignore
const navHeight = nav ? nav.getBoxQuads()[0].p4.y : 0;
//let image_buffers: Map
let forms = Object.values(document.querySelectorAll(".post_edit_form"));
forms = forms.concat(Object.values(document.querySelectorAll("#post_reply_form")));
forms = forms.concat(Object.values(document.querySelectorAll("#change_profile_form, #start_thread_form")));
forms.forEach((forum) => {
// Try to make it side by side
//e.parentElement.parentElement.insertBefore(previewDiv,e.parentElement)
//e.parentElement.classList.add("sticky-top", "pt-5", "col-6")
let textarea = forum.querySelector("textarea");
if (!textarea) {
// FIXME throw errors. Kind of want to short circit this one though
return Error("Failed to find text area for forum");
}
// Setup variables
let curDisplayedVersion = 0;
let nextVersion = 1;
let updateTimeout;
let updateTimeoutDelay = 500;
let maxAcceptableDelay = 10000;
let useFallbackPreview = false;
// Prepare form
forum.parentElement.style.alignItems = 'flex-start';
forum.parentElement.classList.add('d-flex');
forum.parentElement.style.flexDirection = 'row-reverse';
forum.style.position = 'sticky';
forum.style.top = '0px';
forum.style.paddingTop = `${navHeight}px`;
forum.style.marginTop = `-${navHeight}px`;
textarea.style.resize = 'both';
let [previewDiv, astHtml] = makePreview(textarea.value);
console.log(astHtml);
let currentSpoiler = undefined;
function searchAst(ast, cpos) {
// slice bc reverse is in place
const a = ast.slice().reverse().find(e => e.location[0] <= cpos && cpos <= e.location[1]);
if (a) {
if (a.type == 'container') {
// unhide spoilers
// Ensure we are not a Text node and that we are a spoiler
if (!currentSpoiler && a.element.nodeType !== 3
&& a.element.classList.contains('spoiler')
&& a.element.style.display !== 'block') {
currentSpoiler = a.element;
currentSpoiler.style.display = 'block';
}
const b = searchAst(a.contains, cpos);
if (b) {
return b;
}
}
return a.element;
}
return undefined;
}
// Auto scroll into view
function scrollToPos(pos = textarea.selectionStart) {
// Hide previous spoiler
if (currentSpoiler) {
currentSpoiler.style.display = 'none';
currentSpoiler = undefined;
}
// Get element from ast that starts closest to pos
const elm = searchAst(astHtml, pos);
if (elm) {
console.log(elm);
//FIXME Scroll pos is a bit hard to find.
// getBoxQuads, getClientRect, getClientBoundingRect all give the offset from the viewport
// Height of child elements not calculated in...
// SAFE for (text)nodes?, not safe for elements with nested content
if (elm.nodeType === 3) {
//@ts-ignore
const y = elm.getBoxQuads()[0].p1.y;
// FIXME. Must be a better way to scroll (especialy in case of nested scroll frames)
// Scroll to top
document.scrollingElement.scrollBy(0, y);
}
else {
// FIXME. Must be a better way to scroll (especialy in case of nested scroll frames)
// Scroll to ~ center directly
//const y: number = (elm as HTMLElement).offsetTop
//document.scrollingElement!.scrollTo({top:y})
// Scroll to top
;
elm.scrollIntoView();
}
// Scroll out of nav
document.scrollingElement.scrollBy(0, -navHeight);
// Add this line to scroll to center
//document.scrollingElement!.scrollBy(0,-(window.innerHeight-navHeight)/2)
// Finally, ensure we keep the textarea in view
const bound = forum.getBoundingClientRect();
//document.scrollingElement!.scrollBy(0,bound.bottom - bound.height)
document.scrollingElement.scrollBy(0, bound.top);
}
}
textarea.addEventListener('selectionchange', () => {
// Only autoscroll if our ast is in sync with the preview.
console.log(astHtml[astHtml.length - 1]);
console.log(astHtml[astHtml.length - 1].location);
if (curDisplayedVersion === nextVersion - 1
&& astHtml[astHtml.length - 1] != null
&& astHtml[astHtml.length - 1].location[1] === textarea.value.length) {
scrollToPos();
}
});
if (!forum.parentElement) {
return;
}
forum.parentElement.insertBefore(previewDiv, forum);
function UpdatePreview() {
// Measure load speed. Used for setting update delay dynamicly.
let startTime = Date.now();
// Create a preview buffer
let thisVersion = nextVersion++;
let [newPreview, newAstHtml] = makePreview(textarea.value);
// Setup spoilers the same way md does
$(newPreview).find('.btn-spoiler').click(function () {
//@ts-ignore
$(this).next('.spoiler').toggle();
});
//previewDiv, astHtml
let imgLoadPromises = [];
Object.values(newPreview.querySelectorAll("img")).forEach((img) => {
imgLoadPromises.push(new Promise(resolve => {
img.addEventListener('load', resolve);
// Errors dont really matter to us
img.addEventListener('error', resolve);
// Esure we are not already done
if (img.complete) {
resolve();
}
}));
});
// Wait for all images to load or error (size calculations needed) before we swap and rescroll
// This is the part that actualy updates the preview
Promise.all(imgLoadPromises).then(() => {
let endTime = Date.now();
let updateLoadDelay = endTime - startTime;
if (!useFallbackPreview && updateLoadDelay > maxAcceptableDelay) {
//NOTE: Fallback preview removed. Focusing on speed improvments of normal preview
//useFallbackPreview = true
// dbg(`It took ${updateLoadDelay} milli to update. Max acceptable delay was ${maxAcceptableDelay}! Switching to fallback preview!`)
// We intentionally do not update the timout delay when we swap to fallback preview
}
else {
// average out the times
updateTimeoutDelay = (updateTimeoutDelay + updateLoadDelay) / 2;
//dbg(`It took ${updateLoadDelay} milli to update. Changing delay to ${updateTimeoutDelay} `)
}
// Return if we are older than cur preview
if (thisVersion < curDisplayedVersion) {
newPreview.remove();
return;
}
curDisplayedVersion = thisVersion;
// Replace the Preview with the buffered content
previewDiv.parentElement.insertBefore(newPreview, previewDiv);
previewDiv.remove();
previewDiv = newPreview;
astHtml = newAstHtml;
// Scroll to position
scrollToPos();
});
}
function UpdatePreviewProxy() {
//dbg(`Reseting timeout with delay ${updateTimeoutDelay} `)
clearTimeout(updateTimeout);
//@ts-ignore
updateTimeout = setTimeout(UpdatePreview, updateTimeoutDelay);
}
let buttons = Object.values(forum.querySelectorAll("button"));
buttons.forEach((btn) => {
btn.addEventListener('click', UpdatePreviewProxy);
});
textarea.oninput = UpdatePreviewProxy;
});
}
createPreviewCallbacks();