The LitControllers package provide Lit Controllers to integrate in Lit Component to enhance them with neat features
- Interval Controller
- Mouse Controller
git clone
the project, then simply run npm i
💡 Your NPM CLI must be connected to an authorized NPM account on @exmg
namespace in NPM.
To do so, please follow the instructions.
The development process takes place on dedicated feature or fix branches.
Each branch is then merged into master
branch.
Please refer to the naming conventions for branches in the good practices section.
The Interval Controller provides functions to execute code on a regular interval.
Two modes are available; AUTO
and MANUAL
, the first will start once the component is initialized, the second will wait for startInterval
function to be called.
At any moment, the execution can be stopped by running stopInterval
function.
By default the mode is set to AUTO
, you can specify the interval using the timer
property on the config object.
interface IntervalControllerConfig {
callback?: () => void;
mode?: IntervalModeType;
timer?: number;
}
@customElement('my-component')
export class MyComponent extends LitElement {
intervalController = new IntervalController(this, {
timer: 1000,
callback: () => this.updateContent(),
});
@property({type: Number})
now = new Date();
updateContent() {
this.now = new Date();
}
render() {
return html` <div class="main">The time is ${this.now.toLocaleTimeString()}</div> `;
}
}
The Mouse Controller returns the x
and y
position of the mouse once implemented.
Those properties are accessibe through this.mouseController.x
and this.mouseController.y
@customElement('my-component')
export class MyComponent extends LitElement {
mouseController = new MouseController(this);
render() {
return html`
<div class="main">Your mouse position : X: ${this.mouseController.pos.x} Y: ${this.mouseController.pos.y}</div>
`;
}
}