;(function() { "use strict"; var getCurrentScriptPath = function () { // Determine current script path // @ref https://stackoverflow.com/a/26023176 var scripts = document.querySelectorAll('script[src]'); var currentScript = scripts[scripts.length - 1].src; var currentScriptChunks = currentScript.split('/'); var currentScriptFile = currentScriptChunks[currentScriptChunks.length - 1]; return currentScript.replace(currentScriptFile, ''); }; var loadScript = function(url) { return new Promise(function(resolve, reject) { var script = document.createElement('script'); script.onload = resolve; script.onerror = reject; script.src = url; document.head.appendChild(script); }); }; var formatBytes = function(bytes) { var k = 1024, m = (1024*1024), g = (1024*1024*1024); if (bytes < k) { return bytes + " B"; } else if (bytes < m) { return (bytes / k).toFixed(1) + " KiB"; } else if (bytes < g) { return (bytes / m).toFixed(1) + " MiB"; } else { return (bytes / g).toFixed(1) + " GiB"; } }; // @ref https://stackoverflow.com/a/2117523 var guid = function uuidv4() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }; var widgetHtml = `



`; var initArea = function (aboutInfo, elementSelector, onUploaded, onClose) { onUploaded = onUploaded || function () { }; onClose = onClose || function () { }; if ($(elementSelector).length != 1) { return; // should only find one element } var element = $(elementSelector)[0]; // // Create a new div for ourselves on top of the existing area var extraText = ""; if (aboutInfo.MaxUploadBytes > 0) { extraText = " (max " + formatBytes(aboutInfo.MaxUploadBytes) + ")"; } var $f = $("
").html(widgetHtml); $f.find(".contented-extratext").text(extraText); // Tab buttons var hasSetupDrawingBoardYet = false; var setType = function (type) { $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-if").removeClass("contented-active"); $f.find(".contented-if-" + type).addClass("contented-active"); if (type == "drag") { enablePasteHandler(); } else { disablePasteHandler(); } if (type == "drawing" && !hasSetupDrawingBoardYet) { setupDrawingBoard(); 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]); }); // Album $f.find(".contented-album-upload").on("click", function(e) { e.preventDefault(); e.stopPropagation(); var childIDs = $(".contented-album-input").val().split(","); for (var i = 0; i < childIDs.length; ++i) { childIDs[i] = childIDs[i].trim(); // Basic validation - can't really perform full validation here if (childIDs[i].length == 0) { alert("Entry " + (i+1) + " is too short, expected non-zero length"); return; } if (! childIDs[i].match(/^[a-zA-Z0-9]+$/)) { alert("Entry " + (i+1) + " contains unexpected character"); return; } } var blob = new Blob([JSON.stringify(childIDs)], {type : 'contented/album'}); 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( '' ); var db_id = "contented-drawing-area-" + guid(); var $db = $("
").attr('id', db_id); DrawingBoard.Control.ContentedUpload = DrawingBoard.Control.extend({ name: 'upload', initialize: function() { var $el = this.$el; $el.append(''); $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 currentScriptPath = getCurrentScriptPath(); 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 = { "loaded": false, "baseURL": baseURL, "__preInit": [], /** * initArea shows the contented upload widget over the top of a target DOM element. * * @param any element Drop target (string selector / DOMElement / jQuery) * @param Function onUploaded Called with an array of upload IDs * @param Function onClose Called when the widget is being destroyed */ "init": function(elementSelector, onUploaded, onClose) { loader.then(function(aboutInfo) { initArea(aboutInfo, elementSelector, onUploaded, onClose); }); }, /** * supportsDrop returns whether drag-and-drop is supported by this browser. * * @return bool */ "supportsDrop": function() { return ('ondrop' in window && 'FormData' in window && 'FileReader' in window); }, "getPreviewURL": function(id) { return baseURL + "p/" + encodeURIComponent(id); }, "getMultiPreviewURL": function(items) { return baseURL + "p/" + encodeURIComponent(items.join("-")); }, "getDownloadURL": function(id) { return baseURL + "get/" + encodeURIComponent(id); }, "getInfoJSONURL": function(id) { return baseURL + "info/" + encodeURIComponent(id); }, "getThumbnailURL": function(thumbnailType, id) { return baseURL + "thumb/" + encodeURIComponent(thumbnailType) + "/" + encodeURIComponent(id); }, "thumbnail": { "small_square": "s", "medium_square": "b", "medium": "t", "large": "m", "xlarge": "l", "xxlarge": "h" } }; }; init(); })()