Forum Widgets

Core Extension for Managing Forum Widgets

Compatible with Flarum v1.4.1

Latest release v0.1.7

5,242 downloads

released on Aug 2, 2021

Tags

icon

Forum Widgets

License Latest Stable Version Total Downloads donate

Flarum Core Extension for Managing Forum Widgets.
animated_screenshot
forum screenshot

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.

  1. Require this extension in your extension's composer.json:
"require": {
  "flarum/core": "^1.0.0",
  "afrux/forum-widgets-core": "^0.1.0"
},
  1. Create your widget's component in common/components by extending the base Widget 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>
    );
  }
}
  1. Register your widget in the admin and forum frontends:
  • Create a new registerWidget.js file in common:
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);
});
  1. If you are using typescript, you can add the typings of this package by adding this to the paths key in your tsconfig.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.

Links

© 2022 Hyn by DaniĆ«l "Luceos" Klabbers. All rights reserved. · Extensions and extension information is provided by the respective (copyright holding) authors. · Extiverse is not affiliated to the Flarum project or Flarum foundation. · Images on Extiverse pages are from Unsplash.