summaryrefslogtreecommitdiffstats
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/gomf.css159
-rw-r--r--static/gomf.js184
2 files changed, 343 insertions, 0 deletions
diff --git a/static/gomf.css b/static/gomf.css
new file mode 100644
index 0000000..5b34792
--- /dev/null
+++ b/static/gomf.css
@@ -0,0 +1,159 @@
+html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite,
+code, b, u, i, form, label, article, aside, footer, header, menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+article, aside, footer, header, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1.25;
+ padding: 1em;
+ color: #000;
+ background-color: #fff;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+html {
+ font-family: "DejaVu Sans", sans-serif;
+}
+
+h1 {
+ font-size: 200%;
+ font-weight: bold;
+ border-bottom: 1px solid black;
+ margin-bottom: 0.5em;
+}
+
+input, select, textarea, code {
+ border: 1px solid black;
+ background: inherit;
+ font: inherit;
+ font-family: "DejaVu Sans Mono", monospace;
+}
+
+progress {
+ appearance: none;
+ background-color: inherit;
+ color: inherit;
+ border: 1px solid black;
+ font: inherit;
+}
+
+input, select {
+ font: inherit;
+ cursor: pointer;
+}
+
+.file span {
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+ padding-top: 2em;
+ padding-bottom: 2em;
+ overflow: hidden;
+ width: 100%;
+ text-align: center;
+}
+
+.file {
+ padding-top: 2em;
+ padding-bottom: 2em;
+ height: 22px;
+ min-height: 22px;
+ position: relative;
+ border: 1px solid black;
+ margin-right: 0.2em;
+ width: 100%;
+}
+
+main form {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ display: flex;
+}
+
+.file input[type=file] {
+ margin-top: -2em;
+ padding-top: 2em;
+ padding-bottom: 2em;
+ position: relative;
+ text-align: right;
+ opacity: 0;
+ filter: alpha(opacity: 0);
+ -moz-opacity: 0;
+ z-index: 2;
+ width: 100%;
+}
+
+.file span {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 1;
+}
+
+.file:hover {
+ background-color: #eee;
+}
+
+input:disabled {
+ background-color: #ddd;
+}
+
+b {
+ font-weight: bold;
+}
+
+i {
+ font-style: italic;
+}
+
+nav {
+ margin-top: 2em;
+ list-style-type: none;
+ font-size: 80%;
+ text-align: center;
+ font-weight: bold;
+}
+
+nav a {
+ display: inline;
+ cursor: pointer;
+ font-weight: normal;
+ border: none;
+ background: inherit;
+ color: inherit;
+ padding: 0;
+ font: inherit;
+ font-weight: normal;
+ text-decoration: none;
+}
+
+nav a:hover {
+ text-decoration: underline;
+}
+
+nav li {
+ display: inline-block;
+}
+
+nav li:after {
+ content: " | ";
+ white-space: pre;
+ cursor: default;
+ text-decoration: none;
+ display: inline-block;
+ font-weight: normal;
+}
+
+nav li:last-child:after {
+ content: "";
+}
diff --git a/static/gomf.js b/static/gomf.js
new file mode 100644
index 0000000..da14d14
--- /dev/null
+++ b/static/gomf.js
@@ -0,0 +1,184 @@
+(function() {
+ var gomfload = function() {
+ "use strict";
+
+ var required = ['FormData', 'XMLHttpRequest'];
+ for (var i=0; i<required.length; ++i) {
+ if (typeof window[required[i]] === 'undefined') {
+ console.log('browser does not support window.' + required[i] + ', Gomf JS disabled');
+ return;
+ }
+ }
+
+ var fileName = document.querySelector('main form span');
+ var fileDiv = document.querySelector('main form div');
+ var fileSubmit = document.querySelector('#file-submit');
+ var fileInput = document.querySelector('#file');
+ var resultList = document.querySelector('#results');
+ var maxSize = parseInt(fileInput.attributes['data-max-size'].value);
+
+ if (!Element.prototype.remove) {
+ Element.prototype.remove = function() {
+ this.parentElement.removeChild(this);
+ }
+ }
+
+ var upload = function(files) {
+ if (files.length ==0) {
+ alert('No files selected');
+ fileInput.value = '';
+ updateName();
+ return;
+ }
+
+ for (var i=0; i<files.length; ++i) {
+ if (files[i].size > maxSize) {
+ alert('File ' + files[i].name + ' too large, maximum allowed size is ' + humanize(maxSize));
+ fileInput.value = '';
+ updateName();
+ return;
+ }
+ }
+
+ for (var i=0; i<files.length; ++i) {
+ uploadFile(files[i]);
+ }
+
+ fileInput.value = '';
+ updateName();
+ };
+
+ var uploadFile = function(file) {
+ var xhr = new XMLHttpRequest();
+
+ var formData = new FormData();
+ formData.append('files[]', file);
+
+ var resultItem = document.createElement('li');
+ var name = document.createElement('b');
+ name.appendChild(document.createTextNode(file.name));
+ resultItem.appendChild(name);
+ resultItem.appendChild(document.createTextNode(': '));
+ var progressBar = document.createElement('progress');
+ progressBar.min = 0;
+ progressBar.max = 100;
+ progressBar.value = 0;
+ resultItem.appendChild(progressBar);
+ var progressText = document.createElement('span');
+ progressText.textContent = ' 0% - 0/0';
+ resultItem.appendChild(progressText);
+ resultList.appendChild(resultItem);
+
+ xhr.upload.addEventListener('progress', function(e) {
+ if (e.lengthComputable) {
+ progressBar.max = e.total;
+ progressBar.value = e.loaded;
+ progressText.textContent = ' ' + (Math.round(e.loaded / e.total * 10000) / 100) + '% - ' + humanize(e.loaded) + ' / ' + humanize(e.total);
+ } else {
+ progressBar.value = '';
+ progressText.textContent = '';
+ }
+ }, false);
+
+ xhr.addEventListener('readystatechange', function() {
+ if (xhr.readyState == 4) {
+ fileInput.value = '';
+ progressBar.remove();
+ progressText.remove();
+ var resp = xhr.responseText.replace(/\s$/, '');;
+ //if (resp.indexOf('http') == 0) {
+ if (xhr.status == 200) {
+ var a = document.createElement('a');
+ a.href = resp;
+ a.textContent = resp;
+ var input = document.createElement('input');
+ input.type = 'text';
+ input.readOnly = true;
+ input.value = resp;
+ console.log(input);
+ console.log(resp);
+ console.log(input.value);
+ console.log(input.value.length);
+ input.size = input.value.length;
+ input.addEventListener('click', function() {
+ this.select();
+ });
+ resultItem.appendChild(a);
+ resultItem.appendChild(document.createTextNode(' '));
+ resultItem.appendChild(input);
+ } else {
+ var span = document.createElement('span');
+ span.style.color = 'red';
+ span.textContent = resp;
+ resultItem.appendChild(span);
+ }
+ updateName();
+ }
+ });
+
+ var postPath = 'upload.php?output=text';
+
+ xhr.open('POST', postPath);
+
+ xhr.send(formData);
+ };
+
+ var humanize = function(n) {
+ var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+ var i = 0;
+ while (n >= 1024 && i < units.length-1) {
+ n /= 1024;
+ ++i;
+ }
+ return (Math.round(n*10)/10) + ' ' + units[i];
+ };
+
+ var submit = function(e) {
+ upload(fileInput.files);
+ e.preventDefault();
+ };
+
+ var updateName = function(files) {
+ files = files || fileInput.files;
+ if (files.length > 0) {
+ if (files.length == 1) {
+ fileName.textContent = files[0].name;
+ } else {
+ fileName.textContent = files.length + ' files selected';
+ }
+ } else {
+ fileName.textContent = fileName.originalText;
+ }
+ };
+
+ var dragenter = function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ };
+
+ var drop = function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ upload(e.dataTransfer.files);
+ };
+
+ fileInput.addEventListener('change', submit);
+ fileInput.addEventListener('dragenter', dragenter);
+ fileInput.addEventListener('dragover', dragenter);
+ fileInput.addEventListener('drop', drop);
+
+ fileName.textContent = 'Select or drop files here';
+ fileName.originalText = fileName.textContent;
+ fileDiv.className = 'file';
+ fileInput.multiple = 'multiple';
+ fileSubmit.style.display = 'none';
+
+ updateName();
+ };
+
+ if (document.readyState !== 'loading') {
+ gomfload();
+ } else {
+ document.addEventListener('DOMContentLoaded', gomfload);
+ }
+})();