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

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

import BlazeElement from "./element";
import BlazeHeading from "./heading";

  const icSSpDvzhRAW = document.createElement("style");
  icSSpDvzhRAW.textContent = `.blzDetails {
  color: var(--blz-text);
  background-color: var(--blz-bg-light);
  padding: 0.8rem;
  border-radius: 0.5rem;
}

.blzDetails summary {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.blzDetails[open] summary {
  margin-bottom: 0.5rem;
}

.blzDetails summary h1 {
  margin-bottom: 0;
}

/* triangle marker */
.blzDetails summary::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--blz-text);
  transform: rotate(90deg);
  margin-right: 0.6rem;
  margin-bottom: 0.1rem;
  transition: transform 0.3s ease;
}

.blzDetails[open] summary::before {
  transform: rotate(180deg);
}
`;
  document.head.appendChild(icSSpDvzhRAW);
  
export default class BlazeDetails extends BlazeElement {
    /**
     * Create a {@link BlazeDetails}.
     *
     * @param summary The detail's summary text
     * @param content An {@link HTMLElement} to place inside the details tag
     * @param size The summary tag's font size in `rem` units, if none is given then size will be `auto`
     */
    constructor(summary, content, size) {
        const element = document.createElement("details");
        element.classList.add("blzDetails");
        super(element);
        this.summary = document.createElement("summary");
        this.summaryText = new BlazeHeading(summary, 1, size);
        this.summary.appendChild(this.summaryText.element);
        this.content = content;
        this.element.appendChild(this.summary);
        this.element.appendChild(this.content);
    }
    /**
     * Sets the summary tag's font size.
     *
     * @param size The summary tag's new font size in `rem` units
     */
    setSize(size) {
        this.summaryText.size = size;
        this.summaryText.applyStyles();
    }
}
//# sourceMappingURL=details.js.map