editor.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- Special modification for NotepadA system, ArOZ Online Beta-->
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <title id='pageTitle'>NotepadA - Loading</title>
  8. <script src='../../script/jquery.min.js'></script>
  9. <script>
  10. $('body').css('background-color','white');
  11. function checkIsSaved(){
  12. return true;
  13. }
  14. </script>
  15. <script src="../../script/jquery.min.js"></script>
  16. <style type="text/css" media="screen">
  17. body {
  18. overflow: hidden;
  19. padding-bottom:5px;
  20. background-color:#2b2b2b;
  21. }
  22. #editor {
  23. margin: 0;
  24. position: absolute;
  25. top: 0;
  26. bottom: 15px;
  27. left: 0;
  28. right: 0;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <pre id="editor"></pre>
  34. <script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  35. <script>
  36. //Get the filename, path and other information from the hash
  37. var filename = "";
  38. var filepath = "";
  39. var lastSave = "";
  40. var fontsize = 12;
  41. var theme = "github";
  42. var editor = undefined;
  43. window.onhashchange = function(e){
  44. initEditor();
  45. }
  46. initEditor();
  47. function initEditor(){
  48. if (window.location.hash.length > 0){
  49. var payload = window.location.hash.substr(1);
  50. payload = JSON.parse(decodeURIComponent(payload));
  51. filepath = payload.filename;
  52. let basename = payload.filename.split("/").pop();
  53. filename = basename;
  54. fontsize = payload.fontsize;
  55. theme = payload.theme;
  56. console.log("NotepadA editor loaded: ", payload);
  57. //Load the content of the file
  58. $.get("../../media?file=" + filepath, function(fileContent){
  59. $("#editor").text(fileContent);
  60. //Start the editor if not started
  61. if (editor == undefined){
  62. StartEditor();
  63. }
  64. });
  65. }else{
  66. alert("Invalid use of editor!")
  67. }
  68. }
  69. document.addEventListener("mousedown", function(event) {
  70. //When click on this document, focus this
  71. if (parent.ao_module_virtualDesktop){
  72. parent.ao_module_focus();
  73. }
  74. }, true);
  75. function StartEditor(){
  76. //Init editor
  77. editor = ace.edit("editor");
  78. editor.setTheme("ace/theme/" + theme);
  79. var detectMode = getMode(filepath);
  80. //console.log("[NotepadA] Chaning mode to " + detectMode.toLowerCase());
  81. if ( detectMode != undefined){
  82. editor.session.setMode("ace/mode/" + detectMode.toLowerCase());
  83. }else{
  84. //Default mode: php
  85. editor.session.setMode("ace/mode/php");
  86. }
  87. editor.setOptions({
  88. //fontFamily: "tahoma",
  89. fontSize: fontsize + "pt"
  90. });
  91. lastSave = editor.getValue();
  92. }
  93. //Listener for Ctrl+S
  94. $(window).keypress(function(event) {
  95. if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
  96. //console.log(filepath);
  97. Save();
  98. event.preventDefault();
  99. return false;
  100. });
  101. $(document).on("click","#editor",function() {
  102. //Hide the parent window in NotepadA condition
  103. window.parent.hideToggleMenu();
  104. });
  105. function Print() {
  106. try {
  107. var printWindow = window.open("", "", "height=400,width=800");
  108. printWindow.document.write(`<html><head><title>${filename} ${new Date().toLocaleString()}</title>`);
  109. printWindow.document.write("</head><xmp>");
  110. printWindow.document.write(editor.getSession().getDocument().getValue());
  111. printWindow.document.write("</xmp></html>");
  112. printWindow.document.close();
  113. printWindow.print();
  114. }catch (ex) {
  115. console.error("Error: " + ex.message);
  116. }
  117. }
  118. //Absolute path is used for saving. So no need to worry about the relative path over php issues
  119. function Save(){
  120. code = editor.getValue();
  121. parent.ao_module_agirun(parent.moduleRootPath + "backend/filesaver.js", {
  122. filepath: filepath,
  123. content: code
  124. }, function(data){
  125. if (data.error == undefined){
  126. //Finish writting to the file
  127. console.log("%c[NotepadA] " + filename + " -> Saved!","color:#1265ea");
  128. lastSave = code;
  129. }else{
  130. console.log(data);
  131. }
  132. })
  133. /*
  134. $.post("../writeCode.php", { filename: filepath, content: code })
  135. .done(function( data ) {
  136. if (data.includes("ERROR") == false){
  137. console.log("%c[NotepadA] " + filename + " -> Saved!","color:#1265ea");
  138. lastSave = code;
  139. }else{
  140. console.log(data);
  141. }
  142. });
  143. */
  144. }
  145. function getDocWidth(){
  146. return $(document).width();
  147. }
  148. function checkIsSaved(){
  149. if (typeof(editor) == "undefined"){
  150. //Editor not started
  151. return
  152. }
  153. if (lastSave == editor.getValue()){
  154. return true;
  155. }else{
  156. return false;
  157. }
  158. }
  159. function insertChar(text){
  160. editor.session.insert(editor.getCursorPosition(), text);
  161. }
  162. function getEditorContenet(){
  163. return editor.getValue();
  164. }
  165. function getFilepath(){
  166. return (filepath);
  167. }
  168. function openInNewTab(){
  169. window.open("../../media?file=" + filepath);
  170. }
  171. function getSelectedText(){
  172. return editor.getSession().doc.getTextRange(editor.selection.getRange());
  173. }
  174. function insertGivenText(text){
  175. editor.session.insert(editor.getCursorPosition(), text);
  176. }
  177. function callUndo(){
  178. editor.getSession().getUndoManager().undo();
  179. }
  180. function callRedo(){
  181. editor.getSession().getUndoManager().redo();
  182. }
  183. var nameOverrides = {
  184. ObjectiveC: "Objective-C",
  185. CSharp: "C#",
  186. golang: "Go",
  187. C_Cpp: "C and C++",
  188. Csound_Document: "Csound Document",
  189. Csound_Orchestra: "Csound",
  190. Csound_Score: "Csound Score",
  191. coffee: "CoffeeScript",
  192. HTML_Ruby: "HTML (Ruby)",
  193. HTML_Elixir: "HTML (Elixir)",
  194. FTL: "FreeMarker"
  195. };
  196. function startSearchBox(){
  197. editor.execCommand("find");
  198. }
  199. function getMode(filePath){
  200. var ext = filePath.split(".").pop();
  201. var supportedModes = {
  202. ABAP: ["abap"],
  203. ABC: ["abc"],
  204. ActionScript:["as"],
  205. ADA: ["ada|adb"],
  206. Apache_Conf: ["^htaccess|^htgroups|^htpasswd|^conf|htaccess|htgroups|htpasswd"],
  207. AsciiDoc: ["asciidoc|adoc"],
  208. ASL: ["dsl|asl"],
  209. Assembly_x86:["asm|a"],
  210. AutoHotKey: ["ahk"],
  211. BatchFile: ["bat|cmd"],
  212. Bro: ["bro"],
  213. C_Cpp: ["cpp|c|cc|cxx|h|hh|hpp|ino"],
  214. C9Search: ["c9search_results"],
  215. Cirru: ["cirru|cr"],
  216. Clojure: ["clj|cljs"],
  217. Cobol: ["CBL|COB"],
  218. coffee: ["coffee|cf|cson|^Cakefile"],
  219. ColdFusion: ["cfm"],
  220. CSharp: ["cs"],
  221. Csound_Document: ["csd"],
  222. Csound_Orchestra: ["orc"],
  223. Csound_Score: ["sco"],
  224. CSS: ["css"],
  225. Curly: ["curly"],
  226. D: ["d|di"],
  227. Dart: ["dart"],
  228. Diff: ["diff|patch"],
  229. Dockerfile: ["^Dockerfile"],
  230. Dot: ["dot"],
  231. Drools: ["drl"],
  232. Edifact: ["edi"],
  233. Eiffel: ["e|ge"],
  234. EJS: ["ejs"],
  235. Elixir: ["ex|exs"],
  236. Elm: ["elm"],
  237. Erlang: ["erl|hrl"],
  238. Forth: ["frt|fs|ldr|fth|4th"],
  239. Fortran: ["f|f90"],
  240. FTL: ["ftl"],
  241. Gcode: ["gcode"],
  242. Gherkin: ["feature"],
  243. Gitignore: ["^.gitignore"],
  244. Glsl: ["glsl|frag|vert"],
  245. Gobstones: ["gbs"],
  246. golang: ["go"],
  247. GraphQLSchema: ["gql"],
  248. Groovy: ["groovy"],
  249. HAML: ["haml"],
  250. Handlebars: ["hbs|handlebars|tpl|mustache"],
  251. Haskell: ["hs"],
  252. Haskell_Cabal: ["cabal"],
  253. haXe: ["hx"],
  254. Hjson: ["hjson"],
  255. HTML: ["html|htm|xhtml|vue|we|wpy"],
  256. HTML_Elixir: ["eex|html.eex"],
  257. HTML_Ruby: ["erb|rhtml|html.erb"],
  258. INI: ["ini|conf|cfg|prefs"],
  259. Io: ["io"],
  260. Jack: ["jack"],
  261. Jade: ["jade|pug"],
  262. Java: ["java"],
  263. JavaScript: ["js|jsm|jsx"],
  264. JSON: ["json"],
  265. JSONiq: ["jq"],
  266. JSP: ["jsp"],
  267. JSSM: ["jssm|jssm_state"],
  268. JSX: ["jsx"],
  269. Julia: ["jl"],
  270. Kotlin: ["kt|kts"],
  271. LaTeX: ["tex|latex|ltx|bib"],
  272. LESS: ["less"],
  273. Liquid: ["liquid"],
  274. Lisp: ["lisp"],
  275. LiveScript: ["ls"],
  276. LogiQL: ["logic|lql"],
  277. LSL: ["lsl"],
  278. Lua: ["lua"],
  279. LuaPage: ["lp"],
  280. Lucene: ["lucene"],
  281. Makefile: ["^Makefile|^GNUmakefile|^makefile|^OCamlMakefile|make"],
  282. Markdown: ["md|markdown"],
  283. Mask: ["mask"],
  284. MATLAB: ["matlab"],
  285. Maze: ["mz"],
  286. MEL: ["mel"],
  287. MIXAL: ["mixal"],
  288. MUSHCode: ["mc|mush"],
  289. MySQL: ["mysql"],
  290. Nix: ["nix"],
  291. NSIS: ["nsi|nsh"],
  292. ObjectiveC: ["m|mm"],
  293. OCaml: ["ml|mli"],
  294. Pascal: ["pas|p"],
  295. Perl: ["pl|pm"],
  296. pgSQL: ["pgsql"],
  297. PHP: ["php|phtml|shtml|php3|php4|php5|phps|phpt|aw|ctp|module"],
  298. Pig: ["pig"],
  299. Powershell: ["ps1"],
  300. Praat: ["praat|praatscript|psc|proc"],
  301. Prolog: ["plg|prolog"],
  302. Properties: ["properties"],
  303. Protobuf: ["proto"],
  304. Python: ["py"],
  305. R: ["r"],
  306. Razor: ["cshtml|asp"],
  307. RDoc: ["Rd"],
  308. Red: ["red|reds"],
  309. RHTML: ["Rhtml"],
  310. RST: ["rst"],
  311. Ruby: ["rb|ru|gemspec|rake|^Guardfile|^Rakefile|^Gemfile"],
  312. Rust: ["rs"],
  313. SASS: ["sass"],
  314. SCAD: ["scad"],
  315. Scala: ["scala"],
  316. Scheme: ["scm|sm|rkt|oak|scheme"],
  317. SCSS: ["scss"],
  318. SH: ["sh|bash|^.bashrc"],
  319. SJS: ["sjs"],
  320. Smarty: ["smarty|tpl"],
  321. snippets: ["snippets"],
  322. Soy_Template:["soy"],
  323. Space: ["space"],
  324. SQL: ["sql"],
  325. SQLServer: ["sqlserver"],
  326. Stylus: ["styl|stylus"],
  327. SVG: ["svg"],
  328. Swift: ["swift"],
  329. Tcl: ["tcl"],
  330. Tex: ["tex"],
  331. Text: ["txt"],
  332. Textile: ["textile"],
  333. Toml: ["toml"],
  334. TSX: ["tsx"],
  335. Twig: ["twig|swig"],
  336. Typescript: ["ts|typescript|str"],
  337. Vala: ["vala"],
  338. VBScript: ["vbs|vb"],
  339. Velocity: ["vm"],
  340. Verilog: ["v|vh|sv|svh"],
  341. VHDL: ["vhd|vhdl"],
  342. Wollok: ["wlk|wpgm|wtest"],
  343. XML: ["xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl|xaml"],
  344. XQuery: ["xq"],
  345. YAML: ["yaml|yml"],
  346. Django: ["html"]
  347. };
  348. for (var key in supportedModes) {
  349. if (supportedModes.hasOwnProperty(key)) {
  350. var thisExtension = supportedModes[key][0].split("|");
  351. if (thisExtension.length == 1){
  352. if (ext == thisExtension[0]){
  353. return key;
  354. }
  355. }else{
  356. for(var i =0; i < thisExtension.length;i++){
  357. if (ext == thisExtension[i]){
  358. return key;
  359. }
  360. }
  361. }
  362. }
  363. }
  364. }
  365. $(window).bind('keydown', function(event) {
  366. if (event.ctrlKey || event.metaKey) {
  367. switch (String.fromCharCode(event.which).toLowerCase()) {
  368. case 's':
  369. event.preventDefault();
  370. Save();
  371. break;
  372. }
  373. }
  374. });
  375. </script>
  376. </body>
  377. </html>