prompt.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /**
  6. * @api
  7. */
  8. define([
  9. 'jquery',
  10. 'underscore',
  11. 'mage/template',
  12. 'text!ui/template/modal/modal-prompt-content.html',
  13. 'jquery/ui',
  14. 'Magento_Ui/js/modal/modal',
  15. 'mage/translate'
  16. ], function ($, _, template, promptContentTmpl) {
  17. 'use strict';
  18. $.widget('mage.prompt', $.mage.modal, {
  19. options: {
  20. modalClass: 'prompt',
  21. promptContentTmpl: promptContentTmpl,
  22. promptField: '[data-role="promptField"]',
  23. attributesForm: {},
  24. attributesField: {},
  25. value: '',
  26. validation: false,
  27. validationRules: [],
  28. actions: {
  29. /**
  30. * Callback always - called on all actions.
  31. */
  32. always: function () {},
  33. /**
  34. * Callback confirm.
  35. */
  36. confirm: function () {},
  37. /**
  38. * Callback cancel.
  39. */
  40. cancel: function () {}
  41. },
  42. buttons: [{
  43. text: $.mage.__('Cancel'),
  44. class: 'action-secondary action-dismiss',
  45. /**
  46. * Click handler.
  47. */
  48. click: function () {
  49. this.closeModal();
  50. }
  51. }, {
  52. text: $.mage.__('OK'),
  53. class: 'action-primary action-accept',
  54. /**
  55. * Click handler.
  56. */
  57. click: function () {
  58. this.closeModal(true);
  59. }
  60. }]
  61. },
  62. /**
  63. * Create widget.
  64. */
  65. _create: function () {
  66. this.options.focus = this.options.promptField;
  67. this.options.validation = this.options.validation && this.options.validationRules.length;
  68. this._super();
  69. this.modal.find(this.options.modalContent).append(this.getFormTemplate());
  70. this.modal.find(this.options.modalCloseBtn).off().on('click', _.bind(this.closeModal, this, false));
  71. if (this.options.validation) {
  72. this.setValidationClasses();
  73. }
  74. this.openModal();
  75. },
  76. /**
  77. * Form template getter.
  78. *
  79. * @returns {Object} Form template.
  80. */
  81. getFormTemplate: function () {
  82. var formTemplate,
  83. formAttr = '',
  84. inputAttr = '',
  85. attributeName;
  86. for (attributeName in this.options.attributesForm) {
  87. if (this.options.attributesForm.hasOwnProperty(attributeName)) {
  88. formAttr = formAttr + ' ' + attributeName + '="' +
  89. this.options.attributesForm[attributeName] + '"';
  90. }
  91. }
  92. for (attributeName in this.options.attributesField) {
  93. if (this.options.attributesField.hasOwnProperty(attributeName)) {
  94. inputAttr = inputAttr + ' ' + attributeName + '="' +
  95. this.options.attributesField[attributeName] + '"';
  96. }
  97. }
  98. formTemplate = $(template(this.options.promptContentTmpl, {
  99. data: this.options,
  100. formAttr: formAttr,
  101. inputAttr: inputAttr
  102. }));
  103. return formTemplate;
  104. },
  105. /**
  106. * Remove widget
  107. */
  108. _remove: function () {
  109. this.modal.remove();
  110. },
  111. /**
  112. * Validate prompt field
  113. */
  114. validate: function () {
  115. return $.validator.validateSingleElement(this.options.promptField);
  116. },
  117. /**
  118. * Add validation classes to prompt field
  119. */
  120. setValidationClasses: function () {
  121. this.modal.find(this.options.promptField).attr('class', $.proxy(function (i, val) {
  122. return val + ' ' + this.options.validationRules.join(' ');
  123. }, this));
  124. },
  125. /**
  126. * Open modal window
  127. */
  128. openModal: function () {
  129. this._super();
  130. this.modal.find(this.options.promptField).val(this.options.value);
  131. },
  132. /**
  133. * Close modal window
  134. */
  135. closeModal: function (result) {
  136. var value;
  137. if (result) {
  138. if (this.options.validation && !this.validate()) {
  139. return false;
  140. }
  141. value = this.modal.find(this.options.promptField).val();
  142. this.options.actions.confirm.call(this, value);
  143. } else {
  144. this.options.actions.cancel.call(this, result);
  145. }
  146. this.options.actions.always();
  147. this.element.bind('promptclosed', _.bind(this._remove, this));
  148. return this._super();
  149. }
  150. });
  151. return function (config) {
  152. return $('<div class="prompt-message"></div>').html(config.content).prompt(config);
  153. };
  154. });