ajax/games
1
0
Fork 0
mirror of https://github.com/hexahigh/games.git synced 2025-12-11 20:15:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Boof 2023-01-31 10:20:57 +01:00 committed by GitHub
parent 4f4bc6727a
commit 7228cb19e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 360 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/multiup/test.html Normal file
View File

@ -0,0 +1,2 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="generator" content="Pomf &lt;%= pkg.version %&gt;" /><title>Pomf.lain.la</title><link rel="icon" href="favicon.ico" /><link rel="stylesheet" href="pomf.min.css" /><script src="pomf.min.js"></script></head><body><div class="container"><div class="jumbotron"><h1>An absurdly powerful Pomf clone.</h1><p class="lead">Max upload size is 1&nbsp;GiB, wow! read the <a href="/f/faq.html"><abbr title="Frequently asked questions">FAQ</abbr></a></p><form id="upload-form" enctype="multipart/form-data" method="post" action="upload.php?output=html"><button id="upload-btn" class="btn" type="button">Select or drop file(s)</button><input type="file" id="upload-input" name="files[]" multiple data-max-size="1024MiB"><input type="submit" value="Submit"></form><ul id="upload-filelist"></ul></div><!--<p class="alert alert-error">We're gettin' a business gigabit fiber port! There will be a bit of downtime on December 1st for this upgrade.</p>--><p class="alert alert-info"><a href="https://infrablog.lain.la/">Interested in how this thing runs? Check out the Infrablog!</a></p>
</p></span><nav><ul><li><a href="/">Pomf</a></li><li><a href="tools.html">Tools</a></li><li><a href="https://github.com/pomf/pomf">Git</a></li><li><a href="https://infrablog.lain.la/transparency">Transparency</a></li><li><a href="https://pomf.lain.la/f/faq.html">Terms & Privacy</a></li><li><a href="https://infrablog.lain.la/funding-for-ideas-short">Donate</a></li></ul></nav></div></body></html>

301
tools/multiup/test.js Normal file
View File

