|
|
@@ -1,236 +1,236 @@
|
|
|
-<!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><a href="index.html" style="color: inherit;"><img class="ts mini spaced image" src="img/module_icon.png" style="margin-right: 12px;"> Blog Writer</h4></a>
|
|
|
- </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;
|
|
|
- var currentWebDeployRoot = "";
|
|
|
-
|
|
|
- if (inputFiles != null && inputFiles.length > 0){
|
|
|
- //Edit mode
|
|
|
- inputFiles = inputFiles[0];
|
|
|
- }else{
|
|
|
- //New post mode
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- getWebRoot();
|
|
|
-
|
|
|
- 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,
|
|
|
- webroot: currentWebDeployRoot
|
|
|
- }, 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"
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function getWebRoot(callback = undefined){
|
|
|
- $.get("../system/network/www/webRoot", function(data){
|
|
|
- if (data == null || data == "" || data == undefined){
|
|
|
- callback("");
|
|
|
- return;
|
|
|
- }
|
|
|
- currentWebDeployRoot = data;
|
|
|
- if (callback != undefined){
|
|
|
- callback(data);
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
+<!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><a href="index.html" style="color: inherit;"><img class="ts mini spaced image" src="img/module_icon.png" style="margin-right: 12px;"> Blog Writer</h4></a>
|
|
|
+ </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;
|
|
|
+ var currentWebDeployRoot = "";
|
|
|
+
|
|
|
+ if (inputFiles != null && inputFiles.length > 0){
|
|
|
+ //Edit mode
|
|
|
+ inputFiles = inputFiles[0];
|
|
|
+ }else{
|
|
|
+ //New post mode
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ getWebRoot();
|
|
|
+
|
|
|
+ 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,
|
|
|
+ webroot: currentWebDeployRoot
|
|
|
+ }, 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"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getWebRoot(callback = undefined){
|
|
|
+ $.get("../system/network/www/webRoot", function(data){
|
|
|
+ if (data == null || data == "" || data == undefined){
|
|
|
+ callback("");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ currentWebDeployRoot = data;
|
|
|
+ if (callback != undefined){
|
|
|
+ callback(data);
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
</html>
|
Toby Chui
