NodeBB HTML Extended Widget

HTML enhanced widget with ACE Editor and slider functionality through the bxSlider plugin.

Features

This widget lets you insert HTML blocks with slider functionality through JQuery bxSlider plugin (included). Widget administrative panel includes a Settings tab and three ACE Editor tabs: one for the HTML Template, one for LESS rules and properties, and the last for JSON Data.

Data tab appears only when slider is enabled. Data is maintained and saved even if it is not displayed.

Benchpress and Autocompletion

Benchpress templating framework is enbled and will parse all contents. Autocompletion lists on (ctrl+space) or { key(left bracket). Available objects and properties that appear in the list come from the context in which the widget is inserted (same data as ajaxify.data).

Data structure defined in the Data tab will appear too, with the meta property.

Predefined {slides} object contains the data array contained in the Data tab. Data must be valid JSON containing an array of objects

[
  {
    "title": "Take One",
    "description": "Learn and teach through making",
    "textColor": "#ff34d3",
    "users": 3,
  },
  {
    "title": "Take Two",
    "description": "free resources for everyone anywhere in the world",
    "textColor": "#ffd432",
    "users": 12,
  },
]

or one of the following objects:

{
  "topics": [123, 456, 789, 1205, ]
}

{
  "categories": [12, 45, 78, ]
}

{
  "groups": ["JS Coders", "Makers", "Permaculture Educators", ]
}

LESS Styles

CSS Styles are compiled from the supplied LESS and are optionally wrapped in a class, if any, specified in CSS Class setting. Every widget has a unique identifier so you can have different stylings for each widget/slider. Check bxSlider documentation for customizations.

The widget comes also with margin and padding Bootstrap 4 classes adapted to Bootstrap 3. Includes also some useful styles from Froala Design Blocks. So you can use over 170 responsive design blocks ready to be used in widgets.

Installation

npm install nodebb-widget-html-extended

Then head over to Admin -> Extend -> Widgets and place the widget. You will find some sample blocks added to global/drafts. Every time you activate this widget plugin, samples will be generated again.