kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

synchronize interop script changes with .NET MAUI

Browse Source
This commit is contained in:
sbwalker 2025-02-07 07:52:43 -05:00
parent 05a767c7be
commit f30f1e5c1f
1 changed files with 131 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
Oqtane.Maui/wwwroot/js/interop.js
View File

@ -120,13 +120,22 @@ Oqtane.Interop = {
this.includeLink(links[i].id, links[i].rel, links[i].href, links[i].type, links[i].integrity, links[i].crossorigin, links[i].insertbefore); this.includeLink(links[i].id, links[i].rel, links[i].href, links[i].type, links[i].integrity, links[i].crossorigin, links[i].insertbefore);
} }
}, },
includeScript: function (id, src, integrity, crossorigin, type, content, location) { includeScript: function (id, src, integrity, crossorigin, type, content, location, dataAttributes) {
var script; var script;
if (src !== "") { if (src !== "") {
script = document.querySelector("script[src=\"" + CSS.escape(src) + "\"]"); script = document.querySelector("script[src=\"" + CSS.escape(src) + "\"]");
} }
else { else {
if (id !== "") {
script = document.getElementById(id); script = document.getElementById(id);
} else {
const scripts = document.querySelectorAll("script:not([src])");
for (let i = 0; i < scripts.length; i++) {
if (scripts[i].textContent.includes(content)) {
script = scripts[i];
}
}
}
} }
if (script !== null) { if (script !== null) {
script.remove(); script.remove();
@ -152,37 +161,36 @@ Oqtane.Interop = {
else { else {
script.innerHTML = content; script.innerHTML = content;
} }
script.async = false; if (dataAttributes !== null) {
this.addScript(script, location) for (var key in dataAttributes) {
.then(() => { script.setAttribute(key, dataAttributes[key]);
}
}
try {
this.addScript(script, location);
} catch (error) {
if (src !== "") { if (src !== "") {
console.log(src + ' loaded'); console.error("Failed to load external script: ${src}", error);
} else {
console.error("Failed to load inline script: ${content}", error);
} }
else {
console.log(id + ' loaded');
} }
})
.catch(() => {
if (src !== "") {
console.error(src + ' failed');
}
else {
console.error(id + ' failed');
}
});
} }
}, },
addScript: function (script, location) { addScript: function (script, location) {
return new Promise((resolve, reject) => {
script.async = false;
script.defer = false;
script.onload = () => resolve();
script.onerror = (error) => reject(error);
if (location === 'head') { if (location === 'head') {
document.head.appendChild(script); document.head.appendChild(script);
} } else {
if (location === 'body') {
document.body.appendChild(script); document.body.appendChild(script);
} }
return new Promise((res, rej) => {
script.onload = res();
script.onerror = rej();
}); });
}, },
includeScripts: async function (scripts) { includeScripts: async function (scripts) {
@ -222,10 +230,10 @@ Oqtane.Interop = {
if (scripts[s].crossorigin !== '') { if (scripts[s].crossorigin !== '') {
element.crossOrigin = scripts[s].crossorigin; element.crossOrigin = scripts[s].crossorigin;
} }
if (scripts[s].es6module === true) { if (scripts[s].type !== '') {
element.type = "module"; element.type = scripts[s].type;
} }
if (typeof scripts[s].dataAttributes !== "undefined" && scripts[s].dataAttributes !== null) { if (scripts[s].dataAttributes !== null) {
for (var key in scripts[s].dataAttributes) { for (var key in scripts[s].dataAttributes) {
element.setAttribute(key, scripts[s].dataAttributes[key]); element.setAttribute(key, scripts[s].dataAttributes[key]);
} }
@ -300,97 +308,107 @@ Oqtane.Interop = {
} }
return files; return files;
}, },
uploadFiles: function (posturl, folder, id, antiforgerytoken, jwt) { uploadFiles: async function (posturl, folder, id, antiforgerytoken, jwt, chunksize) {
var success = true;
var fileinput = document.getElementById('FileInput_' + id); var fileinput = document.getElementById('FileInput_' + id);
var progressinfo = document.getElementById('ProgressInfo_' + id); var progressinfo = document.getElementById('ProgressInfo_' + id);
var progressbar = document.getElementById('ProgressBar_' + id); var progressbar = document.getElementById('ProgressBar_' + id);
var totalSize = 0;
for (var i = 0; i < fileinput.files.length; i++) {
totalSize += fileinput.files[i].size;
}
let uploadSize = 0;
if (!chunksize || chunksize < 1) {
chunksize = 1; // 1 MB default
}
if (progressinfo !== null && progressbar !== null) { if (progressinfo !== null && progressbar !== null) {
progressinfo.setAttribute("style", "display: inline;"); progressinfo.setAttribute('style', 'display: inline;');
progressinfo.innerHTML = ''; if (fileinput.files.length > 1) {
progressbar.setAttribute("style", "width: 100%; display: inline;"); progressinfo.innerHTML = fileinput.files[0].name + ', ...';
}
else {
progressinfo.innerHTML = fileinput.files[0].name;
}
progressbar.setAttribute('style', 'width: 100%; display: inline;');
progressbar.value = 0; progressbar.value = 0;
} }
var files = fileinput.files; const uploadFile = (file) => {
var totalSize = 0; const chunkSize = chunksize * (1024 * 1024);
for (var i = 0; i < files.length; i++) { const totalParts = Math.ceil(file.size / chunkSize);
totalSize = totalSize + files[i].size; let partCount = 0;
}
var maxChunkSizeMB = 1; const uploadPart = () => {
var bufferChunkSize = maxChunkSizeMB * (1024 * 1024); const start = partCount * chunkSize;
var uploadedSize = 0; const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
for (var i = 0; i < files.length; i++) { return new Promise((resolve, reject) => {
var fileChunk = []; let formdata = new FormData();
var file = files[i]; formdata.append('__RequestVerificationToken', antiforgerytoken);
var fileStreamPos = 0; formdata.append('folder', folder);
var endPos = bufferChunkSize; formdata.append('formfile', chunk, file.name);
while (fileStreamPos < file.size) { var credentials = 'same-origin';
fileChunk.push(file.slice(fileStreamPos, endPos)); var headers = new Headers();
fileStreamPos = endPos; headers.append('PartCount', partCount + 1);
endPos = fileStreamPos + bufferChunkSize; headers.append('TotalParts', totalParts);
}
var totalParts = fileChunk.length;
var partCount = 0;
while (chunk = fileChunk.shift()) {
partCount++;
var fileName = file.name + ".part_" + partCount.toString().padStart(3, '0') + "_" + totalParts.toString().padStart(3, '0');
var data = new FormData();
data.append('__RequestVerificationToken', antiforgerytoken);
data.append('folder', folder);
data.append('formfile', chunk, fileName);
var request = new XMLHttpRequest();
request.open('POST', posturl, true);
if (jwt !== "") { if (jwt !== "") {
request.setRequestHeader('Authorization', 'Bearer ' + jwt); headers.append('Authorization', 'Bearer ' + jwt);
request.withCredentials = true; credentials = 'include';
} }
request.upload.onloadstart = function (e) {
if (progressinfo !== null && progressbar !== null && progressinfo.innerHTML === '') { return fetch(posturl, {
if (files.length === 1) { method: 'POST',
progressinfo.innerHTML = file.name; headers: headers,
} credentials: credentials,
else { body: formdata
progressinfo.innerHTML = file.name + ", ..."; })
} .then(response => {
} if (!response.ok) {
}; if (progressinfo !== null) {
request.upload.onprogress = function (e) { progressinfo.innerHTML = 'Error: ' + response.statusText;
if (progressinfo !== null && progressbar !== null) { }
var percent = Math.ceil(((uploadedSize + e.loaded) / totalSize) * 100); throw new Error('Failed');
progressbar.value = (percent / 100); }
} return;
}; })
request.upload.onloadend = function (e) { .then(data => {
if (progressinfo !== null && progressbar !== null) { partCount++;
uploadedSize = uploadedSize + e.total; if (progressbar !== null) {
var percent = Math.ceil((uploadedSize / totalSize) * 100); uploadSize += chunk.size;
progressbar.value = (percent / 100); var percent = Math.ceil((uploadSize / totalSize) * 100);
} progressbar.value = (percent / 100);
}; }
request.upload.onerror = function() { if (partCount < totalParts) {
if (progressinfo !== null && progressbar !== null) { uploadPart().then(resolve).catch(reject);
if (files.length === 1) { }
progressinfo.innerHTML = file.name + ' Error: ' + request.statusText; else {
} resolve(data);
else { }
progressinfo.innerHTML = ' Error: ' + request.statusText; })
} .catch(error => {
} reject(error);
}; });
request.send(data); });
};
return uploadPart();
};
try {
for (const file of fileinput.files) {
await uploadFile(file);
}
} catch (error) {
success = false;
} }
if (i === files.length - 1) {
fileinput.value = ''; fileinput.value = '';
} return success;
}
}, },
refreshBrowser: function (verify, wait) { refreshBrowser: function (verify, wait) {
async function attemptReload (verify) { async function attemptReload (verify) {