microask
v0.0.3
Published
Microscale feedback form
Downloads
9
Readme
Microask
Usage
Install via npm:
$ npm i --save microaskNext, add the stylesheet and a container element to your page's markup:
<!-- in <head /> -->
<link rel="stylesheet" href="./node_modules/microask/microask.css" />
<!-- in <body /> -->
<div id="my-ask"></div>Finally, require microask and instantiate it in an existing DOM element:
const Microask = require('microask');
window.addEventListener('DOMContentLoaded', function () {
const el = document.getElementById('my-ask');
const ask = new Microask(el);
ask
.update('<p>Hello, world!</p>')
.show();
});Microask implements EventEmitter for reporting feedback.
ask.addListener('event', function (e) {
const { id, action, value } = e;
console.log(`${id}: `${action}` "`${value}`");
});
API
All methods return an instance of Microask to enable chaining.
.show(0) => Microask
Show the microask.
.hide(0) => Microask
Hide the microask.
.hideAfter(delay: Number) => Microask
Delay hide until delay ms have elapsed
.update(htmlStr: String, cb: Function?) => Microask
Set microask HTML to htmlStr. If callback is provided, it will receive the
updated element once the update is complete.
.updateAfter(htmlStr: String, delay: Number, cb: Function?) => Microask
Delay update until delay ms have elapsed
.buttonScene(opts: Object) => Microask
Render a button scene.
ask.buttonScene({
id: 'buttons',
prompt: 'Can you click it?',
actions: [
{
label: 'Click me',
value: 'ok',
callback: ask => ask
.updateAfter('<p>Good job!</p>', 100)
.hideAfter(2000),
},
],
});.textScene(opts: Object) => Microask
Render a text scene.
ask.textScene({
id: 'email',
prompt: 'What\'s on your mind?',
placeholder: 'Start typing',
callback: ask => ask.hide(),
});License
MIT