MainUI.php 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../script/jquery.min.js"></script>
  6. <link rel="stylesheet" href="../script/tocas/tocas.css">
  7. <script type='text/javascript' src="../script/tocas/tocas.js"></script>
  8. <script type='text/javascript' src="../script/ao_module.js"></script>
  9. <title>7z File Manager</title>
  10. <style>
  11. body{
  12. background-color:white;
  13. -webkit-user-select: none; /* Safari */
  14. -moz-user-select: none; /* Firefox */
  15. -ms-user-select: none; /* IE10+/Edge */
  16. user-select: none; /* Standard */
  17. }
  18. tr:hover {
  19. background-color: #fafafa;
  20. }
  21. @media (max-width: 767px){
  22. .ts.bottom.right.snackbar.active{
  23. width: 100% !important;
  24. bottom: 0px !important;
  25. right: 0px !important;
  26. }
  27. .ts.snackbar:not(.inline) .content {
  28. margin-bottom: 7px;
  29. }
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="ts labeled icon menu" style="box-shadow: 0px 0px 0px 0 #000000 !important;">
  35. <a class="item" onclick="msgbox('Error: Operation is not supported','red','white')">
  36. <i class="plus icon"></i> Add
  37. </a>
  38. <a class="item" onclick="functionbar_extract();">
  39. <i class="minus icon"></i> Extract
  40. </a>
  41. <a class="item" onclick="msgbox('Warning: Not implemented','yellow','Black')">
  42. <i class="chevron down icon"></i> Test
  43. </a>
  44. <a class="item" onclick="functionbar_extract();">
  45. <i class="copy icon"></i> Copy
  46. </a>
  47. <a class="item" onclick="functionbar_extract();">
  48. <i class="move icon"></i> Move
  49. </a>
  50. <a class="item" onclick="msgbox('Error: Operation is not supported','red','white')">
  51. <i class="remove icon"></i> Delete
  52. </a>
  53. <a class="item" onclick="functionbar_info();">
  54. <i class="notice icon"></i> Info
  55. </a>
  56. </div>
  57. <div class="ts breadcrumb" style="left: 20px;" id="breadcrumb">
  58. <button class="ts icon mini basic button" path="" attr="Dir" id="returnBtn" onclick="load(this)">
  59. <i class="level up icon"></i>
  60. </button>
  61. <p href="#!" class="section"><?php echo $_GET["file"] ?></p>
  62. </div>
  63. <table class="ts borderless table">
  64. <thead>
  65. <tr id="thead">
  66. </tr>
  67. </thead>
  68. <tbody id="tbody">
  69. </tbody>
  70. </table>
  71. <!-- use for displaying dialog , for VDI user , use VDI module instead -->
  72. <div class="ts modals dimmer">
  73. <dialog id="modal" class="ts basic modal" style="background-color: white;color: black!important" open>
  74. <div class="content" id="modaldata">
  75. </div>
  76. </dialog>
  77. </div>
  78. <div class="ts bottom right snackbar">
  79. <div class="content"></div>
  80. </div>
  81. <div class="ts contextmenu">
  82. <div class="item" onclick="contextmenu_extract()">
  83. Open
  84. <span class="description">Enter</span>
  85. </div>
  86. <div class="item" onclick="functionbar_extract()">
  87. Extract
  88. <span class="description">F5</span>
  89. </div>
  90. <div class="item" onclick="functionbar_info()">
  91. Properties
  92. <span class="description">Alt-Enter</span>
  93. </div>
  94. </div>
  95. </body>
  96. <script>
  97. //Global variable
  98. var random = Math.floor((Math.random() * 10000) + 1000);
  99. var file = "<?php echo $_GET["file"] ?>";
  100. load($(returnBtn));
  101. $.get("deltmp.php", function(data) {
  102. });
  103. ts('*').contextmenu({
  104. menu: '.ts.contextmenu'
  105. });
  106. $('body').on('click', function(e) {
  107. if (e.target !== this)
  108. return;
  109. $("tr").removeAttr("style");
  110. });
  111. document.onkeydown = function(e) {
  112. if($("[style='background-color: #e9e9e9;']").length > 0){
  113. var htmlelement = $("[style='background-color: #e9e9e9;']");
  114. }else{
  115. var htmlelement = $("#tbody tr:first");
  116. }
  117. switch (e.keyCode) {
  118. case 9:
  119. if(htmlelement.prev().length > 0){
  120. var next = htmlelement.prev();
  121. $("tr").removeAttr("style");
  122. $(next).attr("style","background-color: #e9e9e9;");
  123. }
  124. case 13:
  125. var htmlelement = $("[style='background-color: #e9e9e9;']");
  126. load(htmlelement);
  127. break;
  128. case 38:
  129. if(htmlelement.prev().length > 0){
  130. var next = htmlelement.prev();
  131. $("tr").removeAttr("style");
  132. $(next).attr("style","background-color: #e9e9e9;");
  133. }else{
  134. $("tr").removeAttr("style");
  135. $(htmlelement).attr("style","background-color: #e9e9e9;");
  136. }
  137. break;
  138. case 40:
  139. if(htmlelement.next().length > 0){
  140. var next = htmlelement.next();
  141. $("tr").removeAttr("style");
  142. $(next).attr("style","background-color: #e9e9e9;");
  143. }else{
  144. $("tr").removeAttr("style");
  145. $(htmlelement).attr("style","background-color: #e9e9e9;");
  146. }
  147. break;
  148. }
  149. };
  150. //for load data into table
  151. load($(returnBtn));
  152. function onsingleclick(htmlelement){
  153. $("tr").removeAttr("style");
  154. $(htmlelement).attr("style","background-color: #e9e9e9;");
  155. }
  156. function load(htmlelement){
  157. if($(htmlelement).attr("attr") == "Dir"){
  158. $("#breadcrumb").html('<button class="ts icon mini basic button" disabled><i class="level up icon"></i></button> <p class="section"><i class="loading circle notched icon"></i>Fetching..</p>');
  159. //for load data into table
  160. $.get("opr.php?method=l&rand=" + random + "&file=" + file + "&dir=" + $(htmlelement).attr("path"), function( raw ) {
  161. //clear table for pepare load data into table
  162. $("#thead").html("");
  163. $("#tbody").html("");
  164. var data = JSON.parse(raw); //parse it
  165. var header = data["Header"];
  166. //create thead
  167. $(data["Header"]).each(function( key, value ) {
  168. $("#thead").append("<th>" + value + "</th>");//create header (thead) first
  169. });
  170. //create tbody
  171. $(data["Information"]).each(function( a, value ) {
  172. //to check if attr not exists. if not exists, assume it is an file.
  173. if(typeof value["Attributes"] === 'undefined'){
  174. var attr = "File";
  175. }else{
  176. if(value["Attributes"].includes("D")){
  177. var attr = "Dir";
  178. }else{
  179. var attr = "File";
  180. }
  181. }
  182. //create HTML structure
  183. var tmp = "";
  184. tmp = tmp + '<tr path="' + value["Path"] + '" attr="' + attr + '" ondblclick="load(this)" onclick="onsingleclick(this)" oncontextmenu="onsingleclick(this)">'
  185. $.each(data["Header"], function( a, key ) {
  186. if(typeof value[key] !== 'undefined'){
  187. if(key == "Path"){
  188. //create fanastic icon to user
  189. if(attr == "Dir"){
  190. var tdicon = '<i class="folder outline icon"></i>';
  191. }else{
  192. var tdicon = '<i class="file outline icon"></i>';
  193. }
  194. var tdpath = value[key].replace(new RegExp($(htmlelement).attr("path") + "/"),"");
  195. if(tdpath.includes("?")){
  196. var tdicon = '<i class="exclamation triangle icon"></i>';
  197. }
  198. tmp = tmp + "<td>" + tdicon + tdpath + "</td>";
  199. }else{
  200. tmp = tmp + "<td>" + value[key] + "</td>";
  201. }
  202. }else{
  203. tmp = tmp + "<td></td>";
  204. }
  205. });
  206. $("#tbody").append(tmp + "</tr>");
  207. });
  208. //Little patch for HEX file name (PATCH)
  209. $( "tr td:first-child" ).each( function( index, element ){
  210. var tpath = $(this);
  211. if(/^inith[0-9a-fA-F]*\..*$|^[0-9a-fA-F]*$/.test($(tpath).text())){
  212. $.get( '../SystemAOB/functions/file_system/um_filename_decoder.php?filename=' + $(tpath).text(), function( decodedfilename ) {
  213. $(tpath).text(decodedfilename);
  214. });
  215. }
  216. });
  217. //process for Prev button
  218. var path = $(htmlelement).attr("path").split("/");
  219. var previousPath = $(htmlelement).attr("path").replace(/([^\/]+)$/, '').slice(0, -1);
  220. if(previousPath == $(htmlelement).attr("path")){
  221. previousPath = "";
  222. }
  223. console.log(previousPath);
  224. $("#breadcrumb").html('<button class="ts icon mini basic button" currPath="' + $(htmlelement).attr("path") + '" path="' + previousPath + '" attr="Dir" id="returnBtn" onclick="load(this)"><i class="level up icon"></i></button> <p href="#!" class="section">' + file.replace(/^.*[\\\/]/, '') +'</p><div class="divider">/</div>');
  225. if($(htmlelement).attr("path").length > 1){
  226. $.each(path, function( a, key ) {
  227. $("#breadcrumb").append('<p href="#!" class="section"><i class="folder icon"></i>' + key + '</p><div class="divider">/</div>');
  228. });
  229. }
  230. });
  231. }else{
  232. //if it was file, show it.
  233. showDialog("ProgressUI.php?method=e&rand=" + random + "&file=" + file + "&dir=" + $(htmlelement).attr("path"),720,250);
  234. random = Math.floor((Math.random() * 10000) + 1000);
  235. }
  236. }
  237. function contextmenu_extract(){
  238. showDialog("ProgressUI.php?method=e&rand=" + random + "&file=" + file + "&dir=" + $("[style='background-color: #e9e9e9;']").attr("path"),720,250);
  239. random = Math.floor((Math.random() * 10000) + 1000);
  240. }
  241. function functionbar_extract(){
  242. //extract files or dir , if file then pass method=e , if dir then pass method=x
  243. if($("[style='background-color: #e9e9e9;']").attr("attr") == "Dir"){
  244. showDialog("CopyNMoveUI.php?method=x&rand=" + random + "&file=" + file + "&dir=" + $($("[style='background-color: #e9e9e9;']")).attr("path"),720,250);
  245. }else if($("[style='background-color: #e9e9e9;']").attr("attr") == "File"){
  246. showDialog("CopyNMoveUI.php?method=e&rand=" + random + "&file=" + file + "&dir=" + $("[style='background-color: #e9e9e9;']").attr("path"),720,250);
  247. }else{
  248. showDialog("CopyNMoveUI.php?method=x&rand=" + random + "&file=" + file + "&dir=" + $("#returnBtn").attr("currPath"),720,250);
  249. }
  250. //generate new number for next extraction
  251. random = Math.floor((Math.random() * 10000) + 1000);
  252. }
  253. function functionbar_info(){
  254. showDialog("infoUI.php?file=" + file,340,250);
  255. }
  256. function showDialog(href,x,y){
  257. if(ao_module_virtualDesktop){
  258. ao_module_newfw('7-Zip File Manager/' + href,'7-Zip','file outline','7-ZipProgressUI' + Math.floor(Math.random()*100),x,y);
  259. }else{
  260. $.get( href, function( data ) {
  261. $( "#modaldata" ).html( data );
  262. ts('#modal').modal("show");
  263. });
  264. }
  265. }
  266. function msgbox(content,bgcolor,fontcolor){
  267. $(".snackbar").attr("style",'background-color: ' + bgcolor + ';color:' + fontcolor);
  268. ts('.snackbar').snackbar({
  269. content: content,
  270. onAction: () => {
  271. $(".snackbar").removeAttr("style");
  272. }
  273. });
  274. }
  275. </script>
  276. </html>