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

25
src/marker.ts

@ -93,27 +93,40 @@ export class MarkerWithLabel extends MarkerSafe {
]; ];
} }
get isInteractive() { public get isInteractive(): boolean {
return this.getClickable() || this.getDraggable(); 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; return this.label.content;
} }
set labelContent(content: string | HTMLElement) { public set labelContent(content: string | HTMLElement) {
this.label.content = content; this.label.content = content;
} }
get labelClass() { public get labelClass(): string {
return this.label.className; return this.label.className;
} }
set labelClass(className: string) { public set labelClass(className: string) {
this.label.className = className; 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); super.setMap(map);
setTimeout(() => { setTimeout(() => {
this.label.setMap(map); this.label.setMap(map);

Loading…
Cancel
Save