panel.js

import { Component } from "./component.js";
import { Style } from "./style.js";

/**
 * Creates a panel to be used as a parent for other components.
 * <div><img src="https://www.minicomps.org/images/panel.png"/></div>
 * @example
 * const panel = new Panel(document.body, 20, 20, 200, 200);
 * new Button(panel, 20, 20, "Click");
 * @extends Component
 */
export class Panel extends Component {
  /**
   * Constructor
   * @param {HTMLElement} parent - The element to add this panel to.
   * @param {number} x - The x position of the panel. Default 0.
   * @param {number} y - The y position of the panel. Default 0.
   * @param {number} w - The width of the panel. Default window.innerWidth.
   * @param {number} h - The height of the panel. Default window.innerHeight.
   */
  constructor(parent, x, y, w, h) {
    super(parent, x, y);
    w = w || window.innerWidth;
    h = h || window.innerHeight;

    this._createChildren();
    this._createStyle();
    this.setSize(w, h);
    this._addToParent();
  }

  //////////////////////////////////
  // Core
  //////////////////////////////////

  _createChildren() {
    this._setWrapperClass("MinimalPanel");
  }

  _createStyle() {
    const style = document.createElement("style");
    style.textContent = Style.panel;
    this.shadowRoot.append(style);
  }

  //////////////////////////////////
  // Public
  //////////////////////////////////

  setX(x) {
    this._x = x;
    // we'll use margins to position the panel so it plays well with other stuff on the page.
    this.style.marginLeft = x + "px";
    return this;
  }

  setY(y) {
    this._y = y;
    this.style.marginTop = y + "px";
    return this;
  }

  //////////////////////////////////
  // Getters/Setters
  // alphabetical. getter first.
  //////////////////////////////////

  get x() {
    return this.getX();
  }
  set x(x) {
    this.setX(x);
  }

  get y() {
    return this.getY();
  }
  set y(y) {
    this.setY(y);
  }
}

customElements.define("minimal-panel", Panel);