From c15a99b49ae5d9776a2901b47a26d65bebe69946 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 22 Sep 2016 15:36:25 +0200
Subject: [FIX] web_editor: properly convert fa icon to images with transcoder

Previous implementation was not robust as css style was able to change
the image height.
Also refactore the method to be more efficient.
---
 addons/web_editor/static/src/js/transcoder.js | 29 ++++++++++++---------------
 1 file changed, 13 insertions(+), 16 deletions(-)

(limited to 'addons/web_editor/static/src/js/transcoder.js')

diff --git a/addons/web_editor/static/src/js/transcoder.js b/addons/web_editor/static/src/js/transcoder.js
index ddd8ce73533..20d4f5844af 100644
--- a/addons/web_editor/static/src/js/transcoder.js
+++ b/addons/web_editor/static/src/js/transcoder.js
@@ -118,7 +118,7 @@ var getMatchedCSSRules = function (a) {
 
 // convert font awsome into image
 var font_to_img = function ($editable) {
-    $(".fa", $editable).each(function () {
+    $editable.find(".fa").each(function () {
         var $font = $(this);
         var icon, content;
         _.find(widget.fontIcons, function (font) {
@@ -132,15 +132,13 @@ var font_to_img = function ($editable) {
         });
         if (content) {
             var color = $font.css("color").replace(/\s/g, '');
-            var src = _.str.sprintf('/web_editor/font_to_img/%s/%s/'+Math.max(1, $font.height()), content.charCodeAt(0), window.encodeURI(color));
-            var $img = $("<img/>").attr("src", src)
-                .attr("data-class", $font.attr("class"))
-                .attr("class", $font.attr("class").replace(new RegExp("(^|\\s+)" + icon + "(-[^\\s]+)?", "gi"), '')) // remove inline font-awsome style
-                .attr("style", $font.attr("style"))
-                .attr("height", $font.height())
-                .css("height", "")
-                .css("font-size", "");
-            $font.replaceWith($img);
+            $font.replaceWith($("<img/>", {
+                "src": _.str.sprintf('/web_editor/font_to_img/%s/%s/%s', content.charCodeAt(0), window.encodeURI(color), Math.max(1, $font.height())),
+                "data-class": $font.attr("class"),
+                "data-style": $font.attr("style"),
+                "class": $font.attr("class").replace(new RegExp("(^|\\s+)" + icon + "(-[^\\s]+)?", "gi"), ''), // remove inline font-awsome style
+                "style": $font.attr("style")
+            }).css({height: "auto", width: "auto"}));
         } else {
             $font.remove();
         }
@@ -148,13 +146,12 @@ var font_to_img = function ($editable) {
 };
 // convert image into font awsome
 var img_to_font = function ($editable) {
-    $("img[src*='/web_editor/font_to_img/']", $editable).each(function () {
+    $editable.find("img[src*='/web_editor/font_to_img/']").each(function () {
         var $img = $(this);
-        var $font = $("<span/>")
-            .attr("class", $img.data("class"))
-            .attr("style", $img.attr("style"))
-            .css("height", "");
-        $img.replaceWith($font);
+        $img.replaceWith($("<span/>", {
+            "class": $img.data("class"),
+            "style": $img.data("style")
+        }));
     });
 };
 
-- 
cgit v1.2.3