plugins: new frontend event "beforeHead" and "afterHead"
Massimo Melina committed
Feb 14, 2023 at 13:37 UTC
f1927a71ef19d9002f5e0004026f0402ae75345b
3 files changed
+14
-11
frontend/src/BrowseFiles.ts
+5
-9
@@ -11,8 +11,8 @@ import {
11
useRef,
12
useState
13
} from 'react'
14
-import { domOn, formatBytes, hError, hfsEvent, hIcon, isMobile } from './misc'
15
-import { Checkbox, Html, Spinner } from './components'
14
+import { domOn, formatBytes, hError, hIcon, isMobile } from './misc'
15
+import { Checkbox, Html, Spinner, useCustomCode } from './components'
16
import { Head } from './Head'
17
import { state, useSnapState } from './state'
18
import { alertDialog } from './dialog'
@@ -35,6 +35,7 @@ export function BrowseFiles() {
35
return useAuthorized() && h(Fragment, {},
36
h(Html, { code: serverConfig?.custom_header }),
37
h(Head),
38
+ useCustomCode('afterHead'),
39
hError(error)
40
|| h(list ? FilesList : Spinner))
41
}
@@ -189,7 +190,7 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
190
containerDir && h(Link, { to: base+fixUrl(containerDir), className:'container-folder' }, hIcon('file'), containerDir ),
191
h('a', { href }, !containerDir && hIcon('file'), name)
192
),
192
- useEntryCustomCode('afterEntryName', entry),
193
+ useCustomCode('afterEntryName', { entry }),
194
h(EntryProps, entry),
195
h('div'),
196
)
@@ -199,18 +200,13 @@ function fixUrl(s:string) {
200
return s.replace(/[#%]/g, encodeURIComponent)
201
}
202
202
-function useEntryCustomCode(name: string, entry: DirEntry) {
203
- const code = useMemo(()=> hfsEvent(name, { entry }).filter(Boolean).join(''),
204
- [entry])
205
- return h(Html, { code, className: name })
206
-}
203
204
const EntryProps = memo((entry: DirEntry & { midnight: Date }) => {
205
const { t, s } = entry
206
const today = t && t > entry.midnight
207
const shortTs = isMobile()
208
return h('div', { className: 'entry-props' },
213
- useEntryCustomCode('additionalEntryProps', entry),
209
+ useCustomCode('additionalEntryProps', { entry }),
210
h(EntrySize, { s }),
211
t && h('span', {
212
className: 'entry-ts',
frontend/src/Head.ts
+2
-1
@@ -2,7 +2,7 @@
2
3
import { createElement as h, Fragment, useMemo } from 'react'
4
import { formatBytes, hIcon, prefix } from './misc'
5
-import { Spinner } from './components'
5
+import { Spinner, useCustomCode } from './components'
6
import { useSnapState } from './state'
7
import { MenuPanel } from './menu'
8
import { Breadcrumbs } from './Breadcrumbs'
@@ -11,6 +11,7 @@ import { FilterBar } from './FilterBar'
11
export function Head() {
12
return h('header', {},
13
h(MenuPanel),
14
+ useCustomCode('afterMenuBar'),
15
h(Breadcrumbs),
16
h(FolderStats),
17
h(FilterBar),
frontend/src/components.ts
+7
-1
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { hIcon } from './misc'
3
+import { hfsEvent, hIcon } from './misc'
4
import { createElement as h, HTMLAttributes, ReactNode, useMemo } from 'react'
5
6
export function Spinner() {
@@ -52,3 +52,9 @@ export function Html({ code, ...rest }:{ code:string } & HTMLAttributes<any>) {
52
return null
53
return h('span', { ...rest, dangerouslySetInnerHTML: o })
54
}
55
+
56
+export function useCustomCode(name: string, props={}) {
57
+ const code = useMemo(()=> hfsEvent(name, props).filter(x => x === 0 || x).join(''),
58
+ Object.values(props))
59
+ return h(Html, { code, className: name })
60
+}