yunpan/static/js/index.js

yunpan demo

$(function() {

	let selectedFile = '';
	let selectedDir = spacePath;
	let selectedDirList = [spacePath];

	if(selectedDirList.length == 1) {
		$('.fileDir').hide();
	}

	$('.item').on('click', function(ev){
		$('.opt-btn').show();

		$('.item').removeClass('active');

		selectedFile = $(this).attr('name');

		$(this).addClass('active');

		ev.stopPropagation();
	});

	$('.fileList').on('click', function(){
		$('.opt-btn').hide();
		$('.item').removeClass('active');

		selectedFile = '';
	});

	$('.fileList').on('dblclick','.item-dir',function(){
		selectedFile = $(this).attr('name');
		let path = selectedDir + selectedFile;

		console.log(path);
		$.ajax({
			type : 'POST',
			url : '/getfiles',
			data : {
				path : path,
			},
			success : function (data) {
				console.log(data);
				var code = data.code;
				var info = data.data;
				if(data.code) {
					
					selectedDirList.push(selectedFile);

					reflashFile(info);
				}
			}
		})
	});

	$('.fileDir').on('click',function(){

		if(selectedDirList.length == 1) {
			return;
		}
		selectedDirList.pop();
		var path = selectedDirList.join('/');

		$.ajax({
			type : 'POST',
			url : '/getfiles',
			data : {
				path : path,
			},
			success : function (data) {
				console.log(data);
				var code = data.code;
				var info = data.data;
				if(data.code) {
					reflashFile(info);
				}
			}
		})
	});

	function reflashFile(list) {
		console.log(list);
		$('.fileList').children().remove();

		var nodeHTML = '';
		for(var i=0;i<list.length;i++) {
			var item = list[i];

			nodeHTML += `<div name="${item.name}" class="item item-${item.type}">
				<div class="itemImage"></div>
				<div class="itemName">
					<div class="staticName">${item.name}</div>
					<div class="changeName">
						<input type="text" autocomplete="off" value="${item.name}" maxlength="50" class="ipt-name inputName">
					</div>
				</div>
			</div>`;
		}

		if(list.length == 0){
			nodeHTML = '<div class="nofile">该文件为空</div>';
		}

		$('.fileList').append(nodeHTML);

		console.log(selectedDirList);
		if(selectedDirList.length == 1) {
			$('.fileDir').hide();
		} else {
			$('.fileDir').show();
		}
	}

	$('#delBtn').on('click', function(ev){

		$.ajax({
			type : 'POST',
			url : '/del',
			data : {
				file : selectedFile,
				dir : selectedDir
			},
			success : function (data) {
				if( data.code ) {
					$('.item.active').remove();
				}
			}
		})
	});

	$('#downloadBtn').on('click', function(ev){

	});

	$('#copyBtn').on('click', function(ev){
		let copyToDst = selectedDir + 'copy/' + selectedFile;
		let copyPath = selectedDir + selectedFile;

		$.ajax({
			type : 'POST',
			url : '/copy',
			data : {
				src : copyPath,
				dst : copyToDst,
			},
			success : function (data) {
				if( data.code ) {
					
				}
			}
		})
	});	

	$('#renameBtn').on('click', function(ev){
		$('.item.active').addClass('rename');
	});	

	$('.inputName').on('blur',function(){
		let thisNode = $('.item.rename');
		thisNode.removeClass('rename');

		var name = $(this).val();
		let oldPath = selectedDir + selectedFile;
		let newPath = selectedDir + name;

		let that = this;

		$.ajax({
			type : 'POST',
			url : '/rename',
			data : {
				oldPath : oldPath,
				newPath : newPath
			},
			success : function (data) {
				if( data.code ) {
					thisNode.find('.staticName').text(name);
				}
			}
		})
	})

	$('#uploadBtn').on('click', function(ev){

	});	

	$('#createBtn').on('click', function(ev){
		let newFileNode = `
			<div name="新建文件夹" class="item item-dir">
				<div class="itemImage"></div>
				<div class="itemName">
					<div class="staticName">新建文件夹</div>
					<div class="changeName">
						<input type="text" autocomplete="off" value="新建文件夹" maxlength="50" class="ipt-name inputName">
					</div>
				</div>
			</div>
		`;

		let name = '新建文件夹';
		let newPath = selectedDir + name;

		$.ajax({
			type : 'POST',
			url : '/createFile',
			data : {
				newPath : newPath
			},
			success : function (data) {
				if( data.code ) {
					$('.fileList').append($(newFileNode));
				}
			}
		});
	});
});