{{template "member/top.html" .}}
<div class="m-b-md"> 
	<h3 class="m-b-none">
		{{if .isNew}}
			新建主题
		{{else}}
			编辑主题
		- 
		{{.theme.Name}}
		{{end}}
		<a class="btn btn-default" href="{{$.siteUrl}}/preview?themeId={{.themeId}}" target="_blank"><span class="fa fa-eye"></span> 预览</a>
	</h3>
</div>

<style>
#tplContent * {
	font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
}
.image-list {
	list-style: none;
	padding: 0;
}
.image-list li {
	display: inline-block;
	margin-right: 5px;
	text-align: center;
}
.image-list li .thumb {
	width: 100px;
	height: 100px;
	line-height: 100px;
	overflow: hidden;
	border: 1px solid #ccc;
	padding: 3px;
	border-radius: 5px;
}
.op {
	text-align: center;
}
</style>
<div class="row">
<div class="col-sm-4">
	<section class="panel panel-default">
		<header class="panel-heading">
			模板, 样式, 脚本:
		</header>
		<div class="panel-body" style="height:430px;overflow: auto;">
	
	<div class="list-group bg-white file-list">
		{{range .myTpls}}
		<a href="#" class="list-group-item " data-file="{{.}}"> 
			<i class="fa fa-remove icon-muted remove-file" title="delete file" ></i> 
			{{.}}
			<span class="badge"></span>
		</a>
		{{end}}
		
		</div>
	</div>
	<footer class="panel-footer text-right bg-light lter">
		<a class="btn btn-default" id="newFile">新建文件</a>
	</footer>
	</section>
</div>
<div class="col-sm-8">
	<section class="panel panel-default">
		<header class="panel-heading">
			当前文件: <span id="curTpl">header.html</span>
			<span id="msg"></span>
		</header>
		<div class="panel-body">
			<div id="tplContent" class="form-control" style="width: 100%; height: 400px;"></div>
		</div>
		<footer class="panel-footer text-right bg-light lter">
		    <button type="submit" id="saveBtn" class="btn btn-success">{{msg . "save"}}</button>
		</footer>
	</section>
</div>
</div>

<div class="row">
<div class="col-sm-12">
	<section class="panel panel-default">
		<header class="panel-heading">
			图片: images/
		</header>
		<div class="panel-body">
			<ul class="image-list" id="imageList">
			</ul>
		</div>
		<footer class="panel-footer text-right bg-light lter">
			<form id="formLogo" action="/member/blog/uploadThemeImage" method="post"
				enctype="multipart/form-data" target="logoTarget">
				<input type="hidden" name="themeId" value="{{.themeId}}" />
				<input type="file" class="form-control" id="logo2" name="file"
					onChange='$("#formLogo").submit();' /> 
			</form>
			<iframe id="logoTarget" name="logoTarget" src="#" style="display: none"></iframe>
		</footer>
	</section>
</div>
</div>

{{template "member/footer.html" .}}
<script src="/public/member/js/ace/ace.js" type="text/javascript"></script>
<script>
var editor = ace.edit("tplContent");
editor.setTheme("ace/theme/tomorrow");

