98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
class Cover extends Base {
|
|
constructor(...params) {
|
|
super(...params);
|
|
this.onSliderMove = this.onSliderMove.bind(this);
|
|
this.removeSlider = this.removeSlider.bind(this);
|
|
}
|
|
|
|
getContainer() {
|
|
const entity = super.getContainer();
|
|
entity.onmousedown = (event) => {
|
|
this.addSlider(event.x, event.y);
|
|
};
|
|
entity.onpointerdown = (event) => {
|
|
this.addSlider(event.x, event.y)
|
|
}
|
|
entity.onmouseup = this.removeSlider
|
|
entity.ontouchend = this.removeSlider
|
|
return entity;
|
|
}
|
|
|
|
updateState(state) {
|
|
this.name = (state.attributes || {}).friendly_name || this.id;
|
|
this.state = state.attributes.current_position;
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
super.render();
|
|
const container = document.getElementById(this.id);
|
|
if (container) {
|
|
container.classList.add(this.state);
|
|
}
|
|
}
|
|
|
|
addSlider(offsetX, offsetY) {
|
|
const slider = document.createElement("div");
|
|
slider.id = `slider-${this.id}`;
|
|
slider.classList.add("ha-slider");
|
|
|
|
// click location minus height minus margins
|
|
slider.style.top = `calc(${offsetY}px - 60px - 200px + calc(2px * ${this.state}))`;
|
|
// click location minus width/2 minus margins
|
|
slider.style.left = `calc(${offsetX}px - 60px - 1.5rem)`;
|
|
|
|
const sliderFill = document.createElement("div");
|
|
sliderFill.id = `slider-fill-${this.id}`;
|
|
sliderFill.classList.add("ha-slider-fill");
|
|
sliderFill.style.height = `${this.state}%`;
|
|
sliderFill.innerHTML = this.state;
|
|
|
|
slider.appendChild(sliderFill);
|
|
document.body.appendChild(slider);
|
|
|
|
document.body.addEventListener("mouseup", this.removeSlider);
|
|
document.body.addEventListener("touchend", this.removeSlider)
|
|
document.body.addEventListener("mousemove", this.onSliderMove);
|
|
document.body.addEventListener("touchmove", this.onSliderMove);
|
|
|
|
this.sliderStartY = offsetY;
|
|
this.sliderState = this.state;
|
|
}
|
|
|
|
onSliderMove(event) {
|
|
let y = event.y
|
|
if(event.touches) {
|
|
y = event.touches[0].clientY
|
|
}
|
|
const sliderFill = document.getElementById(`slider-fill-${this.id}`);
|
|
if (sliderFill) {
|
|
const offset = this.sliderStartY - y;
|
|
this.sliderState = this.state + Math.round((100 / 200) * offset);
|
|
if(this.sliderState > 100) this.sliderState = 100
|
|
if(this.sliderState < 0) this.sliderState = 0
|
|
sliderFill.style.height = `${this.sliderState}%`;
|
|
sliderFill.innerHTML = this.sliderState;
|
|
}
|
|
}
|
|
|
|
removeSlider() {
|
|
const slider = document.getElementById(`slider-${this.id}`);
|
|
if (slider) {
|
|
slider.remove();
|
|
}
|
|
document.body.removeEventListener("mouseup", this.removeSlider);
|
|
document.body.removeEventListener("touchend", this.removeSlider)
|
|
document.body.removeEventListener("mousemove", this.onSliderMove);
|
|
document.body.removeEventListener("touchmove", this.onSliderMove);
|
|
this.sendNewState();
|
|
}
|
|
|
|
sendNewState() {
|
|
this.mm.sendSocketNotification("SET_COVER_POSITION", {
|
|
entity: this.id,
|
|
position: this.sliderState,
|
|
});
|
|
}
|
|
}
|