add front-comments

site/plugins/front-comments/src/front/classes/AddBtn.js

@@ -0,0 +1,89 @@
+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;