feat(folders): nested folder tree (max depth 2) + id-based mutations
- new storeDb.ts: DB+FS layer (folders w/ parent_id, videos w/ global id)
- depth cap: sub-folder cannot have children (enforced in createFolder)
- video id: editable anytime (changeVideoId), uniqueness via PK
- routes:
- public /folder/:topName[/:subName], /video/:topName[/:subName]/:videoId
- admin /op/folder/:topName[/:subName], id-based /op/folders/:id/*
and /op/videos/:id/* (rename/changeId/delete/save + idAvailable check)
- views: breadcrumb + subFolder grid; 플레이리스트 추가 button shows at 2단계
- client JS: id-based mutation endpoints, share URL data attribute,
in-site player pushes share URL to address bar
- store.ts slimmed to Account + readAccounts (FS layer moved to storeDb)
- pickIntId accepts numeric JSON bodies
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude
171
public/folder.js
171
public/folder.js
@@ -1,74 +1,171 @@
|
||||
(function () {
|
||||
var folder = (window.__OP__ || {}).folder
|
||||
var ctxMenu = document.getElementById('ctxMenu')
|
||||
var targetId = null
|
||||
var targetTitle = null
|
||||
var op = window.__OP__ || { folderId: null, folderPath: [], isSubFolder: false }
|
||||
var folderPathEnc = (op.folderPath || []).map(encodeURIComponent).join('/')
|
||||
|
||||
function showCtx(x, y) {
|
||||
ctxMenu.style.left = x + 'px'
|
||||
ctxMenu.style.top = y + 'px'
|
||||
ctxMenu.hidden = false
|
||||
// ── 영상 컨텍스트 메뉴 ───────────────────────────────────────────────
|
||||
var videoCtxMenu = document.getElementById('ctxMenu')
|
||||
var videoTargetId = null
|
||||
var videoTargetTitle = null
|
||||
var videoTargetShareUrl = null
|
||||
|
||||
function showVideoCtx(x, y) {
|
||||
videoCtxMenu.style.left = x + 'px'
|
||||
videoCtxMenu.style.top = y + 'px'
|
||||
videoCtxMenu.hidden = false
|
||||
}
|
||||
function hideCtx() { ctxMenu.hidden = true }
|
||||
function hideVideoCtx() { videoCtxMenu.hidden = true }
|
||||
|
||||
document.querySelectorAll('.adminVideo').forEach(function (card) {
|
||||
card.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault()
|
||||
targetId = card.getAttribute('data-id')
|
||||
targetTitle = card.getAttribute('data-title')
|
||||
showCtx(e.clientX, e.clientY)
|
||||
videoTargetId = card.getAttribute('data-id')
|
||||
videoTargetTitle = card.getAttribute('data-title')
|
||||
videoTargetShareUrl = card.getAttribute('data-share-url')
|
||||
showVideoCtx(e.clientX, e.clientY)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!ctxMenu.contains(e.target)) hideCtx()
|
||||
})
|
||||
|
||||
ctxMenu.addEventListener('click', function (e) {
|
||||
videoCtxMenu.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest('button')
|
||||
if (!btn) return
|
||||
if (!btn || !videoTargetId) return
|
||||
var action = btn.getAttribute('data-action')
|
||||
if (action === 'edit') {
|
||||
location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(targetId)
|
||||
location.href = '/op/folder/' + folderPathEnc + '/video/editor?id=' + encodeURIComponent(videoTargetId)
|
||||
} else if (action === 'copyUrl') {
|
||||
copyVideoUrl(targetId)
|
||||
copyUrl(location.origin + videoTargetShareUrl)
|
||||
} else if (action === 'rename') {
|
||||
var t = window.prompt('새 영상 제목', targetTitle)
|
||||
if (t && t !== targetTitle) {
|
||||
fetch('/op/folder/' + encodeURIComponent(folder) + '/video/rename', {
|
||||
var t = window.prompt('새 영상 제목', videoTargetTitle)
|
||||
if (t && t !== videoTargetTitle) {
|
||||
fetch('/op/videos/' + encodeURIComponent(videoTargetId) + '/rename', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ id: targetId, title: t })
|
||||
body: JSON.stringify({ title: t })
|
||||
}).then(function (r) { return r.json() }).then(function (j) {
|
||||
if (j.ok) location.reload()
|
||||
else alert(j.message || '이름 변경 실패')
|
||||
})
|
||||
}
|
||||
} else if (action === 'delete') {
|
||||
if (window.confirm('"' + targetTitle + '" 영상을 정말 삭제할까요?')) {
|
||||
fetch('/op/folder/' + encodeURIComponent(folder) + '/video/delete', {
|
||||
} else if (action === 'changeId') {
|
||||
var newId = window.prompt('새 영상 ID (영문/숫자/_/-, 1~64자)', videoTargetId)
|
||||
if (newId && newId !== videoTargetId) {
|
||||
fetch('/op/videos/' + encodeURIComponent(videoTargetId) + '/changeId', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ id: targetId })
|
||||
body: JSON.stringify({ newId: newId })
|
||||
}).then(function (r) { return r.json() }).then(function (j) {
|
||||
if (j.ok) location.reload()
|
||||
else alert(j.message || 'ID 변경 실패')
|
||||
})
|
||||
}
|
||||
} else if (action === 'delete') {
|
||||
if (window.confirm('"' + videoTargetTitle + '" 영상을 정말 삭제할까요?')) {
|
||||
fetch('/op/videos/' + encodeURIComponent(videoTargetId) + '/delete', {
|
||||
method: 'POST'
|
||||
}).then(function (r) { return r.json() }).then(function (j) {
|
||||
if (j.ok) location.reload()
|
||||
else alert(j.message || '삭제 실패')
|
||||
})
|
||||
}
|
||||
}
|
||||
hideCtx()
|
||||
hideVideoCtx()
|
||||
})
|
||||
|
||||
function copyVideoUrl(id) {
|
||||
var url = location.origin + '/file/video/' + encodeURIComponent(id)
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(url).then(function () {
|
||||
flashToast('주소가 복사되었습니다.')
|
||||
}, function () {
|
||||
fallbackCopy(url)
|
||||
// ── 하위 폴더 컨텍스트 메뉴 (rename / delete) ────────────────────────
|
||||
var folderCtxMenu = document.getElementById('folderCtxMenu')
|
||||
var folderTargetId = null
|
||||
var folderTargetName = null
|
||||
|
||||
function showFolderCtx(x, y) {
|
||||
folderCtxMenu.style.left = x + 'px'
|
||||
folderCtxMenu.style.top = y + 'px'
|
||||
folderCtxMenu.hidden = false
|
||||
}
|
||||
function hideFolderCtx() { folderCtxMenu.hidden = true }
|
||||
|
||||
document.querySelectorAll('#subFolderGrid .adminFolder').forEach(function (card) {
|
||||
card.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault()
|
||||
folderTargetId = card.getAttribute('data-folder-id')
|
||||
folderTargetName = card.getAttribute('data-name')
|
||||
showFolderCtx(e.clientX, e.clientY)
|
||||
})
|
||||
})
|
||||
|
||||
if (folderCtxMenu) {
|
||||
folderCtxMenu.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest('button')
|
||||
if (!btn || !folderTargetId) return
|
||||
var action = btn.getAttribute('data-action')
|
||||
if (action === 'rename') {
|
||||
var newName = window.prompt('새 폴더 이름', folderTargetName)
|
||||
if (newName && newName !== folderTargetName) {
|
||||
fetch('/op/folders/' + encodeURIComponent(folderTargetId) + '/rename', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ newName: newName })
|
||||
}).then(function (r) { return r.json() }).then(function (j) {
|
||||
if (j.ok) location.reload()
|
||||
else alert(j.message || '이름 변경 실패')
|
||||
})
|
||||
}
|
||||
} else if (action === 'delete') {
|
||||
if (window.confirm('"' + folderTargetName + '" 폴더를 정말 삭제할까요? 안의 영상이 모두 사라집니다.')) {
|
||||
fetch('/op/folders/' + encodeURIComponent(folderTargetId) + '/delete', {
|
||||
method: 'POST'
|
||||
}).then(function (r) { return r.json() }).then(function (j) {
|
||||
if (j.ok) location.reload()
|
||||
else alert(j.message || '삭제 실패')
|
||||
})
|
||||
}
|
||||
}
|
||||
hideFolderCtx()
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (videoCtxMenu && !videoCtxMenu.contains(e.target)) hideVideoCtx()
|
||||
if (folderCtxMenu && !folderCtxMenu.contains(e.target)) hideFolderCtx()
|
||||
})
|
||||
|
||||
// ── 하위 폴더 추가 모달 ──────────────────────────────────────────────
|
||||
var addSubBtn = document.getElementById('addSubFolderBtn')
|
||||
if (addSubBtn) {
|
||||
var subModal = document.getElementById('addSubFolderModal')
|
||||
var subInput = document.getElementById('addSubFolderInput')
|
||||
var subCancel = document.getElementById('addSubFolderCancel')
|
||||
var subConfirm = document.getElementById('addSubFolderConfirm')
|
||||
|
||||
function openSubModal() {
|
||||
subModal.hidden = false; subInput.value = ''
|
||||
setTimeout(function () { subInput.focus() }, 0)
|
||||
}
|
||||
function closeSubModal() { subModal.hidden = true }
|
||||
addSubBtn.addEventListener('click', openSubModal)
|
||||
subCancel.addEventListener('click', closeSubModal)
|
||||
subModal.addEventListener('click', function (e) { if (e.target === subModal) closeSubModal() })
|
||||
subInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') subConfirm.click() })
|
||||
subConfirm.addEventListener('click', function () {
|
||||
var name = subInput.value.trim()
|
||||
if (!name) return
|
||||
fetch('/op/folders', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ name: name, parentId: op.folderId })
|
||||
}).then(function (r) { return r.json() }).then(function (j) {
|
||||
if (j.ok) location.reload()
|
||||
else alert(j.message || '폴더 생성 실패')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── 유틸 ──────────────────────────────────────────────────────────
|
||||
function copyUrl(text) {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(function () {
|
||||
flashToast('주소가 복사되었습니다.')
|
||||
}, function () { fallbackCopy(text) })
|
||||
} else {
|
||||
fallbackCopy(url)
|
||||
fallbackCopy(text)
|
||||
}
|
||||
}
|
||||
function fallbackCopy(text) {
|
||||
|
||||
Reference in New Issue
Block a user