code.ivysaur.me/contented
1
0
Fork 0
Code Issues 8 Pull Requests Releases 5 Wiki Activity

sdk: replace all the early-load logic with promises

Browse Source
This commit is contained in:
mappu 2023-05-17 18:09:28 +12:00
parent f13618fef1
commit ad56309cb0
1 changed files with 306 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

626
static/sdk.js
View File

@ -12,29 +12,16 @@
return currentScript.replace(currentScriptFile, ''); return currentScript.replace(currentScriptFile, '');
}; };
var loadScript = function(url, onLoad) { var loadScript = function(url) {
var script = document.createElement('script'); return new Promise(function(resolve, reject) {
script.onload = onLoad; var script = document.createElement('script');
script.src = url; script.onload = resolve;
document.head.appendChild(script); script.onerror = reject;
script.src = url;
document.head.appendChild(script);
});
}; };
var loadScripts = function(urls, onLoad) {
// load sequentially
var i = 0;
var loadNext = function() {
if (i === urls.length) {
onLoad();
return;
}
var url = urls[i];
i += 1;
loadScript(url, loadNext);
};
loadNext();
};
var formatBytes = function(bytes) { var formatBytes = function(bytes) {
var k = 1024, m = (1024*1024), g = (1024*1024*1024); var k = 1024, m = (1024*1024), g = (1024*1024*1024);
@ -221,7 +208,7 @@
</div> </div>
`; `;
var initArea = function (elementSelector, onUploaded, onClose) { var initArea = function (aboutInfo, elementSelector, onUploaded, onClose) {
onUploaded = onUploaded || function () { }; onUploaded = onUploaded || function () { };
onClose = onClose || function () { }; onClose = onClose || function () { };
@ -233,303 +220,282 @@
// <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" /> // <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" />
// Create a new div for ourselves on top of the existing area // Create a new div for ourselves on top of the existing area
$.get(contented.baseURL + "about", function (ret) {
var extraText = "";
if (ret.MaxUploadBytes > 0) {
extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
}
var extraText = "";
if (aboutInfo.MaxUploadBytes > 0) {
extraText = " (max " + formatBytes(aboutInfo.MaxUploadBytes) + ")";
}
var $f = $("<div>").html(widgetHtml); var $f = $("<div>").html(widgetHtml);
$f.find(".contented-extratext").text(extraText); $f.find(".contented-extratext").text(extraText);
// Tab buttons // Tab buttons
var hasSetupDrawingBoardYet = false; var hasSetupDrawingBoardYet = false;
var setType = function (type) { var setType = function (type) {
$f.find(".contented-upload-type").removeClass("contented-upload-type-active"); $f.find(".contented-upload-type").removeClass("contented-upload-type-active");
$f.find(".contented-upload-type[data-upload-type=" + type + "]").addClass("contented-upload-type-active"); $f.find(".contented-upload-type[data-upload-type=" + type + "]").addClass("contented-upload-type-active");
$f.find(".contented-upload-if").removeClass("contented-active"); $f.find(".contented-upload-if").removeClass("contented-active");
$f.find(".contented-if-" + type).addClass("contented-active"); $f.find(".contented-if-" + type).addClass("contented-active");
if (type == "drag") { if (type == "drag") {
enablePasteHandler(); enablePasteHandler();
} else { } else {
disablePasteHandler(); disablePasteHandler();
} }
if (type == "drawing" && !hasSetupDrawingBoardYet) { if (type == "drawing" && !hasSetupDrawingBoardYet) {
setupDrawingBoard(); setupDrawingBoard();
hasSetupDrawingBoardYet = true; hasSetupDrawingBoardYet = true;
} }
}; };
$f.find(".contented-upload-type").click(function () {
setType($(this).attr('data-upload-type'));
});
// Widget positioning
var $element = $(element);
var offset = $element.offset();
$f.css({
'position': 'absolute',
'left': offset.left + "px",
'top': offset.top + "px",
'width': $element.width() + "px",
'min-width': $element.width() + "px",
'max-width': $element.width() + "px",
'height': $element.height() + "px",
'min-height': $element.height() + "px",
'max-height': $element.height() + "px"
});
// Drag and drop support
$f.find('.contented').on('dragover dragenter', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('is-dragging');
});
$f.find('.contented').on('dragleave dragend', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('is-dragging');
});
$f.find('.contented').on('drop', function (e) {
e.preventDefault();
e.stopPropagation();
handleUploadFrom(e.originalEvent.dataTransfer.files);
});
$f.find('.contented-file-upload').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
handleUploadFrom($(".contented-file-selector")[0].files);
});
// Pastebin
$f.find('.contented-paste-upload').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var blob = new Blob([$(".contented-if-paste textarea").val()], {type : 'text/plain'});
handleUploadFrom([blob]);
});
// Ctrl+V uploads
var pasteHandler = function(e) {
e.preventDefault();
e.stopPropagation();
var items = (e.clipboardData || e.originalEvent.clipboardData).items;
var items_length = items.length;
var blobs = [];
var handled = 0;
var haveHandled = function() {
handled += 1;
if (handled == items_length) {
if (blobs.length > 0) {
handleUploadFrom( blobs );
} else {
// alert("Pasted 0 files");
}
}
};
for (var i = 0; i < items.length; ++i) {
var item = items[i];
var mimeType = item.type;
if (item.kind === 'file') {
blobs.push(item.getAsFile());
haveHandled();
} else if (item.kind === 'string') {
item.getAsString(function(s) {
blobs.push( new Blob([s], {type : mimeType}) );
haveHandled();
});
} else {
// file|string are the only supported types in
// all browsers at the time of writing
// Ignore future possibilities
haveHandled();
}
}
};
var enablePasteHandler = function() {
document.addEventListener('paste', pasteHandler);
};
var disablePasteHandler = function() {
document.removeEventListener('paste', pasteHandler);
};
// Embed in DOM, load default area
$("body").append($f);
if (!contented.supportsDrop()) {
setType('file');
} else {
setType('drag');
}
// Drawing board
var setupDrawingBoard = function() {
$("head").append(
'<link rel="stylesheet" type="text/css" href="' + contented.baseURL + 'drawingboard-0.4.6.min.css">'
);
var db_id = "contented-drawing-area-" + guid();
var $db = $("<div>").attr('id', db_id);
DrawingBoard.Control.ContentedUpload = DrawingBoard.Control.extend({
name: 'upload',
initialize: function() {
var $el = this.$el;
$el.append('<button class="contented-drawingboard-upload">Upload</button>');
$el.on('click', '.contented-drawingboard-upload', $.proxy(function(e) {
e.preventDefault();
e.stopPropagation();
$el.prop('disabled', true);
$el.text('Saving...');
$db.find("canvas")[0].toBlob(function(theBlob) {
handleUploadFrom([ theBlob ]);
});
}, this));
}
});
$db.css({
//'width': $f.find(".contented-content-area").width(),
'height': $f.find(".contented-content-area").height(),
'overflow': 'hidden'
});
$f.find(".contented-drawing-area").append($db);
var db = new DrawingBoard.Board(db_id, {
'controls': [
'Color',
'Size',
'DrawingMode',
'Navigation',
'ContentedUpload'
],
'controlsPosition': 'center',
'enlargeYourContainer': false,
'webStorage': false,
'droppable': false // don't mess with existing drop support
});
};
// Close button
var ourClose = function () {
$f.remove(); // remove from dom
disablePasteHandler();
onClose(); // upstream close
};
$f.find(".contented-close").click(function () {
ourClose();
})
// Progress bar
var setProgressCaption = function(message) {
$f.find(".contented-if-progress label").text(message);
};
var setProgressPercentage = function(frc) {
$f.find(".contented-progress-element").css('width', (frc * 100) + "%");
};
// Common upload handler
var handleUploadFrom = function(files) {
setProgressCaption("Uploading, please wait...");
setProgressPercentage(0);
setType("progress");
$f.find(".contented-upload-type-selector").hide();
$f.find(".contented").removeClass('is-dragging');
// Ajax uploader
var ajaxData = new FormData();
for (var i = 0; i < files.length; ++i) {
ajaxData.append("f", files[i]);
}
// ajax request
$.ajax({
url: contented.baseURL + "upload",
type: "POST",
data: ajaxData,
dataType: 'json', // response type
cache: false,
contentType: false,
processData: false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener(
'progress',
function(ev) {
if (ev.lengthComputable) {
setProgressCaption("Uploading (" + formatBytes(ev.loaded) + " / " + formatBytes(ev.total) + ")...");
setProgressPercentage(ev.total == 0 ? 0 : ev.loaded / ev.total);
}
},
false
);
return xhr;
},
complete: function () {
setProgressPercentage(1);
},
success: function (data) {
setProgressCaption("Upload completed successfully.");
onUploaded(data);
ourClose();
},
error: function () {
setProgressCaption("Upload failed!");
}
});
}
// .
});
$f.find(".contented-upload-type").click(function () {
setType($(this).attr('data-upload-type'));
}); });
}; // Widget positioning
var afterScriptsLoaded = function() { var $element = $(element);
var offset = $element.offset();
// Update fields in global variable
contented.init = initArea; $f.css({
contented.loaded = true; 'position': 'absolute',
'left': offset.left + "px",
'top': offset.top + "px",
'width': $element.width() + "px",
'min-width': $element.width() + "px",
'max-width': $element.width() + "px",
'height': $element.height() + "px",
'min-height': $element.height() + "px",
'max-height': $element.height() + "px"
});
// Drag and drop support
// Call initArea for all pre-initialised elements $f.find('.contented').on('dragover dragenter', function (e) {
for (var i = 0; i < contented.__preInit.length; ++i) { e.preventDefault();
initArea(contented.__preInit[i][0], contented.__preInit[i][1], contented.__preInit[i][2]); e.stopPropagation();
$(this).addClass('is-dragging');
});
$f.find('.contented').on('dragleave dragend', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('is-dragging');
});
$f.find('.contented').on('drop', function (e) {
e.preventDefault();
e.stopPropagation();
handleUploadFrom(e.originalEvent.dataTransfer.files);
});
$f.find('.contented-file-upload').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
handleUploadFrom($(".contented-file-selector")[0].files);
});
// Pastebin
$f.find('.contented-paste-upload').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var blob = new Blob([$(".contented-if-paste textarea").val()], {type : 'text/plain'});
handleUploadFrom([blob]);
});
// Ctrl+V uploads
var pasteHandler = function(e) {
e.preventDefault();
e.stopPropagation();
var items = (e.clipboardData || e.originalEvent.clipboardData).items;
var items_length = items.length;
var blobs = [];
var handled = 0;
var haveHandled = function() {
handled += 1;
if (handled == items_length) {
if (blobs.length > 0) {
handleUploadFrom( blobs );
} else {
// alert("Pasted 0 files");
}
}
};
for (var i = 0; i < items.length; ++i) {
var item = items[i];
var mimeType = item.type;
if (item.kind === 'file') {
blobs.push(item.getAsFile());
haveHandled();
} else if (item.kind === 'string') {
item.getAsString(function(s) {
blobs.push( new Blob([s], {type : mimeType}) );
haveHandled();
});
} else {
// file|string are the only supported types in
// all browsers at the time of writing
// Ignore future possibilities
haveHandled();
}
}
};
var enablePasteHandler = function() {
document.addEventListener('paste', pasteHandler);
};
var disablePasteHandler = function() {
document.removeEventListener('paste', pasteHandler);
};
// Embed in DOM, load default area
$("body").append($f);
if (!contented.supportsDrop()) {
setType('file');
} else {
setType('drag');
} }
// Drawing board
var setupDrawingBoard = function() {
$("head").append(
'<link rel="stylesheet" type="text/css" href="' + contented.baseURL + 'drawingboard-0.4.6.min.css">'
);
var db_id = "contented-drawing-area-" + guid();
var $db = $("<div>").attr('id', db_id);
DrawingBoard.Control.ContentedUpload = DrawingBoard.Control.extend({
name: 'upload',
initialize: function() {
var $el = this.$el;
$el.append('<button class="contented-drawingboard-upload">Upload</button>');
$el.on('click', '.contented-drawingboard-upload', $.proxy(function(e) {
e.preventDefault();
e.stopPropagation();
$el.prop('disabled', true);
$el.text('Saving...');
$db.find("canvas")[0].toBlob(function(theBlob) {
handleUploadFrom([ theBlob ]);
});
}, this));
}
});
$db.css({
//'width': $f.find(".contented-content-area").width(),
'height': $f.find(".contented-content-area").height(),
'overflow': 'hidden'
});
$f.find(".contented-drawing-area").append($db);
var db = new DrawingBoard.Board(db_id, {
'controls': [
'Color',
'Size',
'DrawingMode',
'Navigation',
'ContentedUpload'
],
'controlsPosition': 'center',
'enlargeYourContainer': false,
'webStorage': false,
'droppable': false // don't mess with existing drop support
});
};
// Close button
var ourClose = function () {
$f.remove(); // remove from dom
disablePasteHandler();
onClose(); // upstream close
};
$f.find(".contented-close").click(function () {
ourClose();
})
// Progress bar
var setProgressCaption = function(message) {
$f.find(".contented-if-progress label").text(message);
};
var setProgressPercentage = function(frc) {
$f.find(".contented-progress-element").css('width', (frc * 100) + "%");
};
// Common upload handler
var handleUploadFrom = function(files) {
setProgressCaption("Uploading, please wait...");
setProgressPercentage(0);
setType("progress");
$f.find(".contented-upload-type-selector").hide();
$f.find(".contented").removeClass('is-dragging');
// Ajax uploader
var ajaxData = new FormData();
for (var i = 0; i < files.length; ++i) {
ajaxData.append("f", files[i]);
}
// ajax request
$.ajax({
url: contented.baseURL + "upload",
type: "POST",
data: ajaxData,
dataType: 'json', // response type
cache: false,
contentType: false,
processData: false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener(
'progress',
function(ev) {
if (ev.lengthComputable) {
setProgressCaption("Uploading (" + formatBytes(ev.loaded) + " / " + formatBytes(ev.total) + ")...");
setProgressPercentage(ev.total == 0 ? 0 : ev.loaded / ev.total);
}
},
false
);
return xhr;
},
complete: function () {
setProgressPercentage(1);
},
success: function (data) {
setProgressCaption("Upload completed successfully.");
onUploaded(data);
ourClose();
},
error: function () {
setProgressCaption("Upload failed!");
}
});
}
}; };
var init = function() { var init = function() {
@ -537,6 +503,34 @@
var currentScriptPath = getCurrentScriptPath(); var currentScriptPath = getCurrentScriptPath();
var baseURL = currentScriptPath.replace('sdk.js', ''); var baseURL = currentScriptPath.replace('sdk.js', '');
// Kick off background promises
var loader = new Promise(function(resolve, reject) {
if (typeof jQuery === "undefined") {
loadScript(contented.baseURL + "jquery-3.7.0.min.js").then(resolve);
} else {
resolve();
}
}).then(function() { return new Promise(function(resolve, reject) {
if (typeof DrawingBoard === "undefined") {
loadScript(contented.baseURL + "drawingboard-0.4.6.min.js").then(resolve);
} else {
resolve();
}
})}).then(function() { return new Promise(function(resolve, reject) {
$.get(contented.baseURL + "about", function (aboutInfo) {
resolve(aboutInfo);
});
})}).then(function(aboutInfo) {
// Update fields in global variable
window.contented.loaded = true;
return aboutInfo;
});
window.contented = { window.contented = {
"loaded": false, "loaded": false,
@ -552,7 +546,9 @@
* @param Function onClose Called when the widget is being destroyed * @param Function onClose Called when the widget is being destroyed
*/ */
"init": function(elementSelector, onUploaded, onClose) { "init": function(elementSelector, onUploaded, onClose) {
contented.__preInit.push([elementSelector, onUploaded, onClose]); loader.then(function(aboutInfo) {
initArea(aboutInfo, elementSelector, onUploaded, onClose);
});
}, },
/** /**
@ -589,16 +585,6 @@
} }
}; };
// Load scripts
var needScripts = [];
if (typeof jQuery === "undefined") {
needScripts.push(contented.baseURL + "jquery-3.7.0.min.js");
}
if (typeof DrawingBoard === "undefined") {
needScripts.push(contented.baseURL + "drawingboard-0.4.6.min.js");
}
loadScripts(needScripts, afterScriptsLoaded);
}; };
init(); init();