plugins: HFS.apiCall, reloadList, logout

Massimo Melina committed Apr 12, 2023 at 16:09 UTC 88d621179ac1076449b2ad9b75ee7eac9f338508
2 files changed +21 -9
dev-plugins.md
+16 -8
@@ -142,25 +142,32 @@ Each plug-in can have a `public` folder, and its files will be accessible at `/~
142
143 The following information applies to the default front-end, and may not apply to a custom one.
144
145 -### Javascript
145 Once your script is loaded into the frontend (via `frontend_js`), you will have access to the `HFS` object in the global scope.
146
147 +The HFS objects contains many properties:
148 +- `onEvent` this is the main API function inside the frontend. Refer to dedicated section below.
149 +- `apiCall`
150 +- `reloadList`
151 +- `logout`
152 +- `state` [object with many values in it](https://github.com/rejetto/hfs/blob/main/frontend/src/state.ts)
153 +- `React` whole React object, as for `require('react')` (JSX syntax is not supported here)
154 +- `h` shortcut for React.createElement
155 +- `t` [translator function](https://github.com/rejetto/hfs/blob/main/frontend/src/i18n.ts)
156 +- `_` [lodash library](https://lodash.com/docs/)
157 +
158 +### Front-end API events
159 +
160 API at this level is done with frontend-events, that you can handle by calling
161
162 ```typescript
163 HFS.onEvent(eventName, callback)
164
153 -//type callback = (parameters: object, tools: object) => any
165 +//type callback = (parameters: object, HFS: object) => any
166 ```
167
168 Parameters of your callback and meaning of returned value varies with the event name.
169 Refer to the specific event for further information.
158 -Tools are extra data and functions to help you:
159 -- `React` whole React object, as for `require('react')` (JSX syntax is not supported here)
160 -- `h` shortcut for React.createElement
161 -- `state` [object with many values in it](https://github.com/rejetto/hfs/blob/main/frontend/src/state.ts)
162 -- `t` [translator function](https://github.com/rejetto/hfs/blob/main/frontend/src/i18n.ts)
163 -- `_` [lodash library](https://lodash.com/docs/)
170 +HFS object is the same you access globally. Here just for legacy, consider it deprecated.
171
172 Some frontend-events can return Html, which can be expressed in several ways
173 - as string, containing markup
@@ -230,6 +237,7 @@ HFS will scan through them in inverted alphabetical order searching for a compat
237
238 - 8.1 (v0.44.0)
239 - afterEntryname.cantOpen
240 + - HFS.apiCall, reloadList, logout
241 - 8 (v0.43.0)
242 - entry.name & .uri
243 - tools.dialogLib
frontend/src/misc.ts
+5 -1
@@ -9,6 +9,9 @@ import { state } from './state'
9 import { t } from './i18n'
10 import * as dialogLib from './dialog'
11 import _ from 'lodash'
12 +import { apiCall } from './api'
13 +import { reloadList } from './useFetchList'
14 +import { logout } from './login'
15 export * from '@hfs/shared'
16
17 export const ERRORS: Record<number, string> = {
@@ -55,9 +58,10 @@ export function hfsEvent(name: string, params?:Dict) {
58 return output
59 }
60
61 +const tools = { h, React, state, t, _, dialogLib, apiCall, reloadList, logout }
62 Object.assign((window as any).HFS ||= {}, {
63 + ...tools,
64 onEvent(name: string, cb: (params:any, tools: any, output:any) => any) {
60 - const tools = { h, React, state, t, _, dialogLib }
65 const key = 'hfs.' + name
66 document.addEventListener(key, wrapper)
67 return () => document.removeEventListener(key, wrapper)