@ -0,0 +1,301 @@
/**
* @Copyright Copyright (c) 2016 Luminarys <postmaster@gensok.io>
*
* @copyright Copyright (c) 2022 Go Johansson (nekunekus) <neku@pomf.se> <github.com/nokonoko>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
document.addEventListener('DOMContentLoaded', function () {
/**
* Sets up the elements inside file upload rows.
*
* @param {File} file
* @return {HTMLLIElement} row
*/
function addRow(file) {
var row = document.createElement('li');
var name = document.createElement('span');
name.textContent = file.name;
name.className = 'file-name';
var progressIndicator = document.createElement('span');
progressIndicator.className = 'progress-percent';
progressIndicator.textContent = '0%';
var progressBar = document.createElement('progress');
progressBar.className = 'file-progress';
progressBar.setAttribute('max', '100');
progressBar.setAttribute('value', '0');
row.appendChild(name);
row.appendChild(progressBar);
row.appendChild(progressIndicator);
document.getElementById('upload-filelist').appendChild(row);
return row;
}
/**
* Updates the page while the file is being uploaded.
*
* @param {ProgressEvent} evt
*/
function handleUploadProgress(evt) {
var xhr = evt.target;
var bar = xhr.bar;
var percentIndicator = xhr.percent;
/* If we have amounts of work done/left that we can calculate with
(which, unless we're uploading dynamically resizing data, is always), calculate the percentage. */
if (evt.lengthComputable) {
var progressPercent = Math.floor((evt.loaded / evt.total) * 100);
bar.setAttribute('value', progressPercent);
percentIndicator.textContent = progressPercent + '%';
}
}
/**
* Complete the uploading process by checking the response status and, if the
* upload was successful, writing the URL(s) and creating the copy element(s)
* for the files.
*
* @param {ProgressEvent} evt
*/
function handleUploadComplete(evt) {
var xhr = evt.target;
var bar = xhr.bar;
var row = xhr.row;
var percentIndicator = xhr.percent;
percentIndicator.style.visibility = 'hidden';
bar.style.visibility = 'hidden';
row.removeChild(bar);
row.removeChild(percentIndicator);
var respStatus = xhr.status;
var url = document.createElement('span');
url.className = 'file-url';
row.appendChild(url);
var link = document.createElement('a');
if (respStatus === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
link.textContent = response.files[0].url.replace(/.*?:\/\//g, '');
link.href = response.files[0].url;
url.appendChild(link);
var copy = document.createElement('button');
copy.className = 'upload-clipboard-btn';
var glyph = document.createElement('img');
glyph.src = 'img/glyphicons-512-copy.png';
copy.appendChild(glyph);
url.appendChild(copy);
copy.addEventListener("click", function (event) {
/* Why create an element? The text needs to be on screen to be
selected and thus copied. The only text we have on-screen is the link
without the http[s]:// part. So, this creates an element with the
full link for a moment and then deletes it.
See the "Complex Example: Copy to clipboard without displaying
input" section at: https://stackoverflow.com/a/30810322 */
var element = document.createElement('a');
element.textContent = response.files[0].url;
link.appendChild(element);
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
link.removeChild(element);
});
} else {
bar.innerHTML = 'Error: ' + response.description;
}
} else if (respStatus === 413) {
link.textContent = 'File too big!';
url.appendChild(link);
} else {
var response = JSON.parse(xhr.responseText);
link.textContent = response.description;
url.appendChild(link);
}
}
/**
* Updates the page while the file is being uploaded.
*
* @param {File} file
* @param {HTMLLIElement} row
*/
function uploadFile(file, row) {
var bar = row.querySelector('.file-progress');
var percentIndicator = row.querySelector('.progress-percent');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://pomf.lain.la/upload.php');
xhr['row'] = row;
xhr['bar'] = bar;
xhr['percent'] = percentIndicator;
xhr.upload['bar'] = bar;
xhr.upload['percent'] = percentIndicator;
xhr.addEventListener('load', handleUploadComplete, false);
xhr.upload.onprogress = handleUploadProgress;
var form = new FormData();
form.append('files[]', file);
xhr.send(form);
}
function uploadFile(file, row) {
var bar = row.querySelector('.file-progress');
var percentIndicator = row.querySelector('.progress-percent');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://fileditch.com/upload.php');
xhr['row'] = row;
xhr['bar'] = bar;
xhr['percent'] = percentIndicator;
xhr.upload['bar'] = bar;
xhr.upload['percent'] = percentIndicator;
xhr.addEventListener('load', handleUploadComplete, false);
xhr.upload.onprogress = handleUploadProgress;
var form = new FormData();
form.append('files[]', file);
xhr.send(form);
}
/**
* Prevents the browser for allowing the normal actions associated with an event.
* This is used by event handlers to allow custom functionality without
* having to worry about the other consequences of that action.
*
* @param {Event} evt
*/
function stopDefaultEvent(evt) {
evt.stopPropagation();
evt.preventDefault();
}
/**
* Adds 1 to the state and changes the text.
*
* @param {Object} state
* @param {HTMLButtonElement} element
* @param {DragEvent} evt
*/
function handleDrag(state, element, evt) {
stopDefaultEvent(evt);
if (state.dragCount == 1) {
element.textContent = 'Drop it here~';
}
state.dragCount += 1;
}
/**
* Subtracts 1 from the state and changes the text back.
*
* @param {Object} state
* @param {HTMLButtonElement} element
* @param {DragEvent} evt
*/
function handleDragAway(state, element, evt) {
stopDefaultEvent(evt);
state.dragCount -= 1;
if (state.dragCount == 0) {
element.textContent = 'Select or drop file(s)';
}
}
/**
* Prepares files for uploading after being added via drag-drop.
*
* @param {Object} state
* @param {HTMLButtonElement} element
* @param {DragEvent} evt
*/
function handleDragDrop(state, element, evt) {
stopDefaultEvent(evt);
handleDragAway(state, element, evt);
var len = evt.dataTransfer.files.length;
for (var i = 0; i < len; i++) {
var file = evt.dataTransfer.files[i];
var row = addRow(file);
uploadFile(file, row);
}
}
/**
* Prepares the files to be uploaded when they're added to the <input> element.
*
* @param {InputEvent} evt
*/
function uploadFiles(evt) {
var len = evt.target.files.length;
// For each file, make a row, and upload the file.
for (var i = 0; i < len; i++) {
var file = evt.target.files[i];
var row = addRow(file);
uploadFile(file, row);
}
}
/**
* Opens up a "Select files.." dialog window to allow users to select files to upload.
*
* @param {HTMLInputElement} target
* @param {InputEvent} evt
*/
function selectFiles(target, evt) {
stopDefaultEvent(evt);
target.click();
}
/* Handles the pasting function */
window.addEventListener("paste", e => {
var len = e.clipboardData.files.length;
for (var i = 0; i < len; i++) {
var file = e.clipboardData.files[i];
var row = addRow(file);
uploadFile(file, row);
}
});
/* Set-up the event handlers for the <button>, <input> and the window itself
and also set the "js" class on selector "#upload-form", presumably to
allow custom styles for clients running javascript. */
var state = {dragCount: 0};
var uploadButton = document.getElementById('upload-btn');
window.addEventListener('dragenter', handleDrag.bind(this, state, uploadButton), false);
window.addEventListener('dragleave', handleDragAway.bind(this, state, uploadButton), false);
window.addEventListener('drop', handleDragAway.bind(this, state, uploadButton), false);
window.addEventListener('dragover', stopDefaultEvent, false);
var uploadInput = document.getElementById('upload-input');
uploadInput.addEventListener('change', uploadFiles);
uploadButton.addEventListener('click', selectFiles.bind(this, uploadInput));
uploadButton.addEventListener('drop', handleDragDrop.bind(this, state, uploadButton), false);
document.getElementById('upload-form').classList.add('js');
});

