Browse Source

fix: allow access to label element (#410)

main
Justin Poehnelt 3 years ago committed by GitHub
parent
commit
9f39f4a031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 32
      src/label.ts
  2. 25
      src/marker.ts

32
src/label.ts

@ -79,11 +79,15 @@ export class Label extends OverlayViewSafe { @@ -79,11 +79,15 @@ export class Label extends OverlayViewSafe {
}
}
get content(): string | HTMLElement {
public get element(): HTMLElement {
return this.labelDiv;
}
public get content(): string {
return this.labelDiv.innerHTML;
}
set content(content: string | HTMLElement) {
public set content(content: string | HTMLElement) {
if (typeof content === "string") {
this.labelDiv.innerHTML = content;
this.eventDiv.innerHTML = content;
@ -100,7 +104,7 @@ export class Label extends OverlayViewSafe { @@ -100,7 +104,7 @@ export class Label extends OverlayViewSafe {
*
* **Note**: This will always return the default `marker-label`.
*/
get className(): string {
public get className(): string {
return this.labelDiv.className;
}
@ -109,37 +113,37 @@ export class Label extends OverlayViewSafe { @@ -109,37 +113,37 @@ export class Label extends OverlayViewSafe {
*
* **Note**: The default `marker-label` will additionaly be added.
*/
set className(className: string) {
public set className(className: string) {
this.labelDiv.className = className;
this.labelDiv.classList.add(LABEL_CLASS);
this.eventDiv.className = className;
this.eventDiv.classList.add(EVENT_CLASS);
}
set cursor(cursor: string) {
public set cursor(cursor: string) {
this.hoverCursor = cursor;
if (this.isInteractive) {
this.eventDiv.style.cursor = cursor;
}
}
get cursor() {
public get cursor(): string {
return this.isInteractive ? this.hoverCursor : "inherit";
}
get isInteractive() {
public get isInteractive(): boolean {
return this.draggable || this.clickable;
}
set opacity(opacity: number) {
public set opacity(opacity: number) {
this.labelDiv.style.opacity = String(opacity);
}
set title(title: string) {
public set title(title: string) {
this.eventDiv.title = title;
}
set visible(visible: boolean) {
public set visible(visible: boolean) {
if (visible) {
this.labelDiv.style.display = BLOCK;
this.eventDiv.style.display = BLOCK;
@ -149,12 +153,12 @@ export class Label extends OverlayViewSafe { @@ -149,12 +153,12 @@ export class Label extends OverlayViewSafe {
}
}
onAdd() {
public onAdd(): void {
this.getPanes().markerLayer.appendChild(this.labelDiv);
this.getPanes().overlayMouseTarget.appendChild(this.eventDiv);
}
draw() {
public draw(): void {
const coordinates = this.getProjection().fromLatLngToDivPixel(
this.position
);
@ -178,14 +182,14 @@ export class Label extends OverlayViewSafe { @@ -178,14 +182,14 @@ export class Label extends OverlayViewSafe {
this.eventDiv.style.cursor = this.cursor;
}
addDomListener(
public addDomListener(
event: string,
handler: (event: Event) => void
): google.maps.MapsEventListener {
return google.maps.event.addDomListener(this.eventDiv, event, handler);
}
onRemove() {
public onRemove(): void {
this.labelDiv.parentNode.removeChild(this.labelDiv);
this.eventDiv.parentNode.removeChild(this.eventDiv);
}

25
src/marker.ts

@ -93,27 +93,40 @@ export class MarkerWithLabel extends MarkerSafe { @@ -93,27 +93,40 @@ export class MarkerWithLabel extends MarkerSafe {
];
}
get isInteractive() {
public get isInteractive(): boolean {
return this.getClickable() || this.getDraggable();
}
get labelContent(): string | HTMLElement {
/**
* Gets label element.
*/
public get labelElement(): HTMLElement {
return this.label.element;
}
/**
* Gets label `innerHTML`. See {@link Marker.labelElement} for
* accessing the HTMLElement instead.
*/
public get labelContent(): string {
return this.label.content;
}
set labelContent(content: string | HTMLElement) {
public set labelContent(content: string | HTMLElement) {
this.label.content = content;
}
get labelClass() {
public get labelClass(): string {
return this.label.className;
}
set labelClass(className: string) {
public set labelClass(className: string) {
this.label.className = className;
}
setMap(map: google.maps.Map | google.maps.StreetViewPanorama | null): void {
public setMap(
map: google.maps.Map | google.maps.StreetViewPanorama | null
): void {
super.setMap(map);
setTimeout(() => {
this.label.setMap(map);

Loading…
Cancel
Save