mirror of https://gitee.com/antv-l7/antv-l7
feat(control): add marker
This commit is contained in:
parent
45ec241ed3
commit
39e870af09
|
@ -36,13 +36,13 @@ scene.on('loaded', () => {
|
||||||
zIndex: 2
|
zIndex: 2
|
||||||
})
|
})
|
||||||
.source(data)
|
.source(data)
|
||||||
.size(2)
|
.size(1)
|
||||||
.color('#ff893a')
|
.color('#ff893a')
|
||||||
.animate({
|
.animate({
|
||||||
enable:false,
|
enable:true,
|
||||||
interval:0.2,
|
interval:0.2,
|
||||||
duration:5,
|
duration:5,
|
||||||
trailLength:0.1
|
trailLength:0.2
|
||||||
})
|
})
|
||||||
.render();
|
.render();
|
||||||
});
|
});
|
||||||
|
|
|
@ -31,16 +31,23 @@ const scene = new L7.Scene({
|
||||||
maxZoom: 18
|
maxZoom: 18
|
||||||
});
|
});
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
$.get('https://gw.alipayobjects.com/os/rmsportal/kNDVHmyUWAKhWmWXmjxM.json', data => {
|
$.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => {
|
||||||
scene.LineLayer({
|
scene.LineLayer({
|
||||||
zIndex: 2
|
zIndex: 2
|
||||||
})
|
})
|
||||||
.source(data)
|
.source(data)
|
||||||
//.color('#F08D41')
|
.size([2, 0])
|
||||||
|
.shape('line')
|
||||||
.color('#ff893a')
|
.color('#ff893a')
|
||||||
.animate({enable:true})
|
.animate({
|
||||||
//.render();
|
enable:true,
|
||||||
|
interval:0.2,
|
||||||
|
duration:5,
|
||||||
|
trailLength:0.1
|
||||||
|
})
|
||||||
|
.render();
|
||||||
});
|
});
|
||||||
|
|
||||||
$.get('https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json', data => {
|
$.get('https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json', data => {
|
||||||
buildLayer = scene.PolygonLayer({
|
buildLayer = scene.PolygonLayer({
|
||||||
zIndex: 2
|
zIndex: 2
|
||||||
|
|
|
@ -114,6 +114,11 @@ scene.on('loaded', () => {
|
||||||
"标注": layer3,
|
"标注": layer3,
|
||||||
};
|
};
|
||||||
const layerContr = new L7.Control.Layers({overlayers}).addTo(scene);
|
const layerContr = new L7.Control.Layers({overlayers}).addTo(scene);
|
||||||
|
const popup = new L7.Popup({anchor:'left'}).setText('hello world')
|
||||||
|
const marker = new L7.Marker({color:'red'})
|
||||||
|
.setLnglat([104.838088,34.075889 ])
|
||||||
|
.setPopup(popup)
|
||||||
|
.addTo(scene);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,32 @@
|
||||||
|
.l7-marker {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.l7-popup-anchor-top,
|
||||||
|
.l7-popup-anchor-top-left,
|
||||||
|
.l7-popup-anchor-top-right {
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-bottom,
|
||||||
|
.l7-popup-anchor-bottom-left,
|
||||||
|
.l7-popup-anchor-bottom-right {
|
||||||
|
-webkit-flex-direction: column-reverse;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-left {
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-right {
|
||||||
|
-webkit-flex-direction: row-reverse;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
.l7-popup {
|
.l7-popup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -14,6 +43,122 @@
|
||||||
border: 10px solid transparent;
|
border: 10px solid transparent;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
.l7-popup-anchor-top .l7-popup-tip {
|
||||||
|
-webkit-align-self: center;
|
||||||
|
align-self: center;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-top-left .l7-popup-tip {
|
||||||
|
-webkit-align-self: flex-start;
|
||||||
|
align-self: flex-start;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-top-right .l7-popup-tip {
|
||||||
|
-webkit-align-self: flex-end;
|
||||||
|
align-self: flex-end;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-bottom .l7-popup-tip {
|
||||||
|
-webkit-align-self: center;
|
||||||
|
align-self: center;
|
||||||
|
border-bottom: none;
|
||||||
|
border-top-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-bottom-left .l7-popup-tip {
|
||||||
|
-webkit-align-self: flex-start;
|
||||||
|
align-self: flex-start;
|
||||||
|
border-bottom: none;
|
||||||
|
border-left: none;
|
||||||
|
border-top-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-bottom-right .l7-popup-tip {
|
||||||
|
-webkit-align-self: flex-end;
|
||||||
|
align-self: flex-end;
|
||||||
|
border-bottom: none;
|
||||||
|
border-right: none;
|
||||||
|
border-top-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-left .l7-popup-tip {
|
||||||
|
-webkit-align-self: center;
|
||||||
|
align-self: center;
|
||||||
|
border-left: none;
|
||||||
|
border-right-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-right .l7-popup-tip {
|
||||||
|
-webkit-align-self: center;
|
||||||
|
align-self: center;
|
||||||
|
border-right: none;
|
||||||
|
border-left-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-close-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0 3px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-close-button:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-content {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 10px 10px 15px;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-top-left .l7-popup-content {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-top-right .l7-popup-content {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-bottom-left .l7-popup-content {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-anchor-bottom-right .l7-popup-content {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-track-pointer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-popup-track-pointer * {
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-map:hover .l7-popup-track-pointer {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l7-map:active .l7-popup-track-pointer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.l7-popup-close-button {
|
.l7-popup-close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
@ -0,0 +1,146 @@
|
||||||
|
import Base from '../core/base';
|
||||||
|
import { bindAll } from '../util/event';
|
||||||
|
import { applyAnchorClass, anchorTranslate } from '../util/anchor';
|
||||||
|
import * as DOM from '../util/dom';
|
||||||
|
export default class Marker extends Base {
|
||||||
|
constructor(cfg) {
|
||||||
|
super({
|
||||||
|
element: '', // DOM element
|
||||||
|
anchor: 'center',
|
||||||
|
offset: [ 0, 0 ],
|
||||||
|
color: '#2f54eb',
|
||||||
|
draggable: false,
|
||||||
|
...cfg
|
||||||
|
|
||||||
|
});
|
||||||
|
bindAll([
|
||||||
|
'_update',
|
||||||
|
'_onMove',
|
||||||
|
'_onUp',
|
||||||
|
'_addDragHandler',
|
||||||
|
'_onMapClick'
|
||||||
|
], this);
|
||||||
|
this._init();
|
||||||
|
}
|
||||||
|
_init() {
|
||||||
|
let element = this.get('element');
|
||||||
|
if (!element) {
|
||||||
|
this._defaultMarker = true;
|
||||||
|
element = DOM.create('div');
|
||||||
|
this.set('element', element);
|
||||||
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||||
|
svg.setAttributeNS(null, 'display', 'block');
|
||||||
|
svg.setAttributeNS(null, 'height', '48px');
|
||||||
|
svg.setAttributeNS(null, 'width', '48px');
|
||||||
|
svg.setAttributeNS(null, 'viewBox', '0 0 1024 1024');
|
||||||
|
|
||||||
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
path.setAttributeNS(null, 'd', 'M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z');
|
||||||
|
path.setAttributeNS(null, 'fill', this.get('color'));
|
||||||
|
svg.appendChild(path);
|
||||||
|
element.appendChild(svg);
|
||||||
|
|
||||||
|
}
|
||||||
|
DOM.addClass(element, 'l7-marker');
|
||||||
|
element.addEventListener('dragstart', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
element.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
this._onMapClick();
|
||||||
|
});
|
||||||
|
applyAnchorClass(element, this.get('anchor'), 'marker');
|
||||||
|
|
||||||
|
this._popup = null;
|
||||||
|
|
||||||
|
}
|
||||||
|
addTo(scene) {
|
||||||
|
this.remove();
|
||||||
|
this._scene = scene;
|
||||||
|
this._scene.getContainer().appendChild(this.get('element'));
|
||||||
|
this._scene.on('camerachange', this._update);
|
||||||
|
this.setDraggable(this.get('draggable'));
|
||||||
|
this._update();
|
||||||
|
// this._scene.on('click', this._onMapClick);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
remove() {
|
||||||
|
if (this._scene) {
|
||||||
|
this._scene.off('click', this._onMapClick);
|
||||||
|
this._scene.off('move', this._update);
|
||||||
|
this._scene.off('moveend', this._update);
|
||||||
|
this._scene.off('mousedown', this._addDragHandler);
|
||||||
|
this._scene.off('touchstart', this._addDragHandler);
|
||||||
|
this._scene.off('mouseup', this._onUp);
|
||||||
|
this._scene.off('touchend', this._onUp);
|
||||||
|
delete this._scene;
|
||||||
|
}
|
||||||
|
DOM.remove(this.get('element'));
|
||||||
|
if (this._popup) this._popup.remove();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
setLnglat(lngLat) {
|
||||||
|
this._lngLat = lngLat;
|
||||||
|
if (this._popup) this._popup.setLnglat(this._lngLat);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
getLngLat() {
|
||||||
|
return this._lngLat;
|
||||||
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
return this.get('element');
|
||||||
|
}
|
||||||
|
|
||||||
|
setPopup(popup) {
|
||||||
|
this._popup = popup;
|
||||||
|
if (this._lngLat) this._popup.setLnglat(this._lngLat);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
togglePopup() {
|
||||||
|
const popup = this._popup;
|
||||||
|
if (!popup) return this;
|
||||||
|
else if (popup.isOpen()) popup.remove();
|
||||||
|
else popup.addTo(this._scene);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
getPopup() {
|
||||||
|
return this._popup;
|
||||||
|
}
|
||||||
|
|
||||||
|
getOffset() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
setDraggable() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
isDraggable() {
|
||||||
|
return this._draggable;
|
||||||
|
}
|
||||||
|
_update() {
|
||||||
|
if (!this._scene) return;
|
||||||
|
this._updatePosition();
|
||||||
|
DOM.setTransform(this.get('element'), `${anchorTranslate[ this.get('anchor')]}`);
|
||||||
|
|
||||||
|
}
|
||||||
|
_onMapClick() {
|
||||||
|
this._scene.emit('click'); // 触发map点击事件,关闭其他popup
|
||||||
|
const element = this.get('element');
|
||||||
|
|
||||||
|
if (this._popup && element) {
|
||||||
|
this.togglePopup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_updatePosition() {
|
||||||
|
if (!this._scene) { return; }
|
||||||
|
const pos = this._pos = this._scene.lngLatToContainer(this._lngLat);
|
||||||
|
this.get('element').style.left = pos.x + 'px';
|
||||||
|
this.get('element').style.top = pos.y + 'px';
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
import Base from '../core/base';
|
import Base from '../core/base';
|
||||||
import { bindAll } from '../util/event';
|
import { bindAll } from '../util/event';
|
||||||
import * as DOM from '../util/dom';
|
import * as DOM from '../util/dom';
|
||||||
|
import { applyAnchorClass, anchorTranslate } from '../util/anchor';
|
||||||
export default class Popup extends Base {
|
export default class Popup extends Base {
|
||||||
constructor(cfg) {
|
constructor(cfg) {
|
||||||
super({
|
super({
|
||||||
|
@ -28,12 +29,13 @@ export default class Popup extends Base {
|
||||||
this._update(lngLat);
|
this._update(lngLat);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
_update() {
|
_update() {
|
||||||
const hasPosition = this.lngLat;
|
const hasPosition = this.lngLat;
|
||||||
if (!this._scene || !hasPosition || !this._content) { return; }
|
if (!this._scene || !hasPosition || !this._content) { return; }
|
||||||
if (!this._container) {
|
if (!this._container) {
|
||||||
this._container = this.creatDom('div', 'l7-popup', this._scene.getContainer());
|
this._container = this.creatDom('div', 'l7-popup', this._scene.getContainer());
|
||||||
// this._tip = this.creatDom('div', 'l7-popup-tip', this._container);
|
this._tip = this.creatDom('div', 'l7-popup-tip', this._container);
|
||||||
this._container.appendChild(this._content);
|
this._container.appendChild(this._content);
|
||||||
if (this.get('className')) {
|
if (this.get('className')) {
|
||||||
this.get('className').split(' ').forEach(name =>
|
this.get('className').split(' ').forEach(name =>
|
||||||
|
@ -45,13 +47,17 @@ export default class Popup extends Base {
|
||||||
}
|
}
|
||||||
|
|
||||||
this._updatePosition();
|
this._updatePosition();
|
||||||
|
DOM.setTransform(this._container, `${anchorTranslate[this.get('anchor')]}`);
|
||||||
|
applyAnchorClass(this._container, this.get('anchor'), 'popup');
|
||||||
}
|
}
|
||||||
|
|
||||||
_updatePosition() {
|
_updatePosition() {
|
||||||
if (!this._scene) { return; }
|
if (!this._scene) { return; }
|
||||||
const pos = this._scene.lngLatToContainer(this.lngLat);
|
const pos = this._scene.lngLatToContainer(this.lngLat);
|
||||||
this._container.style.left = pos.x + 'px';
|
this._container.style.left = pos.x + 'px';
|
||||||
this._container.style.top = pos.y + 'px';
|
this._container.style.top = pos.y + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
setHTML(html) {
|
setHTML(html) {
|
||||||
const frag = window.document.createDocumentFragment();
|
const frag = window.document.createDocumentFragment();
|
||||||
const temp = window.document.createElement('body');
|
const temp = window.document.createElement('body');
|
||||||
|
@ -124,4 +130,7 @@ export default class Popup extends Base {
|
||||||
this.emit('close');
|
this.emit('close');
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
isOpen() {
|
||||||
|
return !!this._scene;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,6 +20,12 @@ varying float v_texture_y;
|
||||||
varying float v_texture_percent;
|
varying float v_texture_percent;
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
|
#ifdef ANIMATE
|
||||||
|
uniform float u_duration : 2.0;
|
||||||
|
uniform float u_interval : 1.0;
|
||||||
|
uniform float u_trailLength : 0.2;
|
||||||
|
#endif
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
#ifdef TEXTURE
|
#ifdef TEXTURE
|
||||||
float texture_y_fract = fract(v_texture_y);
|
float texture_y_fract = fract(v_texture_y);
|
||||||
|
@ -40,6 +46,9 @@ void main() {
|
||||||
gl_FragColor.a *= u_opacity;
|
gl_FragColor.a *= u_opacity;
|
||||||
#endif
|
#endif
|
||||||
#ifdef ANIMATE
|
#ifdef ANIMATE
|
||||||
|
float alpha =1.0 - fract( mod(1.0- v_distance_ratio,u_interval)* (1.0/u_interval) + u_time / u_duration);
|
||||||
|
alpha = (alpha + u_trailLength -1.0) / u_trailLength;
|
||||||
|
v_time = clamp(alpha,0.,1.);
|
||||||
gl_FragColor.a *= v_time;
|
gl_FragColor.a *= v_time;
|
||||||
#endif
|
#endif
|
||||||
// anti-alias
|
// anti-alias
|
||||||
|
|
|
@ -57,11 +57,11 @@ void main() {
|
||||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset.xy, 0., 1.0);
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset.xy, 0., 1.0);
|
||||||
// gl_Position.z -=0.8 * gl_Position.w;
|
// gl_Position.z -=0.8 * gl_Position.w;
|
||||||
|
|
||||||
#ifdef ANIMATE
|
// #ifdef ANIMATE
|
||||||
float alpha =1.0 - fract( mod(1.0- distance_ratio,u_interval)* (1.0/u_interval) + u_time / u_duration);
|
// float alpha =1.0 - fract( mod(1.0- distance_ratio,u_interval)* (1.0/u_interval) + u_time / u_duration);
|
||||||
alpha = (alpha + u_trailLength -1.0) / u_trailLength;
|
// alpha = (alpha + u_trailLength -1.0) / u_trailLength;
|
||||||
v_time = clamp(alpha,0.,1.);
|
// v_time = clamp(alpha,0.,1.);
|
||||||
#endif
|
// #endif
|
||||||
|
|
||||||
// picking
|
// picking
|
||||||
if(pickingId == u_activeId) {
|
if(pickingId == u_activeId) {
|
||||||
|
|
|
@ -7,7 +7,9 @@ import { registerParser, registerTransform } from './source';
|
||||||
import { registerInteraction, getInteraction } from './interaction';
|
import { registerInteraction, getInteraction } from './interaction';
|
||||||
import { registerLayer } from './layer';
|
import { registerLayer } from './layer';
|
||||||
import Popup from './component/popup';
|
import Popup from './component/popup';
|
||||||
|
import Marker from './component/marker';
|
||||||
import * as Control from './component/control';
|
import * as Control from './component/control';
|
||||||
|
|
||||||
const version = Global.version;
|
const version = Global.version;
|
||||||
const exported = {
|
const exported = {
|
||||||
version,
|
version,
|
||||||
|
@ -20,6 +22,7 @@ const exported = {
|
||||||
registerInteraction,
|
registerInteraction,
|
||||||
getInteraction,
|
getInteraction,
|
||||||
Popup,
|
Popup,
|
||||||
|
Marker,
|
||||||
Control
|
Control
|
||||||
};
|
};
|
||||||
export default exported;
|
export default exported;
|
||||||
|
|
|
@ -70,6 +70,7 @@ export default function DrawLine(layerData, layer, buffer) {
|
||||||
u_trailLength: trailLength
|
u_trailLength: trailLength
|
||||||
});
|
});
|
||||||
lineMaterial.setDefinesvalue('ANIMATE', true);
|
lineMaterial.setDefinesvalue('ANIMATE', true);
|
||||||
|
lineMaterial.setDefinesvalue('DASHLINE', true);
|
||||||
}
|
}
|
||||||
return lineMesh;
|
return lineMesh;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
export const anchorTranslate = {
|
||||||
|
center: 'translate(-50%,-50%)',
|
||||||
|
top: 'translate(-50%,0)',
|
||||||
|
'top-left': 'translate(0,0)',
|
||||||
|
'top-right': 'translate(-100%,0)',
|
||||||
|
bottom: 'translate(-50%,-100%)',
|
||||||
|
'bottom-left': 'translate(0,-100%)',
|
||||||
|
'bottom-right': 'translate(-100%,-100%)',
|
||||||
|
left: 'translate(0,-50%)',
|
||||||
|
right: 'translate(-100%,-50%)'
|
||||||
|
};
|
||||||
|
export function applyAnchorClass(element, anchor, prefix) {
|
||||||
|
const classList = element.classList;
|
||||||
|
for (const key in anchorTranslate) {
|
||||||
|
classList.remove(`l7-${prefix}-anchor-${key}`);
|
||||||
|
}
|
||||||
|
classList.add(`l7-${prefix}-anchor-${anchor}`);
|
||||||
|
}
|
|
@ -1,4 +1,14 @@
|
||||||
import * as Util from './util';
|
import * as Util from './util';
|
||||||
|
const docStyle = window.document.documentElement.style;
|
||||||
|
function testProp(props) {
|
||||||
|
if (!docStyle) return props[0];
|
||||||
|
for (let i = 0; i < props.length; i++) {
|
||||||
|
if (props[i] in docStyle) {
|
||||||
|
return props[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return props[0];
|
||||||
|
}
|
||||||
export function create(tagName, className, container) {
|
export function create(tagName, className, container) {
|
||||||
const el = document.createElement(tagName);
|
const el = document.createElement(tagName);
|
||||||
el.className = className || '';
|
el.className = className || '';
|
||||||
|
@ -78,3 +88,9 @@ export function empty(el) {
|
||||||
el.removeChild(el.firstChild);
|
el.removeChild(el.firstChild);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const transformProp = testProp([ 'transform', 'WebkitTransform' ]);
|
||||||
|
|
||||||
|
export function setTransform(el, value) {
|
||||||
|
el.style[transformProp] = value;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue