deletable-item.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /**
  6. * @deprecated since version 2.2.0
  7. */
  8. define([
  9. 'jquery',
  10. 'jquery/ui'
  11. ], function ($) {
  12. 'use strict';
  13. /**
  14. * This widget is used to tag a DOM element as deletable. By default, it will use the click event on the item with a
  15. * data role of delete to trigger the deletion.
  16. */
  17. $.widget('mage.deletableItem', {
  18. options: {
  19. deleteEvent: 'click',
  20. deleteSelector: '[data-role="delete"]',
  21. hiddenClass: 'no-display'
  22. },
  23. /**
  24. * This method binds elements found in this widget.
  25. */
  26. _bind: function () {
  27. var handlers = {};
  28. // since the first handler is dynamic, generate the object using array notation
  29. handlers[this.options.deleteEvent + ' ' + this.options.deleteSelector] = '_onDeleteClicked';
  30. handlers.hideDelete = '_onHideDelete';
  31. handlers.showDelete = '_onShowDelete';
  32. this._on(handlers);
  33. },
  34. /**
  35. * This method constructs a new widget.
  36. */
  37. _create: function () {
  38. this._bind();
  39. },
  40. /**
  41. * This method is to initialize the control
  42. * @private
  43. */
  44. _init: function () {
  45. this._onHideDelete(); // by default, hide the control
  46. },
  47. /**
  48. * This method removes the entity from the DOM.
  49. * @private
  50. */
  51. _onDeleteClicked: function (e) {
  52. e.stopPropagation();
  53. this.element.trigger('deleteItem');
  54. },
  55. /**
  56. * This method hides the delete capability of this item (i.e. making it not deletable)
  57. * @private
  58. */
  59. _onHideDelete: function () {
  60. this.element.find(this.options.deleteSelector).addClass(this.options.hiddenClass);
  61. },
  62. /**
  63. * This method shows the delete capability of this item (i.e. making it deletable)
  64. * @private
  65. */
  66. _onShowDelete: function () {
  67. this.element.find(this.options.deleteSelector).removeClass(this.options.hiddenClass);
  68. }
  69. });
  70. return $.mage.deletableItem;
  71. });