Initialize inline translations module only when they are enabled

Author: Mateusz Krzeszowiak

app/code/Magento/Translation/view/frontend/requirejs-config.js

@@ -13,7 +13,6 @@ var config = {
         }
     },
     deps: [
-        'mage/translate-inline',
         'mageTranslationDictionary'
     ]
 };

lib/web/mage/translate-inline.js

@@ -6,9 +6,10 @@
 define([
     'jquery',
     'mage/template',
+    'mage/utils/misc',
+    'mage/translate',
     'jquery-ui-modules/dialog',
-    'mage/translate'
-], function ($, mageTemplate) {
+], function ($, mageTemplate, miscUtils) {
     'use strict';
 
     $.widget('mage.translateInline', $.ui.dialog, {
@@ -59,11 +60,12 @@ define([
              * Open.
              */
             open: function () {
-                var topMargin;
+                var $uiDialog = $(this).closest('.ui-dialog'),
+                    topMargin = $uiDialog.children('.ui-dialog-titlebar').outerHeight() + 45;
 
-                $(this).closest('.ui-dialog').addClass('ui-dialog-active');
-                topMargin = jQuery(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 45;
-                jQuery(this).closest('.ui-dialog').css('margin-top', topMargin);
+                $uiDialog
+                    .addClass('ui-dialog-active')
+                    .css('margin-top', topMargin)
             },
 
             /**
@@ -79,11 +81,15 @@ define([
          * @protected
          */
         _create: function () {
+            var $translateArea = $(this.options.translateArea);
+
+            if (!$translateArea.length) {
+                $translateArea = $('body');
+            }
+            $translateArea.on('edit.editTrigger', $.proxy(this._onEdit, this));
+
             this.tmpl = mageTemplate(this.options.translateForm.template);
-            (this.options.translateArea && $(this.options.translateArea).length ?
-                $(this.options.translateArea) :
-                this.element.closest('body'))
-                    .on('edit.editTrigger', $.proxy(this._onEdit, this));
+
             this._super();
         },
 
@@ -95,7 +101,7 @@ define([
         _prepareContent: function (templateData) {
             var data = $.extend({
                 items: templateData,
-                escape: $.mage.escapeHTML
+                escape: miscUtils.escape,
             }, this.options.translateForm.data);
 
             this.data = data;
@@ -131,16 +137,14 @@ define([
          * @protected
          */
         _formSubmit: function () {
-            var parameters;
+            var parameters = $.param({
+                    area: this.options.area
+                }) + '&' + $('#' + this.options.translateForm.data.id).serialize();
 
             this.formIsSubmitted = true;
-            parameters = $.param({
-                area: this.options.area
-            }) + '&' + $('#' + this.options.translateForm.data.id).serialize();
 
-            $.ajax({
+            $.post({
                 url: this.options.ajaxUrl,
-                type: 'POST',
                 data: parameters,
                 loaderContext: this.element,
                 showLoader: true
@@ -162,11 +166,13 @@ define([
          * @private
          */
         _updatePlaceholder: function (newValue) {
-            var target = jQuery(this.target);
+            var $target = $(this.target),
+                translateObject = $target.data('translate')[0];
+
+            translateObject.shown = newValue;
+            translateObject.translated = newValue;
 
-            target.data('translate')[0].shown = newValue;
-            target.data('translate')[0].translated = newValue;
-            target.html(newValue);
+            $target.html(newValue);
         },
 
         /**
@@ -177,20 +183,6 @@ define([
             this._super();
         }
     });
-    // @TODO move the "escapeHTML" method into the file with global utility functions
-    $.extend(true, $, {
-        mage: {
-            /**
-             * @param {String} str
-             * @return {Boolean}
-             */
-            escapeHTML: function (str) {
-                return str ?
-                    jQuery('<div/>').text(str).html().replace(/"/g, '&quot;') :
-                    false;
-            }
-        }
-    });
 
     return $.mage.translateInline;
 });

lib/web/mage/utils/misc.js

@@ -6,8 +6,8 @@
 define([
     'underscore',
     'jquery',
-    'FormData'
-], function (_, $) {
+    'mage/utils/objects'
+], function (_, $, utils) {
     'use strict';
 
     var defaultAttributes,
@@ -120,7 +120,7 @@ define([
          */
         submit: function (options, attrs) {
             var form        = document.createElement('form'),
-                data        = this.serialize(options.data),
+                data        = utils.serialize(options.data),
                 attributes  = _.extend({}, defaultAttributes, attrs || {});
 
             if (!attributes.action) {
@@ -205,11 +205,11 @@ define([
 
             if (type === 'default') {
                 formData = new FormData();
-                _.each(this.serialize(data), function (val, name) {
+                _.each(utils.serialize(data), function (val, name) {
                     formData.append(name, val);
                 });
             } else if (type === 'simple') {
-                formData = this.serialize(data);
+                formData = utils.serialize(data);
             }
 
             return formData;
@@ -242,6 +242,16 @@ define([
             return data;
         },
 
+        /**
+         * Replaces special characters with their corresponding HTML entities.
+         * 
+         * @param {String} string Text to escape.
+         * @returns {String} Escaped text.
+         */
+        escape: function (string) {
+            return string ? $('<p/>').text(str).html().replace(/"/g, '&quot;') : string;
+        },
+
         /**
          * Replaces symbol codes with their unescaped counterparts.
          *