From 481ce6f150d950c8f7b1179fd6835d5f48b9d3bd Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Thu, 18 Apr 2024 16:42:26 +0300 Subject: [PATCH 01/11] chore(site): rework `esl-popup` game demo page using ui playground --- site/src/esl-popup/esl-d-popup-game.ts | 4 +- site/views/draft/popup-game.njk | 164 ++++++++++++------------- 2 files changed, 82 insertions(+), 86 deletions(-) diff --git a/site/src/esl-popup/esl-d-popup-game.ts b/site/src/esl-popup/esl-d-popup-game.ts index 1e31242bb..a711db273 100644 --- a/site/src/esl-popup/esl-d-popup-game.ts +++ b/site/src/esl-popup/esl-d-popup-game.ts @@ -42,14 +42,14 @@ export class ESLDemoPopupGame extends ESLBaseElement { event.preventDefault(); } - @listen({auto: false, event: 'mouseleave mouseup'}) + @listen({auto: false, event: 'mouseup', target: () => document.body}) protected _onDragStop(): void { this.dragging = false; this.$$off(this._onDragging); this.$$off(this._onDragStop); } - @listen({auto: false, event: 'mousemove'}) + @listen({auto: false, event: 'mousemove', target: () => document.body}) @decorate(rafDecorator) protected _onDragging(event: MouseEvent): void { if (!this.dragging || !this.$trigger) return; diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index 9cd39342e..6aeb612b9 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -23,8 +23,8 @@ aside: --_font-size: calc(min(var(--_height, 300px), var(--_width, 300px)) / 3); position: relative; display: inline-block; - height: var(--_height, 300px); - width: var(--_width, 300px); + height: 300px; + width: 100%; background-color: #fff; } esl-d-popup-game:before, esl-d-popup-game:after { @@ -45,7 +45,7 @@ aside: position: absolute; display: inline-block; z-index: 1; - transition: top 0.15s ease-in-out, left 0.15s ease-in-out; + transition: top 0.01s ease-in-out, left 0.01s ease-in-out; padding: 2px 6px; border: none; border-radius: 50%; @@ -54,7 +54,7 @@ aside: font-size: 2rem; } .popup-game { - --_margin-arrow: 35px; + --_margin-arrow: 25px; } .popup-h[dir="rtl"] { text-align: right; @@ -88,86 +88,82 @@ aside:

This cool game will let you play with a popup.

Drag a trigger element and watch how the popup and its arrow move. Use the mouse wheel to resize the container. Use shift to switch the resize direction.

The green area on the edges of the container is determined by the offsetContainer value and means the safe zone in which popup can't come. The red zone on the edges of popup demonstrates the limits of arrow placement.

-

Horizontal, direction: LTR

-
-
- - - 🚀 - - -
-
- -
-
🇱 🇹 🇷 🐶 🐼
-
- - -
-

Horizontal, direction: RTL

-
-
-
- - - 🚀 - - -
-
- -
-
🇷 🇹 🇱 🦝 🐱
-
- - -
-

Vertical

-
-
-
- - - 🚀 - - -
+
+ + + + + + + + + + + + + + + + + + + + +
- -
-
V E 🇷 🇹 I C A 🇱 🐼
-
- -
From 1cbe24173ab34584cdf58cf204defe4f8e508b04 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Thu, 18 Apr 2024 17:04:13 +0300 Subject: [PATCH 02/11] chore(site): code refactoring --- site/src/esl-popup/esl-d-popup-game.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/esl-popup/esl-d-popup-game.ts b/site/src/esl-popup/esl-d-popup-game.ts index a711db273..c08199686 100644 --- a/site/src/esl-popup/esl-d-popup-game.ts +++ b/site/src/esl-popup/esl-d-popup-game.ts @@ -42,14 +42,14 @@ export class ESLDemoPopupGame extends ESLBaseElement { event.preventDefault(); } - @listen({auto: false, event: 'mouseup', target: () => document.body}) + @listen({auto: false, event: 'mouseup', target: window}) protected _onDragStop(): void { this.dragging = false; this.$$off(this._onDragging); this.$$off(this._onDragStop); } - @listen({auto: false, event: 'mousemove', target: () => document.body}) + @listen({auto: false, event: 'mousemove', target: window}) @decorate(rafDecorator) protected _onDragging(event: MouseEvent): void { if (!this.dragging || !this.$trigger) return; From 1e5e5b364621fd6bb7adefb7368b699ac1ea3001 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Mon, 3 Jun 2024 22:18:03 +0300 Subject: [PATCH 03/11] chore(site): code refactoring for `esl-d-popup-game` --- site/src/esl-popup/esl-d-popup-game.ts | 82 ++++++++++++----------- site/views/draft/popup-game.njk | 90 +++++++++++++------------- 2 files changed, 89 insertions(+), 83 deletions(-) diff --git a/site/src/esl-popup/esl-d-popup-game.ts b/site/src/esl-popup/esl-d-popup-game.ts index c08199686..2f3b225c2 100644 --- a/site/src/esl-popup/esl-d-popup-game.ts +++ b/site/src/esl-popup/esl-d-popup-game.ts @@ -1,12 +1,17 @@ import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core'; -import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; -import {rafDecorator} from '@exadel/esl/modules//esl-utils/async'; +import {ESLPopup} from '@exadel/esl/modules/esl-popup/core'; +import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {ESLResizeObserverTarget} from '@exadel/esl/modules/esl-utils/dom'; import {ESLTraversingQuery} from '@exadel/esl/modules/esl-traversing-query/core'; +import type {Point} from '@exadel/esl/modules/esl-utils/dom'; + /** Fun component like a game for checking popup positioning on edge cases */ export class ESLDemoPopupGame extends ESLBaseElement { static override is = 'esl-d-popup-game'; + protected currentCoords: Point; + /** Trigger selector */ @attr() public trigger: string; /** Marker shows that element is in dragging mode */ @@ -17,62 +22,65 @@ export class ESLDemoPopupGame extends ESLBaseElement { if (this.trigger) return ESLTraversingQuery.first(this.trigger, this) as HTMLElement | undefined; } - protected updateTriggerPosition(dX: number, dY: number): void { - if (!this.$trigger) return; - - const limitX = this.clientWidth - this.$trigger.clientWidth; - const limitY = this.clientHeight - this.$trigger.clientHeight; + protected override connectedCallback(): void { + this.setTriggerDefaultPosition(); + super.connectedCallback(); + } - let x = parseInt(this.$trigger.style.left, 10) || 0; - let y = parseInt(this.$trigger.style.top, 10) || 0; - x += dX; - y += dY; - x = Math.max(0, Math.min(x, limitX)); - y = Math.max(0, Math.min(y, limitY)); + protected setTriggerDefaultPosition(): void { + const center = this.calculateCenter(); + this.updateTriggerPosition(center.x, center.y); + } - this.$trigger.style.top = `${y}px`; - this.$trigger.style.left = `${x}px`; + protected calculateCenter(): Point { + return {x: this.clientWidth / 2, y: this.clientHeight / 2}; } - @listen({event: 'mousedown'}) + @listen({event: 'mousedown', target: ($this: any) => $this.$trigger}) protected _onDragStart(event: MouseEvent): void { this.dragging = true; this.$$on(this._onDragging); this.$$on(this._onDragStop); event.preventDefault(); - } - - @listen({auto: false, event: 'mouseup', target: window}) - protected _onDragStop(): void { - this.dragging = false; - this.$$off(this._onDragging); - this.$$off(this._onDragStop); + this.currentCoords = {x: event.clientX, y: event.clientY}; } @listen({auto: false, event: 'mousemove', target: window}) - @decorate(rafDecorator) protected _onDragging(event: MouseEvent): void { if (!this.dragging || !this.$trigger) return; - - const {movementX, movementY} = event; - this.updateTriggerPosition(movementX, movementY); + const {clientX, clientY} = event; + const dX = clientX - this.currentCoords.x; + const dY = clientY - this.currentCoords.y; + this.currentCoords = {x: clientX, y: clientY}; + this.updateTriggerPosition(dX, dY); event.preventDefault(); } - @listen({event: 'wheel'}) - @decorate(rafDecorator) - protected _onWheel(event: WheelEvent): void { + protected updateTriggerPosition(dX: number, dY: number): void { if (!this.$trigger) return; + this.$$fire(ESLPopup.prototype.REFRESH_EVENT); + const limitX = this.clientWidth - this.$trigger.clientWidth; + const limitY = this.clientHeight - this.$trigger.clientHeight; - let {deltaX, deltaY} = event; - if (event.shiftKey) [deltaY, deltaX] = [deltaX, deltaY]; - const {clientWidth, clientHeight} = this; - this.style.setProperty('--_width', `${clientWidth + deltaX / 10}px`); - this.style.setProperty('--_height', `${clientHeight + deltaY / 10}px`); + let x = (parseInt(this.$trigger.style.left, 10) || 0) + dX; + let y = (parseInt(this.$trigger.style.top, 10) || 0) + dY; + x = Math.max(0, Math.min(x, limitX)); + y = Math.max(0, Math.min(y, limitY)); - this.updateTriggerPosition(0, 0); + this.$trigger.style.left = `${x}px`; + this.$trigger.style.top = `${y}px`; + } - event.preventDefault(); + @listen({auto: false, event: 'mouseup', target: window}) + protected _onDragStop(): void { + this.dragging = false; + this.$$off(this._onDragging); + this.$$off(this._onDragStop); + } + + @listen({event: 'resize', target: ESLResizeObserverTarget.for}) + protected _onResize(): void { + this.updateTriggerPosition(0, 0); } } diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index 6aeb612b9..c558c2a44 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -13,18 +13,14 @@ aside: --- +

This cool game will let you play with a popup.

Drag a trigger element and watch how the popup and its arrow move. Use the mouse wheel to resize the container. Use shift to switch the resize direction.

The green area on the edges of the container is determined by the offsetContainer value and means the safe zone in which popup can't come. The red zone on the edges of popup demonstrates the limits of arrow placement.

@@ -97,49 +99,26 @@ aside: uip-snippet-js="js-snippet-popup-game"> + class="game-popup-trigger"> 🚀
-
🇭 🇴 🇷 I Z 🇴 N 🇹 A 🇱 🐶 🐼
-
- - - - - + + - + @@ -160,7 +153,12 @@ aside: - + + + + + + From ca0d55235847334a1bdab354714f4ec34d29d6bf Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Mon, 3 Jun 2024 23:17:56 +0300 Subject: [PATCH 04/11] chore(site): code refactoring for `esl-d-popup-game` --- site/views/draft/popup-game.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index c558c2a44..9db803c76 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -48,7 +48,7 @@ aside: font-size: 2rem; } .popup-game { - --_margin-arrow: 25px; + --_margin-arrow: 35px; } .popup-h[dir="rtl"] { text-align: right; From 5196acec3de5fbdca71de5c0ca06fa973190ae69 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Wed, 5 Jun 2024 14:36:21 +0300 Subject: [PATCH 05/11] chore(site): code refactoring for `esl-d-popup-game` --- site/views/draft/popup-game.njk | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index 9db803c76..e0b65c2ee 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -80,9 +80,9 @@ aside: margin: auto; } - .popup-content[collapsed] :is(.popup-g-hide-btn, .popup-g-text), - .popup-content:not([collapsed]) :is(.popup-g-continue-btn, .popup-g-text-preview) { - display: none !important; + .popup-content[collapsed] .popup-g-hide-btn, + .popup-content:not([collapsed]) .popup-g-continue-btn { + display: none; } @@ -114,10 +114,9 @@ aside: margin-arrow="35">
- collapse -

Lorem ipsum dolor...

- - expand + Collapse + + Expand
@@ -132,7 +131,8 @@ aside: - - From 40a3c649291d72ab9fd897d8a2681cd128250a50 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Wed, 19 Jun 2024 14:41:46 +0300 Subject: [PATCH 08/11] chore(site): code refactoring for `esl-d-popup-game` --- site/views/draft/popup-game.njk | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index d5d4b7842..8926201ac 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -25,7 +25,9 @@ aside: 🚀 From 8e892e856ca20a9555a583ea43e69e4858098b4d Mon Sep 17 00:00:00 2001 From: fshovchko <60318924+fshovchko@users.noreply.github.com> Date: Thu, 20 Jun 2024 15:47:26 +0300 Subject: [PATCH 09/11] chore(site): apply suggestion from code review Co-authored-by: ala'n (Alexey Stsefanovich) --- site/views/draft/popup-game.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index 8926201ac..7aa5dd854 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -67,7 +67,7 @@ aside: .popup-v .popup-content { writing-mode: vertical-rl; min-width: 50px; - height: 250px; + min-height: 250px; width: auto; } .popup-h .popup-content { From e53f487ebdfad04d7e0817c1c0c510b07e7df61c Mon Sep 17 00:00:00 2001 From: fshovchko <60318924+fshovchko@users.noreply.github.com> Date: Tue, 25 Jun 2024 15:30:21 +0300 Subject: [PATCH 10/11] chore(site): apply suggestion from code review Co-authored-by: Dmytro Shovchko --- site/views/draft/popup-game.njk | 1 + 1 file changed, 1 insertion(+) diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index 7aa5dd854..c5c2e9f2d 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -63,6 +63,7 @@ aside: