[ADD] html_builder: convert s_google_map

addons/html_builder/static/src/core/builder_options_plugin.js

@@ -21,7 +21,6 @@ export class BuilderOptionsPlugin extends Plugin {
         clean_for_save_handlers: this.cleanForSave.bind(this),
         post_undo_handlers: this.restoreContainer.bind(this),
         post_redo_handlers: this.restoreContainer.bind(this),
-        on_add_element_handlers: ({ elementToAdd }) => this.setTarget(elementToAdd),
     };
 
     setup() {

addons/html_builder/static/src/core/drop_zone_plugin.js

@@ -304,9 +304,10 @@ export class DropZonePlugin extends Plugin {
             for (const handler of this.getResource("on_add_element_handlers")) {
                 proms.push(handler({ elementToAdd: elementToAdd }));
             }
-            this.services.ui.block();
+            // @TODO block the builder, not everything.
+            // this.services.ui.block();
             await Promise.all(proms);
-            this.services.ui.unblock();
+            // this.services.ui.unblock();
             scrollToWindow(elementToAdd, { behavior: "smooth", offset: 50 });
             this.dependencies.history.addStep();
         };

addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_api_key_dialog.js

@@ -0,0 +1,51 @@
+import { _t } from "@web/core/l10n/translation";
+import { Dialog } from "@web/core/dialog/dialog";
+import { useChildRef } from "@web/core/utils/hooks";
+import { Component, useState, useRef } from "@odoo/owl";
+
+/**
+ * @typedef {import('./google_map_option_plugin.js').ApiKeyValidation} ApiKeyValidation
+ */
+
+export class GoogleMapsApiKeyDialog extends Component {
+    static template = "website.s_google_map_modal";
+    static components = { Dialog };
+    static props = {
+        validateGMapsApiKey: Function,
+        originalApiKey: String,
+        originalApiKeyValidation: Object,
+        onSave: Function,
+        close: Function,
+    };
+
+    setup() {
+        this.modalRef = useChildRef();
+        /** @type {{ apiKey?: string, apiKeyValidation: ApiKeyValidation }} */
+        this.state = useState({
+            apiKey: this.props.originalApiKey,
+            apiKeyValidation: this.props.originalApiKeyValidation,
+        });
+        this.apiKeyInput = useRef("apiKeyInput");
+    }
+
+    async onClickSave() {
+        if (this.state.apiKey) {
+            /** @type {NodeList} */
+            const buttons = this.modalRef.el.querySelectorAll("button");
+            buttons.forEach(button => button.setAttribute("disabled", true));
+            /** @type {ApiKeyValidation} */
+            const apiKeyValidation = await this.props.validateGMapsApiKey(this.state.apiKey);
+            this.state.apiKeyValidation = apiKeyValidation;
+            if (apiKeyValidation.isValid) {
+                await this.props.onSave(this.state.apiKey);
+                this.props.close();
+            }
+            buttons.forEach(button => button.removeAttribute("disabled"));
+        } else {
+            this.state.apiKeyValidation = {
+                isValid: false,
+                message: _t("Enter an API Key"),
+            };
+        }
+    }
+};

addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_api_key_dialog.xml

@@ -0,0 +1,56 @@
+<t t-name="website.s_google_map_modal">
+    <Dialog title="props.title" size="'md'" modalRef="modalRef">
+        <p>Use Google Map on your website (Contact Us page, snippets, etc).</p>
+        <div class="row mb-0">
+            <label class="col-sm-2 col-form-label" for="pin_address">API Key</label>
+            <div class="col">
+                <div class="input-group">
+                    <div class="input-group-text"><i class="fa fa-key"/></div>
+                    <input type="text" class="form-control" id="api_key_input"
+                            t-att-class="{ 'is-invalid': state.apiKeyValidation and !state.apiKeyValidation.isValid and state.apiKeyValidation.message }"
+                            t-model="state.apiKey"
+                            placeholder="BSgzTvR5L1GB9jriT451iTN4huVPxHmltG6T6eo"/>
+                </div>
+                <small t-if="state.apiKeyValidation and !state.apiKeyValidation.isValid and state.apiKeyValidation.message" id="api_key_help" class="text-danger">
+                    <t t-esc="state.apiKeyValidation.message"/>
+                </small>
+                <div class="small form-text text-muted">
+                    Hint: How to use Google Map on your website (Contact Us page and as a snippet)
+                    <br/>
+                    <a target="_blank" href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend&amp;keyType=CLIENT_SIDE&amp;reusekey=true">
+                        <i class="oi oi-arrow-right"/>
+                        Create a Google Project and Get a Key
+                    </a>
+                    <br/>
+                    <a target="_blank" href="https://cloud.google.com/maps-platform/pricing">
+                        <i class="oi oi-arrow-right"/>
+                        Enable billing on your Google Project
+                    </a>
+                </div>
+                <div class="alert alert-info mb-0 mt-3">
+                    Make sure your settings are properly configured:
+                    <ul class="mb-0">
+                        <li>
+                            Enable the right google map APIs in your google account
+                            <ul>
+                                <li>Maps Static API</li>
+                                <li>Maps JavaScript API</li>
+                                <li>Places API</li>
+                            </ul>
+                        </li>
+                        <li>
+                            Make sure billing is enabled
+                        </li>
+                        <li>
+                            Make sure to wait if errors keep being shown: sometimes enabling an API allows to use it immediately but Google keeps triggering errors for a while
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <t t-set-slot="footer">
+            <button t-on-click="onClickSave" class="btn btn-primary">Save</button>
+            <button class="btn" t-on-click="() => this.props.close()">Cancel</button>
+        </t>
+    </Dialog>
+</t>

addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option.js

@@ -0,0 +1,76 @@
+import { useRef, onMounted, useEffect } from "@odoo/owl";
+import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
+
+/** @import { Coordinates, Place } from './google_maps_option_plugin.js' */
+/**
+ * @typedef {Object} Props
+ * @property {function(Element, Coordinates):Promise<Place | undefined>} getPlace
+ * @property {function(Element, Place)} onPlaceChanged
+ */
+
+export class GoogleMapsOption extends BaseOptionComponent {
+    static template = "html_builder.GoogleMapsOption";
+    /** @type {Props} */
+    static props = {
+        getPlace: { type: Function },
+        onPlaceChanged: { type: Function },
+    };
+
+    async setup() {
+        super.setup();
+        /** @type {Props} */
+        this.props;
+        this.inputRef = useRef("inputRef");
+        /** @type {{ map: Element, formattedAddress: string }} */
+        this.state = useDomState(map => ({
+            map,
+            formattedAddress: map.dataset.pinAddress || "",
+        }));
+        useEffect(() => {
+            this.state.map.dataset.pinAddress = this.state.formattedAddress;
+        }, () => [ this.state.formattedAddress ]);
+        onMounted(async () => {
+            this.initializeAutocomplete(this.inputRef.el);
+        });
+    }
+
+    /**
+     * Initialize Google Places API's autocompletion on the option's input.
+     *
+     * @param {Element} inputEl
+     */
+    initializeAutocomplete(inputEl) {
+        if (!this.googleMapsAutocomplete && window.google?.maps?.places) {
+            this.googleMapsAutocomplete = new google.maps.places.Autocomplete(
+                inputEl,
+                { types: [ "geocode" ] },
+            );
+            google.maps.event.addListener(
+                this.googleMapsAutocomplete,
+                "place_changed",
+                this.onPlaceChanged.bind(this),
+            );
+            if (!this.state.formattedAddress) {
+                /** @type {Coordinates} */
+                const coordinates = this.state.map.dataset.mapGps;
+                this.props.getPlace(this.state.map, coordinates).then(place => {
+                    if (place?.formatted_address) {
+                        this.state.formattedAddress = place.formatted_address;
+                    }
+                });
+            }
+        }
+    }
+
+    /**
+     * Retrieve the new place given by Google Places API's autocompletion
+     * whenever it sends a signal that the place changed, and send it to the
+     * plugin.
+     */
+    onPlaceChanged() {
+        /** @type {Place | undefined} */
+        const place = this.googleMapsAutocomplete.getPlace();
+        this.props.onPlaceChanged(this.state.map, place);
+        this.state.formattedAddress = place?.formatted_address || "";
+    }
+}

addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option.scss

@@ -0,0 +1,55 @@
+.pac-container { // Google Maps' Autocomplete
+    z-index: $zindex-modal-backdrop; // > $o-we-zindex
+    width: ceil($o-we-sidebar-width * 0.9) !important;
+    font-size: $o-we-sidebar-font-size;
+    margin-left: -$o-we-sidebar-width/2;
+    border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-dropdown-border-color;
+    border-top: none;
+    border-radius: $o-we-item-border-radius;
+    overflow: hidden;
+    background-color: $o-we-sidebar-content-field-dropdown-bg;
+    box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
+    margin-top: $o-we-sidebar-content-field-dropdown-spacing;
+    transform: translate(41px);
+
+    &:after {
+        display: none;
+    }
+
+    .pac-item {
+        @include o-text-overflow(block);
+        line-height: $o-we-sidebar-content-field-dropdown-item-height;
+        color: $o-we-sidebar-content-field-clickable-color;
+        padding: 0 1em 0 (2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size);
+        border-top: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%);
+        border-radius: $o-we-sidebar-content-field-border-radius;
+        background-color: $o-we-sidebar-content-field-clickable-bg;
+        color: $o-we-sidebar-content-field-clickable-color;
+        font-size: $o-we-sidebar-font-size;
+
+        &:hover, &:focus, &.pac-item-selected {
+            background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
+            cursor: pointer;
+        }
+
+        /* Remove Google Maps' own icon. */
+        .pac-icon {
+            all: revert;
+        }
+
+        .pac-icon-marker {
+            position: absolute;
+            margin-left: -1em;
+
+            &::after {
+                content: '\f041';
+                font-family: FontAwesome;
+            }
+        }
+
+        .pac-item-query {
+            margin-right: 0.4em;
+            color: inherit;
+        }
+    }
+}

addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option.xml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.GoogleMapsDescription">
+    <div class="description">
+        <font>Visit us:</font>
+        <span>Our office is located in the northeast of Brussels. TEL (555) 432 2365</span>
+    </div>
+</t>
+
+<t t-name="html_builder.GoogleMapsOption">
+    <BuilderRow label.translate="Address" preview="false">
+        <input
+            type="text"
+            class="o_we_large"
+            t-att-value="state.formattedAddress"
+            placeholder.translate="e.g. De Brouckere, Brussels, Belgium"
+            t-ref="inputRef"
+        />
+    </BuilderRow>
+    <BuilderRow label.translate="Marker Style">
+        <BuilderSelect dataAttributeAction="'pinStyle'">
+            <BuilderSelectItem dataAttributeActionValue="''">Default</BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'flat'">Flat</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+    <BuilderRow label.translate="Type" preview="false">
+        <BuilderSelect action="'resetMapColor'" dataAttributeAction="'mapType'">
+            <BuilderSelectItem dataAttributeActionValue="'ROADMAP'" id="'roadmap_opt'">RoadMap</BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'TERRAIN'">Terrain</BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'SATELLITE'">Satellite</BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'HYBRID'">Hybrid</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+    <BuilderRow label.translate="&#8985; Style" preview="false" t-if="this.isActiveItem('roadmap_opt')">
+        <BuilderSelect dataAttributeAction="'mapColor'">
+            <BuilderSelectItem dataAttributeActionValue="">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'lightMonoMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'cupertinoMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'retroMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'cobaltMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'flatMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'blueMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'lillaMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'carMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg"/>
+            </BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'bwMap'">
+                <img src="/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg"/>
+            </BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+    <BuilderRow label.translate="Zoom" preview="false">
+        <BuilderNumberInput dataAttributeAction="'mapZoom'" default="12" step="1" min="0" max="22"/>
+    </BuilderRow>
+    <BuilderRow label.translate="Description" preview="false">
+        <BuilderCheckbox action="'showDescription'"/>
+    </BuilderRow>
+</t>
+
+</templates>