forked from projects/fipamo
ro
989a4c7b69
the notifications and page editor ui elements where the only remaining space that still contained font icons, so they've been removed and replaced with svg some styling tweaks are still needed so that will handlded as the css edits continue
298 lines
8.3 KiB
JavaScript
298 lines
8.3 KiB
JavaScript
import Sortable from '../vendor/sortable.core.esm.js';
|
|
import anime from '../vendor/anime.es.js';
|
|
import DataUtils from '../utils/DataUtils.js';
|
|
import Notfications from './Notifications.js';
|
|
import Maintenance from '../controllers/MaintenanceManager.js';
|
|
const notify = new Notfications();
|
|
|
|
export default class FileManager {
|
|
//--------------------------
|
|
// constructor
|
|
//--------------------------
|
|
constructor(upload, input, imageList, fileList) {
|
|
this.mm = new Maintenance(null, null, document.getElementById('notify-progress'));
|
|
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.mediaSort = Sortable.create(this.imageList, {
|
|
animation: 150,
|
|
onUpdate: () => {
|
|
//notify.alert('REINDEXING MEDIA', null);
|
|
//this.updateFiles();
|
|
}
|
|
});
|
|
this.fileSort = Sortable.create(this.fileList, {
|
|
animation: 150,
|
|
onUpdate: () => {
|
|
//notify.alert('REINDEXING FILES', null);
|
|
//this.updateFiles();
|
|
}
|
|
});
|
|
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);
|
|
var removeMedia = document.querySelectorAll('.media-remove');
|
|
for (var i = 0, length = removeMedia.length; i < length; i++) {
|
|
removeMedia[i].addEventListener(
|
|
'click',
|
|
e => this.removeFile(e, 'media'),
|
|
false
|
|
);
|
|
}
|
|
}
|
|
getFileOrder() {
|
|
let imgList = '';
|
|
let fileList = '';
|
|
let mediaArray = this.mediaSort.toArray();
|
|
let fileArray = this.fileSort.toArray();
|
|
for (var i = 0, length = mediaArray.length; i < length; i++) {
|
|
imgList = imgList + mediaArray[i] + ',';
|
|
}
|
|
for (var i = 0, length = fileArray.length; i < length; i++) {
|
|
fileList = fileList + fileArray[i] + ',';
|
|
}
|
|
let media = { images: imgList, files: fileList };
|
|
return media;
|
|
}
|
|
|
|
sortFiles(files) {
|
|
var self = this;
|
|
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) {
|
|
//create remove button object
|
|
var remove = document.createElement('button');
|
|
//var removeIcon = document.createElement('i');
|
|
//removeIcon.classList.add('ti', 'ti-x');
|
|
remove.innerHTML = 'X';
|
|
remove.className = 'media-remove';
|
|
//remove.appendChild(removeIcon);
|
|
//remove.setAttribute('id', mediaCount);
|
|
remove.addEventListener(
|
|
'click',
|
|
e => self.removeFile(e, 'media'),
|
|
false
|
|
);
|
|
|
|
//upload the file
|
|
let upload = new FormData();
|
|
upload.enctype = 'multipart/form-data';
|
|
upload.append('upload_files[]', theFile, theFile.name);
|
|
let item = null;
|
|
let progress = null;
|
|
|
|
// sort files
|
|
switch (theFile.type) {
|
|
case 'image/jpg':
|
|
case 'image/jpeg':
|
|
case 'image/gif':
|
|
case 'image/svg':
|
|
case 'image/png':
|
|
item = self.itemFactory('img-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mm
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-id', result.filePath);
|
|
item.style.background =
|
|
'url(' +
|
|
f.target.result +
|
|
') no-repeat center center / cover';
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
case 'video/mp4':
|
|
item = self.itemFactory('video-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mm
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-source', result.filePath);
|
|
let video = document.createElement('video');
|
|
let source = document.createElement('source');
|
|
source.src = f.target.result;
|
|
video.appendChild(source);
|
|
item.appendChild(video);
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
case 'audio/mpeg':
|
|
item = self.itemFactory('audio-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mm
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-source', result.filePath);
|
|
let audio = document.createElement('audio');
|
|
audio.setAttribute('controls', true);
|
|
let source = document.createElement('source');
|
|
source.src = f.target.result;
|
|
audio.appendChild(source);
|
|
item.appendChild(audio);
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
case 'application/pdf':
|
|
case 'text/plain':
|
|
case 'text/rtf':
|
|
item = self.itemFactory('file-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mm
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-source', result.filePath);
|
|
let link = document.createElement('a');
|
|
link.href = result.filePath;
|
|
link.innerHTML = result.fileName;
|
|
item.appendChild(link);
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
})(file);
|
|
// Read in the image file as a data URL.
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
itemFactory(type = null) {
|
|
//get counts for lists
|
|
var mediaCount = this.imageList.childNodes.length;
|
|
var fileCount = this.fileList.childNodes.length;
|
|
if (mediaCount < 0) mediaCount = 0;
|
|
if (fileCount < 0) fileCount = 0;
|
|
var item = document.createElement('div');
|
|
item.className = type;
|
|
var progress = document.createElement('div');
|
|
progress.className = 'item-progress';
|
|
item.appendChild(progress);
|
|
|
|
if (type == 'img-item' || type == 'video-item') {
|
|
this.imageList.appendChild(item);
|
|
progress.setAttribute('id', 'pgs' + mediaCount);
|
|
item.setAttribute('id', mediaCount);
|
|
} else {
|
|
this.fileList.appendChild(item);
|
|
progress.setAttribute('id', 'pgs' + fileCount);
|
|
item.setAttribute('id', fileCount);
|
|
}
|
|
return item;
|
|
}
|
|
|
|
//--------------------------
|
|
// event handlers
|
|
//--------------------------
|
|
removeFile(e) {
|
|
var item = e.target.parentNode.parentNode;
|
|
switch (item.className) {
|
|
case 'img-item':
|
|
case 'video-item':
|
|
this.imageList.removeChild(item);
|
|
break;
|
|
case 'audio-item':
|
|
case 'file-item':
|
|
this.fileList.removeChild(item);
|
|
break;
|
|
}
|
|
notify.alert('File Removed!', true);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|