sdk auto provide libraries, handle preInit calls, add get*URL methods, drawing canvas integration

static/index.html

@@ -58,8 +58,8 @@ contented.init("#surrogate-area", function(items) {
     for (var i = 0; i < items.length; ++i) {
         $table.append($("<tr>").append([
             $("<td>").text(items[i]),
-            $("<td>").html("<a target='_blank' href='/get/" + items[i] + "'>get</a>"),
+            $("<td>").html("<a target='_blank' href='" + contented.getDownloadURL(items[i]) + "'>get</a>"),
-            $("<td>").html("<a target='_blank' href='/info/" + items[i] + "'>info</a>")
+            $("<td>").html("<a target='_blank' href='" + contented.getInfoJSONURL(items[i]) + "'>info</a>"),
         ]))
     }
     $("#surrogate-area").html($table);

static/sdk.js

@@ -1,29 +1,48 @@
 ;
-var contented = (function ($, currentScriptPath) {
+
+//
+
+var contented = (function() {
 	"use strict";
 	
-    var baseURL = currentScriptPath.replace('sdk.js', '');
+	// @ref https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob 
+	if (!HTMLCanvasElement.prototype.toBlob) {
+		Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+			value: function (callback, type, quality) {
 
-    var formatBytes = function(bytes) {
+				var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
-        if (bytes < 1024) {
+					len = binStr.length,
-            return bytes + " B";
+					arr = new Uint8Array(len);
-        } else if (bytes < (1024*1024)) {
+
-            return (bytes / 1024).toFixed(1) + " KiB";
+				for (var i = 0; i < len; i++ ) {
-        } else if (bytes < (1024*1024*1024)) {
+					arr[i] = binStr.charCodeAt(i);
-            return (bytes / (1024*1024)).toFixed(1) + " MiB";
-        } else {
-            return (bytes / (1024*1024*1024)).toFixed(1) + " GiB";
 				}
+
+				callback( new Blob( [arr], {type: type || 'image/png'} ) );
+			}
+		});
+	}
+
+	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 currentScriptPath = getCurrentScriptPath();
-     * supportsDrop returns whether drag-and-drop is supported by this browser.
+	var baseURL = currentScriptPath.replace('sdk.js', '');
-     *
+	
-     * @return bool
+	return {
-     */
+		"loaded": false,
-    var supportsDrop = function () {
+		
-        return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
+		"baseURL": baseURL,
-    }
+		
+		"__preInit": [],
 		
 		/**
 		* initArea shows the contented upload widget over the top of a target DOM element.
@@ -32,6 +51,84 @@ var contented = (function ($, currentScriptPath) {
 		* @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 + "get/" + id; // n.b. there's no better preview URL yet
+		},
+		"getDownloadURL": function(id) {
+			return baseURL + "get/" + id;
+		},
+		"getInfoJSONURL": function(id) {
+			return baseURL + "info/" + id;
+		}
+	};
+	
+})();
+
+;(function() {
+	"use strict";
+	
+	var loadScript = function(url, onLoad) {
+		var script = document.createElement('script');
+		script.onload = onLoad;
+		script.src = url;
+		document.head.appendChild(script);
+	};
+	
+	var loadScripts = function(urls, onLoad) {
+		if (urls.length === 0) {
+			onLoad();
+			return;
+		}
+		
+		var totalLoaded = 0;
+		var cb = function() {
+			totalLoaded += 1;
+			if (totalLoaded == urls.length) {
+				onLoad();
+			}
+		};
+		for (var i = 0; i < urls.length; ++i) {
+			loadScript(urls[i], cb);
+		}
+	};
+		
+    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 afterScriptsLoaded = function() {		
+
 		var initArea = function (elementSelector, onUploaded, onClose) {
 			onUploaded = onUploaded || function () { };
 			onClose = onClose || function () { };
@@ -44,14 +141,14 @@ var contented = (function ($, currentScriptPath) {
 			// <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" /> 
 
 			// Create a new div for ourselves on top of the existing area
-        $.get(baseURL + "about", function (ret) {
+			$.get(contented.baseURL + "about", function (ret) {
 				
 				var extraText = "";
 				if (ret.MaxUploadBytes > 0) {
 					extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
 				}
 
-            $.get(baseURL + "widget.html", function (widgetHtml) {
+				$.get(contented.baseURL + "widget.html", function (widgetHtml) {
 
 					var $f = $("<div>").html(widgetHtml);
 					$f.find(".contented-extratext").text(extraText);
@@ -64,19 +161,25 @@ var contented = (function ($, currentScriptPath) {
 						ourClose();
 					})
 
+					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 == "drawing" && !hasSetupDrawingBoardYet) {
+							setupDrawingBoard();
+							hasSetupDrawingBoardYet = true;
+						}
 					};
 
 					$f.find(".contented-upload-type").click(function () {
 						setType($(this).attr('data-upload-type'));
 					});
 
-                if (!supportsDrop()) {
+					if (!contented.supportsDrop()) {
 						// switch default
 						setType('file');
 					}
@@ -131,6 +234,59 @@ var contented = (function ($, currentScriptPath) {
 
 					$("body").append($f);
 					
+					// Drawing board
+					
+					var setupDrawingBoard = function() {
+						
+						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
+						});
+						
+					};
+
+					// Progress bar
+					
 					var setProgressCaption = function(message) {
 						$f.find(".contented-if-progress label").text(message);
 					};
@@ -155,7 +311,7 @@ var contented = (function ($, currentScriptPath) {
 
 						// ajax request
 						$.ajax({
-                        url: baseURL + "upload",
+							url: contented.baseURL + "upload",
 							type: "POST",
 							data: ajaxData,
 							dataType: 'json', // response type
@@ -197,24 +353,25 @@ var contented = (function ($, currentScriptPath) {
 
 		}
 		
-    //
+		// Update fields in global variable
-    return {
+		contented.init = initArea;
-        'supportsDrop': supportsDrop,
+		contented.loaded = true;
-        'init': initArea
+		
+		// Call initArea for all pre-initialised elements
+		for (var i = 0; i < contented.__preInit.length; ++i) {
+			initArea(contented.__preInit[i][0], contented.__preInit[i][1], contented.__preInit[i][2]);
+		}
 	};
 		
-})(
+	// Load scripts
-    jQuery,
+	var needScripts = [];
-    (function () {
+	if (typeof jQuery === "undefined") {
-        "use strict";
+		needScripts.push("jquery-1.12.4.min.js");
+	}
+	if (typeof DrawingBoard === "undefined") {
+		needScripts.push("drawingboard-0.4.6.min.js");
+	}
 	
-        // Determine current script path
+	loadScripts(needScripts, afterScriptsLoaded);
-        // @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, '');
 })()
-);

static/widget.html

@@ -66,7 +66,7 @@
 .contented-upload-if {
     display:none;
 }
-.contented-if-paste {
+.contented-if-paste, .contented-if-drawing {
     height:100%;
 }
 .contented-upload-if.contented-active {
@@ -122,6 +122,12 @@
                 <path fill="#000000" d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
             </svg>
         </div>
+        
+        <div class="contented-upload-type" data-upload-type="drawing" title="Drawing">
+			<svg viewBox="0 0 24 24">
+				<path fill="#000000" d="M16.84,2.73C16.45,2.73 16.07,2.88 15.77,3.17L13.65,5.29L18.95,10.6L21.07,8.5C21.67,7.89 21.67,6.94 21.07,6.36L17.9,3.17C17.6,2.88 17.22,2.73 16.84,2.73M12.94,6L4.84,14.11L7.4,14.39L7.58,16.68L9.86,16.85L10.15,19.41L18.25,11.3M4.25,15.04L2.5,21.73L9.2,19.94L8.96,17.78L6.65,17.61L6.47,15.29" />
+			</svg>
+		</div>
     </div>
     
     <div class="contented-content-area">
@@ -140,6 +146,11 @@
             <button class="contented-paste-upload">Upload &raquo;</button>
         </div>
 
+        <div class="contented-upload-if contented-if-drawing">
+			<link rel="stylesheet" type="text/css" href="/drawingboard-0.4.6.min.css">
+			<div class="contented-drawing-area"></div>
+        </div>
+        
         <div class="contented-upload-if contented-if-progress">
             <label>...</label>
             <div class="contented-progress-bar"><div class="contented-progress-element"></div></div>