ustore.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. //delete = delets from DB
  2. //remove = removes from HTML
  3. //save = save to DB
  4. //add = changes HTML
  5. //get = get from DB
  6. //new = changes HTML
  7. //CrossSiteReference needed for WAS
  8. var test = {};
  9. var ref = $(test);
  10. $(document).on('change', '#selectfolders', function(e) {
  11. //getFolders(this.options[e.target.selectedIndex].text);
  12. listFolders(this.options[e.target.selectedIndex].text);
  13. });
  14. function listFolders(folder = ""){
  15. $('#Folders').text("");
  16. $('#CurFolder').text("");
  17. toggleRemoveLinks(true);
  18. getAllFolders();
  19. if(folder != "" && folder != "." && folder != ".."){
  20. $("#selectfolders").val(folder);
  21. }
  22. else{
  23. $("#selectfolders").val(".");
  24. }
  25. $.ajax({
  26. type: "GET",
  27. url: "../server/folders/" + folder,
  28. dataType: "json",
  29. success: function(data) {
  30. if(folder != "" && folder != "." && folder != ".."){
  31. var clone = document.importNode(document.querySelector('#cpyFolder').content,true);
  32. $('[data-class=text]',clone).text("..");
  33. $('[data-class=link]',clone).attr('onclick','listFolders("' + folder.substr(0, folder.lastIndexOf("/")) + '")');
  34. // dont show remove link on .. folder
  35. $('[data-class=removefolder]',clone).remove()
  36. $('#Folders').append(clone);
  37. }
  38. $.each( data, function( key, value ) {
  39. var clone = document.importNode(document.querySelector('#cpyFolder').content,true);
  40. //remove /
  41. value = value.slice(0,-1)
  42. $('[data-class=text]',clone).text(value);
  43. if(folder == ""){
  44. $('[data-class=link]',clone).attr('onclick','listFolders("' + value + '")');
  45. $('[data-class=removefolder]',clone).attr('onclick','deleteFolder("' + value + '")');
  46. }
  47. else{
  48. $('[data-class=link]',clone).attr('onclick','listFolders("' + folder + "/" + value + '")');
  49. $('[data-class=removefolder]',clone).attr('onclick','deleteFolder("' + folder + "/" + value + '")');
  50. }
  51. $('#Folders').append(clone);
  52. });
  53. //new Folder
  54. var clone = document.importNode(document.querySelector('#cpyFolderNew').content,true);
  55. $('[data-class=text]',clone).text("+");
  56. $('[data-class=link]',clone).attr('onclick','createFolder("' + folder + '")');
  57. $('#Folders').append(clone);
  58. }
  59. });
  60. listData(folder)
  61. }
  62. function createFolder(folder = ""){
  63. var newFolder = window.prompt("Please enter a folder name.","");
  64. if (newFolder != null && newFolder != "") {
  65. $.ajax({
  66. type: "Post",
  67. url: "../server/folders/" + folder + "/" + newFolder,
  68. success: function(res) {
  69. listFolders(folder)
  70. }
  71. });
  72. }
  73. }
  74. function deleteFolder(datalink) {
  75. if (datalink != "" && datalink != "." && datalink != ".." && confirm('Deleting ' + datalink)) {
  76. $.ajax({
  77. type: "DELETE",
  78. url: "../server/folders/" + datalink,
  79. success: function(res) {
  80. listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
  81. }
  82. });
  83. }
  84. }
  85. function listData(folder = ""){
  86. $('#Data').text("");
  87. const imageext = ["png", "jpg", "svg", "JPG", "PNG", "SVG"]
  88. const movieext = ["mp4"]
  89. $('#imgUpload').attr("action", "../server/data/" + folder);
  90. $.ajax({
  91. type: "GET",
  92. url: "../server/images/" + folder,
  93. dataType: "json",
  94. success: function(data) {
  95. $.each( data, function( key, value ) {
  96. var ext = value.substr(value.lastIndexOf('.') + 1);
  97. if(folder == ""){
  98. fullfolder = value
  99. }
  100. else{
  101. fullfolder = folder + "/" + value;
  102. }
  103. var clone = document.importNode(document.querySelector('#DataItem').content,true);
  104. $('[data-class=name]',clone).text(value);
  105. $('[data-class=name]',clone).attr('title', value);
  106. //Image
  107. if(imageext.includes(ext)){
  108. $('[data-class=image]',clone).append("<img src='./../storage/"+ fullfolder + "' alt=''>")
  109. }
  110. else if(movieext.includes(ext)){
  111. $('[data-class=image]',clone).append("<div class='imageAlternative' style='padding-top: 0.12em;'>▶</div>")
  112. }
  113. else{
  114. $('[data-class=image]',clone).append("<div class='imageAlternative'>🗎</div>")
  115. }
  116. $('[data-class=image]',clone).attr('onclick',"overlayOn('" + fullfolder + "')");
  117. $('[data-class=inspect]',clone).attr('href','../storage/' + fullfolder + '');
  118. $('[data-class=delete]',clone).attr('href','javascript:deleteData("' + fullfolder + '");');
  119. $('[data-class=multiRemovelink]',clone).attr('name', fullfolder );
  120. $('[data-class=getLink]',clone).attr('href','javascript:copy2Clipboard("' + fullfolder + '");');
  121. $('[data-class=rename]',clone).attr('href','javascript:rename("' + fullfolder + '", "' + value.slice(0, - (ext.length +1)) +'");');
  122. $('[data-class=createSymlink]',clone).attr('href','javascript:createSymlink("' + fullfolder + '", "' + value.slice(0, - (ext.length +1)) +'");');
  123. var queryString = window.location.search;
  124. var urlParams = new URLSearchParams(queryString);
  125. if(urlParams.has('iframe')){
  126. $('[data-class=eventTrigger]',clone).css("visibility", "visible")
  127. $('[data-class=eventTrigger]',clone).attr('href','javascript:triggerEvent("' + fullfolder + '");');
  128. console.log("I am an Iframe")
  129. }
  130. $('#Data').append(clone);
  131. });
  132. }
  133. });
  134. if(folder != "" && folder != "." && folder != ".."){
  135. $('#RemoveFolder').css("display", "block")
  136. $('#removeFolderLink').attr('href','javascript:deleteFolder("' + folder + '");');
  137. }
  138. else{
  139. $('#RemoveFolder').css("display", "none")
  140. }
  141. }
  142. function triggerEvent(data) {
  143. //get url
  144. var datalink = new URL("../storage/" + data, document.baseURI).href;
  145. ref = $(test);
  146. setTimeout(function(){
  147. ref.triggerHandler('getUrl', {"url": datalink});
  148. },500);
  149. }
  150. function overlayOn(data) {
  151. var url = new URL("../storage/" + data, document.baseURI).href
  152. document.getElementById("overlay").style.display = "block";
  153. const imageext = ["png", "jpg", "svg", "PNG", "JPG", "SVG"]
  154. const movieext = ["mp4"]
  155. var ext = url.substr(url.lastIndexOf('.') + 1);
  156. if(imageext.includes(ext)){
  157. $('#overlaycontentsize').append("<img id='overlaycontent' src=" + url + "></img>");
  158. }
  159. else if(movieext.includes(ext)){
  160. $('#overlaycontentsize').append("<video id='overlaycontent' controls> <source src=" + url + " type=\"video/mp4\">Your browser does not support the video tag.</video>");
  161. }
  162. else{
  163. $('#overlaycontentsize').append("<iframe id='overlaycontent' src=" + url + "></iframe>");
  164. }
  165. }
  166. function overlayOff() {
  167. document.getElementById("overlay").style.display = "none";
  168. $('#overlaycontentsize').text("");
  169. }
  170. function toggleRemoveLinks(setoff = false) {
  171. if(setoff || $(".showremoveitems").is(":visible")){
  172. $(".showremoveitems").css("display", "none")
  173. $(".showremoveitemsNot").css("display", "inline")
  174. }
  175. else{
  176. $(".showremoveitems").css("display", "inline")
  177. $(".showremoveitemsNot").css("display", "none")
  178. }
  179. }
  180. function selectRemoveItems() {
  181. toggleRemoveLinks()
  182. }
  183. function unselectAll(){
  184. $(':input','#Data')
  185. .not(':button, :submit, :reset, :hidden')
  186. .val('')
  187. .prop('checked', false)
  188. .prop('selected', false);
  189. toggleRemoveLinks()
  190. }
  191. function selectAll(){
  192. $(':input','#Data')
  193. .not(':button, :submit, :reset, :hidden')
  194. .val('')
  195. .prop('checked', true)
  196. .prop('selected', true);
  197. }
  198. function removeSelectedItems(){
  199. var removedItems = [];
  200. $("#Data input[type=checkbox]:checked").each(function(index, data){
  201. removedItems.push($(data).attr("name"));
  202. });
  203. if (confirm('Deleting: ' + removedItems)) {
  204. $("#Data input[type=checkbox]:checked").each(function(index, data){
  205. //only refresh item list when last item is removed
  206. deleteDataItem($(data).attr("name"), index === ($("#Data input[type=checkbox]:checked").length -1))
  207. });
  208. toggleRemoveLinks()
  209. }
  210. }
  211. function deleteData(datalink) {
  212. if (confirm('Deleting ' + datalink)) {
  213. deleteDataItem(datalink)
  214. }
  215. }
  216. function deleteDataItem(datalink, refresh = true) {
  217. $.ajax({
  218. type: "DELETE",
  219. url: "../server/data/" + encodeURIComponent(datalink),
  220. success: function(res) {
  221. if(refresh)
  222. listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
  223. }
  224. });
  225. }
  226. function copy2Clipboard(datalink) {
  227. new URL("../storage/" + datalink, document.baseURI).href
  228. datalink = new URL("../storage/" + datalink, document.baseURI).href;
  229. const el = document.createElement('textarea');
  230. el.value = datalink;
  231. document.body.appendChild(el);
  232. el.select();
  233. document.execCommand('copy');
  234. document.body.removeChild(el);
  235. }
  236. function createSymlink(datalink, oldfilename) {
  237. var filename = prompt("Please enter symlink filename");
  238. if (filename != null && filename != "") {
  239. var sendfilename = {"filename": filename, "oldfilename": oldfilename}
  240. $.ajax({
  241. type: "POST",
  242. data: JSON.stringify(sendfilename),
  243. headers: {"content-id": "list"},
  244. contentType: "application/json",
  245. url: "../server/data/" + datalink,
  246. success: function(res) {
  247. },
  248. error: function (request, status, error) {
  249. alert(request.responseText + status + error);
  250. }
  251. });
  252. }
  253. }
  254. function rename(datalink, oldfilename) {
  255. var filename = prompt("Please enter new filename, without file extension.", oldfilename);
  256. if (filename != null && filename != "") {
  257. var sendfilename = {"link": datalink, "oldfilename": oldfilename, "newfilename": filename}
  258. $.ajax({
  259. type: "PUT",
  260. data: JSON.stringify(sendfilename),
  261. headers: {"content-id": "list"},
  262. contentType: "application/json",
  263. url: "../server/data/" + datalink,
  264. success: function(res) {
  265. listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
  266. },
  267. error: function (request, status, error) {
  268. alert(request.responseText + status + error);
  269. }
  270. });
  271. }
  272. }
  273. function getAllFolders(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
  274. $('#selectfolders').find('option').remove()
  275. $('#selectfolders').append("<option>.</option>")
  276. $.ajax({
  277. type: "GET",
  278. url: "../server/allfolders/" + folder,
  279. async: false,
  280. dataType: "json",
  281. success: function(data) {
  282. $.each( data, function( key, value ) {
  283. $('#selectfolders').append("<option>" + value.slice(0,-1) +"</option>")
  284. });
  285. }
  286. });
  287. }
  288. function saveexternalfolder(folder = ""){
  289. var newFolder = window.prompt("Please enter URL","");
  290. if (newFolder != null && newFolder != "") {
  291. $.ajax({
  292. type: "Post",
  293. data: JSON.stringify({"folder": newFolder}),
  294. contentType: "application/json; charset=utf-8",
  295. dataType: "json",
  296. async:true,
  297. url: "../server/externalFolder/",
  298. success: function(res) {
  299. }
  300. });
  301. }
  302. }
  303. function listExternalFolders(folder = ""){
  304. $('#ExternalFolders').text("");
  305. if(folder == ""){
  306. $.ajax({
  307. type: "GET",
  308. url: "../server/externalFolder",
  309. dataType: "json",
  310. success: function(data) {
  311. $.each( data, function( key, value ) {
  312. var clone = document.importNode(document.querySelector('#cpyFolder').content,true);
  313. //remove /
  314. value = value.slice(0,-1)
  315. $('[data-class=text]',clone).text(value);
  316. $('[data-class=link]',clone).attr('onclick','listExternalFolders("' + value + '")');
  317. $('#ExternalFolders').append(clone);
  318. });
  319. }
  320. });
  321. }
  322. else{
  323. $('#Folders').text("");
  324. //alert($.get(folder));
  325. /*
  326. $.ajax({
  327. type: "GET",
  328. url: folder,
  329. crossDomain: true,
  330. success: function(data) {
  331. alert(data);
  332. }
  333. });
  334. */
  335. }
  336. //listData(folder)
  337. }
  338. var getUrlParameter = function getUrlParameter(sParam) {
  339. var sPageURL = window.location.search.substring(1),
  340. sURLVariables = sPageURL.split('&'),
  341. sParameterName,
  342. i;
  343. for (i = 0; i < sURLVariables.length; i++) {
  344. sParameterName = sURLVariables[i].split('=');
  345. if (sParameterName[0] === sParam) {
  346. return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
  347. }
  348. }
  349. return false;
  350. };
  351. $(document).ready(function() {
  352. var path = getUrlParameter('path');
  353. if(!path){
  354. path = "";
  355. }
  356. listFolders(path);
  357. //listExternalFolders();
  358. getAllFolders(path);
  359. });