57
tools/multiup/test2.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Pomf &lt;%= pkg.version %&gt;" />
<title>Pomf.lain.la</title>
<link rel="icon" href="favicon.ico" />
<!--<link rel="stylesheet" href="pomf.min.css" />-->
<script src="test.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>An absurdly powerful Pomf clone.</h1>
<p class="lead">Max upload size is 1&nbsp;GiB, wow! read the <a href="/f/faq.html">
<abbr title="Frequently asked questions">FAQ</abbr>
</a>
</p>
<form id="upload-form" enctype="multipart/form-data" method="post" action="upload.php?output=html">
<button id="upload-btn" class="btn" type="button">Select or drop file(s)</button>
<input type="file" id="upload-input" name="files[]" multiple data-max-size="1024MiB">
<input type="submit" value="Submit">
</form>
<ul id="upload-filelist"></ul>
</div>
<!--<p class="alert alert-error">We're gettin' a business gigabit fiber port! There will be a bit of downtime on December 1st for this upgrade.</p>-->
<p class="alert alert-info">
<a href="https://infrablog.lain.la/">Interested in how this thing runs? Check out the Infrablog!</a>
</p>
</p>
</span>
<nav>
<ul>
<li>
<a href="/">Pomf</a>
</li>
<li>
<a href="tools.html">Tools</a>
</li>
<li>
<a href="https://github.com/pomf/pomf">Git</a>
</li>
<li>
<a href="https://infrablog.lain.la/transparency">Transparency</a>
</li>
<li>
<a href="https://pomf.lain.la/f/faq.html">Terms & Privacy</a>
</li>
<li>
<a href="https://infrablog.lain.la/funding-for-ideas-short">Donate</a>
</li>
</ul>
</nav>
</div>
</body>
</html>