mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
eslintify file_input_view.js
This commit is contained in:
Scott Nonnenberg
parent
b9b85a0030
commit
0e99ca61a2
|
|
@ -111,6 +111,7 @@ module.exports = function(grunt) {
|
|||
'!js/views/conversation_search_view.js',
|
||||
'!js/views/conversation_view.js',
|
||||
'!js/views/debug_log_view.js',
|
||||
'!js/views/file_input_view.js',
|
||||
'!js/views/message_view.js',
|
||||
'!js/models/conversations.js',
|
||||
'!js/models/messages.js',
|
||||
|
|
@ -170,6 +171,7 @@ module.exports = function(grunt) {
|
|||
'!js/views/conversation_search_view.js',
|
||||
'!js/views/conversation_view.js',
|
||||
'!js/views/debug_log_view.js',
|
||||
'!js/views/file_input_view.js',
|
||||
'!js/views/message_view.js',
|
||||
'!js/Mp3LameEncoder.min.js',
|
||||
'!js/WebAudioRecorderMp3.js',
|
||||
|
|
|
|||
|
|
@ -1,36 +1,40 @@
|
|||
/* eslint-disable */
|
||||
|
||||
/* global textsecure: false */
|
||||
/* global Whisper: false */
|
||||
/* global i18n: false */
|
||||
/* global loadImage: false */
|
||||
/* global Backbone: false */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
const { MIME } = window.Signal.Types;
|
||||
|
||||
Whisper.FileSizeToast = Whisper.ToastView.extend({
|
||||
templateName: 'file-size-modal',
|
||||
render_attributes: function() {
|
||||
render_attributes() {
|
||||
return {
|
||||
'file-size-warning': i18n('fileSizeWarning'),
|
||||
limit: this.model.limit,
|
||||
units: this.model.units
|
||||
units: this.model.units,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
Whisper.UnsupportedFileTypeToast = Whisper.ToastView.extend({
|
||||
template: i18n('unsupportedFileType')
|
||||
template: i18n('unsupportedFileType'),
|
||||
});
|
||||
|
||||
function makeThumbnail(size, objectUrl) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var img = document.createElement('img');
|
||||
return new Promise(((resolve, reject) => {
|
||||
const img = document.createElement('img');
|
||||
img.onerror = reject;
|
||||
img.onload = function () {
|
||||
img.onload = () => {
|
||||
// using components/blueimp-load-image
|
||||
|
||||
// first, make the correct size
|
||||
var canvas = loadImage.scale(img, {
|
||||
let canvas = loadImage.scale(img, {
|
||||
canvas: true,
|
||||
cover: true,
|
||||
maxWidth: size,
|
||||
|
|
@ -49,20 +53,20 @@
|
|||
minHeight: size,
|
||||
});
|
||||
|
||||
var blob = window.dataURLToBlobSync(canvas.toDataURL('image/png'));
|
||||
const blob = window.dataURLToBlobSync(canvas.toDataURL('image/png'));
|
||||
|
||||
resolve(blob);
|
||||
};
|
||||
img.src = objectUrl;
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
Whisper.FileInputView = Backbone.View.extend({
|
||||
tagName: 'span',
|
||||
className: 'file-input',
|
||||
initialize: function(options) {
|
||||
initialize(options) {
|
||||
this.$input = this.$('input[type=file]');
|
||||
this.$input.click(function(e) {
|
||||
this.$input.click((e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
this.thumb = new Whisper.AttachmentPreviewView();
|
||||
|
|
@ -75,76 +79,73 @@
|
|||
'change .choose-file': 'previewImages',
|
||||
'click .close': 'deleteFiles',
|
||||
'click .choose-file': 'open',
|
||||
'drop': 'openDropped',
|
||||
'dragover': 'showArea',
|
||||
'dragleave': 'hideArea',
|
||||
'paste': 'onPaste'
|
||||
drop: 'openDropped',
|
||||
dragover: 'showArea',
|
||||
dragleave: 'hideArea',
|
||||
paste: 'onPaste',
|
||||
},
|
||||
|
||||
open: function(e) {
|
||||
open(e) {
|
||||
e.preventDefault();
|
||||
// hack
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
entry.file(function(file) {
|
||||
entry.file((file) => {
|
||||
this.file = file;
|
||||
this.previewImages();
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$input.click();
|
||||
}
|
||||
},
|
||||
|
||||
addThumb: function(src) {
|
||||
addThumb(src) {
|
||||
this.$('.avatar').hide();
|
||||
this.thumb.src = src;
|
||||
this.$('.attachment-previews').append(this.thumb.render().el);
|
||||
this.thumb.$('img')[0].onload = function() {
|
||||
this.thumb.$('img')[0].onload = () => {
|
||||
this.$el.trigger('force-resize');
|
||||
}.bind(this);
|
||||
};
|
||||
},
|
||||
|
||||
autoScale: function(file) {
|
||||
if (file.type.split('/')[0] !== 'image'
|
||||
|| file.type === 'image/gif'
|
||||
|| file.type === 'image/tiff') {
|
||||
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(function(resolve, reject) {
|
||||
var url = URL.createObjectURL(file);
|
||||
var img = document.createElement('img');
|
||||
return new Promise(((resolve, reject) => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = document.createElement('img');
|
||||
img.onerror = reject;
|
||||
img.onload = function () {
|
||||
img.onload = () => {
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
var maxSize = 6000 * 1024;
|
||||
var maxHeight = 4096;
|
||||
var maxWidth = 4096;
|
||||
if (img.width <= maxWidth && img.height <= maxHeight &&
|
||||
file.size <= maxSize) {
|
||||
const maxSize = 6000 * 1024;
|
||||
const maxHeight = 4096;
|
||||
const maxWidth = 4096;
|
||||
if (img.width <= maxWidth && img.height <= maxHeight && file.size <= maxSize) {
|
||||
resolve(file);
|
||||
return;
|
||||
}
|
||||
|
||||
var canvas = loadImage.scale(img, {
|
||||
canvas: true, maxWidth: maxWidth, maxHeight: maxHeight
|
||||
const canvas = loadImage.scale(img, {
|
||||
canvas: true, maxWidth, maxHeight,
|
||||
});
|
||||
|
||||
var quality = 0.95;
|
||||
var i = 4;
|
||||
var blob;
|
||||
let quality = 0.95;
|
||||
let i = 4;
|
||||
let blob;
|
||||
do {
|
||||
i = i - 1;
|
||||
blob = window.dataURLToBlobSync(
|
||||
canvas.toDataURL('image/jpeg', quality)
|
||||
);
|
||||
quality = quality * maxSize / blob.size;
|
||||
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
|
||||
|
|
@ -156,15 +157,15 @@
|
|||
resolve(blob);
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
}));
|
||||
},
|
||||
|
||||
previewImages: function() {
|
||||
previewImages() {
|
||||
this.clearForm();
|
||||
var file = this.file || this.$input.prop('files')[0];
|
||||
const file = this.file || this.$input.prop('files')[0];
|
||||
if (!file) { return; }
|
||||
|
||||
var type = file.type.split('/')[0];
|
||||
let type = file.type.split('/')[0];
|
||||
if (file.type === 'image/tiff') {
|
||||
type = 'file';
|
||||
}
|
||||
|
|
@ -191,9 +192,9 @@
|
|||
// 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;
|
||||
this.autoScale(file).then((blob) => {
|
||||
let limitKb = 1000000;
|
||||
const blobType = file.type === 'image/gif' ? 'gif' : type;
|
||||
switch (blobType) {
|
||||
case 'image':
|
||||
limitKb = 6000; break;
|
||||
|
|
@ -207,30 +208,28 @@
|
|||
limitKb = 100000; break;
|
||||
}
|
||||
if ((blob.size / 1024).toFixed(4) >= limitKb) {
|
||||
var units = ['kB','MB','GB'];
|
||||
var u = -1;
|
||||
var limit = limitKb * 1000;
|
||||
const units = ['kB', 'MB', 'GB'];
|
||||
let u = -1;
|
||||
let limit = limitKb * 1000;
|
||||
do {
|
||||
limit /= 1000;
|
||||
++u;
|
||||
u += 1;
|
||||
} while (limit >= 1000 && u < units.length - 1);
|
||||
var toast = new Whisper.FileSizeToast({
|
||||
model: {limit: limit, units: units[u]}
|
||||
const toast = new Whisper.FileSizeToast({
|
||||
model: { 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');
|
||||
hasFiles() {
|
||||
const files = this.file ? [this.file] : this.$input.prop('files');
|
||||
return files && files.length && files.length > 0;
|
||||
},
|
||||
|
||||
/* eslint-enable */
|
||||
/* jshint ignore:start */
|
||||
getFiles() {
|
||||
const files = this.file ? [this.file] : Array.from(this.$input.prop('files'));
|
||||
const promise = Promise.all(files.map(file => this.getFile(file)));
|
||||
|
|
@ -262,44 +261,46 @@
|
|||
.then(this.readFile)
|
||||
.then(setFlags(attachmentFlags));
|
||||
},
|
||||
/* jshint ignore:end */
|
||||
/* eslint-disable */
|
||||
|
||||
getThumbnail: function() {
|
||||
getThumbnail() {
|
||||
// Scale and crop an image to 256px square
|
||||
var size = 256;
|
||||
var file = this.file || this.$input.prop('files')[0];
|
||||
if (file === undefined || file.type.split('/')[0] !== 'image' || file.type === 'image/gif') {
|
||||
const size = 256;
|
||||
const file = this.file || this.$input.prop('files')[0];
|
||||
if (file === undefined ||
|
||||
file.type.split('/')[0] !== 'image' ||
|
||||
file.type === 'image/gif') {
|
||||
// nothing to do
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
// File -> Promise Attachment
|
||||
readFile: function(file) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var FR = new FileReader();
|
||||
FR.onload = function(e) {
|
||||
readFile(file) {
|
||||
return new Promise(((resolve, reject) => {
|
||||
const FR = new FileReader();
|
||||
FR.onload = (e) => {
|
||||
resolve({
|
||||
data: e.target.result,
|
||||
contentType: file.type,
|
||||
fileName: file.name,
|
||||
size: file.size
|
||||
size: file.size,
|
||||
});
|
||||
};
|
||||
FR.onerror = reject;
|
||||
FR.onabort = reject;
|
||||
FR.readAsArrayBuffer(file);
|
||||
});
|
||||
}));
|
||||
},
|
||||
|
||||
clearForm: function() {
|
||||
clearForm() {
|
||||
if (this.previewObjectUrl) {
|
||||
URL.revokeObjectURL(this.previewObjectUrl);
|
||||
this.previewObjectUrl = null;
|
||||
|
|
@ -310,7 +311,7 @@
|
|||
this.$el.trigger('force-resize');
|
||||
},
|
||||
|
||||
deleteFiles: function(e) {
|
||||
deleteFiles(e) {
|
||||
if (e) { e.stopPropagation(); }
|
||||
this.clearForm();
|
||||
this.$input.wrap('<form>').parent('form').trigger('reset');
|
||||
|
|
@ -320,20 +321,22 @@
|
|||
this.isVoiceNote = false;
|
||||
},
|
||||
|
||||
openDropped: function(e) {
|
||||
if (e.originalEvent.dataTransfer.types[0] != 'Files') {
|
||||
openDropped(e) {
|
||||
if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
|
||||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
this.file = e.originalEvent.dataTransfer.files[0];
|
||||
this.previewImages();
|
||||
this.$el.removeClass('dropoff');
|
||||
},
|
||||
|
||||
showArea: function(e) {
|
||||
if (e.originalEvent.dataTransfer.types[0] != 'Files') {
|
||||
showArea(e) {
|
||||
if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -342,8 +345,8 @@
|
|||
this.$el.addClass('dropoff');
|
||||
},
|
||||
|
||||
hideArea: function(e) {
|
||||
if (e.originalEvent.dataTransfer.types[0] != 'Files') {
|
||||
hideArea(e) {
|
||||
if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -351,10 +354,10 @@
|
|||
e.preventDefault();
|
||||
this.$el.removeClass('dropoff');
|
||||
},
|
||||
onPaste: function(e) {
|
||||
var items = e.originalEvent.clipboardData.items;
|
||||
var imgBlob = null;
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
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();
|
||||
}
|
||||
|
|
@ -363,8 +366,8 @@
|
|||
this.file = imgBlob;
|
||||
this.previewImages();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Whisper.FileInputView.makeThumbnail = makeThumbnail;
|
||||
})();
|
||||
}());
|
||||
|
|
|
|||
Loading…
Reference in a new issue