Skip to content

Commit

Permalink
fix #821 Ability to register open/close listeners for side drawers(le…
Browse files Browse the repository at this point in the history
…ft | right)
  • Loading branch information
vegegoku committed Aug 27, 2023
1 parent fc58a22 commit ea1396a
Show file tree
Hide file tree
Showing 4 changed files with 286 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
* Copyright © 2019 Dominokit
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.dominokit.domino.ui.animations;

public interface TransitionListener<T> {
void onTransitionEvent(T target);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
/*
* Copyright © 2019 Dominokit
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.dominokit.domino.ui.animations;

import static org.dominokit.domino.ui.utils.ElementsFactory.elements;

import elemental2.dom.Element;
import elemental2.dom.EventListener;
import java.util.HashSet;
import java.util.Set;
import org.dominokit.domino.ui.IsElement;
import org.dominokit.domino.ui.events.EventOptions;
import org.dominokit.domino.ui.utils.LazyInitializer;

public class TransitionListeners<E extends Element, T extends IsElement<E>> {

private final T target;
private final Set<TransitionListener<? super T>> startListeners = new HashSet<>();
private final Set<TransitionListener<? super T>> cancelListeners = new HashSet<>();
private final Set<TransitionListener<? super T>> endListeners = new HashSet<>();

private final LazyInitializer eventsLazyInitializer;

public static <E extends Element, T extends IsElement<E>> TransitionListeners<E, T> of(T target) {
return new TransitionListeners<>(target);
}

public TransitionListeners(T target) {
this.target = target;
EventListener startListener =
evt -> {
startListeners.forEach(
listener -> {
if (evt.target.equals(this.target.element())) {
listener.onTransitionEvent(target);
}
});
};
EventListener cancelListener =
evt -> {
if (evt.target.equals(this.target.element())) {
cancelListeners.forEach(listener -> listener.onTransitionEvent(target));
}
};
EventListener endListener =
evt -> {
if (evt.target.equals(this.target.element())) {
endListeners.forEach(listener -> listener.onTransitionEvent(target));
}
};
this.eventsLazyInitializer =
new LazyInitializer(
() -> {
elements
.elementOf(target)
.addEventListener(
"webkitTransitionStart", startListener, EventOptions.of().setCapture(false));
elements
.elementOf(target)
.addEventListener(
"oTransitionStart", startListener, EventOptions.of().setCapture(false));
elements
.elementOf(target)
.addEventListener(
"transitionstart", startListener, EventOptions.of().setCapture(false));

elements
.elementOf(target)
.addEventListener(
"webkitTransitionCancel",
cancelListener,
EventOptions.of().setCapture(false));
elements
.elementOf(target)
.addEventListener(
"oTransitionCancel", cancelListener, EventOptions.of().setCapture(false));
elements
.elementOf(target)
.addEventListener(
"transitioncancel", cancelListener, EventOptions.of().setCapture(false));

elements
.elementOf(target)
.addEventListener(
"webkitTransitionEnd", endListener, EventOptions.of().setCapture(false));
elements
.elementOf(target)
.addEventListener(
"oTransitionEnd", endListener, EventOptions.of().setCapture(false));
elements
.elementOf(target)
.addEventListener(
"transitionend", endListener, EventOptions.of().setCapture(false));
});
}

public TransitionListeners<E, T> onTransitionStart(TransitionListener<? super T> listener) {
eventsLazyInitializer.apply();
startListeners.add(listener);
return this;
}

public TransitionListeners<E, T> removeTransitionStartListener(
TransitionListener<? super T> listener) {
startListeners.remove(listener);
return this;
}

public TransitionListeners<E, T> onTransitionCancel(TransitionListener<? super T> listener) {
eventsLazyInitializer.apply();
cancelListeners.add(listener);
return this;
}

public TransitionListeners<E, T> removeTransitionCancelListener(
TransitionListener<? super T> listener) {
cancelListeners.remove(listener);
return this;
}

public TransitionListeners<E, T> onTransitionEnd(TransitionListener<? super T> listener) {
eventsLazyInitializer.apply();
endListeners.add(listener);
return this;
}

public TransitionListeners<E, T> removeTransitionEndListener(
TransitionListener<? super T> listener) {
endListeners.remove(listener);
return this;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
import elemental2.dom.Event;
import elemental2.dom.HTMLDivElement;
import elemental2.dom.HTMLElement;
import java.util.HashSet;
import java.util.Set;
import org.dominokit.domino.ui.animations.TransitionListeners;
import org.dominokit.domino.ui.elements.AsideElement;
import org.dominokit.domino.ui.elements.DivElement;
import org.dominokit.domino.ui.elements.HeaderElement;
Expand Down Expand Up @@ -66,6 +69,11 @@ public class AppLayout extends BaseDominoElement<HTMLDivElement, AppLayout>
public SwapCssClass LEFT_DRAWER_SIZE = new SwapCssClass(dui_left_medium);
public SwapCssClass RIGHT_DRAWER_SIZE = new SwapCssClass(dui_right_medium);

public Set<ChildHandler<AppLayout, SectionElement>> leftDrawerOpenHandlers = new HashSet<>();
public Set<ChildHandler<AppLayout, SectionElement>> leftDrawerCloseHandlers = new HashSet<>();
public Set<ChildHandler<AppLayout, SectionElement>> rightDrawerOpenHandlers = new HashSet<>();
public Set<ChildHandler<AppLayout, SectionElement>> rightDrawerCloseHandlers = new HashSet<>();

/**
* create.
*
Expand Down Expand Up @@ -107,13 +115,51 @@ public AppLayout() {
LazyChild.of(
section().addCss(dui_left_drawer).addClickListener(Event::stopPropagation), layout)
.whenInitialized(leftDrawerToggle::get);
leftDrawer.whenInitialized(
() -> {
TransitionListeners.of(leftDrawer.element())
.onTransitionStart(
target -> {
if (dui_left_open.isAppliedTo(layout)) {
leftDrawerOpenHandlers.forEach(
handler -> handler.apply(this, leftDrawer.get()));
}
})
.onTransitionEnd(
target -> {
if (!dui_left_open.isAppliedTo(layout)) {
leftDrawerCloseHandlers.forEach(
handler -> handler.apply(this, leftDrawer.get()));
}
});
});

leftDrawerContent = LazyChild.of(aside().addCss(dui_layout_menu), leftDrawer);

rightDrawerToggle = initRightDrawerToggle(rightToggleIcon);
rightDrawer =
LazyChild.of(
section().addCss(dui_right_drawer).addClickListener(Event::stopPropagation), layout)
.whenInitialized(rightDrawerToggle::get);

rightDrawer.whenInitialized(
() -> {
TransitionListeners.of(rightDrawer.element())
.onTransitionStart(
target -> {
if (dui_right_open.isAppliedTo(layout)) {
rightDrawerOpenHandlers.forEach(
handler -> handler.apply(this, rightDrawer.get()));
}
})
.onTransitionEnd(
target -> {
if (!dui_right_open.isAppliedTo(layout)) {
rightDrawerCloseHandlers.forEach(
handler -> handler.apply(this, rightDrawer.get()));
}
});
});
rightDrawerContent = LazyChild.of(section().addCss(dui_layout_menu), rightDrawer);
overlay = LazyChild.of(div().addCss(GenericCss.dui_overlay), layout);

Expand Down Expand Up @@ -735,6 +781,46 @@ public boolean isRightDrawerOpen() {
return dui_right_open.isAppliedTo(layout);
}

public AppLayout onLeftDrawerOpen(ChildHandler<AppLayout, SectionElement> handler) {
leftDrawerOpenHandlers.add(handler);
return this;
}

public AppLayout removeLeftDrawerOpenListener(ChildHandler<AppLayout, SectionElement> handler) {
leftDrawerOpenHandlers.remove(handler);
return this;
}

public AppLayout onLeftDrawerClosed(ChildHandler<AppLayout, SectionElement> handler) {
leftDrawerCloseHandlers.add(handler);
return this;
}

public AppLayout removeLeftDrawerCloseListener(ChildHandler<AppLayout, SectionElement> handler) {
leftDrawerCloseHandlers.remove(handler);
return this;
}

public AppLayout onRightDrawerOpen(ChildHandler<AppLayout, SectionElement> handler) {
rightDrawerOpenHandlers.add(handler);
return this;
}

public AppLayout removeRightDrawerOpenListener(ChildHandler<AppLayout, SectionElement> handler) {
rightDrawerOpenHandlers.remove(handler);
return this;
}

public AppLayout onRightDrawerClosed(ChildHandler<AppLayout, SectionElement> handler) {
rightDrawerCloseHandlers.add(handler);
return this;
}

public AppLayout removeRightDrawerCloseListener(ChildHandler<AppLayout, SectionElement> handler) {
rightDrawerCloseHandlers.remove(handler);
return this;
}

/** {@inheritDoc} */
@Override
public HTMLDivElement element() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@
import jsinterop.base.Js;
import org.dominokit.domino.ui.DominoElementAdapter;
import org.dominokit.domino.ui.IsElement;
import org.dominokit.domino.ui.animations.TransitionListener;
import org.dominokit.domino.ui.animations.TransitionListeners;
import org.dominokit.domino.ui.collapsible.CollapseStrategy;
import org.dominokit.domino.ui.collapsible.Collapsible;
import org.dominokit.domino.ui.config.UIConfig;
Expand Down Expand Up @@ -140,6 +142,8 @@ public abstract class BaseDominoElement<E extends Element, T extends IsElement<E
private final List<Consumer<T>> onRemoveHandlers = new ArrayList<>();
private final Map<String, ComponentMeta> metaObjects = new HashMap<>();

private TransitionListeners<E, T> transitionListeners;

/**
* initialize the component using its root element giving it a unique id, a {@link
* org.dominokit.domino.ui.style.Style} and also initialize a {@link
Expand Down Expand Up @@ -171,6 +175,7 @@ protected void init(T element) {
};
keyEventsInitializer =
new LazyInitializer(() -> keyboardEvents = new KeyboardEvents<>(this.element()));
transitionListeners = TransitionListeners.of(element);
}

private boolean hasDominoId() {
Expand Down Expand Up @@ -2371,6 +2376,36 @@ public T removeBeforeExpandListener(Collapsible.ExpandHandler handler) {
return (T) this;
}

public T onTransitionStart(TransitionListener<? super T> listener) {
transitionListeners.onTransitionStart(listener);
return (T) this;
}

public T removeTransitionStartListener(TransitionListener<? super T> listener) {
transitionListeners.removeTransitionStartListener(listener);
return (T) this;
}

public T onTransitionCancel(TransitionListener<? super T> listener) {
transitionListeners.onTransitionCancel(listener);
return (T) this;
}

public T removeTransitionCancelListener(TransitionListener<? super T> listener) {
transitionListeners.removeTransitionCancelListener(listener);
return (T) this;
}

public T onTransitionEnd(TransitionListener<? super T> listener) {
transitionListeners.onTransitionEnd(listener);
return (T) this;
}

public T removeTransitionEndListener(TransitionListener<? super T> listener) {
transitionListeners.removeTransitionEndListener(listener);
return (T) this;
}

/** @return the currently applied {@link Elevation} */
/**
* Getter for the field <code>elevation</code>.
Expand Down

0 comments on commit ea1396a

Please sign in to comment.