accordion.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. define([
  6. 'jquery',
  7. 'mage/tabs'
  8. ], function ($, tabs) {
  9. 'use strict';
  10. $.widget('mage.accordion', tabs, {
  11. options: {
  12. active: [0],
  13. multipleCollapsible: false,
  14. openOnFocus: false
  15. },
  16. /**
  17. * @private
  18. */
  19. _callCollapsible: function () {
  20. var self = this,
  21. disabled = false,
  22. active = false;
  23. if (typeof this.options.active === 'string') {
  24. this.options.active = this.options.active.split(' ').map(function (item) {
  25. return parseInt(item, 10);
  26. });
  27. }
  28. $.each(this.collapsibles, function (i) {
  29. disabled = active = false;
  30. if ($.inArray(i, self.options.disabled) !== -1) {
  31. disabled = true;
  32. }
  33. if ($.inArray(i, self.options.active) !== -1) {
  34. active = true;
  35. }
  36. self._instantiateCollapsible(this, i, active, disabled);
  37. });
  38. },
  39. /**
  40. * Overwrites default functionality to provide the option to activate/deactivate multiple sections simultaneous
  41. * @param {*} action
  42. * @param {*} index
  43. * @private
  44. */
  45. _toggleActivate: function (action, index) {
  46. var self = this;
  47. if ($.isArray(index && this.options.multipleCollapsible)) {
  48. $.each(index, function () {
  49. self.collapsibles.eq(this).collapsible(action);
  50. });
  51. } else if (index === undefined && this.options.multipleCollapsible) {
  52. this.collapsibles.collapsible(action);
  53. } else {
  54. this._super(action, index);
  55. }
  56. },
  57. /**
  58. * If the Accordion allows multiple section to be active at the same time, if deep linking is used
  59. * sections that don't contain the id from anchor shouldn't be closed, otherwise the accordion uses the
  60. * tabs behavior
  61. * @private
  62. */
  63. _handleDeepLinking: function () {
  64. if (!this.options.multipleCollapsible) {
  65. this._super();
  66. }
  67. },
  68. /**
  69. * Prevent default behavior that closes the other sections when one gets activated if the Accordion allows
  70. * multiple sections simultaneous
  71. * @private
  72. */
  73. _closeOthers: function () {
  74. if (!this.options.multipleCollapsible) {
  75. this._super();
  76. }
  77. $.each(this.collapsibles, function () {
  78. $(this).on('beforeOpen', function () {
  79. var section = $(this);
  80. section.addClass('allow').prevAll().addClass('allow');
  81. section.nextAll().removeClass('allow');
  82. });
  83. });
  84. }
  85. });
  86. return $.mage.accordion;
  87. });