89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import CommentPanel from "./edition-panels/CommentPanel.js";
|
|
import Store from "../store.js";
|
|
|
|
/**
|
|
* Class representing the Add Button.
|
|
*/
|
|
class AddButton {
|
|
/**
|
|
* Create an AddButton.
|
|
* @param {string} selector - The CSS selector for the button.
|
|
*/
|
|
constructor(position) {
|
|
this._button = this._createButton(position);
|
|
this._initEventListeners();
|
|
}
|
|
|
|
/**
|
|
* Create and return a new button element with the specified HTML content.
|
|
* @return {HTMLButtonElement} The created button element.
|
|
* @private
|
|
*/
|
|
_createButton(position) {
|
|
const div = document.createElement("div");
|
|
div.innerHTML = `<button class="fc__btn fc__btn-add fc__btn-add--${position} fc__btn-add--free" title="New comment">
|
|
<img class="fc__icon fc__plus" src="${Store.filesPath}/icons/chat-box-plus.svg">
|
|
</button>`;
|
|
const button = div.firstChild;
|
|
document.body.appendChild(button);
|
|
return button;
|
|
}
|
|
|
|
/**
|
|
* Initialize the event listeners for the button.
|
|
* @private
|
|
*/
|
|
_initEventListeners() {
|
|
this._button.addEventListener("click", this._handleClick.bind(this));
|
|
window.addEventListener("mousemove", this._handleMouseMove.bind(this));
|
|
window.addEventListener("keydown", this._handleKeyDown.bind(this));
|
|
}
|
|
|
|
/**
|
|
* Handle the click event on the button.
|
|
* @private
|
|
*/
|
|
_handleClick(event) {
|
|
if (this._button.classList.contains("fc__btn-add--move")) {
|
|
const commentPanel = new CommentPanel();
|
|
commentPanel.create();
|
|
this._resetPosition();
|
|
}
|
|
this._button.classList.toggle("fc__btn-add--move");
|
|
}
|
|
|
|
/**
|
|
* Handle the mousemove event on the window.
|
|
* @private
|
|
*/
|
|
_handleMouseMove(event) {
|
|
if (this._button.classList.contains("fc__btn-add--move")) {
|
|
const iconSize = 48;
|
|
this._button.style.left = event.clientX - iconSize / 2 + "px";
|
|
this._button.style.top =
|
|
event.clientY + window.scrollY - iconSize / 2 + "px";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle the keydown event on the window.
|
|
* @private
|
|
*/
|
|
_handleKeyDown(event) {
|
|
if (event.key === "Escape") {
|
|
this._button.classList.remove("fc__btn-add--move");
|
|
this._resetPosition();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reset the position of the button.
|
|
* @private
|
|
*/
|
|
_resetPosition() {
|
|
this._button.style.left = "";
|
|
this._button.style.top = "";
|
|
}
|
|
}
|
|
|
|
export default AddButton;
|