afrux / forum-widgets-core
Core Extension for Managing Forum Widgets
Fund package maintenance!
Other
Installs: 23 235
Dependents: 30
Suggesters: 0
Security: 0
Stars: 16
Watchers: 1
Forks: 6
Open Issues: 12
Language:TypeScript
Type:flarum-extension
Requires
- flarum/core: ^1.0.0
Requires (Dev)
- flarum/testing: ^1.0.0
README
Forum Widgets
Flarum Core Extension for Managing Forum Widgets.
Installation
Remember that this is just a forum widgets editor, it doesn't actually come with any widgets.
Install with composer:
composer require afrux/forum-widgets-core:"*"
Here is a list of currently compatible widgets you can install:
Updating
composer update afrux/forum-widgets-core:"*"
php flarum migrate
php flarum cache:clear
Extend
Extension developers wanting to create widgets with this small framework, the following explains how you can register a new widget, for now you should only register one widget per extension.
- Require this extension in your extension's
composer.json
:
"require": { "flarum/core": "^1.0.0", "afrux/forum-widgets-core": "^0.1.0" },
- Create your widget's component in
common/components
by extending the baseWidget
component provided with this package.
import Widget from 'flarum/extensions/afrux-forum-widgets-core/common/components/Widget'; export default class MyWidget extends Widget { className() { // Custom class name. // You can also use the class "AfruxWidgets-Widget--flat" for a flat widget (not contained in a block). // Please avoid strong custom styling so that it looks consistent in other themes. return 'MyWidget'; } icon() { // Widget icon. return 'fas fa-cirlce'; } title() { // Widget title. // Can return empty for a titleless widget. return app.translator.trans('afrux-online-users-widget.forum.widget.title'); } content() { return ( <div className="Afrux-OnlineUsersWidget-users"> // ... </div> ); } }
- Register your widget in the admin and forum frontends:
- Create a new
registerWidget.js
file incommon
:
import Widgets from 'flarum/extensions/afrux-forum-widgets-core/common/extend/Widgets'; import MyWidget from './components/MyWidget'; export default function(app) { (new Widgets).add({ key: 'onlineUsers', component: MyWidget, // Can be a callback that returns a boolean value. // example: () => app.forum.attribute('myCustomExtension.mySetting') isDisabled: false, // Is this a one time use widget ? leave true if you don't know. isUnique: true, // The following values are default values that can be changed by the admin. placement: 'end', position: 1, }).extend(app, 'my-extension-id'); };
- Register the widget in both frontends
admin/index.js
&forum/index.js
:
import registerWidget from '../common/registerWidget'; app.initializers.add('my-extension-id', () => { registerWidget(app); });
- If you are using typescript, you can add the typings of this package by adding this to the
paths
key in yourtsconfig.json
file:
"flarum/extensions/afrux-forum-widgets-core/*": ["../vendor/afrux/forum-widgets-core/js/dist-typings/*"]
You can also checkout other example widgets in the Afrux github org.