").html(widgetHtml);
- $f.find(".contented-extratext").text(extraText);
-
- // Tab buttons
+ $f.find(".contented-upload-if").removeClass("contented-active");
+ $f.find(".contented-if-" + type).addClass("contented-active");
- 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]);
- });
-
- // 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');
+ if (type == "drag") {
+ enablePasteHandler();
} 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!");
- }
- });
-
}
- // .
+ 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]);
+ });
+
+ // 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 afterScriptsLoaded = function() {
+
// Update fields in global variable
contented.init = initArea;
contented.loaded = true;
@@ -449,16 +388,78 @@ var contented = (function() {
initArea(contented.__preInit[i][0], contented.__preInit[i][1], contented.__preInit[i][2]);
}
};
+
+ var init = function() {
+
+ installPolyfills();
+
+ var currentScriptPath = getCurrentScriptPath();
+ var baseURL = currentScriptPath.replace('sdk.js', '');
- // Load scripts
- var needScripts = [];
- if (typeof jQuery === "undefined") {
- needScripts.push(contented.baseURL + "jquery-1.12.4.min.js");
- }
- if (typeof DrawingBoard === "undefined") {
- needScripts.push(contented.baseURL + "drawingboard-0.4.6.min.js");
- }
-
- loadScripts(needScripts, afterScriptsLoaded);
+ 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) {
+ contented.__preInit.push([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"
+ }
+ };
+ // Load scripts
+ var needScripts = [];
+ if (typeof jQuery === "undefined") {
+ needScripts.push(contented.baseURL + "jquery-1.12.4.min.js");
+ }
+ if (typeof DrawingBoard === "undefined") {
+ needScripts.push(contented.baseURL + "drawingboard-0.4.6.min.js");
+ }
+
+ loadScripts(needScripts, afterScriptsLoaded);
+ };
+
+ init();
+
})()