From aac9eee6e29c4c6e19a5d496eb438e332419c9a4 Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Fri, 26 Aug 2022 21:53:45 +0800 Subject: [PATCH 1/3] feat(toc): add scroll active item --- .../src/pages/workspace/docs/components/toc/TOC.tsx | 7 ++++++- .../src/pages/workspace/docs/components/toc/toc.css | 13 +++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 6e416a8b6b..877a17d480 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -16,8 +16,8 @@ import { getContentByAsyncBlocks, getPageTOC, } from './toc-util'; +import './toc.css'; import type { ListenerMap, TOCType } from './types'; - const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( ({ type, isActive }) => { const common = { @@ -168,6 +168,11 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); + const block = await editor.getBlockById(blockId); + block.dom.classList.add('toc-scroll-item'); + setTimeout(() => { + block.dom.classList.remove('toc-scroll-item'); + }, 1000); await editor.scrollManager.scrollIntoViewByBlockId(blockId); }; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css new file mode 100644 index 0000000000..44364012dc --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css @@ -0,0 +1,13 @@ +.toc-scroll-item { + animation: blinker 1s linear; + animation-delay: 1s; +} + +@keyframes blinker { + 0% { + background: rgba(152, 172, 189, 0.1); + } + 100% { + background: rgba(152, 172, 189, 0.1); + } +} From c0a41074497e2282113054e50e27e42ba05c0ea6 Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Mon, 29 Aug 2022 12:02:32 +0800 Subject: [PATCH 2/3] feat(toc): add animation to toc item --- .../workspace/docs/components/toc/TOC.tsx | 20 ++++++++++++++++--- .../workspace/docs/components/toc/toc.css | 13 ------------ 2 files changed, 17 insertions(+), 16 deletions(-) delete mode 100644 apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 877a17d480..3e9eb11d4a 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -1,3 +1,4 @@ +import { keyframes } from '@emotion/react'; import type { Virgo } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; import { useCurrentEditors } from '@toeverything/datasource/state'; @@ -16,8 +17,21 @@ import { getContentByAsyncBlocks, getPageTOC, } from './toc-util'; -import './toc.css'; import type { ListenerMap, TOCType } from './types'; +// import './toc.css'; +const blinker = keyframes` +0% { + background: rgba(152, 172, 189, 0.1); +} +100% { + background: rgba(152, 172, 189, 0.1); +} +`; +const toScrollItem = styled('div')` + animation: ${blinker} 1s linear; + animation-delay: 1s; +`; +const toScrollItemClassName = toScrollItem.toString().substring(1); const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( ({ type, isActive }) => { const common = { @@ -169,9 +183,9 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); const block = await editor.getBlockById(blockId); - block.dom.classList.add('toc-scroll-item'); + block.dom.classList.add(toScrollItemClassName); setTimeout(() => { - block.dom.classList.remove('toc-scroll-item'); + block.dom.classList.remove(toScrollItemClassName); }, 1000); await editor.scrollManager.scrollIntoViewByBlockId(blockId); }; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css deleted file mode 100644 index 44364012dc..0000000000 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css +++ /dev/null @@ -1,13 +0,0 @@ -.toc-scroll-item { - animation: blinker 1s linear; - animation-delay: 1s; -} - -@keyframes blinker { - 0% { - background: rgba(152, 172, 189, 0.1); - } - 100% { - background: rgba(152, 172, 189, 0.1); - } -} From fd4f99bd83a1c70846a88f67fd147419eeeb609b Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 29 Aug 2022 13:30:56 +0800 Subject: [PATCH 3/3] refactor: use web animate api --- .../workspace/docs/components/toc/TOC.tsx | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 3e9eb11d4a..0a5c442590 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -1,6 +1,6 @@ -import { keyframes } from '@emotion/react'; import type { Virgo } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; +import { Protocol } from '@toeverything/datasource/db-service'; import { useCurrentEditors } from '@toeverything/datasource/state'; import { createContext, @@ -18,20 +18,7 @@ import { getPageTOC, } from './toc-util'; import type { ListenerMap, TOCType } from './types'; -// import './toc.css'; -const blinker = keyframes` -0% { - background: rgba(152, 172, 189, 0.1); -} -100% { - background: rgba(152, 172, 189, 0.1); -} -`; -const toScrollItem = styled('div')` - animation: ${blinker} 1s linear; - animation-delay: 1s; -`; -const toScrollItemClassName = toScrollItem.toString().substring(1); + const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( ({ type, isActive }) => { const common = { @@ -183,11 +170,28 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); const block = await editor.getBlockById(blockId); - block.dom.classList.add(toScrollItemClassName); - setTimeout(() => { - block.dom.classList.remove(toScrollItemClassName); - }, 1000); await editor.scrollManager.scrollIntoViewByBlockId(blockId); + + if (!block || block.type === Protocol.Block.Type.group) { + // the group block has its own background + return; + } + // See https://developer.mozilla.org/en-US/docs/Web/API/Element/animate + block.dom?.animate( + [ + { + backgroundColor: 'rgba(152, 172, 189, 0.1)', + }, + { + backgroundColor: 'rgba(152, 172, 189, 0)', + }, + ], + { + delay: 500, + duration: 700, + easing: 'linear', + } + ); }; return (