Pollsr is a minimalist library to dynamically create polls with a elegante default theme.
Instanciate on the fly with lazyload, dynamic import or intersection observer for more flexibility and better UX performance.
The plugin is available as the pollsr
package name on npm.
npm i --save-dev pollsr
yarn add --dev pollsr
Online demo is available on yoriiis.github.io/pollsr.
The project includes also several examples of Pollsr implementation.
The Pollsr project includes a minimalist JSON example in the folder ./examples/datas.json
.
In case of JSON fields updates, use the PollsrTemplate
and update getTemplate
and getAnswersList
function according to your needs.
{
"id": "",
"question": "",
"answers": [
{
"id": "",
"title": "",
"image": ""
}
]
}
Instanciate the Pollsr element like the following example.
The
hasVoted
parameter must be set at initialize to reflect if the user has already voted. On vote action, the parameter is automatically updated.The
onAction
parameter allows to call a function on the vote action, for example save the data with a http request, in the browser storage or what you want.
<div id="pollsr-1"></div>
import { PollsrCore } from "pollsr";
import datas from "datas.json";
const pollsrCore = new PollsrCore({
element: document.querySelector("#pollsr-1"),
datas: datas,
hasVoted: false,
onAction: answerId => {
// Put here the action on answer click event (post, fetch, localStorage, etc.)
}
});
You can pass configuration options to PollsrCore
. Example below show all default values.
{
element: null,
template: null,
datas: null,
hasVoted: false,
onAction: null
}
element
- {HTMLElement} - DOM element referencetemplate
- {Class} - Override the default templatedatas
- {Object} - JSON datas for the PollsronAction
- {Function} - Function executes on answer clickhasVoted
- {Boolean} - Is the answer already voted?
Custom template allows to override default behaviors with a custom class which extends PollsrTemplate
. Please, respect the naming of the PollsrTemplate
methods to overrides them.
Create a new file custom-pollsr-template.js
for the custom template. Example below override the default template. The super
keyword (optional) allow to keep the default behavior and add somes code.
import { PollsrTemplate } from "pollsr";
class CustomTemplate extends PollsrTemplate {
updateTemplateAfterVote() {
super.updateTemplateAfterVote();
this.options.element
.querySelector(`.pollsr-button[data-answer-id="${answerId}"]`)
.parentNode.classList.add("active");
}
getTemplate(datas) {
return `<div class="pollsr${this.options.hasVoted ? " has-voted" : ""}">
<p class="pollsr-question">Hey, ${datas.question}</p>
<ul class="pollsr-answers">
${this.getAnswersList(datas.answers)}
</ul>
<a href="https://www.themoviedb.org" class="pollsr-footer">Source: TMDb</a>
</div>`;
}
}
Next step, import custom-pollsr-template.js
file and use it as parameter template
of PollsrCore
class.
import { PollsrCore } from "pollsr";
import CustomTemplate from "./custom-pollsr-template.js";
import datas from "datas.json";
let pollsrCore = new PollsrCore({
element: document.querySelector("#poll-4490"),
datas: datas,
template: new CustomTemplate()
});
pollsrCore.create();
Each pollsr instanciation return the instance of the class with somes available methods to easily manipulate the poll.
The destroy()
function automatically destroy pollsrCore
and pollsrTemplate
instances.
pollsrCore.destroy();
Pollsr and his documentation are licensed under the MIT License.
Created with ♥ by @yoriiis.