├── LICENSE
├── README.md
├── add-files-concept-illustration
    ├── 2808347.ai
    ├── 2808348.eps
    ├── 2808349.jpg
    ├── License free.txt
    └── License premium.txt
├── favicon.ico
├── filemanager.js
├── index.html
└── screenshots
    └── ss1.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 AdDev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # File Manager App
 2 | 
 3 | This is a simple file manager app built using HTML, CSS, and JavaScript. It allows users to perform basic file and folder operations like adding new files/folders, renaming, and deleting.
 4 | 
 5 | ## Features
 6 | 
 7 | - Add new files and folders: Users can create new files and folders by providing a name and selecting the desired location.
 8 | - Rename files and folders: Users can rename existing files and folders by selecting the item and entering a new name.
 9 | - Delete files and folders: Users can delete files and folders by selecting the item and confirming the deletion.
10 | 
11 | ## Usage
12 | 
13 | To use the file manager app, follow these steps:
14 | 
15 | 1. Clone the repository: `git clone https://github.com/addevin/filemanager.git`
16 | 2. Open the project folder.
17 | 3. Launch the app by opening the `index.html` file in your web browser.
18 | 
19 | ## Screenshots
20 | 
21 | 
22 | ![Screenshot 1](screenshots/ss1.png)
23 | _Example of the file manager interface._
24 | [Visit now](https://addevin.github.io/filemanager/)
25 | ## Contributing
26 | 
27 | Contributions are welcome! If you find any bugs or want to add new features, feel free to submit an issue or a pull request.
28 | 
29 | ## License
30 | 
31 | This project is licensed under the MIT License. You can find more details in the [LICENSE](LICENSE) file.
32 | 
33 | 


--------------------------------------------------------------------------------
/add-files-concept-illustration/2808347.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/addevin/filemanager/abdc1ac40e870efd9540839085dceea5fbcafe55/add-files-concept-illustration/2808347.ai


--------------------------------------------------------------------------------
/add-files-concept-illustration/2808348.eps:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/addevin/filemanager/abdc1ac40e870efd9540839085dceea5fbcafe55/add-files-concept-illustration/2808348.eps


--------------------------------------------------------------------------------
/add-files-concept-illustration/2808349.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/addevin/filemanager/abdc1ac40e870efd9540839085dceea5fbcafe55/add-files-concept-illustration/2808349.jpg


--------------------------------------------------------------------------------
/add-files-concept-illustration/License free.txt:
--------------------------------------------------------------------------------
 1 | IMPORTANT NOTICE: This license only applies if you downloaded this content as
 2 | an unsubscribed user. If you are a premium user (ie, you pay a subscription)
 3 | you are bound to the license terms described in the accompanying file
 4 | "License premium.txt".
 5 | 
 6 | ---------------------
 7 | 
 8 | You must attribute the image to its author:
 9 | 
10 | In order to use a content or a part of it, you must attribute it to slidesgo / Freepik,
11 | so we will be able to continue creating new graphic resources every day.
12 | 
13 | 
14 | How to attribute it?
15 | 
16 | For websites:
17 | 
18 | Please, copy this code on your website to accredit the author:
19 | <a href="http://www.freepik.com">Designed by slidesgo / Freepik</a>
20 | 
21 | For printing:
22 | 
23 | Paste this text on the final work so the authorship is known.
24 | - For example, in the acknowledgements chapter of a book:
25 | "Designed by slidesgo / Freepik"
26 | 
27 | 
28 | You are free to use this image:
29 | 
30 | - For both personal and commercial projects and to modify it.
31 | - In a website or presentation template or application or as part of your design.
32 | 
33 | You are not allowed to:
34 | 
35 | - Sub-license, resell or rent it.
36 | - Include it in any online or offline archive or database.
37 | 
38 | The full terms of the license are described in section 7 of the Freepik
39 | terms of use, available online in the following link:
40 | 
41 |   http://www.freepik.com/terms_of_use
42 | 
43 | The terms described in the above link have precedence over the terms described
44 | in the present document. In case of disagreement, the Freepik Terms of Use
45 | will prevail.
46 | 


--------------------------------------------------------------------------------
/add-files-concept-illustration/License premium.txt:
--------------------------------------------------------------------------------
 1 | IMPORTANT NOTICE: This license only applies if you downloaded this content as
 2 | a subscribed (or "premium") user. If you are an unsubscribed user (or "free"
 3 | user) you are bound to the license terms described in the accompanying file
 4 | "License free.txt".
 5 | 
 6 | ---------------------
 7 | 
 8 | You can download from your profile in Freepik a personalized license stating
 9 | your right to use this content as a "premium" user:
10 | 
11 |   https://profile.freepik.com/my_downloads
12 | 
13 | You are free to use this image:
14 | 
15 | - For both personal and commercial projects and to modify it.
16 | - In a website or presentation template or application or as part of your design.
17 | 
18 | You are not allowed to:
19 | 
20 | - Sub-license, resell or rent it.
21 | - Include it in any online or offline archive or database.
22 | 
23 | The full terms of the license are described in sections 7 and 8 of the Freepik
24 | terms of use, available online in the following link:
25 | 
26 |   http://www.freepik.com/terms_of_use
27 | 
28 | The terms described in the above link have precedence over the terms described
29 | in the present document. In case of disagreement, the Freepik Terms of Use
30 | will prevail.
31 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/addevin/filemanager/abdc1ac40e870efd9540839085dceea5fbcafe55/favicon.ico


--------------------------------------------------------------------------------
/filemanager.js:
--------------------------------------------------------------------------------
  1 | let fileSystemTree =[
  2 |     {
  3 |       isDirectory: true,
  4 |       name: 'Test folder',
  5 |       child: [
  6 |         {
  7 |           isDirectory: false,
  8 |           name: 'text.txt',
  9 |         }
 10 |       ]
 11 |     },
 12 |     {
 13 |       isDirectory: false,
 14 |       name: 'index.html',
 15 |     },
 16 |     {
 17 |       isDirectory: false,
 18 |       name: 'index.php',
 19 |     },
 20 |     {
 21 |       isDirectory: false,
 22 |       name: 'textfile.txt',
 23 |     },
 24 |     {
 25 |       isDirectory: false,
 26 |       name: 'textfile.exe',
 27 |     },
 28 |     // 50 additional files and folders
 29 |     {
 30 |       isDirectory: true,
 31 |       name: 'Folder A',
 32 |       child: [
 33 |         {
 34 |           isDirectory: false,
 35 |           name: 'fileA1.txt',
 36 |         },
 37 |         {
 38 |           isDirectory: false,
 39 |           name: 'fileA2.js',
 40 |         },
 41 |         {
 42 |           isDirectory: true,
 43 |           name: 'Subfolder A',
 44 |           child: [
 45 |             {
 46 |               isDirectory: false,
 47 |               name: 'fileA3.css',
 48 |             },
 49 |             // Add more files or folders here as needed
 50 |           ]
 51 |         },
 52 |         // Add more files or folders here as needed
 53 |       ]
 54 |     },
 55 |     {
 56 |       isDirectory: false,
 57 |       name: 'fileB1.html',
 58 |     },
 59 |     {
 60 |       isDirectory: true,
 61 |       name: 'Folder B',
 62 |       child: [
 63 |         {
 64 |           isDirectory: false,
 65 |           name: 'fileB2.php',
 66 |         },
 67 |         // Add more files or folders here as needed
 68 |       ]
 69 |     },
 70 |     // Add more files or folder''s here as needed
 71 |   ];
 72 | 
 73 | class HistoryStack{
 74 |     #items;
 75 |     constructor(){
 76 |         this.#items = []
 77 |     }
 78 |     push(item){
 79 |         this.#items.push(item)
 80 |     }
 81 |     pop(){
 82 |         return this.#items.pop()
 83 |     }
 84 |     peek(){
 85 |         return this.#items[this.#items.length - 1]
 86 |     }
 87 |     isEmpty(){
 88 |         return this.#items.length === 0
 89 |     }
 90 |     size(){
 91 |         return this.#items.length
 92 |     }
 93 |     print(){
 94 |         console.log(this.#items.join(', '))
 95 |     }
 96 | }   
 97 | let prePaths = new HistoryStack()
 98 | let forPaths = new HistoryStack()
 99 | let fileSystem = fileSystemTree;
100 | let selected_item = {
101 |     item:{},
102 |     index:0
103 | };
104 | initFileManager('root/');
105 | function initFileManager(path,config={keepHistory:true,callback:resetContextMenu}){
106 |     document.querySelector('.folder-path-input').value = path;
107 |     if(config.keepHistory)prePaths.push(path)
108 |     let fileSys = JSON.parse(JSON.stringify(fileSystem));
109 |     let pathArr = path.split('/')
110 |     if((pathArr[0]!='root')) return newToast('error','404 | Path doesn\'t exist!',(close)=>setTimeout(()=>close(),5000))
111 |     let flag = 0;
112 |     for (let i = 1; i < pathArr.length; i++) {
113 |         if(pathArr[i]){
114 |             for (const folder in fileSys) {
115 |                 if(fileSys[folder].name == pathArr[i]){
116 |                     fileSys = fileSys[folder].child;
117 |                     flag++; 
118 |                     break;
119 |                 }
120 |             }
121 |         }
122 |     }
123 |     if((pathArr.length-(pathArr[pathArr.length-1]?1:2)!=flag)) return newToast('error','404 | Path doesn\'t exist!',(close)=>setTimeout(()=>close(),5000))
124 |     document.querySelector('.folderEmpty').style.display=(fileSys.length?'none':'block')
125 |     setupFilemanager(fileSys)
126 |     if(config.callback)config.callback();
127 | }
128 | function newItem(config={isDirectory:true,name:'unknown'}){
129 |     let path= document.querySelector('.folder-path-input').value;
130 |     if(!(path && config.name)) return newToast('error','Please fill out the name field!',(close)=>setTimeout(()=>close(),5000))
131 |     let fileSys = fileSystem;
132 |     let pathArr = path.split('/')
133 |     for (let i = 1; i < pathArr.length; i++) {
134 |         if(pathArr[i]){
135 |             for (const folder in fileSys) {
136 |                 if(fileSys[folder].name == pathArr[i]){
137 |                     fileSys = fileSys[folder].child;
138 |                     break;
139 |                 }
140 |             }
141 |         }
142 |     }
143 |     if(config.isDirectory){
144 |         fileSys.push({
145 |             isDirectory: true,
146 |             name: config.name,
147 |             child: []
148 |         })
149 |     }else{
150 |         fileSys.push({
151 |             isDirectory: false,
152 |             name: config.name,
153 |         })
154 |     }
155 |     initFileManager(path,{keepHistory:false})
156 |     newToast('success','Saved new '+(config.isDirectory?'folder':'file')+' "'+config.name+'"!',(close)=>setTimeout(()=>close(),5000))
157 | }
158 | function renameItem(newName){
159 |     if(selected_item.item?.name){
160 |         let path= document.querySelector('.folder-path-input').value;
161 |         let pathArr = path.split('/')
162 |         let fileSys = fileSystem;
163 |         for (let i = 1; i < pathArr.length; i++) {
164 |             if(pathArr[i]){
165 |                 for (const folder in fileSys) {
166 |                     if(fileSys[folder].name == pathArr[i]){
167 |                         fileSys = fileSys[folder].child;
168 |                         break;
169 |                     }
170 |                 }
171 |             }
172 |         }
173 |         fileSys[selected_item.index].name=newName;
174 |         newToast('success','Changed file name into '+selected_item.item.name+'!',(remove)=>{
175 |             setTimeout(() => {
176 |                 remove()
177 |             }, 6000);
178 |         })
179 |         initFileManager(path,{keepHistory:false})
180 |     }
181 | }
182 | function deleteItem(){
183 |     if(selected_item.item?.name){
184 |         let path= document.querySelector('.folder-path-input').value;
185 |         let pathArr = path.split('/')
186 |         let fileSys = fileSystem;
187 |         for (let i = 1; i < pathArr.length; i++) {
188 |             if(pathArr[i]){
189 |                 for (const folder in fileSys) {
190 |                     if(fileSys[folder].name == pathArr[i]){
191 |                         fileSys = fileSys[folder].child;
192 |                         break;
193 |                     }
194 |                 }
195 |             }
196 |         }
197 |         newToast('success',`Deleted ${selected_item.item.isDirectory?'folder':'file'} "${selected_item.item.name}"!`,(remove)=>{
198 |             setTimeout(() => {
199 |                 remove()
200 |             }, 6000);
201 |         })
202 |          fileSys.splice(selected_item.index,1);
203 |         initFileManager(path,{keepHistory:false})
204 |     }
205 | }
206 | function setupFilemanager(fileSystem){
207 |     filesContainer = document.querySelector('.filemanager-container-row');
208 |     filesContainer.innerHTML = ''
209 |     resetHistoryBtn()
210 |     for (const fileItem in fileSystem) {
211 |         let div = document.createElement("div")
212 |         div.setAttribute('title',fileSystem[fileItem].name)
213 |         if(fileSystem[fileItem].isDirectory){
214 |             div.classList.add('folder')
215 |             div.addEventListener('dblclick',(e)=>{
216 |                 let toPath=document.querySelector('.folder-path-input').value+fileSystem[fileItem].name
217 |                 initFileManager(toPath+'/');
218 |             })
219 |             div.innerHTML += `
220 |             <div class="folder-icon-container">
221 |             <div class="folder-icon"></div>
222 |             </div>
223 |             <p class="folder-name">${fileSystem[fileItem].name}</p>
224 |             `
225 |         }else{
226 |             // div.addEventListener('dblclick',(e)=>{})
227 |             div.classList.add('file')
228 |             let fileIcon = getFileIconMeta(fileSystem[fileItem])
229 |             div.innerHTML += `
230 |                     <div class="doc-icon-container">
231 |                         <div class="doc-icon" style="--icon-color: ${fileIcon.color};"><p>${fileIcon.ext}</p></div>
232 |                     </div>
233 |                     <p class="file-name">${fileSystem[fileItem].name}</p>
234 |             `
235 |         }
236 |         filesContainer.appendChild(div)
237 |         div.addEventListener('click',(e)=>{
238 |             // selected_item=document.querySelector('.folder-path-input').value+fileSystem[fileItem].name
239 |             selected_item.index=fileItem;
240 |             selected_item.item=fileSystem[fileItem];
241 |             document.querySelector('.item-selected')?.classList.remove('item-selected')
242 |             div.classList.add('item-selected')
243 |         })
244 |     }
245 | }
246 | function getFileIconMeta(file){
247 |     let ext = file.name.split('.')[file.name.split('.').length-1];
248 |     let color = '116, 116, 116'
249 |     switch (ext) {
250 |         case 'txt':
251 |             color = '36, 230, 149'
252 |             break;
253 |     
254 |         case 'html':
255 |             color = '36, 230, 149'
256 |             break;
257 |     
258 |         case 'php':
259 |             color = '108, 74, 201'
260 |             break;
261 |     
262 |         case 'zip':
263 |             color = '190, 173, 16'
264 |             break;
265 |     
266 |         case 'svg':
267 |             color = '36, 230, 149'
268 |             break;
269 |         
270 |         default:
271 |             ext = '.?'            
272 |             break;
273 |     }
274 |     return {ext:ext.toUpperCase(),color}
275 | }
276 | 
277 | function backward(){
278 |     if(!prePaths.isEmpty()){
279 |         let currPath = prePaths.pop()
280 |         forPaths.push(currPath)
281 |         initFileManager(prePaths.peek(),{keepHistory:false})
282 |     }
283 | }
284 | function forward(){
285 |     if(!forPaths.isEmpty()){
286 |         let currPath = forPaths.pop()
287 |         prePaths.push(currPath)
288 |         initFileManager(currPath,{keepHistory:false})
289 |     }
290 | }
291 | function resetHistoryBtn(){
292 |     if((prePaths.size()-1)==0){
293 |         document.getElementById('backwardBtn').setAttribute('disabled',true)
294 |     }else{
295 |         document.getElementById('backwardBtn').removeAttribute('disabled')
296 |     }
297 |     if(forPaths.isEmpty()){
298 |         document.getElementById('forwardBtn').setAttribute('disabled',true)
299 |     }else{
300 |         document.getElementById('forwardBtn').removeAttribute('disabled')
301 |     }
302 | }
303 | 
304 | function openModel(modelFor){ //'newFile' 
305 |     document.querySelector('.popup').style.display='flex'
306 |     document.querySelector('.popup >.popup-bg').addEventListener('click',()=>document.querySelector('.popup').style.display='none')
307 |     if(modelFor=='newFile'){
308 |         document.querySelector('.popup h1').innerHTML = 'New file'
309 |         let input = document.createElement('input')
310 |         input.setAttribute('type','text')
311 |         input.setAttribute('placeholder','Filename')
312 |         let saveButton = document.createElement('button')
313 |         saveButton.style = 'background-color: rgb(1, 158, 111);';
314 |         saveButton.innerHTML = 'Save';
315 |         document.querySelector('.popup form').innerHTML = ''
316 |         document.querySelector('.popup form').appendChild(input); 
317 |         document.querySelector('.popup form').appendChild(saveButton); 
318 |         saveButton.addEventListener('click',()=>{
319 |             newItem(config={isDirectory:false,name:input.value});
320 |             document.querySelector('.popup').style.display='none'
321 |         })
322 |     }
323 |     if(modelFor=='newFolder'){
324 |         document.querySelector('.popup h1').innerHTML = 'New Folder'
325 |         let input = document.createElement('input')
326 |         input.setAttribute('type','text')
327 |         input.setAttribute('placeholder','Foldername')
328 |         let saveButton = document.createElement('button')
329 |         saveButton.style = 'background-color: rgb(1, 158, 111);';
330 |         saveButton.innerHTML = 'Save';
331 |         document.querySelector('.popup form').innerHTML = ''
332 |         document.querySelector('.popup form').appendChild(input); 
333 |         document.querySelector('.popup form').appendChild(saveButton); 
334 |         saveButton.addEventListener('click',()=>{
335 |             newItem(config={isDirectory:true,name:input.value});
336 |             document.querySelector('.popup').style.display='none'
337 |         })
338 |     }
339 |     if(modelFor=='rename'){
340 |         if(selected_item.item?.name){
341 | 
342 |             document.querySelector('.popup h1').innerHTML = 'Rename'
343 |             let input = document.createElement('input')
344 |             input.setAttribute('type','text')
345 |             input.setAttribute('placeholder',(selected_item.item.isDirectory?'Folder':'File')+' name ('+selected_item.item.name+')')
346 |             input.value = selected_item.item.name;
347 |             let saveButton = document.createElement('button')
348 |             saveButton.style = 'background-color: rgb(1, 158, 111);';
349 |             saveButton.innerHTML = 'Save';
350 |             document.querySelector('.popup form').innerHTML = ''
351 |             document.querySelector('.popup form').appendChild(input); 
352 |             document.querySelector('.popup form').appendChild(saveButton); 
353 |             saveButton.addEventListener('click',()=>{
354 |                 renameItem(input.value);
355 |                 document.querySelector('.popup').style.display='none'
356 |             })
357 |         }else{
358 |             document.querySelector('.popup').style.display='none'
359 |             newToast('error','Please select a File or Folder which you want to rename!',(remove)=>{
360 |                 setTimeout(() => {
361 |                     remove()
362 |                 }, 6000);
363 |             })
364 |         }
365 |     }
366 |     if(modelFor=='delete'){
367 |         if(selected_item.item?.name){
368 | 
369 |             document.querySelector('.popup h1').innerHTML = 'Sure to delete?'
370 |             let saveButton = document.createElement('button')
371 |             let cancelButton = document.createElement('button')
372 |             saveButton.style = 'background-color: rgb(1, 158, 111);';
373 |             saveButton.innerHTML = 'Yes';
374 |             cancelButton.innerHTML = 'Cancel';
375 |             document.querySelector('.popup form').innerHTML = ''
376 |             // document.querySelector('.popup form').appendChild(input); 
377 |             document.querySelector('.popup form').appendChild(saveButton); 
378 |             document.querySelector('.popup form').appendChild(cancelButton); 
379 |             saveButton.focus()
380 |             saveButton.addEventListener('click',()=>{
381 |                 deleteItem();
382 |                 document.querySelector('.popup').style.display='none'
383 |             })
384 |             cancelButton.addEventListener('click',()=>{
385 |                 document.querySelector('.popup').style.display='none'
386 |             })
387 |         }else{
388 |             document.querySelector('.popup').style.display='none'
389 |             newToast('error','Please select a File or Folder which you want to delete!',(remove)=>{
390 |                 setTimeout(() => {
391 |                     remove()
392 |                 }, 6000);
393 |             })
394 |         }
395 |     }
396 | }
397 | 
398 | function newToast(sts,message,cb){
399 |     sts = (sts=='success'?'toast-sccess':(sts=='error'?'toast-dnger':'toast-inf'));
400 |     let tContainer = document.querySelector('.toast-messages')
401 |     let c = document.createElement('div')
402 |     let bc = document.createElement('div')
403 |     let p = document.createElement('p')
404 |     let b = document.createElement('button')
405 |     c.classList.add('toast-container',sts)
406 |     // c.setAttribute('id','sjdfnksjdfn');
407 |     p.innerText = message;
408 |     b.innerHTML = '<i class="fa-solid fa-xmark"></i>';
409 |     b.addEventListener('click',removeToast);
410 |     c.appendChild(p)
411 |     bc.appendChild(b)
412 |     c.appendChild(bc)
413 |     tContainer.prepend(c)
414 |     setTimeout(() => {
415 |         c.style.opacity = '1'
416 |     }, 300);
417 |     function removeToast(){
418 |         c.style = `
419 |             opacity:0;
420 |         `
421 |         setTimeout(() => {
422 |             c.remove()
423 |         }, 500);
424 |     }
425 |     if(cb)cb(removeToast);
426 | }
427 | 
428 | newToast('info','Welcome: in testing mode...',(remove)=>{
429 |     setTimeout(() => {
430 |         remove()
431 |     }, 10000);
432 | })
433 | window.addEventListener('focus',()=>{
434 |     
435 |     newToast('info','Welcome back!',(remove)=>{
436 |         setTimeout(() => {
437 |             remove()
438 |         }, 3000);
439 |     })
440 | })
441 | window.addEventListener('blur',(e)=>{
442 |     newToast('info','Seems you gone!',(remove)=>{
443 |         e.target.addEventListener('focus',()=>{
444 |             setTimeout(() => {
445 |                 remove()
446 |             }, 1200);
447 |         })
448 |     })
449 | })
450 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |         <link rel="icon" type="image/x-icon" href="/favicon.ico">
  8 | 		<title>Filemanager | AdDev</title>
  9 | 	</head>
 10 | 	<style>
 11 | 		.filemanager-container-row {
 12 | 			padding: 1%;
 13 | 			display: flex;
 14 | 			flex-wrap: wrap;
 15 | 		}
 16 |         *{
 17 | 
 18 |             font-family: Arial, Helvetica, sans-serif;
 19 |         }
 20 | 		body {
 21 | 			padding: 0;
 22 | 			margin: 0;
 23 | 			background-color: #f5f5f5;
 24 | 			font-family: Arial, Helvetica, sans-serif;
 25 |             overflow-x: hidden;
 26 | 		}
 27 | 		.folder,.file {
 28 | 			display: flex;
 29 | 			justify-content: center;
 30 | 			align-items: center;
 31 | 			width: 60px;
 32 | 			height: 70px;
 33 | 			flex-direction: column;
 34 | 			padding: 10px;
 35 | 			cursor: pointer;
 36 |             margin: 3px;
 37 |             /* overflow: hidden; */
 38 |             border-radius: 10px;
 39 | 		}
 40 | 		.folder:hover,.file:hover {
 41 | 			background-color: rgb(223, 240, 255);
 42 | 		}
 43 |         .item-selected, .item-selected:hover{
 44 |             background-color: rgb(200, 229, 253);
 45 |             padding: 9px;
 46 |             border: 1px dotted rgb(138, 201, 252);
 47 |         }
 48 | 		.folder-icon-container {
 49 | 			display: flex;
 50 | 			align-items: end;
 51 | 			justify-content: end;
 52 | 			flex-wrap: wrap;
 53 | 		}
 54 | 		.folder-icon {
 55 | 			background-color: rgb(28, 153, 255);
 56 | 			border-radius: 8px;
 57 | 			width: 60px;
 58 | 			height: 40px;
 59 | 			position: relative;
 60 | 			margin-top: 8px;
 61 | 		}
 62 | 		.folder:hover .folder-icon::after {
 63 | 			content: '';
 64 | 			background-color: rgb(52, 111, 163);
 65 | 			border-radius: 5px;
 66 |             margin-left: 3px;
 67 | 			width: 60px;
 68 | 			height: 35px;
 69 | 			position: absolute;
 70 |             transform: skewX(-10deg);
 71 |             margin-top: 5px;
 72 |             opacity: 1;
 73 | 		}
 74 |         .folder-icon::after {
 75 |             content: '';
 76 | 			background-color: rgb(52, 111, 163);
 77 | 			border-radius: 5px;
 78 | 			width: 60px;
 79 | 			height: 40px;
 80 | 			position: absolute;
 81 |             transform: skewX(0deg);
 82 |             opacity: 0;
 83 |             transition: 0.2s;
 84 | 		}
 85 | 		.folder-icon::before {
 86 | 			margin-top: -8px;
 87 | 			position: absolute;
 88 | 			background-color: rgb(28, 153, 255);
 89 | 			border-radius: 5px;
 90 | 			border-end-start-radius: 8px;
 91 | 			content: "";
 92 | 			width: 28px;
 93 | 			height: 48px;
 94 | 		}
 95 | 		.doc-icon-container {
 96 | 			display: flex;
 97 | 			align-items: end;
 98 | 			justify-content: end;
 99 | 			flex-wrap: wrap;
100 | 		}
101 | 		.file:hover .doc-icon::after {
102 |             border-width: 7px;
103 |             border-style: solid;
104 | 			border-color: rgb(223, 240, 255);
105 | 			border-bottom-color: rgba(10,10,10,0.5);
106 | 			border-left-color: rgba(10,10,10,0.5);
107 | 		}
108 | 		.item-selected:hover .doc-icon::after, .item-selected .doc-icon::after {
109 |             border-style: solid;
110 | 			border-color: rgb(200, 229, 253);
111 | 			border-bottom-color: rgba(10,10,10,0.5);
112 | 			border-left-color: rgba(10,10,10,0.5);
113 | 		}
114 | 		.doc-icon::after {
115 | 			content: "";
116 | 			width: 0;
117 | 			height: 0;
118 | 			border-color: #f5f5f5;
119 |             border-width: 10px;
120 |             border-style: solid;
121 | 			border-bottom-color: rgba(10,10,10,0.5);
122 | 			border-left-color: rgba(10,10,10,0.5);
123 | 			right: 0;
124 | 			top: 0;
125 | 			position: absolute;
126 |             transition-property:border-width;
127 |             transition-duration: 0.3s;
128 | 		}
129 | 		.doc-icon {
130 | 			background-color: rgba(var(--icon-color),1);
131 | 			border-radius: 8px;
132 | 			width: 48px;
133 | 			height: 48px;
134 | 			position: relative;
135 | 			color: #f5f5f5;
136 | 			display: flex;
137 | 			text-align: right;
138 | 			align-items: end;
139 | 		}
140 | 		.doc-icon p {
141 | 			padding: 2px;
142 | 			margin: 0;
143 | 			text-align: right;
144 | 		}
145 | 		p.file-name, p.folder-name {
146 | 			margin: 5px 0 0 0;
147 | 			text-align: center;
148 | 
149 |             white-space: nowrap; 
150 |             width: 70px; 
151 |             overflow: hidden;
152 |             text-overflow: ellipsis; 
153 | 		}
154 | 		.image-preview {
155 | 			height: 48px;
156 | 			width: 60px;
157 | 			display: flex;
158 | 			justify-content: center;
159 | 			align-items: center;
160 | 		}
161 | 		.image-preview img {
162 | 			width: 100%;
163 | 			border-radius: 5px;
164 | 			max-height: 48px;
165 | 		}
166 |         .filemanger{
167 |             display: flex;
168 |             flex-direction: column;
169 |         }
170 |         
171 |         .top-folder-path{
172 |             /* width: 100%; */
173 |             height: 40px;
174 |             /* border:gray 1px solid; */
175 |             background-color: #ffffff;
176 |             padding: 3px 10px;
177 |             display: flex;
178 |             justify-content: space-between;
179 |             align-items: center;
180 |             /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
181 |         }
182 |         .path-action-btns{
183 |             width: 90px;
184 |             display: flex;
185 |             justify-content: space-around;
186 |             align-items: center;
187 |             margin-right: 5px;
188 |         }
189 |         .path-action-btns button{
190 |             cursor: pointer;
191 |             margin: 0;
192 |             border: 0;
193 |             border-radius: 50px;
194 |             background-color: white;
195 |             width: 26px;
196 |             height: 26px;
197 |             color: rgb(109, 109, 240);
198 |         }
199 |         .path-action-btns button:disabled, .path-action-btns button:disabled:hover{
200 |             color: rgb(175, 175, 175);
201 |             background-color: white;
202 |             cursor: not-allowed;
203 |         }
204 |         .path-action-btns button:hover{
205 |             background-color: #f7f7f7;
206 |             color: rgb(94, 94, 240);
207 | 
208 |         }
209 |         .folder-path-write{
210 |             display: flex;
211 |             /* border: 2px solid gray; */
212 |             height: 35px;
213 |             flex: 1;
214 |             border-radius: 7px;
215 |             background-color: rgb(245, 244, 244);
216 |             overflow: hidden;
217 |             align-items: center;
218 |         }
219 |         .folder-path-write:focus-within {
220 |             background-color: rgb(233, 232, 232);
221 |         }
222 |         .folder-path-write input{
223 |             border: 0;
224 |             flex: 1;
225 |             font-family: Arial, Helvetica, sans-serif;
226 |             font-size: 15px;
227 |             background-color: transparent;
228 |             outline: 0;
229 |             color: rgb(63, 63, 133);
230 |             margin-left: 10px;
231 |             
232 |         }
233 |         .folder-path-write button{
234 |             margin: 0;
235 |             border: 0;
236 |             background-color: rgb(245, 244, 244);
237 |             width: 27px;
238 |             height: 27px;
239 |             border-radius: 50px;
240 |             cursor: pointer;
241 |             color: rgb(109, 109, 240);
242 |             margin-right: 5px;
243 |         }
244 |         .folder-path-write button:hover{
245 |             background-color: #f7f7f7;
246 |         }
247 |         .top-menu{
248 |             width: 100%;
249 |             /* border:gray 1px solid; */
250 |             padding: 1px;
251 |             background-color: #f5f2f2;
252 |         }
253 |         .top-menu button i {
254 |             margin-right: 3px;
255 |         }
256 |         .top-menu button {
257 |             font-size: 15px;
258 |             padding: 6px 9px;
259 |             background-color: rgb(224, 224, 224);
260 |             border: 0;
261 |             border-radius: 7px;
262 |             margin: 5px;
263 |             cursor: pointer;
264 |         }
265 |         .top-menu button:hover{
266 |             color: var(--btn-bg-color) ;
267 |             /* color: #f5f5f5; */
268 |         }
269 |         .top-menu button:disabled:hover{
270 |             cursor: not-allowed;
271 |             background-color: rgb(224, 224, 224);
272 |             /* color: gray; */
273 |         }
274 |         .folderEmpty{
275 |             width: 50%;
276 |             margin: auto;
277 |             text-align: center;
278 |             display: none;
279 |         }
280 |         .folderEmpty img{
281 |             width: 100%;
282 |             mix-blend-mode: darken;
283 |             opacity: 0.4;
284 |         }
285 |         .folderEmpty h5{
286 |             font-size: 35px;
287 |             margin: -120px 0 0 0;
288 |             padding: 0;
289 |             opacity: 0.4;
290 |             
291 |         }
292 | 	</style>
293 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
294 | 	<body>
295 |         <div class="filemanger">
296 |             <div class="top-menu">
297 |                 <button onclick="openModel('newFile')" style="--btn-bg-color: rgb(190, 173, 16)"><i class="fa-solid fa-file-circle-plus"></i>Add files...</button>
298 |                 <button onclick="openModel('newFolder')" style="--btn-bg-color: rgb(221, 202, 27)"><i class="fa-regular fa-folder-open"></i>Add folder</button>
299 |                 <button onclick="openModel('rename')" style="--btn-bg-color:rgb(32, 175, 231);"><i class="fa-solid fa-pen-to-square"></i>Rename</button>
300 |                 <button onclick="openModel('delete')" style="--btn-bg-color: rgb(238, 107, 107)"><i class="fa-solid fa-trash"></i>Delete</button>
301 |                 <button disabled><i class="fa-solid fa-copy"></i>Copy</button>
302 |                 <button disabled><i class="fa-solid fa-scissors"></i>Cut</button>
303 |                 <button disabled><i class="fa-regular fa-paste"></i>Paste</button>
304 |             </div>
305 |             <div class="top-folder-path">
306 |                 <div class="path-action-btns">
307 |                     <button id="backwardBtn" onclick="backward()"><i class="fa-solid fa-arrow-left"></i></button>
308 |                     <button id="forwardBtn" onclick="forward()"><i class="fa-solid fa-arrow-right"></i></button>
309 |                     <button onclick="initFileManager('root/');"><i class="fa-solid fa-house"></i></button>
310 |                 </div>
311 |                 <div class="folder-path-write">
312 |                     <input type="text" value="/root/main/test-folder/" pattern="[A-Za-z0-9]+/[A-Za-z0-9]+" class="folder-path-input" onchange="initFileManager(event.target.value)">
313 |                     <button onclick="clickedthisBtn(event);function clickedthisBtn(e){let i = e.target.closest('button').querySelector('i'); i.classList.add('fa-spin');setTimeout(() => {
314 |                         i.classList.remove('fa-spin')
315 |                     }, 2000);}"><i class="fa-solid fa-arrows-rotate" ></i></button>
316 | 
317 |                 </div>
318 |             </div>
319 |             <div class="filemanager-container-row">
320 |                 <div class="folder">
321 |                     <div class="folder-icon-container">
322 |                         <div class="folder-icon"></div>
323 |                     </div>
324 |                     <p class="folder-name">A folder ikjsnf ijsd kjndk jn</p>
325 |                 </div>
326 |                 <div class="folder">
327 |                     <div class="folder-icon-container">
328 |                         <div class="folder-icon"></div>
329 |                     </div>
330 |                     <p class="folder-name">A folder ikjsnf ijsd kjndk jn</p>
331 |                 </div>
332 |                 <div class="folder">
333 |                     <div class="folder-icon-container">
334 |                         <div class="folder-icon"></div>
335 |                     </div>
336 |                     <p class="folder-name">A folder ikjsnf ijsd kjndk jn</p>
337 |                 </div>
338 |                 <div class="folder">
339 |                     <div class="folder-icon-container">
340 |                         <div class="folder-icon"></div>
341 |                     </div>
342 |                     <p class="folder-name">test folder</p>
343 |                 </div>
344 |                 <div class="folder">
345 |                     <div class="folder-icon-container">
346 |                         <div class="folder-icon"></div>
347 |                     </div>
348 |                     <p class="folder-name">A folder ikjsnf ijsd kjndk jn</p>
349 |                 </div>
350 |                 <!-- (div.folder>(div.folder-icon-container>div.folder-icon)>p.folder-name{folder $})*10 -->
351 |                 <div class="folder">
352 |                     <div class="folder-icon-container">
353 |                         <div class="folder-icon"></div>
354 |                     </div>
355 |                     <p class="folder-name">folder 1</p>
356 |                 </div>
357 |                 <div class="folder">
358 |                     <div class="folder-icon-container">
359 |                         <div class="folder-icon"></div>
360 |                     </div>
361 |                     <p class="folder-name">folder 2</p>
362 |                 </div>
363 |                 <div class="folder">
364 |                     <div class="folder-icon-container">
365 |                         <div class="folder-icon"></div>
366 |                     </div>
367 |                     <p class="folder-name">folder 3</p>
368 |                 </div>
369 |                 <div class="folder">
370 |                     <div class="folder-icon-container">
371 |                         <div class="folder-icon"></div>
372 |                     </div>
373 |                     <p class="folder-name">folder 4</p>
374 |                 </div>
375 |                 <div class="folder">
376 |                     <div class="folder-icon-container">
377 |                         <div class="folder-icon"></div>
378 |                     </div>
379 |                     <p class="folder-name">folder 10</p>
380 |                 </div>
381 |                 <div class="folder">
382 |                     <div class="folder-icon-container">
383 |                         <div class="folder-icon"></div>
384 |                     </div>
385 |                     <p class="folder-name">folder 11</p>
386 |                 </div>
387 |                 <div class="folder">
388 |                     <div class="folder-icon-container">
389 |                         <div class="folder-icon"></div>
390 |                     </div>
391 |                     <p class="folder-name">folder 12</p>
392 |                 </div>
393 |                 <div class="folder">
394 |                     <div class="folder-icon-container">
395 |                         <div class="folder-icon"></div>
396 |                     </div>
397 |                     <p class="folder-name">folder 13</p>
398 |                 </div>
399 |                 <div class="folder">
400 |                     <div class="folder-icon-container">
401 |                         <div class="folder-icon"></div>
402 |                     </div>
403 |                     <p class="folder-name">folder 14</p>
404 |                 </div>
405 |                 <div class="folder">
406 |                     <div class="folder-icon-container">
407 |                         <div class="folder-icon"></div>
408 |                     </div>
409 |                     <p class="folder-name">folder 15</p>
410 |                 </div>
411 |                 <div class="file">
412 |                     <div class="image-preview">
413 |                         <img
414 |                             src="data:image/jpeg;base64,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"
415 |                             alt=""
416 |                         />
417 |                     </div>
418 |                     <p class="file-name">image.jpg</p>
419 |                 </div>
420 |                 <div class="file" id="testCont">
421 |                     <div class="doc-icon-container">
422 |                         <div class="doc-icon" style="--icon-color: 247, 72, 72;"><p>PDF</p></div>
423 |                     </div>
424 |                     <p class="file-name">documt.pdf</p>
425 |                 </div>
426 |                 <div class="file">
427 |                     <div class="doc-icon-container">
428 |                         <div class="doc-icon" style="--icon-color: 116, 116, 116;"><p>TXT</p></div>
429 |                     </div>
430 |                     <p class="file-name">text.txt</p>
431 |                 </div>
432 |                 <div class="file">
433 |                     <div class="doc-icon-container">
434 |                         <div class="doc-icon" style="--icon-color: 116, 116, 116;"><p>.?</p></div>
435 |                     </div>
436 |                     <p class="file-name">file.unknown</p>
437 |                 </div>
438 |                 <div class="file">
439 |                     <div class="doc-icon-container">
440 |                         <div class="doc-icon" style="--icon-color: 190, 173, 16;"><p>ZIP</p></div>
441 |                     </div>
442 |                     <p class="file-name">file.zip</p>
443 |                 </div>
444 |                 <div class="file">
445 |                     <div class="doc-icon-container">
446 |                         <div class="doc-icon" style="--icon-color: 36, 230, 149;"><p>SVG</p></div>
447 |                     </div>
448 |                     <p class="file-name">image.svg</p>
449 |                 </div>
450 |                 <div class="file">
451 |                     <div class="doc-icon-container">
452 |                         <div class="doc-icon" style="--icon-color: 116, 116, 116;"><p>.?</p></div>
453 |                     </div>
454 |                     <p class="file-name">file.unknown</p>
455 |                 </div>
456 |                 <div class="file">
457 |                     <div class="doc-icon-container">
458 |                         <div class="doc-icon" style="--icon-color: 190, 173, 16;"><p>ZIP</p></div>
459 |                     </div>
460 |                     <p class="file-name">file.zip</p>
461 |                 </div>
462 |                 <div class="file">
463 |                     <div class="doc-icon-container">
464 |                         <div class="doc-icon" style="--icon-color: 36, 230, 149;"><p>SVG</p></div>
465 |                     </div>
466 |                     <p class="file-name">image.svg</p>
467 |                 </div>
468 |             </div>
469 |         </div>
470 |         <div class="folderEmpty">
471 |             <img src="./add-files-concept-illustration/2808349.jpg" class="" alt="">
472 |             <h5>Folder is empty!</h5>
473 |         </div>
474 | 
475 | 		<div id="contextMenu" class="context-menu" style="display: none">
476 | 			<ul>
477 | 				<li  onclick="openModel('rename')"><a>#<span>Rename</span></a></li>
478 | 				<li><a href="#">Element-2</a></li>
479 | 				<li><a href="#">Element-3</a></li>
480 | 				<li><a href="#">Element-4</a></li>
481 | 				<li><a href="#">Element-5</a></li>
482 | 				<li><a href="#">Element-6</a></li>
483 | 				<li><a href="#">Element-7</a></li>
484 | 			</ul>
485 | 		</div>
486 |         <div class="popup">
487 |             <div class="popup-bg"></div>
488 |             <div class="popup-content">
489 |                 <h1>Title</h1>
490 |                 <form action="" onsubmit="return false;">
491 |                     <!-- <input type="text" placeholder="Filename">
492 |                     <button>Save</button> -->
493 |                 </form>
494 |             </div>
495 |             <h1></h1>
496 |         </div>
497 |         <div class="toast-messages">
498 |             <!-- Toast messages will appear here! -->
499 |         </div>
500 | 		<style type="text/css">
501 |             .toast-messages{
502 |                 position: fixed;
503 |                 width: 400px;
504 |                 max-height: 98vh;
505 |                 overflow: hidden;
506 |                 overflow-y: auto;
507 |                 bottom:0 ;
508 |                 right:0;
509 |                 align-items: end;
510 |                 display: flex;
511 |                 flex-direction: column;
512 |                 padding: 1vh 2rem;
513 |              }
514 |             .toast-container {
515 |                 margin-bottom: 10px;
516 |                 background-color: white;
517 |                 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
518 |                 width: fit-content;
519 |                 min-width: 300px;
520 |                 border-radius: 10px;
521 |                 padding: 10px;
522 |                 display: flex;
523 |                 justify-content: space-between;
524 |                 min-height: 30px;
525 |                 align-items: center;
526 |                 opacity: 0;
527 |                 transition: 0.5s;
528 |             }
529 |             .toast-container.toast-sccess{
530 |                 background-color: rgb(50, 204, 153);
531 |             }
532 |             .toast-container.toast-sccess p,.toast-container.toast-sccess button{
533 |                 color: white;
534 |             }
535 |             .toast-container.toast-dnger{
536 |                 background-color: rgb(238, 107, 107);
537 |             }
538 |             .toast-container.toast-dnger p,.toast-container.toast-dnger button{
539 |                 color: white;
540 |             }
541 |             .toast-container.toast-inf p,.toast-container.toast-inf button{
542 |                 color: rgb(59, 59, 59);
543 |             }
544 |             .toast-container p {
545 |                 margin: 0;
546 |                 font-size: 15px;
547 |             }
548 |             .toast-container button {
549 |                 border: 0;
550 |                 background-color: transparent;
551 |                 cursor: pointer;
552 |                 border-radius: 50%;
553 |                 font-size: 16px;
554 |                 height: 30px;
555 |                 width: 30px;
556 |                 display: flex;
557 |                 justify-content: center;
558 |                 align-items: center;
559 |             }
560 |             .toast-container button:hover{
561 |                 background-color: rgba(0, 0, 0, 0.096);
562 |             }
563 |             .popup{
564 |                 position: fixed;
565 |                 inset: 0;
566 |                 z-index: 9;
567 |                 display: flex;
568 |                 justify-content: center;
569 |                 align-items: center;
570 |                 display: none;
571 |             }
572 |             .popup-bg{
573 |                 background-color: rgba(0, 0, 0, 0.377);
574 |                 z-index: -1;
575 |                 width: 100%;
576 |                 height: 100vh;
577 |                 position: absolute;
578 |             }
579 |             .popup-content{
580 |                 background-color: #f5f5f5;
581 |                 padding: 10px;
582 |                 border-radius: 15px;
583 |                 width: 300px;
584 |                 text-align: center;
585 |             }
586 |             .popup-content h1{
587 |                 font-size: 20px;
588 |                 margin: 10px 0;
589 |             }
590 |             .popup-content form{
591 |                 text-align: center;
592 |             }
593 |             .popup-content input{
594 |                 width: 290px;
595 |                 height: 30px;
596 |                 font-size: 14px;
597 |             }
598 |             .popup-content button{
599 |                 width: 60px;
600 |                 cursor: pointer;
601 |                 height: 30px;
602 |                 background-color: rgb(1, 87, 158);
603 |                 color: #f5f5f5;
604 |                 border: 0;
605 |                 font-size: 15px;
606 |                 border-radius: 7px;
607 |                 padding: 3px;
608 |                 margin: 10px;
609 |             }
610 |             .popup-content button:hover{
611 |                 background-color: rgb(10, 138, 100);
612 | 
613 |             }
614 | 			.context-menu {
615 | 				position: absolute;
616 | 				text-align: center;
617 | 				background: rgb(238, 238, 238);
618 |                 border-radius: 7px;
619 |                 overflow: hidden;
620 |                 box-shadow: 0px 0 10px rgba(95, 95, 95, 0.315);
621 |                 width: 180px;
622 | 			}
623 | 
624 | 			.context-menu ul {
625 | 				padding: 0px;
626 | 				margin: 0px;
627 | 				min-width: 150px;
628 | 				list-style: none;
629 | 			}
630 | 
631 | 			.context-menu ul li {
632 | 				padding-bottom: 7px;
633 | 				padding-top: 7px;
634 | 			}
635 | 
636 | 			.context-menu ul li a {
637 | 				text-decoration: none;
638 | 				color: black;
639 |                 display: flex;
640 |                 padding: 0 5px;
641 | 			}
642 | 
643 | 			.context-menu ul li:hover {
644 | 				background: darkgray;
645 | 			}
646 | 		</style>
647 | 		<script>
648 |             function resetContextMenu(){
649 |                 document.onclick = hideMenu;
650 |                 document.querySelectorAll(".file").forEach((val)=>val.oncontextmenu = rightClick);
651 |                 document.querySelectorAll(".folder").forEach((val)=>val.oncontextmenu = rightClick);
652 |                 document.querySelector(".filemanager-container-row").oncontextmenu = rightClick;
653 |             }
654 | 
655 | 			function hideMenu() {
656 | 				document.getElementById("contextMenu").style.display = "none";
657 | 			}
658 | 
659 | 			function rightClick(e) {
660 |                 e.target.click()
661 | 				e.preventDefault();
662 | 
663 | 				if (document.getElementById("contextMenu").style.display == "block"){
664 | 					hideMenu();
665 |                     rightClick(e);
666 |                 }
667 | 				else {
668 | 					let menu = document.getElementById("contextMenu");
669 |                     menu.style.display = "block";
670 |                     menu.style.left = e.pageX + "px";
671 |                     menu.style.top = e.pageY + "px";  
672 | 
673 |                     // let screenWidth = document.getElementsByClassName('filemanager-container-row')[0].offsetWidth;
674 |                     // let screenHeight = document.getElementsByClassName('filemanager-container-row')[0].offsetHeight;
675 |                     // console.log(e,screenWidth);
676 |                     // menu.style.display = "block";
677 |                     // if(screenWidth-180>= e.pageX){
678 |                     //     menu.style.left = e.pageX + "px";
679 |                     // }else{
680 |                     //     menu.style.left = screenWidth-(180+10) + "px";
681 |                     // }
682 |                     // if(screenHeight-menu.offsetHeight>= e.pageY){
683 |                     //     menu.style.top = e.pageY + "px";  
684 |                     // }else{
685 |                     //     menu.style.top = (screenHeight-menu.offsetHeight-10) + "px";
686 |                     // }
687 | 				}
688 | 			}
689 | 		</script>
690 |         <script src="./filemanager.js"></script>
691 | 	</body>
692 | </html>
693 | 


--------------------------------------------------------------------------------
/screenshots/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/addevin/filemanager/abdc1ac40e870efd9540839085dceea5fbcafe55/screenshots/ss1.png


--------------------------------------------------------------------------------