rDrama
/
rDrama
9
10
Fork 8
Code Issues Pull Requests Packages Releases Wiki Activity

Revert "Revert "comment the stolen code"" 

This reverts commit 024994f47e.
pull/116/head
Aevann 2023-02-08 08:54:56 +02:00
parent 024994f47e
commit 7b98119a2e
1 changed files with 229 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

458
files/assets/js/submit.js
View File

@ -214,260 +214,260 @@ if (location.href == '/submit') {
if (sub) sub.value = localStorage.getItem("sub") if (sub) sub.value = localStorage.getItem("sub")
} }
const filelist = document.getElementById('upload-filelist'); // const filelist = document.getElementById('upload-filelist');
/** // /**
* Sets up the elements inside file upload rows. // * Sets up the elements inside file upload rows.
* // *
* @param {File} file // * @param {File} file
* @return {HTMLLIElement} row // * @return {HTMLLIElement} row
*/ // */
function addRow(file) { // function addRow(file) {
var row = document.createElement('li'); // var row = document.createElement('li');
var name = document.createElement('span'); // var name = document.createElement('span');
name.textContent = file.name; // name.textContent = file.name;
name.className = 'file-name'; // name.className = 'file-name';
var progressIndicator = document.createElement('span'); // var progressIndicator = document.createElement('span');
progressIndicator.className = 'progress-percent'; // progressIndicator.className = 'progress-percent';
progressIndicator.textContent = '0%'; // progressIndicator.textContent = '0%';
var progressBar = document.createElement('progress'); // var progressBar = document.createElement('progress');
progressBar.className = 'file-progress'; // progressBar.className = 'file-progress';
progressBar.setAttribute('max', '100'); // progressBar.setAttribute('max', '100');
progressBar.setAttribute('value', '0'); // progressBar.setAttribute('value', '0');
row.appendChild(name); // row.appendChild(name);
row.appendChild(progressBar); // row.appendChild(progressBar);
row.appendChild(progressIndicator); // row.appendChild(progressIndicator);
filelist.innerHTML = ''; // filelist.innerHTML = '';
filelist.appendChild(row); // filelist.appendChild(row);
return row; // return row;
} // }
/** // /**
* Updates the page while the file is being uploaded. // * Updates the page while the file is being uploaded.
* // *
* @param {ProgressEvent} evt // * @param {ProgressEvent} evt
*/ // */
function handleUploadProgress(evt) { // function handleUploadProgress(evt) {
var xhr = evt.target; // var xhr = evt.target;
var bar = xhr.bar; // var bar = xhr.bar;
var percentIndicator = xhr.percent; // var percentIndicator = xhr.percent;
/* If we have amounts of work done/left that we can calculate with // /* 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. */ // (which, unless we're uploading dynamically resizing data, is always), calculate the percentage. */
if (evt.lengthComputable) { // if (evt.lengthComputable) {
var progressPercent = Math.floor((evt.loaded / evt.total) * 100); // var progressPercent = Math.floor((evt.loaded / evt.total) * 100);
bar.setAttribute('value', progressPercent); // bar.setAttribute('value', progressPercent);
percentIndicator.textContent = progressPercent + '%'; // percentIndicator.textContent = progressPercent + '%';
} // }
} // }
/** // /**
* Complete the uploading process by checking the response status and, if the // * 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) // * upload was successful, writing the URL(s) and creating the copy element(s)
* for the files. // * for the files.
* // *
* @param {ProgressEvent} evt // * @param {ProgressEvent} evt
*/ // */
function handleUploadComplete(evt) { // function handleUploadComplete(evt) {
var xhr = evt.target; // var xhr = evt.target;
var bar = xhr.bar; // var bar = xhr.bar;
var row = xhr.row; // var row = xhr.row;
var percentIndicator = xhr.percent; // var percentIndicator = xhr.percent;
percentIndicator.style.visibility = 'hidden'; // percentIndicator.style.visibility = 'hidden';
bar.style.visibility = 'hidden'; // bar.style.visibility = 'hidden';
row.removeChild(bar); // row.removeChild(bar);
row.removeChild(percentIndicator); // row.removeChild(percentIndicator);
var respStatus = xhr.status; // var respStatus = xhr.status;
var url = document.createElement('span'); // var url = document.createElement('span');
url.className = 'file-url'; // url.className = 'file-url';
row.appendChild(url); // row.appendChild(url);
var link = document.createElement('a'); // var link = document.createElement('a');
if (respStatus === 200) { // if (respStatus === 200) {
var response = JSON.parse(xhr.responseText); // var response = JSON.parse(xhr.responseText);
if (response.success) { // if (response.success) {
link.textContent = response.files[0].url.replace(/.*?:\/\//g, ''); // link.textContent = response.files[0].url.replace(/.*?:\/\//g, '');
link.href = response.files[0].url; // link.href = response.files[0].url;
url.appendChild(link); // url.appendChild(link);
var copy = document.createElement('button'); // var copy = document.createElement('button');
copy.className = 'upload-clipboard-btn'; // copy.className = 'upload-clipboard-btn';
var glyph = document.createElement('img'); // var glyph = document.createElement('img');
glyph.src = 'img/glyphicons-512-copy.png'; // glyph.src = 'img/glyphicons-512-copy.png';
copy.appendChild(glyph); // copy.appendChild(glyph);
url.appendChild(copy); // url.appendChild(copy);
copy.addEventListener("click", function (event) { // copy.addEventListener("click", function (event) {
/* Why create an element? The text needs to be on screen to be // /* 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 // 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 // without the http[s]:// part. So, this creates an element with the
full link for a moment and then deletes it. // full link for a moment and then deletes it.
See the "Complex Example: Copy to clipboard without displaying // See the "Complex Example: Copy to clipboard without displaying
input" section at: https://stackoverflow.com/a/30810322 */ // input" section at: https://stackoverflow.com/a/30810322 */
var element = document.createElement('a'); // var element = document.createElement('a');
element.textContent = response.files[0].url; // element.textContent = response.files[0].url;
link.appendChild(element); // link.appendChild(element);
var range = document.createRange(); // var range = document.createRange();
range.selectNode(element); // range.selectNode(element);
window.getSelection().removeAllRanges(); // window.getSelection().removeAllRanges();
window.getSelection().addRange(range); // window.getSelection().addRange(range);
document.execCommand("copy"); // document.execCommand("copy");
link.removeChild(element); // link.removeChild(element);
}); // });
} else { // } else {
bar.innerHTML = 'Error: ' + response.description; // bar.innerHTML = 'Error: ' + response.description;
} // }
} else if (respStatus === 413) { // } else if (respStatus === 413) {
link.textContent = 'File too big!'; // link.textContent = 'File too big!';
url.appendChild(link); // url.appendChild(link);
} else { // } else {
var response = JSON.parse(xhr.responseText); // var response = JSON.parse(xhr.responseText);
link.textContent = response.description; // link.textContent = response.description;
url.appendChild(link); // url.appendChild(link);
} // }
} // }
/** // /**
* Updates the page while the file is being uploaded. // * Updates the page while the file is being uploaded.
* // *
* @param {File} file // * @param {File} file
* @param {HTMLLIElement} row // * @param {HTMLLIElement} row
*/ // */
function uploadFile(file, row) { // function uploadFile(file, row) {
var bar = row.querySelector('.file-progress'); // var bar = row.querySelector('.file-progress');
var percentIndicator = row.querySelector('.progress-percent'); // var percentIndicator = row.querySelector('.progress-percent');
var xhr = new XMLHttpRequest(); // var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php'); // xhr.open('POST', 'upload.php');
xhr['row'] = row; // xhr['row'] = row;
xhr['bar'] = bar; // xhr['bar'] = bar;
xhr['percent'] = percentIndicator; // xhr['percent'] = percentIndicator;
xhr.upload['bar'] = bar; // xhr.upload['bar'] = bar;
xhr.upload['percent'] = percentIndicator; // xhr.upload['percent'] = percentIndicator;
xhr.addEventListener('load', handleUploadComplete, false); // xhr.addEventListener('load', handleUploadComplete, false);
xhr.upload.onprogress = handleUploadProgress; // xhr.upload.onprogress = handleUploadProgress;
var form = new FormData(); // var form = new FormData();
form.append('files[]', file); // form.append('files[]', file);
xhr.send(form); // xhr.send(form);
} // }
/** // /**
* Prevents the browser for allowing the normal actions associated with an event. // * Prevents the browser for allowing the normal actions associated with an event.
* This is used by event handlers to allow custom functionality without // * This is used by event handlers to allow custom functionality without
* having to worry about the other consequences of that action. // * having to worry about the other consequences of that action.
* // *
* @param {Event} evt // * @param {Event} evt
*/ // */
function stopDefaultEvent(evt) { // function stopDefaultEvent(evt) {
evt.stopPropagation(); // evt.stopPropagation();
evt.preventDefault(); // evt.preventDefault();
} // }
/** // /**
* Adds 1 to the state and changes the text. // * Adds 1 to the state and changes the text.
* // *
* @param {Object} state // * @param {Object} state
* @param {HTMLButtonElement} element // * @param {HTMLButtonElement} element
* @param {DragEvent} evt // * @param {DragEvent} evt
*/ // */
function handleDrag(state, element, evt) { // function handleDrag(state, element, evt) {
stopDefaultEvent(evt); // stopDefaultEvent(evt);
if (state.dragCount == 1) { // if (state.dragCount == 1) {
element.textContent = 'Drop it here~'; // element.textContent = 'Drop it here~';
} // }
state.dragCount += 1; // state.dragCount += 1;
} // }
/** // /**
* Subtracts 1 from the state and changes the text back. // * Subtracts 1 from the state and changes the text back.
* // *
* @param {Object} state // * @param {Object} state
* @param {HTMLButtonElement} element // * @param {HTMLButtonElement} element
* @param {DragEvent} evt // * @param {DragEvent} evt
*/ // */
function handleDragAway(state, element, evt) { // function handleDragAway(state, element, evt) {
stopDefaultEvent(evt); // stopDefaultEvent(evt);
state.dragCount -= 1; // state.dragCount -= 1;
if (state.dragCount == 0) { // if (state.dragCount == 0) {
element.textContent = 'Select or drop file(s)'; // element.textContent = 'Select or drop file(s)';
} // }
} // }
/** // /**
* Prepares files for uploading after being added via drag-drop. // * Prepares files for uploading after being added via drag-drop.
* // *
* @param {Object} state // * @param {Object} state
* @param {HTMLButtonElement} element // * @param {HTMLButtonElement} element
* @param {DragEvent} evt // * @param {DragEvent} evt
*/ // */
function handleDragDrop(state, element, evt) { // function handleDragDrop(state, element, evt) {
stopDefaultEvent(evt); // stopDefaultEvent(evt);
handleDragAway(state, element, evt); // handleDragAway(state, element, evt);
var len = evt.dataTransfer.files.length; // var len = evt.dataTransfer.files.length;
for (var i = 0; i < len; i++) { // for (var i = 0; i < len; i++) {
var file = evt.dataTransfer.files[i]; // var file = evt.dataTransfer.files[i];
var row = addRow(file); // var row = addRow(file);
uploadFile(file, row); // uploadFile(file, row);
} // }
} // }
/** // /**
* Prepares the files to be uploaded when they're added to the <input> element. // * Prepares the files to be uploaded when they're added to the <input> element.
* // *
* @param {InputEvent} evt // * @param {InputEvent} evt
*/ // */
function uploadFiles(evt) { // function uploadFiles(evt) {
var len = evt.target.files.length; // var len = evt.target.files.length;
// For each file, make a row, and upload the file. // // For each file, make a row, and upload the file.
for (var i = 0; i < len; i++) { // for (var i = 0; i < len; i++) {
var file = evt.target.files[i]; // var file = evt.target.files[i];
var row = addRow(file); // var row = addRow(file);
uploadFile(file, row); // uploadFile(file, row);
} // }
} // }
/** // /**
* Opens up a "Select files.." dialog window to allow users to select files to upload. // * Opens up a "Select files.." dialog window to allow users to select files to upload.
* // *
* @param {HTMLInputElement} target // * @param {HTMLInputElement} target
* @param {InputEvent} evt // * @param {InputEvent} evt
*/ // */
function selectFiles(target, evt) { // function selectFiles(target, evt) {
stopDefaultEvent(evt); // stopDefaultEvent(evt);
target.click(); // target.click();
} // }
/* Handles the pasting function */ // /* Handles the pasting function */
window.addEventListener("paste", e => { // window.addEventListener("paste", e => {
var len = e.clipboardData.files.length; // var len = e.clipboardData.files.length;
for (var i = 0; i < len; i++) { // for (var i = 0; i < len; i++) {
var file = e.clipboardData.files[i]; // var file = e.clipboardData.files[i];
var row = addRow(file); // var row = addRow(file);
uploadFile(file, row); // uploadFile(file, row);
} // }
}); // });
/* Set-up the event handlers for the <button>, <input> and the window itself // /* 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 // and also set the "js" class on selector "#upload-form", presumably to
allow custom styles for clients running javascript. */ // allow custom styles for clients running javascript. */
var state = {dragCount: 0}; // var state = {dragCount: 0};
var uploadButton = document.getElementById('image-upload-block'); // var uploadButton = document.getElementById('image-upload-block');
window.addEventListener('dragenter', handleDrag.bind(this, state, uploadButton), false); // window.addEventListener('dragenter', handleDrag.bind(this, state, uploadButton), false);
window.addEventListener('dragleave', handleDragAway.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('drop', handleDragAway.bind(this, state, uploadButton), false);
window.addEventListener('dragover', stopDefaultEvent, false); // window.addEventListener('dragover', stopDefaultEvent, false);
var uploadInput = document.getElementById('file-upload'); // var uploadInput = document.getElementById('file-upload');
uploadInput.addEventListener('change', uploadFiles); // uploadInput.addEventListener('change', uploadFiles);
// uploadButton.addEventListener('click', selectFiles.bind(this, uploadInput)); // // uploadButton.addEventListener('click', selectFiles.bind(this, uploadInput));
uploadButton.addEventListener('drop', handleDragDrop.bind(this, state, uploadButton), false); // uploadButton.addEventListener('drop', handleDragDrop.bind(this, state, uploadButton), false);