scratch – Rev
?pathlinks?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="quick asset upload">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
<title>Quickload</title>
<!-- Polyfill -->
<script src="js/polyfill/polyfill.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/bootstrap/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/bootstrap/html5shiv.min.js"></script>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->
<!-- Trumbowyg -->
<link href="css/trumbowyg/trumbowyg.min.css" rel="stylesheet">
<!-- Local style -->
<link href="css/text/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Quickload</h1>
<p>Asset sharing platform.</p>
</div>
<ul class="nav nav-tabs">
<li><a href="index.html">Home</a></li>
<li><a href="files.html">Files</a></li>
<li class="active"><a href="#">Text</a></li>
</ul>
<div class="panel panel-default">
<div class="panel-heading">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button id="save" class="btn btn-default" type="button">
<i class="glyphicon glyphicon-globe"></i>
</button>
</span>
<span class="input-group-btn">
<button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL"><img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to Clipboard"></button>
</span>
<input id="URL" type="text" class="form-control" readonly>
</div>
</div>
<form id="nick-form" data-toggle="validator" role="form">
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-btn">
<button id="go" class="btn btn-default" type="button">
<i class="glyphicon glyphicon-play"></i>
</button>
</span>
<span class="input-group-btn">
<button id="copy-nick" class="btn btn-default" type="button" data-clipboard-target="#nick"><img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to Clipboard"></button>
</span>
<input id="nick" type="text" class="form-control" pattern="^[A-Za-z0-9]{32}$" maxlength="32" minlength="32" data-error="The fingerprint is malformed." required>
</div>
</div>
</form>
</div>
<div class="panel-body" id="editorpanel">
<div id="trumbowyg" style="display: none; font-family: monospace;">
</div>
</div>
</div>
</div> <!-- /container -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
</div>
</div>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
<!-- Trumbowyg -->
<script src="js/trumbowyg/trumbowyg.min.js"></script>
<!-- Clipboard -->
<script src="js/clipboard/clipboard.min.js"></script>
<!-- Fingerprint 2 -->
<script src="js/fingerprintjs/fingerprint2.min.js"></script>
<!-- js-cookie -->
<script src="js/jscookie/js.cookie.js"></script>
<!-- Bootstrap Validator -->
<script src="js/validator/validator.min.js"></script>
<script>
$(document).ready(() => {
// Get the fingerprint.
new Fingerprint2().get((result, components) => {
// Set the nick as a cookie.
var nick = Cookies.get('nick');
if(!nick || nick.length !== 32)
Cookies.set('nick', result, { path: '' });
else
result = nick;
// Set the nick.
$('#nick').val(result);
new Clipboard('#copy-nick');
// Load the editor.
$('#trumbowyg').trumbowyg({
autogrow: true,
disabled: true
}).on('tbwchange', () => {
$('#editor').trumbowyg('disable');
$.post('share-text.php', {
data: $('#trumbowyg').trumbowyg('html'),
fingerprint: result,
action: 'SAVE'
}).done((data) => {
$('#trumbowyg').trumbowyg('enable');
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
});
});
// Retrieve the contents of the shared file.
$.post('share-text.php',
{
timestamp: window.performance.now(),
fingerprint: result,
action: 'LOAD'
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
// Enable the Clipboard button.
new Clipboard('#copy-url');
$('#save').click(() => {
$('#editor').trumbowyg('disable');
var formData = new FormData();
formData.append('file', new Blob(
[
$('#trumbowyg').trumbowyg('html')
]
),
'.html'
);
$.ajax({
url: 'upload-files.php',
type: 'POST',
data: formData,
// cache: false // FF
processData: false,
contentType: false
}).done((data) => {
$('#URL').val(data);
$('#trumbowyg').trumbowyg('enable');
}).fail(() => {
alert('failed');
$('#trumbowyg').trumbowyg('enable');
});
});
// When the user wants to assume a nickname.
$('#go').click(() => {
nick = $('#nick').val();
if(!nick || nick.length != 32)
return;
Cookies.set('nick', nick, { path: '' });
// Retrieve the contents of the shared file.
$.post('share-text.php',
{
timestamp: window.performance.now(),
fingerprint: nick,
action: 'LOAD'
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
});
});
});
</script>
</body>
</html>