binbin/js/mobile.js

var data = [[],[]]		// Stores file directory data.
var navi = {			// Stores data for sidebar navigation.
	'owned': [], 
	'shared': []
};
var drives = {};		// Stores drive names.
var navSelect;			// Stores current selected sidebar option.
var clickable = true;	// Prevents actions being run more than once.
var selectDiv; 			// Stores selected file or folder div.
var currDir = '';		// Stores the current directory.
var version = 'mobile';

function sortFiles(type, direction) {
	if(type === 'name') data[0] = sortSection(type, direction, data[0]);
	data[1] = sortSection(type, direction, data[1]);

    var p = get('#sortType');
    var i = get('#sortDirection');
    p.style.opacity = '0';
    i.style.opacity = '0';
    p.innerText = type[0].toUpperCase() + type.substring(1, type.length);
    setTimeout(function() {
    	var arrow = (direction < 0) ? 'up' : 'down';
    	i.className = `fa fa-arrow-${arrow} transition`;
        p.style.opacity = '1';
        i.style.opacity = '1';
    }, 300);

    try {
        clearTbl();
        setTimeout(function() {
            get('#directory').removeChild(get('#directoryCont'));
            dispDir();
        }, 300);
    } catch(err) {
        dispDir();
    }   
};

function dispDir() {
	updateLocation();
	try {
		get('#directory').removeChild(get('#directoryCont'));
	} catch(err) {}

	var cont = element('div', {
		id: 'directoryCont',
		class: 'transition',
		style: 'opacity:0'
	});

	if(data[0].length === 0 && data[1].length === 0) {
		cont.appendChild(element('p', {
			text: 'Nothing here!',
			style: 'font-weight: 100'
		}));
	}

	for(var i = 0; i < data.length; i++) {
		for(var j = 0; j < data[i].length; j++) {


			var itemInfo = data[i][j];

			var ext = (itemInfo.folder) ? 'fol' : 
					itemInfo.name.substring(
						itemInfo.name.lastIndexOf('.') + 1,
						itemInfo.name.length)
					.toLowerCase();

			var item = element('div', {
				class: 'item transition',
				ext: ext,
				filename: itemInfo.name
			});

			item.appendChild(element('p', {
				class: 'name',
				text: itemInfo.name
			}));

			item.appendChild(element('p', {
				class: 'otherInfo',
				text: (itemInfo.folder) ? '----' :
					dateStr(itemInfo.date, 'date') + ' | ' + itemInfo.size
			}));

			if(!itemInfo.folder) {
				var a = element('div', {
					onclick: function() {
						console.log('generating download link');
						// DO EXPIRY LINKS HERE
						// update link to get('copy') and copy
					}
				});

				a.appendChild(element('i', {
					class: 'fa fa-files-o transition'
				}));

				item.appendChild(a);
			}

			var ico = element('div', {
				class: 'fileIcon',
			});

			ico.appendChild(element('i', {
				class: `fa fa-${(faIcons[ext] || faIcons['other'])}`
			}));

			item.appendChild(ico);

			item.onclick = function() {
				if(!clickable) return;
				// DO WITH SHIFT AND CONTROL LATER.

				if(this.className.search( 'selectedItem') === -1) {
					get('.item').forEach(function(ele) {
						ele.style.backgroundColor = '';
						ele.className = ele.className.replace(' selectedItem', 
							'');
					});
					this.className += ' selectedItem';
					this.style.backgroundColor = 'rgba(255,255,255,0.2)';
					return;
				}

				// Below executes only after user has clicked twice.
				var name = this.getAttribute('filename');
				var ext = this.getAttribute('ext');

				clickable = false;
				if(ext == 'fol') {
					clearTbl();
					setTimeout(function() {
						currDir += '/' + name;
						listDir(currDir, 0);
					}, 300);
				} else {
					downloadFile(currDir + '/' + name);
				}
				clickable = true;

			}
			cont.appendChild(item);
		}
	}
	
	get('#directory').appendChild(cont);
	setTimeout(function() {
		get('#directoryCont').style.opacity = '1';
	}, 100);
};

function updateLocation() {
	var i = get('#barOpen i');
	if(currDir === '') {
		get('#location').textContent = drives[navSelect];
		if(i.className.includes('fa-bars')) return;
		i.style.opacity = '0';
		setTimeout(function() {
			i.className = 'fa fa-bars transition';
			i.style.opacity = '1'
		}, 300);
	} else {
		get('#location').textContent = currDir.split('/').slice(-1);
		if(i.className.includes('fa-arrow-left')) return;
		i.style.opacity = '0';
		setTimeout(function() {
			i.className = 'fa fa-arrow-left transition';
			i.style.opacity = '1';
		}, 300);
	}
};

function sortButtons() {
	get('#sortText').onclick = function() {
		event.stopPropagation();
	};

	get('#sortName').onclick = function() {
		event.stopPropagation();
		animMenu('close');
		sort.name = sort.name * -1;
        sortFiles('name', sort.name);
	};

	get('#sortDate').onclick = function() {
		event.stopPropagation();
		animMenu('close');
		sort.date = sort.date * -1;
        sortFiles('date', sort.date);
	};

	get('#sortSize').onclick = function() {
		event.stopPropagation();
		animMenu('close');
		sort.size = sort.size * -1;
        sortFiles('size', sort.size);
	};

	get('#sortType').onclick = function() {
		var type = this.innerText.toLowerCase();
		sort[type] = sort[type] * -1;
		sortFiles(type, sort[type]);
	};
};

get('#barOpen').onclick = function() {
	animIcon(this);
	if(currDir === '') {
		setTimeout(function() {
			moveSidebar('open');	
		}, 10);
	} else {
		var arr = currDir.split('/');
		if(arr.length === 2) {
			currDir = '';
		} else {
			currDir = arr.slice(0, -1).reduce((a,b) => a + '/' + b);
		}
		listDir(currDir, 0);
	}
};

function animMenu(type) {
	if(type === 'open') {
		animFade('open', get('#menuOverlay'));
		setTimeout(function() {
			get('#optionContainer').style.bottom = '0';
		}, 150);
	} else if(type === 'close') {
		animFade('close', get('#menuOverlay'));
		get('#optionContainer').style.bottom = '-60%';
	}
};

function moveSidebar(type) {
	if(type === 'open') {
		get('#sidebar').style.left = '0';		
	} else if(type === 'close') {
		get('#sidebar').style.left = '-80%';
	}
};

function animIcon(div) {
	div.children[0].style.backgroundColor = 'rgba(0,0,0,0.2)';
	setTimeout(function() {
		div.children[0].style.backgroundColor = 'rgba(0,0,0,0)';
	}, 300);
};

function darkenTap(div) {
	div.style.backgroundColor = 'rgba(0,0,0,0.2)';
	that = this;
	setTimeout(function() {
		div.style.backgroundColor = 'rgba(0,0,0,0)';
	}, 300);
};

get('#sidebar').onclick = function() {
    event.stopPropagation();
};

get('#dotOpen').onclick = function(event) {
	event.stopPropagation();
	animIcon(this);
	animFade('open', get('#dotMenu'));
};

get('#openSort').onclick = function() {
	event.stopPropagation();
	darkenTap(this);
	animFade('close', get('#dotMenu'));
	animMenu('open');
};

document.getElementById('download').onclick = function() {
	event.stopPropagation();
	darkenTap(this);
};

document.onclick = function(event) {
	animFade('close', get('#dotMenu'));
	animMenu('close');
	moveSidebar('close');
};

getDrives();
sortButtons();