From a9ecd64c792410d265b8ce71c27eaf2b084f81b4 Mon Sep 17 00:00:00 2001 From: xygodcyx <1323943635@qq.com> Date: Sat, 25 May 2024 22:52:28 +0800 Subject: [PATCH] page --- index.html | 50 ++++---- web/css/leftNav.css | 31 +++-- web/js/index.js | 284 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 308 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index c9824f4a..a502c60b 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,13 @@
-
+
- -

-

过滤器

+

分类

@@ -81,13 +82,14 @@

@@ -97,7 +99,7 @@

图标 - (999) + (0)
diff --git a/web/css/leftNav.css b/web/css/leftNav.css index 22d7f05d..babdf59f 100644 --- a/web/css/leftNav.css +++ b/web/css/leftNav.css @@ -15,6 +15,7 @@ -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; + /* transition-delay: 0.02s; */ } @@ -24,13 +25,17 @@ width: var(--leftNavWidth); max-width: var(--leftNavWidth); - transition-delay: 0.02s; + /* transition-delay: 0.2s; */ + transition-delay: 0s; + } -.home .leftNav:hover { +.home .leftNav:focus { width: var(--leftNavWidth); max-width: var(--leftNavWidth); - transition-delay: 0.02s; + /* transition-delay: 0.2s; */ + transition-delay: 0s; + } .home .leftNav.show .logo { @@ -43,7 +48,7 @@ -o-transform: scale(4.6); } -.home .leftNav:hover .logo { +.home .leftNav:focus .logo { /*width: 200px; */ transform: scale(4.6); @@ -91,11 +96,11 @@ opacity: 1; } -.home .leftNav:hover .top .search .small { +.home .leftNav:focus .top .search .small { font-size: 0px; } -.home .leftNav:hover .top .search .searchBig { +.home .leftNav:focus .top .search .searchBig { opacity: 1; } @@ -166,17 +171,17 @@ } -.home .leftNav:hover .label { +.home .leftNav:focus .label { font-size: 14px; } -.home .leftNav:hover .title { +.home .leftNav:focus .title { opacity: 1; font-size: 16px; } -.home .leftNav:hover .line { +.home .leftNav:focus .line { width: var(--lineWidth); transition-delay: 0s; } @@ -225,19 +230,19 @@ opacity: 1; } -.home .leftNav:hover .bottom { +.home .leftNav:focus .bottom { opacity: 1; } -.home .leftNav:hover .bottom .about .navItem>* { +.home .leftNav:focus .bottom .about .navItem>* { opacity: 1; } -.home .leftNav:hover .bottom .about .navItem>a { +.home .leftNav:focus .bottom .about .navItem>a { font-size: 16px; } -.home .leftNav:hover .bottom .about .navItem .icon { +.home .leftNav:focus .bottom .about .navItem .icon { opacity: 1; } diff --git a/web/js/index.js b/web/js/index.js index 2f485121..1f1d95ba 100644 --- a/web/js/index.js +++ b/web/js/index.js @@ -3,9 +3,17 @@ * @type {Array} iconData - iconData */ let iconData; +let folders; +let file; +let appData; let lastData; +let allIconItemData; +let allFolderIconItemData; +let allFileIconItemData; let type; -function convertConfigToData(config) { +let curPage = 'home'; +let noShowBackBtnPage = ['home', 'folders', 'file', 'company', 'app']; +const convertConfigToIconData = (config) => { const data = []; for (const company in config) { @@ -32,7 +40,6 @@ function convertConfigToData(config) { url: '#', name: file.name, }; - console.log(fileData); appData.push(fileData); }); @@ -47,20 +54,191 @@ function convertConfigToData(config) { } return data; -} +}; +const convertFoldersToFoldersData = (folders) => { + const data = []; + + for (const folder in folders) { + let fileList = folders[folder]._files; + + const folderData = []; + + fileList.forEach((file) => { + const fileData = { + pic: file.path, + tip: file.name, + url: '#', + name: file.name, + }; + folderData.push(fileData); + }); + + data.push({ + [folder]: folderData, + }); + } + + return data; +}; +const convertConfigToFileData = (config) => { + const data = []; + + for (const company in config) { + if (company === 'folders') { + continue; + } + const apps = []; + + for (const app in config[company]) { + let fileList; + if (config[company][app].FileTypeIcon) { + if (config[company][app].FileTypeIcon._files) + fileList = config[company][app].FileTypeIcon._files; + } else { + continue; + } + const appData = []; + + fileList.forEach((file) => { + const fileData = { + pic: file.path, + tip: file.name, + url: '#', + name: file.name, + }; + appData.push(fileData); + }); + + apps.push({ + [app]: appData, + }); + } + + data.push({ + [company]: apps, + }); + } + + return data; +}; +const convertConfigToAppData = (config) => { + const data = []; + + for (const company in config) { + if (company === 'folders') { + continue; + } + const apps = []; + + for (const app in config[company]) { + let fileList; + if (config[company][app].FileTypeIcon) { + if (config[company][app].FileTypeIcon._files) + fileList = config[company][app].FileTypeIcon._files; + } else { + if (config[company][app].AppIcon._files) + fileList = config[company][app].AppIcon._files; + } + const appData = []; + + fileList.forEach((file) => { + const fileData = { + pic: file.path, + tip: file.name, + url: '#', + name: file.name, + }; + appData.push(fileData); + }); + + apps.push({ + [app]: appData, + }); + } + + data.push(...apps); + } + + return data; +}; document.addEventListener('DOMContentLoaded', function () { $.getJSON('../../config.json', function (_config) { //data 代表读取到的json中的数据 - iconData = convertConfigToData(_config); + iconData = convertConfigToIconData(_config); + folders = convertFoldersToFoldersData(_config['folders']); + file = convertConfigToFileData(_config); + appData = convertConfigToAppData(_config); + allIconItemData = extractData(iconData, true); + allFolderIconItemData = extractData(folders, true); + allFileIconItemData = extractData(file, true); + allIconItemData.push(...allFolderIconItemData); doms.sum.innerText = `(${countSpecificTypeObjects(iconData)})`; doms.sum.style.opacity = 1; - createIconWrapElement(iconData); + // createIconWrapElement(iconData); + createHomePage(); }); }); +let curLeftNavStatus = true; +const toggleLeftNav = () => { + curLeftNavStatus = !curLeftNavStatus; + curLeftNavStatus ? showLeftNav() : hideLeftNav(); +}; +const showLeftNav = () => { + curLeftNavStatus = true; + doms.leftNav.classList.remove('hide'); + doms.leftNav.classList.remove('show'); + doms.leftNav.classList.add('show'); +}; +const hideLeftNav = () => { + curLeftNavStatus = false; + doms.leftNav.classList.remove('hide'); + doms.leftNav.classList.remove('show'); + doms.leftNav.classList.add('hide'); +}; const doms = { + /** + * inputIcon + * @type {HTMLSpanElement} inputIcon - inputIcon + */ + inputIcon: document.querySelector('.inputIcon'), + /** + * small + * @type {HTMLInputElement} small - small + */ + small: document.querySelector('.small'), + /** + * control + * @type {HTMLDivElement} control - control + */ + control: document.querySelector('.control'), + /** + * mainHome + * @type {HTMLLIElement} mainHome - mainHome + */ + mainHome: document.querySelector('.mainHome'), + /** + * fileBook + * @type {HTMLLIElement} fileBook - fileBook + */ + folders: document.querySelector('.folders'), + /** + * file + * @type {HTMLLIElement} file - file + */ + file: document.querySelector('.file'), + /** + * company + * @type {HTMLLIElement} company - company + */ + company: document.querySelector('.company'), + /** + * app + * @type {HTMLLIElement} app - app + */ + app: document.querySelector('.app'), /** * sum - * @type {HTMLInputElement} sum - sum + * @type {HTMLLIElement} sum - sum */ sum: document.querySelector('.mainContent .sum'), /** @@ -78,11 +256,6 @@ const doms = { * @type {HTMLDivElement} content - content */ content: document.querySelector('.mainContent .content'), - /** - * iconWrap - * @type {HTMLDivElement} iconWrap - iconWrap - */ - iconWrap: document.querySelector('.mainContent .iconWrap'), /** * back * @type {HTMLDivElement} back - back @@ -90,25 +263,56 @@ const doms = { back: document.querySelector('.mainContent .back'), }; let inputHasFocus = false; + +const search = () => {}; + +doms.inputIcon.addEventListener('click', (e) => { + search(); +}); + +doms.small.addEventListener('click', (e) => { + showLeftNav(); + doms.searchInput.focus(); +}); + +doms.control.addEventListener('click', (e) => { + toggleLeftNav(); +}); +doms.mainHome.addEventListener('click', (e) => { + createHomePage(); +}); +doms.folders.addEventListener('click', (e) => { + createFoldersPage(); +}); +doms.file.addEventListener('click', (e) => { + createFilePage(); +}); +doms.company.addEventListener('click', (e) => { + createCompanyPage(); +}); +doms.app.addEventListener('click', (e) => { + createAppPage(); +}); doms.searchInput.addEventListener('focusin', (e) => { inputHasFocus = true; - doms.leftNav.classList.add('show'); + // doms.leftNav.classList.add('show'); }); doms.searchInput.addEventListener('focusout', (e) => { inputHasFocus = false; - doms.leftNav.classList.remove('show'); + // doms.leftNav.classList.remove('show'); }); function extractData( obj, - targetType = 'tip', + more = false, targetCount = 7, + targetType = 'tip', extractedData = [] ) { // Helper function to recursively traverse the object function traverse(obj) { // Check if the target count has been reached - if (extractedData.length === targetCount) { + if (extractedData.length === targetCount && !more) { return; } @@ -128,8 +332,11 @@ function extractData( // Start traversing the object traverse(obj); - - return extractedData.slice(0, targetCount); // Return only the required number of extracted data + if (!more) { + return extractedData.slice(0, targetCount); // Return only the required number of extracted data + } else { + return extractedData; + } } function countSpecificTypeObjects(obj, targetType = 'tip') { @@ -150,6 +357,38 @@ function countSpecificTypeObjects(obj, targetType = 'tip') { return count; } + +const createHomePage = () => { + curPage = 'home'; + createIconItemElement(allIconItemData); + doms.sum.innerText = `(${countSpecificTypeObjects(allIconItemData)})`; + hideBack(); +}; +const createFoldersPage = () => { + curPage = 'folders'; + createIconItemElement(allFolderIconItemData); + doms.sum.innerText = `(${countSpecificTypeObjects(allFolderIconItemData)})`; + hideBack(); +}; +const createFilePage = () => { + curPage = 'file'; + createIconItemElement(allFileIconItemData); + doms.sum.innerText = `(${countSpecificTypeObjects(allFileIconItemData)})`; + hideBack(); +}; +const createCompanyPage = () => { + curPage = 'company'; + createIconWrapElement(iconData); + doms.sum.innerText = `(${countSpecificTypeObjects(iconData)})`; + hideBack(); +}; + +const createAppPage = () => { + curPage = 'app'; + createAppElement(appData); + doms.sum.innerText = `(${countSpecificTypeObjects(appData)})`; + hideBack(); +}; const createIconWrapElement = (what) => { doms.content.innerHTML = ''; what.forEach((data) => { @@ -187,10 +426,10 @@ const createIconWrapElement = (what) => { iconWrapContent.insertBefore(bigIcon, smallIconWrap); } } - console.log(data); iconWrapContent.addEventListener('click', () => { lastData = what; type = 'wrap'; + curPage = 'canShowBack'; createAppElement(data[companyName]); }); }); @@ -200,7 +439,6 @@ const createIconWrapElement = (what) => { }; const createAppElement = (data = []) => { - console.log(data); doms.content.innerHTML = ''; data.forEach((d) => { const companyName = Object.keys(d)[0]; @@ -244,11 +482,14 @@ const createAppElement = (data = []) => { }); }); showBack(); + console.log(curPage); + if (noShowBackBtnPage.includes(curPage)) { + hideBack(); + } doms.content.classList.remove('showIconItem'); doms.content.classList.add('showIconWrap'); }; const createIconItemElement = (data) => { - console.log(data); doms.content.innerHTML = ''; data.forEach((d) => { const iconItem = document.createElement('div'); @@ -260,6 +501,9 @@ const createIconItemElement = (data) => { doms.content.appendChild(iconItem); }); showBack(); + // if (!noShowBackBtnPage.includes(curPage)) { + // showBack(); + // } doms.content.classList.remove('showIconWrap'); doms.content.classList.add('showIconItem'); };