/file.html |
@@ -10,7 +10,7 @@ |
<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 --> |
@@ -64,7 +64,7 @@ |
</button> |
</div> |
<div class="btn-group" role="group"> |
<button type="reset" class="btn btn-default cancel"> |
<button type="reset" class="btn btn-danger cancel"> |
<i class="glyphicon glyphicon-ban-circle"></i> |
<span>Cancel All</span> |
</button> |
@@ -113,7 +113,7 @@ |
<i class="glyphicon glyphicon-upload"></i> |
<span>Upload</span> |
</button> |
<button id="cancel" data-dz-cancel class="btn btn-default cancel"> |
<button id="cancel" data-dz-remove class="btn btn-warning cancel"> |
<i class="glyphicon glyphicon-ban-circle"></i> |
<span>Cancel</span> |
</button> |
@@ -152,211 +152,216 @@ |
<script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
<script> |
$(document).ready(() => { |
// 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("addedfile", (file) => { |
// Hookup the start button |
file.previewElement.querySelector(".start").onclick = () => { |
myDropzone.enqueueFile(file); |
}; |
}).on("totaluploadprogress", (progress) => { |
document |
.querySelector("#total-progress .progress-bar") |
$.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); |
}).on('addedfile', (file) => { |
// Hookup the start button |
file.previewElement.querySelector(".start").onclick = () => { |
myDropzone.enqueueFile(file); |
}; |
}).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 |
.width = progress + "%"; |
}).on("sending", (file) => { |
// Show the total progress bar when upload starts |
document.querySelector("#total-progress") |
.style |
.opacity = 1; |
.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); |
// 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); |
|
// Set the ID of the URL box. |
const boxURLID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#URL") |
.value = location.protocol |
.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.hash); |
// Set the ID of the URL box. |
const boxURLID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#URL") |
.value = location.protocol |
.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.hash); |
|
file |
.previewElement |
.querySelector("#URL") |
.setAttribute('id', boxURLID) |
file |
.previewElement |
.querySelector("#URL") |
.setAttribute('id', boxURLID) |
|
// Set the ID of the delete URL box. |
const deleteBoxURLID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#deleteURL") |
.value = location.protocol.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.timestamp) |
.concat("/") |
.concat(data.hash); |
// Set the ID of the delete URL box. |
const deleteBoxURLID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#deleteURL") |
.value = location.protocol.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.timestamp) |
.concat("/") |
.concat(data.hash); |
|
file |
.previewElement |
.querySelector("#deleteURL") |
.setAttribute('id', deleteBoxURLID) |
file |
.previewElement |
.querySelector("#deleteURL") |
.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) |
// 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); |
file |
.previewElement |
.querySelector("#btn-clipboard") |
.setAttribute('id', clipButtonID); |
|
new Clipboard('#' + 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) |
// 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); |
file |
.previewElement |
.querySelector("#btn-clipboard-delete") |
.setAttribute('id', clipButtonDeleteID); |
|
new Clipboard('#' + clipButtonDeleteID); |
new Clipboard('#' + clipButtonDeleteID); |
|
// Set the ID of the mailto button. |
const mailToButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
// Set the ID of the mailto button. |
const mailToButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
|
file |
.previewElement |
.querySelector("#btn-mailto") |
.setAttribute('id', mailToButtonID); |
file |
.previewElement |
.querySelector("#btn-mailto") |
.setAttribute('id', mailToButtonID); |
|
file |
.previewElement |
.querySelector(".start") |
.setAttribute("disabled", "disabled"); |
file |
.previewElement |
.querySelector(".cancel") |
.setAttribute("disabled", "disabled"); |
file |
.previewElement |
.querySelector(".start") |
.setAttribute("disabled", "disabled"); |
file |
.previewElement |
.querySelector(".cancel") |
.setAttribute("disabled", "disabled"); |
|
$('#' + mailToButtonID).on('click', () => { |
window.location.href = "mailto:?subject="+ |
encodeURIComponent("Can't scratch this!") + "&body=" + |
encodeURIComponent($('#' + boxURLID).val()); |
}); |
$('#' + mailToButtonID).on('click', () => { |
window.location.href = "mailto:?subject="+ |
encodeURIComponent("Can't scratch this!") + "&body=" + |
encodeURIComponent($('#' + boxURLID).val()); |
}); |
|
// Set the ID of the facebook button. |
const faceBookButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
// Set the ID of the facebook button. |
const faceBookButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
|
file |
.previewElement |
.querySelector("#btn-facebook") |
.setAttribute('id', faceBookButtonID); |
file |
.previewElement |
.querySelector("#btn-facebook") |
.setAttribute('id', faceBookButtonID); |
|
switch(data.opengraph) { |
case true: |
// Enable the facebook button. |
file |
.previewElement |
.querySelector('#' + faceBookButtonID) |
.removeAttribute("disabled"); |
switch(data.opengraph) { |
case true: |
// Enable the facebook button. |
file |
.previewElement |
.querySelector('#' + faceBookButtonID) |
.removeAttribute("disabled"); |
|
// Change the URL when the user clicks the button. |
$('#' + faceBookButtonID).on('click', () => { |
$('#' + boxURLID) |
.val( |
location.protocol.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat("og") |
.concat("/") |
.concat(data.hash) |
); |
}); |
break; |
default: |
// Disable the facebook button. |
file |
.previewElement |
.querySelector('#' + faceBookButtonID) |
.setAttribute("disabled", "disabled"); |
break; |
} |
// Change the URL when the user clicks the button. |
$('#' + faceBookButtonID).on('click', () => { |
$('#' + boxURLID) |
.val( |
location.protocol.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat("og") |
.concat("/") |
.concat(data.hash) |
); |
}); |
break; |
default: |
// Disable the facebook button. |
file |
.previewElement |
.querySelector('#' + faceBookButtonID) |
.setAttribute("disabled", "disabled"); |
break; |
} |
}); |
|
document.querySelector("#actions .start").onclick = () => { |
myDropzone.enqueueFiles( |
myDropzone |
.getFilesWithStatus(Dropzone.ADDED)); |
}; |
|
document.querySelector("#actions .cancel").onclick = () => { |
myDropzone.removeAllFiles(true); |
}; |
}); |
|
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 |