µ-scale feedback form
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}`");
});All methods return an instance of Microask to enable chaining.
Show the microask.
Hide the microask.
Delay hide until delay ms have elapsed
Set microask HTML to htmlStr. If callback is provided, it will receive the
updated element once the update is complete.
Delay update until delay ms have elapsed
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),
},
],
});Render a text scene.
ask.textScene({
id: 'email',
prompt: 'What\'s on your mind?',
placeholder: 'Start typing',
callback: ask => ask.hide(),
});MIT