Skip to content

Commit

Permalink
fix #1009 Tree does not collapse reliable
Browse files Browse the repository at this point in the history
  • Loading branch information
@vegegoku
vegegoku committed Feb 19, 2025
1 parent 35c94ed commit a6b3536
Show file tree
Hide file tree
Showing 13 changed files with 143 additions and 680 deletions.
8 changes: 0 additions & 8 deletions domino-ui/src/main/java/org/dominokit/domino/ui/button/BaseButton.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@

import static java.util.Objects.nonNull;
import static org.dominokit.domino.ui.button.ButtonStyles.*;
import static org.dominokit.domino.ui.utils.Domino.*;
import static org.dominokit.domino.ui.utils.Domino.div;
import static org.dominokit.domino.ui.utils.Domino.span;

Expand All @@ -29,7 +28,6 @@
import org.dominokit.domino.ui.elements.SpanElement;
import org.dominokit.domino.ui.icons.Icon;
import org.dominokit.domino.ui.style.BooleanCssClass;
import org.dominokit.domino.ui.style.WaveStyle;
import org.dominokit.domino.ui.style.WavesElement;
import org.dominokit.domino.ui.utils.AcceptDisable;
import org.dominokit.domino.ui.utils.ChildHandler;
Expand Down Expand Up @@ -149,7 +147,6 @@ public HTMLElement getClickableElement() {
*/
public B circle() {
buttonElement.addCss(ButtonStyles.dui_circle);
applyCircleWaves();
return (B) this;
}

Expand Down Expand Up @@ -265,9 +262,4 @@ public HTMLElement element() {
public B asButton() {
return (B) this;
}

private void applyCircleWaves() {
setWaveStyle(WaveStyle.CIRCLE);
setWaveStyle(WaveStyle.FLOAT);
}
}
89 changes: 48 additions & 41 deletions domino-ui/src/main/java/org/dominokit/domino/ui/collapsible/HeightCollapseStrategy.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@

import static org.dominokit.domino.ui.collapsible.Collapsible.DUI_COLLAPSED;
import static org.dominokit.domino.ui.style.GenericCss.dui_transition_none;
import static org.dominokit.domino.ui.utils.Domino.*;
import static org.dominokit.domino.ui.utils.ElementsFactory.elements;

import elemental2.dom.AddEventListenerOptions;
Expand All @@ -26,7 +25,6 @@
import elemental2.dom.EventListener;
import org.dominokit.domino.ui.utils.DominoElement;
import org.dominokit.domino.ui.utils.DominoId;
import org.dominokit.domino.ui.utils.IsCollapsible;

/**
* An implementation of {@link org.dominokit.domino.ui.collapsible.CollapseStrategy} that uses the
Expand All @@ -35,11 +33,10 @@
public class HeightCollapseStrategy implements CollapseStrategy, CollapsibleStyles {

private static final String EXPAND_COLLAPSE_HEIGHT_VAR = "--dui-element-expand-collapse-height-";
private static final String DUI_EXPANDED_HEIGHT = "dui-expanded-height";
private static final String DUI_EXPAND_COLLAPSE_VAR = "dui-expand-collapse-var";

private final CollapsibleDuration transition;
private final String heightVar;
private final String initialHeight;
private CollapsibleHandlers handlers;
private DominoElement<Element> target;

Expand All @@ -48,66 +45,79 @@ public HeightCollapseStrategy() {
this(CollapsibleDuration._300ms);
}

/** Create a HeightCollapseStrategy with a default duration of 300ms */
public HeightCollapseStrategy(String initialHeight) {
this(initialHeight, CollapsibleDuration._300ms);
}

/**
* Create a HeightCollapseStrategy with the provided duration
*
* @param transition The height animation {@link CollapsibleDuration}
*/
public HeightCollapseStrategy(CollapsibleDuration transition) {
this("auto", transition);
}

/**
* Create a HeightCollapseStrategy with the provided duration
*
* @param transition The height animation {@link CollapsibleDuration}
*/
public HeightCollapseStrategy(String initialHeight, CollapsibleDuration transition) {
this.transition = transition;
this.heightVar = DominoId.unique(EXPAND_COLLAPSE_HEIGHT_VAR);
this.initialHeight = initialHeight;
}

/** @dominokit-site-ignore {@inheritDoc} */
@Override
public void init(Element element, CollapsibleHandlers handlers) {
this.target = elements.elementOf(element);
this.target.setAttribute(DUI_EXPAND_COLLAPSE_VAR, this.heightVar);
this.target.setCssProperty("height", "var(" + this.heightVar + ", auto)");
this.target.setCssProperty("height", "var(" + this.heightVar + "," + this.initialHeight + ")");
this.handlers = handlers;
this.target.addCss(dui_height_collapsed_overflow).addCss(transition.getStyle());
this.target
.addCss(dui_height_collapsed_overflow, dui_height_collapsed)
.addCss(transition.getStyle());
}

/** @dominokit-site-ignore {@inheritDoc} */
@Override
public void cleanup(Element element) {
elements.elementOf(element).addCss(dui_height_collapsed_overflow).addCss(transition.getStyle());
element.removeAttribute("dom-ui-collapse-height");
elements
.elementOf(element)
.removeCss(dui_height_collapsed_overflow)
.removeCss(dui_height_collapsed)
.removeCss(transition.getStyle());
}

/** @dominokit-site-ignore {@inheritDoc} */
@Override
public void expand(Element element) {
this.target.nowOrWhenAttached(
() -> {
boolean noTransition = dui_transition_none.isAppliedTo(this.target);
this.target.addCss(dui_transition_none);
this.target.setCssProperty(this.heightVar, "auto");
this.target.setAttribute("dui-default-height", this.target.element().scrollHeight);
this.target.setCssProperty(this.heightVar, "0px");
if (!noTransition) {
this.target.removeCss(dui_transition_none);
}
this.handlers.onBeforeExpand().run();
expandElement(element);
});
}

private double getActualHeight() {
double contentHeight =
this.target.childElements().stream()
.filter(IsCollapsible::isExpanded)
.mapToDouble(e -> e.getBoundingClientRect().height)
.sum();

double elementHeight = this.target.getBoundingClientRect().height;
return Math.max(elementHeight, contentHeight);
}

private void expandElement(Element element) {
if (dui_transition_none.isAppliedTo(this.target)) {
this.target.setCssProperty(this.heightVar, "auto");
this.target.removeAttribute(DUI_COLLAPSED);
handlers.onExpandCompleted().run();
} else {
EventListener stopListener =
evt -> {
handlers.onExpandCompleted().run();
double actualHeight = getActualHeight();
this.target.setCssProperty(this.heightVar, "auto");
this.target.setAttribute(DUI_EXPANDED_HEIGHT, actualHeight);
handlers.onExpandCompleted().run();
};

AddEventListenerOptions addEventListenerOptions = AddEventListenerOptions.create();
Expand All @@ -125,19 +135,19 @@ private void expandElement(Element element) {
.element()
.addEventListener("oanimationend", stopListener, addEventListenerOptions);
this.target.element().addEventListener("animationend", stopListener, addEventListenerOptions);
}

this.target.removeAttribute(DUI_COLLAPSED);
this.target.setCssProperty(this.heightVar, getActualHeight() + "px");
}

this.target.removeCss(dui_height_collapsed);
String expandedHeight = this.target.getAttribute(DUI_EXPANDED_HEIGHT);

if ("auto".equals(expandedHeight)) {
double actualHeight = getActualHeight();
this.target.setCssProperty(this.heightVar, actualHeight + "px");
this.target.removeAttribute(DUI_COLLAPSED);
} else {
this.target.setCssProperty(this.heightVar, expandedHeight + "px");
this.target.removeAttribute(DUI_COLLAPSED);
}
private double getActualHeight() {
if (this.target.hasAttribute("dui-default-height")) {
return Math.max(
Double.parseDouble(this.target.getAttribute("dui-default-height")),
this.target.element().scrollHeight);
}
return this.target.element().scrollHeight;
}

/** @dominokit-site-ignore {@inheritDoc} */
Expand All @@ -147,17 +157,16 @@ public void collapse(Element element) {
this.target.apply(
self -> {
if (self.isAttached()) {
double actualHeight = getActualHeight();
this.target.setAttribute(DUI_EXPANDED_HEIGHT, actualHeight);
this.target.setCssProperty(this.heightVar, actualHeight + "px");
this.target.setCssProperty(this.heightVar, getActualHeight() + "px");

this.handlers.onBeforeCollapse().run();
collapseElement(element);
handlers.onCollapseCompleted().run();
} else {
self.onAttached(
(e, mutationRecord) -> {
this.target.setAttribute(DUI_EXPANDED_HEIGHT, "auto");

// this.target.setAttribute(DUI_EXPANDED_HEIGHT, "auto");
this.target.setCssProperty(this.heightVar, "auto");
this.handlers.onBeforeCollapse().run();
this.target.addCss(dui_transition_none);
Expand All @@ -175,13 +184,11 @@ private void collapseElement(Element element) {
if (dui_transition_none.isAppliedTo(this.target)) {
this.target.setAttribute(DUI_COLLAPSED, "true");
this.target.setCssProperty(this.heightVar, "0px");
this.target.addCss(dui_height_collapsed);
} else {
DomGlobal.requestAnimationFrame(
timestamp -> {
this.target.setAttribute(DUI_COLLAPSED, "true");
this.target.setCssProperty(this.heightVar, "0px");
this.target.addCss(dui_height_collapsed);
});
}
}
Expand Down
Loading

0 comments on commit a6b3536

Please sign in to comment.