are0h
3 years ago
parent
0ee4083949
commit
614c9859b1
File diff suppressed because it is too large
Load Diff
@ -1,204 +0,0 @@
|
|||||||
import Sortable from 'sortablejs';
|
|
||||||
import DataUtils from '../utils/DataUtils';
|
|
||||||
import Notfications from './Notifications.js';
|
|
||||||
const notify = new Notfications();
|
|
||||||
|
|
||||||
export default class FileManager {
|
|
||||||
//--------------------------
|
|
||||||
// constructor
|
|
||||||
//--------------------------
|
|
||||||
constructor(upload, input, imageList, fileList) {
|
|
||||||
this.upload = upload;
|
|
||||||
this.input = input;
|
|
||||||
this.imageList = imageList;
|
|
||||||
this.fileList = fileList;
|
|
||||||
this.accetableFiles = [
|
|
||||||
'image/jpeg',
|
|
||||||
'image/gif',
|
|
||||||
'image/png',
|
|
||||||
'image/svg',
|
|
||||||
'audio/mpeg',
|
|
||||||
'video/mp4',
|
|
||||||
'application/pdf',
|
|
||||||
'text/plain',
|
|
||||||
'text/rtf'
|
|
||||||
];
|
|
||||||
this.files = [];
|
|
||||||
this.sortedFiles = [];
|
|
||||||
this.storage = [];
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
//--------------------------
|
|
||||||
// methods
|
|
||||||
//--------------------------
|
|
||||||
start() {
|
|
||||||
this.upload.addEventListener('dragover', e => this.handleFileActions(e), false);
|
|
||||||
this.upload.addEventListener('drop', e => this.handleFileActions(e), false);
|
|
||||||
this.input.addEventListener('change', e => this.handleFileActions(e), false);
|
|
||||||
|
|
||||||
Sortable.create(this.imageList, {
|
|
||||||
onUpdate: e => {
|
|
||||||
notify.alert('REINDEXING FILES', null);
|
|
||||||
let currentFiles = []; //store current list
|
|
||||||
let items = e.target.children;
|
|
||||||
for (let index = 0; index < items.length; index++) {
|
|
||||||
var item = items[index];
|
|
||||||
let url = '';
|
|
||||||
if (item.className == 'img-item') {
|
|
||||||
url = item.style.backgroundImage.slice(4, -1).replace(/"/g, '');
|
|
||||||
} else {
|
|
||||||
url = item.getAttribute('data-source');
|
|
||||||
}
|
|
||||||
|
|
||||||
currentFiles.push({
|
|
||||||
earl: url
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.reindexFiles(currentFiles, 0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Sortable.create(this.fileList, {
|
|
||||||
onUpdate: e => {
|
|
||||||
notify.alert('REINDEXING FILES', null);
|
|
||||||
let currentFiles = [];
|
|
||||||
let items = e.target.children;
|
|
||||||
for (let index = 0; index < items.length; index++) {
|
|
||||||
var item = items[index];
|
|
||||||
let url = item.getAttribute('data-source');
|
|
||||||
currentFiles.push({
|
|
||||||
earl: url
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.reindexFiles(currentFiles, 0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getFiles() {
|
|
||||||
return this.files;
|
|
||||||
}
|
|
||||||
|
|
||||||
reindexFiles(sortOrder, step) {
|
|
||||||
let count = sortOrder.length;
|
|
||||||
if (step == 0) this.files = [];
|
|
||||||
var utils = new DataUtils();
|
|
||||||
var path = sortOrder[step].earl.split('/');
|
|
||||||
utils.imgLoad(sortOrder[step].earl).then(blob => {
|
|
||||||
var fresh = new File([blob], path[6], { type: blob.type });
|
|
||||||
this.files.push(fresh);
|
|
||||||
if (this.files.length <= count - 1) {
|
|
||||||
this.reindexFiles(sortOrder, ++step);
|
|
||||||
} else {
|
|
||||||
notify.alert('FILES READY TO UPLOAD', true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
sortFiles(files) {
|
|
||||||
var self = this;
|
|
||||||
this.files = []; //clear files array
|
|
||||||
this.imageList.innerHTML = '';
|
|
||||||
this.fileList.innerHTML = '';
|
|
||||||
for (var i = 0, file; (file = files[i]); i++) {
|
|
||||||
var reader = new FileReader();
|
|
||||||
// Closure to capture the file information
|
|
||||||
|
|
||||||
reader.onload = (theFile => {
|
|
||||||
return function (f) {
|
|
||||||
// sort files
|
|
||||||
switch (theFile.type) {
|
|
||||||
case 'image/jpg':
|
|
||||||
case 'image/jpeg':
|
|
||||||
case 'image/gif':
|
|
||||||
case 'image/svg':
|
|
||||||
case 'image/png':
|
|
||||||
//create element and add to list
|
|
||||||
var image = document.createElement('img');
|
|
||||||
image.src = f.target.result;
|
|
||||||
image.title = escape(theFile.name);
|
|
||||||
var span = document.createElement('div');
|
|
||||||
span.style.background =
|
|
||||||
'url(' +
|
|
||||||
f.target.result +
|
|
||||||
') no-repeat center center / cover';
|
|
||||||
span.className = 'img-item';
|
|
||||||
image.setAttribute('id', i);
|
|
||||||
self.storage.push([
|
|
||||||
{
|
|
||||||
id: 'page_image' + i,
|
|
||||||
data: f.target.result,
|
|
||||||
type: theFile.type,
|
|
||||||
name: escape(theFile.name)
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
self.imageList.appendChild(span);
|
|
||||||
//add to files list
|
|
||||||
self.files.push(theFile);
|
|
||||||
|
|
||||||
break;
|
|
||||||
case 'video/mp4':
|
|
||||||
var video = document.createElement('div');
|
|
||||||
video.className = 'video-item';
|
|
||||||
video.setAttribute('data-source', f.target.result);
|
|
||||||
self.imageList.appendChild(video);
|
|
||||||
self.files.push(theFile);
|
|
||||||
break;
|
|
||||||
case 'audio/mpeg':
|
|
||||||
var sound = document.createElement('div');
|
|
||||||
sound.className = 'audio-item';
|
|
||||||
sound.setAttribute('data-source', f.target.result);
|
|
||||||
self.fileList.appendChild(sound);
|
|
||||||
self.files.push(theFile);
|
|
||||||
break;
|
|
||||||
case 'application/pdf':
|
|
||||||
case 'text/plain':
|
|
||||||
case 'text/rtf':
|
|
||||||
var file = document.createElement('div');
|
|
||||||
file.className = 'file-item';
|
|
||||||
file.setAttribute('data-source', f.target.result);
|
|
||||||
self.fileList.appendChild(file);
|
|
||||||
self.files.push(theFile);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})(file);
|
|
||||||
// Read in the image file as a data URL.
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//--------------------------
|
|
||||||
// event handlers
|
|
||||||
//--------------------------
|
|
||||||
handleFileActions(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
let self = this;
|
|
||||||
let rawList = [];
|
|
||||||
let sortedList = [];
|
|
||||||
let notOnTheList = [];
|
|
||||||
|
|
||||||
switch (e.type) {
|
|
||||||
case 'dragover':
|
|
||||||
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
|
||||||
break;
|
|
||||||
case 'change':
|
|
||||||
case 'drop':
|
|
||||||
e.type == 'drop'
|
|
||||||
? (rawList = e.dataTransfer.files)
|
|
||||||
: (rawList = e.target.files);
|
|
||||||
for (var i = 0, f; (f = rawList[i]); i++) {
|
|
||||||
// check witch files are cool to upload
|
|
||||||
if (this.accetableFiles.includes(f.type)) {
|
|
||||||
sortedList.push(f);
|
|
||||||
} else {
|
|
||||||
notOnTheList.push(f);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//send for sorting
|
|
||||||
self.sortFiles(sortedList);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue