variables.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /* global Variables, updateElementAtCursor */
  6. define([
  7. 'jquery',
  8. 'mage/translate',
  9. 'Magento_Ui/js/modal/modal',
  10. 'jquery/ui',
  11. 'prototype'
  12. ], function (jQuery, $t) {
  13. 'use strict';
  14. window.Variables = {
  15. textareaElementId: null,
  16. variablesContent: null,
  17. dialogWindow: null,
  18. dialogWindowId: 'variables-chooser',
  19. overlayShowEffectOptions: null,
  20. overlayHideEffectOptions: null,
  21. insertFunction: 'Variables.insertVariable',
  22. /**
  23. * @param {*} textareaElementId
  24. * @param {Function} insertFunction
  25. */
  26. init: function (textareaElementId, insertFunction) {
  27. if ($(textareaElementId)) {
  28. this.textareaElementId = textareaElementId;
  29. }
  30. if (insertFunction) {
  31. this.insertFunction = insertFunction;
  32. }
  33. },
  34. /**
  35. * reset data.
  36. */
  37. resetData: function () {
  38. this.variablesContent = null;
  39. this.dialogWindow = null;
  40. },
  41. /**
  42. * @param {Object} variables
  43. */
  44. openVariableChooser: function (variables) {
  45. if (this.variablesContent == null && variables) {
  46. this.variablesContent = '<ul class="insert-variable">';
  47. variables.each(function (variableGroup) {
  48. if (variableGroup.label && variableGroup.value) {
  49. this.variablesContent += '<li><b>' + variableGroup.label + '</b></li>';
  50. variableGroup.value.each(function (variable) {
  51. if (variable.value && variable.label) {
  52. this.variablesContent += '<li>' +
  53. this.prepareVariableRow(variable.value, variable.label) + '</li>';
  54. }
  55. }.bind(this));
  56. }
  57. }.bind(this));
  58. this.variablesContent += '</ul>';
  59. }
  60. if (this.variablesContent) {
  61. this.openDialogWindow(this.variablesContent);
  62. }
  63. },
  64. /**
  65. * @param {*} variablesContent
  66. */
  67. openDialogWindow: function (variablesContent) {
  68. var windowId = this.dialogWindowId;
  69. jQuery('<div id="' + windowId + '">' + Variables.variablesContent + '</div>').modal({
  70. title: $t('Insert Variable...'),
  71. type: 'slide',
  72. buttons: [],
  73. /** @inheritdoc */
  74. closed: function (e, modal) {
  75. modal.modal.remove();
  76. }
  77. });
  78. jQuery('#' + windowId).modal('openModal');
  79. variablesContent.evalScripts.bind(variablesContent).defer();
  80. },
  81. /**
  82. * Close dialog window.
  83. */
  84. closeDialogWindow: function () {
  85. jQuery('#' + this.dialogWindowId).modal('closeModal');
  86. },
  87. /**
  88. * @param {String} varValue
  89. * @param {*} varLabel
  90. * @return {String}
  91. */
  92. prepareVariableRow: function (varValue, varLabel) {
  93. var value = varValue.replace(/"/g, '&quot;').replace(/'/g, '\\&#39;'),
  94. content = '<a href="#" onclick="' +
  95. this.insertFunction +
  96. '(\'' +
  97. value +
  98. '\');return false;">' +
  99. varLabel +
  100. '</a>';
  101. return content;
  102. },
  103. /**
  104. * @param {*} value
  105. */
  106. insertVariable: function (value) {
  107. var windowId = this.dialogWindowId,
  108. textareaElm, scrollPos;
  109. jQuery('#' + windowId).modal('closeModal');
  110. textareaElm = $(this.textareaElementId);
  111. if (textareaElm) {
  112. scrollPos = textareaElm.scrollTop;
  113. updateElementAtCursor(textareaElm, value);
  114. textareaElm.focus();
  115. textareaElm.scrollTop = scrollPos;
  116. jQuery(textareaElm).change();
  117. textareaElm = null;
  118. }
  119. return;
  120. }
  121. };
  122. window.MagentovariablePlugin = {
  123. editor: null,
  124. variables: null,
  125. textareaId: null,
  126. /**
  127. * @param {*} editor
  128. */
  129. setEditor: function (editor) {
  130. this.editor = editor;
  131. },
  132. /**
  133. * @param {String} url
  134. * @param {*} textareaId
  135. */
  136. loadChooser: function (url, textareaId) {
  137. this.textareaId = textareaId;
  138. if (this.variables == null) {
  139. new Ajax.Request(url, {
  140. parameters: {},
  141. onComplete: function (transport) {
  142. if (transport.responseText.isJSON()) {
  143. Variables.init(null, 'MagentovariablePlugin.insertVariable');
  144. this.variables = transport.responseText.evalJSON();
  145. this.openChooser(this.variables);
  146. }
  147. }.bind(this)
  148. });
  149. } else {
  150. this.openChooser(this.variables);
  151. }
  152. return;
  153. },
  154. /**
  155. * @param {*} variables
  156. */
  157. openChooser: function (variables) {
  158. Variables.openVariableChooser(variables);
  159. },
  160. /**
  161. * @param {*} value
  162. */
  163. insertVariable: function (value) {
  164. if (this.textareaId) {
  165. Variables.init(this.textareaId);
  166. Variables.insertVariable(value);
  167. } else {
  168. Variables.closeDialogWindow();
  169. this.editor.execCommand('mceInsertContent', false, value);
  170. }
  171. return;
  172. }
  173. };
  174. });