diff --git a/js/privatebin.js b/js/privatebin.js index 04172860..5e43777e 100644 --- a/js/privatebin.js +++ b/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('
').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('').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()) { diff --git a/tpl/bootstrap.php b/tpl/bootstrap.php index 11ed7af6..84696bdf 100644 --- a/tpl/bootstrap.php +++ b/tpl/bootstrap.php @@ -69,7 +69,7 @@ if ($MARKDOWN): - + diff --git a/tpl/page.php b/tpl/page.php index bee575b8..8e7a94db 100644 --- a/tpl/page.php +++ b/tpl/page.php @@ -47,7 +47,7 @@ if ($MARKDOWN): - +