mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

eslintify file_input_view.js

Browse source
This commit is contained in:
Scott Nonnenberg 2018-04-25 15:06:27 -07:00
parent b9b85a0030
commit 0e99ca61a2
No known key found for this signature in database
GPG key ID: 5F82280C35134661
2 changed files with 310 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -111,6 +111,7 @@ module.exports = function(grunt) {
'!js/views/conversation_search_view.js', '!js/views/conversation_search_view.js',
'!js/views/conversation_view.js', '!js/views/conversation_view.js',
'!js/views/debug_log_view.js', '!js/views/debug_log_view.js',
'!js/views/file_input_view.js',
'!js/views/message_view.js', '!js/views/message_view.js',
'!js/models/conversations.js', '!js/models/conversations.js',
'!js/models/messages.js', '!js/models/messages.js',
@ -170,6 +171,7 @@ module.exports = function(grunt) {
'!js/views/conversation_search_view.js', '!js/views/conversation_search_view.js',
'!js/views/conversation_view.js', '!js/views/conversation_view.js',
'!js/views/debug_log_view.js', '!js/views/debug_log_view.js',
'!js/views/file_input_view.js',
'!js/views/message_view.js', '!js/views/message_view.js',
'!js/Mp3LameEncoder.min.js', '!js/Mp3LameEncoder.min.js',
'!js/WebAudioRecorderMp3.js', '!js/WebAudioRecorderMp3.js',

195
js/views/file_input_view.js
View file

@ -1,36 +1,40 @@
/* eslint-disable */
/* global textsecure: false */ /* global textsecure: false */
/* global Whisper: false */
/* global i18n: false */
/* global loadImage: false */
/* global Backbone: false */
// eslint-disable-next-line func-names
(function () { (function () {
'use strict'; 'use strict';
window.Whisper = window.Whisper || {}; window.Whisper = window.Whisper || {};
const { MIME } = window.Signal.Types; const { MIME } = window.Signal.Types;
Whisper.FileSizeToast = Whisper.ToastView.extend({ Whisper.FileSizeToast = Whisper.ToastView.extend({
templateName: 'file-size-modal', templateName: 'file-size-modal',
render_attributes: function() { render_attributes() {
return { return {
'file-size-warning': i18n('fileSizeWarning'), 'file-size-warning': i18n('fileSizeWarning'),
limit: this.model.limit, limit: this.model.limit,
units: this.model.units units: this.model.units,
}; };
} },
}); });
Whisper.UnsupportedFileTypeToast = Whisper.ToastView.extend({ Whisper.UnsupportedFileTypeToast = Whisper.ToastView.extend({
template: i18n('unsupportedFileType') template: i18n('unsupportedFileType'),
}); });
function makeThumbnail(size, objectUrl) { function makeThumbnail(size, objectUrl) {
return new Promise(function(resolve, reject) { return new Promise(((resolve, reject) => {
var img = document.createElement('img'); const img = document.createElement('img');
img.onerror = reject; img.onerror = reject;
img.onload = function () { img.onload = () => {
// using components/blueimp-load-image // using components/blueimp-load-image
// first, make the correct size // first, make the correct size
var canvas = loadImage.scale(img, { let canvas = loadImage.scale(img, {
canvas: true, canvas: true,
cover: true, cover: true,
maxWidth: size, maxWidth: size,
@ -49,20 +53,20 @@
minHeight: size, minHeight: size,
}); });
var blob = window.dataURLToBlobSync(canvas.toDataURL('image/png')); const blob = window.dataURLToBlobSync(canvas.toDataURL('image/png'));
resolve(blob); resolve(blob);
}; };
img.src = objectUrl; img.src = objectUrl;
}); }));
} }
Whisper.FileInputView = Backbone.View.extend({ Whisper.FileInputView = Backbone.View.extend({
tagName: 'span', tagName: 'span',
className: 'file-input', className: 'file-input',
initialize: function(options) { initialize(options) {
this.$input = this.$('input[type=file]'); this.$input = this.$('input[type=file]');
this.$input.click(function(e) { this.$input.click((e) => {
e.stopPropagation(); e.stopPropagation();
}); });
this.thumb = new Whisper.AttachmentPreviewView(); this.thumb = new Whisper.AttachmentPreviewView();
@ -75,76 +79,73 @@
'change .choose-file': 'previewImages', 'change .choose-file': 'previewImages',
'click .close': 'deleteFiles', 'click .close': 'deleteFiles',
'click .choose-file': 'open', 'click .choose-file': 'open',
'drop': 'openDropped', drop: 'openDropped',
'dragover': 'showArea', dragover: 'showArea',
'dragleave': 'hideArea', dragleave: 'hideArea',
'paste': 'onPaste' paste: 'onPaste',
}, },
open: function(e) { open(e) {
e.preventDefault(); e.preventDefault();
// hack // hack
if (this.window && this.window.chrome && this.window.chrome.fileSystem) { if (this.window && this.window.chrome && this.window.chrome.fileSystem) {
this.window.chrome.fileSystem.chooseEntry({type: 'openFile'}, function(entry) { this.window.chrome.fileSystem.chooseEntry({ type: 'openFile' }, (entry) => {
if (!entry) { if (!entry) {
return; return;
} }
entry.file(function(file) { entry.file((file) => {
this.file = file; this.file = file;
this.previewImages(); this.previewImages();
}.bind(this)); });
}.bind(this)); });
} else { } else {
this.$input.click(); this.$input.click();
} }
}, },
addThumb: function(src) { addThumb(src) {
this.$('.avatar').hide(); this.$('.avatar').hide();
this.thumb.src = src; this.thumb.src = src;
this.$('.attachment-previews').append(this.thumb.render().el); this.$('.attachment-previews').append(this.thumb.render().el);
this.thumb.$('img')[0].onload = function() { this.thumb.$('img')[0].onload = () => {
this.$el.trigger('force-resize'); this.$el.trigger('force-resize');
}.bind(this); };
}, },
autoScale: function(file) { autoScale(file) {
if (file.type.split('/')[0] !== 'image' if (file.type.split('/')[0] !== 'image' ||
|| file.type === 'image/gif' file.type === 'image/gif' ||
|| file.type === 'image/tiff') { file.type === 'image/tiff') {
// nothing to do // nothing to do
return Promise.resolve(file); return Promise.resolve(file);
} }
return new Promise(function(resolve, reject) { return new Promise(((resolve, reject) => {
var url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
var img = document.createElement('img'); const img = document.createElement('img');
img.onerror = reject; img.onerror = reject;
img.onload = function () { img.onload = () => {
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
var maxSize = 6000 * 1024; const maxSize = 6000 * 1024;
var maxHeight = 4096; const maxHeight = 4096;
var maxWidth = 4096; const maxWidth = 4096;
if (img.width <= maxWidth && img.height <= maxHeight && if (img.width <= maxWidth && img.height <= maxHeight && file.size <= maxSize) {
file.size <= maxSize) {
resolve(file); resolve(file);
return; return;
} }
var canvas = loadImage.scale(img, { const canvas = loadImage.scale(img, {
canvas: true, maxWidth: maxWidth, maxHeight: maxHeight canvas: true, maxWidth, maxHeight,
}); });
var quality = 0.95; let quality = 0.95;
var i = 4; let i = 4;
var blob; let blob;
do { do {
i = i - 1; i -= 1;
blob = window.dataURLToBlobSync( blob = window.dataURLToBlobSync(canvas.toDataURL('image/jpeg', quality));
canvas.toDataURL('image/jpeg', quality) quality = (quality * maxSize) / blob.size;
);
quality = quality * maxSize / blob.size;
// NOTE: During testing with a large image, we observed the // NOTE: During testing with a large image, we observed the
// `quality` value being > 1. Should we clamp it to [0.5, 1.0]? // `quality` value being > 1. Should we clamp it to [0.5, 1.0]?
// See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Syntax // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Syntax
@ -156,15 +157,15 @@
resolve(blob); resolve(blob);
}; };
img.src = url; img.src = url;
}); }));
}, },
previewImages: function() { previewImages() {
this.clearForm(); this.clearForm();
var file = this.file || this.$input.prop('files')[0]; const file = this.file || this.$input.prop('files')[0];
if (!file) { return; } if (!file) { return; }
var type = file.type.split('/')[0]; let type = file.type.split('/')[0];
if (file.type === 'image/tiff') { if (file.type === 'image/tiff') {
type = 'file'; type = 'file';
} }
@ -191,9 +192,9 @@
// NOTE: Temporarily allow `then` until we convert the entire file // NOTE: Temporarily allow `then` until we convert the entire file
// to `async` / `await`: // to `async` / `await`:
// eslint-disable-next-line more/no-then // eslint-disable-next-line more/no-then
this.autoScale(file).then(function(blob) { this.autoScale(file).then((blob) => {
var limitKb = 1000000; let limitKb = 1000000;
var blobType = file.type === 'image/gif' ? 'gif' : type; const blobType = file.type === 'image/gif' ? 'gif' : type;
switch (blobType) { switch (blobType) {
case 'image': case 'image':
limitKb = 6000; break; limitKb = 6000; break;
@ -206,31 +207,29 @@
default: default:
limitKb = 100000; break; limitKb = 100000; break;
} }
if ((blob.size/1024).toFixed(4) >= limitKb) { if ((blob.size / 1024).toFixed(4) >= limitKb) {
var units = ['kB','MB','GB']; const units = ['kB', 'MB', 'GB'];
var u = -1; let u = -1;
var limit = limitKb * 1000; let limit = limitKb * 1000;
do { do {
limit /= 1000; limit /= 1000;
++u; u += 1;
} while (limit >= 1000 && u < units.length - 1); } while (limit >= 1000 && u < units.length - 1);
var toast = new Whisper.FileSizeToast({ const toast = new Whisper.FileSizeToast({
model: {limit: limit, units: units[u]} model: { limit, units: units[u] },
}); });
toast.$el.insertAfter(this.$el); toast.$el.insertAfter(this.$el);
toast.render(); toast.render();
this.deleteFiles(); this.deleteFiles();
} }
}.bind(this)); });
}, },
hasFiles: function() { hasFiles() {
var files = this.file ? [this.file] : this.$input.prop('files'); const files = this.file ? [this.file] : this.$input.prop('files');
return files && files.length && files.length > 0; return files && files.length && files.length > 0;
}, },
/* eslint-enable */
/* jshint ignore:start */
getFiles() { getFiles() {
const files = this.file ? [this.file] : Array.from(this.$input.prop('files')); const files = this.file ? [this.file] : Array.from(this.$input.prop('files'));
const promise = Promise.all(files.map(file => this.getFile(file))); const promise = Promise.all(files.map(file => this.getFile(file)));
@ -262,44 +261,46 @@
.then(this.readFile) .then(this.readFile)
.then(setFlags(attachmentFlags)); .then(setFlags(attachmentFlags));
}, },
/* jshint ignore:end */
/* eslint-disable */
getThumbnail: function() { getThumbnail() {
// Scale and crop an image to 256px square // Scale and crop an image to 256px square
var size = 256; const size = 256;
var file = this.file || this.$input.prop('files')[0]; const file = this.file || this.$input.prop('files')[0];
if (file === undefined || file.type.split('/')[0] !== 'image' || file.type === 'image/gif') { if (file === undefined ||
file.type.split('/')[0] !== 'image' ||
file.type === 'image/gif') {
// nothing to do // nothing to do
return Promise.resolve(); return Promise.resolve();
} }
const objectUrl = URL.createObjectURL(file); const objectUrl = URL.createObjectURL(file);
return makeThumbnail(256, file).then(function(arrayBuffer) {
URL.revokeObjectURL(url); // eslint-disable-next-line more/no-then
return makeThumbnail(size, objectUrl).then((arrayBuffer) => {
URL.revokeObjectURL(objectUrl);
return this.readFile(arrayBuffer); return this.readFile(arrayBuffer);
}); });
}, },
// File -> Promise Attachment // File -> Promise Attachment
readFile: function(file) { readFile(file) {
return new Promise(function(resolve, reject) { return new Promise(((resolve, reject) => {
var FR = new FileReader(); const FR = new FileReader();
FR.onload = function(e) { FR.onload = (e) => {
resolve({ resolve({
data: e.target.result, data: e.target.result,
contentType: file.type, contentType: file.type,
fileName: file.name, fileName: file.name,
size: file.size size: file.size,
}); });
}; };
FR.onerror = reject; FR.onerror = reject;
FR.onabort = reject; FR.onabort = reject;
FR.readAsArrayBuffer(file); FR.readAsArrayBuffer(file);
}); }));
}, },
clearForm: function() { clearForm() {
if (this.previewObjectUrl) { if (this.previewObjectUrl) {
URL.revokeObjectURL(this.previewObjectUrl); URL.revokeObjectURL(this.previewObjectUrl);
this.previewObjectUrl = null; this.previewObjectUrl = null;
@ -310,7 +311,7 @@
this.$el.trigger('force-resize'); this.$el.trigger('force-resize');
}, },
deleteFiles: function(e) { deleteFiles(e) {
if (e) { e.stopPropagation(); } if (e) { e.stopPropagation(); }
this.clearForm(); this.clearForm();
this.$input.wrap('<form>').parent('form').trigger('reset'); this.$input.wrap('<form>').parent('form').trigger('reset');
@ -320,20 +321,22 @@
this.isVoiceNote = false; this.isVoiceNote = false;
}, },
openDropped: function(e) { openDropped(e) {
if (e.originalEvent.dataTransfer.types[0] != 'Files') { if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
return; return;
} }
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
// eslint-disable-next-line prefer-destructuring
this.file = e.originalEvent.dataTransfer.files[0]; this.file = e.originalEvent.dataTransfer.files[0];
this.previewImages(); this.previewImages();
this.$el.removeClass('dropoff'); this.$el.removeClass('dropoff');
}, },
showArea: function(e) { showArea(e) {
if (e.originalEvent.dataTransfer.types[0] != 'Files') { if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
return; return;
} }
@ -342,8 +345,8 @@
this.$el.addClass('dropoff'); this.$el.addClass('dropoff');
}, },
hideArea: function(e) { hideArea(e) {
if (e.originalEvent.dataTransfer.types[0] != 'Files') { if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
return; return;
} }
@ -351,10 +354,10 @@
e.preventDefault(); e.preventDefault();
this.$el.removeClass('dropoff'); this.$el.removeClass('dropoff');
}, },
onPaste: function(e) { onPaste(e) {
var items = e.originalEvent.clipboardData.items; const { items } = e.originalEvent.clipboardData;
var imgBlob = null; let imgBlob = null;
for (var i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i += 1) {
if (items[i].type.split('/')[0] === 'image') { if (items[i].type.split('/')[0] === 'image') {
imgBlob = items[i].getAsFile(); imgBlob = items[i].getAsFile();
} }
@ -363,8 +366,8 @@
this.file = imgBlob; this.file = imgBlob;
this.previewImages(); this.previewImages();
} }
} },
}); });
Whisper.FileInputView.makeThumbnail = makeThumbnail; Whisper.FileInputView.makeThumbnail = makeThumbnail;
})(); }());