blaze-2d/lib/src/ui/input.js

A fast and simple WebGL 2 2D game engine written in TypeScript

import BlazeElement from "./element";
import BlazeText, { TextStyle } from "./text";

  const PzYbcPSnlhOC = document.createElement("style");
  PzYbcPSnlhOC.textContent = `.blzInput {
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0;
}

.blzInput input {
  font-family: var(--blz-mono);
  color: var(--blz-text-secondary);
  background-color: var(--blz-bg-light);
  border: 0.15rem solid var(--blz-bg-extra-light);
  border-radius: 0.2rem;
  outline: none;
  padding: 0.2rem 0.4rem;
}

.blzInput input:focus {
  color: var(--blz-text);
}
`;
  document.head.appendChild(PzYbcPSnlhOC);
  
export default class BlazeInput extends BlazeElement {
    /**
     * Create a {@link BlazeInput}.
     *
     * @param name The input's `name` attribute
     * @param placeholder The input's placeholder
     * @param size The input's font size in `rem` units
     */
    constructor(name, placeholder, size) {
        const element = document.createElement("div");
        element.classList.add("blzInput");
        super(element);
        this.input = document.createElement("input");
        this.input.name = name;
        this.input.placeholder = placeholder;
        this.input.style.fontSize = `${size}rem`;
        this.element.appendChild(this.input);
        this.name = name;
        this.placeholder = placeholder;
        this.size = size;
        this.input.addEventListener("input", () => {
            this.value = this.input.value;
            if (this.onInput)
                this.onInput(this.value);
        });
    }
    /**
     * Sets the input's value.
     *
     * @param value The input's new value
     */
    setValue(value) {
        this.value = value;
        this.input.value = value;
        if (this.onInput)
            this.onInput(this.value);
    }
    /**
     * Gets the input's current value.
     *
     * @returns The input's current value
     */
    getValue() {
        return this.value;
    }
    /**
     * Sets the input's name.
     *
     * @param name The input's new `name` attribute
     */
    setName(name) {
        this.name = name;
        this.input.name = name;
    }
    /**
     * Gets the input's `name` attribute.
     *
     * @returns The input's `name` attribute
     */
    getName() {
        return this.name;
    }
    /**
     * Sets the input's placeholder.
     *
     * @param name The input's new `placeholder` attribute
     */
    setPlaceholder(placeholder) {
        this.placeholder = placeholder;
        this.input.placeholder = placeholder;
    }
    /**
     * Gets the input's `placeholder` attribute.
     *
     * @returns The input's `placeholder` attribute
     */
    getPlaceholder() {
        return this.placeholder;
    }
    /**
     * Sets the input's font size.
     *
     * @param size The input's font size in `rem` units
     */
    setSize(size) {
        this.size = size;
        this.input.style.fontSize = `${size}rem`;
    }
    /**
     * Gets the input's font size.
     *
     * @returns The input's font size in `rem` units
     */
    getSize() {
        return this.size;
    }
    /**
     * Add a label above or to the side of the input.
     *
     * @param label The label's text
     * @param aside Wether the label is above or to the side of the input
     */
    addLabel(label, aside = false) {
        if (aside) {
            this.label = new BlazeText(label, this.size * 0.9, false, TextStyle.SECONDARY);
            this.element.style.flexDirection = "row";
            this.label.element.style.marginRight = `${this.size * 0.5}rem`;
            this.element.style.alignItems = "center";
        }
        else {
            this.label = new BlazeText(label, this.size * 0.8, false, TextStyle.SECONDARY);
            this.element.style.flexDirection = "column";
            this.element.style.alignItems = "";
            this.label.element.style.marginBottom = `${this.size * 0.3}rem`;
        }
        this.element.prepend(this.label.element);
    }
    /**
     * Remove the input's label.
     */
    removeLabel() {
        if (!this.label)
            return;
        this.label.element.remove();
    }
}
//# sourceMappingURL=input.js.map