Switched to integrated EEPROM client.
This commit is contained in:
parent
77bfc10475
commit
2a191c5b19
3 changed files with 266 additions and 216 deletions
|
|
@ -1,37 +1,95 @@
|
|||
#include utility.js
|
||||
#include xhr.js
|
||||
|
||||
const MszEEPROM = (() => {
|
||||
let eepromScript;
|
||||
const MszEEPROM = function(appId, endPoint) {
|
||||
if(typeof appId !== 'string')
|
||||
throw 'appId must be a string';
|
||||
if(typeof endPoint !== 'string')
|
||||
throw 'endPoint must be a string';
|
||||
|
||||
return {
|
||||
init: () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if(eepromScript !== undefined) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
create: fileInput => {
|
||||
if(!(fileInput instanceof File))
|
||||
throw 'fileInput must be an instance of window.File';
|
||||
|
||||
if(typeof peepPath !== 'string') {
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
let userAborted = false;
|
||||
let abortHandler;
|
||||
let progressHandler;
|
||||
|
||||
const scriptElem = $e({
|
||||
tag: 'script',
|
||||
attrs: {
|
||||
src: `${peepPath}/scripts/eepromv1a.js`,
|
||||
charset: 'utf-8',
|
||||
type: 'text/javascript',
|
||||
onerror: () => reject(),
|
||||
onload: () => {
|
||||
eepromScript = scriptElem;
|
||||
resolve(true);
|
||||
},
|
||||
},
|
||||
});
|
||||
const reportProgress = ev => {
|
||||
if(progressHandler !== undefined)
|
||||
progressHandler({
|
||||
loaded: ev.loaded,
|
||||
total: ev.total,
|
||||
progress: ev.total <= 0 ? 0 : ev.loaded / ev.total,
|
||||
});
|
||||
};
|
||||
|
||||
document.body.appendChild(scriptElem);
|
||||
return {
|
||||
abort: () => {
|
||||
userAborted = true;
|
||||
if(typeof abortHandler === 'function')
|
||||
abortHandler();
|
||||
},
|
||||
onProgress: handler => {
|
||||
if(typeof handler !== 'function')
|
||||
throw 'handler must be a function';
|
||||
progressHandler = handler;
|
||||
},
|
||||
start: async () => {
|
||||
if(userAborted)
|
||||
throw 'File upload was cancelled by the user, it cannot be restarted.';
|
||||
|
||||
try {
|
||||
const formData = new FormData;
|
||||
formData.append('src', appId);
|
||||
formData.append('file', fileInput);
|
||||
|
||||
const { status, body } = await $x.post(`${endPoint}/uploads`, {
|
||||
type: 'json',
|
||||
authed: true,
|
||||
upload: reportProgress,
|
||||
abort: handler => abortHandler = handler,
|
||||
}, formData);
|
||||
if(body === null)
|
||||
throw "The upload server didn't return the metadata for some reason.";
|
||||
|
||||
if(status !== 201)
|
||||
throw body.english ?? body.error ?? `Upload failed with status code ${status}`;
|
||||
|
||||
body.isImage = () => body.type.startsWith('image/');
|
||||
body.isVideo = () => body.type.startsWith('video/');
|
||||
body.isAudio = () => body.type.startsWith('audio/');
|
||||
body.isMedia = () => body.isImage() || body.isAudio() || body.isVideo();
|
||||
|
||||
return Object.freeze(body);
|
||||
} catch(ex) {
|
||||
if(userAborted)
|
||||
throw '';
|
||||
|
||||
console.error(ex);
|
||||
throw ex;
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
delete: async fileInfo => {
|
||||
if(typeof fileInfo !== 'object')
|
||||
throw 'fileInfo must be an object';
|
||||
if(typeof fileInfo.urlf !== 'string')
|
||||
throw 'fileInfo.urlf must be a string';
|
||||
|
||||
const { status, body } = await $x.delete(fileInfo.urlf, {
|
||||
type: 'json',
|
||||
authed: true,
|
||||
});
|
||||
|
||||
if(status !== 204) {
|
||||
if(body === null)
|
||||
throw `Delete failed with status code ${status}`;
|
||||
|
||||
throw body.english ?? body.error ?? `Delete failed with status code ${status}`;
|
||||
}
|
||||
},
|
||||
};
|
||||
})();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,150 +20,146 @@ const MszForumEditor = function(form) {
|
|||
let lastPostText = '',
|
||||
lastPostParser;
|
||||
|
||||
MszEEPROM.init()
|
||||
.catch(() => console.error('Failed to initialise EEPROM'))
|
||||
.then(() => {
|
||||
const eepromClient = new EEPROM(peepApp, peepPath);
|
||||
const eepromHistory = <div class="eeprom-widget-history-items"/>;
|
||||
const eepromClient = new MszEEPROM(peepApp, peepPath);
|
||||
const eepromHistory = <div class="eeprom-widget-history-items"/>;
|
||||
|
||||
const eepromHandleFileUpload = async file => {
|
||||
const uploadElemNameValue = <div class="eeprom-widget-file-name-value" title={file.name}>{file.name}</div>;
|
||||
const uploadElemName = <a class="eeprom-widget-file-name" target="_blank">{uploadElemNameValue}</a>;
|
||||
const uploadElemProgressText = <div class="eeprom-widget-file-progress">Please wait...</div>;
|
||||
const uploadElemProgressBarValue = <div class="eeprom-widget-file-bar-fill" style={{ width: '0%' }}/>;
|
||||
const uploadElem = <div class="eeprom-widget-file">
|
||||
<div class="eeprom-widget-file-info">
|
||||
{uploadElemName}
|
||||
{uploadElemProgressText}
|
||||
</div>
|
||||
<div class="eeprom-widget-file-bar">
|
||||
{uploadElemProgressBarValue}
|
||||
</div>
|
||||
</div>;
|
||||
const eepromHandleFileUpload = async file => {
|
||||
const uploadElemNameValue = <div class="eeprom-widget-file-name-value" title={file.name}>{file.name}</div>;
|
||||
const uploadElemName = <a class="eeprom-widget-file-name" target="_blank">{uploadElemNameValue}</a>;
|
||||
const uploadElemProgressText = <div class="eeprom-widget-file-progress">Please wait...</div>;
|
||||
const uploadElemProgressBarValue = <div class="eeprom-widget-file-bar-fill" style={{ width: '0%' }}/>;
|
||||
const uploadElem = <div class="eeprom-widget-file">
|
||||
<div class="eeprom-widget-file-info">
|
||||
{uploadElemName}
|
||||
{uploadElemProgressText}
|
||||
</div>
|
||||
<div class="eeprom-widget-file-bar">
|
||||
{uploadElemProgressBarValue}
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
if(eepromHistory.children.length > 0)
|
||||
$ib(eepromHistory.firstChild, uploadElem);
|
||||
else
|
||||
eepromHistory.appendChild(uploadElem);
|
||||
if(eepromHistory.children.length > 0)
|
||||
$ib(eepromHistory.firstChild, uploadElem);
|
||||
else
|
||||
eepromHistory.appendChild(uploadElem);
|
||||
|
||||
const explodeUploadElem = () => $r(uploadElem);
|
||||
const uploadTask = eepromClient.create(file);
|
||||
const explodeUploadElem = () => $r(uploadElem);
|
||||
const uploadTask = eepromClient.create(file);
|
||||
|
||||
uploadTask.onProgress(prog => {
|
||||
uploadElemProgressBarValue.style.width = `${Math.ceil(prog.progress * 100)}%`;
|
||||
uploadElemProgressText.textContent = `${prog.progress.toLocaleString(undefined, { style: 'percent' })} (${prog.total - prog.loaded} bytes remaining)`;
|
||||
});
|
||||
uploadTask.onProgress(prog => {
|
||||
uploadElemProgressBarValue.style.width = `${Math.ceil(prog.progress * 100)}%`;
|
||||
uploadElemProgressText.textContent = `${prog.progress.toLocaleString(undefined, { style: 'percent' })} (${prog.total - prog.loaded} bytes remaining)`;
|
||||
});
|
||||
|
||||
try {
|
||||
const fileInfo = await uploadTask.start();
|
||||
try {
|
||||
const fileInfo = await uploadTask.start();
|
||||
|
||||
uploadElem.classList.add('eeprom-widget-file-done');
|
||||
uploadElemName.href = fileInfo.url;
|
||||
uploadElemProgressText.textContent = '';
|
||||
uploadElem.classList.add('eeprom-widget-file-done');
|
||||
uploadElemName.href = fileInfo.url;
|
||||
uploadElemProgressText.textContent = '';
|
||||
|
||||
const insertTheLinkIntoTheBoxEx2 = () => {
|
||||
const parserMode = parseInt(parserElem.value);
|
||||
let insertText = location.protocol + fileInfo.url;
|
||||
const insertTheLinkIntoTheBoxEx2 = () => {
|
||||
const parserMode = parseInt(parserElem.value);
|
||||
let insertText = location.protocol + fileInfo.url;
|
||||
|
||||
if(parserMode == 1) { // bbcode
|
||||
if(fileInfo.isImage())
|
||||
insertText = `[img]${fileInfo.url}[/img]`;
|
||||
else if(fileInfo.isAudio())
|
||||
insertText = `[audio]${fileInfo.url}[/audio]`;
|
||||
else if(fileInfo.isVideo())
|
||||
insertText = `[video]${fileInfo.url}[/video]`;
|
||||
} else if(parserMode == 2) { // markdown
|
||||
if(fileInfo.isMedia())
|
||||
insertText = ``;
|
||||
}
|
||||
|
||||
$insertTags(textElem, insertText, '');
|
||||
textElem.value = textElem.value.trim();
|
||||
};
|
||||
|
||||
uploadElemProgressText.appendChild(<a href="javascript:void(0)" onclick={() => insertTheLinkIntoTheBoxEx2()}>Insert</a>);
|
||||
uploadElemProgressText.appendChild($t(' '));
|
||||
uploadElemProgressText.appendChild(<a href="javascript:void(0)" onclick={() => {
|
||||
eepromClient.delete(fileInfo)
|
||||
.then(() => explodeUploadElem())
|
||||
.catch(ex => {
|
||||
console.error(ex);
|
||||
MszShowMessageBox(ex, 'Upload Error');
|
||||
});
|
||||
}}>Delete</a>);
|
||||
|
||||
insertTheLinkIntoTheBoxEx2();
|
||||
} catch(ex) {
|
||||
let errorText = 'Upload aborted.';
|
||||
|
||||
if(!ex.aborted) {
|
||||
console.error(ex);
|
||||
errorText = ex.toString();
|
||||
}
|
||||
|
||||
uploadElem.classList.add('eeprom-widget-file-fail');
|
||||
uploadElemProgressText.textContent = errorText;
|
||||
await MszShowMessageBox(errorText, 'Upload Error');
|
||||
if(parserMode == 1) { // bbcode
|
||||
if(fileInfo.isImage())
|
||||
insertText = `[img]${fileInfo.url}[/img]`;
|
||||
else if(fileInfo.isAudio())
|
||||
insertText = `[audio]${fileInfo.url}[/audio]`;
|
||||
else if(fileInfo.isVideo())
|
||||
insertText = `[video]${fileInfo.url}[/video]`;
|
||||
} else if(parserMode == 2) { // markdown
|
||||
if(fileInfo.isMedia())
|
||||
insertText = ``;
|
||||
}
|
||||
|
||||
$insertTags(textElem, insertText, '');
|
||||
textElem.value = textElem.value.trim();
|
||||
};
|
||||
|
||||
const eepromFormInput = <input type="file" multiple={true} class="eeprom-widget-form-input"
|
||||
onchange={() => {
|
||||
const files = eepromFormInput.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
eepromFormInput.value = '';
|
||||
}}/>;
|
||||
uploadElemProgressText.appendChild(<a href="javascript:void(0)" onclick={() => insertTheLinkIntoTheBoxEx2()}>Insert</a>);
|
||||
uploadElemProgressText.appendChild($t(' '));
|
||||
uploadElemProgressText.appendChild(<a href="javascript:void(0)" onclick={() => {
|
||||
eepromClient.delete(fileInfo)
|
||||
.then(() => explodeUploadElem())
|
||||
.catch(ex => {
|
||||
console.error(ex);
|
||||
MszShowMessageBox(ex, 'Upload Error');
|
||||
});
|
||||
}}>Delete</a>);
|
||||
|
||||
const eepromForm = <label class="eeprom-widget-form">
|
||||
{eepromFormInput}
|
||||
<div class="eeprom-widget-form-text">
|
||||
Select Files...
|
||||
</div>
|
||||
</label>;
|
||||
insertTheLinkIntoTheBoxEx2();
|
||||
} catch(ex) {
|
||||
let errorText = 'Upload aborted.';
|
||||
|
||||
const eepromWidget = <div class="eeprom-widget">
|
||||
{eepromForm}
|
||||
<div class="eeprom-widget-history">
|
||||
{eepromHistory}
|
||||
</div>
|
||||
</div>;
|
||||
if(!ex.aborted) {
|
||||
console.error(ex);
|
||||
errorText = ex.toString();
|
||||
}
|
||||
|
||||
form.appendChild(eepromWidget);
|
||||
uploadElem.classList.add('eeprom-widget-file-fail');
|
||||
uploadElemProgressText.textContent = errorText;
|
||||
await MszShowMessageBox(errorText, 'Upload Error');
|
||||
}
|
||||
};
|
||||
|
||||
textElem.addEventListener('paste', ev => {
|
||||
if(ev.clipboardData && ev.clipboardData.files.length > 0) {
|
||||
ev.preventDefault();
|
||||
const eepromFormInput = <input type="file" multiple={true} class="eeprom-widget-form-input"
|
||||
onchange={() => {
|
||||
const files = eepromFormInput.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
eepromFormInput.value = '';
|
||||
}}/>;
|
||||
|
||||
const files = ev.clipboardData.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
const eepromForm = <label class="eeprom-widget-form">
|
||||
{eepromFormInput}
|
||||
<div class="eeprom-widget-form-text">
|
||||
Select Files...
|
||||
</div>
|
||||
</label>;
|
||||
|
||||
document.body.addEventListener('dragenter', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragover', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragleave', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('drop', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const eepromWidget = <div class="eeprom-widget">
|
||||
{eepromForm}
|
||||
<div class="eeprom-widget-history">
|
||||
{eepromHistory}
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
if(ev.dataTransfer && ev.dataTransfer.files.length > 0) {
|
||||
const files = ev.dataTransfer.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
});
|
||||
form.appendChild(eepromWidget);
|
||||
|
||||
textElem.addEventListener('paste', ev => {
|
||||
if(ev.clipboardData && ev.clipboardData.files.length > 0) {
|
||||
ev.preventDefault();
|
||||
|
||||
const files = ev.clipboardData.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener('dragenter', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragover', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragleave', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('drop', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
if(ev.dataTransfer && ev.dataTransfer.files.length > 0) {
|
||||
const files = ev.dataTransfer.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
|
||||
// hack: don't prompt user when hitting submit, really need to make this not stupid.
|
||||
buttonsElem.firstChild.addEventListener('click', () => MszForumEditorAllowClose = true);
|
||||
|
|
|
|||
|
|
@ -64,77 +64,73 @@ const MszMessagesReply = function(element) {
|
|||
|
||||
// this implementation is godawful but it'll do for now lol
|
||||
// need to make it easier to share the forum's implementation
|
||||
MszEEPROM.init()
|
||||
.catch(() => console.error('Failed to initialise EEPROM'))
|
||||
.then(() => {
|
||||
const eepromClient = new EEPROM(peepApp, peepPath);
|
||||
const eepromHandleFileUpload = async file => {
|
||||
const uploadTask = eepromClient.create(file);
|
||||
const eepromClient = new MszEEPROM(peepApp, peepPath);
|
||||
const eepromHandleFileUpload = async file => {
|
||||
const uploadTask = eepromClient.create(file);
|
||||
|
||||
try {
|
||||
const fileInfo = await uploadTask.start();
|
||||
const parserMode = parseInt(parserSelect.value);
|
||||
let insertText = location.protocol + fileInfo.url;
|
||||
try {
|
||||
const fileInfo = await uploadTask.start();
|
||||
const parserMode = parseInt(parserSelect.value);
|
||||
let insertText = location.protocol + fileInfo.url;
|
||||
|
||||
if(parserMode == 1) { // bbcode
|
||||
if(fileInfo.isImage())
|
||||
insertText = `[img]${fileInfo.url}[/img]`;
|
||||
else if(fileInfo.isAudio())
|
||||
insertText = `[audio]${fileInfo.url}[/audio]`;
|
||||
else if(fileInfo.isVideo())
|
||||
insertText = `[video]${fileInfo.url}[/video]`;
|
||||
} else if(parserMode == 2) { // markdown
|
||||
if(fileInfo.isMedia())
|
||||
insertText = ``;
|
||||
}
|
||||
if(parserMode == 1) { // bbcode
|
||||
if(fileInfo.isImage())
|
||||
insertText = `[img]${fileInfo.url}[/img]`;
|
||||
else if(fileInfo.isAudio())
|
||||
insertText = `[audio]${fileInfo.url}[/audio]`;
|
||||
else if(fileInfo.isVideo())
|
||||
insertText = `[video]${fileInfo.url}[/video]`;
|
||||
} else if(parserMode == 2) { // markdown
|
||||
if(fileInfo.isMedia())
|
||||
insertText = ``;
|
||||
}
|
||||
|
||||
$insertTags(bodyElem, insertText, '');
|
||||
bodyElem.value = bodyElem.value.trim();
|
||||
} catch(ex) {
|
||||
let errorText = 'Upload aborted.';
|
||||
$insertTags(bodyElem, insertText, '');
|
||||
bodyElem.value = bodyElem.value.trim();
|
||||
} catch(ex) {
|
||||
let errorText = 'Upload aborted.';
|
||||
|
||||
if(!ex.aborted) {
|
||||
console.error(ex);
|
||||
errorText = ex.toString();
|
||||
}
|
||||
if(!ex.aborted) {
|
||||
console.error(ex);
|
||||
errorText = ex.toString();
|
||||
}
|
||||
|
||||
await MszShowMessageBox(errorText, 'Upload Error');
|
||||
}
|
||||
};
|
||||
await MszShowMessageBox(errorText, 'Upload Error');
|
||||
}
|
||||
};
|
||||
|
||||
bodyElem.addEventListener('paste', ev => {
|
||||
if(ev.clipboardData && ev.clipboardData.files.length > 0) {
|
||||
ev.preventDefault();
|
||||
bodyElem.addEventListener('paste', ev => {
|
||||
if(ev.clipboardData && ev.clipboardData.files.length > 0) {
|
||||
ev.preventDefault();
|
||||
|
||||
const files = ev.clipboardData.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
const files = ev.clipboardData.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener('dragenter', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragover', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragleave', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('drop', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
document.body.addEventListener('dragenter', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragover', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('dragleave', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
document.body.addEventListener('drop', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
if(ev.dataTransfer && ev.dataTransfer.files.length > 0) {
|
||||
const files = ev.dataTransfer.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
});
|
||||
if(ev.dataTransfer && ev.dataTransfer.files.length > 0) {
|
||||
const files = ev.dataTransfer.files;
|
||||
for(const file of files)
|
||||
eepromHandleFileUpload(file);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
getElement: () => element,
|
||||
|
|
|
|||
Reference in a new issue