474 lines
15 KiB
JavaScript
474 lines
15 KiB
JavaScript
const IMAGE_FORMATS = document.getElementById('IMAGE_FORMATS').value.split(',')
|
|
|
|
document.getElementById('post-title').value = localStorage.getItem("post-title")
|
|
document.getElementById('post-text').value = localStorage.getItem("post-text")
|
|
document.getElementById('post-url').value = localStorage.getItem("post-url")
|
|
|
|
document.getElementById('post-notify').checked = localStorage.getItem("post-notify") == 'true'
|
|
document.getElementById('post-new').checked = localStorage.getItem("post-new") == 'true'
|
|
const postnsfw = document.getElementById('post-nsfw')
|
|
if (postnsfw) {
|
|
postnsfw.checked = localStorage.getItem("post-nsfw") == 'true'
|
|
}
|
|
document.getElementById('post-private').checked = localStorage.getItem("post-private") == 'true'
|
|
document.getElementById('post-ghost').checked = localStorage.getItem("post-ghost") == 'true'
|
|
|
|
markdown(document.getElementById("post-text"));
|
|
|
|
function checkForRequired() {
|
|
const title = document.getElementById("post-title");
|
|
const url = document.getElementById("post-url");
|
|
const text = document.getElementById("post-text");
|
|
const button = document.getElementById("create_button");
|
|
const image = document.getElementById("file-upload");
|
|
const image2 = document.getElementById("file-upload-submit");
|
|
|
|
if (url.value.length > 0 || image.files.length > 0 || image2.files.length > 0) {
|
|
text.required = false;
|
|
url.required=false;
|
|
} else if (text.value.length > 0 || image.files.length > 0 || image2.files.length > 0) {
|
|
url.required = false;
|
|
} else {
|
|
text.required = true;
|
|
url.required = true;
|
|
}
|
|
|
|
const isValidTitle = title.checkValidity();
|
|
const isValidURL = url.checkValidity();
|
|
const isValidText = text.checkValidity();
|
|
|
|
if (isValidTitle && (isValidURL || image.files.length > 0 || image2.files.length > 0)) {
|
|
button.disabled = false;
|
|
} else if (isValidTitle && isValidText) {
|
|
button.disabled = false;
|
|
} else {
|
|
button.disabled = true;
|
|
}
|
|
}
|
|
checkForRequired();
|
|
|
|
function hide_image() {
|
|
x=document.getElementById('image-upload-block');
|
|
url=document.getElementById('post-url').value;
|
|
if (url.length>=1){
|
|
x.classList.add('d-none');
|
|
}
|
|
else {
|
|
x.classList.remove('d-none');
|
|
}
|
|
}
|
|
|
|
document.onpaste = function(event) {
|
|
files = structuredClone(event.clipboardData.files);
|
|
|
|
if (files.length > 4)
|
|
{
|
|
alert("You can't upload more than 4 files at one time!")
|
|
return
|
|
}
|
|
|
|
filename = files[0]
|
|
|
|
if (filename)
|
|
{
|
|
filename = filename.name.toLowerCase()
|
|
if (document.activeElement.id == 'post-text') {
|
|
let filename = ''
|
|
for (const file of files)
|
|
filename += file.name + ', '
|
|
filename = filename.toLowerCase().slice(0, -2)
|
|
document.getElementById('file-upload-submit').value = files;
|
|
document.getElementById('filename-show-submit').textContent = filename;
|
|
}
|
|
else {
|
|
f=document.getElementById('file-upload');
|
|
f.files = files;
|
|
document.getElementById('filename-show').textContent = filename;
|
|
document.getElementById('urlblock').classList.add('d-none');
|
|
if (IMAGE_FORMATS.some(s => filename.endsWith(s)))
|
|
{
|
|
const fileReader = new FileReader();
|
|
fileReader.readAsDataURL(f.files[0]);
|
|
fileReader.addEventListener("load", function () {document.getElementById('image-preview').setAttribute('src', this.result);});
|
|
}
|
|
document.getElementById('post-url').value = null;
|
|
localStorage.setItem("post-url", "")
|
|
document.getElementById('image-upload-block').classList.remove('d-none')
|
|
}
|
|
checkForRequired();
|
|
}
|
|
}
|
|
|
|
document.getElementById('file-upload').addEventListener('change', function(){
|
|
f=document.getElementById('file-upload');
|
|
document.getElementById('urlblock').classList.add('d-none');
|
|
document.getElementById('filename-show').textContent = document.getElementById('file-upload').files[0].name.substr(0, 20);
|
|
filename = f.files[0].name.toLowerCase()
|
|
if (IMAGE_FORMATS.some(s => filename.endsWith(s)))
|
|
{
|
|
const fileReader = new FileReader();
|
|
fileReader.readAsDataURL(f.files[0]);
|
|
fileReader.addEventListener("load", function () {document.getElementById('image-preview').setAttribute('src', this.result);});
|
|
}
|
|
checkForRequired();
|
|
})
|
|
|
|
function savetext() {
|
|
localStorage.setItem("post-title", document.getElementById('post-title').value)
|
|
localStorage.setItem("post-text", document.getElementById('post-text').value)
|
|
localStorage.setItem("post-url", document.getElementById('post-url').value)
|
|
|
|
let sub = document.getElementById('sub')
|
|
if (sub) localStorage.setItem("sub", sub.value)
|
|
|
|
localStorage.setItem("post-notify", document.getElementById('post-notify').checked)
|
|
localStorage.setItem("post-new", document.getElementById('post-new').checked)
|
|
if (postnsfw) {
|
|
localStorage.setItem("post-nsfw", document.getElementById('post-nsfw').checked)
|
|
}
|
|
localStorage.setItem("post-private", document.getElementById('post-private').checked)
|
|
localStorage.setItem("post-ghost", document.getElementById('post-ghost').checked)
|
|
}
|
|
|
|
|
|
function autoSuggestTitle() {
|
|
|
|
const urlField = document.getElementById("post-url");
|
|
|
|
const titleField = document.getElementById("post-title");
|
|
|
|
const isValidURL = urlField.checkValidity();
|
|
|
|
if (isValidURL && urlField.value.length > 0 && titleField.value === "") {
|
|
|
|
const x = new XMLHttpRequest();
|
|
x.withCredentials=true;
|
|
x.onreadystatechange = function() {
|
|
if (x.readyState == 4 && x.status == 200 && !titleField.value) {
|
|
|
|
title=JSON.parse(x.responseText)["title"];
|
|
titleField.value=title;
|
|
checkForRequired()
|
|
}
|
|
}
|
|
x.open('get','/submit/title?url=' + urlField.value);
|
|
x.setRequestHeader('xhr', 'xhr');
|
|
x.send(null);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
function ghost_toggle(t) {
|
|
const followers = document.getElementById("post-notify")
|
|
if (t.checked == true) {
|
|
followers.checked = false;
|
|
followers.disabled = true;
|
|
} else {
|
|
followers.disabled = false;
|
|
}
|
|
}
|
|
|
|
function checkRepost() {
|
|
const system = document.getElementById('system')
|
|
system.innerHTML = "";
|
|
const url = document.getElementById('post-url').value
|
|
const min_repost_check = 9;
|
|
|
|
if (url && url.length >= min_repost_check) {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("post", "/is_repost");
|
|
xhr.setRequestHeader('xhr', 'xhr');
|
|
const form = new FormData()
|
|
form.append("url", url);
|
|
|
|
xhr.onload=function(){
|
|
try {data = JSON.parse(xhr.response)}
|
|
catch(e) {console.log(e)}
|
|
|
|
if (data && data["permalink"]) {
|
|
const permalinkText = escapeHTML(data["permalink"]);
|
|
const permalinkURI = encodeURI(data["permalink"]);
|
|
if (permalinkText) {
|
|
system.innerHTML = `This is a repost of <a href="${permalinkURI}">${permalinkText}</a>`;
|
|
}
|
|
}
|
|
}
|
|
xhr.send(form)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if(!((e.ctrlKey || e.metaKey) && e.key === "Enter"))
|
|
return;
|
|
|
|
const submitButton = document.getElementById('create_button')
|
|
|
|
submitButton.click();
|
|
});
|
|
|
|
checkRepost();
|
|
|
|
if (location.href == '/submit') {
|
|
const sub = document.getElementById('sub')
|
|
if (sub) sub.value = localStorage.getItem("sub")
|
|
}
|
|
|
|
// const filelist = document.getElementById('upload-filelist');
|
|
|
|
// /**
|
|
// * Sets up the elements inside file upload rows.
|
|
// *
|
|
// * @param {File} file
|
|
// * @return {HTMLLIElement} row
|
|
// */
|
|
// function addRow(file) {
|
|
// var row = document.createElement('li');
|
|
|
|
// var name = document.createElement('span');
|
|
// name.textContent = file.name;
|
|
// name.className = 'file-name';
|
|
|
|
// var progressIndicator = document.createElement('span');
|
|
// progressIndicator.className = 'progress-percent';
|
|
// progressIndicator.textContent = '0%';
|
|
|
|
// var progressBar = document.createElement('progress');
|
|
// progressBar.className = 'file-progress';
|
|
// progressBar.setAttribute('max', '100');
|
|
// progressBar.setAttribute('value', '0');
|
|
|
|
// row.appendChild(name);
|
|
// row.appendChild(progressBar);
|
|
// row.appendChild(progressIndicator);
|
|
|
|
// filelist.innerHTML = '';
|
|
// filelist.appendChild(row);
|
|
// return row;
|
|
// }
|
|
|
|
// /**
|
|
// * Updates the page while the file is being uploaded.
|
|
// *
|
|
// * @param {ProgressEvent} evt
|
|
// */
|
|
// function handleUploadProgress(evt) {
|
|
// var xhr = evt.target;
|
|
// var bar = xhr.bar;
|
|
// var percentIndicator = xhr.percent;
|
|
|
|
// /* If we have amounts of work done/left that we can calculate with
|
|
// (which, unless we're uploading dynamically resizing data, is always), calculate the percentage. */
|
|
// if (evt.lengthComputable) {
|
|
// var progressPercent = Math.floor((evt.loaded / evt.total) * 100);
|
|
// bar.setAttribute('value', progressPercent);
|
|
// percentIndicator.textContent = progressPercent + '%';
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * Complete the uploading process by checking the response status and, if the
|
|
// * upload was successful, writing the URL(s) and creating the copy element(s)
|
|
// * for the files.
|
|
// *
|
|
// * @param {ProgressEvent} evt
|
|
// */
|
|
// function handleUploadComplete(evt) {
|
|
// var xhr = evt.target;
|
|
// var bar = xhr.bar;
|
|
// var row = xhr.row;
|
|
// var percentIndicator = xhr.percent;
|
|
|
|
// percentIndicator.style.visibility = 'hidden';
|
|
// bar.style.visibility = 'hidden';
|
|
// row.removeChild(bar);
|
|
// row.removeChild(percentIndicator);
|
|
// var respStatus = xhr.status;
|
|
|
|
// var url = document.createElement('span');
|
|
// url.className = 'file-url';
|
|
// row.appendChild(url);
|
|
|
|
// var link = document.createElement('a');
|
|
// if (respStatus === 200) {
|
|
// var response = JSON.parse(xhr.responseText);
|
|
// if (response.success) {
|
|
// link.textContent = response.files[0].url.replace(/.*?:\/\//g, '');
|
|
// link.href = response.files[0].url;
|
|
// url.appendChild(link);
|
|
// var copy = document.createElement('button');
|
|
// copy.className = 'upload-clipboard-btn';
|
|
// var glyph = document.createElement('img');
|
|
// glyph.src = 'img/glyphicons-512-copy.png';
|
|
// copy.appendChild(glyph);
|
|
// url.appendChild(copy);
|
|
// copy.addEventListener("click", function (event) {
|
|
// /* Why create an element? The text needs to be on screen to be
|
|
// selected and thus copied. The only text we have on-screen is the link
|
|
// without the http[s]:// part. So, this creates an element with the
|
|
// full link for a moment and then deletes it.
|
|
|
|
// See the "Complex Example: Copy to clipboard without displaying
|
|
// input" section at: https://stackoverflow.com/a/30810322 */
|
|
// var element = document.createElement('a');
|
|
// element.textContent = response.files[0].url;
|
|
// link.appendChild(element);
|
|
// var range = document.createRange();
|
|
// range.selectNode(element);
|
|
// window.getSelection().removeAllRanges();
|
|
// window.getSelection().addRange(range);
|
|
// document.execCommand("copy");
|
|
// link.removeChild(element);
|
|
// });
|
|
// } else {
|
|
// bar.innerHTML = 'Error: ' + response.description;
|
|
// }
|
|
// } else if (respStatus === 413) {
|
|
// link.textContent = 'File too big!';
|
|
// url.appendChild(link);
|
|
// } else {
|
|
// var response = JSON.parse(xhr.responseText);
|
|
// link.textContent = response.description;
|
|
// url.appendChild(link);
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * Updates the page while the file is being uploaded.
|
|
// *
|
|
// * @param {File} file
|
|
// * @param {HTMLLIElement} row
|
|
// */
|
|
// function uploadFile(file, row) {
|
|
// var bar = row.querySelector('.file-progress');
|
|
// var percentIndicator = row.querySelector('.progress-percent');
|
|
// var xhr = new XMLHttpRequest();
|
|
// xhr.open('POST', 'upload.php');
|
|
|
|
// xhr['row'] = row;
|
|
// xhr['bar'] = bar;
|
|
// xhr['percent'] = percentIndicator;
|
|
// xhr.upload['bar'] = bar;
|
|
// xhr.upload['percent'] = percentIndicator;
|
|
|
|
// xhr.addEventListener('load', handleUploadComplete, false);
|
|
// xhr.upload.onprogress = handleUploadProgress;
|
|
|
|
// var form = new FormData();
|
|
// form.append('files[]', file);
|
|
// xhr.send(form);
|
|
// }
|
|
|
|
// /**
|
|
// * Prevents the browser for allowing the normal actions associated with an event.
|
|
// * This is used by event handlers to allow custom functionality without
|
|
// * having to worry about the other consequences of that action.
|
|
// *
|
|
// * @param {Event} evt
|
|
// */
|
|
// function stopDefaultEvent(evt) {
|
|
// evt.stopPropagation();
|
|
// evt.preventDefault();
|
|
// }
|
|
|
|
// /**
|
|
// * Adds 1 to the state and changes the text.
|
|
// *
|
|
// * @param {Object} state
|
|
// * @param {HTMLButtonElement} element
|
|
// * @param {DragEvent} evt
|
|
// */
|
|
// function handleDrag(state, element, evt) {
|
|
// stopDefaultEvent(evt);
|
|
// if (state.dragCount == 1) {
|
|
// element.textContent = 'Drop it here~';
|
|
// }
|
|
// state.dragCount += 1;
|
|
// }
|
|
|
|
// /**
|
|
// * Subtracts 1 from the state and changes the text back.
|
|
// *
|
|
// * @param {Object} state
|
|
// * @param {HTMLButtonElement} element
|
|
// * @param {DragEvent} evt
|
|
// */
|
|
// function handleDragAway(state, element, evt) {
|
|
// stopDefaultEvent(evt);
|
|
// state.dragCount -= 1;
|
|
// if (state.dragCount == 0) {
|
|
// element.textContent = 'Select or drop file(s)';
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * Prepares files for uploading after being added via drag-drop.
|
|
// *
|
|
// * @param {Object} state
|
|
// * @param {HTMLButtonElement} element
|
|
// * @param {DragEvent} evt
|
|
// */
|
|
// function handleDragDrop(state, element, evt) {
|
|
// stopDefaultEvent(evt);
|
|
// handleDragAway(state, element, evt);
|
|
// var len = evt.dataTransfer.files.length;
|
|
// for (var i = 0; i < len; i++) {
|
|
// var file = evt.dataTransfer.files[i];
|
|
// var row = addRow(file);
|
|
// uploadFile(file, row);
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * Prepares the files to be uploaded when they're added to the <input> element.
|
|
// *
|
|
// * @param {InputEvent} evt
|
|
// */
|
|
// function uploadFiles(evt) {
|
|
// var len = evt.target.files.length;
|
|
// // For each file, make a row, and upload the file.
|
|
// for (var i = 0; i < len; i++) {
|
|
// var file = evt.target.files[i];
|
|
// var row = addRow(file);
|
|
// uploadFile(file, row);
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * Opens up a "Select files.." dialog window to allow users to select files to upload.
|
|
// *
|
|
// * @param {HTMLInputElement} target
|
|
// * @param {InputEvent} evt
|
|
// */
|
|
// function selectFiles(target, evt) {
|
|
// stopDefaultEvent(evt);
|
|
// target.click();
|
|
// }
|
|
|
|
// /* Handles the pasting function */
|
|
// window.addEventListener("paste", e => {
|
|
// var len = e.clipboardData.files.length;
|
|
// for (var i = 0; i < len; i++) {
|
|
// var file = e.clipboardData.files[i];
|
|
// var row = addRow(file);
|
|
// uploadFile(file, row);
|
|
// }
|
|
// });
|
|
|
|
|
|
// /* Set-up the event handlers for the <button>, <input> and the window itself
|
|
// and also set the "js" class on selector "#upload-form", presumably to
|
|
// allow custom styles for clients running javascript. */
|
|
// var state = {dragCount: 0};
|
|
// var uploadButton = document.getElementById('image-upload-block');
|
|
// window.addEventListener('dragenter', handleDrag.bind(this, state, uploadButton), false);
|
|
// window.addEventListener('dragleave', handleDragAway.bind(this, state, uploadButton), false);
|
|
// window.addEventListener('drop', handleDragAway.bind(this, state, uploadButton), false);
|
|
// window.addEventListener('dragover', stopDefaultEvent, false);
|
|
|
|
|
|
// var uploadInput = document.getElementById('file-upload');
|
|
// uploadInput.addEventListener('change', uploadFiles);
|
|
// // uploadButton.addEventListener('click', selectFiles.bind(this, uploadInput));
|
|
// uploadButton.addEventListener('drop', handleDragDrop.bind(this, state, uploadButton), false);
|