Removed attachmentHelpers and moved functionality to AttachmentViewer
This commit is contained in:
parent
662b48fccf
commit
b9075d7708
3 changed files with 185 additions and 190 deletions
371
js/privatebin.js
371
js/privatebin.js
|
@ -308,185 +308,6 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
baseUri = null;
|
||||
}
|
||||
|
||||
me.attachmentHelpers = {
|
||||
attachmentData: undefined,
|
||||
file: undefined,
|
||||
$fileInput: undefined,
|
||||
|
||||
init: function () {
|
||||
me.attachmentHelpers.$fileInput = $('#file');
|
||||
me.attachmentHelpers.addDragDropHandler();
|
||||
},
|
||||
|
||||
/*
|
||||
* Read file data as dataURL using the FileReader API
|
||||
* https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsDataURL()
|
||||
*/
|
||||
readFileData: function (file) {
|
||||
if (typeof FileReader === 'undefined') {
|
||||
// revert loading status…
|
||||
AttachmentViewer.hideAttachment();
|
||||
AttachmentViewer.hideAttachmentPreview();
|
||||
Alert.showError(I18n._('Your browser does not support uploading encrypted files. Please use a newer browser.'));
|
||||
return;
|
||||
}
|
||||
|
||||
var fileReader = new FileReader();
|
||||
if (file === undefined) {
|
||||
file = me.attachmentHelpers.$fileInput[0].files[0];
|
||||
$('#dragAndDropFileName').text('');
|
||||
} else {
|
||||
$('#dragAndDropFileName').text(file.name);
|
||||
}
|
||||
|
||||
me.attachmentHelpers.file = file;
|
||||
|
||||
fileReader.onload = function (event) {
|
||||
var dataURL = event.target.result;
|
||||
me.attachmentHelpers.attachmentData = dataURL;
|
||||
|
||||
if (Editor.isPreview()) {
|
||||
me.attachmentHelpers.handleAttachmentPreview(AttachmentViewer.$attachmentPreview, dataURL);
|
||||
}
|
||||
};
|
||||
fileReader.readAsDataURL(file);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle the preview of files that can either be an image, video, audio or pdf element.
|
||||
* @argument {DOM Element} targetElement where the preview should be appended.
|
||||
* @argument {File Data} data of the file to be displayed.
|
||||
*/
|
||||
handleAttachmentPreview: function (targetElement, data) {
|
||||
if (data) {
|
||||
var mimeType = this.getMimeTypeFromDataURL(data);
|
||||
|
||||
if (mimeType.match(/image\//i)) {
|
||||
this.showImagePreview(targetElement, data);
|
||||
} else if (mimeType.match(/video\//i)) {
|
||||
this.showVideoPreview(targetElement, data, mimeType);
|
||||
} else if (mimeType.match(/audio\//i)) {
|
||||
this.showAudioPreview(targetElement, data, mimeType);
|
||||
} else if (mimeType.match(/\/pdf/i)) {
|
||||
this.showPDFPreview(targetElement, data);
|
||||
}
|
||||
//else {
|
||||
//console.log("file but no image/video/audio/pdf");
|
||||
//}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get Mime Type from a DataURL
|
||||
*
|
||||
* @param {type} dataURL
|
||||
* @returns Mime Type from a dataURL as obtained for a file using the FileReader API https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsDataURL()
|
||||
*/
|
||||
getMimeTypeFromDataURL: function (dataURL) {
|
||||
return dataURL.slice(dataURL.indexOf('data:') + 5, dataURL.indexOf(';base64,'));
|
||||
},
|
||||
|
||||
showImagePreview: function (targetElement, image) {
|
||||
targetElement.html(
|
||||
$(document.createElement('img'))
|
||||
.attr('src', image)
|
||||
.attr('class', 'img-thumbnail')
|
||||
);
|
||||
targetElement.removeClass('hidden');
|
||||
},
|
||||
|
||||
showVideoPreview: function (targetElement, video, mimeType) {
|
||||
var videoPlayer = $(document.createElement('video'))
|
||||
.attr('controls', 'true')
|
||||
.attr('autoplay', 'true')
|
||||
.attr('loop', 'true')
|
||||
.attr('class', 'img-thumbnail');
|
||||
|
||||
videoPlayer.append($(document.createElement('source'))
|
||||
.attr('type', mimeType)
|
||||
.attr('src', video));
|
||||
targetElement.html(videoPlayer);
|
||||
targetElement.removeClass('hidden');
|
||||
},
|
||||
|
||||
showAudioPreview: function (targetElement, audio, mimeType) {
|
||||
var audioPlayer = $(document.createElement('audio'))
|
||||
.attr('controls', 'true')
|
||||
.attr('autoplay', 'true');
|
||||
|
||||
audioPlayer.append($(document.createElement('source'))
|
||||
.attr('type', mimeType)
|
||||
.attr('src', audio));
|
||||
targetElement.html(audioPlayer);
|
||||
targetElement.removeClass('hidden');
|
||||
},
|
||||
|
||||
showPDFPreview: function (targetElement, pdf) {
|
||||
//PDFs are only displayed if the filesize is smaller than about 1MB (after base64 encoding).
|
||||
//Bigger filesizes currently cause crashes in various browsers.
|
||||
//See also: https://code.google.com/p/chromium/issues/detail?id=69227
|
||||
|
||||
//Firefox crashes with files that are about 1.5MB
|
||||
//The performance with 1MB files is bareable
|
||||
if (pdf.length < 1398488) {
|
||||
|
||||
//Fallback for browsers, that don't support the vh unit
|
||||
var clientHeight = $(window).height();
|
||||
|
||||
targetElement.html(
|
||||
$(document.createElement('embed'))
|
||||
.attr('src', pdf)
|
||||
.attr('type', 'application/pdf')
|
||||
.attr('class', 'pdfPreview')
|
||||
.css('height', clientHeight)
|
||||
);
|
||||
targetElement.removeClass('hidden');
|
||||
} else {
|
||||
Alert.showError(I18n._('File too large, to display a preview. Please download the attachment.'));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Attaches the file attachment drag & drop handler to the page.
|
||||
* @returns {undefined}
|
||||
*/
|
||||
addDragDropHandler: function () {
|
||||
var fileInput = me.attachmentHelpers.$fileInput;
|
||||
|
||||
if (typeof fileInput === 'undefined' || fileInput.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var ignoreDragDrop = function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
var drop = function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
if (fileInput) {
|
||||
var file = event.dataTransfer.files[0];
|
||||
//Clear the file input:
|
||||
fileInput.wrap('<form>').closest('form').get(0).reset();
|
||||
fileInput.unwrap();
|
||||
//Only works in Chrome:
|
||||
//fileInput[0].files = e.dataTransfer.files;
|
||||
|
||||
me.attachmentHelpers.readFileData(file);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("drop", drop, false);
|
||||
document.addEventListener("dragenter", ignoreDragDrop, false);
|
||||
document.addEventListener("dragover", ignoreDragDrop, false);
|
||||
fileInput.on("change", function () {
|
||||
me.attachmentHelpers.readFileData();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return me;
|
||||
})();
|
||||
|
||||
|
@ -1775,8 +1596,8 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
|
||||
// show preview
|
||||
PasteViewer.setText($message.val());
|
||||
var attachmentData = Helper.attachmentHelpers.attachmentData || AttachmentViewer.$attachmentLink.attr('href');
|
||||
Helper.attachmentHelpers.handleAttachmentPreview(AttachmentViewer.$attachmentPreview, attachmentData);
|
||||
var attachmentData = AttachmentViewer.attachmentData || AttachmentViewer.$attachmentLink.attr('href');
|
||||
AttachmentViewer.handleAttachmentPreview(AttachmentViewer.$attachmentPreview, attachmentData);
|
||||
PasteViewer.run();
|
||||
|
||||
// finish
|
||||
|
@ -2166,6 +1987,9 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
me.$attachmentLink = undefined;
|
||||
me.$attachmentPreview = undefined;
|
||||
me.$attachment = undefined;
|
||||
me.attachmentData = undefined;
|
||||
me.file = undefined;
|
||||
me.$fileInput = undefined;
|
||||
|
||||
var attachmentHasPreview = false;
|
||||
|
||||
|
@ -2184,7 +2008,7 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
me.$attachmentLink.attr('download', fileName);
|
||||
}
|
||||
|
||||
Helper.attachmentHelpers.handleAttachmentPreview(AttachmentViewer.$attachmentPreview, attachmentData);
|
||||
AttachmentViewer.handleAttachmentPreview(AttachmentViewer.$attachmentPreview, attachmentData);
|
||||
attachmentHasPreview = true;
|
||||
|
||||
}
|
||||
|
@ -2221,8 +2045,8 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
me.$attachmentLink.prop('download', '');
|
||||
me.$attachmentPreview.html('');
|
||||
|
||||
Helper.attachmentHelpers.file = undefined;
|
||||
Helper.attachmentHelpers.attachmentData = undefined;
|
||||
AttachmentViewer.file = undefined;
|
||||
AttachmentViewer.attachmentData = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -2297,6 +2121,175 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
I18n._(me.$attachmentLink, label, me.$attachmentLink.attr('download'));
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Read file data as dataURL using the FileReader API
|
||||
* https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsDataURL()
|
||||
*/
|
||||
me.readFileData = function (file) {
|
||||
if (typeof FileReader === 'undefined') {
|
||||
// revert loading status…
|
||||
AttachmentViewer.hideAttachment();
|
||||
AttachmentViewer.hideAttachmentPreview();
|
||||
Alert.showError(I18n._('Your browser does not support uploading encrypted files. Please use a newer browser.'));
|
||||
return;
|
||||
}
|
||||
|
||||
var fileReader = new FileReader();
|
||||
if (file === undefined) {
|
||||
file = me.$fileInput[0].files[0];
|
||||
$('#dragAndDropFileName').text('');
|
||||
} else {
|
||||
$('#dragAndDropFileName').text(file.name);
|
||||
}
|
||||
|
||||
me.file = file;
|
||||
|
||||
fileReader.onload = function (event) {
|
||||
var dataURL = event.target.result;
|
||||
me.attachmentData = dataURL;
|
||||
|
||||
if (Editor.isPreview()) {
|
||||
me.handleAttachmentPreview(AttachmentViewer.$attachmentPreview, dataURL);
|
||||
}
|
||||
};
|
||||
fileReader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the preview of files that can either be an image, video, audio or pdf element.
|
||||
* @argument {DOM Element} targetElement where the preview should be appended.
|
||||
* @argument {File Data} data of the file to be displayed.
|
||||
*/
|
||||
me.handleAttachmentPreview = function (targetElement, data) {
|
||||
if (data) {
|
||||
var mimeType = this.getMimeTypeFromDataURL(data);
|
||||
|
||||
if (mimeType.match(/image\//i)) {
|
||||
this.showImagePreview(targetElement, data);
|
||||
} else if (mimeType.match(/video\//i)) {
|
||||
this.showVideoPreview(targetElement, data, mimeType);
|
||||
} else if (mimeType.match(/audio\//i)) {
|
||||
this.showAudioPreview(targetElement, data, mimeType);
|
||||
} else if (mimeType.match(/\/pdf/i)) {
|
||||
this.showPDFPreview(targetElement, data);
|
||||
}
|
||||
//else {
|
||||
//console.log("file but no image/video/audio/pdf");
|
||||
//}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get Mime Type from a DataURL
|
||||
*
|
||||
* @param {type} dataURL
|
||||
* @returns Mime Type from a dataURL as obtained for a file using the FileReader API https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsDataURL()
|
||||
*/
|
||||
me.getMimeTypeFromDataURL = function (dataURL) {
|
||||
return dataURL.slice(dataURL.indexOf('data:') + 5, dataURL.indexOf(';base64,'));
|
||||
};
|
||||
|
||||
me.showImagePreview = function (targetElement, image) {
|
||||
targetElement.html(
|
||||
$(document.createElement('img'))
|
||||
.attr('src', image)
|
||||
.attr('class', 'img-thumbnail')
|
||||
);
|
||||
targetElement.removeClass('hidden');
|
||||
};
|
||||
|
||||
me.showVideoPreview = function (targetElement, video, mimeType) {
|
||||
var videoPlayer = $(document.createElement('video'))
|
||||
.attr('controls', 'true')
|
||||
.attr('autoplay', 'true')
|
||||
.attr('loop', 'true')
|
||||
.attr('class', 'img-thumbnail');
|
||||
|
||||
videoPlayer.append($(document.createElement('source'))
|
||||
.attr('type', mimeType)
|
||||
.attr('src', video));
|
||||
targetElement.html(videoPlayer);
|
||||
targetElement.removeClass('hidden');
|
||||
};
|
||||
|
||||
me.showAudioPreview = function (targetElement, audio, mimeType) {
|
||||
var audioPlayer = $(document.createElement('audio'))
|
||||
.attr('controls', 'true')
|
||||
.attr('autoplay', 'true');
|
||||
|
||||
audioPlayer.append($(document.createElement('source'))
|
||||
.attr('type', mimeType)
|
||||
.attr('src', audio));
|
||||
targetElement.html(audioPlayer);
|
||||
targetElement.removeClass('hidden');
|
||||
};
|
||||
|
||||
me.showPDFPreview = function (targetElement, pdf) {
|
||||
//PDFs are only displayed if the filesize is smaller than about 1MB (after base64 encoding).
|
||||
//Bigger filesizes currently cause crashes in various browsers.
|
||||
//See also: https://code.google.com/p/chromium/issues/detail?id=69227
|
||||
|
||||
//Firefox crashes with files that are about 1.5MB
|
||||
//The performance with 1MB files is bareable
|
||||
if (pdf.length < 1398488) {
|
||||
|
||||
//Fallback for browsers, that don't support the vh unit
|
||||
var clientHeight = $(window).height();
|
||||
|
||||
targetElement.html(
|
||||
$(document.createElement('embed'))
|
||||
.attr('src', pdf)
|
||||
.attr('type', 'application/pdf')
|
||||
.attr('class', 'pdfPreview')
|
||||
.css('height', clientHeight)
|
||||
);
|
||||
targetElement.removeClass('hidden');
|
||||
} else {
|
||||
Alert.showError(I18n._('File too large, to display a preview. Please download the attachment.'));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Attaches the file attachment drag & drop handler to the page.
|
||||
* @returns {undefined}
|
||||
*/
|
||||
me.addDragDropHandler = function () {
|
||||
var fileInput = me.$fileInput;
|
||||
|
||||
if (typeof fileInput === 'undefined' || fileInput.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var ignoreDragDrop = function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
var drop = function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
if (fileInput) {
|
||||
var file = event.dataTransfer.files[0];
|
||||
//Clear the file input:
|
||||
fileInput.wrap('<form>').closest('form').get(0).reset();
|
||||
fileInput.unwrap();
|
||||
//Only works in Chrome:
|
||||
//fileInput[0].files = e.dataTransfer.files;
|
||||
|
||||
me.readFileData(file);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("drop", drop, false);
|
||||
document.addEventListener("dragenter", ignoreDragDrop, false);
|
||||
document.addEventListener("dragover", ignoreDragDrop, false);
|
||||
fileInput.on("change", function () {
|
||||
me.readFileData();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* initiate
|
||||
*
|
||||
|
@ -2310,6 +2303,9 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
me.$attachment = $('#attachment');
|
||||
me.$attachmentLink = $('#attachment a');
|
||||
me.$attachmentPreview = $('#attachmentPreview');
|
||||
|
||||
me.$fileInput = $('#file');
|
||||
me.addDragDropHandler();
|
||||
}
|
||||
|
||||
return me;
|
||||
|
@ -3536,10 +3532,10 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
* @param {function} callback - excuted when action is successful
|
||||
*/
|
||||
function encryptAttachments(callback) {
|
||||
var file = Helper.attachmentHelpers.attachmentData;
|
||||
var file = AttachmentViewer.attachmentData;
|
||||
|
||||
if (typeof file !== 'undefined' && file !== null) {
|
||||
var fileName = Helper.attachmentHelpers.file.name;
|
||||
var fileName = AttachmentViewer.file.name;
|
||||
|
||||
Uploader.setData('attachment', file);
|
||||
Uploader.setData('attachmentname', fileName);
|
||||
|
@ -3654,7 +3650,7 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
// get data
|
||||
var plainText = Editor.getText(),
|
||||
format = PasteViewer.getFormat(),
|
||||
files = TopNav.getFileList() || Helper.attachmentHelpers.file || AttachmentViewer.hasAttachment();
|
||||
files = TopNav.getFileList() || AttachmentViewer.file || AttachmentViewer.hasAttachment();
|
||||
|
||||
// do not send if there is no data
|
||||
if (plainText.length === 0 && files === null) {
|
||||
|
@ -4165,7 +4161,6 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
|
|||
TopNav.init();
|
||||
UiHelper.init();
|
||||
Uploader.init();
|
||||
Helper.attachmentHelpers.init();
|
||||
|
||||
// display an existing paste
|
||||
if (Model.hasCipherData()) {
|
||||
|
|
|
@ -69,7 +69,7 @@ if ($MARKDOWN):
|
|||
<?php
|
||||
endif;
|
||||
?>
|
||||
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-A9ObEs7q+BQ9SWIpVYi67ZNNU2d9Er8KzslzK19PQtlqQ/hlf87a6kNMA8x5DzmfP/LLxGF77R0R+lbFmz8RVQ==" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-Z882259kw/AnperJhiaZzvb7Ic0igEIYCyy/vJYsTu5PqAPRkJzCNzPCSMP37jZkCi7HFbjt5Zl/Vd4w9lHhYA==" crossorigin="anonymous"></script>
|
||||
<!--[if lt IE 10]>
|
||||
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
|
||||
<![endif]-->
|
||||
|
|
|
@ -47,7 +47,7 @@ if ($MARKDOWN):
|
|||
<?php
|
||||
endif;
|
||||
?>
|
||||
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-A9ObEs7q+BQ9SWIpVYi67ZNNU2d9Er8KzslzK19PQtlqQ/hlf87a6kNMA8x5DzmfP/LLxGF77R0R+lbFmz8RVQ==" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-Z882259kw/AnperJhiaZzvb7Ic0igEIYCyy/vJYsTu5PqAPRkJzCNzPCSMP37jZkCi7HFbjt5Zl/Vd4w9lHhYA==" crossorigin="anonymous"></script>
|
||||
<!--[if lt IE 10]>
|
||||
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
|
||||
<![endif]-->
|
||||
|
|
Loading…
Reference in a new issue