accordion.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /* global varienAccordion, varienLoader, Cookie */
  6. /* eslint-disable strict */
  7. define([
  8. 'prototype'
  9. ], function () {
  10. window.varienAccordion = new Class.create(); //eslint-disable-line
  11. varienAccordion.prototype = {
  12. /**
  13. * @param {*} containerId
  14. * @param {*} activeOnlyOne
  15. */
  16. initialize: function (containerId, activeOnlyOne) {
  17. var links, i;
  18. this.containerId = containerId;
  19. this.activeOnlyOne = activeOnlyOne || false;
  20. this.container = $(this.containerId);
  21. this.items = $$('#' + this.containerId + ' dt');
  22. this.loader = new varienLoader(true); //jscs:ignore requireCapitalizedConstructors
  23. links = $$('#' + this.containerId + ' dt a');
  24. for (i in links) {
  25. if (links[i].href) {
  26. Event.observe(links[i], 'click', this.clickItem.bind(this));
  27. this.items[i].dd = this.items[i].next('dd');
  28. this.items[i].link = links[i];
  29. }
  30. }
  31. this.initFromCookie();
  32. },
  33. /**
  34. * Init from cookie.
  35. */
  36. initFromCookie: function () {
  37. var activeItemId, visibility;
  38. if (this.activeOnlyOne &&
  39. (activeItemId = Cookie.read(this.cookiePrefix() + 'active-item')) !== null) {
  40. this.hideAllItems();
  41. this.showItem(this.getItemById(activeItemId));
  42. } else if (!this.activeOnlyOne) {
  43. this.items.each(function (item) {
  44. if ((visibility = Cookie.read(this.cookiePrefix() + item.id)) !== null) {
  45. if (visibility == 0) { //eslint-disable-line eqeqeq
  46. this.hideItem(item);
  47. } else {
  48. this.showItem(item);
  49. }
  50. }
  51. }.bind(this));
  52. }
  53. },
  54. /**
  55. * @return {String}
  56. */
  57. cookiePrefix: function () {
  58. return 'accordion-' + this.containerId + '-';
  59. },
  60. /**
  61. * @param {*} itemId
  62. * @return {*}
  63. */
  64. getItemById: function (itemId) {
  65. var result = null;
  66. this.items.each(function (item) {
  67. if (item.id == itemId) { //eslint-disable-line
  68. result = item;
  69. throw $break;
  70. }
  71. });
  72. return result;
  73. },
  74. /**
  75. * @param {*} event
  76. */
  77. clickItem: function (event) {
  78. var item = Event.findElement(event, 'dt');
  79. if (this.activeOnlyOne) {
  80. this.hideAllItems();
  81. this.showItem(item);
  82. Cookie.write(this.cookiePrefix() + 'active-item', item.id, 30 * 24 * 60 * 60);
  83. } else {
  84. if (this.isItemVisible(item)) { //eslint-disable-line no-lonely-if
  85. this.hideItem(item);
  86. Cookie.write(this.cookiePrefix() + item.id, 0, 30 * 24 * 60 * 60);
  87. } else {
  88. this.showItem(item);
  89. Cookie.write(this.cookiePrefix() + item.id, 1, 30 * 24 * 60 * 60);
  90. }
  91. }
  92. Event.stop(event);
  93. },
  94. /**
  95. * @param {Object} item
  96. */
  97. showItem: function (item) {
  98. if (item && item.link) {
  99. if (item.link.href) {
  100. this.loadContent(item);
  101. }
  102. Element.addClassName(item, 'open');
  103. Element.addClassName(item.dd, 'open');
  104. }
  105. },
  106. /**
  107. * @param {Object} item
  108. */
  109. hideItem: function (item) {
  110. Element.removeClassName(item, 'open');
  111. Element.removeClassName(item.dd, 'open');
  112. },
  113. /**
  114. * @param {*} item
  115. * @return {*}
  116. */
  117. isItemVisible: function (item) {
  118. return Element.hasClassName(item, 'open');
  119. },
  120. /**
  121. * @param {*} item
  122. */
  123. loadContent: function (item) {
  124. if (item.link.href.indexOf('#') == item.link.href.length - 1) { //eslint-disable-line eqeqeq
  125. return;
  126. }
  127. if (Element.hasClassName(item.link, 'ajax')) {
  128. this.loadingItem = item;
  129. this.loader.load(item.link.href, {
  130. updaterId: this.loadingItem.dd.id
  131. }, this.setItemContent.bind(this));
  132. return;
  133. }
  134. location.href = item.link.href;
  135. },
  136. /**
  137. * @param {Object} content
  138. */
  139. setItemContent: function (content) {
  140. if (content.isJSON) {
  141. return;
  142. }
  143. this.loadingItem.dd.innerHTML = content;
  144. },
  145. /**
  146. * Hide all items
  147. */
  148. hideAllItems: function () {
  149. var i;
  150. for (i in this.items) {
  151. if (this.items[i].id) {
  152. Element.removeClassName(this.items[i], 'open');
  153. Element.removeClassName(this.items[i].dd, 'open');
  154. }
  155. }
  156. }
  157. };
  158. });