scratch – Rev 125
?pathlinks?
<!DOCTYPE html>
<html lang="en" ng-app="scratch">
<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>scratch</title>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Trumbowyg -->
<link href="bower_components/trumbowyg/dist/ui/trumbowyg.min.css" rel="stylesheet">
<!-- Site-wide style CCS -->
<link href="css/style.css" rel="stylesheet">
<!-- Local style -->
<link href="css/text/style.css" rel="stylesheet">
<!-- Scratch Angular Includes -->
<ng-include src="'html/scratch-head-last.html'"></ng-include>
</head>
<body>
<!-- Scratch Angular Includes -->
<ng-include src="'html/scratch-body-first.html'"></ng-include>
<!-- Main component for a primary marketing message or call to action -->
<div class="paralax-background"></div>
<div class="jumbotron">
<h1>scratch copy</h1>
<p class="quote">the asset sharer</p>
</div>
<div class="container">
<ul class="nav nav-tabs">
<li><a href="index.html">Home</a></li>
<li><a href="file.html">File</a></li>
<li class="active"><a href="#">Text</a></li>
<li><a href="draw.html">Draw</a></li>
<li><a href="link.html">Link</a></li>
<li><a href="view.html">View</a></li>
</ul>
<div id="main-panel" 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" data-toggle="tooltip" data-placement="auto" title="Generate link.">
<i class="glyphicon glyphicon-share"></i>
</button>
</span>
<input id="URL" type="text" class="form-control" readonly>
<span class="input-group-btn">
<button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i>="#A020F0"></button>
</span>
</div>
</div>
<form id="nick-form" 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" data-toggle="tooltip" data-placement="auto" title="Load document.">
<i class="glyphicon glyphicon-play"></i>
</button>
</span>
<span class="input-group-btn">
<button id="reset" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Reset document.">
<i id="home-icon" class="glyphicon glyphicon-home"></i>
</button>
</span>
<input id="nick" type="text" class="form-control" pattern="^[A-Za-z0-9]{32}$" maxlength="32">
<span class="input-group-btn">
<button id="copy-nick" class="btn btn-default" type="button" data-clipboard-target="#nick" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
</span>
</div>
</div>
</form>
</div>
<div class="panel-body" id="editorpanel">
<div id="trumbowyg">
</div>
</div>
</div>
</div> <!-- /container -->
<div id="footer">
<div class="container">
<p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
</div>
</div>
<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Angular JS -->
<script src="bower_components/angular/angular.min.js"></script>
<!-- BootStrap -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Velocity -->
<script src="bower_components/velocity/velocity.min.js"></script>
<!-- Trumbowyg -->
<script src="bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
<!-- Clipboard -->
<script src="bower_components/clipboard/dist/clipboard.min.js"></script>
<!-- Fingerprint 2 -->
<script src="bower_components/fingerprintjs2/dist/fingerprint2.min.js"></script>
<!-- js-cookie -->
<script src="bower_components/js-cookie/src/js.cookie.js"></script>
<!-- Bootstrap Validator -->
<script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
<!-- Angular Initialization. -->
<script>
var app = angular.module('scratch', []);
</script>
<script>
$(document).ready(() => {
// Attach the form validator.
$('#nick-form').validator({
focus: false
}).on('invalid.bs.validator', () => {
$('#go').attr('disabled', true);
}).on('valid.bs.validator', () => {
$('#go').attr('disabled', false);
});
// Enable the Clipboard button.
new Clipboard('#copy-url');
// Get the fingerprint.
new Fingerprint2({
//excludeUserAgent: true,
//excludeLanguage: true,
excludeColorDepth: true,
excludeScreenResolution: true,
excludeAvailableScreenResolution: true,
//excludeTimezoneOffset: true,
excludeSessionStorage: true,
excludeIndexedDB: true,
excludeAddBehavior: true,
excludeOpenDatabase: true,
//excludeCpuClass: true,
//excludePlatform: true,
excludeDoNotTrack: true,
excludeCanvas: true,
excludeWebGL: true,
excludeAdBlock: true,
//excludeHasLiedLanguages: true,
//excludeHasLiedResolution: true,
//excludeHasLiedOs: true,
//excludeHasLiedBrowser: true,
excludeJsFonts: true,
excludeFlashFonts: true,
excludePlugins: true,
excludeIEPlugins: true,
//excludeTouchSupport: true,
excludePixelRatio: true
}).get((result, components) => {
// Set the nick as a cookie.
const fingerprint = result;
var nick = Cookies.get('nick');
if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick)) {
Cookies.set('nick', result, { path: '' });
nick = result;
}
else
result = nick;
// Set the nick.
$('#nick').val(result);
new Clipboard('#copy-nick');
if(fingerprint == nick)
$('#home-icon').addClass("text-success");
else
$('#home-icon').addClass("text-danger");
var autoSaveTimeoutID;
function saveTextFile() {
$.get('session.php').then((token) => {
$.post('text.php', {
data: $('#trumbowyg').trumbowyg('html'),
token: token,
fingerprint: result,
action: 'SAVE',
token: token
}).done((data) => {
// Visual feedback for a successful save.
$('#editorpanel')
.delay(250)
.velocity(
{
borderColor: '#ff99ff'
},
200)
.delay(500)
.velocity(
{
borderColor: '#ecf0f1'
},
200);
}).fail(() => {
// Reschedule saving of the file.
if(autoSaveTimeoutID)
window.clearTimeout(autoSaveTimeoutID);
autoSaveTimeoutID = window.setTimeout(saveTextFile, 250);
});
});
}
// Load the editor.
$('#trumbowyg').trumbowyg({
semantic: true,
autogrow: true,
disabled: true
}).on('tbwchange', () => {
// Clear the value of the URL box because the URL will have changed.
$('#URL').val('');
// Reschedule saving of the file.
if(autoSaveTimeoutID)
window.clearTimeout(autoSaveTimeoutID);
autoSaveTimeoutID = window.setTimeout(saveTextFile, 1000);
});
// Retrieve the contents of the shared file.
$('#trumbowyg').trumbowyg('disable');
$.get('session.php').then((token) => {
$.post('text.php',
{
timestamp: window.performance.now(),
fingerprint: result,
action: 'LOAD',
token: token
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
});
$('#save').click(() => {
$('#editor').trumbowyg('disable');
var formData = new FormData();
formData.append('file', new Blob(
[
$('#trumbowyg').trumbowyg('html')
]
),
'.html'
);
$.get('session.php').then((token) => {
formData.append('token', token);
$.ajax({
url: 'file.php',
type: 'POST',
data: formData,
// cache: false // FF
processData: false,
contentType: false
}).done((data) => {
// Serialize JSON to object.
data = JSON.parse(data);
$('#URL')
.val(
location.protocol
.concat("//")
.concat(window.location.hostname)
.concat("/")
.concat(data.hash)
);
$('#trumbowyg').trumbowyg('enable');
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
});
});
});
// When the button is clicked, navigate to the fingerprint.
$('#go').click(() => {
nick = $('#nick').val();
if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
return;
Cookies.set('nick', nick, { path: '' });
result = nick;
// Retrieve the contents of the shared file.
$('#editor').trumbowyg('disable');
$.get('session.php').then((token) => {
$.post('text.php',
{
timestamp: window.performance.now(),
fingerprint: nick,
action: 'LOAD',
token: token
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
if(fingerprint == nick)
$('#home-icon').addClass("text-success").removeClass("text-danger");
else
$('#home-icon').addClass("text-danger").removeClass("text-success");
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
});
});
// When the form is submitted, naigate to the fingerprint.
$('#nick-form').submit((e) => {
e.preventDefault();
nick = $('#nick').val();
if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
return;
Cookies.set('nick', nick, { path: '' });
result = nick;
// Retrieve the contents of the shared file.
$('#editor').trumbowyg('disable');
$.get('session.php').then((token) => {
$.post('text.php',
{
timestamp: window.performance.now(),
fingerprint: nick,
action: 'LOAD',
token: token
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
if(fingerprint == nick)
$('#home-icon').addClass("text-success").removeClass("text-danger");
else
$('#home-icon').addClass("text-danger").removeClass("text-success");
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
});
});
// While the nick is changing, navigate to the changed fingerprint.
$("#nick").on('input', () => {
nick = $('#nick').val();
if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
return;
Cookies.set('nick', nick, { path: '' });
result = nick;
// Retrieve the contents of the shared file.
$('#editor').trumbowyg('disable');
$.get('session.php').then((token) => {
$.post('text.php',
{
timestamp: window.performance.now(),
fingerprint: nick,
action: 'LOAD',
token: token
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
if(fingerprint == nick)
$('#home-icon').addClass("text-success").removeClass("text-danger");
else
$('#home-icon').addClass("text-danger").removeClass("text-success");
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
});
});
// When the reset button is pressed, navigate to the fingerprint.
$('#reset').click(() => {
Cookies.set('nick', fingerprint, { path: '' });
$('#nick').val(fingerprint);
result = fingerprint;
nick = fingerprint;
// Retrieve the contents of the shared file.
$('#editor').trumbowyg('disable');
$.get('session.php').then((token) => {
$.post('text.php',
{
timestamp: window.performance.now(),
fingerprint: fingerprint,
action: 'LOAD',
token: token
}).done((data) => {;
$('#trumbowyg')
.trumbowyg('html', data);
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
if(fingerprint == nick)
$('#home-icon').addClass("text-success").removeClass("text-danger");
else
$('#home-icon').addClass("text-danger").removeClass("text-success");
}).fail(() => {
$('#trumbowyg').trumbowyg('enable');
$('#trumbowyg').show();
});
});
});
});
// Scroll to the panel.
$('html, body').animate({
scrollTop: $('#main-panel').offset().top
}, 'slow');
});
</script>
<!-- Jumbotron parallax effect -->
<script>
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
</body>
</html>