diff options
Diffstat (limited to 'addons/website_mass_mailing/static')
7 files changed, 280 insertions, 431 deletions
diff --git a/addons/website_mass_mailing/static/src/css/website_mass_mailing_popup.css b/addons/website_mass_mailing/static/src/css/website_mass_mailing_popup.css deleted file mode 100644 index 1ebd8b85beb..00000000000 --- a/addons/website_mass_mailing/static/src/css/website_mass_mailing_popup.css +++ /dev/null @@ -1,261 +0,0 @@ -/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */ -.editor_enable [data-oe-placeholder]:empty:not(:focus):before { - content: " \00a0 " attr(data-oe-placeholder); - opacity: 0.4; -} -.o_popup_animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -@-webkit-keyframes o_popup_bounce_small { - 0%, - 20%, - 53%, - 80%, - 100% { - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - 40%, - 43% { - -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -14px, 0); - transform: translate3d(0, -14px, 0); - } - 70% { - -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -8px, 0); - transform: translate3d(0, -8px, 0); - } - 90% { - -webkit-transform: translate3d(0, -2px, 0); - transform: translate3d(0, -2px, 0); - } -} -@keyframes o_popup_bounce_small { - 0%, - 20%, - 53%, - 80%, - 100% { - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - 40%, - 43% { - -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -14px, 0); - transform: translate3d(0, -14px, 0); - } - 70% { - -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -8px, 0); - transform: translate3d(0, -8px, 0); - } - 90% { - -webkit-transform: translate3d(0, -2px, 0); - transform: translate3d(0, -2px, 0); - } -} -.o_popup_bounce_small { - -webkit-animation-name: o_popup_bounce_small; - animation-name: o_popup_bounce_small; - -webkit-transform-origin: center bottom; - -ms-transform-origin: center bottom; - transform-origin: center bottom; -} -.o_popup_bounce_del500ms { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; -} -#o_newsletter_popup .btn.btn-success { - color: #ffffff; - background-color: #21b799; - border-color: #1da187; -} -#o_newsletter_popup .btn.btn-success:hover, -#o_newsletter_popup .btn.btn-success:focus, -#o_newsletter_popup .btn.btn-success.focus, -#o_newsletter_popup .btn.btn-success:active, -#o_newsletter_popup .btn.btn-success.active, -.open > .dropdown-toggle#o_newsletter_popup .btn.btn-success { - color: #ffffff; - background-color: #198c75; - border-color: #146e5c; -} -#o_newsletter_popup .btn.btn-success:active, -#o_newsletter_popup .btn.btn-success.active, -.open > .dropdown-toggle#o_newsletter_popup .btn.btn-success { - background-image: none; -} -#o_newsletter_popup .btn.btn-success.disabled, -#o_newsletter_popup .btn.btn-success[disabled], -fieldset[disabled] #o_newsletter_popup .btn.btn-success, -#o_newsletter_popup .btn.btn-success.disabled:hover, -#o_newsletter_popup .btn.btn-success[disabled]:hover, -fieldset[disabled] #o_newsletter_popup .btn.btn-success:hover, -#o_newsletter_popup .btn.btn-success.disabled:focus, -#o_newsletter_popup .btn.btn-success[disabled]:focus, -fieldset[disabled] #o_newsletter_popup .btn.btn-success:focus, -#o_newsletter_popup .btn.btn-success.disabled.focus, -#o_newsletter_popup .btn.btn-success[disabled].focus, -fieldset[disabled] #o_newsletter_popup .btn.btn-success.focus, -#o_newsletter_popup .btn.btn-success.disabled:active, -#o_newsletter_popup .btn.btn-success[disabled]:active, -fieldset[disabled] #o_newsletter_popup .btn.btn-success:active, -#o_newsletter_popup .btn.btn-success.disabled.active, -#o_newsletter_popup .btn.btn-success[disabled].active, -fieldset[disabled] #o_newsletter_popup .btn.btn-success.active { - background-color: #21b799; - border-color: #1da187; -} -#o_newsletter_popup h1, -#o_newsletter_popup h2, -#o_newsletter_popup h3, -#o_newsletter_popup h4, -#o_newsletter_popup h5, -#o_newsletter_popup h6, -#o_newsletter_popup .h1, -#o_newsletter_popup .h2, -#o_newsletter_popup .h3, -#o_newsletter_popup .h4, -#o_newsletter_popup .h5, -#o_newsletter_popup .h6 { - font-weight: 300; - color: #666; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -#o_newsletter_popup h1:first-child, -#o_newsletter_popup h2:first-child, -#o_newsletter_popup h3:first-child, -#o_newsletter_popup h4:first-child, -#o_newsletter_popup h5:first-child, -#o_newsletter_popup h6:first-child, -#o_newsletter_popup .h1:first-child, -#o_newsletter_popup .h2:first-child, -#o_newsletter_popup .h3:first-child, -#o_newsletter_popup .h4:first-child, -#o_newsletter_popup .h5:first-child, -#o_newsletter_popup .h6:first-child { - margin-top: 0; -} -#o_newsletter_popup .o_popup_modal_content { - border-radius: 2px; - box-shadow: 0 0 20px rgba(255, 255, 255, 0.11); - -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.11); - border: 1px solid #767676; - background: #f2f2f2; -} -#o_newsletter_popup .o_popup_modal_content:before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - z-index: 0; - background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%); - background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(42%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); - background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%); - background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%); - background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%); - background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); -} -#web_editor_inside_iframe #o_newsletter_popup .o_popup_modal_content:before { - content: none; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_header { - background: #6c1153; - padding: 5px; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_header .o_popup_modal_title { - color: #ffffff; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_header * { - position: relative; - z-index: 1; -} -#o_newsletter_popup .o_popup_modal_content a.o_popup_btn_close { - position: absolute; - z-index: 99; - right: 5px; - top: 6px; - width: 23px; - height: 23px; - display: block; - text-align: center; - border-radius: 100em; - background: #6c1153; - color: #daa3cb; - text-decoration: none; - -webkit-transition: all ease 200ms; - -moz-transition: all ease 200ms; - -ms-transition: all ease 200ms; - -o-transition: all ease 200ms; -} -#o_newsletter_popup .o_popup_modal_content a.o_popup_btn_close:hover { - background: #89296e; - color: #ffffff; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body { - padding: 0px 0px 30px; - color: #666666; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev { - padding-bottom: 15px; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_popup_message { - font-size: 3em; - position: relative; - text-align: left; - padding-left: 2em; - line-height: 1; - margin: .5em; - font-weight: 100; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_popup_message font { - font-weight: 600; - color: #875A7B; - font-size: 2.5em; - font-style: italic; - position: absolute; - top: -0.1em; - margin-left: -0.65em; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_popup_message strong { - color: #875A7B; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_message_paragraph { - position: relative; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .input-group { - margin-left: auto; - margin-right: auto; - max-width: 350px; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .input-group input { - border-radius: 2px 0 0 2px; - border: none; - outline: 0; - box-shadow: inset 0 -1px #cccccc; -} -#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .input-group .btn { - border-radius: 0 2px 2px 0; - border-width: 0 0 1px; - padding-top: 7px; - margin-left: -1px; - -webkit-transition: all ease 200ms; - -moz-transition: all ease 200ms; - -ms-transition: all ease 200ms; - -o-transition: all ease 200ms; -} diff --git a/addons/website_mass_mailing/static/src/img/blocks/newsletter_subscribe_popup.png b/addons/website_mass_mailing/static/src/img/blocks/newsletter_subscribe_popup.png Binary files differdeleted file mode 100644 index c0cd2562ce6..00000000000 --- a/addons/website_mass_mailing/static/src/img/blocks/newsletter_subscribe_popup.png +++ /dev/null diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js index 3506981e835..01ee423b6bd 100644 --- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js +++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js @@ -1,7 +1,6 @@ odoo.define('website_mass_mailing.editor', function (require) { 'use strict'; -var ajax = require('web.ajax'); var core = require('web.core'); var rpc = require('web.rpc'); var WysiwygMultizone = require('web_editor.wysiwyg.multizone'); @@ -10,22 +9,35 @@ var wUtils = require('website.utils'); var _t = core._t; -var mass_mailing_common = options.Class.extend({ +options.registry.mailing_list_subscribe = options.Class.extend({ popup_template_id: "editor_new_mailing_list_subscribe_button", popup_title: _t("Add a Newsletter Subscribe Button"), + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * Allows to select mailing list. + * + * @see this.selectClass for parameters + */ select_mailing_list: function (previewMode, value) { var self = this; var def = wUtils.prompt({ 'id': this.popup_template_id, 'window_title': this.popup_title, 'select': _t("Newsletter"), - 'init': function (field) { + 'init': function (field, dialog) { return rpc.query({ - model: 'mail.mass_mailing.list', - method: 'name_search', - args: ['', []], - context: self.options.recordInfo.context, - }); + model: 'mail.mass_mailing.list', + method: 'name_search', + args: ['', [['is_public', '=', true]]], + context: self.options.recordInfo.context, + }).then(function (data) { + $(dialog).find('.btn-primary').prop('disabled', !data.length); + return data; + }); }, }); def.then(function (result) { @@ -33,6 +45,9 @@ var mass_mailing_common = options.Class.extend({ }); return def; }, + /** + * @override + */ onBuilt: function () { var self = this; this._super(); @@ -42,75 +57,95 @@ var mass_mailing_common = options.Class.extend({ }, }); -options.registry.mailing_list_subscribe = mass_mailing_common.extend({ - cleanForSave: function () { - this.$target.addClass('d-none'); - }, -}); - -options.registry.newsletter_popup = mass_mailing_common.extend({ +options.registry.newsletter_popup = options.registry.mailing_list_subscribe.extend({ popup_template_id: "editor_new_mailing_list_subscribe_popup", popup_title: _t("Add a Newsletter Subscribe Popup"), - select_mailing_list: function (previewMode, value) { + + /** + * @override + */ + start: function () { var self = this; - return this._super(previewMode, value).then(function (mailing_list_id) { - ajax.jsonRpc('/web/dataset/call', 'call', { - model: 'mail.mass_mailing.list', - method: 'read', - args: [[parseInt(mailing_list_id)], ['popup_content'], self.options.recordInfo.context], - }).then(function (data) { - self.$target.find(".o_popup_content_dev").empty(); - if (data && data[0].popup_content) { - $(data[0].popup_content).appendTo(self.$target.find(".o_popup_content_dev")); - } - }); + this.$target.on('click.newsletter_popup_option', '.o_edit_popup', function (ev) { + // So that the snippet is not enabled again by the editor + ev.stopPropagation(); + self.$target.data('quick-open', true); + self._refreshPublicWidgets(); }); + this.$target.on('shown.bs.modal.newsletter_popup_option hide.bs.modal.newsletter_popup_option', function () { + self.$target.closest('.o_editable').trigger('content_changed'); + self.trigger_up('deactivate_snippet'); + }); + return this._super.apply(this, arguments); }, -}); - -WysiwygMultizone.include({ - events: _.extend({}, WysiwygMultizone.prototype.events, { - 'click #edit_dialog': 'edit_dialog', - 'click .o_popup_modal_content [data-dismiss="modal"]': 'close_dialog', - }), - save: function () { - var $target = $('#wrapwrap').find('#o_newsletter_popup'); - if ($target && $target.length) { - this.close_dialog(); - $('.o_popup_bounce_small').show(); - if (!$target.find('.o_popup_content_dev').length) { - $target.find('.o_popup_modal_body').prepend($('<div class="o_popup_content_dev" data-oe-placeholder="' + _t("Type Here ...") + '"></div>')); - } - var content = $('#wrapwrap .o_popup_content_dev').html(); - var newsletter_id = $target.parent().attr('data-list-id'); - ajax.jsonRpc('/web/dataset/call', 'call', { - model: 'mail.mass_mailing.list', - method: 'write', - args: [ - parseInt(newsletter_id), - {'popup_content':content}, - this.options.recordInfo.context, - ], + /** + * @override + */ + cleanForSave: function () { + var self = this; + var content = this.$target.data('content'); + if (content) { + this.trigger_up('get_clean_html', { + $layout: $('<div/>').html(content), + callback: function (html) { + self.$target.data('content', html); + }, }); } - return this._super.apply(this, arguments); + this._super.apply(this, arguments); }, + /** + * @override + */ destroy: function () { - this.close_dialog(); - this._super(); + this.$target.off('.newsletter_popup_option'); + this._super.apply(this, arguments); }, //-------------------------------------------------------------------------- - // Handler + // Options //-------------------------------------------------------------------------- - close_dialog: function () { - $('#wrapwrap').find('#o_newsletter_popup').modal('hide'); + /** + * @override + */ + select_mailing_list: function () { + var self = this; + return this._super.apply(this, arguments).then(function () { + self.$target.data('quick-open', true); + self.$target.removeData('content'); + self._refreshPublicWidgets(); + }); }, - edit_dialog: function (ev) { - $('#wrapwrap').find('#o_newsletter_popup').modal('show'); - $('.o_popup_bounce_small').hide(); - $('.modal-backdrop').css("z-index", "0"); +}); + +WysiwygMultizone.include({ + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _saveElement: function (outerHTML, recordInfo, editable) { + var self = this; + var defs = [this._super.apply(this, arguments)]; + var $popups = $(editable).find('.o_newsletter_popup'); + _.each($popups, function (popup) { + var $popup = $(popup); + var content = $popup.data('content'); + if (content) { + defs.push(self._rpc({ + route: '/website_mass_mailing/set_content', + params: { + 'newsletter_id': parseInt($popup.attr('data-list-id')), + 'content': content, + }, + })); + } + }); + return Promise.all(defs); }, }); }); diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js index abd7988821b..535e79576b5 100644 --- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js +++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js @@ -1,68 +1,89 @@ odoo.define('mass_mailing.website_integration', function (require) { "use strict"; +var config = require('web.config'); +var core = require('web.core'); +var Dialog = require('web.Dialog'); var utils = require('web.utils'); var publicWidget = require('web.public.widget'); +var _t = core._t; + publicWidget.registry.subscribe = publicWidget.Widget.extend({ selector: ".js_subscribe", disabledInEditableMode: false, + read_events: { + 'click .js_subscribe_btn': '_onSubscribeClick', + }, + /** + * @override + */ start: function () { var self = this; + var def = this._super.apply(this, arguments); + this.$popup = this.$target.closest('.o_newsletter_modal'); + if (this.$popup.length) { + // No need to check whether the user subscribed or not if the input + // is in a popup as the popup won't open if he did subscribe. + return def; + } var always = function (data) { - self.$target.find('input.js_subscribe_email') - .val(data.email ? data.email : "") - .attr("disabled", data.is_subscriber && data.email.length ? "disabled" : false); - self.$target.attr("data-subscribe", data.is_subscriber ? 'on' : 'off'); - self.$target.find('a.js_subscribe_btn') - .attr("disabled", data.is_subscriber && data.email.length ? "disabled" : false); + var isSubscriber = data.is_subscriber; + self.$('.js_subscribe_btn').prop('disabled', isSubscriber); + self.$('input.js_subscribe_email') + .val(data.email || "") + .prop('disabled', isSubscriber); self.$target.removeClass('d-none'); - self.$target.find('.js_subscribe_btn').toggleClass('d-none', !!data.is_subscriber); - self.$target.find('.js_subscribed_btn').toggleClass('d-none', !data.is_subscriber); + self.$('.js_subscribe_btn').toggleClass('d-none', !!isSubscriber); + self.$('.js_subscribed_btn').toggleClass('d-none', !isSubscriber); }; - - // set value and display button - self.$target.find("input").removeClass('d-none'); - this._rpc({ + return Promise.all([def, this._rpc({ route: '/website_mass_mailing/is_subscriber', params: { - list_id: this.$target.data('list-id'), + 'list_id': this.$target.data('list-id'), }, - }).then(always).guardedCatch(always); - - // not if editable mode to allow designer to edit alert field - if (!this.editableMode) { - $('.js_subscribe > .alert').addClass('d-none'); - $('.js_subscribe > .input-group-append.d-none').removeClass('d-none'); - this.$target.find('.js_subscribe_btn').on('click', function (event) { - event.preventDefault(); - self._onClick(); - }); - } + }).then(always).guardedCatch(always)]); }, - _onClick: function () { + /** + * @override + */ + destroy: function () { + this.$target.addClass('d-none'); + this._super.apply(this, arguments); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onSubscribeClick: function () { var self = this; - var $email = this.$target.find(".js_subscribe_email:visible"); + var $email = this.$(".js_subscribe_email:visible"); if ($email.length && !$email.val().match(/.+@.+/)) { - this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); + this.$target.addClass('o_has_error').find('.form-control').addClass('is-invalid'); return false; } - this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); - + this.$target.removeClass('o_has_error').find('.form-control').removeClass('is-invalid'); this._rpc({ route: '/website_mass_mailing/subscribe', params: { 'list_id': this.$target.data('list-id'), 'email': $email.length ? $email.val() : false, }, - }).then(function (subscribe) { - self.$target.find(".js_subscribe_email, .input-group-append").addClass('d-none'); - self.$target.find(".alert").removeClass('d-none'); - self.$target.find('input.js_subscribe_email').attr("disabled", subscribe ? "disabled" : false); - self.$target.attr("data-subscribe", subscribe ? 'on' : 'off'); + }).then(function (result) { + self.$(".js_subscribe_btn").addClass('d-none'); + self.$(".js_subscribed_btn").removeClass('d-none'); + self.$('input.js_subscribe_email').prop('disabled', !!result); + if (self.$popup.length) { + self.$popup.modal('hide'); + } + self.displayNotification(_t("Success"), result.toast_content, 'success', true); }); }, }); @@ -71,84 +92,106 @@ publicWidget.registry.newsletter_popup = publicWidget.Widget.extend({ selector: ".o_newsletter_popup", disabledInEditableMode: false, + /** + * @override + */ start: function () { var self = this; - - // Compatibility: rebuilding a correct modal from user database - // content. Since the first version, the modal is saved in databases - // directly but has never used a correct structure. While it was working - // with BS3, it is not with BS4. - // TODO review the newsletter popup creation, save and loading. - var $modal = this.$('.modal'); - if ($modal.is('.modal-dialog')) { - $modal.removeClass('modal-md modal-dialog'); - var $modalContent = $modal.find('.modal-content'); - $modalContent.wrapAll($('<div/>', {class: 'modal-dialog'})); + var defs = [this._super.apply(this, arguments)]; + this.websiteID = this._getContext().website_id; + this.listID = parseInt(this.$target.attr('data-list-id')); + if (!this.listID || (utils.get_cookie(_.str.sprintf("newsletter-popup-%s-%s", this.listID, this.websiteID)) && !self.editableMode)) { + return Promise.all(defs); } - - var popupcontent = self.$target.find(".o_popup_content_dev").empty(); - if (!self.$target.data('list-id')) { - return; + if (this.$target.data('content') && this.editableMode) { + // To avoid losing user changes. + this._dialogInit(this.$target.data('content')); + this.$target.removeData('quick-open'); + this.massMailingPopup.open(); + } else { + defs.push(this._rpc({ + route: '/website_mass_mailing/get_content', + params: { + newsletter_id: self.listID, + }, + }).then(function (data) { + self._dialogInit(data.popup_content, data.email || ''); + if (!self.editableMode && !data.is_subscriber) { + if (config.device.isMobile) { + setTimeout(function () { + self._showBanner(); + }, 5000); + } else { + $(document).on('mouseleave.open_popup_event', self._showBanner.bind(self)); + } + } else { + $(document).off('mouseleave.open_popup_event'); + } + // show popup after choosing a newsletter + if (self.$target.data('quick-open')) { + self.massMailingPopup.open(); + self.$target.removeData('quick-open'); + } + })); } - this._rpc({ - route: '/website_mass_mailing/get_content', - params: { - newsletter_id: self.$target.data('list-id'), - }, - }).then(function (data) { - if (data.content) { - $('<div></div>').append(data.content).appendTo(popupcontent); - } - self.$target.find('input.popup_subscribe_email').val(data.email || ""); - self.redirect_url = data.redirect_url; - if (!self.editableMode && !data.is_subscriber) { - $(document).on('mouseleave', _.bind(self.show_banner, self)); - - self.$target.find('.popup_subscribe_btn').on('click', function (event) { - event.preventDefault(); - self._onClickSubscribe(); - }); - } else { $(document).off('mouseleave'); } - }); + return Promise.all(defs); }, - _onClickSubscribe: function () { - var self = this; - var $email = self.$target.find(".popup_subscribe_email:visible"); - - if ($email.length && !$email.val().match(/.+@.+/)) { - this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); - return false; + /** + * @override + */ + destroy: function () { + if (this.massMailingPopup) { + this.massMailingPopup.close(); } - this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); + this._super.apply(this, arguments); + }, - this._rpc({ - route: '/website_mass_mailing/subscribe', - params: { - 'list_id': self.$target.data('list-id'), - 'email': $email.length ? $email.val() : false, - }, - }).then(function (subscribe) { - self.$target.find('#o_newsletter_popup').modal('hide'); - $(document).off('mouseleave'); - if (self.redirect_url) { - if (_.contains(self.redirect_url.split('/'), window.location.host) || self.redirect_url.indexOf('/') === 0) { - window.location.href = self.redirect_url; - } else { - window.open(self.redirect_url, '_blank'); - } + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @param {string} content + * @private + */ + _dialogInit: function (content, email) { + var self = this; + this.massMailingPopup = new Dialog(this, { + technical: false, + $content: $('<div/>').html(content), + $parentNode: this.$target, + backdrop: !this.editableMode, + dialogClass: 'p-0' + (this.editableMode ? ' o_editable oe_structure oe_empty' : ''), + renderFooter: false, + size: 'medium', + }); + this.massMailingPopup.opened().then(function () { + var $modal = self.massMailingPopup.$modal; + $modal.addClass('o_newsletter_modal'); + $modal.find('.oe_structure').attr('data-editor-message', _t('DRAG BUILDING BLOCKS HERE')); + $modal.find('.modal-dialog').addClass('modal-dialog-centered'); + $modal.find('.js_subscribe').data('list-id', self.listID) + .find('input.js_subscribe_email').val(email); + self.trigger_up('widgets_start_request', { + editableMode: self.editableMode, + $target: $modal, + }); + }); + this.massMailingPopup.on('closed', this, function () { + var $modal = self.massMailingPopup.$modal; + if ($modal) { // The dialog might have never been opened + self.$el.data('content', $modal.find('.modal-body').html()); } }); }, - show_banner: function () { - var self = this; - if (!utils.get_cookie("newsletter-popup-"+ self.$target.data('list-id')) && self.$target) { - $('#o_newsletter_popup:first').modal('show').css({ - 'margin-top': '70px', - 'position': 'fixed' - }); - document.cookie = "newsletter-popup-"+ self.$target.data('list-id') +"=" + true + ";path=/"; - } - } + /** + * @private + */ + _showBanner: function () { + this.massMailingPopup.open(); + utils.set_cookie(_.str.sprintf("newsletter-popup-%s-%s", this.listID, this.websiteID), true); + $(document).off('mouseleave.open_popup_event'); + }, }); }); diff --git a/addons/website_mass_mailing/static/src/scss/website_mass_mailing.editor.scss b/addons/website_mass_mailing/static/src/scss/website_mass_mailing.editor.scss new file mode 100644 index 00000000000..83c45749d6d --- /dev/null +++ b/addons/website_mass_mailing/static/src/scss/website_mass_mailing.editor.scss @@ -0,0 +1,8 @@ +.editor_enable { + .o_newsletter_modal { + // set z-index so customize options visible on dialog. + z-index: $o-wysiwyg-zindex - 2; + // just for fake backdrop effect + background-color: rgba(66, 66, 66, 0.4); + } +} diff --git a/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss b/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss new file mode 100644 index 00000000000..dbf59564104 --- /dev/null +++ b/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss @@ -0,0 +1,23 @@ +.o_newsletter_modal { + + .modal-header { + padding: 0; + border: none; + } + .modal-title { + display: none; + } + .close { + @include o-position-absolute(0, 0); + font-size: $font-size-sm; + width: 2 * $font-size-sm; + height: 2 * $font-size-sm; + padding: 0; + margin: (-$font-size-sm) (-$font-size-sm) 0 0; + opacity: 1; + background-color: $white; + z-index: 1; + border-radius: $font-size-sm; + box-shadow: $box-shadow-sm; + } +} diff --git a/addons/website_mass_mailing/static/src/xml/website_mass_mailing.xml b/addons/website_mass_mailing/static/src/xml/website_mass_mailing.xml index 56ee3661378..d816d899fe8 100644 --- a/addons/website_mass_mailing/static/src/xml/website_mass_mailing.xml +++ b/addons/website_mass_mailing/static/src/xml/website_mass_mailing.xml @@ -1,12 +1,13 @@ <?xml version="1.0" encoding="UTF-8"?> <templates id="template" xml:space="preserve"> <t t-name="website_mass_mailing.edition.wrapper"> - <div role="dialog" class="modal-dialog modal-md d-block" id="o_newsletter_popup"> - <div class="modal-content o_popup_modal_content"> - <div class="o_popup_modal_body text-center"> - <div class="o_popup_content_dev"> - <div id="wrapper"></div> - </div> + <div class="modal fade show d-block o_newsletter_modal"> + <div role="dialog" class="modal-dialog modal-dialog-centered"> + <div class="modal-content"> + <header> + <button type="button" class="close" aria-label="Close" tabindex="-1">×</button> + </header> + <div id="wrapper" class="modal-body oe_structure"></div> </div> </div> </div> |
