[REF] mass_mailing: convert templates to themes and clean code

* Remove mass mailing template switching system (lemon, airmail, ...)
and replace it with a theme selector which only toggle a different
class on the body.
* Lint JS files.
* Change the way the editor is overridden by mass_mailing in a more
odoo way (put the JS in assets and check on runtime if it must be
applied.

+ fix editor style
+ remove useless code
+ remove odoo template

1 files changed, 85 insertions, 55 deletions

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index 6d2f025a438..23e8a84f155 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -1,33 +1,41 @@
 odoo.define('mass_mailing.editor', function (require) {
 "use strict";
 
-var Model = require('web.Model');
+var ajax = require("web.ajax");
+var core = require("web.core");
 var rte = require('web_editor.rte');
 var web_editor = require('web_editor.editor');
 var options = require('web_editor.snippets.options');
 var snippets_editor = require('web_editor.snippet.editor');
 
+var _t = core._t;
+
+var $editable_area = $("#editable_area");
+if ($editable_area.length === 0 || !$editable_area.is(".o_mail_area")) {
+    return;
+}
+
 // Snippet option for resizing  image and column width inline like excel
 options.registry["width-x"] = options.Class.extend({
     start: function () {
         this.container_width = 600;
         var parent = this.$target.closest('[data-max-width]');
-        if( parent.length ){
+        if (parent.length) {
             this.container_width = parseInt(parent.attr('data-max-width'));
-        } 
+        }
         var self = this;
         var offset, sib_offset, target_width, sib_width;
         this.is_image = false;
         this._super();
 
         this.$overlay.find(".oe_handle.e, .oe_handle.w").removeClass("readonly");
-        if( this.$target.is('img')){
+        if (this.$target.is('img')) {
             this.$overlay.find(".oe_handle.w").addClass("readonly");
             this.$overlay.find(".oe_snippet_remove, .oe_snippet_move, .oe_snippet_clone").addClass("hidden");
             this.is_image=true;
         }
 
-        this.$overlay.find(".oe_handle").on('mousedown', function (event){
+        this.$overlay.find(".oe_handle").on('mousedown', function (event) {
             event.preventDefault();
             var $handle = $(this);
             var compass = false;
@@ -35,12 +43,12 @@ options.registry["width-x"] = options.Class.extend({
             _.each(['n', 's', 'e', 'w' ], function(handler) {
                 if ($handle.hasClass(handler)) { compass = handler; }
             });
-            if(self.is_image){ compass = "image"; }
+            if (self.is_image) { compass = "image"; }
             self.buildingBlock.editor_busy = true;
 
             var $body = $(document.body);
 
-            var body_mousemove = function (event){
+            var body_mousemove = function (event) {
                 event.preventDefault();
                 offset = self.$target.offset().left;
                 target_width = self.get_max_width(self.$target);
@@ -56,11 +64,11 @@ options.registry["width-x"] = options.Class.extend({
                     self.change_width(event, self.$target, target_width, offset ,'minus');
                     self.change_width(event, self.$target.prev(), sib_width, sib_offset, 'plus');
                 }
-                if (compass === 'image'){
+                if (compass === 'image') {
                     self.change_width(event, self.$target, target_width, offset ,'plus');
                 }
-            }
-            var body_mouseup = function(){
+            };
+            var body_mouseup = function () {
                 $body.unbind('mousemove', body_mousemove);
                 $body.unbind('mouseup', body_mouseup);
                 self.buildingBlock.editor_busy = false;
@@ -70,12 +78,13 @@ options.registry["width-x"] = options.Class.extend({
             $body.mouseup(body_mouseup);
         });
     },
-    change_width:function(event, target ,target_width, offset, type){
+    change_width: function (event, target ,target_width, offset, type) {
         var self = this;
-        if(type == 'plus'){
-            var width = event.pageX-offset;
-        }else{
-            var width = offset + target_width - event.pageX;
+        var width;
+        if (type === 'plus') {
+            width = event.pageX-offset;
+        } else {
+            width = offset + target_width - event.pageX;
         }
         target.css("width", width + "px");
         self.buildingBlock.cover_target(self.$overlay, self.$target);
@@ -90,17 +99,17 @@ options.registry["width-x"] = options.Class.extend({
         var self = this;
         _.each($el.siblings(),function(sib){
             max_width +=  self.get_int_width($(sib));
-        })
+        });
         return this.container_width - max_width;
     },
     on_clone: function ($clone) {
         var clone_index = $(this.$target).index();
         var $table = this.$target.parents('table[data-max-width]');
-        if($table.length == 1){
+        if ($table.length === 1){
             _.each($table.find('tbody>tr'),function(row){
                 var clone_selector = 'td:eq(' + clone_index + ')';
                 var $col_to_clone = $(row).find(clone_selector);
-                if($col_to_clone.length != 0){
+                if ($col_to_clone.length !== 0){
                     $col_to_clone.after($col_to_clone.clone());
                 }
             });
@@ -111,63 +120,86 @@ options.registry["width-x"] = options.Class.extend({
     on_remove: function () {
         var remove_index = $(this.$target).index();
         var $table = this.$target.parents('table[data-max-width]');
-        if($table.length == 1){
+        if ($table.length === 1){
             _.each($table.find('tbody>tr'),function(row){
                 var remove_selector = 'td:eq(' + remove_index + ')';
                 $(row).find(remove_selector).remove();
             });
         }
-        this._super();
+        this._super.apply(this, arguments);
         this.buildingBlock.cover_target(this.$overlay, this.$target);
     },
 });
 
-
 var fn_popover_update = $.summernote.eventHandler.modules.popover.update;
 $.summernote.eventHandler.modules.popover.update = function ($popover, oStyle, isAirMode) {
     fn_popover_update.call(this, $popover, oStyle, isAirMode);
     $("span.o_table_handler, div.note-table").remove();
 };
 
+ajax.loadXML("/mass_mailing/static/src/xml/mass_mailing.xml", core.qweb);
+
 snippets_editor.Class.include({
     _get_snippet_url: function () {
-        return snippets_url;
+        var url = (typeof snippets_url !== "undefined" ? window["snippets_url"] : this._super.apply(this, arguments));
+        return url;
     },
     compute_snippet_templates: function (html) {
-        this._super(html);
-        var self = this;
-        var $layouts = this.$('#email_designer_layout .o_panel_body > *');
-        $layouts.removeClass("oe_snippet_body");
-        $layouts.find('*').add($layouts).off();
-        $layouts.on('click', function (event) {
-            event.preventDefault();
-            var $editable = $('#editable_area');
-            var $o_layout = $editable.find('.o_layout');
-            var $html = ($o_layout.length ? $o_layout.find('.oe_structure').first() : $editable).contents();
-            var $layout = $(".o_layout", this).clone().removeClass('oe_snippet_body');
-
-            if ($o_layout.length) {
-                $('body').removeClass($o_layout.attr('class'));
-            }
-            $('body').addClass($layout.attr('class')).removeClass('odoo o_layout oe_snippet_body');
-
-            var $structure = $layout.find('.oe_structure');
-            if ($structure.length) {
-                $structure.html($html);
-                $('#editable_area').html($layout);
+        var ret = this._super.apply(this, arguments);
+
+        var $themes = this.$("#email_designer_themes").children().addClass("oe_snippet_body");
+        if ($themes.length === 0) return ret;
+
+        var all_classes = "";
+        var $dropdown = $(core.qweb.render("mass_mailing.theme_selector", {
+            themes: _.map($themes, function (theme) {
+                var $theme = $(theme);
+                var classname = $theme.data("class");
+                all_classes += " " + classname;
+                return {
+                    className: classname,
+                    imgSource: $theme.data("img"),
+                };
+            }),
+        }));
+
+        var $body = $(document.body);
+        $dropdown.on("mouseenter click", "li > a", function (e) {
+            e.preventDefault();
+            var classname = $(e.currentTarget).data("class");
+            $body.removeClass(all_classes).addClass(classname);
+            var $layout = $editable_area.find(".o_layout");
+            var $contents;
+            if ($layout.length) {
+                $contents = ($layout.hasClass("oe_structure") ? $layout : $layout.find(".oe_structure").first()).contents();
             } else {
-                $('#editable_area').html($html);
+                $contents = $editable_area.contents();
             }
+            var $div = $("<div/>", {"class": "o_layout oe_structure " + classname});
+            $editable_area.append($div);
+            $div.append($contents);
+            $layout.remove();
+        });
+
+        var $snippets_menu = this.$el.find("#snippets_menu");
+        var old_title = $snippets_menu.text();
+        $dropdown.on("shown.bs.dropdown", function () {
+            $snippets_menu.text(_t("Choose a Theme"));
+        });
+        $dropdown.on("hidden.bs.dropdown", function () {
+            $snippets_menu.text(old_title);
         });
-    },
 
+        $dropdown.insertAfter($snippets_menu);
+
+        return ret;
+    },
 });
 
 var odoo_top = window.top.odoo;
-var _set_value = odoo_top[callback+"_updown"];
-window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name) {
+window.top.odoo[window["callback"]+"_updown"] = function (value, fields_values, field_name) {
     if (!window) {
-        delete odoo_top[callback+"_updown"];
+        delete odoo_top[window["callback"]+"_updown"];
         return;
     }
 
@@ -175,7 +207,7 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
     var _val = $editable.prop("innerHTML");
     var editor_enable = $('body').hasClass('editor_enable');
     value = value || "";
-    
+
     if(value !==_val) {
         if (editor_enable) {
             if (value !== fields_values[field_name]) {
@@ -183,7 +215,7 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
             }
             snippets_editor.instance.make_active(false);
         }
-        
+
         if (value.indexOf('on_change_model_and_list') === -1) {
 
             $editable.html(value);
@@ -198,14 +230,12 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
 
     if (fields_values.mailing_model && web_editor.editor_bar) {
         if (value.indexOf('on_change_model_and_list') !== -1) {
-            odoo_top[callback+"_downup"](_val);
+            odoo_top[window["callback"]+"_downup"](_val);
         }
     }
 };
 
-
-if ($("#editable_area").html().indexOf('on_change_model_and_list') !== -1) {
-    $("#editable_area").empty();
+if ($editable_area.html().indexOf('on_change_model_and_list') !== -1) {
+    $editable_area.empty();
 }
-
 });