gift-message.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. define([
  6. 'jquery',
  7. 'jquery/ui'
  8. ], function ($) {
  9. 'use strict';
  10. $.widget('mage.giftMessage', {
  11. options: {
  12. rowPrefix: '#order-item-row-', // Selector prefix for item's row in the table.
  13. linkPrefix: '#order-item-gift-message-link-', // Selector prefix for the 'Gift Message' link.
  14. duration: 100, // Toggle duration.
  15. expandedClass: 'expanded', // Class added/removed to/from the 'Gift Message' link.
  16. expandedContentClass: 'expanded-content', // Class added/removed to/from the 'Gift Message' content.
  17. lastClass: 'last' // Class added/removed to/from the last item's row in the products table.
  18. },
  19. /**
  20. * Bind a click handler on the widget's element to toggle the gift message.
  21. * @private
  22. */
  23. _create: function () {
  24. this.element.on('click', $.proxy(this._toggleGiftMessage, this));
  25. },
  26. /**
  27. * Toggle the display of the item's corresponding gift message.
  28. * @private
  29. * @param {jQuery.Event} event - Click event.
  30. */
  31. _toggleGiftMessage: function (event) {
  32. var element = $(event.target), // Click target. The 'Gift Message' link or 'Close' button.
  33. options = this.options, // Cached widget options.
  34. itemId = element.data('item-id'), // The individual item's numeric id.
  35. link = $(options.linkPrefix + itemId), // The 'Gift Message' expandable link.
  36. row = $(options.rowPrefix + itemId), // The item's row in the products table.
  37. region = $('#' + element.attr('aria-controls')); // The gift message container region.
  38. region.toggleClass(options.expandedContentClass, options.duration, function () {
  39. if (region.attr('aria-expanded') === 'true') {
  40. region.attr('aria-expanded', 'false');
  41. if (region.hasClass(options.lastClass)) {
  42. row.addClass(options.lastClass);
  43. }
  44. } else {
  45. region.attr('aria-expanded', 'true');
  46. if (region.hasClass(options.lastClass)) {
  47. row.removeClass(options.lastClass);
  48. }
  49. }
  50. link.toggleClass(options.expandedClass);
  51. });
  52. event.preventDefault(); // Prevent event propagation and avoid going to the link's href.
  53. }
  54. });
  55. return $.mage.giftMessage;
  56. });