123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- function createCloseButton() {
- const container = document.createElement('div');
- container.style.marginBottom = '1em';
- container.style.display = 'flex';
- container.style.justifyContent = 'flex-end';
-
- const closeButton = document.createElement('a');
- closeButton.classList.add('btn');
- closeButton.classList.add('btn--close');
- closeButton.href = '#';
- closeButton.innerText = 'x close';
- closeButton.style.marginLeft = 'auto';
- closeButton.addEventListener('click', (e) => {
- e.preventDefault();
- container.parentElement.remove();
- });
-
- container.append(closeButton);
-
- return container;
- }
-
- document.querySelectorAll('[data-delete]').forEach((el) => {
- el.addEventListener('click', (e) => {
- if (confirm('Are you sure? This cannot be undone.')) {
- let slug = e.target.dataset.delete;
- fetch(`/posts/${slug}`, {
- method: 'DELETE',
- }).then((r) => {
- r.json().then((data) => {
- if (data.success) {
- window.location = '/';
- }
- });
- });
- }
- });
- });
-
- const previewButton = document.querySelector('[data-preview]');
- if (previewButton) {
- previewButton.addEventListener('click', (e) => {
- e.preventDefault();
-
- const currentPreview = document.querySelector('#preview');
- if (currentPreview) {
- currentPreview.remove();
- }
-
- const form = document.querySelector('#post-form');
- const textarea = form.querySelector('[name=body]');
- const previewContainer = document.createElement('div');
- const contentContainer = document.createElement('div');
- const content = textarea.value.trim();
- previewContainer.id = 'preview';
-
- if (content.length === 0) {
- return;
- }
-
- const closeButton = createCloseButton();
-
- fetch('/preview', {
- method: 'POST',
- body: content,
- }).then((r) =>
- r.json().then((r) => {
- contentContainer.innerHTML = r.body;
- previewContainer.append(closeButton);
- previewContainer.append(contentContainer);
- form.append(previewContainer);
- }),
- );
- });
- }
-
- document.querySelectorAll('[data-editor-helper]').forEach((helperBtn) => {
- helperBtn.addEventListener('click', (e) => {
- e.preventDefault();
-
- const textarea = document.querySelector('[name=body]');
- const currentValue = textarea.value;
-
- const start = textarea.selectionStart;
- const end = textarea.selectionEnd;
-
- const leftChunk = currentValue.substring(0, start);
- const rightChunk = currentValue.substring(end, textarea.value.length);
-
- let insertion = '';
- let startOffset = 0;
- let endOffset = 0;
- switch (e.target.dataset.editorHelper) {
- case 'bold':
- insertion = '****';
- startOffset = 2;
- endOffset = 2;
- break;
- case 'italic':
- insertion = '__';
- startOffset = 1;
- endOffset = 1;
- break;
- case 'link':
- insertion = '[text](url)';
- startOffset = 1;
- endOffset = 5;
- break;
- case 'code':
- insertion = '```js\n```'
- startOffset = 3;
- endOffset = 5;
- }
-
- textarea.value = leftChunk + insertion + rightChunk;
-
- textarea.focus();
- textarea.selectionStart = start + startOffset;
- textarea.selectionEnd = end + endOffset;
- })
- });
|