index.html 34 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133
  1. <!DOCTYPE html>
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <script type='text/javascript' charset='utf-8'>
  7. // Hides mobile browser's address bar when page is done loading.
  8. window.addEventListener('load', function(e) {
  9. setTimeout(function() { window.scrollTo(0, 1); }, 1);
  10. }, false);
  11. </script>
  12. <meta charset="UTF-8">
  13. <script src="../script/jquery.min.js"></script>
  14. <script src="../script/ao_module.js"></script>
  15. <title>ArOZ Onlineβ</title>
  16. <style>
  17. body{
  18. background-color:#2b2b2b;
  19. }
  20. * {
  21. font-family: arial;
  22. }
  23. .topbar{
  24. background-color: #d6d6d6;
  25. overflow: hidden;
  26. position:fixed;
  27. top:0px;
  28. left:0;
  29. width:100%;height:25px;
  30. padding-left: 5px;
  31. }
  32. button{
  33. padding: 5;
  34. border: none;
  35. background: none;
  36. height:25px;
  37. }
  38. button:hover {
  39. background-color: #edeaea;
  40. cursor: pointer;
  41. }
  42. #codeArea{
  43. width:100%;
  44. position:fixed;
  45. top:48px;
  46. left:0px;
  47. }
  48. #tabs{
  49. background-color: #d6d6d6;
  50. position:fixed;
  51. width:100%;
  52. height:23px;
  53. top:25px;
  54. left:0px;
  55. overflow-x:auto;
  56. }
  57. .fileTab{
  58. background-color: #bcbcbc;
  59. display:inline;
  60. padding-left: 8px;
  61. padding-right: 1px;
  62. margin-left:1px;
  63. height:25px;
  64. border-bottom: 3px solid #878787;
  65. cursor: pointer;
  66. }
  67. .fileTab.focused{
  68. background-color: #edeaea;
  69. display:inline;
  70. border-bottom: 3px solid #5b4cff;
  71. cursor: pointer;
  72. }
  73. .closeBtn{
  74. display:inline;
  75. }
  76. .contextmenu{
  77. position:fixed;
  78. top:25px;
  79. left:0px;
  80. width:auto;
  81. height:auto;
  82. background-color:#d6d6d6;
  83. z-index:100;
  84. border-style: solid;
  85. border-width: 1px;
  86. border-color: #626263;
  87. font-size:small;
  88. max-height: 100%;
  89. overflow-y: auto;
  90. }
  91. .menuitem{
  92. padding-top: 2px;
  93. padding-bottom: 3px;
  94. padding-left: 25px;
  95. padding-right: 10px;
  96. }
  97. .menuitem:hover{
  98. background-color: #edeaea;
  99. cursor: pointer;
  100. }
  101. .middleFloat{
  102. position:fixed;
  103. top:10%;
  104. bottom: 10%;
  105. left: 30%;
  106. right: 30%;
  107. background-color:#efefef;
  108. padding:25px;
  109. overflow-y:auto;
  110. }
  111. .selectable{
  112. cursor: pointer;
  113. padding:1px;
  114. padding-left:10px;
  115. border: 1px solid transparent;
  116. }
  117. .selectable:hover{
  118. background-color:#ffffff;
  119. border: 1px solid #2890ff;
  120. }
  121. .scs{
  122. display:inline-block;
  123. margin: 3px;
  124. padding-left: 10px;
  125. padding-top: 10px;
  126. width: 20px !important;
  127. height:30px;
  128. border: 1px solid #c4c4c4;
  129. cursor:pointer;
  130. font-weight: bold;
  131. }
  132. .scs:hover{
  133. border: 1px solid #6e86a0;
  134. background-color:#a9c7e8;
  135. }
  136. .npalogo{
  137. background-color:#2b2b2b;
  138. color:white;
  139. padding:8px;
  140. }
  141. #tabList{
  142. position:fixed;
  143. right:0px;
  144. top:45px;
  145. min-width:100px;
  146. z-index:99;
  147. background-color:#d6d6d6;
  148. text-align:right;
  149. padding-bottom:5px;
  150. display:none;
  151. }
  152. #showList{
  153. position:absolute;
  154. top:0px;
  155. cursor:pointer;
  156. right:0px;
  157. padding:5px;
  158. margin-top:-2px;
  159. display:none;
  160. }
  161. #showList:hover{
  162. background-color:#ffffff;
  163. }
  164. </style>
  165. </head>
  166. <body>
  167. <div class="topbar">
  168. <button onClick="startTooggleMenu(this);">File</button>
  169. <button onClick="startTooggleMenu(this);">Edit</button>
  170. <button onClick="startTooggleMenu(this);">Search</button>
  171. <button onClick="startTooggleMenu(this);">Theme</button>
  172. <button onClick="startTooggleMenu(this);">Font_Size</button>
  173. <button onClick="startTooggleMenu(this);">About</button>
  174. </div>
  175. <div id="tabs" onClick="hideToggleMenu();">
  176. <div id="showList" onClick="showFullTabMenu();">⬇️ All Tabs</div>
  177. </div>
  178. <div id="tabList">
  179. </div>
  180. <div id="codeArea">
  181. </div>
  182. <div id="topbarMenu" class="contextmenu" style="display:none;">
  183. </div>
  184. <div id="aboutus" class="middleFloat" style="display:none;">
  185. <h3>📝 NotepadA ArOZ Online In-System Text Editor</h3>
  186. <p>Author: Toby Chui 2017-2019</p>
  187. <hr>
  188. <p>This web based text editor for ArOZ Online System are made possible by the ace editor, jQuery and ArOZ Project. Part of the system are licensed under BSD License or MIT license. Please refer to the individual license information under the library folder. <br><br>For the rest of the system and interface, all codes are CopyRight Toby Chui feat. IMUS Laboratory and licnesed under IMUS license (which is something similar to MIT license but with some extra licensing information about hardware). Developed under ArOZ Online System for experimental purpose.<br><br>
  189. Visit <a href="https://github.com/tobychui">https://github.com/tobychui</a> for more information.</p>
  190. <hr>
  191. <p>MIT License<p>
  192. <p style="font-size:70%;">Permission is hereby granted, free of charge, to any person obtaining a copy
  193. of this software and associated documentation files (the "Software"), to deal
  194. in the Software without restriction, including without limitation the rights
  195. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  196. copies of the Software, and to permit persons to whom the Software is
  197. furnished to do so, subject to the following conditions:
  198. The above copyright notice and this permission notice shall be included in all
  199. copies or substantial portions of the Software.
  200. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  201. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  202. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  203. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  204. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  205. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  206. SOFTWARE.</p>
  207. <p>BSD License<p>
  208. <p style="font-size:70%;">All rights reserved.
  209. Redistribution and use in source and binary forms, with or without
  210. modification, are permitted provided that the following conditions are met:
  211. 1. Redistributions of source code must retain the above copyright
  212. notice, this list of conditions and the following disclaimer.
  213. 2. Redistributions in binary form must reproduce the above copyright
  214. notice, this list of conditions and the following disclaimer in the
  215. documentation and/or other materials provided with the distribution.
  216. 3. All advertising materials mentioning features or use of this software
  217. must display the following acknowledgement:
  218. This product includes software developed by the <organization>.
  219. 4. Neither the name of the <organization> nor the
  220. names of its contributors may be used to endorse or promote products
  221. derived from this software without specific prior written permission.
  222. THIS SOFTWARE IS PROVIDED BY <COPYRIGHT HOLDER> ''AS IS'' AND ANY
  223. EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  224. WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  225. DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
  226. DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  227. (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  228. LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  229. ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  230. (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
  231. SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
  232. <hr>
  233. <button style="background-color:white;border: 1px solid #707070;" onClick="$('#aboutus').hide();">Close</button>
  234. <br><br><br><br><br>
  235. </div>
  236. <div id="saveAsSelectionMenu" class="middleFloat" style="display:none;">
  237. <table id="directoryList" style="width:100%;font-size:80%;">
  238. <tr><th id="directoryPath">📂 /</th></tr>
  239. <tr><td>Initializing...</td></tr>
  240. </table>
  241. <br>
  242. <hr>
  243. Save Filename
  244. <input id="saveAsFilename" style="width:100%;"></input>
  245. <hr>
  246. <button style="background-color:white;border: 1px solid #707070;" onClick="saveToDirectory();">Save In Current Directory</button>
  247. <button style="background-color:white;border: 1px solid #707070;" onClick="$('#saveAsSelectionMenu').hide();">Close</button>
  248. <br><br><br><br><br>
  249. </div>
  250. <div id="specialCharInsert" class="middleFloat" style="display:none;">
  251. Insert Special Character
  252. <hr>
  253. <br>
  254. <div id="iscl" style="max-height:70%;left:0;right:0;overflow-y:scroll;overflow-wrap: break-word;">
  255. </div>
  256. <hr>
  257. <button style="background-color:white;border: 1px solid #707070;" onClick="$('#specialCharInsert').hide();">Close</button><p style="font-size:50%;display:inline-block;padding-left:20px;" id="scid">N/A</p>
  258. </div>
  259. <script>
  260. //Global variables
  261. var moduleRootPath = "NotepadA/";
  262. var dragIn = "";
  263. var theme = 'github';
  264. var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  265. var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  266. var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox')
  267. var lastSelectedMenuItem = "";
  268. var username = loadStorage("ArOZusername");
  269. var fontsize = 12;
  270. var VDI = ao_module_virtualDesktop;
  271. var openedFilePath = [];
  272. var previousSavedState = true;
  273. var currentSaveAsPath = "user:/Desktop";
  274. var insertTarget;
  275. var currentTabWidth = 0;
  276. var mainCodingWindow = true;
  277. var functionList = {
  278. File: ["📄 New","📂 Open File","Run in FloatWindow","Open current directory","Reload","💾 Save","💾 Save As","Close All Tabs","🖨 Print","Exit"],
  279. Edit: ["⤺ Undo","⤻ Redo","Open in New Tab","Insert Special Characters"],
  280. Search:["Find / Replace"],
  281. Theme:["ambiance","chaos","chrome","clouds","clouds_midnight","cobalt","crimson_editor","dawn","dracula","dreamweaver","eclipse","github","gob","gruvbox","idle_fingers","iplastic","katzenmilch","kr_theme","kuroir","merbivore","merbivore_soft","mono_industrial","monokai","pastel_on_dark","solarized_dark","solarized_light","sqlserver","terminal","textmate","tomorrow","tomorrow_night","tomorrow_night_blue","tomorrow_night_bright","tomorrow_night_eighties","twilight","vibrant_ink","xcode"],
  282. Font_Size:["8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"],
  283. About:["About NotepadA"]
  284. };
  285. //Init functions
  286. adjustCodeAreaHeight();
  287. bindListener();
  288. initTheme();
  289. initFontSize();
  290. initNotepadA();
  291. reloadAllTabs();
  292. loadAllSpecialCharacter();
  293. //Init notepadA. If there are previos stored page, load them into the environment. Or otherwise, just open a blank page.
  294. function initNotepadA(){
  295. if (!ao_module_virtualDesktop){
  296. $(".topbar").prepend('<div class="npalogo" style="display:inline;"><a href="../index.php">◀️</a> | NotepadA</div>');
  297. $(".topbar").css("padding-left","0px");
  298. }
  299. //ao_module_setWindowSize(1080,600);
  300. if (loadStorage("NotepadA_" + username + "_sessionFiles") != ""){
  301. var pages = JSON.parse(loadStorage("NotepadA_" + username + "_sessionFiles"));
  302. for (var i =0; i < pages.length;i++){
  303. let page = pages[i];
  304. newEditor(page);
  305. }
  306. if (dragIn != ""){
  307. //If there is a file dragin, and it hasn't been opened, open it
  308. if (pages.indexOf(dragIn) == -1){
  309. newEditor(dragIn);
  310. }else{
  311. focusTab($($(".fileTab")[pages.indexOf(dragIn)]).attr("tabid"));
  312. }
  313. //alert(dragIn);
  314. }
  315. }else{
  316. if (dragIn != ""){
  317. //If there is a file dragin, open it as well.
  318. newEditor(dragIn);
  319. }else{
  320. newTab();
  321. }
  322. }
  323. setTimeout(function(){
  324. setInterval(function(){
  325. var tabid = getFocusedTab();
  326. if (tabid.length == 0){
  327. return;
  328. }
  329. var tab = findTabWithAttr("framematch",tabid[0]);
  330. var saved = checkTabSaved(tabid[0]);
  331. if (saved != previousSavedState){
  332. previousSavedState = saved;
  333. if (saved){
  334. ao_module_setWindowTitle("NotepadA   📝 " + tab.attr("filename").replace("../../","/aor/"));
  335. document.title = "NotepadA   📝 " + tab.attr("filename").replace("../../","/aor/");
  336. }else{
  337. ao_module_setWindowTitle("NotepadA   *💾 📝 " + tab.attr("filename").replace("../../","/aor/"));
  338. document.title = "NotepadA   *💾 📝 " + tab.attr("filename").replace("../../","/aor/");
  339. }
  340. }
  341. },1000);
  342. },500);
  343. toggleFileTabsList();
  344. }
  345. //Add a new editor window to the editor (?) -->ALL FILE PATH PASSED IN MUST BE FROM AOR OR /media/storage*
  346. function newEditor(filepath){
  347. if (openedFilePath.includes(filepath)){
  348. //This page is already opened. Ignore this request and focus on the existing tab.
  349. $(".fileTab").each(function(){
  350. if ($(this).attr("filename").includes(filepath)){
  351. var tabid = $(this).attr("tabid");
  352. focusTab(tabid);
  353. }
  354. });
  355. return;
  356. }
  357. let tabid = Math.round((new Date()).getTime());
  358. let payload = {
  359. "theme": theme,
  360. "filename": filepath,
  361. "fontsize": fontsize,
  362. "timestamp": Date.now() //Add this to make sure browser dont cache resp
  363. }
  364. let encodedPayload = encodeURIComponent(JSON.stringify(payload))
  365. var tab = `<div class="fileTab" tabid="${tabid}" framematch="ca${tabid}" filename="${filepath}">
  366. loading... <div class="closeBtn">⨯</div>
  367. </div>`;
  368. var frame = `<div style="position:fixed;width:100%;"><iframe id="ca${tabid}" class="editor" src="ace/editor.html#${encodedPayload}" width="100%" frameBorder="0"></iframe></div>`;
  369. $("#tabs").append(tab);
  370. $("#codeArea").append(frame);
  371. updateFrameAttr('ca' + tabid);
  372. focusTab(tabid + "");
  373. if (openedFilePath.indexOf(filepath) == -1){
  374. openedFilePath.push(filepath);
  375. }
  376. setStorage("NotepadA_" + username + "_sessionFiles",JSON.stringify(openedFilePath));
  377. }
  378. function newTab(){
  379. let tabid = Math.round((new Date()).getTime());
  380. let filepath = 'NotepadA/tmp/newfile_' + tabid;
  381. var tab = '<div class="fileTab" tabid="'+tabid+'" framematch="ca'+tabid+'" filename="../../'+filepath+'">\
  382. loading... <div class="closeBtn">⨯</div>\
  383. </div>';
  384. var frame = '<div style=""><iframe id="ca'+tabid+'" class="editor" src="ace/editor.php?theme='+theme+'&filename=../../'+filepath+'&fontsize=' + fontsize + '" width="100%" frameBorder="0"></iframe></div>';
  385. $("#tabs").append(tab);
  386. $("#codeArea").append(frame);
  387. updateFrameAttr('ca' + tabid);
  388. setTimeout(function(){focusTab(tabid + "");},100);
  389. if (openedFilePath.indexOf(filepath) == -1){
  390. openedFilePath.push(filepath);
  391. }
  392. setStorage("NotepadA_" + username + "_sessionFiles",JSON.stringify(openedFilePath));
  393. }
  394. function saveToDirectory(){
  395. var targetPath = currentSaveAsPath;
  396. if (targetPath.includes("/media/storage") == false){
  397. //If it is not starting from the media root, stat with aor.
  398. //Remove the "/" at the front of the path
  399. targetPath = "../" + targetPath.substr(1);
  400. }
  401. var newfilename = $("#saveAsFilename").val();
  402. var framematch = getFocusedTab()[0];
  403. var editorContent = $("#" + framematch)[0].contentWindow.getEditorContenet();
  404. $.post( "writeCode.php", { filename: targetPath + newfilename, content: editorContent }).done(function( data ) {
  405. if (data.includes("ERROR") == false){
  406. //Finish writting to the new file. Open the new file in new tab
  407. if (targetPath.includes("/media/storage")==false && targetPath.includes("../")){
  408. targetPath = targetPath.replace("../","");
  409. }
  410. newEditor(targetPath + newfilename);
  411. $("#saveAsSelectionMenu").hide();
  412. }else{
  413. console.log(data);
  414. }
  415. });
  416. }
  417. function changeSaveAsPath(object){
  418. var newdir = $(object).attr("foldername");
  419. SetSaveAsPath(newdir);
  420. }
  421. function getSelectedText(){
  422. var id = getFocusedTab()[0];
  423. var text = $("#" + id)[0].contentWindow.getSelectedText();
  424. return text;
  425. }
  426. function insertText(text){
  427. var id = getFocusedTab()[0];
  428. var text = $("#" + id)[0].contentWindow.insertGivenText(text);
  429. }
  430. function saveToAOCC(){
  431. var content = getSelectedText();
  432. alert(content);
  433. }
  434. function SetSaveAsPath(dirpath){
  435. $("#directoryList").html("<tr><th>Loading...</th></tr>");
  436. if (dirpath == ""){
  437. dirpath = "user:/"
  438. }
  439. currentSaveAsPath = dirpath;
  440. //Make sure there is always an ending / at the end of current savepath
  441. if (currentSaveAsPath.substring(currentSaveAsPath.length - 1, currentSaveAsPath.length) != "/"){
  442. currentSaveAsPath = currentSaveAsPath + "/";
  443. }
  444. //Listdir
  445. ao_module_agirun(moduleRootPath + "backend/getDir.js", {listpath: currentSaveAsPath}, function(result){
  446. if (result.error !== undefined){
  447. onsole.log(result);
  448. }else{
  449. $("#directoryList").html("<tr><th>📂 " + currentSaveAsPath + "</th></tr>");
  450. if (currentSaveAsPath.split("/").length >= 3){
  451. //Not root
  452. let parentPath = currentSaveAsPath.substr(0, currentSaveAsPath.length -1).split("/");
  453. parentPath.pop();
  454. parentPath = parentPath.join("/");
  455. $("#directoryList").append(`<tr><td class="selectable" foldername="${parentPath}" onClick="changeSaveAsPath(this);">⏎ ../</td></tr>`);
  456. }
  457. for (var i = 0; i < result.length; i++){
  458. $("#directoryList").append('<tr><td class="selectable" foldername="'+result[i][0]+'" onClick="changeSaveAsPath(this);"> 📂 '+result[i][1]+'</td></tr>');
  459. }
  460. }
  461. })
  462. /*
  463. if (dirpath == "../"){
  464. currentSaveAsPath = currentSaveAsPath.split("/")
  465. while (currentSaveAsPath.pop() == ""){
  466. ;
  467. }
  468. currentSaveAsPath = currentSaveAsPath.join("/") + "/";
  469. $.ajax({url: "getDir.php?directory=" + currentSaveAsPath, success: function(result){
  470. if (result.includes("ERROR") == false){
  471. //Update the current saveAs menu to latest directory
  472. $("#directoryList").html("<tr><th>📂 " + currentSaveAsPath + "</th></tr>");
  473. if (currentSaveAsPath != "/" && currentSaveAsPath != "/media/"){
  474. $("#directoryList").append('<tr><td class="selectable" foldername="../" onClick="changeSaveAsPath(this);">⏎ ../</td></tr>');
  475. }
  476. for (var i = 0; i < result.length; i++){
  477. var decodedFilename = ao_module_codec.decodeHexFoldername(result[i][1]);
  478. $("#directoryList").append('<tr><td class="selectable" foldername="'+result[i][1]+'" onClick="changeSaveAsPath(this);"> 📂 '+decodedFilename+'</td></tr>');
  479. }
  480. }else{
  481. console.log(result);
  482. }
  483. }});
  484. }else{
  485. currentSaveAsPath += dirpath + "/";
  486. $.ajax({url: "getDir.php?directory=" + currentSaveAsPath, success: function(result){
  487. if (result.includes("ERROR") == false){
  488. //Update the current saveAs menu to latest directory
  489. $("#directoryList").html("<tr><th>📂 " + currentSaveAsPath + "</th></tr>");
  490. if (currentSaveAsPath != "/" && currentSaveAsPath != "/media/"){
  491. $("#directoryList").append('<tr><td class="selectable" foldername="../" onClick="changeSaveAsPath(this);">⏎ ../</td></tr>');
  492. }
  493. for (var i = 0; i < result.length; i++){
  494. var decodedFilename = ao_module_codec.decodeHexFoldername(result[i][1]);
  495. $("#directoryList").append('<tr><td class="selectable" foldername="'+result[i][1]+'" onClick="changeSaveAsPath(this);"> 📂 '+decodedFilename+'</td></tr>');
  496. }
  497. }else{
  498. console.log(result);
  499. }
  500. }});
  501. }
  502. */
  503. }
  504. function adjustCodeAreaHeight(){
  505. if (VDI){
  506. if (isFirefox){
  507. $("#tabs").css("top","22px").css("height","24px");
  508. $("#codeArea").css("top","45px")
  509. }
  510. if (isChrome){
  511. $("#tabs").css("top","22px").css("height","22px");
  512. $("#codeArea").css("top","42px");
  513. }
  514. if (is_safari){
  515. $("#tabs").css("top","22px").css("height","21px");
  516. $("#codeArea").css("top","41px");
  517. }
  518. var h = window.innerHeight;
  519. if (isChrome){
  520. h = h - 21;
  521. }else if (is_safari){
  522. h = h - 20;
  523. }else{
  524. h = h - 24;
  525. }
  526. $("#codeArea").css("height",h);
  527. $(".editor").each(function(i) {
  528. $(this).attr("height",h - 6);
  529. });
  530. }else{
  531. $(".editor").each(function(i) {
  532. $(this).css("height",$(document).height() - 38);
  533. });
  534. }
  535. }
  536. function checkTabSaved(framematch){
  537. if (typeof $("#" + framematch)[0].contentWindow.checkIsSaved !== "undefined") {
  538. var result = $("#" + framematch)[0].contentWindow.checkIsSaved();
  539. return result;
  540. }
  541. }
  542. $( window ).resize(function() {
  543. adjustCodeAreaHeight();
  544. toggleFileTabsList();
  545. });
  546. function showFullTabMenu(){
  547. $("#tabList").slideToggle('fast');
  548. }
  549. var inList = false;
  550. function toggleFileTabsList(){
  551. //Check if the width of the container is enough for holding all the filetabs. If no, move all of them into the filtab list.
  552. var totalWidthOfFileTabs = 0;
  553. var maxWidth = 0;
  554. $("#tabList").show();
  555. $(".fileTab").each(function(){
  556. totalWidthOfFileTabs = totalWidthOfFileTabs + $(this).width();
  557. if ($(this).width() > maxWidth){
  558. maxWidth = $(this).width();
  559. }
  560. });
  561. $("#tabList").hide();
  562. totalWidthOfFileTabs = parseInt(totalWidthOfFileTabs);
  563. if (window.innerWidth < totalWidthOfFileTabs && !inList){
  564. //window innerWidth space is less than the space needed to put all tabs. Move all of them into the list instead.
  565. $(".fileTab").each(function(){
  566. $("#tabList").append($(this));
  567. $("#tabList").append("<br>");
  568. });
  569. inList = true;
  570. $("#showList").show();
  571. $("#tabList").show();
  572. }else if (window.innerWidth > totalWidthOfFileTabs && inList){
  573. $(".fileTab").each(function(){
  574. $("#tabs").append($(this));
  575. });
  576. $("#tabList").html("");
  577. inList = false;
  578. $("#showList").hide();
  579. $("#tabList").hide();
  580. }
  581. currentTabWidth = totalWidthOfFileTabs;
  582. }
  583. function bindListener(){
  584. $(document).on('click', '.closeBtn', function () {
  585. removeTab($(this).parent().attr('tabid'));
  586. });
  587. $(document).on('click','.fileTab',function(){
  588. if ($(this).hasClass("closeBtn") == false){
  589. focusTab($(this).attr('tabid'));
  590. }
  591. });
  592. $(document).on('click','#codeArea',function(){
  593. $("#topbarMenu").hide();
  594. });
  595. $(document).on('click','.menuitem',function(){
  596. if (lastSelectedMenuItem == "Theme"){
  597. setTheme($(this).text());
  598. $("#topbarMenu").hide();
  599. }else if (lastSelectedMenuItem == "Font_Size"){
  600. setFontSize($(this).text());
  601. $("#topbarMenu").hide();
  602. }else if (lastSelectedMenuItem == "File"){
  603. handleFileMenu($(this).text());
  604. $("#topbarMenu").hide();
  605. }else if (lastSelectedMenuItem == "About"){
  606. handleAboutMenu($(this).text());
  607. $("#topbarMenu").hide();
  608. }else if (lastSelectedMenuItem == "Search"){
  609. if ($(this).text() != ""){
  610. launchFocusedTabSearchBox();
  611. }
  612. $("#topbarMenu").hide();
  613. }else if (lastSelectedMenuItem == "Edit"){
  614. handleEditMenu($(this).text());
  615. $("#topbarMenu").hide();
  616. }else{
  617. alert(lastSelectedMenuItem);
  618. }
  619. });
  620. }
  621. function handleEditMenu(itemText){
  622. var indexvalue = functionList.Edit.indexOf(itemText);
  623. switch (indexvalue){
  624. case 0:
  625. var id = getFocusedTab()[0];
  626. $("#" + id)[0].contentWindow.callUndo();
  627. break;
  628. case 1:
  629. var id = getFocusedTab()[0];
  630. $("#" + id)[0].contentWindow.callRedo();
  631. break;
  632. case 2:
  633. var id = getFocusedTab()[0];
  634. $("#" + id)[0].contentWindow.openInNewTab();
  635. //Call to openInNewTab function for opening new tab;
  636. break;
  637. case 3:
  638. //Insert a special character into the passage
  639. $("#specialCharInsert").show();
  640. var id = getFocusedTab()[0];
  641. insertTarget = $("#" + id)[0].contentWindow;
  642. break;
  643. }
  644. }
  645. function updateFrameAttr(framematch){
  646. //This function will update the tab title, iframe attr at the same time.
  647. var frame = $("#" + framematch);
  648. var tab = findTabWithAttr("framematch",framematch);
  649. var filepath = tab.attr("filename");
  650. var filedata = getFilenameAndBasedir(filepath);
  651. var basedir = filedata[0];
  652. var filename = filedata[1];
  653. //Update the tag text to the filename
  654. if (filename.substring(0,5) == "inith"){
  655. filename = ao_module_codec.decodeUmFilename(filename);
  656. }
  657. $(tab).html(filename + ' <div class="closeBtn">⨯</div>');
  658. //Update the iframe attr
  659. $(frame).attr("basedir",basedir);
  660. $(frame).attr("filename",filename);
  661. //
  662. adjustCodeAreaHeight();
  663. }
  664. function getFilenameAndBasedir(filepath){
  665. var f = filepath.split("/").pop();
  666. var b = filepath.replace(f,"");
  667. return [b,f];
  668. }
  669. function reloadAllTabs(){
  670. $(".fileTab").each(function(){
  671. var tid = $(this).attr("tabid");
  672. reloadTab(tid + "");
  673. updateFrameAttr($(this).attr("framematch"));
  674. });
  675. }
  676. function reloadTab(tabID){
  677. var object = findTabWithAttr("tabid",tabID);
  678. var filename = $(object).attr("filename");
  679. var codeAreaID = $(object).attr("framematch");
  680. $("#" + codeAreaID).attr("src","ace/editor.php?theme=" + theme + "&fontsize="+fontsize+"&filename=" + filename);
  681. }
  682. function launchFocusedTabSearchBox(){
  683. var framematch = getFocusedTab()[0];
  684. $("#" +framematch)[0].contentWindow.startSearchBox();
  685. //alert(framematch);
  686. }
  687. function handleOpenFileFunctionCall(fileData){
  688. if (fileData.length == 0){
  689. return;
  690. }
  691. fileData = fileData[0];
  692. var filepath = fileData.filepath;
  693. var filename = fileData.filename;
  694. var match = false;
  695. var tabid = "";
  696. $(".fileTab").each(function(){
  697. if ($(this).attr("filename") == filepath){
  698. match = true;
  699. tabid = $(this).attr("tabid");
  700. }
  701. });
  702. if (!match){
  703. //This file is not opened yet. Open it
  704. newEditor(filepath);
  705. }else{
  706. //This file is opened. Focus to that tab
  707. focusTab(tabid);
  708. }
  709. }
  710. function handleFileMenu(itemText){
  711. var indexvalue = functionList.File.indexOf(itemText);
  712. switch (indexvalue){
  713. case 0:
  714. //New file
  715. newTab();
  716. break;
  717. case 1:
  718. //Open a file by fileSelector
  719. ao_module_openFileSelector(handleOpenFileFunctionCall, "user:/Desktop", "file", false);
  720. break;
  721. case 2:
  722. //Run this script in floatWindow
  723. if (!VDI){
  724. alert("[ERROR] Please launch the NotepadA in Virtual Desktop Mode to launch FloatWindow.");
  725. break;
  726. }
  727. var id = getFocusedTab()[0];
  728. //var uid = Math.round((new Date()).getTime() / 1000);
  729. var url = "./media?file=" + $("#" + id)[0].contentWindow.getFilepath().replace("../","");
  730. var title = "NotepadA Runtime";
  731. var icon = "code";
  732. ao_module_newfw({
  733. url: url,
  734. width: 1080,
  735. height: 580,
  736. appicon: "NotepadA/img/small_icon.png",
  737. });
  738. /*
  739. if (url.substr(0,14) == "/media/storage"){
  740. title += " (External Storage)";
  741. url = "SystemAOB/functions/extDiskAccess.php?file=" + url;
  742. newfw(url,title,icon,uid,1080,580);
  743. }else{
  744. newfw(url,title,icon,uid,1080,580);
  745. }
  746. */
  747. break;
  748. case 3:
  749. //Open the current folder in explorer
  750. var base = getFocusedTab()[1];
  751. if (base == undefined){
  752. break;
  753. }
  754. /*
  755. if (base.includes("../../")){
  756. base = base.replace("../../","");
  757. }
  758. var url = "SystemAOB/functions/file_system/index.php?controlLv=2&finishing=embedded&subdir=" + base;
  759. if (base.substr(0,14) == "/media/storage"){
  760. //This file is located in external storage location. Open file editor in ext mode
  761. url = "SystemAOB/functions/file_system/index.php?controlLv=2&finishing=embedded&dir=" + base;
  762. }
  763. var uid = Math.round((new Date()).getTime() / 1000);
  764. var title = "NotepadA" + " - Folder View";
  765. var icon = "folder open";
  766. if (!VDI){
  767. window.open("../" + url);
  768. break;
  769. }
  770. newfw(url,title,icon,uid,1080,580);
  771. */
  772. ao_module_openPath(base);
  773. break;
  774. case 4:
  775. //Reload is pressed
  776. var currentFocusedtid = getFocusedTab()[0];
  777. if (currentFocusedtid == undefined){
  778. break;
  779. }
  780. var tabobject = findTabWithAttr("framematch",currentFocusedtid);
  781. reloadTab(tabobject.attr("tabid") + "");
  782. break;
  783. case 5:
  784. //Save is pressed
  785. var currentFocusedtid = getFocusedTab()[0];
  786. if (currentFocusedtid == undefined){
  787. break;
  788. }
  789. $("#" + currentFocusedtid)[0].contentWindow.Save();
  790. break;
  791. case 6:
  792. //save-as is pressed. Pop up the saveas menu to continue
  793. $("#saveAsSelectionMenu").show();
  794. currentSaveAsPath = "";
  795. SetSaveAsPath("");
  796. var focusedFramematch = getFocusedTab()[0];
  797. var filename = $("#" + focusedFramematch).attr("filename");
  798. var ext = filename.split(".").pop();
  799. if (ext == filename){
  800. ext = "txt";
  801. }
  802. setTimeout( function() {$("#saveAsSelectionMenu").scrollTop(0)}, 200 );
  803. $("#saveAsFilename").val("untitled." + ext);
  804. break;
  805. case 7:
  806. $(".fileTab").each(function(){
  807. removeTab($(this).attr("tabid"));
  808. });
  809. break;
  810. case 8:
  811. var id = getFocusedTab()[0];
  812. $("#" + id)[0].contentWindow.Print();
  813. break;
  814. case 9:
  815. if (VDI){
  816. window.location.href = "../SystemAOB/functions/killProcess.php"
  817. }else{
  818. window.location.href = "../index.php"
  819. }
  820. break;
  821. }
  822. }
  823. function handleAboutMenu(itemText){
  824. var indexvalue = functionList.About.indexOf(itemText);
  825. if (indexvalue == 0){
  826. $("#aboutus").show();
  827. }
  828. }
  829. function newfw(src,windowname,icon,uid,sizex,sizey,posx = undefined,posy = undefined,fixsize = undefined,tran = undefined, parentUID=undefined, callbackFunct=undefined){
  830. //Example
  831. //newEmbededWindow('Memo/index.php','Memo','sticky note outline','memoEmbedded',475,700);
  832. if (!VDI){
  833. window.open("../" + src);
  834. return;
  835. }
  836. parent.newEmbededWindow(src,windowname,icon,uid,sizex,sizey,posx,posy,fixsize,tran,parentUID,callbackFunct);
  837. }
  838. function getFocusedTab(){
  839. result = [];
  840. $(".fileTab").each(function(){
  841. if ($(this).hasClass("focused")){
  842. //This tab is focused. Check its filename and pathinfo
  843. var id = $(this).attr("framematch");
  844. var filename = $("#" + id).attr("filename");
  845. var basedir = $("#" + id).attr("basedir");
  846. result = [id,basedir,filename];
  847. }
  848. });
  849. return result;
  850. }
  851. function setTheme(themeName){
  852. setStorage("NotepadA_theme",themeName);
  853. theme = themeName;
  854. if (checkIfAllTabSaved() == false){
  855. //Ask the user if confirm close
  856. var confirmClose = confirm("Reloading NotepadA is required to apply the changes. Confirm?");
  857. if (confirmClose == false){
  858. return false;
  859. }
  860. }
  861. console.log("Updating theme to: " + themeName);
  862. //Reload all tabs with the corrispoding themes after changing theme settings
  863. reloadAllTabs();
  864. }
  865. function setFontSize(newsize){
  866. setStorage("NotepadA_fontsize",newsize);
  867. fontsize = newsize;
  868. if (checkIfAllTabSaved() == false){
  869. //Ask the user if confirm close
  870. var confirmClose = confirm("Reloading NotepadA is required to apply the changes. Confirm?");
  871. if (confirmClose == false){
  872. return false;
  873. }
  874. }
  875. reloadAllTabs();
  876. }
  877. function checkIfAllTabSaved(){
  878. var allSaved = true;
  879. $(".editor").each(function(){
  880. if ($(this)[0].contentWindow.checkIsSaved() == false){
  881. allSaved = false;
  882. }
  883. });
  884. return allSaved;
  885. }
  886. function initTheme(){
  887. if (loadStorage("NotepadA_theme") != ""){
  888. theme = loadStorage("NotepadA_theme");
  889. }
  890. }
  891. function initFontSize(){
  892. if (loadStorage("NotepadA_fontsize") != ""){
  893. fontsize = loadStorage("NotepadA_fontsize");
  894. }
  895. }
  896. function setStorage(configName,configValue){
  897. //localStorage.setItem(name, value);
  898. /*
  899. $.ajax({
  900. type: 'POST',
  901. url: "../SystemAOB/functions/user/userGlobalConfig.php",
  902. data: {module: "NotepadA",name:configName,value:configValue},
  903. success: function(data){},
  904. async:true
  905. });
  906. */
  907. ao_module_storage.setStorage("NotepadA", configName, configValue);
  908. return true;
  909. }
  910. function loadStorage(configName){
  911. var result = "";
  912. ao_module_storage.loadStorage("NotepadA", configName);
  913. return result;
  914. }
  915. function removeTab(tabid){
  916. var focusingTabFramematchBeforeRemove = getFocusedTab()[0];
  917. let origianlTabID = findTabWithAttr("framematch",focusingTabFramematchBeforeRemove).attr("tabid");
  918. var targetTab = findTabWithAttr("tabid",tabid);
  919. var filepath = targetTab.attr("filename").replace("../../","");
  920. var codeAreaTag = $(targetTab).attr("framematch");
  921. //Check if the tab is saved
  922. var saved = checkTabSaved(targetTab.attr("framematch"));
  923. if (saved == false){
  924. //Ask the user if confirm close
  925. var confirmClose = confirm("This file is not saved. Confirm closing?");
  926. if (confirmClose == false){
  927. return false;
  928. }
  929. }
  930. //Remove this record from the filepath so we will not open this again by the enxt time we startup NotepadA
  931. openedFilePath.remove(filepath);
  932. if ($(targetTab).hasClass("focused")){
  933. //This tab is currently focused, move focus to another tab after closing
  934. $(targetTab).remove();
  935. //I have no idea why this only works with a delay... but just don't change this.
  936. setTimeout(function(){
  937. var focusTarget = $(".fileTab").first().attr("tabid");
  938. focusTab(focusTarget); }, 100);
  939. }else{
  940. $(targetTab).remove();
  941. setTimeout(function(){ focusTab(origianlTabID);}, 100);
  942. }
  943. $("#" + codeAreaTag).remove();
  944. if ($(".fileTab").length == 0){
  945. //There is no more tab left, create a new tab instead
  946. setTimeout(function(){ newTab("untitled"); }, 100);
  947. }
  948. setStorage("NotepadA_" + username + "_sessionFiles",JSON.stringify(openedFilePath));
  949. toggleFileTabsList();
  950. }
  951. function hideToggleMenu(){
  952. $("#topbarMenu").hide();
  953. }
  954. $(".scs").hover(function(){
  955. var keyid = $(this).attr("keyid");
  956. $("#scid").html("HTML Keycode: #&" + keyid);
  957. });
  958. $(".scs").on("mousedown",function(){
  959. insertTarget.insertChar($(this).text());
  960. $("#specialCharInsert").hide();
  961. });
  962. function startTooggleMenu(object){
  963. var menu = $(object).text();
  964. var pos = $(object).offset().left - 5;
  965. toogleMenu(pos,menu);
  966. }
  967. function toogleMenu(left,contentID){
  968. $("#topbarMenu").css("left",left + "px");
  969. if (contentID != lastSelectedMenuItem && $("#topbarMenu").is(":visible")){
  970. $("#topbarMenu").hide();
  971. }
  972. loadOptionToMenu(contentID);
  973. $("#topbarMenu").toggle();
  974. lastSelectedMenuItem = contentID;
  975. }
  976. function loadOptionToMenu(menuItem){
  977. var items = functionList[menuItem];
  978. $("#topbarMenu").html("");
  979. for (var i=0; i < items.length;i++){
  980. $("#topbarMenu").append("<div class='menuitem'>" + items[i] + "</div>");
  981. }
  982. }
  983. function focusTab(tabid){
  984. //Defocus every tabs and hide all coding windows
  985. $(".fileTab").each(function(i) {
  986. $(this).removeClass("focused");
  987. });
  988. $(".editor").each(function(i) {
  989. $(this).hide();
  990. });
  991. //Only show the tab and code window selected
  992. var selectedTab = findTabWithAttr("tabid",tabid);
  993. $(selectedTab).addClass("focused");
  994. var corrispondingCodingTab = $(selectedTab).attr("framematch");
  995. var targetFrame = $("#" + corrispondingCodingTab);
  996. targetFrame.show();
  997. if (selectedTab.attr("filename") != undefined){
  998. ao_module_setWindowTitle("NotepadA   📝 " + selectedTab.attr("filename").replace("../../","/aor/"));
  999. document.title = "NotepadA   📝 " + selectedTab.attr("filename").replace("../../","/aor/");
  1000. }else{
  1001. ao_module_setWindowTitle("NotepadA   📝 newfile");
  1002. document.title = "NotepadA   📝 newfile";
  1003. }
  1004. }
  1005. function findTabWithAttr(attr,value){
  1006. return $('div['+attr+'="'+value+'"]').each(function() {
  1007. return this;
  1008. });
  1009. }
  1010. function loadAllSpecialCharacter(){
  1011. $("#iscl").html("");
  1012. for (var i =161; i < 1023; i++){
  1013. if (i != 173){
  1014. $("#iscl").append("<div class='scs' keyid='" + i +"'>" + String.fromCharCode(i) + "</div>");
  1015. }
  1016. }
  1017. }
  1018. Array.prototype.remove = function() {
  1019. var what, a = arguments, L = a.length, ax;
  1020. while (L && this.length) {
  1021. what = a[--L];
  1022. while ((ax = this.indexOf(what)) !== -1) {
  1023. this.splice(ax, 1);
  1024. }
  1025. }
  1026. return this;
  1027. };
  1028. </script>
  1029. </body>
  1030. </html>