Rewrote js/mage/adminhtml/variables.js without prototypejs (#3762)

OpenMage · Feb 11, 2024 · d13beac · d13beac
1 parent 2d94866
commit d13beac
Showing 1 changed file with 39 additions and 30 deletions.
diff --git a/js/mage/adminhtml/variables.js b/js/mage/adminhtml/variables.js
@@ -8,7 +8,7 @@
  * @category    Mage
  * @package     Mage_Adminhtml
  * @copyright   Copyright (c) 2006-2020 Magento, Inc. (https://www.magento.com)
- * @copyright   Copyright (c) 2022 The OpenMage Contributors (https://www.openmage.org)
+ * @copyright   Copyright (c) 2022-2024 The OpenMage Contributors (https://www.openmage.org)
  * @license     https://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
  */
 
@@ -20,8 +20,9 @@ var Variables = {
     overlayShowEffectOptions: null,
     overlayHideEffectOptions: null,
     insertFunction: 'Variables.insertVariable',
+
     init: function(textareaElementId, insertFunction) {
-        if ($(textareaElementId)) {
+        if (document.getElementById(textareaElementId)) {
             this.textareaElementId = textareaElementId;
         }
         if (insertFunction) {
@@ -37,10 +38,10 @@ var Variables = {
     openVariableChooser: function(variables) {
         if (this.variablesContent == null && variables) {
             this.variablesContent = '<ul>';
-            variables.each(function(variableGroup) {
+            variables.forEach(function(variableGroup) {
                 if (variableGroup.label && variableGroup.value) {
                     this.variablesContent += '<li><b>' + variableGroup.label + '</b></li>';
-                    (variableGroup.value).each(function(variable){
+                    variableGroup.value.forEach(function(variable) {
                         if (variable.value && variable.label) {
                             this.variablesContent += '<li style="padding-left: 20px;">' +
                                 this.prepareVariableRow(variable.value, variable.label) + '</li>';
@@ -54,35 +55,35 @@ var Variables = {
             this.openDialogWindow(this.variablesContent);
         }
     },
+
     openDialogWindow: function(variablesContent) {
-        if ($(this.dialogWindowId) && typeof(Windows) != 'undefined') {
+        if (document.getElementById(this.dialogWindowId) && typeof Windows !== 'undefined') {
             Windows.focus(this.dialogWindowId);
             return;
         }
 
         this.overlayShowEffectOptions = Windows.overlayShowEffectOptions;
         this.overlayHideEffectOptions = Windows.overlayHideEffectOptions;
-        Windows.overlayShowEffectOptions = {duration:0};
-        Windows.overlayHideEffectOptions = {duration:0};
+        Windows.overlayShowEffectOptions = { duration: 0 };
+        Windows.overlayHideEffectOptions = { duration: 0 };
 
         this.dialogWindow = Dialog.info(variablesContent, {
-            draggable:true,
-            resizable:true,
-            closable:true,
-            className:"magento",
-            windowClassName:"popup-window",
-            title:'Insert Variable...',
-            width:700,
+            draggable: true,
+            resizable: true,
+            closable: true,
+            className: "magento",
+            windowClassName: "popup-window",
+            title: 'Insert Variable...',
+            width: 700,
             //height:270,
-            zIndex:1000,
-            recenterAuto:false,
-            hideEffect:Element.hide,
-            showEffect:Element.show,
-            id:this.dialogWindowId,
+            zIndex: 1000,
+            recenterAuto: false,
+            id: this.dialogWindowId,
             onClose: this.closeDialogWindow.bind(this)
         });
         variablesContent.evalScripts.bind(variablesContent).defer();
     },
+
     closeDialogWindow: function(window) {
         if (!window) {
             window = this.dialogWindow;
@@ -93,14 +94,16 @@ var Variables = {
             Windows.overlayHideEffectOptions = this.overlayHideEffectOptions;
         }
     },
+
     prepareVariableRow: function(varValue, varLabel) {
         var value = (varValue).replace(/"/g, '&quot;').replace(/\\/g, '\\\\').replace(/'/g, '\\&#39;');
-        var content = '<a href="#" onclick="'+this.insertFunction+'(\''+ value +'\');return false;">' + varLabel + '</a>';
+        var content = '<a href="#" onclick="' + this.insertFunction + '(\'' + value + '\');return false;">' + varLabel + '</a>';
         return content;
     },
+
     insertVariable: function(value) {
         this.closeDialogWindow(this.dialogWindow);
-        var textareaElm = $(this.textareaElementId);
+        var textareaElm = document.getElementById(this.textareaElementId);
         if (textareaElm) {
             var scrollPos = textareaElm.scrollTop;
             updateElementAtCursor(textareaElm, value);
@@ -112,35 +115,41 @@ var Variables = {
     }
 };
 
-OpenmagevariablePlugin = {
+var OpenmagevariablePlugin = {
     editor: null,
     variables: null,
     textareaId: null,
+
     setEditor: function(editor) {
         this.editor = editor;
     },
+
     loadChooser: function(url, textareaId) {
         this.textareaId = textareaId;
         if (this.variables == null) {
-            new Ajax.Request(url, {
-                parameters: {},
-                onComplete: function (transport) {
-                    if (transport.responseText.isJSON()) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", url, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    if (xhr.responseText.isJSON()) {
                         Variables.init(null, 'OpenmagevariablePlugin.insertVariable');
-                        this.variables = transport.responseText.evalJSON();
+                        this.variables = JSON.parse(xhr.responseText);
                         this.openChooser(this.variables);
                     }
-                }.bind(this)
-             });
+                }
+            }.bind(this);
+            xhr.send();
         } else {
             this.openChooser(this.variables);
         }
         return;
     },
+
     openChooser: function(variables) {
         Variables.openVariableChooser(variables);
     },
-    insertVariable : function (value) {
+
+    insertVariable: function(value) {
         if (this.textareaId) {
             Variables.init(this.textareaId);
             Variables.insertVariable(value);