MainUI.php 11 KB

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