fipamo/public/assets/scripts/dash/app/ui/FileManager.js

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 '../../libraries/MaintenanceRequest.js';
const notify = new Notfications();

export default class FileManager {
	//--------------------------
	// constructor
	//--------------------------
	constructor(upload, input, imageList, fileList) {
		this.mr = 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.mr
								.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.mr
								.filesUpload(theFile.type, upload, progress)
								.then(result => {
									item.setAttribute('data-id', 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.mr
								.filesUpload(theFile.type, upload, progress)
								.then(result => {
									item.setAttribute('data-id', 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.mr
								.filesUpload(theFile.type, upload, progress)
								.then(result => {
									item.setAttribute('data-id', 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;
		console.log('ITEM', item);
		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;
		}
	}
}