text.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /* global $break $ $$ */
  6. /**
  7. * @api
  8. */
  9. define([
  10. 'jquery',
  11. 'mage/template',
  12. 'uiRegistry',
  13. 'jquery/ui',
  14. 'prototype'
  15. ], function (jQuery, mageTemplate, rg) {
  16. 'use strict';
  17. return function (config) {
  18. var swatchOptionTextDefaultInputType = 'radio',
  19. swatchTextOption = {
  20. table: $('swatch-text-options-table'),
  21. itemCount: 0,
  22. totalItems: 0,
  23. rendered: 0,
  24. isReadOnly: config.isReadOnly,
  25. template: mageTemplate('#swatch-text-row-template'),
  26. /**
  27. * Add option
  28. *
  29. * @param {Object} data
  30. * @param {Object} render
  31. */
  32. add: function (data, render) {
  33. var isNewOption = false,
  34. element;
  35. if (typeof data.id == 'undefined') {
  36. data = {
  37. 'id': 'option_' + this.itemCount,
  38. 'sort_order': this.itemCount + 1
  39. };
  40. isNewOption = true;
  41. }
  42. if (!data.intype) {
  43. data.intype = swatchOptionTextDefaultInputType;
  44. }
  45. element = this.template({
  46. data: data
  47. });
  48. if (isNewOption && !this.isReadOnly) {
  49. this.enableNewOptionDeleteButton(data.id);
  50. }
  51. this.itemCount++;
  52. this.totalItems++;
  53. this.elements += element;
  54. if (render) {
  55. this.render();
  56. }
  57. },
  58. /**
  59. * Remove option
  60. *
  61. * @param {Object} event
  62. */
  63. remove: function (event) {
  64. var element = $(Event.findElement(event, 'tr')),
  65. elementFlags; // !!! Button already have table parent in safari
  66. // Safari workaround
  67. element.ancestors().each(function (parentItem) {
  68. if (parentItem.hasClassName('option-row')) {
  69. element = parentItem;
  70. throw $break;
  71. } else if (parentItem.hasClassName('box')) {
  72. throw $break;
  73. }
  74. });
  75. if (element) {
  76. elementFlags = element.getElementsByClassName('delete-flag');
  77. if (elementFlags[0]) {
  78. elementFlags[0].value = 1;
  79. }
  80. element.addClassName('no-display');
  81. element.addClassName('template');
  82. element.hide();
  83. this.totalItems--;
  84. this.updateItemsCountField();
  85. }
  86. },
  87. /**
  88. * Update items count field
  89. */
  90. updateItemsCountField: function () {
  91. $('swatch-text-option-count-check').value = this.totalItems > 0 ? '1' : '';
  92. },
  93. /**
  94. * Enable delete button for new option
  95. *
  96. * @param {String} id
  97. */
  98. enableNewOptionDeleteButton: function (id) {
  99. $$('#delete_button_swatch_container_' + id + ' button').each(function (button) {
  100. button.enable();
  101. button.removeClassName('disabled');
  102. });
  103. },
  104. /**
  105. * Bind remove button
  106. */
  107. bindRemoveButtons: function () {
  108. jQuery('#swatch-text-options-panel').on('click', '.delete-option', this.remove.bind(this));
  109. },
  110. /**
  111. * Render action
  112. */
  113. render: function () {
  114. Element.insert($$('[data-role=swatch-text-options-container]')[0], this.elements);
  115. this.elements = '';
  116. },
  117. /**
  118. * Render action with delay (performance fix)
  119. *
  120. * @param {Object} data
  121. * @param {Number} from
  122. * @param {Number} step
  123. * @param {Number} delay
  124. * @returns {Boolean}
  125. */
  126. renderWithDelay: function (data, from, step, delay) {
  127. var arrayLength = data.length,
  128. len;
  129. for (len = from + step; from < len && from < arrayLength; from++) {
  130. this.add(data[from]);
  131. }
  132. this.render();
  133. if (from === arrayLength) {
  134. this.updateItemsCountField();
  135. this.rendered = 1;
  136. jQuery('body').trigger('processStop');
  137. return true;
  138. }
  139. setTimeout(this.renderWithDelay.bind(this, data, from, step, delay), delay);
  140. },
  141. /**
  142. * Ignore validate action
  143. */
  144. ignoreValidate: function () {
  145. var ignore = '.ignore-validate input, ' +
  146. '.ignore-validate select, ' +
  147. '.ignore-validate textarea';
  148. jQuery('#edit_form').data('validator').settings.forceIgnore = ignore;
  149. }
  150. };
  151. if ($('add_new_swatch_text_option_button')) {
  152. Event.observe(
  153. 'add_new_swatch_text_option_button',
  154. 'click',
  155. swatchTextOption.add.bind(swatchTextOption, true)
  156. );
  157. }
  158. jQuery('#swatch-text-options-panel').on('render', function () {
  159. swatchTextOption.ignoreValidate();
  160. if (swatchTextOption.rendered) {
  161. return false;
  162. }
  163. jQuery('body').trigger('processStart');
  164. swatchTextOption.renderWithDelay(config.attributesData, 0, 100, 300);
  165. swatchTextOption.bindRemoveButtons();
  166. });
  167. if (config.isSortable) {
  168. jQuery(function ($) {
  169. $('[data-role=swatch-text-options-container]').sortable({
  170. distance: 8,
  171. tolerance: 'pointer',
  172. cancel: 'input, button',
  173. axis: 'y',
  174. /**
  175. * Update components
  176. */
  177. update: function () {
  178. $('[data-role=swatch-text-options-container] [data-role=order]').each(
  179. function (index, element) {
  180. $(element).val(index + 1);
  181. }
  182. );
  183. }
  184. });
  185. });
  186. }
  187. jQuery(document).ready(function () {
  188. if (jQuery('#frontend_input').val() !== 'swatch_text') {
  189. jQuery('.swatch-text-field-0').removeClass('required-option');
  190. }
  191. });
  192. window.swatchTextOption = swatchTextOption;
  193. window.swatchOptionTextDefaultInputType = swatchOptionTextDefaultInputType;
  194. rg.set('swatch-text-options-panel', swatchTextOption);
  195. };
  196. });