Kyattsukuro/logseq-plugin-favorite-tree-adapting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: arrows sometimes disappears

Browse Source
This commit is contained in:
Seth 2023-08-21 13:29:23 +08:00
parent dcd4fa8051
commit c2fd2d8e3d
5 changed files with 53 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "logseq-plugin-favorite-tree",
"version": "1.0.0",
"version": "1.0.1",
"main": "dist/index.html",
"logseq": {
"id": "_sethyuan-logseq-favorite-tree",
@ -15,7 +15,7 @@
"@logseq/libs": "^0.0.15",
"immer": "^9.0.19",
"logseq-l10n": "^0.2.0",
"preact": "^10.14.1",
"preact": "10.12.1",
"rambdax": "^10.0.0",
"reactutils": "^5.13.0"
},

24
pnpm-lock.yaml generated
View File

@ -15,8 +15,8 @@ dependencies:
specifier: ^0.2.0
version: 0.2.0(@logseq/libs@0.0.15)
preact:
specifier: ^10.14.1
version: 10.17.0
specifier: 10.12.1
version: 10.12.1
rambdax:
specifier: ^10.0.0
version: 10.0.0
@ -27,7 +27,7 @@ dependencies:
devDependencies:
'@preact/preset-vite':
specifier: ^2.5.0
version: 2.5.0(@babel/core@7.22.10)(preact@10.17.0)(vite@4.4.8)
version: 2.5.0(@babel/core@7.22.10)(preact@10.12.1)(vite@4.4.8)
'@types/node':
specifier: ^18.15.11
version: 18.15.11
@ -531,7 +531,7 @@ packages:
- supports-color
dev: false
/@preact/preset-vite@2.5.0(@babel/core@7.22.10)(preact@10.17.0)(vite@4.4.8):
/@preact/preset-vite@2.5.0(@babel/core@7.22.10)(preact@10.12.1)(vite@4.4.8):
resolution: {integrity: sha512-BUhfB2xQ6ex0yPkrT1Z3LbfPzjpJecOZwQ/xJrXGFSZD84+ObyS//41RdEoQCMWsM0t7UHGaujUxUBub7WM1Jw==}
peerDependencies:
'@babel/core': 7.x
@ -540,7 +540,7 @@ packages:
'@babel/core': 7.22.10
'@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.10)
'@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.22.10)
'@prefresh/vite': 2.4.1(preact@10.17.0)(vite@4.4.8)
'@prefresh/vite': 2.4.1(preact@10.12.1)(vite@4.4.8)
'@rollup/pluginutils': 4.2.1
babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.22.10)
debug: 4.3.4
@ -556,19 +556,19 @@ packages:
resolution: {integrity: sha512-joAwpkUDwo7ZqJnufXRGzUb+udk20RBgfA8oLPBh5aJH2LeStmV1luBfeJTztPdyCscC2j2SmZ/tVxFRMIxAEw==}
dev: true
/@prefresh/core@1.5.1(preact@10.17.0):
/@prefresh/core@1.5.1(preact@10.12.1):
resolution: {integrity: sha512-e0mB0Oxtog6ZpKPDBYbzFniFJDIktuKMzOHp7sguntU+ot0yi6dbhJRE9Css1qf0u16wdSZjpL2W2ODWuU05Cw==}
peerDependencies:
preact: ^10.0.0
dependencies:
preact: 10.17.0
preact: 10.12.1
dev: true
/@prefresh/utils@1.2.0:
resolution: {integrity: sha512-KtC/fZw+oqtwOLUFM9UtiitB0JsVX0zLKNyRTA332sqREqSALIIQQxdUCS1P3xR/jT1e2e8/5rwH6gdcMLEmsQ==}
dev: true
/@prefresh/vite@2.4.1(preact@10.17.0)(vite@4.4.8):
/@prefresh/vite@2.4.1(preact@10.12.1)(vite@4.4.8):
resolution: {integrity: sha512-vthWmEqu8TZFeyrBNc9YE5SiC3DVSzPgsOCp/WQ7FqdHpOIJi7Z8XvCK06rBPOtG4914S52MjG9Ls22eVAiuqQ==}
peerDependencies:
preact: ^10.4.0
@ -576,10 +576,10 @@ packages:
dependencies:
'@babel/core': 7.22.10
'@prefresh/babel-plugin': 0.5.0
'@prefresh/core': 1.5.1(preact@10.17.0)
'@prefresh/core': 1.5.1(preact@10.12.1)
'@prefresh/utils': 1.2.0
'@rollup/pluginutils': 4.2.1
preact: 10.17.0
preact: 10.12.1
vite: 4.4.8(@types/node@18.15.11)
transitivePeerDependencies:
- supports-color
@ -886,8 +886,8 @@ packages:
source-map-js: 1.0.2
dev: true
/preact@10.17.0:
resolution: {integrity: sha512-SNsI8cbaCcUS5tbv9nlXuCfIXnJ9ysBMWk0WnB6UWwcVA3qZ2O6FxqDFECMAMttvLQcW/HaNZUe2BLidyvrVYw==}
/preact@10.12.1:
resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
/process@0.11.10:
resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}

