From 6be51338181d403c43291cb87713496f3bb2a308 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 6 Nov 2024 15:53:50 +0200 Subject: [PATCH 1/4] feat(esl-popup): add position-origin attribute --- .../esl-popup/core/esl-popup-position.ts | 66 ++++++++++++++----- src/modules/esl-popup/core/esl-popup.ts | 11 +++- 2 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/modules/esl-popup/core/esl-popup-position.ts b/src/modules/esl-popup/core/esl-popup-position.ts index d6021d4952..bdf5a448dc 100644 --- a/src/modules/esl-popup/core/esl-popup-position.ts +++ b/src/modules/esl-popup/core/esl-popup-position.ts @@ -3,6 +3,7 @@ import {Rect} from '../../esl-utils/dom/rect'; import type {Point} from '../../esl-utils/dom/point'; export type PositionType = 'top' | 'bottom' | 'left' | 'right'; +export type PositionOriginType = 'inner' | 'outer'; export interface PopupPositionValue { placedAt: PositionType; @@ -19,6 +20,7 @@ export interface IntersectionRatioRect { export interface PopupPositionConfig { position: PositionType; + hasInnerOrigin: boolean; behavior: string; marginArrow: number; offsetArrowRatio: number; @@ -71,21 +73,21 @@ function calcPopupPositionByMinorAxis(cfg: PopupPositionConfig, centerPosition: * @param cfg - popup position config * */ function calcPopupBasicRect(cfg: PopupPositionConfig): Rect { - const {position, inner, element} = cfg; + const {position, inner, element, hasInnerOrigin} = cfg; let x = isOnHorizontalAxis(position) ? 0 : calcPopupPositionByMinorAxis(cfg, inner.cx, 'width'); let y = isOnHorizontalAxis(position) ? calcPopupPositionByMinorAxis(cfg, inner.cy, 'height') : 0; - switch (cfg.position) { + switch (position) { case 'left': - x = inner.x - element.width; + x = (hasInnerOrigin ? inner.right : inner.x) - element.width; break; case 'right': - x = inner.right; + x = hasInnerOrigin ? inner.x : inner.right; break; case 'bottom': - y = inner.bottom; + y = hasInnerOrigin ? inner.y : inner.bottom; break; default: - y = inner.y - element.height; + y = (hasInnerOrigin ? inner.bottom : inner.y) - element.height; break; } return new Rect(x, y, element.width, element.height); @@ -141,19 +143,51 @@ function fitOnMajorAxis(cfg: PopupPositionConfig, value: PopupPositionValue): Po * @returns updated popup position value * */ function adjustAlongMajorAxis(cfg: PopupPositionConfig, value: PopupPositionValue): PopupPositionValue { - let {popup, placedAt} = value; + const popup = isStartingSide(cfg.position) + ? adjustForStartingSide(cfg, value.popup) + : adjustForEndingSide(cfg, value.popup); + const placedAt = getOppositePosition(cfg.position); + return {...value, popup, placedAt}; +} + +/** + * Updates popup rect to fit on major axis in case positioning on the starting side. + * @param cfg - popup position config + * @param popup - popup rect + * @returns updated popup rect + * */ +function adjustForStartingSide(cfg: PopupPositionConfig, popup: Rect): Rect { + const {position, inner, hasInnerOrigin} = cfg; let {x, y} = popup; - if (isStartingSide(cfg.position)) { - x = cfg.position === 'left' ? cfg.inner.right : x; - y = cfg.position === 'top' ? cfg.inner.bottom : y; - } else { - x = cfg.position === 'right' ? cfg.inner.x - popup.width : x; - y = cfg.position === 'bottom' ? cfg.inner.y - popup.height : y; + switch (position) { + case 'left': + x = hasInnerOrigin ? inner.x : inner.right; + break; + case 'top': + y = hasInnerOrigin ? inner.y : inner.bottom; + break; } - popup = new Rect(x, y, popup.width, popup.height); - placedAt = getOppositePosition(cfg.position); + return new Rect(x, y, popup.width, popup.height); +} - return {...value, popup, placedAt}; +/** + * Updates popup rect to fit on major axis in case positioning on the ending side. + * @param cfg - popup position config + * @param popup - popup rect + * @returns updated popup rect + * */ +function adjustForEndingSide(cfg: PopupPositionConfig, popup: Rect): Rect { + const {position, inner, hasInnerOrigin} = cfg; + let {x, y} = popup; + switch (position) { + case 'right': + x = (hasInnerOrigin ? inner.right : inner.x) - popup.width; + break; + case 'bottom': + y = (hasInnerOrigin ? inner.bottom : inner.y) - popup.height; + break; + } + return new Rect(x, y, popup.width, popup.height); } /** diff --git a/src/modules/esl-popup/core/esl-popup.ts b/src/modules/esl-popup/core/esl-popup.ts index 007047dd72..32576f0e19 100644 --- a/src/modules/esl-popup/core/esl-popup.ts +++ b/src/modules/esl-popup/core/esl-popup.ts @@ -12,7 +12,7 @@ import {calcPopupPosition, isOnHorizontalAxis} from './esl-popup-position'; import {ESLPopupPlaceholder} from './esl-popup-placeholder'; import type {ESLToggleableActionParams} from '../../esl-toggleable/core'; -import type {PositionType, IntersectionRatioRect} from './esl-popup-position'; +import type {PositionType, PositionOriginType, IntersectionRatioRect} from './esl-popup-position'; const INTERSECTION_LIMIT_FOR_ADJACENT_AXIS = 0.7; const DEFAULT_OFFSET_ARROW = 50; @@ -20,6 +20,8 @@ const DEFAULT_OFFSET_ARROW = 50; export interface ESLPopupActionParams extends ESLToggleableActionParams { /** popup position relative to trigger */ position?: PositionType; + /** clarification of the popup position, whether it should start on the outside of trigger or the inside of trigger */ + positionOrigin?: PositionOriginType; /** popup behavior if it does not fit in the window */ behavior?: string; /** Disable hiding the popup depending on the visibility of the activator */ @@ -74,6 +76,9 @@ export class ESLPopup extends ESLToggleable { */ @attr({defaultValue: 'top'}) public position: PositionType; + /** From which side of the trigger starts the positioning of the popup: 'inner', 'outer' ('outer' by default) */ + @attr({defaultValue: 'outer'}) public positionOrigin: PositionOriginType; + /** Popup behavior if it does not fit in the window ('fit' by default) */ @attr({defaultValue: 'fit'}) public behavior: string; @@ -202,6 +207,7 @@ export class ESLPopup extends ESLToggleable { // TODO: change flow to use merged params unless attribute state is used in CSS Object.assign(this, copyDefinedKeys({ position: params.position, + positionOrigin: params.positionOrigin, behavior: params.behavior, container: params.container, marginArrow: params.marginArrow, @@ -401,10 +407,11 @@ export class ESLPopup extends ESLToggleable { const triggerRect = Rect.from(this.activator).shift(window.scrollX, window.scrollY); const {containerRect} = this; - const innerMargin = this._offsetTrigger + arrowRect.width / 2; + const innerMargin = this._offsetTrigger + (this.positionOrigin === 'inner' ? 0 : arrowRect.width / 2); const config = { position: this.position, + hasInnerOrigin: this.positionOrigin === 'inner', behavior: this.behavior, marginArrow: this.marginArrow, offsetArrowRatio: this.offsetArrowRatio, From 2d7dc2e1e93d732d3cef149c6423c468225195e8 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 6 Nov 2024 15:55:11 +0200 Subject: [PATCH 2/4] chore(site): update esl-popup game with position-origin attribute --- site/views/draft/popup-game.njk | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/site/views/draft/popup-game.njk b/site/views/draft/popup-game.njk index c5c2e9f2d6..28847ea6e0 100644 --- a/site/views/draft/popup-game.njk +++ b/site/views/draft/popup-game.njk @@ -25,7 +25,7 @@ aside: @@ -36,20 +36,21 @@ aside: id="game-popup" class="popup-game popup-h" position="top" + position-origin="outer" container=".uip-preview-inner" dir="ltr" margin-arrow="35">

Space exploration has always captured the imagination of humanity.

- +
Early History

Since the dawn of time, humans have looked up at the stars with wonder. Early civilizations like the Babylonians, Greeks, and Chinese made significant contributions to our understanding of the cosmos.

The 20th century marked the beginning of modern space exploration with the launch of Sputnik 1 by the Soviet Union in 1957, followed by Yuri Gagarin's historic flight in 1961, making him the first human in space.

NASA's Apollo program achieved a monumental milestone in 1969 when Neil Armstrong and Buzz Aldrin walked on the moon, a feat watched by millions around the globe.

- +
Modern Missions

In recent decades, space exploration has seen significant advancements with the development of the International Space Station (ISS), a collaborative effort involving multiple countries. The ISS serves as a hub for scientific research and international cooperation. @@ -100,6 +101,14 @@ aside: + + + + + + + + From 353a59f604c34fda4c85ed33ae8f66afa7171723 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Wed, 6 Nov 2024 15:56:04 +0200 Subject: [PATCH 3/4] docs(esl-popup): update README with position-origin attibute --- src/modules/esl-popup/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/esl-popup/README.md b/src/modules/esl-popup/README.md index fe5eff81ef..e359234407 100644 --- a/src/modules/esl-popup/README.md +++ b/src/modules/esl-popup/README.md @@ -89,13 +89,17 @@ You can also add additional classes and styles when activating and displaying th - `position` - popup position relative to the trigger (currently supported: 'top', 'bottom', 'left', 'right' ) ('top' by default) +- `position-origin` beta - This attribute specifies from which side of the trigger grows popup to achieve the desired position ('outer' by default). Available options: + - `outer` - popup grows from the outside of the trigger relative to the positioning direction and cannot overlap the trigger + - `inner` - popup grows from the inside of the trigger relative to the positioning direction and will overlap the trigger + - `behavior` - popup behavior if it does not fit in the window ('fit' by default). Available options: - `fit` - default, the popup will always be positioned in the right place. Position dynamically updates so it will always be visible - `fit-major` - same as fit, but position dynamically updates only on major axes. Looks like a flip in relation to the trigger - `fit-minor` - same as fit, but position dynamically updates only on minor axes. Looks like alignment to the arrow - `none`, empty or unsupported value - will not be prevented from overflowing clipping boundaries, such as the viewport - + - `container` - defines container element ([ESLTraversingQuery](../esl-traversing-query/README.md) selector) to determine bounds of popup visibility (window by default) - `disable-activator-observation` (boolean) - disable hiding the popup depending on the visibility of the activator From 638aac89abb38a9b3bee0b227423617c7d4ff3a0 Mon Sep 17 00:00:00 2001 From: Dmytro Shovchko Date: Wed, 6 Nov 2024 21:49:40 +0200 Subject: [PATCH 4/4] style(esl-popup): apply suggestions from code review Co-authored-by: Anna Barmina <52083788+abarmina@users.noreply.github.com> --- src/modules/esl-popup/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/esl-popup/README.md b/src/modules/esl-popup/README.md index e359234407..ddb7227719 100644 --- a/src/modules/esl-popup/README.md +++ b/src/modules/esl-popup/README.md @@ -89,7 +89,7 @@ You can also add additional classes and styles when activating and displaying th - `position` - popup position relative to the trigger (currently supported: 'top', 'bottom', 'left', 'right' ) ('top' by default) -- `position-origin` beta - This attribute specifies from which side of the trigger grows popup to achieve the desired position ('outer' by default). Available options: +- `position-origin` beta - this attribute specifies from which side of the trigger grows popup to achieve the desired position ('outer' by default). Available options: - `outer` - popup grows from the outside of the trigger relative to the positioning direction and cannot overlap the trigger - `inner` - popup grows from the inside of the trigger relative to the positioning direction and will overlap the trigger