gentelella/dist/js/file-manager-21QIZOPH.js

Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.

import{t as e}from"./toast-DgCSlJPv.js";import{n as t}from"./menus-BVcs0GJR.js";import{n}from"./modal-MTuCfURV.js";var r=[{id:"root",name:"My Drive",parent:null,icon:"drive"},{id:"projects",name:"Projects",parent:"root",icon:"folder"},{id:"design",name:"Design",parent:"projects",icon:"folder"},{id:"eng",name:"Engineering",parent:"projects",icon:"folder"},{id:"marketing",name:"Marketing",parent:"root",icon:"folder"},{id:"shared",name:"Shared with me",parent:null,icon:"shared"},{id:"starred",name:"Starred",parent:null,icon:"starred"},{id:"trash",name:"Trash",parent:null,icon:"trash"}],a={drive:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 6l4-4h4l4 4v8H2V6z"/></svg>',folder:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4a1 1 0 011-1h3l2 2h5a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/></svg>',shared:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="6" r="2.5"/><circle cx="11" cy="6" r="2"/><path d="M1 14a5 5 0 0110 0M11 9a4 4 0 014 5"/></svg>',starred:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 5 5 .5-4 3.5 1 5-4-2.5-4 2.5 1-5-4-3.5 5-.5z"/></svg>',trash:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>'},i={pdf:{color:"var(--red)",bg:"var(--red-lt)"},doc:{color:"var(--blue)",bg:"var(--blue-lt)"},xls:{color:"var(--green)",bg:"var(--green-lt)"},fig:{color:"var(--purple)",bg:"var(--purple-lt)"},img:{color:"var(--yellow)",bg:"var(--yellow-lt)"},zip:{color:"var(--text-secondary)",bg:"var(--bg-surface-secondary)"},video:{color:"var(--azure)",bg:"var(--azure-lt)"},code:{color:"var(--cyan)",bg:"var(--cyan-lt)"}},d=1,o=[{id:d++,parent:"root",type:"folder",name:"Projects",modified:"Apr 28, 2026",size:"—",starred:!1},{id:d++,parent:"root",type:"folder",name:"Marketing",modified:"Apr 27, 2026",size:"—",starred:!1},{id:d++,parent:"root",type:"pdf",name:"Q2 Plan.pdf",modified:"Apr 28, 2026",size:"2.4 MB",starred:!0},{id:d++,parent:"root",type:"doc",name:"Onboarding Guide.docx",modified:"Apr 26, 2026",size:"156 KB",starred:!1},{id:d++,parent:"root",type:"xls",name:"Q1 Metrics.xlsx",modified:"Apr 22, 2026",size:"892 KB",starred:!0},{id:d++,parent:"root",type:"img",name:"team-photo.jpg",modified:"Apr 18, 2026",size:"4.2 MB",starred:!1},{id:d++,parent:"projects",type:"folder",name:"Design",modified:"Apr 28, 2026",size:"—",starred:!1},{id:d++,parent:"projects",type:"folder",name:"Engineering",modified:"Apr 28, 2026",size:"—",starred:!1},{id:d++,parent:"projects",type:"doc",name:"Sprint Plan.md",modified:"Apr 28, 2026",size:"12 KB",starred:!1},{id:d++,parent:"design",type:"fig",name:"Dashboard Mockups.fig",modified:"Apr 28, 2026",size:"38 MB",starred:!0},{id:d++,parent:"design",type:"fig",name:"Component Library.fig",modified:"Apr 27, 2026",size:"24 MB",starred:!0},{id:d++,parent:"design",type:"img",name:"logo-final.png",modified:"Apr 25, 2026",size:"420 KB",starred:!1},{id:d++,parent:"design",type:"img",name:"brand-guide.pdf",modified:"Apr 20, 2026",size:"3.1 MB",starred:!1},{id:d++,parent:"eng",type:"code",name:"api-schema.json",modified:"Apr 28, 2026",size:"48 KB",starred:!1},{id:d++,parent:"eng",type:"code",name:"deployment.yaml",modified:"Apr 28, 2026",size:"8 KB",starred:!1},{id:d++,parent:"eng",type:"doc",name:"Architecture.md",modified:"Apr 26, 2026",size:"34 KB",starred:!1},{id:d++,parent:"eng",type:"zip",name:"archive-q1.zip",modified:"Apr 12, 2026",size:"184 MB",starred:!1},{id:d++,parent:"marketing",type:"video",name:"Product Launch.mp4",modified:"Apr 27, 2026",size:"128 MB",starred:!1},{id:d++,parent:"marketing",type:"doc",name:"Press Release.docx",modified:"Apr 25, 2026",size:"89 KB",starred:!1},{id:d++,parent:"marketing",type:"xls",name:"Campaign Budget.xlsx",modified:"Apr 23, 2026",size:"124 KB",starred:!1}],s="root",l="grid";function c(e){return String(e).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]))}function p(e){return r.find(t=>t.id===e)}function m(){const e="starred"===s?o.filter(e=>e.starred&&"folder"!==e.type):"shared"===s?o.filter(e=>"marketing"===e.parent):"trash"===s?[]:(r=s,o.filter(e=>e.parent===r)),t=document.getElementById("fm-empty"),n=document.getElementById("fm-grid");var r;if(!e.length)return n.innerHTML="",void(t.hidden=!1);t.hidden=!0,n.className=`fm-grid view-${l}`,n.innerHTML=e.map(e=>{const t="folder"===e.type,n=t?null:i[e.type]||i.zip;return`\n      <button type="button" class="fm-item${e.starred?" starred":""}" data-id="${e.id}" data-type="${e.type}">\n        <div class="fm-item-icon" style="${t?"":`background:${n.bg};color:${n.color}`}">\n          ${t?'<svg width="32" height="32" viewBox="0 0 32 32" fill="var(--primary-lt)" stroke="var(--primary)" stroke-width="1.2"><path d="M4 8a2 2 0 012-2h6l3 3h11a2 2 0 012 2v13a2 2 0 01-2 2H6a2 2 0 01-2-2V8z"/></svg>':`<span class="ext">${function(e){if("folder"===e.type)return"";const t=e.name.lastIndexOf(".");return t>-1?e.name.slice(t+1).toUpperCase():e.type.toUpperCase()}(e)}</span>`}\n        </div>\n        <div class="fm-item-name">${c(e.name)}</div>\n        <div class="fm-item-meta">${e.size} · ${e.modified}</div>\n        <span class="fm-star${e.starred?" on":""}" data-star="${e.id}" aria-label="${e.starred?"Unstar":"Star"}">\n          <svg width="13" height="13" viewBox="0 0 16 16" fill="${e.starred?"currentColor":"none"}" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 5 5 .5-4 3.5 1 5-4-2.5-4 2.5 1-5-4-3.5 5-.5z"/></svg>\n        </span>\n        <button type="button" class="fm-item-menu" data-menu="${e.id}" aria-label="More options">\n          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="3" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="13" r="1.2"/></svg>\n        </button>\n      </button>\n    `}).join("")}function u(){!function(){const e=r.filter(e=>null===e.parent).map(e=>{const t=r.filter(t=>t.parent===e.id);return`\n      <div class="tree-group">\n        <button type="button" class="tree-link${e.id===s?" active":""}" data-id="${e.id}">\n          ${a[e.icon]||a.folder}\n          <span>${c(e.name)}</span>\n        </button>\n        ${t.length?`<div class="tree-subs">${t.map(e=>{const t=r.filter(t=>t.parent===e.id);return`\n            <button type="button" class="tree-link tree-sub${e.id===s?" active":""}" data-id="${e.id}">\n              ${a[e.icon]||a.folder}\n              <span>${c(e.name)}</span>\n            </button>\n            ${t.map(e=>`\n              <button type="button" class="tree-link tree-sub-sub${e.id===s?" active":""}" data-id="${e.id}">\n                ${a[e.icon]||a.folder}\n                <span>${c(e.name)}</span>\n              </button>\n            `).join("")}\n          `}).join("")}</div>`:""}\n      </div>\n    `}).join("");document.getElementById("fm-tree").innerHTML=e}(),function(){const e=function(){const e=[];let t=p(s);for(;t;)e.unshift(t),t=t.parent?p(t.parent):null;return e}();document.getElementById("fm-breadcrumb").innerHTML=e.map((t,n)=>`${n>0?'<span class="sep" aria-hidden="true">›</span>':""}<button type="button" class="bc-link${n===e.length-1?" current":""}" data-id="${t.id}">${c(t.name)}</button>`).join("")}(),m()}function f(e){s=e,u()}function v(t){const n=o.findIndex(e=>e.id===t);if(n>-1){const t=o[n];o.splice(n,1),u(),e(`Moved to trash: ${t.name}`)}}function g(t){const r=o.find(e=>e.id===t);r&&n({title:"Rename",body:`\n      <form class="modal-form" novalidate>\n        <div class="modal-form-row">\n          <label for="rn-name">Name</label>\n          <input type="text" id="rn-name" name="name" value="${c(r.name)}" autocomplete="off" required>\n        </div>\n      </form>\n    `,actions:[{label:"Cancel",variant:"outline"},{label:"Save",variant:"primary",action:({body:t})=>{const n=t.querySelector("input").value.trim();return n?(r.name=n,m(),e(`Renamed to ${n}`,{variant:"success"}),!0):(e("Name is required",{variant:"warning"}),!1)}}]})}function y(){document.querySelector(".file-manager")&&(u(),document.getElementById("fm-tree").addEventListener("click",e=>{const t=e.target.closest(".tree-link");t&&(e.stopPropagation(),f(t.dataset.id))}),document.getElementById("fm-breadcrumb").addEventListener("click",e=>{const t=e.target.closest(".bc-link");t&&(e.stopPropagation(),f(t.dataset.id))}),document.getElementById("fm-grid").addEventListener("click",n=>{const a=n.target.closest("[data-star]");if(a){n.stopPropagation();const e=parseInt(a.dataset.star,10),t=o.find(t=>t.id===e);return void(t&&(t.starred=!t.starred,m()))}const i=n.target.closest("[data-menu]");if(i){n.stopPropagation(),n.preventDefault();const r=parseInt(i.dataset.menu,10),a=o.find(e=>e.id===r);if(!a)return;return void t(i,"folder"===a.type?[{label:"Open",action:()=>f(p(a.name.toLowerCase())?.id||s)},{label:"Rename",action:()=>g(r)},"-",{label:"Delete",action:()=>v(r)}]:[{label:"Download",action:()=>e(`Downloading: ${a.name}`)},{label:"Share",action:()=>e(`Share link copied: ${a.name}`,{variant:"success"})},{label:"Rename",action:()=>g(r)},{label:a.starred?"Unstar":"Star",action:()=>{a.starred=!a.starred,m()}},"-",{label:"Delete",action:()=>v(r)}])}const d=n.target.closest(".fm-item");if(d)if("folder"===d.dataset.type){const e=o.find(e=>e.id===parseInt(d.dataset.id,10));if(!e)return;const t=r.find(t=>t.parent===e.parent&&t.name===e.name)||r.find(t=>t.name===e.name);t&&f(t.id)}else{const t=o.find(e=>e.id===parseInt(d.dataset.id,10));t&&e(`Preview: ${t.name}`)}}),document.getElementById("view-grid")?.addEventListener("click",()=>{l="grid",document.getElementById("view-grid").classList.add("active"),document.getElementById("view-list").classList.remove("active"),m()}),document.getElementById("view-list")?.addEventListener("click",()=>{l="list",document.getElementById("view-list").classList.add("active"),document.getElementById("view-grid").classList.remove("active"),m()}),document.getElementById("upload-btn")?.addEventListener("click",t=>{t.stopPropagation(),n({title:"Upload files",body:'\n      <div class="upload-zone">\n        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>\n        <div class="upload-title">Drag files here, or click to browse</div>\n        <div class="upload-meta">Max file size 50 MB. PDF, DOCX, XLSX, PNG, JPG, ZIP supported.</div>\n        <input type="file" multiple style="display:none">\n      </div>\n    ',actions:[{label:"Cancel",variant:"outline"},{label:"Upload demo file",variant:"primary",action:()=>(o.push({id:d++,parent:s,type:"pdf",name:`New upload ${Date.now()}.pdf`,modified:"just now",size:"1.2 MB",starred:!1}),m(),e("File uploaded",{variant:"success"}),!0)}]})}),document.getElementById("new-folder-btn")?.addEventListener("click",t=>{t.stopPropagation(),n({title:"New folder",body:'<form class="modal-form" novalidate><div class="modal-form-row"><label for="nf-name">Folder name</label><input type="text" id="nf-name" name="name" placeholder="My folder" required autofocus></div></form>',actions:[{label:"Cancel",variant:"outline"},{label:"Create",variant:"primary",action:({body:t})=>{const n=t.querySelector("input").value.trim();return n?(o.push({id:d++,parent:s,type:"folder",name:n,modified:"just now",size:"—",starred:!1}),m(),e(`Folder created: ${n}`,{variant:"success"}),!0):(e("Folder name is required",{variant:"warning"}),!1)}}]})}))}export{y as initFileManager};