org.dominokit.domino.ui.cards.Card Maven / Gradle / Ivy
package org.dominokit.domino.ui.cards;
import elemental2.dom.*;
import org.dominokit.domino.ui.grid.flex.FlexAlign;
import org.dominokit.domino.ui.grid.flex.FlexItem;
import org.dominokit.domino.ui.grid.flex.FlexLayout;
import org.dominokit.domino.ui.icons.BaseIcon;
import org.dominokit.domino.ui.icons.Icons;
import org.dominokit.domino.ui.keyboard.KeyboardEvents;
import org.dominokit.domino.ui.style.Color;
import org.dominokit.domino.ui.style.Style;
import org.dominokit.domino.ui.style.Styles;
import org.dominokit.domino.ui.utils.BaseDominoElement;
import org.dominokit.domino.ui.utils.DominoElement;
import org.dominokit.domino.ui.utils.HasBackground;
import org.dominokit.domino.ui.utils.TextNode;
import org.jboss.gwt.elemento.core.IsElement;
import static java.util.Objects.isNull;
import static java.util.Objects.nonNull;
import static org.dominokit.domino.ui.cards.CardStyles.*;
import static org.jboss.gwt.elemento.core.Elements.*;
public class Card extends BaseDominoElement implements HasBackground {
private final FlexItem logoContainer;
private DominoElement root = DominoElement.div().addCss(CARD);
private DominoElement header = DominoElement.div().addCss(HEADER);
private DominoElement headerTitle = DominoElement.of(h(2));
private DominoElement headerDescription = DominoElement.of(small());
private DominoElement headerBar = DominoElement.of(ul()).addCss(HEADER_ACTIONS);
private DominoElement body = DominoElement.div().addCss(BODY);
private Text title = TextNode.empty();
private Text description = TextNode.empty();
private boolean collapsible = false;
private HTMLLIElement collapseAction;
private BaseIcon collapseIcon;
private Color headerBackground;
private Color bodyBackground;
public Card() {
headerTitle
.appendChild(title)
.appendChild(headerDescription);
logoContainer = FlexItem.create();
header.appendChild(FlexLayout.create()
.appendChild(logoContainer
.css(Styles.m_r_10)
.setAlignSelf(FlexAlign.CENTER))
.appendChild(FlexItem.create()
.setAlignSelf(FlexAlign.CENTER)
.setFlexGrow(1)
.appendChild(headerTitle))
.appendChild(FlexItem.create().appendChild(headerBar))
);
root.appendChild(header)
.appendChild(body);
headerDescription.appendChild(description);
body.getCollapsible().addHideHandler(() -> {
if (collapsible) {
collapseIcon.element().textContent = Icons.ALL.keyboard_arrow_down().getName();
}
});
body.getCollapsible().addShowHandler(() -> {
if (collapsible) {
collapseIcon.element().textContent = Icons.ALL.keyboard_arrow_up().getName();
}
});
init(this);
}
public static Card create() {
Card card = new Card();
card.header.hide();
return card;
}
public static Card create(String title) {
Card card = new Card();
card.setTitle(title);
return card;
}
public static Card create(String title, String description) {
Card card = new Card();
card.setTitle(title);
card.setDescription(description);
return card;
}
public static Card createProfile(String name, String info) {
Card profileCard = Card.create(name, info);
profileCard.style().setMarginBottom("0px");
profileCard.setBackground(Color.THEME);
return profileCard;
}
public Card setTitle(String titleText) {
title.textContent = titleText;
return this;
}
public Card setDescription(String descriptionText) {
description.textContent = descriptionText;
return this;
}
public Card appendDescriptionChild(Node node) {
headerDescription.appendChild(node);
return this;
}
public Card appendDescriptionChild(IsElement element) {
return appendDescriptionChild(element.element());
}
public Card appendChild(Node content) {
getBody().appendChild(content);
return this;
}
public Card appendChild(IsElement element) {
getBody().appendChild(element.element());
return this;
}
public Card setHeaderBackground(Color headerBackground) {
if (nonNull(this.headerBackground)) {
header.style().remove(this.headerBackground.getBackground());
}
this.headerBackground = headerBackground;
header.style().add(headerBackground.getBackground());
return this;
}
public Card setBodyBackground(Color bodyBackground) {
if (nonNull(this.bodyBackground)) {
body.style().remove(this.bodyBackground.getBackground());
}
this.bodyBackground = bodyBackground;
body.style().add(bodyBackground.getBackground());
return this;
}
public Card fitContent() {
style.add(FIT_CONTENT);
return this;
}
public Card unFitContent() {
style.remove(FIT_CONTENT);
return this;
}
@Override
public Card setBackground(Color background) {
setHeaderBackground(background);
setBodyBackground(background);
return this;
}
public DominoElement getHeader() {
return header;
}
public DominoElement getHeaderBar() {
return headerBar;
}
public DominoElement getBody() {
return body;
}
public DominoElement getHeaderTitle() {
return headerTitle;
}
public DominoElement getHeaderDescription() {
return headerDescription;
}
public static HTMLLIElement createIcon(BaseIcon icon) {
return li().add(
a().add(icon))
.element();
}
public Card addHeaderAction(BaseIcon icon, EventListener eventListener) {
HTMLLIElement actionItem = createHeaderAction(icon);
actionItem.addEventListener("click", eventListener);
putAction(actionItem);
return this;
}
public Card addHeaderAction(HeaderAction headerAction) {
putAction(headerAction.element());
return this;
}
private void putAction(HTMLLIElement actionItem) {
if (nonNull(collapseAction) && collapsible) {
headerBar.insertBefore(actionItem, collapseAction);
} else {
headerBar.appendChild(actionItem);
}
}
private HTMLLIElement createHeaderAction(BaseIcon icon) {
return li().add(a()
.add(icon
.clickable()
.styler(style -> style
.add(Styles.pull_right, ACTION_ICON))))
.element();
}
public Card setCollapsible() {
collapseIcon = Icons.ALL.keyboard_arrow_up();
collapseIcon.setAttribute("tabindex", "0");
if (isNull(collapseAction)) {
collapseAction = createHeaderAction(collapseIcon);
}
KeyboardEvents.listenOn(collapseAction).onEnter(evt -> switchVisibilty());
collapseAction.addEventListener("click", evt -> switchVisibilty());
putAction(collapseAction);
this.collapsible = true;
return this;
}
private void switchVisibilty() {
if (collapsible) {
if (body.getCollapsible().isHidden()) {
show();
} else {
hide();
}
}
}
public Card toggle() {
if (isHidden()) {
show();
} else {
hide();
}
return this;
}
@Override
public Card show() {
body.getCollapsible().show();
return this;
}
@Override
public Card hide() {
body.getCollapsible().hide();
return this;
}
@Override
public boolean isHidden() {
return body.getCollapsible().isHidden();
}
public Card setBodyPadding(String padding) {
body.style().setPadding(padding);
return this;
}
public Card setBodyPaddingLeft(String padding) {
body.style().setPaddingLeft(padding);
return this;
}
public Card setBodyPaddingRight(String padding) {
body.style().setPaddingRight(padding);
return this;
}
public Card setBodyPaddingTop(String padding) {
body.style().setPaddingTop(padding);
return this;
}
public Card setBodyPaddingBottom(String padding) {
body.style().setPaddingBottom(padding);
return this;
}
public Card setHeaderLogo(Node node) {
logoContainer.clearElement();
logoContainer.appendChild(node);
return this;
}
public Card setHeaderLogo(IsElement element) {
setHeaderLogo(element.element());
return this;
}
public Card showHeader() {
return setHeaderVisible(true);
}
public Card hideHeader() {
return setHeaderVisible(false);
}
public Card setHeaderVisible(boolean headerVisible) {
this.header.toggleDisplay(headerVisible);
return this;
}
public Style> bodyStyle() {
return body.style();
}
public Card clearBody() {
getBody().clearElement();
return this;
}
@Override
public HTMLDivElement element() {
return root.element();
}
}