index.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="apple-mobile-web-app-capable" content="yes" />
  6. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  7. <meta name="theme-color" content="#ff9224">
  8. <script src="../script/jquery.min.js"></script>
  9. <script src="../script/ao_module.js"></script>
  10. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  11. <script src="../script/semantic/semantic.min.js"></script>
  12. <title>Web Builder</title>
  13. <!-- <link rel="manifest" crossorigin="use-credentials" href="manifest.json"> -->
  14. <style>
  15. body {
  16. background-color: white;
  17. }
  18. .blog.main{
  19. background-color: #ff9224;
  20. border: 1px solid #ff9224;
  21. color: white;
  22. }
  23. .blog.main:hover{
  24. background-color: #c7721c !important;
  25. border: 1px solid #c7721c !important;
  26. color: white !important;
  27. }
  28. .blog.green{
  29. background-color: #47d191;
  30. border: 1px solid #47d191;
  31. color: white;
  32. }
  33. .blog.green:hover{
  34. background-color: #38a170 !important;
  35. border: 1px solid #38a170 !important;
  36. color: white !important;
  37. }
  38. .blog.red{
  39. background-color: #c4413d;
  40. border: 1px solid #c4413d;
  41. color: white;
  42. }
  43. .blog.red:hover{
  44. background-color: #8c302d !important;
  45. border: 1px solid #8c302d !important;
  46. color: white !important;
  47. }
  48. .topPad{
  49. margin-top: 4px;
  50. }
  51. #editorFrame{
  52. width: 100%;
  53. border: 0px solid transparent;
  54. height: calc(100% - 10px);
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="ui compact mini top attached menu">
  60. <div class="item" style="font-weight: bold;">
  61. Web Builder (Basic)
  62. </div>
  63. <div class="item" id="currentTitle">
  64. (Default Title)
  65. </div>
  66. <a class="item" onclick="setTitle();">
  67. Change Title
  68. </a>
  69. <!--
  70. <a class="item">
  71. Select Template
  72. </a>
  73. -->
  74. <a class="item" onclick="forceSavePost();">
  75. Save
  76. </a>
  77. </div>
  78. <iframe id="editorFrame" src="framedEditor.html"></iframe>
  79. <script>
  80. var editingFile = "";
  81. var inputFiles = ao_module_loadInputFiles();
  82. var editorWindow = $("#editorFrame")[0].contentWindow;
  83. var currentWebDeployRoot = "";
  84. var savePendingContents = "";
  85. var currentTitle = "";
  86. var currentTemplate = "";
  87. if (inputFiles != null && inputFiles.length > 0){
  88. //Edit mode
  89. inputFiles = inputFiles[0];
  90. ao_module_setWindowTitle(inputFiles.filename + " - Web Builder");
  91. }else{
  92. //New post mode
  93. ao_module_setWindowTitle("untitled.html " + "- Web Builder")
  94. }
  95. getWebRoot();
  96. function newEditor(){
  97. editorWindow.initEditor();
  98. }
  99. function setTitle(){
  100. var newtitle = prompt("Webpage Title", currentTitle);
  101. if (newtitle != null){
  102. updateTitle(newtitle);
  103. }
  104. }
  105. function updateTitle(newtitle){
  106. $("#currentTitle").text(newtitle);
  107. currentTitle = newtitle;
  108. }
  109. function handleWindowResize(){
  110. $(editorWindow.document).find("#suneditor_maineditor").css("width", "100%");
  111. var heightOverride = window.innerHeight - 45;
  112. $(editorWindow.document).find("#suneditor_maineditor").css("height", + "px");
  113. $(editorWindow.document).find(".se-wrapper").css("height", heightOverride - 100 + "px");
  114. $(editorWindow.document).find(".se-wrapper-inner").css("height", heightOverride - 100 + "px");
  115. $("#editorFrame").css("height", heightOverride + "px");
  116. }
  117. $(window).on("resize", function(){
  118. handleWindowResize();
  119. });
  120. function handleSavefile(content){
  121. savePost(content);
  122. return false;
  123. }
  124. function forceSavePost(){
  125. var editorContent = editorWindow.getContent();
  126. savePost(editorContent);
  127. console.log("Saved");
  128. }
  129. function saveFileSelected(filedata){
  130. for (var i=0; i < filedata.length; i++){
  131. var filename = filedata[i].filename;
  132. var filepath = filedata[i].filepath;
  133. editingFile = filepath;
  134. ao_module_setWindowTitle(filename + " - Web Builder")
  135. }
  136. //savePost again
  137. var contentToSave = savePendingContents;
  138. savePendingContents = "";
  139. savePost(contentToSave);
  140. }
  141. function savePost(postContent){
  142. if (editingFile == ""){
  143. savePendingContents = postContent;
  144. ao_module_openFileSelector(saveFileSelected, currentWebDeployRoot || "user:/Desktop", "new",false, {
  145. defaultName: "untitled.html"
  146. });
  147. return false;
  148. }else{
  149. //Create post
  150. ao_module_agirun("Web Builder/backend/save.js", {
  151. filepath: editingFile,
  152. content: postContent,
  153. title: currentTitle,
  154. }, function(data){
  155. if (data.error !== undefined){
  156. alert(data.error);
  157. }else{
  158. }
  159. });
  160. }
  161. }
  162. function getWebRoot(callback = undefined){
  163. $.get("../system/network/www/webRoot", function(data){
  164. if (data == null || data == "" || data == undefined){
  165. callback("");
  166. return;
  167. }
  168. currentWebDeployRoot = data;
  169. if (callback != undefined){
  170. callback(data);
  171. }
  172. });
  173. }
  174. </script>
  175. </body>
  176. </html>