Skip to content

Commit be49db7

Browse files
hpehlhpehl
committed
Native popover & tooltip polishing
1 parent 0223191 commit be49db7

File tree

4 files changed

+82
-89
lines changed

4 files changed

+82
-89
lines changed

‎components/src/main/java/org/patternfly/component/popover/NativePopover.java‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636
import org.patternfly.handler.CloseHandler;
3737
import org.patternfly.position.AnchorPositioning;
3838
import org.patternfly.popper.Placement;
39+
import org.patternfly.position.CssPositioning;
40+
import org.patternfly.style.Classes;
3941
import org.patternfly.style.Modifiers.NoPadding;
4042
import elemental2.dom.Element;
4143
import elemental2.dom.Event;
@@ -63,20 +65,19 @@
6365
import static org.patternfly.core.Aria.label;
6466
import static org.patternfly.core.Aria.labelledBy;
6567
import static org.patternfly.core.Aria.modal;
68+
import static org.patternfly.core.Attributes.popover;
6669
import static org.patternfly.core.Attributes.role;
6770
import static org.patternfly.core.Roles.dialog;
6871
import static org.patternfly.handler.CloseHandler.fireEvent;
6972
import static org.patternfly.handler.CloseHandler.shouldClose;
7073
import static org.patternfly.icon.IconSets.fas.times;
71-
import static org.patternfly.position.CssPositioning.popoverEnabled;
7274
import static org.patternfly.popper.Placement.auto;
7375
import static org.patternfly.popper.Placement.top;
7476
import static org.patternfly.style.Classes.arrow;
7577
import static org.patternfly.style.Classes.close;
7678
import static org.patternfly.style.Classes.component;
7779
import static org.patternfly.style.Classes.content;
7880
import static org.patternfly.style.Classes.modifier;
79-
import static org.patternfly.style.Classes.popover;
8081
import static org.patternfly.style.Classes.widthAuto;
8182

