diff options
Diffstat (limited to 'addons/website/static/src/snippets/s_google_map')
3 files changed, 43 insertions, 132 deletions
diff --git a/addons/website/static/src/snippets/s_google_map/000.js b/addons/website/static/src/snippets/s_google_map/000.js index a59162a5f1a..1fa5d3d74aa 100644 --- a/addons/website/static/src/snippets/s_google_map/000.js +++ b/addons/website/static/src/snippets/s_google_map/000.js @@ -1,13 +1,8 @@ odoo.define('website.s_google_map', function (require) { 'use strict'; -const ajax = require('web.ajax'); -const {_t} = require('web.core'); const publicWidget = require('web.public.widget'); -let googleScriptLoadedResolve = null; -const googleScriptLoaded = new Promise(resolve => googleScriptLoadedResolve = resolve); - publicWidget.registry.GoogleMap = publicWidget.Widget.extend({ selector: '.s_google_map', disabledInEditableMode: false, @@ -31,42 +26,12 @@ publicWidget.registry.GoogleMap = publicWidget.Widget.extend({ await this._super(...arguments); if (typeof google !== 'object' || typeof google.maps !== 'object') { - if (!publicWidget.registry.GoogleMap.isScriptLoading) { - publicWidget.registry.GoogleMap.isScriptLoading = true; - const self = this; - window.odoo_s_google_map_redraw_all = function odoo_s_google_map_redraw_all() { - for (const map of $('section.s_google_map')) { - self.trigger_up('widgets_start_request', { - editableMode: self.editableMode, - $target: $(map), - }); - } - publicWidget.registry.GoogleMap.isScriptLoading = false; - googleScriptLoadedResolve(); - }; - - const data = await this._rpc({ - route: '/website/google_maps_api_key', + await new Promise(resolve => { + this.trigger_up('gmap_api_request', { + editableMode: this.editableMode, + onSuccess: () => resolve(), }); - - const key = JSON.parse(data).google_maps_api_key; - if (!key) { - publicWidget.registry.GoogleMap.isScriptLoading = false; - if (this.editableMode) { - this.$loadingWarning = $('<div/>', { - class: 'alert alert-warning alert-link', - }).append($('<a/>', { - href: "#", - text: _t("Cannot load google map, check your configuration !"), - })).click(function (e) { - window.location.href = "/web#action=website.action_website_configuration"; - }); - this.$('.map_container').append(this.$loadingWarning); - } - return; - } - await ajax.loadJS(`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=odoo_s_google_map_redraw_all&key=${key}`); - } + }); // The animation will be restarted for all maps as soon as the // google map script has been executed. return; @@ -127,25 +92,5 @@ publicWidget.registry.GoogleMap = publicWidget.Widget.extend({ map.setMapTypeId('map_style'); } }, - /** - * @override - */ - destroy() { - this._super(...arguments); - if (this.$loadingWarning) { - this.$loadingWarning.remove(); - } - }, }); - -// This allows to save if the google maps script is already loading or not. -// This script cannot be loaded 2 times, so if we have 2 snippets in the same -// page we don't want to load the script 2 times. -// And we cannot put the script in an asset because we don't want to load it -// on each page, but only on pages with a google maps snippet... -publicWidget.registry.GoogleMap.prototype.isScriptLoading = false; - -return { - googleScriptLoaded: googleScriptLoaded, -}; }); diff --git a/addons/website/static/src/snippets/s_google_map/000.scss b/addons/website/static/src/snippets/s_google_map/000.scss index 4e13cb07941..9a8df732775 100644 --- a/addons/website/static/src/snippets/s_google_map/000.scss +++ b/addons/website/static/src/snippets/s_google_map/000.scss @@ -5,9 +5,8 @@ $s-google-map-desc-hover-bg: theme-color('primary') !default; $s-google-map-desc-hover-alpha: 0.55 !default; .s_google_map { - height: 100%; - min-height: 100px; position: relative; + min-height: 100px; .map_container { @include o-position-absolute(0, 0, 0, 0); @@ -16,8 +15,8 @@ $s-google-map-desc-hover-alpha: 0.55 !default; @include o-position-absolute(auto, 0, 0, 0); z-index: 99; padding: 0 1em; - background: rgba($s-google-map-desc-bg , $s-google-map-desc-alpha); - color: color-yiq(rgba($s-google-map-desc-bg , $s-google-map-desc-alpha)); + background: rgba($s-google-map-desc-bg, $s-google-map-desc-alpha); + color: color-yiq(rgba($s-google-map-desc-bg, $s-google-map-desc-alpha)); transition: background-color 250ms ease; font { @@ -41,14 +40,3 @@ $s-google-map-desc-hover-alpha: 0.55 !default; color: color-yiq(rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha)); } } - -#mapModal { - z-index: 3000; -} -.pac-container { // google map autosuggestion - z-index: 3001; - - &:after { - display: none; - } -} diff --git a/addons/website/static/src/snippets/s_google_map/options.js b/addons/website/static/src/snippets/s_google_map/options.js index 9b27d815a66..6aad46f12ad 100644 --- a/addons/website/static/src/snippets/s_google_map/options.js +++ b/addons/website/static/src/snippets/s_google_map/options.js @@ -1,78 +1,56 @@ odoo.define('options.s_google_map_options', function (require) { 'use strict'; -const {Dialog} = require('web_editor.widget'); -const {_t, qweb} = require('web.core'); +const {_t} = require('web.core'); const options = require('web_editor.snippets.options'); -const {googleScriptLoaded} = require('website.s_google_map'); options.registry.GoogleMap = options.Class.extend({ - xmlDependencies: ['/website/static/src/xml/s_google_map_modal.xml'], - defaultLocation: '(50.854975,4.3753899)', - - /** - * @override - */ - onBuilt() { - this._super(...arguments); - - let widget = null; - this.trigger_up('user_value_widget_request', { - name: 'map_options_opt', - onSuccess: _widget => widget = _widget, - }); - widget.$el.click(); - }, //-------------------------------------------------------------------------- // Options //-------------------------------------------------------------------------- /** - * Opens the customization dialog. - * * @see this.selectClass for parameters */ - async map(previewMode, widgetValue, params) { - await new Promise(resolve => { - this.dialog = new Dialog(this, { - size: 'medium', - title: _t("Customize your map"), - buttons: [ - {text: _t("Save"), classes: 'btn-primary', close: true, click: () => { - if (!this.dialog.$('#placeBk').val()) { - this.dialog.$('#placeBk').val(this.defaultLocation); - } - this.$target[0].dataset.mapGps = this.dialog.$('#placeBk').val(); - this.$target[0].dataset.pinStyle = this.dialog.$('#pin_style').val(); - this.$target[0].dataset.pinAddress = this.dialog.$('#pin_address').val(); - }}, - {text: _t("Cancel"), close: true} - ], - $content: $(qweb.render('website.s_google_map_modal')) - }); - - this.dialog.opened().then(() => { - this.dialog.$('#pin_address').val(this.$target[0].dataset.pinAddress); - this.dialog.$('#pin_style').val(this.$target[0].dataset.pinStyle); - this.dialog.$('#placeBk').val(this.$target[0].dataset.mapGps); - const autocomplete = new google.maps.places.Autocomplete(this.dialog.$('#pin_address').get(0), {types: ['geocode']}); - google.maps.event.addListener(autocomplete, 'place_changed', () => { - const place = autocomplete.getPlace(); - this.dialog.$('#placeBk').val(place.geometry ? place.geometry.location : this.defaultLocation); - }); - }); - - this.dialog.on('closed', this, () => resolve()); - - googleScriptLoaded.then(() => this.dialog.open()); - }); + resetMapColor(previewMode, widgetValue, params) { + this.$target[0].dataset.mapColor = ''; }, /** * @see this.selectClass for parameters */ - resetMapColor(previewMode, widgetValue, params) { - this.$target[0].dataset.mapColor = ''; + setFormattedAddress(previewMode, widgetValue, params) { + this.$target[0].dataset.pinAddress = params.gmapPlace.formatted_address; + }, + /** + * @see this.selectClass for parameters + */ + async showDescription(previewMode, widgetValue, params) { + const descriptionEl = this.$target[0].querySelector('.description'); + if (widgetValue && !descriptionEl) { + this.$target.append($(` + <div class="description"> + <font>${_t('Visit us:')}</font> + <span>${_t('Our office is located in the northeast of Brussels. TEL (555) 432 2365')}</span> + </div>`) + ); + } else if (!widgetValue && descriptionEl) { + descriptionEl.remove(); + } + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _computeWidgetState(methodName, params) { + if (methodName === 'showDescription') { + return this.$target[0].querySelector('.description') ? 'true' : ''; + } + return this._super(...arguments); }, }); }); |