TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
		<meta name="theme-color" content="#ff9224">
		<script src="../script/jquery.min.js"></script>
		<script src="../script/ao_module.js"></script>
		<link rel="stylesheet" href="../script/tocas/tocas.css">
		<script src="../script/tocas/tocas.js"></script>


		<!-- Special handler to remove tocas css style-->
		<script>
			function clearTocasStyle(){
				console.log("Cleaning Styles")
				$("body").find("li, ul").each(function(){
					$(this).addClass("unstyled");
				});
			}
			window.clearTocasStyle = clearTocasStyle();
			
		</script>
		<!-- Editor -->
		<link href="script/suneditor/suneditor.min.css" rel="stylesheet">
	
		<script src="script/suneditor/suneditor.min.js"></script>

		<script src="script/suneditor/en.js"></script>

		<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
		<title>Blog</title>
		<style>
			body {
				background-color: white;
			}

			.blog.main{
				background-color: #ff9224;
				border: 1px solid #ff9224;
				color: white;
			}

			.blog.main:hover{
				background-color: #c7721c !important;
				border: 1px solid #c7721c !important;
				color: white !important;
			}

			.blog.green{
				background-color: #47d191;
				border: 1px solid #47d191;
				color: white;
			}

			.blog.green:hover{
				background-color: #38a170 !important;
				border: 1px solid #38a170 !important;
				color: white !important;
			}

			.blog.red{
				background-color: #c4413d;
				border: 1px solid #c4413d;
				color: white;
			}

			.blog.red:hover{
				background-color: #8c302d !important;
				border: 1px solid #8c302d !important;
				color: white !important;
			}

            .topPad{
                margin-top: 4px;
            }

			#editorFrame{
				width: 100%;
				border: 0px solid transparent;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<br><br>
		<div class="ts container">
			<div>
				<h4><img class="ts mini spaced image" src="img/module_icon.png" style="margin-right: 12px;">  Blog Writer</h4>
			</div>
			<div class="ts divider"></div>
			<div class="ts stackable grid">
				<div class="twelve wide column">
					<iframe id="editorFrame" src="framedEditor.html"></iframe>
				</div>
				<div class="four wide column">
					<form class="ts form">
						<div class="field">
							<h5>Post Title & Metatags</h5>
						</div>
						<div class="field">
							<label>Post Title</label>
							<input id="title" type="text">
						</div>
						<div class="field">
							<label>Tags (Seperate by ",")</label>
							<input id="tags" type="text">
						</div>
						<div class="field">
							
						</div>
					</form>
					<h5>Post Information</h5>
					<p><i class="hide icon"></i><span id="viewstate">Private Post</span></p>
					<p><span id="savepath">Not Saved</span></p>
					<h5>Actions</h5>
					<button class="ts fluid small button blog main" onclick="savePost(this);"><i class="save icon"></i> Save</button>
					<button class="ts fluid small button blog green topPad"><i class="upload icon"></i> Save & Publish</button>
					<br><br>
					<button class="ts fluid small button blog red topPad" onclick="discardAndExit();"><i class="remove icon"></i> Discard Changes</button>
				</div>
			</div>
		<br><br><br>
		
			
		</div>
		<script>
			var editingFile = "";
			var inputFiles = ao_module_loadInputFiles();
			var editorWindow = $("#editorFrame")[0].contentWindow;
			
			if (inputFiles != null && inputFiles.length > 0){
				//Edit  mode
				inputFiles = inputFiles[0];
			}else{
				//New post mode
				
			}

			function newEditor(){
				editorWindow.newEditor();
			}

			function handleWindowResize(){
				$(editorWindow.document).find("#suneditor_maineditor").css("width", "100%");
				var newHeight = window.innerHeight - 300;
				if (newHeight < 500){
					newHeight = 500;
				}
				$(editorWindow.document).find("#suneditor_maineditor").css("height", newHeight + "px");
				$(editorWindow.document).find(".se-wrapper").css("height", newHeight - 138 + "px");
				$(editorWindow.document).find(".se-wrapper-inner").css("height", newHeight - 138 + "px");

				$("#editorFrame").css("height", (newHeight + 100) + "px");


			}

			
			$(window).on("resize", function(){
				handleWindowResize();
			});

			function clearTocasStyle(){
				console.log("Cleaning Styles")
				$("body").find("li, ul").each(function(){
					$(this).addClass("unstyled");
				});
			}


			function savePost(btn){
				$(btn).addClass("loading");
				var title = $("#title").val();
				var tags = $("#tags").val();

				if (title.trim() == ""){
					title = "Untitled Post"
				}

				//Get the content of the post
				var postContent = editorWindow.getContent();
				console.log(postContent);
				if (postContent == ""){
					$(btn).removeClass("loading");
					alert("Nothing to post :(")
					return;
				}
				
				//Create post
				ao_module_agirun("Blog/backend/savePost.js", {
					filepath: editingFile,
					title: title,
					tags: tags,
					content: postContent
				}, function(data){
					if (data.error !== undefined){
						alert(data.error);
					}else{
						//Return the filepath of the post storage
						editingFile = data;
						$("#savepath").text(data);
					}

					$(btn).removeClass("loading");
				});
			}

			function discardAndExit(){
				if (confirm("Confirm Exit?")){
					window.location.href = "index.html"
				}
			}
		</script>
	</body>
</html>