MAGETWO-98351: Update transaction email variable dialog

- Updated variable value storage

Author: Hwashiang Yu

app/code/Magento/Variable/view/adminhtml/web/variables.js

@@ -18,6 +18,12 @@ window.Variables = {
     overlayShowEffectOptions: null,
     overlayHideEffectOptions: null,
     insertFunction: 'Variables.insertVariable',
+    variablesValue: [],
+
+    /**
+     * @param {*} textareaElementId
+     * @param {Function} insertFunction
+     */
     init: function(textareaElementId, insertFunction) {
         if ($(textareaElementId)) {
             this.textareaElementId = textareaElementId;
@@ -27,11 +33,17 @@ window.Variables = {
         }
     },
 
+    /**
+     * reset data.
+     */
     resetData: function() {
         this.variablesContent = null;
         this.dialogWindow = null;
     },
 
+    /**
+     * @param {Object} variables
+     */
     openVariableChooser: function(variables) {
         if (this.variablesContent == null && variables) {
             this.variablesContent = '<ul class="insert-variable">';
@@ -40,8 +52,9 @@ window.Variables = {
                     this.variablesContent += '<li><b>' + variableGroup.label.escapeHTML() + '</b></li>';
                     (variableGroup.value).each(function(variable){
                         if (variable.value && variable.label) {
+                            this.variablesValue.push(variable.value);
                             this.variablesContent += '<li>' +
-                                this.prepareVariableRow(variable.value, variable.label) + '</li>';
+                                this.prepareVariableRow(this.variablesValue.length, variable.label) + '</li>';
                         }
                     }.bind(this));
                 }
@@ -52,9 +65,13 @@ window.Variables = {
             this.openDialogWindow(this.variablesContent);
         }
     },
+
+    /**
+     * @param {*} variablesContent
+     */
     openDialogWindow: function (variablesContent) {
         var windowId = this.dialogWindowId;
-        jQuery('<div id="' + windowId + '">' + Variables.variablesContent + '</div>').modal({
+        jQuery('<div id="' + windowId + '">' + variablesContent + '</div>').modal({
             title: $t('Insert Variable...'),
             type: 'slide',
             buttons: [],
@@ -64,40 +81,67 @@ window.Variables = {
         });
 
         jQuery('#' + windowId).modal('openModal');
-
-        variablesContent.evalScripts.bind(variablesContent).defer();
     },
+
+    /**
+     * Close dialog window.
+     */
     closeDialogWindow: function() {
         jQuery('#' + this.dialogWindowId).modal('closeModal');
     },
-    prepareVariableRow: function(varValue, varLabel) {
-        var value = (varValue).replace(/"/g, '&quot;').replace(/'/g, '\\&#39;');
-        var content = '<a href="#" onclick="'+this.insertFunction+'(\''+ value.escapeHTML() +'\');return false;">' + varLabel.escapeHTML() + '</a>';
-        return content;
+
+    /**
+     * @param {Number} index
+     * @param {*} varLabel
+     * @return {String}
+     */
+    prepareVariableRow: function (index, varLabel) {
+        return '<a href="#" onclick="' +
+            this.insertFunction +
+            '(' +
+            index +
+            ');return false;">' +
+            varLabel.escapeHTML() +
+            '</a>';
     },
-    insertVariable: function(value) {
+
+    /**
+     * @param {*} variable
+     */
+    insertVariable: function(variable) {
         var windowId = this.dialogWindowId;
         jQuery('#' + windowId).modal('closeModal');
         var textareaElm = $(this.textareaElementId);
         if (textareaElm) {
             var scrollPos = textareaElm.scrollTop;
-            updateElementAtCursor(textareaElm, value);
-            textareaElm.focus();
+            if (!isNaN(variable)) {
+                updateElementAtCursor(textareaElm, Variables.variablesValue[variable - 1]);
+            } else {
+                updateElementAtCursor(textareaElm, variable);
+            }            textareaElm.focus();
             textareaElm.scrollTop = scrollPos;
             jQuery(textareaElm).change();
             textareaElm = null;
         }
-        return;
     }
 };
 
 window.MagentovariablePlugin = {
     editor: null,
     variables: null,
     textareaId: null,
+
+    /**
+     * @param {*} editor
+     */
     setEditor: function(editor) {
         this.editor = editor;
     },
+
+    /**
+     * @param {String} url
+     * @param {*} textareaId
+     */
     loadChooser: function(url, textareaId) {
         this.textareaId = textareaId;
         if (this.variables == null) {
@@ -114,11 +158,18 @@ window.MagentovariablePlugin = {
         } else {
             this.openChooser(this.variables);
         }
-        return;
     },
+
+    /**
+     * @param {*} variables
+     */
     openChooser: function(variables) {
         Variables.openVariableChooser(variables);
     },
+
+    /**
+     * @param {*} value
+     */
     insertVariable : function (value) {
         if (this.textareaId) {
             Variables.init(this.textareaId);
@@ -127,7 +178,6 @@ window.MagentovariablePlugin = {
             Variables.closeDialogWindow();
             this.editor.execCommand('mceInsertContent', false, value);
         }
-        return;
     }
 };