var urlPrefix = "{{.siteUrl}}";
var userId = "{{.userInfo.UserId.Hex}}";
var themeId = "{{.themeId}}";
var themeBasePath = "/{{$.theme.Path}}";
var theme = {
	cache: {}, // filename => content
	curTplO: $("#curTpl"),
	tplContentO: $("#tplContent"),
	saveBtnO: $("#saveBtn"),
	newFileO: $("#newFile"),
	curTpl: "",
	tplInfos: {"header.html": "头部", "footer.html": "底部", "index.html": "首页", "cate.html": "分类页", "search.html": "搜索页", "single.html": "单页", "archive.html": "归档页", "post.html": "文章页", "tags.html": "标签页", "tag_posts.html": "标签文章页", "share_comment.html": "分享评论", "404.html":"404", "theme.json": "主题配置", "paging.html": "分页", "highlight.html": "高亮"},
	init: function() {
		var self = this;
		self.showTplInfo();
		$(".file-list").on("click", "a", function() {
			$(".file-list a").removeClass("active");
			var filename = $(this).data('file');
			self.saveCurContent(); // 保存当前的
			self.renderTpl(filename); // 再渲染
			$(this).addClass("active");
		});
		
		self.renderTpl("header.html");
		$(".file-list a").eq(0).addClass("active");
		
		self.saveBtnO.click(function(){ 
			self.saveCurContent($(this));
		});
		
		self.removeFile();
		self.newFile();
		
		self.initImage();
	},
	removeFile: function() {
		var self = this;
		$(".file-list").on("click", ".remove-file", function(e) {
			e.stopPropagation();
			var $a = $(this).closest("a");
			var file = $a.data('file');
			art.confirm("Are you sure to delete " + file + " ?", function() {
				ajaxPost("/member/blog/deleteTpl", {themeId: themeId, filename: file}, function(re) {
					// if(reIsOk(re)) {
						art.tips("Success");
						$a.remove();
						if(self.curTpl == file) {
							$(".file-list a").eq(0).trigger("click");
						}
					//} else {
					//	art.alert(re.Msg);
					//}
				})
			});
		});
	},
	newFile: function() {
		var self = this;
		self.newFileO.click(function() {
			art.prompt("文件名", function(file){ 
				if(!file) {
					return;
				}
				var t = '<a href="#" class="list-group-item " data-file="' + file + '"> <i class="fa fa-remove icon-muted remove-file" title="delete file" ></i> ' + file + '<span class="badge"></span></a>';
				$(".file-list").append(t);
			});
		});
	},
	showTplInfo: function() {
		var self = this;
		$(".file-list a").each(function() {
			var file = $(this).data("file");
			var info = "";
			info = self.tplInfos[file];
			if(!info) {
				if(file.indexOf(".css") > 0) {
					info = "样式";
				} else if(file.indexOf(".js") > 0) {
					info = "脚本";
				}  else if(file.indexOf(".html") > 0) {
					info = "模板";
				}
			} else {
				$(this).find(".remove-file").remove();
			}
			$(this).find(".badge").text(info);
		});
	},
	msgO: $("#msg"),
	saveCurContent: function(t) {
		var self = this;
		var content = editor.getValue()
		
		var filename = self.curTpl;
		// 之前的内容是否有改动
		if(self.cache[filename] == content) {
			return;
		}
		
		if(t) {
			t.button("loading");
		}
		self.msgO.html("正在保存...");
		ajaxPost("/member/blog/updateTplContent", {themeId: themeId, filename: self.curTpl, content: content}, function(re) {
			if(t) {
				t.button("reset");
			}
			if(reIsOk(re)) {
				self.cache[filename] = content;
				// art.tips("Success");
				self.msgO.html("保存成功")
				setTimeout(function() {
					self.msgO.html("");
				}, 3000);
			} else {
				art.alert(re.Msg);
			}
		});
	},
	renderContent: function(name, content) {
		var self = this;
		self.curTplO.html(name);
		self.curTpl = name; // 这里设计
		var lang = "html";
		if(name.indexOf(".js") > 0 || name.indexOf(".json") > 0) {
			lang = "javascript";
		} else if(name.indexOf(".css") > 0) {
			lang = "css";
		}
		editor.setValue(content);
		editor.session.setMode("ace/mode/" + lang);
		editor.gotoLine(1);
		setTimeout(function() {
			editor.gotoLine(1);
		}, 200);
	},
	renderTpl: function(name) {
		var self = this;
		var content = "";
		self.curTpl = name; // 这里设置
		if(self.cache[name]) {
			content = self.cache[name];
			self.renderContent(name, content);
			return;
		}
		ajaxGet("/member/blog/getTplContent", {themeId: themeId, filename: name}, function(re){
			if(reIsOk(re)) {
				self.cache[name] = re.Item;
				self.renderContent(name, re.Item);
			}
		});
	},
	//-----------------
	// theme images
	imageListO: $("#imageList"),
	initImage: function() {
		var self = this;
		self.reRenderImages();
		self.imageListO.on("click", ".delete-image", function(re) {
			var file = $(this).data('image');
			var t = this;
			art.confirm("Are you sure to delete it " + file + " ?", function() {
				ajaxPost("/member/blog/deleteThemeImage", {themeId: themeId, filename: file}, function(re) {
					if(reIsOk(re)) {
						art.tips("Success");
						$(t).closest("li").remove();
					} else {
						art.alert(re.Msg);
					}
				});
			});
		});
	},
	renderImages: function(images) {
		var self = this;
		if(!images || images.length == 0) {
			self.imageListO.html("无图片");
			return;
		}
		var html = "";
		for(var i = 0; i < images.length; ++i) {
			var image = images[i];
			var path = themeBasePath + "/images/" + image;
			
			html += '<li><div class="thumb"><img src="' + path + '"></div><div class="op"><span>' + image + '</span><br /><a class="btn btn-xs btn-warning delete-image" data-image="' + image + '"><span class="fa fa-remove"></span></a></div></li>';
		}
		self.imageListO.html(html);
	},
	reRenderImages: function() {
		var self = this;
		ajaxGet("/member/blog/listThemeImages", {themeId: themeId}, function(re) {
			if(reIsOk(re)) {
				var images = re.List;
				self.renderImages(images);
			}
		});
	},
}
$(function() {
	theme.init();
	$(window).keydown(function(e) {
		if (e.keyCode == 83 && (e.ctrlKey || e.metaKey)) {
			e.preventDefault();
			theme.saveBtnO.trigger("click");
		}
	});
});

// filename, result, resultCode
function uploadFinish(ret) {
	if (ret) {
		if (ret.resultCode == '1') {
			theme.reRenderImages();
			art.tips(ret.result)
			return;
		}
		art.alert(ret.result);
		return;
	}
	// 上传出错
	art.alert("error");
}
</script>

{{template "member/end.html" .}}