@abtasty/progress-bar

AB-tasty progress-bar

The ABTasty Progress Bar Widget will display a progress bar.

Code organisation

Inserting the widget on the page

This is completely handled by the Widget-Utils. It takes care of deciding when and how to insert the widget on the page. It also handles recurrence management. Finally, it also handles the widget's form generation by importing the necessary components to be displayed in the editor.

Widget internal updates

The widget has to react to changes coming either form updates to a specified DOM element (DATA.variableElement) or from a javascript callback from the client (DATA.variableType is javascript).

The widget internally uses an observer pattern, via an Event Hub. The observable events are:

• valueElementUpdated: the source DOM value has changed
• externalUpdate: the source value was updated from javascript callback (client code)
• sourceElementPresence: the source DOM element was either removed or added to the DOM
• valueUpdated: the value to display was updated either from the DOM or a javascript callback.
• refreshContent: triggered by the widget-utils, when the widget is removed and has to display again

Tests

The test setup and spec files are located in test directory. To actually run the tests you need to clone and install the Widgets Testrunner repo in your Widgets directory. Please check the testrunner documentation for an up to date guide on running the Widget tests.

This widget was generated using AB Tasty Widget CLI. You can find more infomation and documentation about widgets at https://abtasty.gitbooks.io/widget/.

Preview your widget

Launch your widget in a new window and watch for changes.

npm start

Main files

• main.js Main source code of your widget
• form.js Configuration form for your widget

You can specify each file location in the package.json like this:

  "main": "dist/main.js",
  "form": "dist/form.js",

Included

• Rollup.js module bundler (like Webpack but smaller and faster).
• ES6 support using Babel.
• JavaScript Linting with ESLint and Airbnb style.
• JavaScript minified with UglifyJS.
• Prettier to format code.

We heard your widget have an UI, so we allowed ourselves to include some extra:

• Pug (aka Jade) to transforms html files into JS template.
• PostCSS to automatically append your CSS to head just using import 'yourstyle.css' and also use CSS plugins including:
  • CSSnext to use the latest CSS syntax today.
  • cssnano to minify CSS.

Add your widget to AB Tasty

• First, you'll need to have your widget on NPM:
  • Create a minified bundle with npm run build
  • Bump the version of your widget (using semver) with npm version [patch|minor|major]
  • Publish it to NPM: npm publish
• Once your widget is on NPM, you can now add it on AB Tasty at https://marketplace.abtasty.com/publish.