Frontend WIP

author: kanadeko <[email protected]> 2017-01-14 03:01:23 -0300
committer: kanadeko <[email protected]> 2017-01-14 03:01:23 -0300
commit: 07ba404dcbdeebf02def41978a0520065bc99ead (patch)
tree: 5f19487b73e5c11448b79a635c37d6b2d056fb80 /public
parent: Gallery WIP (diff)
download: host.fuwn.me-07ba404dcbdeebf02def41978a0520065bc99ead.tar.xz
host.fuwn.me-07ba404dcbdeebf02def41978a0520065bc99ead.zip
8 files changed, 325 insertions, 0 deletions
diff --git a/public/.DS_Store b/public/.DS_Store
new file mode 100644
index 0000000..213a4b9
--- /dev/null
+++ b/public/.DS_Store
diff --git a/public/error/404.html b/public/error/404.html
new file mode 100644
index 0000000..57db2e9
--- /dev/null
+++ b/public/error/404.html
@@ -0,0 +1 @@
+404
+\ No newline at end of file
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..96916c0
--- /dev/null
+++ b/public/images/logo.png
diff --git a/public/images/logo_big.png b/public/images/logo_big.png
new file mode 100644
index 0000000..b935a28
--- /dev/null
+++ b/public/images/logo_big.png
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..f0a7e03
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loli-safe - A self hosted upload service</title>
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
+		
+		<style type="text/css">
+			#b {
+				-webkit-animation-delay: 0.5s;
+				animation-delay: 0.5s;
+				-webkit-animation-duration: 1.5s;
+				animation-duration: 1.5s;
+				-webkit-animation-fill-mode: both;
+				animation-fill-mode: both;
+				-webkit-animation-name: floatUp;
+				animation-name: floatUp;
+				-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+				animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+				border-radius: 24px;
+				display: inline-block;
+				height: 240px;
+				margin-bottom: 40px;
+				position: relative;
+				vertical-align: top;
+				width: 240px;
+				box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+			}
+			img.logo {
+				height: 200px;
+				margin-top: 20px;
+			}
+
+			.dz-preview .dz-details { display: flex; }
+			.dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }
+			.dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none }
+
+			@keyframes floatUp {
+				0% {
+					opacity: 0;
+					box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
+					-webkit-transform: scale(0.86);
+					transform: scale(0.86);
+				}
+				25% {
+					opacity: 100;
+				}
+				67% {
+					box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+					-webkit-transform: scale(1);
+					transform: scale(1);
+				}
+				100% {
+					box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+					-webkit-transform: scale(1);
+					transform: scale(1);
+				}
+			}
+
+		</style>
+	</head>
+
+	<body>
+		<section class="hero is-fullheight has-text-centered">
+			<div class="hero-body">
+				<div class="container">
+					<p id="b">
+						<img class='logo' src="/images/logo.png">
+					</p>
+					<h1 id="bulma" class="title">
+						loli-safe
+					</h1>
+					<h2 id="modern-framework" class="subtitle">
+						A <strong>modern</strong> self-hosted file upload <strong>service</strong>
+					</h2>
+
+					<div class="columns">
+						<div class="column"></div>
+						<div class="column">
+							<a class="button is-danger is-outlined is-fullwidth" id="upload-button">Upload files</a>
+						</div>
+						<div class="column"></div>
+					</div>
+
+					<div class="columns">
+						<div class="column"></div>
+						<div class="column">
+							<div class="notification" id="dropzone">Or drag and drop files here</div>
+						</div>
+						<div class="column"></div>
+					</div>
+
+					<div id="uploads">
+						<div id="template" class="columns">
+							<div class="column">
+								<p data-dz-size></p>
+							</div>
+							<div class="column">
+								<p data-dz-name></p>
+							</div>
+							<div class="column">
+								<progress class="progress is-primary" value="100" max="100" data-dz-uploadprogress></progress>
+								<p data-dz-errormessage></p>
+								<p class="link"></p>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</section>
+
+		<script type="text/javascript">
+			window.onload = function () {
+				var previewNode = document.querySelector("#template");
+				previewNode.id = "";
+				var previewTemplate = previewNode.parentNode.innerHTML;
+				previewNode.parentNode.removeChild(previewNode);
+
+				var dropzone = new Dropzone('div#dropzone', { 
+					url: '/api/upload',
+					paramName: 'file',
+					maxFilesize: 512,
+					parallelUploads: 2,
+					uploadMultiple: false,
+					previewsContainer: 'div#uploads',
+					previewTemplate: previewTemplate,
+					createImageThumbnails: false,
+					maxFiles: 1000,
+					autoProcessQueue: true
+				});
+
+				// Update the total progress bar
+				dropzone.on("uploadprogress", function(file, progress) {
+					file.previewElement.querySelector(".progress").style.width = progress + "%";
+				});
+
+				dropzone.on("success", function(file, response) {
+      				// Handle the responseText here. For example, add the text to the preview element:
+      				a = document.createElement('a');
+      				a.href = 'https://i.kanacchi.moe/' + response.filename;
+      				a.innerHTML = response.filename;
+
+      				file.previewTemplate.querySelector(".progress").style.display = 'none';
+      				file.previewTemplate.querySelector(".link").appendChild(a);
+    			});
+
+			};
+		</script>
+
+	</body>
+</html>
+\ No newline at end of file
diff --git a/public/js/envResolver.js b/public/js/envResolver.js
new file mode 100644
index 0000000..a7419b4
--- /dev/null
+++ b/public/js/envResolver.js
@@ -0,0 +1,83 @@
+var http = function (url, success, failure) {
+    var request = new XMLHttpRequest();
+    request.open("GET", url, true);
+    request.send(null);
+    request.onreadystatechange = function () {
+        if (request.readyState == 4) {
+            if (request.status == 200)
+                success(request.responseText);
+            else if (failure)
+                failure(request.status, request.statusText);
+        }
+    };
+};
+var mockXhr = function () {
+    XMLHttpRequest = XhrMock;
+    FormData = FormDataMock;
+};
+var resolveEnvironment = function () {
+    if (window.location.href.toString().toLowerCase().indexOf('file://') >= 0) {
+        mockXhr();
+        return;
+    }
+    http('api/check', function (result) {
+        if (result !== 'API OK')
+            mockXhr();
+    }, function () {
+        mockXhr();
+    });
+};
+var FormDataMock = (function () {
+    function FormDataMock() {
+        this.data = {};
+    }
+    FormDataMock.prototype.append = function (key, data, additional) {
+        this.data[key] = { data: data, additional: additional };
+    };
+    return FormDataMock;
+})();
+var XhrMock = (function () {
+    function XhrMock() {
+        this.loaded = 0;
+        this.step = 2000000;
+        this.readyState = 0;
+        this.status = 0;
+        this.upload = { onprogress: function () { } };
+    }
+    XhrMock.prototype.open = function (method, url, async) {
+    };
+    XhrMock.prototype.setRequestHeader = function (name, value) {
+    };
+    XhrMock.prototype.send = function (formData) {
+        this.file = formData.data['file'].data;
+        this.performStep();
+    };
+    XhrMock.prototype.abort = function () {
+        window.clearTimeout(this.timeoutId);
+    };
+    XhrMock.prototype.performStep = function () {
+        var _this = this;
+        this.timeoutId = window.setTimeout(function () {
+            if (_this.addStep() === _this.file.size) {
+                _this.readyState = 4;
+                _this.status = 200;
+                _this.onload(new Event('loaded'));
+            }
+            else {
+                var e = {
+                    lengthComputable: true,
+                    loaded: _this.loaded,
+                    total: _this.file.size
+                };
+                _this.upload.onprogress(e);
+                _this.performStep();
+            }
+        }, 100);
+    };
+    XhrMock.prototype.addStep = function () {
+        var newValue = this.loaded + this.step;
+        this.loaded = newValue > this.file.size ? this.file.size : newValue;
+        return this.loaded;
+    };
+    return XhrMock;
+})();
diff --git a/public/js/pureupload.min.js b/public/js/pureupload.min.js
new file mode 100755
index 0000000..508ffb6
--- /dev/null
+++ b/public/js/pureupload.min.js
@@ -0,0 +1 @@
+var pu;!function(t){function e(t,e,i){if(t.addEventListener)t.addEventListener(e,i);else{var o=t;o.attachEvent?o.attachEvent("on"+e,i):o[e]=i}}function i(t,e){var i;return i="object"==typeof t?c(o(u(t),function(t){return"length"!==t}),function(e){return t[e]}):t,n(i,function(t){t.uploadStatus=e||t.uploadStatus,t.responseCode=t.responseCode||0,t.responseText=t.responseText||"",t.progress=t.progress||0,t.sentBytes=t.sentBytes||0,t.cancel=t.cancel||function(){}}),i}function o(t,e){var i=[];return t?(n(t,function(t){e(t)&&i.push(t)}),i):i}function n(t,e){if(t)for(var i=0;i<t.length;i++)e(t[i],i)}function s(t,e,i){return void 0===i&&(i=!1),t?i?function(){e(),t()}:function(){t(),e()}:e}function a(t,e){return new f(t,e)}function l(t,e){return new m(t,e)}function r(){var t=(new Date).getTime(),e="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var i=(t+16*Math.random())%16|0;return t=Math.floor(t/16),("x"===e?i:3&i|8).toString(16)});return e}function p(t,e){if(!t)return-1;for(var i=0;i<t.length;i++)if(t[i]===e)return i;return-1}function u(t){if(Object&&Object.keys)return Object.keys(t);var e=[];for(var i in t)t.hasOwnProperty(i)&&e.push(i);return e}function c(t,e){var i=[];return t?(n(t,function(t){i.push(e(t))}),i):i}function h(t,e,i){if(t.removeEventListener)t.removeEventListener(e,i);else{var o=t;o.detachEvent?o.detachEvent("on"+e,i):o[e]=null}}t.addEventHandler=e,t.isFileApi=!(!window.File||!window.FormData),t.castFiles=i,t.filter=o,t.forEach=n,t.decorateSimpleFunction=s,t.getUploadCore=a,t.getUploader=l,t.newGuid=r,t.indexOf=p,t.keys=u,t.map=c,t.removeEventHandler=h;var d=function(){function o(e,i,o,n){n&&(this.formForNoFileApi="form"===n.tagName.toLowerCase()?n:n.getElementsByTagName("form")[0]),this.targetElement=e,this.options=i,this.uploader=o,this.uploadCore=a(this.options,this.uploader.queue.callbacks),this.setFullOptions(i),t.isFileApi?this.setupFileApiElements():this.setupOldSchoolElements()}return o.prototype.destroy=function(){t.isFileApi?(this.unregisterOnClick&&this.unregisterOnClick(),this.unregisterOnDrop&&this.unregisterOnDrop(),this.unregisterOnChange&&this.unregisterOnChange(),this.unregisterOnDragOver&&this.unregisterOnDragOver(),this.targetElement.removeEventListener("dragover",this.onDrag),this.targetElement.removeEventListener("drop",this.onDrop),document.body.removeChild(this.fileInput)):(this.unregisterFormOnChange&&this.unregisterFormOnChange(),this.lastIframe&&this.formForNoFileApi.parentNode&&this.formForNoFileApi.parentNode.removeChild(this.lastIframe),this.formForNoFileApiProvided||(this.formForNoFileApi.parentNode&&this.formForNoFileApi.parentNode.insertBefore(this.targetElement,this.formForNoFileApi.nextSibling||null),this.targetElement.parentNode&&this.targetElement.parentNode.removeChild(this.formForNoFileApi)))},o.prototype.setFullOptions=function(e){this.options.maxFileSize=e.maxFileSize||1024,this.options.allowDragDrop=t.isFileApi&&(void 0===e.allowDragDrop||null===e.allowDragDrop||e.allowDragDrop),this.options.clickable=void 0===e.clickable||null===e.clickable||e.clickable,this.options.accept=e.accept||"*.*",this.options.validateExtension=!!e.validateExtension,this.options.multiple=t.isFileApi&&(void 0===e.multiple||null===e.multiple||e.multiple)},o.prototype.putFilesToQueue=function(t){var e=this,o=i(t);n(o,function(t){t.guid=r(),t.url=e.uploadCore.getUrl(t),t.onError=e.options.onFileError||function(){},t.onCancel=e.options.onFileCanceled||function(){},e.validateFile(t)?t.start=function(){e.uploadCore.upload([t]),e.options.onFileAdded&&e.options.onFileAdded(t),t.start=function(){}}:t.onError(t)}),this.uploader.queue.addFiles(o)},o.prototype.validateFile=function(t){return this.isFileSizeValid(t)?!this.isFileTypeInvalid(t)||(t.uploadStatus=g.failed,t.responseText=this.options.localizer?this.options.localizer("File format is not allowed. Only { accept } files are allowed.",this.options):"File format is not allowed. Only "+(this.options.accept?this.options.accept.split(".").join(" "):"")+" files are allowed.",!1):(t.uploadStatus=g.failed,t.responseText=this.options.localizer?this.options.localizer("The selected file exceeds the allowed size of { maxFileSize } MB or its size is 0 MB. Please choose another file.",this.options):"The selected file exceeds the allowed size of "+this.options.maxFileSize+" or its size is 0 MB. Please choose another file.",!1)},o.prototype.setupFileApiElements=function(){var t=this;this.fileInput=document.createElement("input"),this.fileInput.setAttribute("type","file"),this.fileInput.setAttribute("accept",this.options.accept?this.options.accept:""),this.fileInput.style.display="none",this.formForNoFileApi&&(this.formForNoFileApi.style.display="none");var i=function(e){return t.onChange(e)};if(e(this.fileInput,"change",i),this.unregisterOnChange=function(){return h(t.fileInput,"change",onchange)},this.options.multiple&&this.fileInput.setAttribute("multiple",""),this.options.clickable){var o=function(){return t.onClick()};e(this.targetElement,"click",o),this.unregisterOnClick=function(){return h(t.targetElement,"click",o)}}if(this.options.allowDragDrop){var n=function(e){return t.onDrag(e)};e(this.targetElement,"dragover",n),this.unregisterOnDragOver=function(){return h(t.targetElement,"dragover",n)};var s=function(e){return t.onDrop(e)};e(this.targetElement,"drop",s),this.unregisterOnDrop=function(){return h(t.targetElement,"drop",s)}}document.body.appendChild(this.fileInput)},o.prototype.setupOldSchoolElements=function(){var t=this;if(this.options.clickable){this.formForNoFileApi?this.decorateInputForm():this.createFormWrapper();var i=this.findInnerSubmit(),o=function(e){return t.onFormChange(e,t.fileInput,i)};e(this.fileInput,"change",o),this.unregisterFormOnChange=function(){return h(t.fileInput,"change",o)}}},o.prototype.createFormWrapper=function(){this.fileInput=document.createElement("input"),this.fileInput.setAttribute("type","file"),this.fileInput.setAttribute("accept",this.options.accept?this.options.accept:""),this.fileInput.setAttribute("name","file"),this.fileInput.style.position="absolute",this.fileInput.style.left="0",this.fileInput.style.right="0",this.fileInput.style.top="0",this.fileInput.style.bottom="0",this.fileInput.style.width="100%",this.fileInput.style.height="100%",this.fileInput.style.fontSize="10000%",this.fileInput.style.opacity="0",this.fileInput.style.filter="alpha(opacity=0)",this.fileInput.style.cursor="pointer",this.formForNoFileApi=document.createElement("form"),this.formForNoFileApi.setAttribute("method",this.uploadCore.options.method),this.formForNoFileApi.setAttribute("enctype","multipart/form-data"),this.formForNoFileApi.setAttribute("encoding","multipart/form-data"),this.formForNoFileApi.style.position="relative",this.formForNoFileApi.style.display="block",this.formForNoFileApi.style.overflow="hidden",this.formForNoFileApi.style.width=this.targetElement.offsetWidth.toString()+"px",this.formForNoFileApi.style.height=this.targetElement.offsetHeight.toString()+"px",0!==this.targetElement.clientHeight&&0!==this.targetElement.clientWidth||console.warn("upload element height and width has to be set to be able catch upload"),this.targetElement.parentNode&&this.targetElement.parentNode.insertBefore(this.formForNoFileApi,this.targetElement.nextSibling||null),this.formForNoFileApi.appendChild(this.targetElement),this.formForNoFileApi.appendChild(this.fileInput)},o.prototype.decorateInputForm=function(){this.formForNoFileApiProvided=!0,this.targetElement.style.display="none",this.formForNoFileApi.setAttribute("method",this.uploadCore.options.method),this.formForNoFileApi.setAttribute("enctype","multipart/form-data"),this.formForNoFileApi.setAttribute("encoding","multipart/form-data");for(var t=this.formForNoFileApi.getElementsByTagName("input"),e=0;e<t.length;e++){var i=t[e];"file"===i.type&&(this.fileInput=i)}},o.prototype.findInnerSubmit=function(){for(var t=this.formForNoFileApi.getElementsByTagName("input"),e=0;e<t.length;e++){var i=t[e];if("submit"===i.type)return i}},o.prototype.fileListToList=function(t){if(!t)return[];for(var e=[],i=0;i<t.length;i++)e.push(t[i]);return e},o.prototype.onFormChange=function(t,e,i){var o=this,s=t.target?t.target.files?this.fileListToList(t.target.files):t.target.value?[{name:t.target.value.replace(/^.+\\/,"")}]:[]:e.value?[{name:e.value.replace(/^.+\\/,"")}]:[];n(s,function(t){t.guid=t.guid||r(),t.url=o.uploadCore.getUrl(t)}),0!==s.length&&(this.addTargetIframe(),this.formForNoFileApi.setAttribute("action",s[0].url),i||this.formForNoFileApi.submit())},o.prototype.addTargetIframe=function(){this.lastIframe&&this.formForNoFileApi.parentNode&&this.formForNoFileApi.parentNode.removeChild(this.lastIframe);var t="uploadIframe"+Date.now(),e=this.lastIframe=document.createElement("iframe");e.setAttribute("id",t),e.setAttribute("name",t),e.style.border="none",e.style.display="none",e.style.width="0",e.style.height="0",this.formForNoFileApi.setAttribute("target",t),this.formForNoFileApi.parentNode&&this.formForNoFileApi.parentNode.insertBefore(e,this.formForNoFileApi.nextSibling||null);var i=window.frames[t];i&&(i.name=t)},o.prototype.onChange=function(t){this.putFilesToQueue(t.target.files)},o.prototype.onDrag=function(t){var e=void 0;try{e=t.dataTransfer.effectAllowed}catch(i){}t.dataTransfer.dropEffect="move"===e||"linkMove"===e?"move":"copy",this.stopEventPropagation(t)},o.prototype.onDrop=function(t){if(this.stopEventPropagation(t),t.dataTransfer){var e=t.dataTransfer.files;if(e.length){this.options.multiple||(e=[e[0]]);var i=t.dataTransfer.items;if(i&&i.length&&null!==i[0].webkitGetAsEntry)if(this.options.multiple)this.addFilesFromItems(i);else{var o=[i[0]];this.addFilesFromItems(o)}else this.handleFiles(e)}}},o.prototype.isIeVersion=function(t){return RegExp("msie"+(isNaN(t)?"":"\\s"+t.toString()),"i").test(navigator.userAgent)},o.prototype.onClick=function(){var t=this;this.fileInput.value="",this.isIeVersion(10)?setTimeout(function(){t.fileInput.click()},200):this.fileInput.click()},o.prototype.addFilesFromItems=function(t){for(var e,i=0;i<t.length;i++){var o=t[i];o.webkitGetAsEntry&&(e=o.webkitGetAsEntry())?e.isFile?this.putFilesToQueue([o.getAsFile()]):e.isDirectory&&this.processDirectory(e,e.name):o.getAsFile&&(o.kind&&"file"!==o.kind||this.putFilesToQueue([o.getAsFile()]))}},o.prototype.processDirectory=function(t,e){var i=t.createReader(),o=this,n=function(t){for(var i=0;i<t.length;i++){var n=t[i];n.isFile?n.file(function(t){"."!==t.name.substring(0,1)&&(t.fullPath=""+e+"/"+t.name,o.putFilesToQueue([t]))}):n.isDirectory&&o.processDirectory(n,""+e+"/"+n.name)}};i.readEntries(n,function(t){return"undefined"!=typeof console&&null!==console&&"function"==typeof console.log?console.log(t):void 0})},o.prototype.handleFiles=function(t){for(var e=0;e<t.length;e++)this.putFilesToQueue([t[e]])},o.prototype.isFileSizeValid=function(t){var e=1024*this.options.maxFileSize*1024;return!(t.size>e||0===t.size)},o.prototype.isFileTypeInvalid=function(t){if(t.name&&this.options.accept&&("*"!==this.options.accept.trim()||"*.*"!==this.options.accept.trim())&&this.options.validateExtension&&this.options.accept.indexOf("/")===-1){var e=this.options.accept.split(","),i=t.name.substring(t.name.lastIndexOf("."),t.name.length);if(i.indexOf(".")===-1)return!0;for(var o=!0,n=0;n<e.length;n++)e[n].toUpperCase().trim()===i.toUpperCase()&&(o=!1);return o}return!1},o.prototype.stopEventPropagation=function(t){t.stopPropagation(),t.preventDefault?t.preventDefault():t.returnValue=!1},o}();t.UploadArea=d;var f=function(){function e(t,e){void 0===e&&(e={}),this.options=t,this.callbacks=e,this.setFullOptions(t),this.setFullCallbacks(e)}return e.prototype.upload=function(e){var o=this;if(t.isFileApi){var s=i(e,g.uploading);n(s,function(t){return o.processFile(t)})}},e.prototype.getUrl=function(t){return"function"==typeof this.options.url?this.options.url(t):this.options.url},e.prototype.processFile=function(t){var e=this.createRequest(t);this.setCallbacks(e,t),this.send(e,t)},e.prototype.createRequest=function(t){var e=new XMLHttpRequest,i=t.url||this.getUrl(t);return e.open(this.options.method,i,!0),e.withCredentials=!!this.options.withCredentials,this.setHeaders(e),e},e.prototype.setHeaders=function(t){var e=this;this.options.headers&&(this.options.headers.Accept||t.setRequestHeader("Accept","application/json"),this.options.headers["Cache-Control"]||t.setRequestHeader("Cache-Control","no-cache"),this.options.headers["X-Requested-With"]||t.setRequestHeader("X-Requested-With","XMLHttpRequest"),n(u(this.options.headers),function(i){if(e.options.headers){var o=e.options.headers[i];void 0!==o&&null!==o&&t.setRequestHeader(i,(o||"").toString())}}))},e.prototype.setCallbacks=function(t,e){var i=this;e.cancel=s(e.cancel,function(){t.abort(),e.uploadStatus=g.canceled,e.onCancel&&e.onCancel(e),i.callbacks.onCancelledCallback&&i.callbacks.onCancelledCallback(e),i.callbacks.onFileStateChangedCallback&&i.callbacks.onFileStateChangedCallback(e),i.callbacks.onFinishedCallback&&i.callbacks.onFinishedCallback(e)},!0),t.onload=function(){return i.onload(e,t)},t.onerror=function(){return i.handleError(e,t)},t.upload.onprogress=function(t){return i.updateProgress(e,t)}},e.prototype.send=function(t,e){var i=this.createFormData(e);this.callbacks.onUploadStartedCallback&&this.callbacks.onUploadStartedCallback(e),this.callbacks.onFileStateChangedCallback&&this.callbacks.onFileStateChangedCallback(e),t.send(i)},e.prototype.createFormData=function(t){var e=this,i=new FormData;return this.options.params&&n(u(this.options.params),function(t){if(e.options.params){var o=e.options.params[t];void 0!==o&&null!==o&&i.append(t,o)}}),i.append("file",t,t.name),i},e.prototype.handleError=function(t,e){t.uploadStatus=g.failed,this.setResponse(t,e),t.onError&&t.onError(t),this.callbacks.onErrorCallback&&this.callbacks.onErrorCallback(t),this.callbacks.onFileStateChangedCallback&&this.callbacks.onFileStateChangedCallback(t),this.callbacks.onFinishedCallback&&this.callbacks.onFinishedCallback(t)},e.prototype.updateProgress=function(t,e){e?e.lengthComputable?(t.progress=Math.round(100*(e.loaded/e.total)),t.sentBytes=e.loaded):(t.progress=0,t.sentBytes=0):(t.progress=100,t.sentBytes=t.size),this.callbacks.onProgressCallback&&this.callbacks.onProgressCallback(t)},e.prototype.onload=function(t,e){4===e.readyState&&(100!==t.progress&&this.updateProgress(t),200===e.status?this.finished(t,e):this.handleError(t,e))},e.prototype.finished=function(t,e){t.uploadStatus=g.uploaded,this.setResponse(t,e),this.callbacks.onUploadedCallback&&this.callbacks.onUploadedCallback(t),this.callbacks.onFileStateChangedCallback&&this.callbacks.onFileStateChangedCallback(t),this.callbacks.onFinishedCallback&&this.callbacks.onFinishedCallback(t)},e.prototype.setResponse=function(t,e){t.responseCode=e.status;var i=e.responseText||e.statusText||(e.status?e.status.toString():"Invalid response from server");t.responseText=this.options.localizer?this.options.localizer(i,{}):i},e.prototype.setFullOptions=function(t){this.options.url=t.url,this.options.method=t.method,this.options.headers=t.headers||{},this.options.params=t.params||{},this.options.withCredentials=t.withCredentials||!1,this.options.localizer=t.localizer},e.prototype.setFullCallbacks=function(t){this.callbacks.onProgressCallback=t.onProgressCallback||function(){},this.callbacks.onCancelledCallback=t.onCancelledCallback||function(){},this.callbacks.onFinishedCallback=t.onFinishedCallback||function(){},this.callbacks.onUploadedCallback=t.onUploadedCallback||function(){},this.callbacks.onErrorCallback=t.onErrorCallback||function(){},this.callbacks.onUploadStartedCallback=t.onUploadStartedCallback||function(){},this.callbacks.onFileStateChangedCallback=t.onFileStateChangedCallback||function(){}},e}();t.UploadCore=f;var m=function(){function t(t,e){void 0===t&&(t={}),void 0===e&&(e={}),this.setOptions(t),this.uploadAreas=[],this.queue=new F(t,e)}return t.prototype.setOptions=function(t){this.options=t},t.prototype.registerArea=function(t,e,i){var o=new d(t,e,this,i);return this.uploadAreas.push(o),o},t.prototype.unregisterArea=function(t){var e=p(this.uploadAreas,t);e>=0&&(this.uploadAreas[e].destroy(),this.uploadAreas.splice(e,1))},t}();t.Uploader=m;var F=function(){function e(t,e){this.queuedFiles=[],this.options=t,this.callbacks=e,this.setFullOptions(),this.setFullCallbacks()}return e.prototype.addFiles=function(t){var e=this;n(t,function(t){e.queuedFiles.push(t),t.remove=s(t.remove,function(){e.removeFile(t)}),e.callbacks.onFileAddedCallback&&e.callbacks.onFileAddedCallback(t),t.uploadStatus===g.failed?e.callbacks.onErrorCallback&&e.callbacks.onErrorCallback(t):t.uploadStatus=g.queued}),this.filesChanged()},e.prototype.removeFile=function(t,e){void 0===e&&(e=!1);var i=p(this.queuedFiles,t);i<0||(this.deactivateFile(t),this.queuedFiles.splice(i,1),this.callbacks.onFileRemovedCallback&&this.callbacks.onFileRemovedCallback(t),e||this.filesChanged())},e.prototype.clearFiles=function(t,e){var i=this;void 0===t&&(t=[]),void 0===e&&(e=!1),e||(t=t.concat([g.queued,g.uploading])),n(o(this.queuedFiles,function(e){return p(t,e.uploadStatus)<0}),function(t){return i.removeFile(t,!0)}),this.callbacks.onQueueChangedCallback&&this.callbacks.onQueueChangedCallback(this.queuedFiles)},e.prototype.filesChanged=function(){this.options.autoRemove&&this.removeFinishedFiles(),this.options.autoStart&&this.startWaitingFiles(),this.callbacks.onQueueChangedCallback&&this.callbacks.onQueueChangedCallback(this.queuedFiles),this.checkAllFinished()},e.prototype.checkAllFinished=function(){var t=o(this.queuedFiles,function(t){return p([g.queued,g.uploading],t.uploadStatus)>=0});0===t.length&&this.callbacks.onAllFinishedCallback&&this.callbacks.onAllFinishedCallback()},e.prototype.setFullOptions=function(){this.options.maxParallelUploads=this.options.maxParallelUploads||0,this.options.autoStart=t.isFileApi&&(this.options.autoStart||!1),this.options.autoRemove=this.options.autoRemove||!1},e.prototype.setFullCallbacks=function(){var t=this;this.callbacks.onFileAddedCallback=this.callbacks.onFileAddedCallback||function(){},this.callbacks.onFileRemovedCallback=this.callbacks.onFileRemovedCallback||function(){},this.callbacks.onAllFinishedCallback=this.callbacks.onAllFinishedCallback||function(){},this.callbacks.onQueueChangedCallback=this.callbacks.onQueueChangedCallback||function(){},this.callbacks.onFileStateChangedCallback=function(){return t.filesChanged()}},e.prototype.startWaitingFiles=function(){n(this.getWaitingFiles(),function(t){return t.start()})},e.prototype.removeFinishedFiles=function(){var t=this;n(o(this.queuedFiles,function(t){return p([g.uploaded,g.canceled],t.uploadStatus)>=0}),function(e){return t.removeFile(e,!0)})},e.prototype.deactivateFile=function(t){t.uploadStatus===g.uploading&&t.cancel(),t.uploadStatus=g.removed,t.cancel=function(){},t.remove=function(){},t.start=function(){}},e.prototype.getWaitingFiles=function(){if(!this.options.autoStart)return[];var t=o(this.queuedFiles,function(t){return t.uploadStatus===g.queued});if(this.options.maxParallelUploads>0){var e=o(this.queuedFiles,function(t){return t.uploadStatus===g.uploading}).length,i=this.options.maxParallelUploads-e;if(i<=0)return[];t=t.slice(0,i)}return t},e}();t.UploadQueue=F;var g;!function(t){t[t.queued=0]="queued",t[t.uploading=1]="uploading",t[t.uploaded=2]="uploaded",t[t.failed=3]="failed",t[t.canceled=4]="canceled",t[t.removed=5]="removed"}(g=t.UploadStatus||(t.UploadStatus={}))}(pu||(pu={}));
+\ No newline at end of file
diff --git a/public/js/queueRenderer.js b/public/js/queueRenderer.js
new file mode 100644
index 0000000..ae06531
--- /dev/null
+++ b/public/js/queueRenderer.js
@@ -0,0 +1,87 @@
+var getQueueRenderer = function () {
+    return new QueueRenderer();
+};
+var QueueRenderer = (function () {
+    function QueueRenderer() {
+    }
+    QueueRenderer.prototype.createTextDiv = function (className, value) {
+        var element = document.createElement("div");
+        element.className = className;
+        element.innerHTML = value;
+        return element;
+    };
+    QueueRenderer.prototype.createButton = function (value, callback) {
+        var element = document.createElement("button");
+        element.className = "table-row-button";
+        element.innerHTML = value;
+        element.addEventListener("click", callback);
+        return element;
+    };
+    QueueRenderer.prototype.createQueueRow = function (file, queueSettings) {
+        var itemRow = document.createElement("div");
+        itemRow.id = file.guid;
+        itemRow.className = "table-row-item";
+        this.renderQueueRowContent(itemRow, file, queueSettings);
+        return itemRow;
+    };
+    QueueRenderer.prototype.translateFileStatus = function (file) {
+        console.log(file)
+        console.log(pu)
+        switch (file.uploadStatus.toString()) {
+            case pu.UploadStatus.queued:
+                return "Queued";
+            case pu.UploadStatus.uploading:
+                return "Uploading";
+            case pu.UploadStatus.uploaded:
+                return "Uploaded";
+            case pu.UploadStatus.failed:
+                return "Failed";
+            case pu.UploadStatus.canceled:
+                return "Canceled";
+        }
+        return "Unknown";
+    };
+    QueueRenderer.prototype.renderQueueRowContent = function (itemRow, file, queueSettings) {
+        while (itemRow.firstChild)
+            itemRow.removeChild(itemRow.firstChild);
+        itemRow.appendChild(this.createTextDiv('table-row-item-status', this.translateFileStatus(file)));
+        itemRow.appendChild(this.createTextDiv('table-row-item-name', file.name));
+        itemRow.appendChild(this.createTextDiv('table-row-item-progress', file.progress.toString() + "%"));
+        switch (file.uploadStatus.toString()) {
+            case pu.UploadStatus.queued:
+                if (!queueSettings.autoStart) {
+                    itemRow.appendChild(this.createButton("Start", function () { return file.start(); }));
+                    break;
+                }
+            case pu.UploadStatus.uploading:
+                itemRow.appendChild(this.createButton("Cancel", function () { return file.cancel(); }));
+                break;
+            case pu.UploadStatus.uploaded:
+            case pu.UploadStatus.failed:
+            case pu.UploadStatus.canceled:
+                itemRow.appendChild(this.createButton("Delete", function () { return file.remove(); }));
+                break;
+        }
+    };
+    QueueRenderer.prototype.renderItemProgress = function (queueId, file) {
+        var itemRow = document.getElementById(file.guid);
+        for (var i = 0; i < itemRow.childNodes.length; i++) {
+            var node = itemRow.childNodes[i];
+            if (node.attributes.getNamedItem('class').value == 'table-row-item-progress') {
+                node.textContent = file.progress.toString() + "%";
+                break;
+            }
+        }
+    };
+    QueueRenderer.prototype.renderQueue = function (queueId, queueTitle, files, queueSettings) {
+        var _this = this;
+        var queue = document.getElementById(queueId);
+        while (queue.firstChild)
+            queue.removeChild(queue.firstChild);
+        queue.appendChild(this.createTextDiv("table-header-title", queueTitle));
+        files.forEach(function (file) {
+            queue.appendChild(_this.createQueueRow(file, queueSettings));
+        });
+    };
+    return QueueRenderer;
+})();
author	kanadeko <[email protected]>	2017-01-14 03:01:23 -0300
committer	kanadeko <[email protected]>	2017-01-14 03:01:23 -0300
commit	07ba404dcbdeebf02def41978a0520065bc99ead (patch)
tree	5f19487b73e5c11448b79a635c37d6b2d056fb80 /public
parent	Gallery WIP (diff)
download	host.fuwn.me-07ba404dcbdeebf02def41978a0520065bc99ead.tar.xz host.fuwn.me-07ba404dcbdeebf02def41978a0520065bc99ead.zip