Micro framework JavaScript escrito sobre jQuery en el cual la comunicación basada en eventos es una característica clave, así como la capacidad de manipular elementos HTML sin abusar del shortcut $.
Mediante el uso de los conceptos de "vista" y "controlador", tratamos de separar responsabilidades, implementando una fuerte modularidad en el camino, y tratamos de dividir el diseño HTML y JavaScript en archivos separados e independientes. Siempre que necesite codificar un nuevo módulo, deberás escribir un archivo HTML para la vista y un archivo JavaScript para su controlador correspondiente, que de ahora en adelante se conocerá como un Plugster.
Cada Plugster puede incluir "outlets" que actuaran como un enlace entre el controlador y la vista, permitiéndonos acceder a los elementos del DOM de una manera más elegante y clara que usar sentencias selectoras directas de jQuery.
La siguiente sección es una pequeña demostración de lo que se puede hacer usando la librería. Muestra cómo establecemos escuchas de eventos directamente en la vista HTML a través del atributo "data-on-", y también muestra con qué facilidad podemos declarar poutlets para evitar utilizar el shortcut $ de jQuery en el controlador.
<div class="has-text-centered"
data-controller-name="ControlCenterPlugster"
data-on-timerplugster-timerpaused="handlePauseCommand"
data-on-timerplugster-timerresumed="handleResumeCommand">
<div class="subtitle">Timer Control Center</div>
<div data-outlet-id="buttonsList" class="buttons is-centered">
<button data-outlet-id="playButton" class="button is-success">Start</button>
<button data-outlet-id="restartButton" class="button is-danger is-hidden">Stop</button>
</div>
</div>
import {Plugster}
from "https://cdn.jsdelivr.net/gh/paranoid-software/plugster@1.0.12/dist/plugster.min.js";
class ControlCenterPlugster extends Plugster {
constructor(outlets) {
super(outlets);
}
afterInit() {
let self = this;
self.currentState = 'STOPPED';
self._.playButton.on('click', {}, function() {
if (self.currentState === 'STOPPED') {
self.currentState = 'RUNNING';
self._.buttonsList.addClass('has-addons');
self._.restartButton.removeClass('is-hidden');
self._.playButton.text('Pause');
self.notifyTimerStart();
return;
}
if (self.currentState === 'PAUSED') {
self.currentState = 'RUNNING';
self._.playButton.text('Pause');
self.notifyTimerResume();
return;
}
self.currentState = 'PAUSED';
self._.playButton.text('Resume');
self.notifyTimerPause();
});
self._.restartButton.on('click', {}, function() {
self.currentState = 'STOPPED';
self._.buttonsList.removeClass('has-addons');
self._.restartButton.addClass('is-hidden');
self._.playButton.text('Start');
self.notifyTimerRestart();
});
}
handlePauseCommand() {
this.currentState = 'PAUSED';
this._.playButton.text('Resume');
}
handleResumeCommand() {
this.currentState = 'RUNNING';
this._.playButton.text('Pause');
}
notifyTimerStart() {
this.dispatchEvent(this.timerStarted.name, {})
}
timerStarted(data, callback) {
this.registerEventSignature(this.timerStarted.name, data, callback);
}
notifyTimerPause() {
this.dispatchEvent(this.timerPaused.name, {})
}
timerPaused(data, callback) {
this.registerEventSignature(this.timerPaused.name, data, callback);
}
notifyTimerResume() {
this.dispatchEvent(this.timerResumed.name, {})
}
timerResumed(data, callback) {
this.registerEventSignature(this.timerResumed.name, data, callback);
}
notifyTimerRestart() {
this.dispatchEvent(this.timerRestarted.name, {})
}
timerRestarted(data, callback) {
this.registerEventSignature(this.timerRestarted.name, data, callback);
}
}
let controlCenterPlugster = await new ControlCenterPlugster({
buttonsList: {},
playButton: {},
restartButton: {}
}).init();
Plugster.plug(controlCenterPlugster);
"Widget "Centro de control" (Plugster) para iniciar y pausar el timer que se encuentra justo debajo de esta sección.
<div class="has-text-centered"
data-controller-name="TimerPlugster"
data-on-controlcenterplugster-timerstarted="handleStartCommand"
data-on-controlcenterplugster-timerpaused="handlePauseCommand"
data-on-controlcenterplugster-timerresumed="handleResumeCommand"
data-on-controlcenterplugster-timerrestarted="handleRestartCommand">
<div data-outlet-id="timerLabel" class="subtitle is-clickable">0s</div>
</div>
import {Plugster}
from "https://cdn.jsdelivr.net/gh/paranoid-software/plugster@1.0.12/dist/plugster.min.js";
class TimerPlugster extends Plugster {
constructor(outlets) {
super(outlets);
}
afterInit() {
let self = this;
self.elapsedTime = 0;
self.currentState = 'STOPPED';
self._.timerLabel.on('click', {}, function() {
clearInterval(self.timer);
if (self.currentState === 'RUNNING') {
self.currentState = 'PAUSED';
self.notifyTimerPause();
return;
}
if (self.currentState === 'PAUSED') {
self.currentState = 'RUNNING';
self.resumeTimer();
self.notifyTimerResume();
return;
}
console.log('Currently stopped.');
});
}
handleStartCommand() {
this.currentState = 'RUNNING';
clearInterval(this.timer);
this.resumeTimer(true);
}
handlePauseCommand() {
this.currentState = 'PAUSED';
clearInterval(this.timer);
}
handleResumeCommand() {
this.currentState = 'RUNNING';
this.resumeTimer();
}
handleRestartCommand() {
clearInterval(this.timer);
this.currentState = 'STOPPED';
this.elapsedTime = 0;
this._.timerLabel.text(`${this.elapsedTime}s`);
}
resumeTimer(restart = false) {
let self = this;
if (restart) self.elapsedTime = 0;
self.timer = setInterval(function() {
self.elapsedTime += 1;
self._.timerLabel.text(`${self.elapsedTime}s`);
}, 1000);
}
notifyTimerPause() {
this.dispatchEvent(this.timerPaused.name, {})
}
timerPaused(data, callback) {
this.registerEventSignature(this.timerPaused.name, data, callback);
}
notifyTimerResume() {
this.dispatchEvent(this.timerResumed.name, {})
}
timerResumed(data, callback) {
this.registerEventSignature(this.timerResumed.name, data, callback);
}
}
let timerPlugster = await new TimerPlugster({
timerLabel: {}
}).init();
Plugster.plug(timerPlugster);
Timer controlado por el centro de control que se muestra arriba, y también por sí mismo.