8283
/**
@@ -118,7 +119,7 @@ public static NativePopover nativePopover(Supplier<HTMLElement> trigger) {
118119
public static final int ENTRY_DELAY = 300;
119120
public static final int EXIT_DELAY = 300;
120121

121-
private final AnchorPositioning anchorPositioning;
122+
private final AnchorPositioning ap;
122123
private final HTMLElement contentElement;
123124
private final List<CloseHandler<NativePopover>> closeHandler;
124125

@@ -139,29 +140,28 @@ public static NativePopover nativePopover(Supplier<HTMLElement> trigger) {
139140
private HandlerRegistration scrollHandler;
140141

141142
NativePopover(Supplier<HTMLElement> trigger) {
142-
super(ComponentType.NativePopover, div().css(component(popover), top.modifier())
143+
super(ComponentType.NativePopover, div().css(component(Classes.popover), top.modifier())
143144
.attr(role, dialog)
144145
.aria(modal, true)
145146
.attr(Attributes.popover, "manual")
146147
.element());
147148

148149
String id = Id.unique(componentType().id);
149-
this.anchorPositioning = new AnchorPositioning(id, element(), trigger, DISTANCE, popoverEnabled());
150+
this.ap = new AnchorPositioning(id, element(), trigger, DISTANCE, CssPositioning.popoverEnabled());
150151
this.closeHandler = new ArrayList<>();
151152
this.visible = false;
152153
this.showClose = true;
153154
this.hoverable = false;
154-
this.entryDelay = ENTRY_DELAY;
155-
this.exitDelay = EXIT_DELAY;
156155
this.showTimeout = 0;
157156
this.hideTimeout = 0;
157+
this.entryDelay = ENTRY_DELAY;
158+
this.exitDelay = EXIT_DELAY;
158159
this.placement = auto;
159160

160161
String bodyId = Id.unique(componentType().id, "body");
161-
element().appendChild(div().css(component(popover, arrow)).element());
162-
element().appendChild(contentElement = div().css(component(popover, content)).element());
162+
element().appendChild(div().css(component(Classes.popover, arrow)).element());
163+
element().appendChild(contentElement = div().css(component(Classes.popover, content)).element());
163164
aria(describedBy, bodyId);
164-
165165
Attachable.register(this, this);
166166
}
167167

@@ -173,10 +173,10 @@ public void attach(MutationRecord mutationRecord) {
173173
failSafeRemoveFromParent(closeButton);
174174
}
175175

176-
HTMLElement trigger = anchorPositioning.attach();
176+
HTMLElement trigger = ap.attach();
177177
if (trigger != null) {
178178
// top is the default for auto and recalculated on show()
179-
anchorPositioning.applyPlacement(placement == auto ? top : placement);
179+
ap.applyPlacement(placement == auto ? top : placement);
180180

181181
if (hoverable) {
182182
triggerHandlers = compose(
@@ -187,18 +187,16 @@ public void attach(MutationRecord mutationRecord) {
187187
anchorHandlers = compose(
188188
bind(element(), mouseenter, e -> cancelTimers()),
189189
bind(element(), mouseleave, e -> scheduleHide()));
190-
if (!anchorPositioning.cssPositioning()) {
191-
scrollHandler = bind(document, scroll, true, e -> recalculatePlacement());
192-
}
193190

194191
} else {
195192
triggerHandlers = bind(trigger, click, this::togglePopover);
196-
if (!anchorPositioning.cssPositioning()) {
197-
scrollHandler = bind(document, scroll, true, e -> recalculatePlacement());
198-
}
199193
}
200194

201-
} else if (anchorPositioning.hasTriggerSupplier()) {
195+
if (!ap.cssPositioning()) {
196+
scrollHandler = bind(document, scroll, true, e -> recalculatePlacement());
197+
}
198+
199+
} else if (ap.hasTriggerSupplier()) {
202200
logger.error("Unable to find trigger element for popover %o", element());
203201
} else {
204202
logger.error("No trigger element defined for popover %o", element());
@@ -224,9 +222,7 @@ public void detach(MutationRecord mutationRecord) {
224222
if (triggerHandlers != null) {
225223
triggerHandlers.removeHandler();
226224
}
227-
if (anchorPositioning != null) {
228-
anchorPositioning.detach();
229-
}
225+
ap.detach();
230226
}
231227

232228
// ------------------------------------------------------ add
@@ -292,7 +288,7 @@ public NativePopover closable() {
292288

293289
public NativePopover closable(CloseHandler<NativePopover> closeHandler) {
294290
if (closeButton == null) {
295-
insertFirst(contentElement, div().css(component(popover, close))
291+
insertFirst(contentElement, div().css(component(Classes.popover, close))
296292
.add(closeButton = button()
297293
.plain()
298294
.icon(times())
@@ -304,7 +300,7 @@ public NativePopover closable(CloseHandler<NativePopover> closeHandler) {
304300
}
305301

306302
public NativePopover distance(int distance) {
307-
anchorPositioning.distance(distance);
303+
ap.distance(distance);
308304
return this;
309305
}
310306

@@ -367,22 +363,22 @@ public NativePopover status(Severity severity, String screenReaderText) {
367363
}
368364

369365
public NativePopover trigger(String trigger) {
370-
anchorPositioning.trigger(trigger);
366+
ap.trigger(trigger);
371367
return this;
372368
}
373369

374370
public NativePopover trigger(By trigger) {
375-
anchorPositioning.trigger(trigger);
371+
ap.trigger(trigger);
376372
return this;
377373
}
378374

379375
public NativePopover trigger(HTMLElement trigger) {
380-
anchorPositioning.trigger(trigger);
376+
ap.trigger(trigger);
381377
return this;
382378
}
383379

384380
public NativePopover trigger(Supplier<HTMLElement> trigger) {
385-
anchorPositioning.trigger(trigger);
381+
ap.trigger(trigger);
386382
return this;
387383
}
388384

@@ -423,16 +419,16 @@ public NativePopover onClose(CloseHandler<NativePopover> closeHandler) {
423419
// ------------------------------------------------------ api
424420

425421
public void show() {
426-
if (!visible && anchorPositioning.trigger() != null) {
427-
if (anchorPositioning.cssPositioning()) {
422+
if (!visible && ap.trigger() != null) {
423+
if (ap.cssPositioning()) {
428424
// CSS handles position-try-fallbacks; just apply preferred placement and show
429-
anchorPositioning.applyPlacement(placement == auto ? top : placement);
425+
ap.applyPlacement(placement == auto ? top : placement);
430426
element().showPopover();
431427
} else {
432428
// JS calculates best placement via viewport measurements
433429
style("visibility", "hidden");
434430
element().showPopover();
435-
anchorPositioning.applyBestPlacement(placement);
431+
ap.applyBestPlacement(placement);
436432
element().style.removeProperty("visibility");
437433
}
438434
visible = true;
@@ -471,7 +467,7 @@ private void scheduleHide() {
471467

472468
private void recalculatePlacement() {
473469
if (visible) {
474-
anchorPositioning.applyBestPlacement(placement);
470+
ap.applyBestPlacement(placement);
475471
}
476472
}
477473

@@ -489,7 +485,7 @@ private void togglePopover(Event event) {
489485
}
490486

491487
private void onOutsideClick(Event event) {
492-
HTMLElement trigger = anchorPositioning.trigger();
488+
HTMLElement trigger = ap.trigger();
493489
if (visible && trigger != null) {
494490
Element target = (Element) event.target;
495491
if (!element().contains(target) && !trigger.contains(target)) {

0 commit comments

Comments
 (0)