@abtasty/progress-bar v1.3.25
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 changedexternalUpdate
: the source value was updated from javascript callback (client code)sourceElementPresence
: the source DOM element was either removed or added to the DOMvalueUpdated
: 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 widgetform.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:
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
- Create a minified bundle with
- Once your widget is on NPM, you can now add it on AB Tasty at https://marketplace.abtasty.com/publish.
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago