@antv/l7-component 2.21.0 → 2.21.2
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/es/assets/iconfont/iconfont.js +6 -6
- package/es/constants/index.js +2 -2
- package/es/control/baseControl/buttonControl.js +109 -144
- package/es/control/baseControl/control.js +212 -258
- package/es/control/baseControl/popperControl.js +67 -95
- package/es/control/baseControl/selectControl.js +132 -178
- package/es/control/exportImage.js +59 -142
- package/es/control/fullscreen.js +69 -100
- package/es/control/geoLocate.js +37 -84
- package/es/control/layerSwitch.js +111 -154
- package/es/control/logo.js +43 -69
- package/es/control/mapTheme.js +57 -98
- package/es/control/mouseLocation.js +37 -69
- package/es/control/scale.js +107 -135
- package/es/control/swipe.js +297 -393
- package/es/control/zoom.js +80 -112
- package/es/css/index.css +10 -7
- package/es/index.js +667 -1
- package/es/marker-layer.js +274 -326
- package/es/marker.d.ts +0 -2
- package/es/marker.js +394 -453
- package/es/popup/layerPopup.js +277 -321
- package/es/popup/popup.js +422 -482
- package/es/utils/anchor.js +6 -6
- package/es/utils/icon.js +4 -4
- package/es/utils/popper.js +180 -196
- package/es/utils/screenfull.js +29 -51
- package/lib/assets/iconfont/iconfont.js +6 -6
- package/lib/constants/index.d.ts +60 -0
- package/lib/constants/index.js +2 -2
- package/lib/control/baseControl/buttonControl.d.ts +60 -0
- package/lib/control/baseControl/buttonControl.js +110 -143
- package/lib/control/baseControl/control.d.ts +112 -0
- package/lib/control/baseControl/control.js +213 -257
- package/lib/control/baseControl/index.d.ts +4 -0
- package/lib/control/baseControl/index.js +5 -5
- package/lib/control/baseControl/popperControl.d.ts +28 -0
- package/lib/control/baseControl/popperControl.js +68 -94
- package/lib/control/baseControl/selectControl.d.ts +53 -0
- package/lib/control/baseControl/selectControl.js +133 -177
- package/lib/control/exportImage.d.ts +19 -0
- package/lib/control/exportImage.js +60 -141
- package/lib/control/fullscreen.d.ts +20 -0
- package/lib/control/fullscreen.js +70 -99
- package/lib/control/geoLocate.d.ts +17 -0
- package/lib/control/geoLocate.js +38 -83
- package/lib/control/layerSwitch.d.ts +27 -0
- package/lib/control/layerSwitch.js +112 -153
- package/lib/control/logo.d.ts +14 -0
- package/lib/control/logo.js +44 -69
- package/lib/control/mapTheme.d.ts +11 -0
- package/lib/control/mapTheme.js +58 -97
- package/lib/control/mouseLocation.d.ts +16 -0
- package/lib/control/mouseLocation.js +38 -68
- package/lib/control/scale.d.ts +35 -0
- package/lib/control/scale.js +108 -134
- package/lib/control/swipe.d.ts +66 -0
- package/lib/control/swipe.js +298 -392
- package/lib/control/zoom.d.ts +39 -0
- package/lib/control/zoom.js +81 -111
- package/lib/css/index.css +10 -7
- package/lib/index.d.ts +19 -0
- package/lib/index.js +683 -17
- package/lib/interface.d.ts +18 -0
- package/lib/marker-layer.d.ts +55 -0
- package/lib/marker-layer.js +276 -324
- package/lib/marker.d.ts +58 -0
- package/lib/marker.js +395 -452
- package/lib/popup/layerPopup.d.ts +99 -0
- package/lib/popup/layerPopup.js +278 -320
- package/lib/popup/popup.d.ts +142 -0
- package/lib/popup/popup.js +423 -481
- package/lib/utils/anchor.d.ts +22 -0
- package/lib/utils/anchor.js +6 -6
- package/lib/utils/icon.d.ts +1 -0
- package/lib/utils/icon.js +6 -5
- package/lib/utils/popper.d.ts +76 -0
- package/lib/utils/popper.js +184 -196
- package/lib/utils/screenfull.d.ts +2 -0
- package/lib/utils/screenfull.js +29 -52
- package/package.json +16 -20
- package/CHANGELOG.md +0 -325
- package/LICENSE.md +0 -21
package/es/utils/anchor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export let anchorType = /*#__PURE__*/function (anchorType) {
|
|
2
2
|
anchorType["CENTER"] = "center";
|
|
3
3
|
anchorType["TOP"] = "top";
|
|
4
4
|
anchorType["TOP-LEFT"] = "top-left";
|
|
@@ -9,7 +9,7 @@ export var anchorType = /*#__PURE__*/function (anchorType) {
|
|
|
9
9
|
anchorType["RIGHT"] = "right";
|
|
10
10
|
return anchorType;
|
|
11
11
|
}({});
|
|
12
|
-
export
|
|
12
|
+
export const anchorTranslate = {
|
|
13
13
|
center: 'translate(-50%,-50%)',
|
|
14
14
|
top: 'translate(-50%,0)',
|
|
15
15
|
'top-left': 'translate(0,0)',
|
|
@@ -21,11 +21,11 @@ export var anchorTranslate = {
|
|
|
21
21
|
right: 'translate(-100%,-50%)'
|
|
22
22
|
};
|
|
23
23
|
export function applyAnchorClass(element, anchor, prefix) {
|
|
24
|
-
|
|
25
|
-
for (
|
|
24
|
+
const classList = element.classList;
|
|
25
|
+
for (const key in anchorTranslate) {
|
|
26
26
|
if (anchorTranslate.hasOwnProperty(key)) {
|
|
27
|
-
classList.remove(
|
|
27
|
+
classList.remove(`l7-${prefix}-anchor-${key}`);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
classList.add(
|
|
30
|
+
classList.add(`l7-${prefix}-anchor-${anchor}`);
|
|
31
31
|
}
|
package/es/utils/icon.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
1
|
+
export const createL7Icon = className => {
|
|
2
|
+
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
3
3
|
svg.classList.add('l7-iconfont');
|
|
4
4
|
svg.setAttribute('aria-hidden', 'true');
|
|
5
|
-
|
|
6
|
-
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href',
|
|
5
|
+
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
|
6
|
+
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#${className}`);
|
|
7
7
|
svg.appendChild(use);
|
|
8
8
|
return svg;
|
|
9
9
|
};
|
package/es/utils/popper.js
CHANGED
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
7
|
-
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
8
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
10
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
11
2
|
import { DOM } from '@antv/l7-utils';
|
|
12
3
|
import { EventEmitter } from 'eventemitter3';
|
|
13
4
|
|
|
@@ -23,243 +14,236 @@ import { EventEmitter } from 'eventemitter3';
|
|
|
23
14
|
* 气泡内容类型
|
|
24
15
|
*/
|
|
25
16
|
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
17
|
+
export class Popper extends EventEmitter {
|
|
18
|
+
get buttonRect() {
|
|
19
|
+
return this.button.getBoundingClientRect();
|
|
20
|
+
}
|
|
21
|
+
constructor(button, option) {
|
|
22
|
+
super();
|
|
23
|
+
// 气泡容器 DOM
|
|
24
|
+
_defineProperty(this, "popperDOM", void 0);
|
|
25
|
+
// 气泡中展示的内容容器 DOM
|
|
26
|
+
_defineProperty(this, "contentDOM", void 0);
|
|
27
|
+
/**
|
|
28
|
+
* 按钮实体
|
|
29
|
+
* @protected
|
|
30
|
+
*/
|
|
31
|
+
_defineProperty(this, "button", void 0);
|
|
32
|
+
/**
|
|
33
|
+
* Popper 配置
|
|
34
|
+
* @protected
|
|
35
|
+
*/
|
|
36
|
+
_defineProperty(this, "option", void 0);
|
|
33
37
|
/**
|
|
34
38
|
* 当前是否展示
|
|
35
39
|
* @protected
|
|
36
40
|
*/
|
|
37
|
-
_defineProperty(
|
|
41
|
+
_defineProperty(this, "isShow", false);
|
|
42
|
+
/**
|
|
43
|
+
* 当前气泡展示的内容
|
|
44
|
+
* @protected
|
|
45
|
+
*/
|
|
46
|
+
_defineProperty(this, "content", void 0);
|
|
38
47
|
/**
|
|
39
48
|
* 关闭气泡的定时器
|
|
40
49
|
* @protected
|
|
41
50
|
*/
|
|
42
|
-
_defineProperty(
|
|
43
|
-
_defineProperty(
|
|
44
|
-
if (
|
|
45
|
-
return
|
|
51
|
+
_defineProperty(this, "timeout", null);
|
|
52
|
+
_defineProperty(this, "show", () => {
|
|
53
|
+
if (this.isShow || !this.contentDOM.innerHTML) {
|
|
54
|
+
return this;
|
|
46
55
|
}
|
|
47
|
-
|
|
48
|
-
DOM.removeClass(
|
|
49
|
-
|
|
50
|
-
if (
|
|
51
|
-
Popper.conflictPopperList.forEach(
|
|
52
|
-
if (popper !==
|
|
56
|
+
this.resetPopperPosition();
|
|
57
|
+
DOM.removeClass(this.popperDOM, 'l7-popper-hide');
|
|
58
|
+
this.isShow = true;
|
|
59
|
+
if (this.option.unique) {
|
|
60
|
+
Popper.conflictPopperList.forEach(popper => {
|
|
61
|
+
if (popper !== this && popper.isShow) {
|
|
53
62
|
popper.hide();
|
|
54
63
|
}
|
|
55
64
|
});
|
|
56
65
|
}
|
|
57
|
-
|
|
58
|
-
window.addEventListener('pointerdown',
|
|
59
|
-
return
|
|
66
|
+
this.emit('show');
|
|
67
|
+
window.addEventListener('pointerdown', this.onPopperUnClick);
|
|
68
|
+
return this;
|
|
60
69
|
});
|
|
61
|
-
_defineProperty(
|
|
62
|
-
if (!
|
|
63
|
-
return
|
|
70
|
+
_defineProperty(this, "hide", () => {
|
|
71
|
+
if (!this.isShow) {
|
|
72
|
+
return this;
|
|
64
73
|
}
|
|
65
|
-
DOM.addClass(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
window.removeEventListener('pointerdown',
|
|
69
|
-
return
|
|
74
|
+
DOM.addClass(this.popperDOM, 'l7-popper-hide');
|
|
75
|
+
this.isShow = false;
|
|
76
|
+
this.emit('hide');
|
|
77
|
+
window.removeEventListener('pointerdown', this.onPopperUnClick);
|
|
78
|
+
return this;
|
|
70
79
|
});
|
|
71
80
|
/**
|
|
72
81
|
* 设置隐藏气泡的定时器
|
|
73
82
|
*/
|
|
74
|
-
_defineProperty(
|
|
75
|
-
if (
|
|
83
|
+
_defineProperty(this, "setHideTimeout", () => {
|
|
84
|
+
if (this.timeout) {
|
|
76
85
|
return;
|
|
77
86
|
}
|
|
78
|
-
|
|
79
|
-
if (!
|
|
87
|
+
this.timeout = window.setTimeout(() => {
|
|
88
|
+
if (!this.isShow) {
|
|
80
89
|
return;
|
|
81
90
|
}
|
|
82
|
-
|
|
83
|
-
|
|
91
|
+
this.hide();
|
|
92
|
+
this.timeout = null;
|
|
84
93
|
}, 300);
|
|
85
94
|
});
|
|
86
95
|
/**
|
|
87
96
|
* 销毁隐藏气泡的定时器
|
|
88
97
|
*/
|
|
89
|
-
_defineProperty(
|
|
90
|
-
if (
|
|
91
|
-
window.clearTimeout(
|
|
92
|
-
|
|
98
|
+
_defineProperty(this, "clearHideTimeout", () => {
|
|
99
|
+
if (this.timeout) {
|
|
100
|
+
window.clearTimeout(this.timeout);
|
|
101
|
+
this.timeout = null;
|
|
93
102
|
}
|
|
94
103
|
});
|
|
95
|
-
_defineProperty(
|
|
96
|
-
if (
|
|
97
|
-
|
|
104
|
+
_defineProperty(this, "onBtnClick", () => {
|
|
105
|
+
if (this.isShow) {
|
|
106
|
+
this.hide();
|
|
98
107
|
} else {
|
|
99
|
-
|
|
108
|
+
this.show();
|
|
100
109
|
}
|
|
101
110
|
});
|
|
102
|
-
_defineProperty(
|
|
111
|
+
_defineProperty(this, "onPopperUnClick", e => {
|
|
103
112
|
if (!DOM.findParentElement(e.target, ['.l7-button-control', '.l7-popper-content'])) {
|
|
104
|
-
|
|
113
|
+
this.hide();
|
|
105
114
|
}
|
|
106
115
|
});
|
|
107
|
-
_defineProperty(
|
|
108
|
-
|
|
116
|
+
_defineProperty(this, "onBtnMouseLeave", () => {
|
|
117
|
+
this.setHideTimeout();
|
|
109
118
|
});
|
|
110
|
-
_defineProperty(
|
|
111
|
-
|
|
112
|
-
if (
|
|
119
|
+
_defineProperty(this, "onBtnMouseMove", () => {
|
|
120
|
+
this.clearHideTimeout();
|
|
121
|
+
if (this.isShow) {
|
|
113
122
|
return;
|
|
114
123
|
}
|
|
115
|
-
|
|
124
|
+
this.show();
|
|
116
125
|
});
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
126
|
+
this.button = button;
|
|
127
|
+
this.option = option;
|
|
128
|
+
this.init();
|
|
120
129
|
if (option.unique) {
|
|
121
|
-
Popper.conflictPopperList.push(
|
|
130
|
+
Popper.conflictPopperList.push(this);
|
|
122
131
|
}
|
|
123
|
-
return _this;
|
|
124
132
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
133
|
+
getPopperDOM() {
|
|
134
|
+
return this.popperDOM;
|
|
135
|
+
}
|
|
136
|
+
getIsShow() {
|
|
137
|
+
return this.isShow;
|
|
138
|
+
}
|
|
139
|
+
getContent() {
|
|
140
|
+
return this.content;
|
|
141
|
+
}
|
|
142
|
+
setContent(content) {
|
|
143
|
+
if (typeof content === 'string') {
|
|
144
|
+
this.contentDOM.innerHTML = content;
|
|
145
|
+
} else if (content instanceof HTMLElement) {
|
|
146
|
+
DOM.clearChildren(this.contentDOM);
|
|
147
|
+
this.contentDOM.appendChild(content);
|
|
139
148
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
149
|
+
this.content = content;
|
|
150
|
+
}
|
|
151
|
+
init() {
|
|
152
|
+
const {
|
|
153
|
+
trigger
|
|
154
|
+
} = this.option;
|
|
155
|
+
this.popperDOM = this.createPopper();
|
|
156
|
+
if (trigger === 'click') {
|
|
157
|
+
this.button.addEventListener('click', this.onBtnClick);
|
|
158
|
+
} else {
|
|
159
|
+
this.button.addEventListener('mousemove', this.onBtnMouseMove);
|
|
160
|
+
this.button.addEventListener('mouseleave', this.onBtnMouseLeave);
|
|
161
|
+
this.popperDOM.addEventListener('mousemove', this.onBtnMouseMove);
|
|
162
|
+
this.popperDOM.addEventListener('mouseleave', this.onBtnMouseLeave);
|
|
144
163
|
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
164
|
+
}
|
|
165
|
+
destroy() {
|
|
166
|
+
this.button.removeEventListener('click', this.onBtnClick);
|
|
167
|
+
this.button.removeEventListener('mousemove', this.onBtnMouseMove);
|
|
168
|
+
this.button.removeEventListener('mousemove', this.onBtnMouseLeave);
|
|
169
|
+
this.popperDOM.removeEventListener('mousemove', this.onBtnMouseMove);
|
|
170
|
+
this.popperDOM.removeEventListener('mouseleave', this.onBtnMouseLeave);
|
|
171
|
+
DOM.remove(this.popperDOM);
|
|
172
|
+
}
|
|
173
|
+
resetPopperPosition() {
|
|
174
|
+
const popperStyleObj = {};
|
|
175
|
+
const {
|
|
176
|
+
container,
|
|
177
|
+
offset = [0, 0],
|
|
178
|
+
placement
|
|
179
|
+
} = this.option;
|
|
180
|
+
const [offsetX, offsetY] = offset;
|
|
181
|
+
const buttonRect = this.button.getBoundingClientRect();
|
|
182
|
+
const containerRect = container.getBoundingClientRect();
|
|
183
|
+
const {
|
|
184
|
+
left,
|
|
185
|
+
right,
|
|
186
|
+
top,
|
|
187
|
+
bottom
|
|
188
|
+
} = DOM.getDiffRect(buttonRect, containerRect);
|
|
189
|
+
let isTransformX = false;
|
|
190
|
+
let isTransformY = false;
|
|
191
|
+
if (/^(left|right)/.test(placement)) {
|
|
192
|
+
if (placement.includes('left')) {
|
|
193
|
+
popperStyleObj.right = `${buttonRect.width + right}px`;
|
|
194
|
+
} else if (placement.includes('right')) {
|
|
195
|
+
popperStyleObj.left = `${buttonRect.width + left}px`;
|
|
153
196
|
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
value: function init() {
|
|
159
|
-
var trigger = this.option.trigger;
|
|
160
|
-
this.popperDOM = this.createPopper();
|
|
161
|
-
if (trigger === 'click') {
|
|
162
|
-
this.button.addEventListener('click', this.onBtnClick);
|
|
197
|
+
if (placement.includes('start')) {
|
|
198
|
+
popperStyleObj.top = `${top}px`;
|
|
199
|
+
} else if (placement.includes('end')) {
|
|
200
|
+
popperStyleObj.bottom = `${bottom}px`;
|
|
163
201
|
} else {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
this.popperDOM.addEventListener('mouseleave', this.onBtnMouseLeave);
|
|
202
|
+
popperStyleObj.top = `${top + buttonRect.height / 2}px`;
|
|
203
|
+
isTransformY = true;
|
|
204
|
+
popperStyleObj.transform = `translate(${offsetX}px, calc(${offsetY}px - 50%))`;
|
|
168
205
|
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
this.button.removeEventListener('mousemove', this.onBtnMouseMove);
|
|
175
|
-
this.button.removeEventListener('mousemove', this.onBtnMouseLeave);
|
|
176
|
-
this.popperDOM.removeEventListener('mousemove', this.onBtnMouseMove);
|
|
177
|
-
this.popperDOM.removeEventListener('mouseleave', this.onBtnMouseLeave);
|
|
178
|
-
DOM.remove(this.popperDOM);
|
|
179
|
-
}
|
|
180
|
-
}, {
|
|
181
|
-
key: "resetPopperPosition",
|
|
182
|
-
value: function resetPopperPosition() {
|
|
183
|
-
var popperStyleObj = {};
|
|
184
|
-
var _this$option = this.option,
|
|
185
|
-
container = _this$option.container,
|
|
186
|
-
_this$option$offset = _this$option.offset,
|
|
187
|
-
offset = _this$option$offset === void 0 ? [0, 0] : _this$option$offset,
|
|
188
|
-
placement = _this$option.placement;
|
|
189
|
-
var _offset = _slicedToArray(offset, 2),
|
|
190
|
-
offsetX = _offset[0],
|
|
191
|
-
offsetY = _offset[1];
|
|
192
|
-
var buttonRect = this.button.getBoundingClientRect();
|
|
193
|
-
var containerRect = container.getBoundingClientRect();
|
|
194
|
-
var _DOM$getDiffRect = DOM.getDiffRect(buttonRect, containerRect),
|
|
195
|
-
left = _DOM$getDiffRect.left,
|
|
196
|
-
right = _DOM$getDiffRect.right,
|
|
197
|
-
top = _DOM$getDiffRect.top,
|
|
198
|
-
bottom = _DOM$getDiffRect.bottom;
|
|
199
|
-
var isTransformX = false;
|
|
200
|
-
var isTransformY = false;
|
|
201
|
-
if (/^(left|right)/.test(placement)) {
|
|
202
|
-
if (placement.includes('left')) {
|
|
203
|
-
popperStyleObj.right = "".concat(buttonRect.width + right, "px");
|
|
204
|
-
} else if (placement.includes('right')) {
|
|
205
|
-
popperStyleObj.left = "".concat(buttonRect.width + left, "px");
|
|
206
|
-
}
|
|
207
|
-
if (placement.includes('start')) {
|
|
208
|
-
popperStyleObj.top = "".concat(top, "px");
|
|
209
|
-
} else if (placement.includes('end')) {
|
|
210
|
-
popperStyleObj.bottom = "".concat(bottom, "px");
|
|
211
|
-
} else {
|
|
212
|
-
popperStyleObj.top = "".concat(top + buttonRect.height / 2, "px");
|
|
213
|
-
isTransformY = true;
|
|
214
|
-
popperStyleObj.transform = "translate(".concat(offsetX, "px, calc(").concat(offsetY, "px - 50%))");
|
|
215
|
-
}
|
|
216
|
-
} else if (/^(top|bottom)/.test(placement)) {
|
|
217
|
-
if (placement.includes('top')) {
|
|
218
|
-
popperStyleObj.bottom = "".concat(buttonRect.height + bottom, "px");
|
|
219
|
-
} else if (placement.includes('bottom')) {
|
|
220
|
-
popperStyleObj.top = "".concat(buttonRect.height + top, "px");
|
|
221
|
-
}
|
|
222
|
-
if (placement.includes('start')) {
|
|
223
|
-
popperStyleObj.left = "".concat(left, "px");
|
|
224
|
-
} else if (placement.includes('end')) {
|
|
225
|
-
popperStyleObj.right = "".concat(right, "px");
|
|
226
|
-
} else {
|
|
227
|
-
popperStyleObj.left = "".concat(left + buttonRect.width / 2, "px");
|
|
228
|
-
isTransformX = true;
|
|
229
|
-
popperStyleObj.transform = "translate(calc(".concat(offsetX, "px - 50%), ").concat(offsetY, "px)");
|
|
230
|
-
}
|
|
206
|
+
} else if (/^(top|bottom)/.test(placement)) {
|
|
207
|
+
if (placement.includes('top')) {
|
|
208
|
+
popperStyleObj.bottom = `${buttonRect.height + bottom}px`;
|
|
209
|
+
} else if (placement.includes('bottom')) {
|
|
210
|
+
popperStyleObj.top = `${buttonRect.height + top}px`;
|
|
231
211
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
if (
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
212
|
+
if (placement.includes('start')) {
|
|
213
|
+
popperStyleObj.left = `${left}px`;
|
|
214
|
+
} else if (placement.includes('end')) {
|
|
215
|
+
popperStyleObj.right = `${right}px`;
|
|
216
|
+
} else {
|
|
217
|
+
popperStyleObj.left = `${left + buttonRect.width / 2}px`;
|
|
218
|
+
isTransformX = true;
|
|
219
|
+
popperStyleObj.transform = `translate(calc(${offsetX}px - 50%), ${offsetY}px)`;
|
|
238
220
|
}
|
|
239
|
-
DOM.addStyle(this.popperDOM, DOM.css2Style(popperStyleObj));
|
|
240
221
|
}
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
container = _this$option2.container,
|
|
246
|
-
_this$option2$classNa = _this$option2.className,
|
|
247
|
-
className = _this$option2$classNa === void 0 ? '' : _this$option2$classNa,
|
|
248
|
-
content = _this$option2.content;
|
|
249
|
-
var popper = DOM.create('div', "l7-popper l7-popper-hide ".concat(className));
|
|
250
|
-
var popperContent = DOM.create('div', 'l7-popper-content');
|
|
251
|
-
var popperArrow = DOM.create('div', 'l7-popper-arrow');
|
|
252
|
-
popper.appendChild(popperContent);
|
|
253
|
-
popper.appendChild(popperArrow);
|
|
254
|
-
container.appendChild(popper);
|
|
255
|
-
this.popperDOM = popper;
|
|
256
|
-
this.contentDOM = popperContent;
|
|
257
|
-
if (content) {
|
|
258
|
-
this.setContent(content);
|
|
259
|
-
}
|
|
260
|
-
return popper;
|
|
222
|
+
popperStyleObj.transform = `translate(calc(${offsetX}px - ${isTransformX ? '50%' : '0%'}), calc(${offsetY}px - ${isTransformY ? '50%' : '0%'})`;
|
|
223
|
+
const posList = placement.split('-');
|
|
224
|
+
if (posList.length) {
|
|
225
|
+
DOM.addClass(this.popperDOM, posList.map(pos => `l7-popper-${pos}`).join(' '));
|
|
261
226
|
}
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
227
|
+
DOM.addStyle(this.popperDOM, DOM.css2Style(popperStyleObj));
|
|
228
|
+
}
|
|
229
|
+
createPopper() {
|
|
230
|
+
const {
|
|
231
|
+
container,
|
|
232
|
+
className = '',
|
|
233
|
+
content
|
|
234
|
+
} = this.option;
|
|
235
|
+
const popper = DOM.create('div', `l7-popper l7-popper-hide ${className}`);
|
|
236
|
+
const popperContent = DOM.create('div', 'l7-popper-content');
|
|
237
|
+
const popperArrow = DOM.create('div', 'l7-popper-arrow');
|
|
238
|
+
popper.appendChild(popperContent);
|
|
239
|
+
popper.appendChild(popperArrow);
|
|
240
|
+
container.appendChild(popper);
|
|
241
|
+
this.popperDOM = popper;
|
|
242
|
+
this.contentDOM = popperContent;
|
|
243
|
+
if (content) {
|
|
244
|
+
this.setContent(content);
|
|
245
|
+
}
|
|
246
|
+
return popper;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
265
249
|
_defineProperty(Popper, "conflictPopperList", []);
|
package/es/utils/screenfull.js
CHANGED
|
@@ -1,98 +1,80 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
3
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
1
|
// @ts-nocheck
|
|
6
2
|
|
|
7
|
-
|
|
3
|
+
const methodMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror'],
|
|
8
4
|
// New WebKit
|
|
9
5
|
['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror'],
|
|
10
6
|
// Old WebKit
|
|
11
7
|
['webkitRequestFullScreen', 'webkitCancelFullScreen', 'webkitCurrentFullScreenElement', 'webkitCancelFullScreen', 'webkitfullscreenchange', 'webkitfullscreenerror'], ['mozRequestFullScreen', 'mozCancelFullScreen', 'mozFullScreenElement', 'mozFullScreenEnabled', 'mozfullscreenchange', 'mozfullscreenerror'], ['msRequestFullscreen', 'msExitFullscreen', 'msFullscreenElement', 'msFullscreenEnabled', 'MSFullscreenChange', 'MSFullscreenError']];
|
|
12
|
-
|
|
8
|
+
const nativeAPI = (() => {
|
|
13
9
|
if (typeof document === 'undefined') {
|
|
14
10
|
return false;
|
|
15
11
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
for (
|
|
19
|
-
|
|
20
|
-
var exitFullscreenMethod = methodList === null || methodList === void 0 ? void 0 : methodList[1];
|
|
12
|
+
const unprefixedMethods = methodMap[0];
|
|
13
|
+
const returnValue = {};
|
|
14
|
+
for (const methodList of methodMap) {
|
|
15
|
+
const exitFullscreenMethod = methodList === null || methodList === void 0 ? void 0 : methodList[1];
|
|
21
16
|
if (exitFullscreenMethod in document) {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
try {
|
|
25
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
26
|
-
var _step$value = _slicedToArray(_step.value, 2),
|
|
27
|
-
index = _step$value[0],
|
|
28
|
-
method = _step$value[1];
|
|
29
|
-
returnValue[unprefixedMethods[index]] = method;
|
|
30
|
-
}
|
|
31
|
-
} catch (err) {
|
|
32
|
-
_iterator.e(err);
|
|
33
|
-
} finally {
|
|
34
|
-
_iterator.f();
|
|
17
|
+
for (const [index, method] of methodList.entries()) {
|
|
18
|
+
returnValue[unprefixedMethods[index]] = method;
|
|
35
19
|
}
|
|
36
20
|
return returnValue;
|
|
37
21
|
}
|
|
38
22
|
}
|
|
39
23
|
return false;
|
|
40
|
-
}();
|
|
41
|
-
|
|
24
|
+
})();
|
|
25
|
+
const eventNameMap = {
|
|
42
26
|
change: nativeAPI.fullscreenchange,
|
|
43
27
|
error: nativeAPI.fullscreenerror
|
|
44
28
|
};
|
|
45
|
-
|
|
29
|
+
let screenfull = {
|
|
46
30
|
// eslint-disable-next-line default-param-last
|
|
47
|
-
request
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
return new Promise(function (resolve, reject) {
|
|
51
|
-
var onFullScreenEntered = function onFullScreenEntered() {
|
|
31
|
+
request(element = document.documentElement, options) {
|
|
32
|
+
return new Promise((resolve, reject) => {
|
|
33
|
+
const onFullScreenEntered = () => {
|
|
52
34
|
screenfull.off('change', onFullScreenEntered);
|
|
53
35
|
resolve();
|
|
54
36
|
};
|
|
55
37
|
screenfull.on('change', onFullScreenEntered);
|
|
56
|
-
|
|
38
|
+
const returnPromise = element[nativeAPI.requestFullscreen](options);
|
|
57
39
|
if (returnPromise instanceof Promise) {
|
|
58
40
|
returnPromise.then(onFullScreenEntered).catch(reject);
|
|
59
41
|
}
|
|
60
42
|
});
|
|
61
43
|
},
|
|
62
|
-
exit
|
|
63
|
-
return new Promise(
|
|
44
|
+
exit() {
|
|
45
|
+
return new Promise((resolve, reject) => {
|
|
64
46
|
if (!screenfull.isFullscreen) {
|
|
65
47
|
resolve();
|
|
66
48
|
return;
|
|
67
49
|
}
|
|
68
|
-
|
|
50
|
+
const onFullScreenExit = () => {
|
|
69
51
|
screenfull.off('change', onFullScreenExit);
|
|
70
52
|
resolve();
|
|
71
53
|
};
|
|
72
54
|
screenfull.on('change', onFullScreenExit);
|
|
73
|
-
|
|
55
|
+
const returnPromise = document[nativeAPI.exitFullscreen]();
|
|
74
56
|
if (returnPromise instanceof Promise) {
|
|
75
57
|
returnPromise.then(onFullScreenExit).catch(reject);
|
|
76
58
|
}
|
|
77
59
|
});
|
|
78
60
|
},
|
|
79
|
-
toggle
|
|
61
|
+
toggle(element, options) {
|
|
80
62
|
return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
|
|
81
63
|
},
|
|
82
|
-
onchange
|
|
64
|
+
onchange(callback) {
|
|
83
65
|
screenfull.on('change', callback);
|
|
84
66
|
},
|
|
85
|
-
onerror
|
|
67
|
+
onerror(callback) {
|
|
86
68
|
screenfull.on('error', callback);
|
|
87
69
|
},
|
|
88
|
-
on
|
|
89
|
-
|
|
70
|
+
on(event, callback) {
|
|
71
|
+
const eventName = eventNameMap[event];
|
|
90
72
|
if (eventName) {
|
|
91
73
|
document.addEventListener(eventName, callback, false);
|
|
92
74
|
}
|
|
93
75
|
},
|
|
94
|
-
off
|
|
95
|
-
|
|
76
|
+
off(event, callback) {
|
|
77
|
+
const eventName = eventNameMap[event];
|
|
96
78
|
if (eventName) {
|
|
97
79
|
document.removeEventListener(eventName, callback, false);
|
|
98
80
|
}
|
|
@@ -101,13 +83,11 @@ var screenfull = {
|
|
|
101
83
|
};
|
|
102
84
|
Object.defineProperties(screenfull, {
|
|
103
85
|
isFullscreen: {
|
|
104
|
-
get:
|
|
105
|
-
return Boolean(document[nativeAPI.fullscreenElement]);
|
|
106
|
-
}
|
|
86
|
+
get: () => Boolean(document[nativeAPI.fullscreenElement])
|
|
107
87
|
},
|
|
108
88
|
element: {
|
|
109
89
|
enumerable: true,
|
|
110
|
-
get:
|
|
90
|
+
get: () => {
|
|
111
91
|
var _document$nativeAPI$f;
|
|
112
92
|
return (_document$nativeAPI$f = document[nativeAPI.fullscreenElement]) !== null && _document$nativeAPI$f !== void 0 ? _document$nativeAPI$f : undefined;
|
|
113
93
|
}
|
|
@@ -115,9 +95,7 @@ Object.defineProperties(screenfull, {
|
|
|
115
95
|
isEnabled: {
|
|
116
96
|
enumerable: true,
|
|
117
97
|
// Coerce to boolean in case of old WebKit.
|
|
118
|
-
get:
|
|
119
|
-
return Boolean(document[nativeAPI.fullscreenEnabled]);
|
|
120
|
-
}
|
|
98
|
+
get: () => Boolean(document[nativeAPI.fullscreenEnabled])
|
|
121
99
|
}
|
|
122
100
|
});
|
|
123
101
|
if (!nativeAPI) {
|