#@mgr(attr.getItem("currentMenuName"))

#define content()
<section class="content container-fluid">
	
	#if(msg)
	<div class="alert alert-success alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<p>#(msg)</p></div>
	#end

	<div id="dataTable" class="box box-info">
		<div class="box-header with-border">
			<h3 class="box-title">网站资源</h3>
			<div class="pull-right">#(path)</div>
		</div>
		<div class="box-body no-padding">
			<div class="box-controls">
				<button type="button" class="btn btn-warning btn-sm btn-create">
					<i class="fa fa-folder"></i><span class="hidden-xs"> 创建目录</span>
				</button>
				#if(EStr.notEmpty(path))
				#setLocal(parent = path.substring(0, path.lastIndexOf('/')))
				<a href="#(attr.ctrl)?path=#(parent)" class="btn btn-sm btn-warning"><i class="fa fa-reply"></i> 上一级</a>
				<a href="#(attr.ctrl)" class="btn btn-sm btn-warning"><i class="fa fa-chevron-up"></i> 根目录</a>
				#end
				<button type="button" class="btn btn-success btn-sm btn-upload">
					<i class="fa fa-cloud-upload"></i><span class="hidden-xs"> 上传资源</span>
				</button>
			</div>
			<div class="table-responsive">
				<table class="table table-hover table-striped table-bordered" style="margin-bottom: 0">
					<thead>
						<tr>
							<th style="text-align: center">文件名称</th>
							<th style="text-align: center">类型</th>
							<th style="text-align: center">大小</th>
							<th style="text-align: center; width: 140px">操作</th>
						</tr>
					</thead>
					<tbody>
						#for(file : files)
						#if(file.isDirectory())
						<tr>
							<td style="cursor: default; text-align: left">
								<i class="fa fa-folder-o"></i> 
								<a href="#(attr.ctrl)?path=#(path)/#(file.fileName)">#(file.fileName)</a>
							</td>
							<td style="cursor: default; text-align: center">文件夹</td>
							<td style="cursor: default; text-align: center">&nbsp;</td>
							<td style="cursor: default; text-align: center">
								<div class="btn-group">
									<a class="btn btn-default btn-sm" href="#(attr.ctrl)?path=#(path)/#(file.fileName)">
										<i class="fa fa-toggle-right"></i><span class="hidden-xs"> 进入</span>
									</a>
									<button type="button" class="btn btn-default btn-sm btn-del" data-name="#(file.filePath)">
										<i class="fa fa-trash-o"></i><span class="hidden-xs"> 删除</span>
									</button>
								</div>
							</td>
						</tr>
						#else
						<tr>
							<td style="cursor: default; text-align: left">
								<i class="fa fa-file-text"></i> 
								<a href="#(file.url)" target="_blank">#(file.fileName)</a>
							</td>
							<td style="cursor: default; text-align: center">#(file.mimeType)</td>
							<td style="cursor: default; text-align: center">#(file.fileSizeEm)</td>
							<td style="cursor: default; text-align: center">
								<div class="btn-group">
									#if(file.mimeType == "css" || file.mimeType == "js")
									<a class="btn btn-default btn-sm" href="#(attr.ctrl)/edit?path=#(path)&file=#(file.fileName)">
										<i class="fa fa-edit"></i><span class="hidden-xs"> 编辑</span>
									</a>
									#else
									<a class="btn btn-default btn-sm" href="#(file.url)" target="_blank">
										<i class="fa fa-external-link"></i><span class="hidden-xs"> 查看</span>
									</a>
									#end
									<button type="button" class="btn btn-default btn-sm btn-del" data-name="#(file.filePath)">
										<i class="fa fa-trash-o"></i><span class="hidden-xs"> 删除</span>
									</button>
								</div>
							</td>
						</tr>
						#end
						#else
						<tr>
							<td style="cursor: default; text-align: center" colspan="3">
								<p>还未上传任何资源。</p>
							</td>
						</tr>
						#end
						<tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<blockquote>
		<h5><b>使用说明：</b></h5>
		<li>图片文件在CSS中可使用相对路径直接引用。</li>
		<li>图片文件在HTML中引用时，可通过 <code>#[[#(webres)/...]]#</code> 实现动态的相对引用，例如：<code>#[[#(webres)/pic.jpg]]#</code></li>
		<li>JS或CSS文件在HTML中引用时，也可通过 <code>#[[#(webres)/...]]#</code> 实现动态的相对引用，例如：<code>#[[#(webres)/index.js]]#</code></li>
		<li>AMD方式引用JS文件：<code>'webres/index'</code>，可省略文件后缀 <code>.js</code></li>
		<li>AMD方式引用CSS文件：<code>'css!webres/style'</code>，可省略文件后缀 <code>.css</code></li>
		<li>不推荐使用绝对路径（http://...）引用资源文件，不便于网站迁移或备份还原。</li>
		<li>资源文件仅用于网站前端的静态渲染，请勿上传音视频或可执行文件（exe），此类文件扫描后会自动清除。</li>
	</blockquote>

</section>
#end

#define after()
<script>
require(['kit', 'ez-modal', 'jquery'], function(Kit, Modal){
	
	$('.btn-del').on('click', function(){
		var fileName = $(this).data('name');
		Modal.alert({ content:'确定要删除该资源文件码？', callback: function(){
			Kit.go('#(attr.ctrl)/del?path=#(path)&fileName=' + fileName);
			return true;
		}});
	});
	
	var modal_folder, modal_upload;
	$('.btn-create').on('click', function(){
		if(!modal_folder){
			var html = [];
			html.push('<div class="form-group">');
			html.push('	<label class="col-xs-12 col-sm-2 control-label">目录名称：</label>');
			html.push('	<div class="col-xs-12 col-sm-10">');
			html.push('		<input type="hidden" name="path" value="#(path)">');
			html.push('		<input type="text" name="folder" class="form-control">');
			html.push('	</div>');
			html.push('</div>');
			modal_folder = Modal.get({
				id: 'FolderCreateModal'
				, title: '创建目录'
				, content: html.join('')
				, form: '#(attr.ctrl)/folder'
			});
		}
		Modal.show(modal_folder);
	});
	$('.btn-upload').on('click', function(){
		if(!modal_upload){
			var html = [];
			html.push('<div class="form-group">');
			html.push('	<label class="col-xs-12 col-sm-2 control-label">选择文件：</label>');
			html.push('	<div class="col-xs-12 col-sm-10">');
			html.push('		<input type="hidden" name="path" value="#(path)">');
			html.push('		<input type="file" name="resFile" class="form-control">');
			html.push('	</div>');
			html.push('</div>');
			modal_upload = Modal.get({
				id: 'FileUpLoadModal'
				, title: '上传资源'
				, content: html.join('')
				, form: '#(attr.ctrl)/upload'
			});
			modal_upload.find('form').attr('enctype', 'multipart/form-data');
		}
		Modal.show(modal_upload);
	});
	
});
</script>
#end