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

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

Browse Source
This commit is contained in:
mappu 2017-10-15 18:50:55 +13:00
parent ac768524ee
commit b8f1b26aba
4 changed files with 429 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/index.html
View File

@ -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='/info/" + items[i] + "'>info</a>")
$("<td>").html("<a target='_blank' href='" + contented.getDownloadURL(items[i]) + "'>get</a>"),
$("<td>").html("<a target='_blank' href='" + contented.getInfoJSONURL(items[i]) + "'>info</a>"),
]))
}
$("#surrogate-area").html($table);

567
static/sdk.js
View File

@ -1,213 +1,29 @@
;
var contented = (function ($, currentScriptPath) {
"use strict";
var baseURL = currentScriptPath.replace('sdk.js', '');
//
var formatBytes = function(bytes) {
if (bytes < 1024) {
return bytes + " B";
} else if (bytes < (1024*1024)) {
return (bytes / 1024).toFixed(1) + " KiB";
} else if (bytes < (1024*1024*1024)) {
return (bytes / (1024*1024)).toFixed(1) + " MiB";
} else {
return (bytes / (1024*1024*1024)).toFixed(1) + " GiB";
}
};
var contented = (function() {
"use strict";
// @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) {
/**
* supportsDrop returns whether drag-and-drop is supported by this browser.
*
* @return bool
*/
var supportsDrop = function () {
return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
}
var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
len = binStr.length,
arr = new Uint8Array(len);
/**
* 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
*/
var initArea = function (elementSelector, onUploaded, onClose) {
onUploaded = onUploaded || function () { };
onClose = onClose || function () { };
for (var i = 0; i < len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
if ($(elementSelector).length != 1) {
return; // should only find one element
}
var element = $(elementSelector)[0];
// <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) {
var extraText = "";
if (ret.MaxUploadBytes > 0) {
extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
}
$.get(baseURL + "widget.html", function (widgetHtml) {
var $f = $("<div>").html(widgetHtml);
$f.find(".contented-extratext").text(extraText);
var ourClose = function () {
$f.remove(); // remove from dom
onClose(); // upstream close
};
$f.find(".contented-close").click(function () {
ourClose();
})
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");
};
$f.find(".contented-upload-type").click(function () {
setType($(this).attr('data-upload-type'));
});
if (!supportsDrop()) {
// switch default
setType('file');
}
//
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"
});
$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);
});
$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]);
});
$("body").append($f);
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) + "%");
};
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: 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!");
}
});
}
});
});
}
//
return {
'supportsDrop': supportsDrop,
'init': initArea
};
})(
jQuery,
(function () {
"use strict";
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]');
@ -216,5 +32,346 @@ var contented = (function ($, currentScriptPath) {
var currentScriptFile = currentScriptChunks[currentScriptChunks.length - 1];
return currentScript.replace(currentScriptFile, '');
})()
);
};
var currentScriptPath = getCurrentScriptPath();
var baseURL = currentScriptPath.replace('sdk.js', '');
return {
"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 + "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 () { };
if ($(elementSelector).length != 1) {
return; // should only find one element
}
var element = $(elementSelector)[0];
// <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" />
// 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) + ")";
}
$.get(contented.baseURL + "widget.html", function (widgetHtml) {
var $f = $("<div>").html(widgetHtml);
$f.find(".contented-extratext").text(extraText);
var ourClose = function () {
$f.remove(); // remove from dom
onClose(); // upstream close
};
$f.find(".contented-close").click(function () {
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 (!contented.supportsDrop()) {
// switch default
setType('file');
}
//
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"
});
$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);
});
$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]);
});
$("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);
};
var setProgressPercentage = function(frc) {
$f.find(".contented-progress-element").css('width', (frc * 100) + "%");
};
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!");
}
});
}
});
});
}
// Update fields in global variable
contented.init = initArea;
contented.loaded = true;
// 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
var needScripts = [];
if (typeof jQuery === "undefined") {
needScripts.push("jquery-1.12.4.min.js");
}
if (typeof DrawingBoard === "undefined") {
needScripts.push("drawingboard-0.4.6.min.js");
}
loadScripts(needScripts, afterScriptsLoaded);
})()

15
static/widget.html
View File

@ -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,9 +146,14 @@
<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>
</div>
</div>
</div>
</div>

58
staticResources.go
View File

File diff suppressed because one or more lines are too long