258 lines
8.1 KiB
JavaScript
258 lines
8.1 KiB
JavaScript
const bookmarkMenuHrefTemplate = '/hyperapi/bookmarks-dropdown';
|
|
const previewEndpoint = '/api/babycode-preview';
|
|
|
|
const delay = ms => {return new Promise(resolve => setTimeout(resolve, ms))}
|
|
|
|
export default class {
|
|
async showBookmarkMenu(ev, el) {
|
|
if ((ev.sender.dataset.bookmarkId === el.getString('bookmarkId')) && el.childElementCount === 0) {
|
|
const searchParams = new URLSearchParams({
|
|
'id': ev.sender.dataset.conceptId,
|
|
'require_reload': el.dataset.requireReload,
|
|
});
|
|
const bookmarkMenuHref = `${bookmarkMenuHrefTemplate}/${ev.sender.dataset.bookmarkType}?${searchParams}`;
|
|
const res = await this.api.getHTML(bookmarkMenuHref);
|
|
if (res.error) {
|
|
return;
|
|
}
|
|
const frag = res.value;
|
|
el.appendChild(frag);
|
|
const menu = el.childNodes[0];
|
|
menu.showPopover();
|
|
|
|
const bRect = el.getBoundingClientRect();
|
|
const menuRect = menu.getBoundingClientRect();
|
|
const preferredLeft = bRect.right - menuRect.width;
|
|
const preferredRight = bRect.right;
|
|
const enoughSpace = preferredLeft >= 0;
|
|
const scrollY = window.scrollY || window.pageYOffset;
|
|
if (enoughSpace) {
|
|
menu.style.left = `${preferredLeft}px`;
|
|
} else {
|
|
menu.style.left = `${bRect.left}px`;
|
|
}
|
|
menu.style.top = `${bRect.bottom + scrollY}px`;
|
|
|
|
menu.addEventListener('beforetoggle', (e) => {
|
|
if (e.newState === 'closed') {
|
|
// if it's still in the tree, remove it
|
|
// the delay is required to make sure its removed instantly when
|
|
// clicking the button when the menu is open
|
|
setTimeout(() => {menu.remove()}, 100);
|
|
};
|
|
}, { once: true });
|
|
|
|
} else if (el.childElementCount > 0) {
|
|
el.removeChild(el.childNodes[0]);
|
|
}
|
|
}
|
|
|
|
selectBookmarkCollection(ev, el) {
|
|
const clicked = ev.sender;
|
|
|
|
if (ev.sender === el) {
|
|
if (clicked.classList.contains('selected')) {
|
|
clicked.classList.remove('selected');
|
|
} else {
|
|
clicked.classList.add('selected');
|
|
}
|
|
} else {
|
|
el.classList.remove('selected');
|
|
}
|
|
}
|
|
|
|
async saveBookmarks(ev, el) {
|
|
const bookmarkHref = el.getString('bookmarkEndpoint');
|
|
const collection = el.querySelector('.bookmark-dropdown-item.selected');
|
|
let data = {};
|
|
if (collection) {
|
|
data['operation'] = 'move';
|
|
data['collection_id'] = collection.dataset.collectionId;
|
|
data['memo'] = el.querySelector('.bookmark-memo-input').value;
|
|
} else {
|
|
data['operation'] = 'remove';
|
|
data['collection_id'] = el.getString('originallyContainedIn');
|
|
}
|
|
|
|
const options = {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
}
|
|
const requireReload = el.getInt('requireReload') !== 0;
|
|
el.remove();
|
|
await fetch(bookmarkHref, options);
|
|
if (requireReload) {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
async copyCode(ev, el) {
|
|
if (!el.isSender) {
|
|
return;
|
|
}
|
|
await navigator.clipboard.writeText(el.value);
|
|
el.textContent = 'Copied!'
|
|
await delay(1000);
|
|
el.textContent = 'Copy';
|
|
}
|
|
|
|
toggleAccordion(ev, el) {
|
|
const accordion = el;
|
|
const header = accordion.querySelector('.accordion-header');
|
|
if (!header.contains(ev.sender)){
|
|
return;
|
|
}
|
|
const btn = ev.sender;
|
|
const content = el.querySelector('.accordion-content');
|
|
// these are all meant to be in sync
|
|
accordion.classList.toggle('hidden');
|
|
content.classList.toggle('hidden');
|
|
btn.textContent = accordion.classList.contains('hidden') ? '+' : '-';
|
|
}
|
|
|
|
toggleTab(ev, el) {
|
|
const tabButtonsContainer = el.querySelector('.tab-buttons');
|
|
if (!el.contains(ev.sender)) {
|
|
return;
|
|
}
|
|
|
|
if (ev.sender.classList.contains('active')) {
|
|
return;
|
|
}
|
|
|
|
const targetId = ev.sender.getString('targetId');
|
|
const contents = el.querySelectorAll('.tab-content');
|
|
for (let content of contents) {
|
|
if (content.id === targetId) {
|
|
content.classList.add('active');
|
|
} else {
|
|
content.classList.remove('active');
|
|
}
|
|
}
|
|
for (let button of tabButtonsContainer.children) {
|
|
if (button.dataset.targetId === targetId) {
|
|
button.classList.add('active');
|
|
} else {
|
|
button.classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
|
|
#previousMarkup = '';
|
|
async babycodePreview(ev, el) {
|
|
if (ev.sender.classList.contains('active')) {
|
|
return;
|
|
}
|
|
|
|
const previewErrorsContainer = el.querySelector('#babycode-preview-errors-container');
|
|
const previewContainer = el.querySelector('#babycode-preview-container');
|
|
const ta = document.getElementById('babycode-content');
|
|
const markup = ta.value.trim();
|
|
if (markup === '' || markup === this.#previousMarkup) {
|
|
previewErrorsContainer.textContent = 'Type something!';
|
|
previewContainer.textContent = '';
|
|
return;
|
|
}
|
|
const bannedTags = JSON.parse(document.getElementById('babycode-banned-tags').value);
|
|
this.#previousMarkup = markup;
|
|
|
|
const res = await this.api.getJSON(previewEndpoint, [], {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
markup: markup,
|
|
banned_tags: bannedTags,
|
|
}),
|
|
});
|
|
if (res.error) {
|
|
switch (res.error.status) {
|
|
case 429:
|
|
previewErrorsContainer.textContent = '(Old preview, try again in a few seconds.)'
|
|
this.#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.)'
|
|
break;
|
|
}
|
|
} else {
|
|
previewErrorsContainer.textContent = '';
|
|
previewContainer.innerHTML = res.value.html;
|
|
}
|
|
}
|
|
|
|
insertBabycodeTag(ev, el) {
|
|
const tagStart = ev.sender.getString('tag');
|
|
const breakLine = 'breakLine' in ev.sender.dataset;
|
|
const prefill = 'prefill' in ev.sender.dataset ? ev.sender.dataset.prefill : '';
|
|
|
|
const hasAttr = tagStart[tagStart.length - 1] === '=';
|
|
let tagEnd = tagStart;
|
|
let tagInsertStart = `[${tagStart}]${breakLine ? '\n' : ''}`;
|
|
if (hasAttr) {
|
|
tagEnd = tagEnd.slice(0, -1);
|
|
}
|
|
const tagInsertEnd = `${breakLine ? '\n' : ''}[/${tagEnd}]`;
|
|
const hasSelection = el.selectionStart !== el.selectionEnd;
|
|
const text = el.value;
|
|
|
|
if (hasSelection) {
|
|
const realStart = Math.min(el.selectionStart, el.selectionEnd);
|
|
const realEnd = Math.max(el.selectionStart, el.selectionEnd);
|
|
const selectionLength = realEnd - realStart;
|
|
|
|
const strStart = text.slice(0, realStart);
|
|
const strEnd = text.substring(realEnd);
|
|
const frag = `${tagInsertStart}${text.slice(realStart, realEnd)}${tagInsertEnd}`;
|
|
const reconst = `${strStart}${frag}${strEnd}`;
|
|
el.value = reconst;
|
|
if (!hasAttr) {
|
|
el.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertEnd.length + selectionLength - 1);
|
|
} else {
|
|
const attrCursor = realStart + tagInsertEnd.length - (1 + (breakLine ? 1 : 0))
|
|
el.setSelectionRange(attrCursor, attrCursor); // cursor on attr
|
|
}
|
|
} else {
|
|
if (hasAttr) {
|
|
tagInsertStart += prefill;
|
|
}
|
|
const cursor = el.selectionStart;
|
|
const strStart = text.slice(0, cursor);
|
|
const strEnd = text.substr(cursor);
|
|
|
|
let newCursor = strStart.length + tagInsertStart.length;
|
|
if (hasAttr) {
|
|
newCursor = cursor + tagInsertStart.length - prefill.length - (1 + (breakLine ? 1 : 0)) //cursor on attr
|
|
}
|
|
const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
|
|
el.value = reconst;
|
|
el.setSelectionRange(newCursor, newCursor);
|
|
}
|
|
el.focus();
|
|
}
|
|
|
|
addQuote(ev, el) {
|
|
el.value += ev.sender.value;
|
|
el.scrollIntoView();
|
|
el.focus();
|
|
}
|
|
|
|
convertTimestamps(ev, el) {
|
|
const timestamp = el.getInt('utc');
|
|
if (!isNaN(timestamp)) {
|
|
const date = new Date(timestamp * 1000);
|
|
el.textContent = date.toLocaleString();
|
|
}
|
|
}
|
|
}
|