@exmg/lit-controllers
v3.0.3
Published
Exmg Lit Controllers
Downloads
416
Readme
Exmg Lit Utils @exmg/lit-controllers
Content
Links
Features
The LitControllers package provide Lit Controllers to integrate in Lit Component to enhance them with neat features
- Interval Controller
- Mouse Controller
Setup
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.
Development
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.
Usage
Interval Controller
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> `;
}
}
Mouse Controller
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>
`;
}
}