Open map in a dialog when it is clicked

res/css/_components.scss

@@ -97,6 +97,7 @@
 @import "./views/dialogs/_JoinRuleDropdown.scss";
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_LeaveSpaceDialog.scss";
+@import "./views/dialogs/_LocationViewDialog.scss";
 @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";

res/css/views/dialogs/_LocationViewDialog.scss

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LocationViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+
+    /* Unset contain and position to allow the close button
+    to appear outside the dialog */
+    contain: unset;
+    position: unset;
+}
+
+.mx_LocationViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(79vw - 0.5px);
+    height: calc(79vh - 0.5px);
+    overflow: hidden;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+
+        .mx_Dialog_cancelButton {
+            z-index: 4010;
+            position: absolute;
+            right: 5vw;
+            top: 5vh;
+            width: 20px;
+            height: 20px;
+            background-color: $background;
+        }
+    }
+
+    .mx_MLocationBody .mx_MLocationBody_map {
+        width: 79vw;
+        height: 79vh;
+    }
+}

src/components/views/location/LocationViewDialog.tsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "../dialogs/BaseDialog";
+import { IDialogProps } from "../dialogs/IDialogProps";
+import { createMap, LocationBodyContent, locationEventGeoUri, parseGeoUri } from '../messages/MLocationBody';
+
+interface IProps extends IDialogProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    error: Error;
+}
+
+@replaceableComponent("views.location.LocationViewDialog")
+export default class LocationViewDialog extends React.Component<IProps, IState> {
+    private coords: GeolocationCoordinates;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
+        this.state = {
+            error: undefined,
+        };
+    }
+
+    componentDidMount() {
+        if (this.state.error) {
+            return;
+        }
+
+        createMap(
+            this.coords,
+            true,
+            this.getBodyId(),
+            this.getMarkerId(),
+            (e: Error) => this.setState({ error: e }),
+        );
+
+        // Set class mx_Dialog_nonDialogButton on all buttons inside
+        // the map container. This prevents our CSS from styling the
+        // attribution button as if it were a dialog submit/cancel button.
+        const container: Element = document.getElementById(this.getBodyId());
+        container.querySelectorAll("button").forEach(
+            (b: Element) => b.classList.add("mx_Dialog_nonDialogButton"),
+        );
+    }
+
+    private getBodyId = () => {
+        return `mx_LocationViewDialog_${this.props.mxEvent.getId()}`;
+    };
+
+    private getMarkerId = () => {
+        return `mx_MLocationViewDialog_marker_${this.props.mxEvent.getId()}`;
+    };
+
+    render() {
+        return (
+            <BaseDialog
+                className='mx_LocationViewDialog'
+                onFinished={this.props.onFinished}
+                fixedWidth={false}
+            >
+                <LocationBodyContent
+                    mxEvent={this.props.mxEvent}
+                    bodyId={this.getBodyId()}
+                    markerId={this.getMarkerId()}
+                    error={this.state.error}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/messages/MLocationBody.tsx

@@ -25,61 +25,38 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
+import Modal from '../../../Modal';
+import LocationViewDialog from '../location/LocationViewDialog';
 
 interface IState {
     error: Error;
 }
 
 @replaceableComponent("views.messages.MLocationBody")
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
-    private map: maplibregl.Map;
     private coords: GeolocationCoordinates;
 
     constructor(props: IBodyProps) {
         super(props);
 
-        // unfortunately we're stuck supporting legacy `content.geo_uri`
-        // events until the end of days, or until we figure out mutable
-        // events - so folks can read their old chat history correctly.
-        // https://github.com/matrix-org/matrix-doc/issues/3516
-        const content = this.props.mxEvent.getContent();
-        const loc = content[LOCATION_EVENT_TYPE.name];
-        const uri = loc ? loc.uri : content['geo_uri'];
-
-        this.coords = parseGeoUri(uri);
+        this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
         this.state = {
             error: undefined,
         };
     }
 
     componentDidMount() {
-        const config = SdkConfig.get();
-        const coordinates = new maplibregl.LngLat(
-            this.coords.longitude, this.coords.latitude);
-
-        this.map = new maplibregl.Map({
-            container: this.getBodyId(),
-            style: config.map_style_url,
-            center: coordinates,
-            zoom: 13,
-        });
-
-        new maplibregl.Marker({
-            element: document.getElementById(this.getMarkerId()),
-            anchor: 'bottom',
-            offset: [0, -1],
-        })
-            .setLngLat(coordinates)
-            .addTo(this.map);
-
-        this.map.on('error', (e)=>{
-            logger.error(
-                "Failed to load map: check map_style_url in config.json has a "
-                + "valid URL and API key",
-                e.error,
-            );
-            this.setState({ error: e.error });
-        });
+        if (this.state.error) {
+            return;
+        }
+
+        createMap(
+            this.coords,
+            false,
+            this.getBodyId(),
+            this.getMarkerId(),
+            (e: Error) => this.setState({ error: e }),
+        );
     }
 
     private getBodyId = () => {
@@ -90,33 +67,127 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         return `mx_MLocationBody_marker_${this.props.mxEvent.getId()}`;
     };
 
+    private onClick = (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    ) => {
+        // Don't open map if we clicked the attribution button
+        const target = event.target as Element;
+        if (target.classList.contains("maplibregl-ctrl-attrib-button")) {
+            return;
+        }
+
+        Modal.createTrackedDialog(
+            'Location View',
+            '',
+            LocationViewDialog,
+            { mxEvent: this.props.mxEvent },
+            "mx_LocationViewDialog_wrapper",
+            false, // isPriority
+            true, // isStatic
+        );
+    };
+
     render() {
-        const error = this.state.error ?
-            <div className="mx_EventTile_tileError mx_EventTile_body">
-                { _t("Failed to load map") }
-            </div> : null;
-
-        return <div className="mx_MLocationBody">
-            <div id={this.getBodyId()} className="mx_MLocationBody_map" />
-            { error }
-            <div className="mx_MLocationBody_marker" id={this.getMarkerId()}>
-                <div className="mx_MLocationBody_markerBorder">
-                    <MemberAvatar
-                        member={this.props.mxEvent.sender}
-                        width={27}
-                        height={27}
-                        viewUserOnClick={false}
-                    />
+        return <LocationBodyContent
+            mxEvent={this.props.mxEvent}
+            bodyId={this.getBodyId()}
+            markerId={this.getMarkerId()}
+            error={this.state.error}
+            onClick={this.onClick}
+        />;
+    }
+}
+
+interface ILocationBodyContentProps {
+    mxEvent: MatrixEvent;
+    bodyId: string;
+    markerId: string;
+    error: Error;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
+export function LocationBodyContent(props: ILocationBodyContentProps) {
+    return <div className="mx_MLocationBody">
+        {
+            props.error
+                ? <div className="mx_EventTile_tileError mx_EventTile_body">
+                    { _t("Failed to load map") }
                 </div>
-                <img
-                    className="mx_MLocationBody_pointer"
-                    src={require("../../../../res/img/location/pointer.svg")}
-                    width="9"
-                    height="5"
+                : null
+        }
+        <div
+            id={props.bodyId}
+            onClick={props.onClick}
+            className="mx_MLocationBody_map"
+        />
+        <div className="mx_MLocationBody_marker" id={props.markerId}>
+            <div className="mx_MLocationBody_markerBorder">
+                <MemberAvatar
+                    member={props.mxEvent.sender}
+                    width={27}
+                    height={27}
+                    viewUserOnClick={false}
                 />
             </div>
-        </div>;
-    }
+            <img
+                className="mx_MLocationBody_pointer"
+                src={require("../../../../res/img/location/pointer.svg")}
+                width="9"
+                height="5"
+            />
+        </div>
+    </div>;
+}
+
+export function createMap(
+    coords: GeolocationCoordinates,
+    interactive: boolean,
+    bodyId: string,
+    markerId: string,
+    onError: (error: Error) => void,
+): maplibregl.Map {
+    const styleUrl = SdkConfig.get().map_style_url;
+    const coordinates = new maplibregl.LngLat(coords.longitude, coords.latitude);
+
+    const map = new maplibregl.Map({
+        container: bodyId,
+        style: styleUrl,
+        center: coordinates,
+        zoom: 13,
+        interactive,
+    });
+
+    new maplibregl.Marker({
+        element: document.getElementById(markerId),
+        anchor: 'bottom',
+        offset: [0, -1],
+    })
+        .setLngLat(coordinates)
+        .addTo(map);
+
+    map.on('error', (e) => {
+        logger.error(
+            "Failed to load map: check map_style_url in config.json has a "
+            + "valid URL and API key",
+            e.error,
+        );
+        onError(e.error);
+    });
+
+    return map;
+}
+
+/**
+ * Find the geo-URI contained within a location event.
+ */
+export function locationEventGeoUri(mxEvent: MatrixEvent): string {
+    // unfortunately we're stuck supporting legacy `content.geo_uri`
+    // events until the end of days, or until we figure out mutable
+    // events - so folks can read their old chat history correctly.
+    // https://github.com/matrix-org/matrix-doc/issues/3516
+    const content = mxEvent.getContent();
+    const loc = LOCATION_EVENT_TYPE.findIn(content) as { uri?: string };
+    return loc ? loc.uri : content['geo_uri'];
 }
 
 export function parseGeoUri(uri: string): GeolocationCoordinates {