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',

613
js/views/file_input_view.js
View file

@ -1,236 +1,235 @@
/* 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 || {};
const { MIME } = window.Signal.Types; window.Whisper = window.Whisper || {};
Whisper.FileSizeToast = Whisper.ToastView.extend({ const { MIME } = window.Signal.Types;
templateName: 'file-size-modal',
render_attributes: function() {
return {
'file-size-warning': i18n('fileSizeWarning'),
limit: this.model.limit,
units: this.model.units
};
}
});
Whisper.UnsupportedFileTypeToast = Whisper.ToastView.extend({
template: i18n('unsupportedFileType')
});
function makeThumbnail(size, objectUrl) { Whisper.FileSizeToast = Whisper.ToastView.extend({
return new Promise(function(resolve, reject) { templateName: 'file-size-modal',
var img = document.createElement('img'); render_attributes() {
img.onerror = reject; return {
img.onload = function () { 'file-size-warning': i18n('fileSizeWarning'),
// using components/blueimp-load-image limit: this.model.limit,
units: this.model.units,
};
},
});
Whisper.UnsupportedFileTypeToast = Whisper.ToastView.extend({
template: i18n('unsupportedFileType'),
});
// first, make the correct size function makeThumbnail(size, objectUrl) {
var canvas = loadImage.scale(img, { return new Promise(((resolve, reject) => {
canvas: true, const img = document.createElement('img');
cover: true, img.onerror = reject;
maxWidth: size, img.onload = () => {
maxHeight: size, // using components/blueimp-load-image
minWidth: size,
minHeight: size,
});
// then crop // first, make the correct size
canvas = loadImage.scale(canvas, { let canvas = loadImage.scale(img, {
canvas: true, canvas: true,
crop: true, cover: true,
maxWidth: size, maxWidth: size,
maxHeight: size, maxHeight: size,
minWidth: size, minWidth: size,
minHeight: size, minHeight: size,
});
var blob = window.dataURLToBlobSync(canvas.toDataURL('image/png'));
resolve(blob);
};
img.src = objectUrl;
}); });
}
Whisper.FileInputView = Backbone.View.extend({ // then crop
tagName: 'span', canvas = loadImage.scale(canvas, {
className: 'file-input', canvas: true,
initialize: function(options) { crop: true,
this.$input = this.$('input[type=file]'); maxWidth: size,
this.$input.click(function(e) { maxHeight: size,
e.stopPropagation(); minWidth: size,
}); minHeight: size,
this.thumb = new Whisper.AttachmentPreviewView(); });
this.$el.addClass('file-input');
this.window = options.window;
this.previewObjectUrl = null;
},
events: { const blob = window.dataURLToBlobSync(canvas.toDataURL('image/png'));
'change .choose-file': 'previewImages',
'click .close': 'deleteFiles',
'click .choose-file': 'open',
'drop': 'openDropped',
'dragover': 'showArea',
'dragleave': 'hideArea',
'paste': 'onPaste'
},
open: function(e) { resolve(blob);
e.preventDefault(); };
// hack img.src = objectUrl;
if (this.window && this.window.chrome && this.window.chrome.fileSystem) { }));
this.window.chrome.fileSystem.chooseEntry({type: 'openFile'}, function(entry) { }
if (!entry) {
return; Whisper.FileInputView = Backbone.View.extend({
} tagName: 'span',
entry.file(function(file) { className: 'file-input',
this.file = file; initialize(options) {
this.previewImages(); this.$input = this.$('input[type=file]');
}.bind(this)); this.$input.click((e) => {
}.bind(this)); e.stopPropagation();
} else { });
this.$input.click(); this.thumb = new Whisper.AttachmentPreviewView();
this.$el.addClass('file-input');
this.window = options.window;
this.previewObjectUrl = null;
},
events: {
'change .choose-file': 'previewImages',
'click .close': 'deleteFiles',
'click .choose-file': 'open',
drop: 'openDropped',
dragover: 'showArea',
dragleave: 'hideArea',
paste: 'onPaste',
},
open(e) {
e.preventDefault();
// hack
if (this.window && this.window.chrome && this.window.chrome.fileSystem) {
this.window.chrome.fileSystem.chooseEntry({ type: 'openFile' }, (entry) => {
if (!entry) {
return;
}
entry.file((file) => {
this.file = file;
this.previewImages();
});
});
} else {
this.$input.click();
}
},
addThumb(src) {
this.$('.avatar').hide();
this.thumb.src = src;
this.$('.attachment-previews').append(this.thumb.render().el);
this.thumb.$('img')[0].onload = () => {
this.$el.trigger('force-resize');
};
},
autoScale(file) {
if (file.type.split('/')[0] !== 'image' ||
file.type === 'image/gif' ||
file.type === 'image/tiff') {
// nothing to do
return Promise.resolve(file);
}
return new Promise(((resolve, reject) => {
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.onerror = reject;
img.onload = () => {
URL.revokeObjectURL(url);
const maxSize = 6000 * 1024;
const maxHeight = 4096;
const maxWidth = 4096;
if (img.width <= maxWidth && img.height <= maxHeight && file.size <= maxSize) {
resolve(file);
return;
}
const canvas = loadImage.scale(img, {
canvas: true, maxWidth, maxHeight,
});
let quality = 0.95;
let i = 4;
let blob;
do {
i -= 1;
blob = window.dataURLToBlobSync(canvas.toDataURL('image/jpeg', quality));
quality = (quality * maxSize) / blob.size;
// NOTE: During testing with a large image, we observed the
// `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
if (quality < 0.5) {
quality = 0.5;
} }
}, } while (i > 0 && blob.size > maxSize);
addThumb: function(src) { resolve(blob);
this.$('.avatar').hide(); };
this.thumb.src = src; img.src = url;
this.$('.attachment-previews').append(this.thumb.render().el); }));
this.thumb.$('img')[0].onload = function() { },
this.$el.trigger('force-resize');
}.bind(this);
},
autoScale: function(file) { previewImages() {
if (file.type.split('/')[0] !== 'image' this.clearForm();
|| file.type === 'image/gif' const file = this.file || this.$input.prop('files')[0];
|| file.type === 'image/tiff') { if (!file) { return; }
// nothing to do
return Promise.resolve(file);
}
return new Promise(function(resolve, reject) { let type = file.type.split('/')[0];
var url = URL.createObjectURL(file); if (file.type === 'image/tiff') {
var img = document.createElement('img'); type = 'file';
img.onerror = reject; }
img.onload = function () { switch (type) {
URL.revokeObjectURL(url); case 'audio': this.addThumb('images/audio.svg'); break;
case 'video': this.addThumb('images/video.svg'); break;
case 'image':
if (!MIME.isJPEG(file.type)) {
this.previewObjectUrl = URL.createObjectURL(file);
this.addThumb(this.previewObjectUrl);
break;
}
var maxSize = 6000 * 1024; // NOTE: Temporarily allow `then` until we convert the entire file
var maxHeight = 4096; // to `async` / `await`:
var maxWidth = 4096; // eslint-disable-next-line more/no-then
if (img.width <= maxWidth && img.height <= maxHeight && window.autoOrientImage(file)
file.size <= maxSize) { .then(dataURL => this.addThumb(dataURL));
resolve(file); break;
return; default:
} this.addThumb('images/file.svg'); break;
}
var canvas = loadImage.scale(img, { // NOTE: Temporarily allow `then` until we convert the entire file
canvas: true, maxWidth: maxWidth, maxHeight: maxHeight // to `async` / `await`:
}); // eslint-disable-next-line more/no-then
this.autoScale(file).then((blob) => {
let limitKb = 1000000;
const blobType = file.type === 'image/gif' ? 'gif' : type;
switch (blobType) {
case 'image':
limitKb = 6000; break;
case 'gif':
limitKb = 25000; break;
case 'audio':
limitKb = 100000; break;
case 'video':
limitKb = 100000; break;
default:
limitKb = 100000; break;
}
if ((blob.size / 1024).toFixed(4) >= limitKb) {
const units = ['kB', 'MB', 'GB'];
let u = -1;
let limit = limitKb * 1000;
do {
limit /= 1000;
u += 1;
} while (limit >= 1000 && u < units.length - 1);
const toast = new Whisper.FileSizeToast({
model: { limit, units: units[u] },
});
toast.$el.insertAfter(this.$el);
toast.render();
this.deleteFiles();
}
});
},
var quality = 0.95; hasFiles() {
var i = 4; const files = this.file ? [this.file] : this.$input.prop('files');
var blob; return files && files.length && files.length > 0;
do { },
i = i - 1;
blob = window.dataURLToBlobSync(
canvas.toDataURL('image/jpeg', quality)
);
quality = quality * maxSize / blob.size;
// NOTE: During testing with a large image, we observed the
// `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
if (quality < 0.5) {
quality = 0.5;
}
} while (i > 0 && blob.size > maxSize);
resolve(blob);
};
img.src = url;
});
},
previewImages: function() {
this.clearForm();
var file = this.file || this.$input.prop('files')[0];
if (!file) { return; }
var type = file.type.split('/')[0];
if (file.type === 'image/tiff') {
type = 'file';
}
switch (type) {
case 'audio': this.addThumb('images/audio.svg'); break;
case 'video': this.addThumb('images/video.svg'); break;
case 'image':
if (!MIME.isJPEG(file.type)) {
this.previewObjectUrl = URL.createObjectURL(file);
this.addThumb(this.previewObjectUrl);
break;
}
// NOTE: Temporarily allow `then` until we convert the entire file
// to `async` / `await`:
// eslint-disable-next-line more/no-then
window.autoOrientImage(file)
.then(dataURL => this.addThumb(dataURL));
break;
default:
this.addThumb('images/file.svg'); break;
}
// NOTE: Temporarily allow `then` until we convert the entire file
// to `async` / `await`:
// eslint-disable-next-line more/no-then
this.autoScale(file).then(function(blob) {
var limitKb = 1000000;
var blobType = file.type === 'image/gif' ? 'gif' : type;
switch (blobType) {
case 'image':
limitKb = 6000; break;
case 'gif':
limitKb = 25000; break;
case 'audio':
limitKb = 100000; break;
case 'video':
limitKb = 100000; break;
default:
limitKb = 100000; break;
}
if ((blob.size/1024).toFixed(4) >= limitKb) {
var units = ['kB','MB','GB'];
var u = -1;
var limit = limitKb * 1000;
do {
limit /= 1000;
++u;
} while (limit >= 1000 && u < units.length - 1);
var toast = new Whisper.FileSizeToast({
model: {limit: limit, units: units[u]}
});
toast.$el.insertAfter(this.$el);
toast.render();
this.deleteFiles();
}
}.bind(this));
},
hasFiles: function() {
var files = this.file ? [this.file] : this.$input.prop('files');
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,109 +261,113 @@
.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 ||
// nothing to do file.type.split('/')[0] !== 'image' ||
return Promise.resolve(); file.type === 'image/gif') {
} // nothing to do
return Promise.resolve();
}
const objectUrl = URL.createObjectURL(file); const objectUrl = URL.createObjectURL(file);
return makeThumbnail(256, file).then(function(arrayBuffer) {
URL.revokeObjectURL(url);
return this.readFile(arrayBuffer);
});
},
// File -> Promise Attachment // eslint-disable-next-line more/no-then
readFile: function(file) { return makeThumbnail(size, objectUrl).then((arrayBuffer) => {
return new Promise(function(resolve, reject) { URL.revokeObjectURL(objectUrl);
var FR = new FileReader(); return this.readFile(arrayBuffer);
FR.onload = function(e) { });
resolve({ },
data: e.target.result,
contentType: file.type,
fileName: file.name,
size: file.size
});
};
FR.onerror = reject;
FR.onabort = reject;
FR.readAsArrayBuffer(file);
});
},
clearForm: function() { // File -> Promise Attachment
if (this.previewObjectUrl) { readFile(file) {
URL.revokeObjectURL(this.previewObjectUrl); return new Promise(((resolve, reject) => {
this.previewObjectUrl = null; const FR = new FileReader();
} FR.onload = (e) => {
resolve({
data: e.target.result,
contentType: file.type,
fileName: file.name,
size: file.size,
});
};
FR.onerror = reject;
FR.onabort = reject;
FR.readAsArrayBuffer(file);
}));
},
this.thumb.remove(); clearForm() {
this.$('.avatar').show(); if (this.previewObjectUrl) {
this.$el.trigger('force-resize'); URL.revokeObjectURL(this.previewObjectUrl);
}, this.previewObjectUrl = null;
}
deleteFiles: function(e) { this.thumb.remove();
if (e) { e.stopPropagation(); } this.$('.avatar').show();
this.clearForm(); this.$el.trigger('force-resize');
this.$input.wrap('<form>').parent('form').trigger('reset'); },
this.$input.unwrap();
this.file = null;
this.$input.trigger('change');
this.isVoiceNote = false;
},
openDropped: function(e) { deleteFiles(e) {
if (e.originalEvent.dataTransfer.types[0] != 'Files') { if (e) { e.stopPropagation(); }
return; this.clearForm();
} this.$input.wrap('<form>').parent('form').trigger('reset');
this.$input.unwrap();
this.file = null;
this.$input.trigger('change');
this.isVoiceNote = false;
},
e.stopPropagation(); openDropped(e) {
e.preventDefault(); if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
this.file = e.originalEvent.dataTransfer.files[0]; return;
this.previewImages(); }
this.$el.removeClass('dropoff');
},
showArea: function(e) { e.stopPropagation();
if (e.originalEvent.dataTransfer.types[0] != 'Files') { e.preventDefault();
return;
}
e.stopPropagation(); // eslint-disable-next-line prefer-destructuring
e.preventDefault(); this.file = e.originalEvent.dataTransfer.files[0];
this.$el.addClass('dropoff'); this.previewImages();
}, this.$el.removeClass('dropoff');
},
hideArea: function(e) { showArea(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();
this.$el.removeClass('dropoff'); this.$el.addClass('dropoff');
}, },
onPaste: function(e) {
var items = e.originalEvent.clipboardData.items; hideArea(e) {
var imgBlob = null; if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
for (var i = 0; i < items.length; i++) { return;
if (items[i].type.split('/')[0] === 'image') { }
imgBlob = items[i].getAsFile();
} e.stopPropagation();
} e.preventDefault();
if (imgBlob !== null) { this.$el.removeClass('dropoff');
this.file = imgBlob; },
this.previewImages(); onPaste(e) {
} const { items } = e.originalEvent.clipboardData;
let imgBlob = null;
for (let i = 0; i < items.length; i += 1) {
if (items[i].type.split('/')[0] === 'image') {
imgBlob = items[i].getAsFile();
} }
}); }
if (imgBlob !== null) {
this.file = imgBlob;
this.previewImages();
}
},
});
Whisper.FileInputView.makeThumbnail = makeThumbnail; Whisper.FileInputView.makeThumbnail = makeThumbnail;
})(); }());