From 2ff8b4ac53af75514203b39b037833a1e7ba3b0b Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Thu, 17 Jun 2021 10:25:57 +0000
Subject: [PATCH] [FIX] website: make map snippet cleaner

Follow-up of [1]

Before this commit the map snippet had life-cycle and naming issues.

Also avoid partially reusing the color picker intended for background
images for the color filter overlay.
The height adjustment has also been removed, the standard top and
bottom padding can be adjusted to achieve a similar result.

[1]: https://github.com/odoo/odoo/pull/66766#pullrequestreview-685976812

Related to task-2464422

closes odoo/odoo#73180

X-original-commit: 8b9225ffd133332630097f29db9522abace7ba09
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/snippets/s_map/000.scss        |  5 +
 .../static/src/snippets/s_map/options.js      | 91 +++++++++----------
 addons/website/views/snippets/s_map.xml       | 15 +--
 3 files changed, 50 insertions(+), 61 deletions(-)

diff --git a/addons/website/static/src/snippets/s_map/000.scss b/addons/website/static/src/snippets/s_map/000.scss
index 54065bae418..3b8c0fb5d34 100644
--- a/addons/website/static/src/snippets/s_map/000.scss
+++ b/addons/website/static/src/snippets/s_map/000.scss
@@ -39,6 +39,11 @@ $s-map-desc-hover-alpha: 0.55 !default;
         background: rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha);
         color: color-yiq(rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha));
     }
