From 9343afe83136b4e1a23bad813adb5f9cf813604a Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 11 May 2023 19:32:05 +0800 Subject: [PATCH] feat: add catalog demo --- index.html | 12 +++++ src/assets/images/catalog.svg | 1 + src/editor/dataset/enum/Editor.ts | 3 +- src/editor/index.ts | 5 +- src/main.ts | 61 +++++++++++++++++++-- src/style.css | 88 ++++++++++++++++++++++++++++++- src/utils/index.ts | 12 +++++ 7 files changed, 175 insertions(+), 7 deletions(-) create mode 100644 src/assets/images/catalog.svg create mode 100644 src/utils/index.ts diff --git a/index.html b/index.html index 7289ad9..c8491aa 100644 --- a/index.html +++ b/index.html @@ -303,9 +303,21 @@ +
+
+ 目录 +
+ +
+
+
+
+
+ +
diff --git a/src/assets/images/catalog.svg b/src/assets/images/catalog.svg new file mode 100644 index 0000000..90d45c2 --- /dev/null +++ b/src/assets/images/catalog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/dataset/enum/Editor.ts b/src/editor/dataset/enum/Editor.ts index 74af9ea..7d1823f 100644 --- a/src/editor/dataset/enum/Editor.ts +++ b/src/editor/dataset/enum/Editor.ts @@ -4,7 +4,8 @@ export enum EditorComponent { MAIN = 'main', FOOTER = 'footer', CONTEXTMENU = 'contextmenu', - POPUP = 'popup' + POPUP = 'popup', + CATALOG = 'catalog' } export enum EditorContext { diff --git a/src/editor/index.ts b/src/editor/index.ts index 97e2bbb..551bbeb 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -42,6 +42,7 @@ import { ITitleOption } from './interface/Title' import { defaultTitleOption } from './dataset/constant/Title' import { TitleLevel } from './dataset/enum/Title' import { ListStyle, ListType } from './dataset/enum/List' +import { ICatalog, ICatalogItem } from './interface/Catalog' export default class Editor { @@ -216,5 +217,7 @@ export type { IWatermark, INavigateInfo, IBlock, - ILang + ILang, + ICatalog, + ICatalogItem } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 24a6e11..0982b92 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,10 +1,11 @@ import { data, options } from './mock' import './style.css' import prism from 'prismjs' -import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, IElement, KeyMap, ListStyle, ListType, PageMode, PaperDirection, RowFlex, TitleLevel } from './editor' +import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, ICatalogItem, IElement, KeyMap, ListStyle, ListType, PageMode, PaperDirection, RowFlex, TitleLevel } from './editor' import { Dialog } from './components/dialog/Dialog' import { formatPrismToken } from './utils/prism' import { Signature } from './components/signature/Signature' +import { debounce } from './utils' window.onload = function () { const isApple = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent) @@ -844,7 +845,54 @@ window.onload = function () { instance.command.executePrint() } - // 6. 页面模式 | 纸张缩放 | 纸张大小 | 纸张方向 | 页边距 | 全屏 + // 6. 目录显隐 | 页面模式 | 纸张缩放 | 纸张大小 | 纸张方向 | 页边距 | 全屏 + async function updateCatalog() { + const catalog = await instance.command.getCatalog() + const catalogMainDom = document.querySelector('.catalog__main')! + catalogMainDom.innerHTML = '' + if (catalog) { + const appendCatalog = (parent: HTMLDivElement, catalogItems: ICatalogItem[]) => { + for (let c = 0; c < catalogItems.length; c++) { + const catalogItem = catalogItems[c] + const catalogItemDom = document.createElement('div') + catalogItemDom.classList.add('catalog-item') + // 渲染 + const catalogItemContentDom = document.createElement('div') + catalogItemContentDom.classList.add('catalog-item__content') + const catalogItemContentSpanDom = document.createElement('span') + catalogItemContentSpanDom.innerText = catalogItem.name + catalogItemContentDom.append(catalogItemContentSpanDom) + // 定位 + catalogItemContentDom.onclick = () => { + instance.command.executeLocationCatalog(catalogItem.id) + } + catalogItemDom.append(catalogItemContentDom) + if (catalogItem.subCatalog && catalogItem.subCatalog.length) { + appendCatalog(catalogItemDom, catalogItem.subCatalog) + } + // 追加 + parent.append(catalogItemDom) + } + } + appendCatalog(catalogMainDom, catalog) + } + } + let isCatalogShow = true + const catalogDom = document.querySelector('.catalog')! + const catalogModeDom = document.querySelector('.catalog-mode')! + const catalogHeaderCloseDom = document.querySelector('.catalog__header__close')! + const switchCatalog = () => { + isCatalogShow = !isCatalogShow + if (isCatalogShow) { + catalogDom.style.display = 'block' + updateCatalog() + } else { + catalogDom.style.display = 'none' + } + } + catalogModeDom.onclick = switchCatalog + catalogHeaderCloseDom.onclick = switchCatalog + const pageModeDom = document.querySelector('.page-mode')! const pageModeOptionsDom = pageModeDom.querySelector('.options')! pageModeDom.onclick = function () { @@ -1158,10 +1206,15 @@ window.onload = function () { activeMode.classList.add('active') } - instance.listener.contentChange = async function () { + instance.listener.contentChange = debounce(async function () { + // 字数 const wordCount = await instance.command.getWordCount() document.querySelector('.word-count')!.innerText = `${wordCount || 0}` - } + // 目录 + if (isCatalogShow) { + updateCatalog() + } + }, 200) instance.listener.saved = function (payload) { console.log('elementList: ', payload) diff --git a/src/style.css b/src/style.css index 14df1b3..6755cbe 100644 --- a/src/style.css +++ b/src/style.css @@ -651,11 +651,83 @@ ul { background-image: url('./assets/images/print.svg'); } +.catalog { + width: 250px; + position: fixed; + left: 0; + bottom: 0; + top: 100px; + padding: 0 20px 40px 20px; +} + +.catalog .catalog__header { + height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e2e6ed; +} + +.catalog .catalog__header span { + color: #3d4757; + font-size: 14px; + font-weight: bold; +} + +.catalog .catalog__header i { + width: 16px; + height: 16px; + cursor: pointer; + display: inline-block; + background: url(./assets/images/close.svg) no-repeat; + transition: all .2s; +} + +.catalog .catalog__header>div:hover { + background: rgba(235, 238, 241); +} + +.catalog__main { + height: calc(100% - 60px); + padding: 10px 0; + overflow-y: auto; + overflow-x: hidden; +} + +.catalog__main .catalog-item { + width: 100%; + padding-left: 10px; + box-sizing: border-box; +} + +.catalog__main>.catalog-item { + padding-left: 0; +} + +.catalog__main .catalog-item .catalog-item__content { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.catalog__main .catalog-item .catalog-item__content:hover>span { + color: #4991f2; +} + +.catalog__main .catalog-item .catalog-item__content span { + color: #3d4757; + line-height: 30px; + font-size: 12px; + white-space: nowrap; + cursor: pointer; + user-select: none; +} + .editor>div { margin: 80px auto; } - .ce-page-container canvas { box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px; } @@ -681,6 +753,20 @@ ul { align-items: center; } +.footer .catalog-mode { + padding: 1px; + position: relative; +} + +.footer .catalog-mode i { + width: 16px; + height: 16px; + margin-right: 5px; + cursor: pointer; + display: inline-block; + background-image: url('./assets/images/catalog.svg'); +} + .footer .page-mode { padding: 1px; position: relative; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..90575da --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,12 @@ +export function debounce(func: Function, delay: number) { + let timer: number + return function (...args: any) { + if (timer) { + window.clearTimeout(timer) + } + timer = window.setTimeout(() => { + // @ts-ignore + func.apply(this, args) + }, delay) + } +} \ No newline at end of file