De JavaScript-API van Addofy (window.adba)
Laad je script met de dependency adba-core en gebruik dan window.adba. De volledige TypeScript-types staan in docs/adba.d.ts in de plugin.
adba.boot( 'myplugin', () => {
adba.commands.register( { id: 'myplugin-report', label: 'Open report', run: () => location.assign( '/wp-admin/admin.php?page=myplugin' ) } );
adba.shortcuts.register( { id: 'myplugin-report', keys: 'g r', label: 'Go to the report', handler: () => location.assign( '/wp-admin/admin.php?page=myplugin' ) } );
adba.notices.add( { id: 'myplugin-sync', level: 'success', text: 'Sync done.', source: 'myplugin' } );
} );
adba.on( 'module:ready', ( { id } ) => console.log( 'started', id ) );adba.boot() isoleert fouten: een mislukte entry wordt gelogd met zijn id. Zodra de entry zonder fouten gestart is, vuurt het module:ready.
Laden
Sinds 1.4.0 laadt de admin één script voor de core en de modules die op elk scherm draaien (core/global.js). Onderdelen die alleen bij interactie nodig zijn, laden bij het eerste gebruik: de palette-UI, het bewerkpaneel, het meldingenpaneel, sectietabs en de opslaanbalk, de Help-rijen en adba.api.document().
De API blijft hetzelfde. adba.drawer.open() antwoordt nog steeds direct, adba.sectionTabs.create() geeft een controller terug en adba.savebar() geeft een object terug waarvan bar binnenkomt zodra het geladen is.
Meldingen
adba.notices.add( { id, text, level, source, dismissible } ) accepteert platte tekst, gezet met textContent: er komt geen HTML van een extensie op de pagina. Voor een melding met links of markup toon je een gewone adminmelding in PHP. Het meldingenpaneel pikt die op, en adba_notice_sources of data-adba-source wijst de groep toe.
Events
Luister met adba.on( name, callback ).
| Event | Payload | Wanneer |
|---|---|---|
ready | adba | De core is gestart. |
module:ready | { id } | Een module-entry is zonder fouten gestart. |
prefs:change | { key, value, remote? } | Een voorkeur is gewijzigd (ook vanuit een andere tab). |
prefs:error | error | Een voorkeur kon niet worden opgeslagen. |
api:error | { error, request, silent } | Een REST-aanroep is mislukt. |
commands:change | Er is een commando geregistreerd. | |
search:open, search:close | De palette is geopend of gesloten. | |
search:select | { item, handled } | Een resultaat of commando is gekozen. Zet handled = true om het over te nemen. |
search:scope | { scope } | Multisite: de palette schakelde tussen deze site (site) en alle sites (network). |
palette:run | { command, values } | Een palettecommando draait, met de waarden van zijn parameters. Sinds 2.11.0. |
view:apply | { view } | Een opgeslagen weergave wordt geopend vanuit zijn pil of het weergavenmenu. Sinds 2.11.0. |
view:save | { name, share } | Een weergave is opgeslagen; share is leeg (alleen ik), all of een rol. Sinds 2.11.0. |
drawer:open, drawer:close | { type, url } | Het zijpaneel is geopend of gesloten. |
drawer:saved | { url } | Een scherm in het zijpaneel is opgeslagen. |
notices:change | { count, level } | Het aantal of niveau in het meldingenpaneel is gewijzigd. |
pagebar:ready | { bar } | De paginabalk is klaar. |
listtable:ready, listtable:updated | Een lijsttabel is klaar of opnieuw geladen. | |
listtable:appended | { rows } | Meer laden (telefoons) heeft de rijen van de volgende pagina toegevoegd. Sinds 2.8.0. |
orders:ready, products:ready, settings:updated, wcsettings:updated | Schermspecifiek. | |
guide:open | { id, type } | Een uitleg opende als kaart (card) of rondleiding (tour). Sinds 2.9.0. |
guide:done | { id, completed } | Een uitleg sloot; completed als elke stap van de rondleiding gezien is. Sinds 2.9.0. |
img:fallback | { element } | Een lijstafbeelding die niet laadde, kreeg de placeholder (filter adba_image_placeholder). Sinds 2.12.2. |
img:fallback | { element } | Een plaatje in een lijst dat niet laadde kreeg de placeholder (filter adba_image_placeholder). Sinds 2.12.2. |
JS-filters
Addofy gebruikt het native WordPress hooks-script. Voeg een filter toe met wp.hooks.addFilter(). Een callback die een fout geeft, wordt gelogd met de filternaam en de oorspronkelijke waarde wordt gebruikt.
wp.hooks.addFilter( 'adba.search.results', 'myplugin', ( groups, { query } ) => [
...groups,
{ id: 'myplugin', label: 'Reports', items: [ { title: `Report for "${ query }"`, url: '/wp-admin/admin.php?page=myplugin' } ] },
] );| Filter | Waarde | Extra argument |
|---|---|---|
adba.search.results | Resultaatgroepen [ { id, label, items: [ { title, url, subtitle, badge } ] } ] voordat ze renderen. | { query, scope } |
adba.commands.list | Commando's die de palette toont. | { screen } |
adba.paletteCommands | Commando's vlak voordat de palette ze rangschikt voor de getypte zoekterm (sinds 2.11.0). | { query, scope } |
adba.notices.source | De plugingroep { slug, name } van een melding, of null voor Overig. | het meldingselement |
adba.drawer.options | Opties wanneer het zijpaneel opent (url moet een string blijven). | |
adba.orderQuickActions | Onderdelen van de popup met snelle bestelacties (sinds 1.2.0). | de bestelgegevens |
adba.pagebar.actions | Knoppen van de paginabalk vanuit JS: [ { id, label, onClick, icon } ], icoon een dashicons-*-class. | { screen, bar } |
adba.queueAction | Een achtergrondtaak voordat adba.queue hem uitvoert (sinds 2.5.0). Geef de taak terug, gewijzigd of niet, of een falsy waarde om hem te weigeren. |
Achtergrondacties (adba.queue, sinds 2.5.0)
adba.queue.run( { key, label, element, apply, request, rollback, undo } ) past de interface direct aan met apply(), markeert element met aria-busy en de class adba-pending (een klein pulserend puntje) en voert request() op de achtergrond uit.
- Gebruik
adba.apioffetchinrequest()zodat elke serverhook nog draait. - Bij succes toont een toast
label, met Ongedaan maken alsundo()is meegegeven. - Bij een fout draait
rollback()en biedt de toast Opnieuw proberen aan. - Taken met dezelfde
keydraaien na elkaar, andere naast elkaar (maximaal 4). - Zolang er taken lopen, vraagt het verlaten van de pagina om bevestiging.
- Laad het met
adba.load( 'queue' ); het staat daarna ook opadba.queue. - Events:
queue:start,queue:doneenqueue:fail, elk met{ key, label }.
De PHP-filters adba_async_row_actions (status-, prullenbak- en herstellinks) en adba_async_bulk_actions (bulkacties die in batches van 20 draaien) bepalen welke lijstacties de wachtrij gebruiken.
Sorteerbare lijsten (adba.sortable, sinds 2.36.0)
Met adba.sortable( container, options ) zet een gebruiker de items van een lijst op volgorde door te slepen, met dezelfde greep, chip, drop-lijn en autoscroll als bij het sorteren van termen en het menu. Muis en aanraking werken; Escape breekt af. De code laadt bij de eerste aanroep; de aanroep geeft meteen { refresh, destroy } terug.
const sorter = window.adba?.sortable?.( list, {
items: 'li.myplugin-rule',
label: ( item ) => item.dataset.name,
disabled: () => busy,
onSort: ( from, to, item ) => save( from, to ),
} );items: selector voor de items tussen de directe kinderen vancontainer. Standaard: alle kinderen.handle: selector voor je eigen greep in een item (geef dietouch-action: none). Zonder handle zet Addofy een greep met zes puntjes in elk item.label( item ): tekst in de chip. Standaard: de tekst van het item.disabled:true, of een functie dietruegeeft, blokkeert slepen. Wordt gecontroleerd als een sleep begint.onSort( from, to, item ): na het verplaatsen van het item in de DOM. De indexen tellen alleen de items.
Eén niveau, geen nesten. Toetsenbordgebruikers houden je eigen knoppen omhoog en omlaag. Opnieuw aanroepen op dezelfde container vervangt de vorige aanroep, dus je kunt de lijst opnieuw tekenen en opnieuw aanroepen. Nieuwe items krijgen vanzelf een greep. destroy() haalt grepen en listeners weg. Controleer of window.adba?.sortable bestaat en houd je eigen terugval als Addofy niet actief is.
Gerelateerd
Klaar om het te proberen?