scratch – Rev 135
?pathlinks?
<!DOCTYPE html>
<html lang="en" ng-app="scratch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<!-- DropZone -->
<link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
<!-- TagsInput -->
<link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">
<!-- Site-wide style CCS -->
<link href="css/style.css" rel="stylesheet">
<!-- Local style -->
<link href="css/files/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 class="active"><a href="#">File</a></li>
<li><a href="text.html">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 id="actions" class="row">
<div class="col-lg-5">
<div class="btn-group btn-group-justified" role="group">
<!-- The fileinput-button span is used to style the file input field as button -->
<div class="btn-group" role="group">
<button id="uploadbutton" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
<span>Add...</span>
</button>
</div>
<div class="btn-group" role="group">
<button type="submit" class="btn btn-default start">
<i class="glyphicon glyphicon-upload"></i>
<span>Upload All</span>
</button>
</div>
<div class="btn-group" role="group">
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel All</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body" id="uploadpanel">
<div class="table table-striped files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
</div>
<div class="upload-details-column">
<p class="upload-filename" data-dz-name></p>
<label for="file-upload-url">Download URL:</label>
<div class="input-group">
<input id="file-upload-url" type="text" class="form-control upload-url" readonly>
<span class="input-group-btn">
<button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
</span>
<span class="input-group-btn">
<button id="btn-facebook" class="btn btn-default url-facebook-button" type="button" disabled><i class="fa fa-facebook"></i></button>
</span>
<span class="input-group-btn">
<button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
</span>
</div>
<label for="file-upload-url">Delete URL:</label>
<div class="input-group">
<input id="file-delete-url" type="text" class="form-control delete-url" readonly>
<span class="input-group-btn">
<button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
</span>
</div>
<label for="file-tags">Tags:</label>
<div class="input-group">
<!-- <select id="file-tags" multiple class="form-control file-tags"></select> -->
<input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/>
</div>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div id="progress" class="progress active" role="progressbar">
<div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button id="start" class="btn btn-default start">
<i class="glyphicon glyphicon-upload"></i>
<span>Upload</span>
</button>
<button id="cancel" data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button id="remove" data-dz-remove class="btn btn-danger remove">
<i class="glyphicon glyphicon-remove"></i>
<span>Remove</span>
</button>
</div>
</div>
</div>
</div>
<!-- The global file processing state -->
<div class="fileupload-process">
<div id="total-progress" class="progress active" role="progressbar">
<div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
</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>
<!-- DropZone -->
<script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
<!-- Clipboard -->
<script src="bower_components/clipboard/dist/clipboard.min.js"></script>
<!-- TagsInput -->
<!-- <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> -->
<!-- BootStrap TokenField -->
<script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script>
<!-- Angular Initialization. -->
<script>
var app = angular.module('scratch', []);
</script>
<script>
$(document).ready(() => {
$.get('session.php').then((token) => {
// Get the template HTML and remove it from the doument
var previewNode = document
.querySelector('#template');
previewNode.id = '';
var previewTemplate = previewNode
.parentNode
.innerHTML;
previewNode
.parentNode
.removeChild(previewNode);
var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
url: 'file.php', // Set the url
paramName: 'file',
thumbnailWidth: 80,
thumbnailHeight: 80,
//parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: '#previews', // Container to display the previews
clickable: [
'#uploadbutton',
'#uploadpanel'
],
//clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
}).on('sending', (file, xhr, formData) => {
// Append session token.
formData.append('token', token);
// Append tags to the form data.
const tagsBoxID = file
.previewElement
.querySelector('.file-tags')
.getAttribute('id');
const tags = $('#' + tagsBoxID)
.tokenfield('getTokens')
.map((token) => {
return token.value;
});
formData.append('tags', JSON.stringify(tags));
// And disable the tags bar.
$('#' + tagsBoxID).tokenfield('readonly');
$('#' + tagsBoxID).tokenfield('disable');
}).on('addedfile', (file) => {
// Hookup the start button.
file.previewElement.querySelector('.start').onclick = () => {
myDropzone.enqueueFile(file);
};
// Set the ID of the URL box.
const boxURLID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#file-upload-url')
.setAttribute('id', boxURLID);
// Set the ID of the delete URL box.
const deleteBoxURLID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#file-delete-url')
.setAttribute('id', deleteBoxURLID);
// Set the ID of the URL clipboard button.
const clipButtonID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#btn-clipboard')
.setAttribute('data-clipboard-target', '#' + boxURLID)
file
.previewElement
.querySelector('#btn-clipboard')
.setAttribute('id', clipButtonID);
new Clipboard('#' + clipButtonID);
// Set the ID of the delete URL clipboard button.
const clipButtonDeleteID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#btn-clipboard-delete')
.setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
file
.previewElement
.querySelector('#btn-clipboard-delete')
.setAttribute('id', clipButtonDeleteID);
new Clipboard('#' + clipButtonDeleteID);
// Set the ID of the mailto button.
const mailToButtonID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#btn-mailto')
.setAttribute('id', mailToButtonID);
// Set the ID of the facebook button.
const faceBookButtonID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#btn-facebook')
.setAttribute('id', faceBookButtonID);
// Set the ID of the tags input.
const tagsBoxID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector('#file-tags')
.setAttribute('id', tagsBoxID);
$('#' + tagsBoxID).tokenfield();
}).on('totaluploadprogress', (progress) => {
document
.querySelector('#total-progress .progress-bar')
.style
.width = progress + '%';
}).on('sending', (file) => {
// Show the total progress bar when upload starts
document.querySelector("#total-progress")
.style
.opacity = 1;
// And disable the start button.
file
.previewElement
.querySelector('.start')
.setAttribute('disabled', 'disabled');
}).on('queuecomplete', (progress) => {
document.querySelector('#total-progress')
.style
.opacity = '0';
}).on('success', (file, data) => {
// Serialize JSON to object.
data = JSON.parse(data);
file
.previewElement
.querySelector(".upload-url")
.value = location.protocol
.concat("//")
.concat(window.location.hostname)
.concat("/")
.concat(data.hash);
file
.previewElement
.querySelector('.delete-url')
.value = location.protocol.concat('//')
.concat(window.location.hostname)
.concat('/')
.concat(data.timestamp)
.concat('/')
.concat(data.hash);
file
.previewElement
.querySelector('.start')
.setAttribute('disabled', 'disabled');
file
.previewElement
.querySelector('.cancel')
.setAttribute('disabled', 'disabled');
// Enable the mailto button.
$('.url-mailto-button').on('click', () => {
window.location.href = "mailto:?subject="+
encodeURIComponent("Can't scratch this!") + "&body=" +
encodeURIComponent($('.upload-url').val());
});
// Enable or disable the facebook opengraph URL.
switch(data.opengraph) {
case true:
// Enable the facebook button.
file
.previewElement
.querySelector('.url-facebook-button')
.removeAttribute('disabled');
// Change the URL when the user clicks the button.
$('.url-facebook-button').on('click', () => {
$('.upload-url')
.val(
location.protocol.concat('//')
.concat(window.location.hostname)
.concat('/')
.concat('og')
.concat('/')
.concat(data.hash)
);
});
break;
default:
// Disable the facebook button.
file
.previewElement
.querySelector('.url-facebook-button')
.setAttribute('disabled', 'disabled');
break;
}
});
document.querySelector('#actions .start').onclick = () => {
myDropzone.enqueueFiles(
myDropzone
.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector('#actions .cancel').onclick = () => {
myDropzone.removeAllFiles(true);
};
});
// Scroll to the panel.
$('html, body').animate({
scrollTop: $('#main-panel').offset().top
}, 'slow');
});
</script>
<!-- Jumbotron parallax effect -->
<script>
const jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
</body>
</html>