[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>
This commit is contained in:
Benoit Socias
@@ -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 {
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
@@ -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"/><!--   -->
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<record id="website.s_map_000_scss" model="ir.asset">
|
||||
|
||||
Reference in New Issue
Block a user