2
src/comps/FavArrow.tsx
View File

@ -9,7 +9,7 @@ export default function FavArrow({
}) {
return (
<span
class={cls("kef-ae-fav-arrow", expanded && "kef-ae-fav-arrow-expanded")}
class={cls("kef-ft-fav-arrow", expanded && "kef-ft-fav-arrow-expanded")}
onClick={onToggle}
>
<svg

12
src/comps/FavList.tsx
View File

@ -115,7 +115,7 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
return (
<div
class={cls("kef-ae-fav-list", shown && "kef-ae-fav-expanded")}
class={cls("kef-ft-fav-list", shown && "kef-ft-fav-expanded")}
onMouseDown={preventSideEffect}
>
{items.map((item) => {
@ -126,17 +126,17 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
return (
<div key={item.name}>
<div class="kef-ae-fav-item" onClick={(e) => openPage(e, item)}>
<div class="kef-ft-fav-item" onClick={(e) => openPage(e, item)}>
{item.filters ? (
<div class="kef-ae-fav-item-icon">
<div class="kef-ft-fav-item-icon">
{logseq.settings?.filterIcon ?? "🔎"}
</div>
) : item.properties?.icon ? (
<div class="kef-ae-fav-item-icon">{item.properties?.icon}</div>
<div class="kef-ft-fav-item-icon">{item.properties?.icon}</div>
) : (
<span class="ui__icon tie tie-page kef-ae-fav-item-icon"></span>
<span class="ui__icon tie tie-page kef-ft-fav-item-icon"></span>
)}
<div class="kef-ae-fav-item-name" title={displayName}>
<div class="kef-ft-fav-item-name" title={displayName}>
{item.filters &&
displayName.toLowerCase().startsWith(`${item.name}/`)
? displayName.substring(item.name.length + 1)

64
src/plugin.tsx
View File

@ -62,9 +62,12 @@ async function main() {
const favoritesObserver = new MutationObserver(async (mutationList) => {
const mutation = mutationList[0]
if (mutation?.target == null) return
const target = mutation.target as HTMLElement
if (
(mutation?.target as any).classList?.contains("bd") ||
(mutation?.target as any).classList?.contains("favorites")
target.classList?.contains("bd") ||
target.classList?.contains("favorites")
) {
await processFavorites()
}
@ -79,7 +82,7 @@ async function main() {
await processFavorites()
const graph = (await logseq.App.getCurrentGraph())!
const storedWidth = parent.localStorage.getItem(`kef-ae-lsw-${graph.name}`)
const storedWidth = parent.localStorage.getItem(`kef-ft-lsw-${graph.name}`)
if (storedWidth) {
parent.document.documentElement.style.setProperty(
"--ls-left-sidebar-width",
@ -88,13 +91,13 @@ async function main() {
}
logseq.provideUI({
key: "kef-ae-drag-handle",
key: "kef-ft-drag-handle",
path: "#left-sidebar",
template: `<div class="kef-ae-drag-handle"></div>`,
template: `<div class="kef-ft-drag-handle"></div>`,
})
setTimeout(() => {
dragHandle = parent.document.querySelector(
"#left-sidebar .kef-ae-drag-handle",
"#left-sidebar .kef-ft-drag-handle",
)!
dragHandle.addEventListener("pointerdown", onPointerDown)
}, 0)
@ -110,34 +113,34 @@ async function main() {
function provideStyles() {
logseq.provideStyle({
key: "kef-ae-fav",
key: "kef-ft-fav",
style: `
.kef-ae-fav-list {
.kef-ft-fav-list {
padding-left: 24px;
display: none;
}
.kef-ae-fav-expanded {
.kef-ft-fav-expanded {
display: block;
}
.kef-ae-fav-arrow {
.kef-ft-fav-arrow {
flex: 0 0 auto;
padding: 4px 20px 4px 10px;
margin-right: -20px;
opacity: ${logseq.settings?.hoverArrow ? 0 : 1};
transition: opacity 0.3s;
}
:is(.favorite-item, .recent-item):hover > a > .kef-ae-fav-arrow,
.kef-ae-fav-item:hover > .kef-ae-fav-arrow {
:is(.favorite-item, .recent-item):hover > a > .kef-ft-fav-arrow,
.kef-ft-fav-item:hover > .kef-ft-fav-arrow {
opacity: 1;
}
.kef-ae-fav-arrow svg {
.kef-ft-fav-arrow svg {
transform: rotate(90deg) scale(0.8);
transition: transform 0.04s linear;
}
.kef-ae-fav-arrow-expanded svg {
.kef-ft-fav-arrow-expanded svg {
transform: rotate(0deg) scale(0.8);
}
.kef-ae-fav-item {
.kef-ft-fav-item {
display: flex;
align-items: center;
padding: 0 24px;
@ -145,23 +148,23 @@ function provideStyles() {
color: var(--ls-header-button-background);
cursor: pointer;
}
.kef-ae-fav-item:hover {
.kef-ft-fav-item:hover {
background-color: var(--ls-quaternary-background-color);
}
.kef-ae-fav-item-icon {
.kef-ft-fav-item-icon {
flex: 0 0 auto;
margin-right: 5px;
width: 16px;
text-align: center;
}
.kef-ae-fav-item-name {
.kef-ft-fav-item-name {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kef-ae-drag-handle {
.kef-ft-drag-handle {
content: "";
position: absolute;
top: 0;
@ -170,15 +173,15 @@ function provideStyles() {
width: 4px;
z-index: 10;
}
.kef-ae-drag-handle:hover,
.kef-ae-dragging .kef-ae-drag-handle {
.kef-ft-drag-handle:hover,
.kef-ft-dragging .kef-ft-drag-handle {
cursor: col-resize;
background: var(--ls-active-primary-color);
}
.kef-ae-dragging {
.kef-ft-dragging {
cursor: col-resize;
}
.kef-ae-dragging :is(#left-sidebar, #main-content-container) {
.kef-ft-dragging :is(#left-sidebar, #main-content-container) {
pointer-events: none;
}
`,
@ -198,11 +201,10 @@ async function processFavorites() {
}
async function injectList(el: HTMLElement, items: any[]) {
const isFav = el.classList.contains("favorite-item")
const key = `kef-ae-${isFav ? "f" : "r"}-${await hash(el.dataset.ref!)}`
const key = `kef-ft-f-${await hash(el.dataset.ref!)}`
const arrowContainer = el.querySelector("a")!
const arrow = arrowContainer.querySelector(".kef-ae-fav-arrow")
const arrow = arrowContainer.querySelector(".kef-ft-fav-arrow")
if (arrow != null) {
arrow.remove()
}
@ -210,9 +212,7 @@ async function injectList(el: HTMLElement, items: any[]) {
if (parent.document.getElementById(key) == null) {
logseq.provideUI({
key,
path: `.${isFav ? "favorite" : "recent"}-item[data-ref="${
el.dataset.ref
}"]`,
path: `.favorite-item[data-ref="${el.dataset.ref}"]`,
template: `<div id="${key}"></div>`,
})
}
@ -268,7 +268,7 @@ function needsProcessing(txData: any[]) {
function onPointerDown(e: Event) {
e.preventDefault()
parent.document.documentElement.classList.add("kef-ae-dragging")
parent.document.documentElement.classList.add("kef-ft-dragging")
parent.document.addEventListener("pointermove", onPointerMove)
parent.document.addEventListener("pointerup", onPointerUp)
parent.document.addEventListener("pointercancel", onPointerUp)
@ -279,7 +279,7 @@ function onPointerUp(e: MouseEvent) {
parent.document.removeEventListener("pointermove", onPointerMove)
parent.document.removeEventListener("pointerup", onPointerUp)
parent.document.removeEventListener("pointercancel", onPointerUp)
parent.document.documentElement.classList.remove("kef-ae-dragging")
parent.document.documentElement.classList.remove("kef-ft-dragging")
const pos = e.clientX
parent.document.documentElement.style.setProperty(
@ -288,7 +288,7 @@ function onPointerUp(e: MouseEvent) {
)
;(async () => {
const graph = (await logseq.App.getCurrentGraph())!
parent.localStorage.setItem(`kef-ae-lsw-${graph.name}`, `${pos}`)
parent.localStorage.setItem(`kef-ft-lsw-${graph.name}`, `${pos}`)
})()
}