@shoper/phoenix_design_system 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js +1 -2
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js +2 -2
- package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js +0 -43
- package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -2
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.d.ts +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message.js +1 -2
- package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.d.ts +2 -1
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js +2 -2
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts +0 -55
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js +1 -39
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.d.ts +2 -12
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.js +1 -1
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.js.map +1 -1
- package/package.json +2 -2
- package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js +0 -229
- package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.d.ts +0 -24
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js +0 -225
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator_types.d.ts +0 -44
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator_types.js +0 -4
- package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator_types.js.map +0 -1
|
@@ -23,7 +23,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
23
23
|
constructor() {
|
|
24
24
|
super();
|
|
25
25
|
this.opened = false;
|
|
26
|
-
this.direction =
|
|
26
|
+
this.direction = utilities.DIRECTIONS.bottomCenter;
|
|
27
27
|
this.toggleOnHover = false;
|
|
28
28
|
this.name = '';
|
|
29
29
|
this.transition = 'direction';
|
|
@@ -7,7 +7,6 @@ var decorators = require('lit/decorators');
|
|
|
7
7
|
var utilities = require('@dreamcommerce/utilities');
|
|
8
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
|
|
10
|
-
var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
|
|
11
10
|
var portal_constants = require('../portal/portal_constants.js');
|
|
12
11
|
var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
|
|
13
12
|
var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
|
|
@@ -18,7 +17,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
18
17
|
super();
|
|
19
18
|
this.opened = false;
|
|
20
19
|
this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
|
|
21
|
-
this.direction =
|
|
20
|
+
this.direction = utilities.DIRECTIONS.topCenter;
|
|
22
21
|
this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
|
|
23
22
|
this._setupEventListeners = () => {
|
|
24
23
|
this.addEventListener('mouseenter', this.open);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
require('lit');
|
|
7
|
+
var utilities = require('@dreamcommerce/utilities');
|
|
7
8
|
var global_constants = require('../../global_constants.js');
|
|
8
9
|
var relative_position_controller_constants = require('./relative_position_controller_constants.js');
|
|
9
|
-
var relative_position_calculator = require('./relative_position_calculator.js');
|
|
10
10
|
var throttle = require('../../../../../external/lodash/throttle.js');
|
|
11
11
|
|
|
12
12
|
var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_mobileElementPosition, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
|
|
@@ -75,7 +75,7 @@ class RelativePositionController {
|
|
|
75
75
|
const positionElementRect = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
|
|
76
76
|
? { ...tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
|
|
77
77
|
: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
|
|
78
|
-
const position = new
|
|
78
|
+
const position = new utilities.RelativePositionCalculator({
|
|
79
79
|
direction: shouldNotReposition && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
|
|
80
80
|
relativeElementRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
|
|
81
81
|
positionElementRect,
|
|
@@ -2,44 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const VERTICAL_DIRECTIONS = {
|
|
6
|
-
bottomLeft: 'bottom-left',
|
|
7
|
-
bottomRight: 'bottom-right',
|
|
8
|
-
bottomCenter: 'bottom-center',
|
|
9
|
-
topLeft: 'top-left',
|
|
10
|
-
topRight: 'top-right',
|
|
11
|
-
topCenter: 'top-center'
|
|
12
|
-
};
|
|
13
|
-
const HORIZONTAL_DIRECTIONS = {
|
|
14
|
-
rightTop: 'right-top',
|
|
15
|
-
rightCenter: 'right-center',
|
|
16
|
-
rightBottom: 'right-bottom',
|
|
17
|
-
leftTop: 'left-top',
|
|
18
|
-
leftCenter: 'left-center',
|
|
19
|
-
leftBottom: 'left-bottom'
|
|
20
|
-
};
|
|
21
|
-
const CENTER_DIRECTIONS = {
|
|
22
|
-
centerTop: 'center-top',
|
|
23
|
-
centerRight: 'center-right',
|
|
24
|
-
centerBottom: 'center-bottom',
|
|
25
|
-
centerLeft: 'center-left',
|
|
26
|
-
top: 'top',
|
|
27
|
-
right: 'right',
|
|
28
|
-
bottom: 'bottom',
|
|
29
|
-
left: 'left'
|
|
30
|
-
};
|
|
31
|
-
const DIRECTIONS = {
|
|
32
|
-
...HORIZONTAL_DIRECTIONS,
|
|
33
|
-
...VERTICAL_DIRECTIONS,
|
|
34
|
-
...CENTER_DIRECTIONS
|
|
35
|
-
};
|
|
36
|
-
const CALCULATOR_DIRECTIONS = {
|
|
37
|
-
bottom: 'bottom',
|
|
38
|
-
top: 'top',
|
|
39
|
-
left: 'left',
|
|
40
|
-
right: 'right',
|
|
41
|
-
center: 'center'
|
|
42
|
-
};
|
|
43
5
|
const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
|
|
44
6
|
const OVERFLOW_SCROLL = 'scroll';
|
|
45
7
|
const OVERFLOW_AUTO = 'auto';
|
|
@@ -57,12 +19,8 @@ const MOBILE_ELEMENT_POSITIONS = {
|
|
|
57
19
|
right: 'right'
|
|
58
20
|
};
|
|
59
21
|
|
|
60
|
-
exports.CALCULATOR_DIRECTIONS = CALCULATOR_DIRECTIONS;
|
|
61
|
-
exports.CENTER_DIRECTIONS = CENTER_DIRECTIONS;
|
|
62
22
|
exports.DEFAULT_SCROLL_THROTTLE_WAIT_TIME = DEFAULT_SCROLL_THROTTLE_WAIT_TIME;
|
|
63
23
|
exports.DEFAULT_THROTTLE_WAIT_TIME = DEFAULT_THROTTLE_WAIT_TIME;
|
|
64
|
-
exports.DIRECTIONS = DIRECTIONS;
|
|
65
|
-
exports.HORIZONTAL_DIRECTIONS = HORIZONTAL_DIRECTIONS;
|
|
66
24
|
exports.MOBILE_ELEMENT_POSITIONS = MOBILE_ELEMENT_POSITIONS;
|
|
67
25
|
exports.NON_STATIC_POSITIONS = NON_STATIC_POSITIONS;
|
|
68
26
|
exports.OVERFLOW_AUTO = OVERFLOW_AUTO;
|
|
@@ -70,5 +28,4 @@ exports.OVERFLOW_SCROLL = OVERFLOW_SCROLL;
|
|
|
70
28
|
exports.RELATIVE_POSITION_CONTROLLER_EVENTS = RELATIVE_POSITION_CONTROLLER_EVENTS;
|
|
71
29
|
exports.SHRINK_MODE_BOTTOM_MARGIN = SHRINK_MODE_BOTTOM_MARGIN;
|
|
72
30
|
exports.SHRINK_MODE_MIN_HEIGHT = SHRINK_MODE_MIN_HEIGHT;
|
|
73
|
-
exports.VERTICAL_DIRECTIONS = VERTICAL_DIRECTIONS;
|
|
74
31
|
//# sourceMappingURL=relative_position_controller_constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
2
|
+
import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
|
|
3
3
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
4
4
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
5
5
|
import { property } from '@lit/reactive-element/decorators.js';
|
|
@@ -7,7 +7,7 @@ import { KeystrokesController } from '../../controllers/keystrokes_controller/ke
|
|
|
7
7
|
import { html } from 'lit-html';
|
|
8
8
|
import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
|
|
9
9
|
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
|
|
10
|
-
import {
|
|
10
|
+
import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
11
11
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
12
12
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
13
13
|
import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Any } from 'ts-toolbelt';
|
|
2
2
|
import { DROPDOWN_CONTENT_WIDTH } from "./dropdown_constants";
|
|
3
|
-
import { VERTICAL_DIRECTIONS } from
|
|
3
|
+
import { VERTICAL_DIRECTIONS } from '@dreamcommerce/utilities';
|
|
4
4
|
export declare type TDropdownSelectors = {
|
|
5
5
|
getDropdownPortalTargetName(): string;
|
|
6
6
|
getDropdownContainerName(): string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import 'ts-toolbelt';
|
|
2
2
|
import '@phoenixRoot/components/dropdown/dropdown_constants';
|
|
3
|
-
import '@
|
|
3
|
+
import '@dreamcommerce/utilities';
|
|
4
4
|
//# sourceMappingURL=dropdown_types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,qDAAqD,CAAC;AAC7F,OAAoC,
|
|
1
|
+
{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,qDAAqD,CAAC;AAC7F,OAAoC,0BAA0B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IBaseMessage } from './base_message_types';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
|
-
import type { TDirection } from
|
|
3
|
+
import type { TDirection } from '@dreamcommerce/utilities';
|
|
4
4
|
export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
|
|
5
5
|
opened: boolean;
|
|
6
6
|
portalTarget: string;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
3
|
-
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
3
|
+
import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
|
|
6
|
-
import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
7
6
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
|
|
8
7
|
import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
|
|
9
8
|
import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { IRelativePositionController,
|
|
1
|
+
import { IRelativePositionController, TRelativePositionControllerConstructorOptions } from "./relative_position_controller_types";
|
|
2
|
+
import { TDirection } from '@dreamcommerce/utilities';
|
|
2
3
|
export declare class RelativePositionController implements IRelativePositionController {
|
|
3
4
|
#private;
|
|
4
5
|
constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition, portalElementsNames, offset, mobileElementPosition }: TRelativePositionControllerConstructorOptions);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import 'lit';
|
|
3
|
+
import { RelativePositionCalculator } from '@dreamcommerce/utilities';
|
|
3
4
|
import { SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
|
|
4
5
|
import { MOBILE_ELEMENT_POSITIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT, DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME } from './relative_position_controller_constants.js';
|
|
5
|
-
import { PositionCalculator } from './relative_position_calculator.js';
|
|
6
6
|
import throttle_1 from '../../../../../external/lodash/throttle.js';
|
|
7
7
|
|
|
8
8
|
var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_mobileElementPosition, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
|
|
@@ -71,7 +71,7 @@ class RelativePositionController {
|
|
|
71
71
|
const positionElementRect = __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
|
|
72
72
|
? { ...__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
|
|
73
73
|
: __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
|
|
74
|
-
const position = new
|
|
74
|
+
const position = new RelativePositionCalculator({
|
|
75
75
|
direction: shouldNotReposition && __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : __classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
|
|
76
76
|
relativeElementRect: __classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
|
|
77
77
|
positionElementRect,
|
|
@@ -1,58 +1,3 @@
|
|
|
1
|
-
export declare const VERTICAL_DIRECTIONS: {
|
|
2
|
-
readonly bottomLeft: "bottom-left";
|
|
3
|
-
readonly bottomRight: "bottom-right";
|
|
4
|
-
readonly bottomCenter: "bottom-center";
|
|
5
|
-
readonly topLeft: "top-left";
|
|
6
|
-
readonly topRight: "top-right";
|
|
7
|
-
readonly topCenter: "top-center";
|
|
8
|
-
};
|
|
9
|
-
export declare const HORIZONTAL_DIRECTIONS: {
|
|
10
|
-
readonly rightTop: "right-top";
|
|
11
|
-
readonly rightCenter: "right-center";
|
|
12
|
-
readonly rightBottom: "right-bottom";
|
|
13
|
-
readonly leftTop: "left-top";
|
|
14
|
-
readonly leftCenter: "left-center";
|
|
15
|
-
readonly leftBottom: "left-bottom";
|
|
16
|
-
};
|
|
17
|
-
export declare const CENTER_DIRECTIONS: {
|
|
18
|
-
readonly centerTop: "center-top";
|
|
19
|
-
readonly centerRight: "center-right";
|
|
20
|
-
readonly centerBottom: "center-bottom";
|
|
21
|
-
readonly centerLeft: "center-left";
|
|
22
|
-
readonly top: "top";
|
|
23
|
-
readonly right: "right";
|
|
24
|
-
readonly bottom: "bottom";
|
|
25
|
-
readonly left: "left";
|
|
26
|
-
};
|
|
27
|
-
export declare const DIRECTIONS: {
|
|
28
|
-
readonly centerTop: "center-top";
|
|
29
|
-
readonly centerRight: "center-right";
|
|
30
|
-
readonly centerBottom: "center-bottom";
|
|
31
|
-
readonly centerLeft: "center-left";
|
|
32
|
-
readonly top: "top";
|
|
33
|
-
readonly right: "right";
|
|
34
|
-
readonly bottom: "bottom";
|
|
35
|
-
readonly left: "left";
|
|
36
|
-
readonly bottomLeft: "bottom-left";
|
|
37
|
-
readonly bottomRight: "bottom-right";
|
|
38
|
-
readonly bottomCenter: "bottom-center";
|
|
39
|
-
readonly topLeft: "top-left";
|
|
40
|
-
readonly topRight: "top-right";
|
|
41
|
-
readonly topCenter: "top-center";
|
|
42
|
-
readonly rightTop: "right-top";
|
|
43
|
-
readonly rightCenter: "right-center";
|
|
44
|
-
readonly rightBottom: "right-bottom";
|
|
45
|
-
readonly leftTop: "left-top";
|
|
46
|
-
readonly leftCenter: "left-center";
|
|
47
|
-
readonly leftBottom: "left-bottom";
|
|
48
|
-
};
|
|
49
|
-
export declare const CALCULATOR_DIRECTIONS: {
|
|
50
|
-
readonly bottom: "bottom";
|
|
51
|
-
readonly top: "top";
|
|
52
|
-
readonly left: "left";
|
|
53
|
-
readonly right: "right";
|
|
54
|
-
readonly center: "center";
|
|
55
|
-
};
|
|
56
1
|
export declare const NON_STATIC_POSITIONS: string[];
|
|
57
2
|
export declare const OVERFLOW_SCROLL = "scroll";
|
|
58
3
|
export declare const OVERFLOW_AUTO = "auto";
|
|
@@ -1,41 +1,3 @@
|
|
|
1
|
-
const VERTICAL_DIRECTIONS = {
|
|
2
|
-
bottomLeft: 'bottom-left',
|
|
3
|
-
bottomRight: 'bottom-right',
|
|
4
|
-
bottomCenter: 'bottom-center',
|
|
5
|
-
topLeft: 'top-left',
|
|
6
|
-
topRight: 'top-right',
|
|
7
|
-
topCenter: 'top-center'
|
|
8
|
-
};
|
|
9
|
-
const HORIZONTAL_DIRECTIONS = {
|
|
10
|
-
rightTop: 'right-top',
|
|
11
|
-
rightCenter: 'right-center',
|
|
12
|
-
rightBottom: 'right-bottom',
|
|
13
|
-
leftTop: 'left-top',
|
|
14
|
-
leftCenter: 'left-center',
|
|
15
|
-
leftBottom: 'left-bottom'
|
|
16
|
-
};
|
|
17
|
-
const CENTER_DIRECTIONS = {
|
|
18
|
-
centerTop: 'center-top',
|
|
19
|
-
centerRight: 'center-right',
|
|
20
|
-
centerBottom: 'center-bottom',
|
|
21
|
-
centerLeft: 'center-left',
|
|
22
|
-
top: 'top',
|
|
23
|
-
right: 'right',
|
|
24
|
-
bottom: 'bottom',
|
|
25
|
-
left: 'left'
|
|
26
|
-
};
|
|
27
|
-
const DIRECTIONS = {
|
|
28
|
-
...HORIZONTAL_DIRECTIONS,
|
|
29
|
-
...VERTICAL_DIRECTIONS,
|
|
30
|
-
...CENTER_DIRECTIONS
|
|
31
|
-
};
|
|
32
|
-
const CALCULATOR_DIRECTIONS = {
|
|
33
|
-
bottom: 'bottom',
|
|
34
|
-
top: 'top',
|
|
35
|
-
left: 'left',
|
|
36
|
-
right: 'right',
|
|
37
|
-
center: 'center'
|
|
38
|
-
};
|
|
39
1
|
const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
|
|
40
2
|
const OVERFLOW_SCROLL = 'scroll';
|
|
41
3
|
const OVERFLOW_AUTO = 'auto';
|
|
@@ -53,5 +15,5 @@ const MOBILE_ELEMENT_POSITIONS = {
|
|
|
53
15
|
right: 'right'
|
|
54
16
|
};
|
|
55
17
|
|
|
56
|
-
export {
|
|
18
|
+
export { DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, MOBILE_ELEMENT_POSITIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, RELATIVE_POSITION_CONTROLLER_EVENTS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT };
|
|
57
19
|
//# sourceMappingURL=relative_position_controller_constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MOBILE_ELEMENT_POSITIONS } from "./relative_position_controller_constants";
|
|
2
2
|
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
3
3
|
import { Any } from 'ts-toolbelt';
|
|
4
|
-
import {
|
|
5
|
-
export declare type TDirection = typeof DIRECTIONS[Any.Keys<typeof DIRECTIONS>];
|
|
4
|
+
import { TDirection } from '@dreamcommerce/utilities';
|
|
6
5
|
export declare type TRelativePositionControllerConstructorOptions = {
|
|
7
6
|
host: ReactiveControllerHost & HTMLElement;
|
|
8
7
|
direction: TDirection;
|
|
@@ -17,13 +16,4 @@ export declare type TRelativePositionControllerConstructorOptions = {
|
|
|
17
16
|
export interface IRelativePositionController extends ReactiveController {
|
|
18
17
|
position(): void;
|
|
19
18
|
}
|
|
20
|
-
export declare type TRelativePositionControllerPositionData = {
|
|
21
|
-
left: number;
|
|
22
|
-
top: number;
|
|
23
|
-
calculatedSide: TDirection;
|
|
24
|
-
shrinkMode?: boolean;
|
|
25
|
-
};
|
|
26
|
-
export declare type TPartialPositionControllerPositionData = Omit<TRelativePositionControllerPositionData, 'calculatedSide'> & {
|
|
27
|
-
calculatedSide: TCalculatorDirection;
|
|
28
|
-
};
|
|
29
19
|
export declare type TMobileElementPosition = typeof MOBILE_ELEMENT_POSITIONS[Any.Keys<typeof MOBILE_ELEMENT_POSITIONS>];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
|
|
2
2
|
import 'lit';
|
|
3
3
|
import 'ts-toolbelt';
|
|
4
|
-
import '
|
|
4
|
+
import '@dreamcommerce/utilities';
|
|
5
5
|
//# sourceMappingURL=relative_position_controller_types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"relative_position_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/relative_position_controller/relative_position_controller_types.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"relative_position_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/relative_position_controller/relative_position_controller_types.ts"],"names":[],"mappings":"AAAA,OAAyC,8FAA8F,CAAC;AACxI,OAA2D,KAAK,CAAC;AAEjE,OAAoB,aAAa,CAAC;AAClC,OAA2B,0BAA0B,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@shoper/phoenix_design_system",
|
|
3
3
|
"packageManager": "yarn@3.2.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.9.0",
|
|
6
6
|
"description": "phoenix design system",
|
|
7
7
|
"author": "zefirek",
|
|
8
8
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@splidejs/splide": "^4.0.7"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@dreamcommerce/utilities": "^1.
|
|
33
|
+
"@dreamcommerce/utilities": "^1.16.0-1",
|
|
34
34
|
"@shoper/jest_config": "^0.0.0",
|
|
35
35
|
"@shoper/tsconfig": "^0.0.0",
|
|
36
36
|
"@splidejs/splide": "4.0.7",
|
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
var relative_position_controller_constants = require('./relative_position_controller_constants.js');
|
|
7
|
-
|
|
8
|
-
var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_documentWidth, _PositionCalculator_shouldNotReposition, _PositionCalculator_offset;
|
|
9
|
-
class PositionCalculator {
|
|
10
|
-
constructor({ direction, relativeElementRect, positionElementRect, container = document.body, offset = 0, shouldNotReposition }) {
|
|
11
|
-
_PositionCalculator_direction.set(this, void 0);
|
|
12
|
-
_PositionCalculator_relativeElementRect.set(this, void 0);
|
|
13
|
-
_PositionCalculator_positionElementRect.set(this, void 0);
|
|
14
|
-
_PositionCalculator_containerRect.set(this, void 0);
|
|
15
|
-
_PositionCalculator_documentHeight.set(this, void 0);
|
|
16
|
-
_PositionCalculator_documentWidth.set(this, void 0);
|
|
17
|
-
_PositionCalculator_shouldNotReposition.set(this, void 0);
|
|
18
|
-
_PositionCalculator_offset.set(this, void 0);
|
|
19
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
|
|
20
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
|
|
21
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
|
|
22
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
|
|
23
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_shouldNotReposition, !!shouldNotReposition, "f");
|
|
24
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_offset, offset, "f");
|
|
25
|
-
const body = document.body;
|
|
26
|
-
const documentElement = document.documentElement;
|
|
27
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
|
|
28
|
-
tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_documentWidth, Math.max(body.scrollWidth, body.offsetWidth, documentElement.clientWidth, documentElement.scrollWidth, documentElement.offsetWidth), "f");
|
|
29
|
-
}
|
|
30
|
-
calculatePosition() {
|
|
31
|
-
const [side, alignment = relative_position_controller_constants.CALCULATOR_DIRECTIONS.center] = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
|
|
32
|
-
const sidePosition = this._calculateSidePosition(side, alignment);
|
|
33
|
-
const alignmentPosition = this.calculateAlignmentPosition(alignment, side);
|
|
34
|
-
return {
|
|
35
|
-
...sidePosition,
|
|
36
|
-
...alignmentPosition,
|
|
37
|
-
calculatedSide: `${sidePosition.calculatedSide || ''}-${alignmentPosition.calculatedSide || ''}`
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
_canFitTopSide() {
|
|
41
|
-
const elementPositionTop = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
42
|
-
return elementPositionTop > tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementPositionTop > 0;
|
|
43
|
-
}
|
|
44
|
-
_canFitBottomSide() {
|
|
45
|
-
const elementPositionBottom = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
46
|
-
return elementPositionBottom < tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementPositionBottom < tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_documentHeight, "f");
|
|
47
|
-
}
|
|
48
|
-
_canFitCenter(centerPosition) {
|
|
49
|
-
return centerPosition + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - window.scrollY < window.innerHeight && centerPosition - window.scrollY > 0;
|
|
50
|
-
}
|
|
51
|
-
_canFitLeftSide() {
|
|
52
|
-
const positionElementLeftSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
53
|
-
return positionElementLeftSide >= tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").left && positionElementLeftSide > 0;
|
|
54
|
-
}
|
|
55
|
-
_canFitRightSide() {
|
|
56
|
-
const positionElementRightSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
57
|
-
return positionElementRightSide <= tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").width && positionElementRightSide < tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_documentWidth, "f");
|
|
58
|
-
}
|
|
59
|
-
_calculateSidePosition(side, alignment) {
|
|
60
|
-
const topSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
61
|
-
const bottomSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
62
|
-
const leftSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
63
|
-
const rightSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
64
|
-
const verticalCenterOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
|
|
65
|
-
const horizontalCenterOfRelativeElement = (leftSideOfRelativeElement + rightSideOfRelativeElement) / 2;
|
|
66
|
-
switch (side) {
|
|
67
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.top:
|
|
68
|
-
return this._calculateTopSide({
|
|
69
|
-
topSide: topSideOfRelativeElement,
|
|
70
|
-
bottomSide: bottomSideOfRelativeElement,
|
|
71
|
-
verticalCenter: verticalCenterOfRelativeElement
|
|
72
|
-
});
|
|
73
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom:
|
|
74
|
-
return this._calculateBottomSide({
|
|
75
|
-
topSide: topSideOfRelativeElement,
|
|
76
|
-
bottomSide: bottomSideOfRelativeElement,
|
|
77
|
-
verticalCenter: verticalCenterOfRelativeElement
|
|
78
|
-
});
|
|
79
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.center:
|
|
80
|
-
return this._calculateCenterSide({
|
|
81
|
-
verticalCenter: verticalCenterOfRelativeElement,
|
|
82
|
-
horizontalCenter: horizontalCenterOfRelativeElement,
|
|
83
|
-
alignment
|
|
84
|
-
});
|
|
85
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.left:
|
|
86
|
-
return this._calculateLeftSide({
|
|
87
|
-
leftSide: leftSideOfRelativeElement,
|
|
88
|
-
rightSide: rightSideOfRelativeElement
|
|
89
|
-
});
|
|
90
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.right:
|
|
91
|
-
return this._calculateRightSide({
|
|
92
|
-
leftSide: leftSideOfRelativeElement,
|
|
93
|
-
rightSide: rightSideOfRelativeElement
|
|
94
|
-
});
|
|
95
|
-
default:
|
|
96
|
-
return { top: 0 };
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
_calculateTopSide({ topSide, bottomSide, verticalCenter }) {
|
|
100
|
-
if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
101
|
-
return { top: topSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
|
|
102
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(verticalCenter))
|
|
103
|
-
return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
|
|
104
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide())
|
|
105
|
-
return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
|
|
106
|
-
if (!this._canFitTopSide())
|
|
107
|
-
return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
|
|
108
|
-
return { top: topSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
|
|
109
|
-
}
|
|
110
|
-
_calculateBottomSide({ topSide, bottomSide, verticalCenter }) {
|
|
111
|
-
if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
112
|
-
return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
|
|
113
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(verticalCenter))
|
|
114
|
-
return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
|
|
115
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide())
|
|
116
|
-
return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
|
|
117
|
-
if (!this._canFitBottomSide())
|
|
118
|
-
return { top: topSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
|
|
119
|
-
return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
|
|
120
|
-
}
|
|
121
|
-
_calculateCenterSide({ verticalCenter, horizontalCenter, alignment }) {
|
|
122
|
-
if (alignment === relative_position_controller_constants.CALCULATOR_DIRECTIONS.left || alignment === relative_position_controller_constants.CALCULATOR_DIRECTIONS.right)
|
|
123
|
-
return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
|
|
124
|
-
return { left: horizontalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
|
|
125
|
-
}
|
|
126
|
-
_calculateLeftSide({ leftSide, rightSide }) {
|
|
127
|
-
if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
128
|
-
return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
129
|
-
if (!this._canFitLeftSide() && !this._canFitRightSide())
|
|
130
|
-
return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
131
|
-
if (!this._canFitLeftSide())
|
|
132
|
-
return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
133
|
-
return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
134
|
-
}
|
|
135
|
-
_calculateRightSide({ leftSide, rightSide }) {
|
|
136
|
-
if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
137
|
-
return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
138
|
-
if (!this._canFitRightSide() && !this._canFitLeftSide())
|
|
139
|
-
return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
140
|
-
if (!this._canFitRightSide())
|
|
141
|
-
return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
142
|
-
return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
143
|
-
}
|
|
144
|
-
calculateAlignmentPosition(alignment, side) {
|
|
145
|
-
const alignmentToLeftSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX;
|
|
146
|
-
const alignmentToRightSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
|
|
147
|
-
const alignmentToTopSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY;
|
|
148
|
-
const alignmentToBottomSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
|
|
149
|
-
const verticalCenterOfRelativeElement = (alignmentToTopSide + alignmentToBottomSide) / 2;
|
|
150
|
-
const horizontalCenterOfRelativeElement = (alignmentToLeftSide + alignmentToRightSide) / 2;
|
|
151
|
-
const isSideCenter = side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.center;
|
|
152
|
-
switch (alignment) {
|
|
153
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.top: {
|
|
154
|
-
return this._calculateTopAlignment({ topAlignment: alignmentToTopSide, isSideCenter });
|
|
155
|
-
}
|
|
156
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom: {
|
|
157
|
-
return this._calculateBottomAlignment({ bottomAlignment: alignmentToBottomSide, isSideCenter });
|
|
158
|
-
}
|
|
159
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.left: {
|
|
160
|
-
return this._calculateLeftAlignment({
|
|
161
|
-
leftAlignment: alignmentToLeftSide,
|
|
162
|
-
rightAlignment: alignmentToRightSide,
|
|
163
|
-
isSideCenter
|
|
164
|
-
});
|
|
165
|
-
}
|
|
166
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.right: {
|
|
167
|
-
return this._calculateRightAlignment({
|
|
168
|
-
leftAlignment: alignmentToLeftSide,
|
|
169
|
-
rightAlignment: alignmentToRightSide,
|
|
170
|
-
isSideCenter
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
case relative_position_controller_constants.CALCULATOR_DIRECTIONS.center:
|
|
174
|
-
return this._calculateCenterAlignment({
|
|
175
|
-
horizontalCenter: horizontalCenterOfRelativeElement,
|
|
176
|
-
verticalCenter: verticalCenterOfRelativeElement,
|
|
177
|
-
side
|
|
178
|
-
});
|
|
179
|
-
default:
|
|
180
|
-
return { left: 0 };
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
_calculateTopAlignment({ topAlignment, isSideCenter }) {
|
|
184
|
-
const alignmentToTop = isSideCenter ? topAlignment - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f") : topAlignment;
|
|
185
|
-
return {
|
|
186
|
-
top: alignmentToTop,
|
|
187
|
-
calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top
|
|
188
|
-
};
|
|
189
|
-
}
|
|
190
|
-
_calculateBottomAlignment({ bottomAlignment, isSideCenter }) {
|
|
191
|
-
const alignmentToBottom = isSideCenter ? bottomAlignment + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f") : bottomAlignment;
|
|
192
|
-
return { top: alignmentToBottom, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
|
|
193
|
-
}
|
|
194
|
-
_calculateLeftAlignment({ leftAlignment, rightAlignment, isSideCenter }) {
|
|
195
|
-
const alignmentToLeftSide = isSideCenter ? leftAlignment - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width : leftAlignment;
|
|
196
|
-
const alignmentToRightSide = rightAlignment + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
197
|
-
if (!isSideCenter)
|
|
198
|
-
return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
199
|
-
if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
200
|
-
return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
201
|
-
if (!this._canFitLeftSide() && !this._canFitRightSide())
|
|
202
|
-
return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
203
|
-
if (!this._canFitLeftSide())
|
|
204
|
-
return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
205
|
-
return { left: alignmentToLeftSide - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f"), calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
206
|
-
}
|
|
207
|
-
_calculateRightAlignment({ leftAlignment, rightAlignment, isSideCenter }) {
|
|
208
|
-
const alignmentToRightSide = isSideCenter ? rightAlignment + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width : rightAlignment;
|
|
209
|
-
const alignmentToLeftSide = leftAlignment - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
210
|
-
if (!isSideCenter)
|
|
211
|
-
return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
212
|
-
if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
213
|
-
return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
214
|
-
if (!this._canFitLeftSide() && !this._canFitRightSide())
|
|
215
|
-
return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
216
|
-
if (!this._canFitRightSide())
|
|
217
|
-
return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
|
|
218
|
-
return { left: alignmentToRightSide + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f"), calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
|
|
219
|
-
}
|
|
220
|
-
_calculateCenterAlignment({ horizontalCenter, verticalCenter, side }) {
|
|
221
|
-
if (side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.top || side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom)
|
|
222
|
-
return { left: horizontalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
|
|
223
|
-
return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
_PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_documentWidth = new WeakMap(), _PositionCalculator_shouldNotReposition = new WeakMap(), _PositionCalculator_offset = new WeakMap();
|
|
227
|
-
|
|
228
|
-
exports.PositionCalculator = PositionCalculator;
|
|
229
|
-
//# sourceMappingURL=relative_position_calculator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { TRelativePositionCalculatorConstructorOptions } from './relative_position_calculator_types';
|
|
2
|
-
import { TRelativePositionControllerPositionData } from "./relative_position_controller_types";
|
|
3
|
-
export declare class PositionCalculator {
|
|
4
|
-
#private;
|
|
5
|
-
constructor({ direction, relativeElementRect, positionElementRect, container, offset, shouldNotReposition }: TRelativePositionCalculatorConstructorOptions);
|
|
6
|
-
calculatePosition(): TRelativePositionControllerPositionData;
|
|
7
|
-
private _canFitTopSide;
|
|
8
|
-
private _canFitBottomSide;
|
|
9
|
-
private _canFitCenter;
|
|
10
|
-
private _canFitLeftSide;
|
|
11
|
-
private _canFitRightSide;
|
|
12
|
-
private _calculateSidePosition;
|
|
13
|
-
private _calculateTopSide;
|
|
14
|
-
private _calculateBottomSide;
|
|
15
|
-
private _calculateCenterSide;
|
|
16
|
-
private _calculateLeftSide;
|
|
17
|
-
private _calculateRightSide;
|
|
18
|
-
private calculateAlignmentPosition;
|
|
19
|
-
private _calculateTopAlignment;
|
|
20
|
-
private _calculateBottomAlignment;
|
|
21
|
-
private _calculateLeftAlignment;
|
|
22
|
-
private _calculateRightAlignment;
|
|
23
|
-
private _calculateCenterAlignment;
|
|
24
|
-
}
|
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import { CALCULATOR_DIRECTIONS } from './relative_position_controller_constants.js';
|
|
3
|
-
|
|
4
|
-
var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_documentWidth, _PositionCalculator_shouldNotReposition, _PositionCalculator_offset;
|
|
5
|
-
class PositionCalculator {
|
|
6
|
-
constructor({ direction, relativeElementRect, positionElementRect, container = document.body, offset = 0, shouldNotReposition }) {
|
|
7
|
-
_PositionCalculator_direction.set(this, void 0);
|
|
8
|
-
_PositionCalculator_relativeElementRect.set(this, void 0);
|
|
9
|
-
_PositionCalculator_positionElementRect.set(this, void 0);
|
|
10
|
-
_PositionCalculator_containerRect.set(this, void 0);
|
|
11
|
-
_PositionCalculator_documentHeight.set(this, void 0);
|
|
12
|
-
_PositionCalculator_documentWidth.set(this, void 0);
|
|
13
|
-
_PositionCalculator_shouldNotReposition.set(this, void 0);
|
|
14
|
-
_PositionCalculator_offset.set(this, void 0);
|
|
15
|
-
__classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
|
|
16
|
-
__classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
|
|
17
|
-
__classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
|
|
18
|
-
__classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
|
|
19
|
-
__classPrivateFieldSet(this, _PositionCalculator_shouldNotReposition, !!shouldNotReposition, "f");
|
|
20
|
-
__classPrivateFieldSet(this, _PositionCalculator_offset, offset, "f");
|
|
21
|
-
const body = document.body;
|
|
22
|
-
const documentElement = document.documentElement;
|
|
23
|
-
__classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
|
|
24
|
-
__classPrivateFieldSet(this, _PositionCalculator_documentWidth, Math.max(body.scrollWidth, body.offsetWidth, documentElement.clientWidth, documentElement.scrollWidth, documentElement.offsetWidth), "f");
|
|
25
|
-
}
|
|
26
|
-
calculatePosition() {
|
|
27
|
-
const [side, alignment = CALCULATOR_DIRECTIONS.center] = __classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
|
|
28
|
-
const sidePosition = this._calculateSidePosition(side, alignment);
|
|
29
|
-
const alignmentPosition = this.calculateAlignmentPosition(alignment, side);
|
|
30
|
-
return {
|
|
31
|
-
...sidePosition,
|
|
32
|
-
...alignmentPosition,
|
|
33
|
-
calculatedSide: `${sidePosition.calculatedSide || ''}-${alignmentPosition.calculatedSide || ''}`
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
_canFitTopSide() {
|
|
37
|
-
const elementPositionTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
38
|
-
return elementPositionTop > __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementPositionTop > 0;
|
|
39
|
-
}
|
|
40
|
-
_canFitBottomSide() {
|
|
41
|
-
const elementPositionBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
42
|
-
return elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_documentHeight, "f");
|
|
43
|
-
}
|
|
44
|
-
_canFitCenter(centerPosition) {
|
|
45
|
-
return centerPosition + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - window.scrollY < window.innerHeight && centerPosition - window.scrollY > 0;
|
|
46
|
-
}
|
|
47
|
-
_canFitLeftSide() {
|
|
48
|
-
const positionElementLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
49
|
-
return positionElementLeftSide >= __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").left && positionElementLeftSide > 0;
|
|
50
|
-
}
|
|
51
|
-
_canFitRightSide() {
|
|
52
|
-
const positionElementRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
53
|
-
return positionElementRightSide <= __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").width && positionElementRightSide < __classPrivateFieldGet(this, _PositionCalculator_documentWidth, "f");
|
|
54
|
-
}
|
|
55
|
-
_calculateSidePosition(side, alignment) {
|
|
56
|
-
const topSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
57
|
-
const bottomSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
58
|
-
const leftSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
59
|
-
const rightSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
60
|
-
const verticalCenterOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
|
|
61
|
-
const horizontalCenterOfRelativeElement = (leftSideOfRelativeElement + rightSideOfRelativeElement) / 2;
|
|
62
|
-
switch (side) {
|
|
63
|
-
case CALCULATOR_DIRECTIONS.top:
|
|
64
|
-
return this._calculateTopSide({
|
|
65
|
-
topSide: topSideOfRelativeElement,
|
|
66
|
-
bottomSide: bottomSideOfRelativeElement,
|
|
67
|
-
verticalCenter: verticalCenterOfRelativeElement
|
|
68
|
-
});
|
|
69
|
-
case CALCULATOR_DIRECTIONS.bottom:
|
|
70
|
-
return this._calculateBottomSide({
|
|
71
|
-
topSide: topSideOfRelativeElement,
|
|
72
|
-
bottomSide: bottomSideOfRelativeElement,
|
|
73
|
-
verticalCenter: verticalCenterOfRelativeElement
|
|
74
|
-
});
|
|
75
|
-
case CALCULATOR_DIRECTIONS.center:
|
|
76
|
-
return this._calculateCenterSide({
|
|
77
|
-
verticalCenter: verticalCenterOfRelativeElement,
|
|
78
|
-
horizontalCenter: horizontalCenterOfRelativeElement,
|
|
79
|
-
alignment
|
|
80
|
-
});
|
|
81
|
-
case CALCULATOR_DIRECTIONS.left:
|
|
82
|
-
return this._calculateLeftSide({
|
|
83
|
-
leftSide: leftSideOfRelativeElement,
|
|
84
|
-
rightSide: rightSideOfRelativeElement
|
|
85
|
-
});
|
|
86
|
-
case CALCULATOR_DIRECTIONS.right:
|
|
87
|
-
return this._calculateRightSide({
|
|
88
|
-
leftSide: leftSideOfRelativeElement,
|
|
89
|
-
rightSide: rightSideOfRelativeElement
|
|
90
|
-
});
|
|
91
|
-
default:
|
|
92
|
-
return { top: 0 };
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
_calculateTopSide({ topSide, bottomSide, verticalCenter }) {
|
|
96
|
-
if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
97
|
-
return { top: topSide, calculatedSide: CALCULATOR_DIRECTIONS.top };
|
|
98
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(verticalCenter))
|
|
99
|
-
return { top: bottomSide, calculatedSide: CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
|
|
100
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide())
|
|
101
|
-
return { top: verticalCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
|
|
102
|
-
if (!this._canFitTopSide())
|
|
103
|
-
return { top: bottomSide, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
|
|
104
|
-
return { top: topSide, calculatedSide: CALCULATOR_DIRECTIONS.top };
|
|
105
|
-
}
|
|
106
|
-
_calculateBottomSide({ topSide, bottomSide, verticalCenter }) {
|
|
107
|
-
if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
108
|
-
return { top: bottomSide, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
|
|
109
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(verticalCenter))
|
|
110
|
-
return { top: bottomSide, calculatedSide: CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
|
|
111
|
-
if (!this._canFitTopSide() && !this._canFitBottomSide())
|
|
112
|
-
return { top: verticalCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
|
|
113
|
-
if (!this._canFitBottomSide())
|
|
114
|
-
return { top: topSide, calculatedSide: CALCULATOR_DIRECTIONS.top };
|
|
115
|
-
return { top: bottomSide, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
|
|
116
|
-
}
|
|
117
|
-
_calculateCenterSide({ verticalCenter, horizontalCenter, alignment }) {
|
|
118
|
-
if (alignment === CALCULATOR_DIRECTIONS.left || alignment === CALCULATOR_DIRECTIONS.right)
|
|
119
|
-
return { top: verticalCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
|
|
120
|
-
return { left: horizontalCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
|
|
121
|
-
}
|
|
122
|
-
_calculateLeftSide({ leftSide, rightSide }) {
|
|
123
|
-
if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
124
|
-
return { left: leftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
125
|
-
if (!this._canFitLeftSide() && !this._canFitRightSide())
|
|
126
|
-
return { left: leftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
127
|
-
if (!this._canFitLeftSide())
|
|
128
|
-
return { left: rightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
129
|
-
return { left: leftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
130
|
-
}
|
|
131
|
-
_calculateRightSide({ leftSide, rightSide }) {
|
|
132
|
-
if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
133
|
-
return { left: rightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
134
|
-
if (!this._canFitRightSide() && !this._canFitLeftSide())
|
|
135
|
-
return { left: rightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
136
|
-
if (!this._canFitRightSide())
|
|
137
|
-
return { left: leftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
138
|
-
return { left: rightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
139
|
-
}
|
|
140
|
-
calculateAlignmentPosition(alignment, side) {
|
|
141
|
-
const alignmentToLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX;
|
|
142
|
-
const alignmentToRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
|
|
143
|
-
const alignmentToTopSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY;
|
|
144
|
-
const alignmentToBottomSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
|
|
145
|
-
const verticalCenterOfRelativeElement = (alignmentToTopSide + alignmentToBottomSide) / 2;
|
|
146
|
-
const horizontalCenterOfRelativeElement = (alignmentToLeftSide + alignmentToRightSide) / 2;
|
|
147
|
-
const isSideCenter = side === CALCULATOR_DIRECTIONS.center;
|
|
148
|
-
switch (alignment) {
|
|
149
|
-
case CALCULATOR_DIRECTIONS.top: {
|
|
150
|
-
return this._calculateTopAlignment({ topAlignment: alignmentToTopSide, isSideCenter });
|
|
151
|
-
}
|
|
152
|
-
case CALCULATOR_DIRECTIONS.bottom: {
|
|
153
|
-
return this._calculateBottomAlignment({ bottomAlignment: alignmentToBottomSide, isSideCenter });
|
|
154
|
-
}
|
|
155
|
-
case CALCULATOR_DIRECTIONS.left: {
|
|
156
|
-
return this._calculateLeftAlignment({
|
|
157
|
-
leftAlignment: alignmentToLeftSide,
|
|
158
|
-
rightAlignment: alignmentToRightSide,
|
|
159
|
-
isSideCenter
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
case CALCULATOR_DIRECTIONS.right: {
|
|
163
|
-
return this._calculateRightAlignment({
|
|
164
|
-
leftAlignment: alignmentToLeftSide,
|
|
165
|
-
rightAlignment: alignmentToRightSide,
|
|
166
|
-
isSideCenter
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
case CALCULATOR_DIRECTIONS.center:
|
|
170
|
-
return this._calculateCenterAlignment({
|
|
171
|
-
horizontalCenter: horizontalCenterOfRelativeElement,
|
|
172
|
-
verticalCenter: verticalCenterOfRelativeElement,
|
|
173
|
-
side
|
|
174
|
-
});
|
|
175
|
-
default:
|
|
176
|
-
return { left: 0 };
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
_calculateTopAlignment({ topAlignment, isSideCenter }) {
|
|
180
|
-
const alignmentToTop = isSideCenter ? topAlignment - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - __classPrivateFieldGet(this, _PositionCalculator_offset, "f") : topAlignment;
|
|
181
|
-
return {
|
|
182
|
-
top: alignmentToTop,
|
|
183
|
-
calculatedSide: CALCULATOR_DIRECTIONS.top
|
|
184
|
-
};
|
|
185
|
-
}
|
|
186
|
-
_calculateBottomAlignment({ bottomAlignment, isSideCenter }) {
|
|
187
|
-
const alignmentToBottom = isSideCenter ? bottomAlignment + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + __classPrivateFieldGet(this, _PositionCalculator_offset, "f") : bottomAlignment;
|
|
188
|
-
return { top: alignmentToBottom, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
|
|
189
|
-
}
|
|
190
|
-
_calculateLeftAlignment({ leftAlignment, rightAlignment, isSideCenter }) {
|
|
191
|
-
const alignmentToLeftSide = isSideCenter ? leftAlignment - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width : leftAlignment;
|
|
192
|
-
const alignmentToRightSide = rightAlignment + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
193
|
-
if (!isSideCenter)
|
|
194
|
-
return { left: alignmentToLeftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
195
|
-
if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
196
|
-
return { left: alignmentToLeftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
197
|
-
if (!this._canFitLeftSide() && !this._canFitRightSide())
|
|
198
|
-
return { left: alignmentToLeftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
199
|
-
if (!this._canFitLeftSide())
|
|
200
|
-
return { left: alignmentToRightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
201
|
-
return { left: alignmentToLeftSide - __classPrivateFieldGet(this, _PositionCalculator_offset, "f"), calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
202
|
-
}
|
|
203
|
-
_calculateRightAlignment({ leftAlignment, rightAlignment, isSideCenter }) {
|
|
204
|
-
const alignmentToRightSide = isSideCenter ? rightAlignment + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width : rightAlignment;
|
|
205
|
-
const alignmentToLeftSide = leftAlignment - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
|
|
206
|
-
if (!isSideCenter)
|
|
207
|
-
return { left: alignmentToRightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
208
|
-
if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
|
|
209
|
-
return { left: alignmentToRightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
210
|
-
if (!this._canFitLeftSide() && !this._canFitRightSide())
|
|
211
|
-
return { left: alignmentToRightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
212
|
-
if (!this._canFitRightSide())
|
|
213
|
-
return { left: alignmentToLeftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
|
|
214
|
-
return { left: alignmentToRightSide + __classPrivateFieldGet(this, _PositionCalculator_offset, "f"), calculatedSide: CALCULATOR_DIRECTIONS.right };
|
|
215
|
-
}
|
|
216
|
-
_calculateCenterAlignment({ horizontalCenter, verticalCenter, side }) {
|
|
217
|
-
if (side === CALCULATOR_DIRECTIONS.top || side === CALCULATOR_DIRECTIONS.bottom)
|
|
218
|
-
return { left: horizontalCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
|
|
219
|
-
return { top: verticalCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
_PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_documentWidth = new WeakMap(), _PositionCalculator_shouldNotReposition = new WeakMap(), _PositionCalculator_offset = new WeakMap();
|
|
223
|
-
|
|
224
|
-
export { PositionCalculator };
|
|
225
|
-
//# sourceMappingURL=relative_position_calculator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { Any } from 'ts-toolbelt';
|
|
2
|
-
import { CALCULATOR_DIRECTIONS } from './relative_position_controller_constants';
|
|
3
|
-
import { TDirection } from './relative_position_controller_types';
|
|
4
|
-
export declare type TCalculatorDirection = typeof CALCULATOR_DIRECTIONS[Any.Keys<typeof CALCULATOR_DIRECTIONS>];
|
|
5
|
-
export declare type TRelativePositionCalculatorConstructorOptions = {
|
|
6
|
-
direction: TDirection;
|
|
7
|
-
relativeElementRect: DOMRect;
|
|
8
|
-
positionElementRect: DOMRect;
|
|
9
|
-
offset?: number;
|
|
10
|
-
container?: HTMLElement;
|
|
11
|
-
shouldNotReposition?: boolean;
|
|
12
|
-
};
|
|
13
|
-
export declare type TCalculateVerticalSideProps = {
|
|
14
|
-
topSide: number;
|
|
15
|
-
bottomSide: number;
|
|
16
|
-
verticalCenter: number;
|
|
17
|
-
};
|
|
18
|
-
export declare type TCalculateCenterSideProps = {
|
|
19
|
-
verticalCenter: number;
|
|
20
|
-
horizontalCenter: number;
|
|
21
|
-
alignment: TCalculatorDirection;
|
|
22
|
-
};
|
|
23
|
-
export declare type TCalculateHorizontalSideProps = {
|
|
24
|
-
leftSide: number;
|
|
25
|
-
rightSide: number;
|
|
26
|
-
};
|
|
27
|
-
export declare type TCalculateTopAlignmentProps = {
|
|
28
|
-
topAlignment: number;
|
|
29
|
-
isSideCenter: boolean;
|
|
30
|
-
};
|
|
31
|
-
export declare type TCalculateBottomAlignmentProps = {
|
|
32
|
-
bottomAlignment: number;
|
|
33
|
-
isSideCenter: boolean;
|
|
34
|
-
};
|
|
35
|
-
export declare type TCalculateHorizontalAlignmentProps = {
|
|
36
|
-
leftAlignment: number;
|
|
37
|
-
rightAlignment: number;
|
|
38
|
-
isSideCenter: boolean;
|
|
39
|
-
};
|
|
40
|
-
export declare type TCalculateCenterAlignmentProps = {
|
|
41
|
-
verticalCenter: number;
|
|
42
|
-
horizontalCenter: number;
|
|
43
|
-
side: TCalculatorDirection;
|
|
44
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"relative_position_calculator_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/relative_position_controller/relative_position_calculator_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAsC,0CAA0C,CAAC;AACjF,OAA2B,sCAAsC,CAAC"}
|