+    .s_map_color_filter {
+        @include o-position-absolute(0, 0, 0, 0);
+        position: absolute !important;
+        pointer-events: none;
+    }
 }
 
 .editor_enable .s_map {
diff --git a/addons/website/static/src/snippets/s_map/options.js b/addons/website/static/src/snippets/s_map/options.js
index 1e6f79cb7e1..1d182e99322 100644
--- a/addons/website/static/src/snippets/s_map/options.js
+++ b/addons/website/static/src/snippets/s_map/options.js
@@ -1,52 +1,29 @@
-odoo.define('options.s_map_options', function (require) {
-'use strict';
+/** @odoo-module **/
 
-const {_t} = require('web.core');
-const options = require('web_editor.snippets.options');
+import {_t} from 'web.core';
+import options from 'web_editor.snippets.options';
 
 options.registry.Map = options.Class.extend({
     /**
-     *
      * @override
      */
-    onBuilt: function () {
-        this.updateUI();
-    },
-
-    /**
-     * @override
-     */
-    updateUI() {
-        const dataset = this.$target[0].dataset;
-        const embedded = this.$target.find('.o_embedded');
-        const info = this.$target.find('.missing_option_warning');
-        if (dataset.mapAddress) {
-            const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(dataset.mapAddress)
-                + '&t=' + encodeURIComponent(dataset.mapType)
-                + '&z=' + encodeURIComponent(dataset.mapZoom)
-                + '&ie=UTF8&iwloc=&output=embed';
-            if (url !== embedded.attr('src')) {
-                embedded.attr('src', url);
-            }
-            embedded.removeClass('d-none');
-            info.addClass('d-none');
-        } else {
-            embedded.attr('src', 'about:blank');
-            embedded.addClass('d-none');
-            info.removeClass('d-none');
-        }
-        if (! (this.$target.hasClass('o_half_screen_height') || this.$target.hasClass('o_full_screen_height'))) {
-            this.$target.css('min-height', this.$target[0].dataset.mapMinHeight);
-        }
-        return this._super.apply(this, arguments).then(() => {
-            this.updateUIVisibility();
-        });
+    onBuilt() {
+        this._updateSource();
     },
 
     //--------------------------------------------------------------------------
     // Options
     //--------------------------------------------------------------------------
 
+    /**
+     * @see this.selectClass for parameters
+     */
+    async selectDataAttribute(previewMode, widgetValue, params) {
+        await this._super(...arguments);
+        if (['mapAddress', 'mapType', 'mapZoom'].includes(params.attributeName)) {
+            this._updateSource();
+        }
+    },
     /**
      * @see this.selectClass for parameters
      */
@@ -63,15 +40,6 @@ options.registry.Map = options.Class.extend({
             descriptionEl.remove();
         }
     },
-    /**
-     * @see this.selectClass for parameters
-     */
-    async setHeight(previewMode, widgetValue, params) {
-        if (widgetValue) {
-            this.$target[0].dataset.mapMinHeight = widgetValue;
-            this.$target.css('min-height', widgetValue);
-        }
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -84,10 +52,33 @@ options.registry.Map = options.Class.extend({
         if (methodName === 'showDescription') {
             return !!this.$target[0].querySelector('.description');
         }
-        if (methodName === 'setHeight') {
-            return this.$target[0].dataset.mapMinHeight;
-        }
         return this._super(...arguments);
     },
+    /**
+     * @private
+     */
+    _updateSource() {
+        const dataset = this.$target[0].dataset;
+        const $embedded = this.$target.find('.s_map_embedded');
+        const $info = this.$target.find('.missing_option_warning');
+        if (dataset.mapAddress) {
+            const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(dataset.mapAddress)
+                + '&t=' + encodeURIComponent(dataset.mapType)
+                + '&z=' + encodeURIComponent(dataset.mapZoom)
+                + '&ie=UTF8&iwloc=&output=embed';
+            if (url !== $embedded.attr('src')) {
+                $embedded.attr('src', url);
+            }
+            $embedded.removeClass('d-none');
+            $info.addClass('d-none');
+        } else {
+            $embedded.attr('src', 'about:blank');
+            $embedded.addClass('d-none');
+            $info.removeClass('d-none');
+        }
+    },
 });
-});
+
+export default {
+    Map: options.registry.Map,
+};
diff --git a/addons/website/views/snippets/s_map.xml b/addons/website/views/snippets/s_map.xml
index 35c192cbf6e..40dd065e4cb 100644
--- a/addons/website/views/snippets/s_map.xml
+++ b/addons/website/views/snippets/s_map.xml
@@ -2,17 +2,15 @@
 <odoo>
 
 <template name="Map" id="s_map">
-    <section class="s_map" style="min-height: 100px;" data-map-type="m" data-map-zoom="12"  data-map-min-height="100px"
-        t-att-data-map-address="' '.join(filter(None, (user_id.company_id.street, user_id.company_id.city, user_id.company_id.state_id.display_name, user_id.company_id.country_id.display_name)))"
-    >
+    <section class="s_map pb56 pt56" data-map-type="m" data-map-zoom="12" t-att-data-map-address="' '.join(filter(None, (user_id.company_id.street, user_id.company_id.city, user_id.company_id.state_id.display_name, user_id.company_id.country_id.display_name)))">
         <div class="map_container o_not_editable">
             <div class="css_non_editable_mode_hidden">
                 <div class="missing_option_warning alert alert-info rounded-0 fade show d-none d-print-none">
                     An address must be specified for a map to be embedded
                 </div>
             </div>
-            <iframe class="d-none o_embedded o_not_editable" width="100%" height="100%" src="about:blank" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
-            <div class="o_we_bg_filter" style="background-color: rgba(239, 112, 112, 0) !important;"></div>
+            <iframe class="d-none s_map_embedded o_not_editable" width="100%" height="100%" src="about:blank" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
+            <div class="s_map_color_filter"/>
         </div>
     </section>
 </template>
@@ -49,15 +47,10 @@
                 <we-button data-select-data-attribute="2">2000 km</we-button>
             </we-select>
             <we-colorpicker string="Color filter" data-select-style="true"
-                data-css-property="background-color" data-color-prefix="bg-" data-apply-to=".o_we_bg_filter"/>
+                data-css-property="background-color" data-color-prefix="bg-" data-apply-to=".s_map_color_filter"/>
             <we-checkbox string="Description" data-no-preview="true" data-show-description="true"/>
         </div>
     </xpath>
-    <xpath expr="//div[@data-option-name='minHeight']" position="inside">
-        <div data-js="Map" data-selector=".s_map">
-            <we-input data-name="default_height" data-dependencies="minheight_auto_opt" string="⌙ Default" data-set-height="" data-unit="px" data-no-preview="true"/><!-- &emsp; -->
-        </div>
-    </xpath>
 </template>
 
 <record id="website.s_map_000_scss" model="ir.asset">