@abtasty/progress-bar 1.1.21 → 1.2.0-0

package/README.md

@@ -0,0 +1,75 @@
+# AB-tasty progress-bar
+
+The ABTasty Progress Bar Widget will display a progress bar.
+
+## Code organisation
+
+![Progress Bar Architecture](./progress_bar_architecture.png)
+
+### 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](https://gitlab.com/abtasty/widget/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.
+```bash
+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:
+```json
+  "main": "dist/main.js",
+  "form": "dist/form.js",
+```
+
+## Included
+
+* [Rollup.js](https://rollupjs.org/) module bundler (like Webpack but smaller and faster).
+* ES6 support using [Babel](https://babeljs.io/).
+* JavaScript Linting with [ESLint](http://eslint.org/) and [Airbnb style](https://github.com/airbnb/javascript).
+* JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+* [Prettier](https://prettier.io/) to format code.
+
+
+
+**We heard your widget have an UI, so we allowed ourselves to include some extra:**
+* [Pug](https://github.com/aMarCruz/rollup-plugin-pug) (aka Jade) to transforms html files into JS template.
+* [PostCSS](https://github.com/egoist/rollup-plugin-postcss) to automatically append your CSS to head just using `import 'yourstyle.css'` and also use CSS plugins including:
+  * [CSSnext](http://cssnext.io/) to use the latest CSS syntax today.
+  * [cssnano](http://cssnano.co/) to minify CSS.
+
+
+
+## Add your widget to AB Tasty
+
+1. 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](http://semver.org/)) with `npm version [patch|minor|major]`
+    * Publish it to NPM: `npm publish`
+2. Once your widget is on NPM, you can now add it on AB Tasty at https://marketplace.abtasty.com/publish.