menu.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /**
  6. * Simple Navigation with replacing old handlers.
  7. *
  8. * @param {String} id - id of ul element with navigation lists
  9. * @param {Object} settings - object with settings
  10. */
  11. /**
  12. * global mainNav
  13. *
  14. * @deprecated
  15. * @see lib/web/mage/menu.js
  16. */
  17. define([
  18. 'prototype'
  19. ], function () {
  20. 'use strict';
  21. /**
  22. * Main nav.
  23. */
  24. window.mainNav = function () {
  25. var main = {
  26. 'obj_nav': $(arguments[0]) || $('nav'),
  27. settings: {
  28. 'show_delay': 0,
  29. 'hide_delay': 0,
  30. _ie6: /MSIE 6.+Win/.test(navigator.userAgent),
  31. _ie7: /MSIE 7.+Win/.test(navigator.userAgent)
  32. },
  33. /**
  34. * @param {Object} obj
  35. * @param {*} level
  36. */
  37. init: function (obj, level) {
  38. obj.lists = obj.childElements();
  39. obj.lists.each(function (el, ind) {
  40. main.handlNavElement(el);
  41. if ((main.settings._ie6 || main.settings._ie7) && level) {
  42. main.ieFixZIndex(el, ind, obj.lists.size());
  43. }
  44. });
  45. if (main.settings._ie6 && !level) {
  46. document.execCommand('BackgroundImageCache', false, true);
  47. }
  48. },
  49. /**
  50. * @param {Object} list
  51. */
  52. handlNavElement: function (list) {
  53. if (list !== undefined) {
  54. /**
  55. * On mouse over.
  56. */
  57. list.onmouseover = function () {
  58. main.fireNavEvent(this, true);
  59. };
  60. /**
  61. * On mouse out.
  62. */
  63. list.onmouseout = function () {
  64. main.fireNavEvent(this, false);
  65. };
  66. if (list.down('ul')) {
  67. main.init(list.down('ul'), true);
  68. }
  69. }
  70. },
  71. /**
  72. * @param {HTMLElement} el
  73. * @param {*} i
  74. * @param {*} l
  75. */
  76. ieFixZIndex: function (el, i, l) {
  77. if (el.tagName.toString().toLowerCase().indexOf('iframe') == -1) { //eslint-disable-line eqeqeq
  78. el.style.zIndex = l - i;
  79. } else {
  80. el.onmouseover = 'null';
  81. el.onmouseout = 'null';
  82. }
  83. },
  84. /**
  85. * @param {Object} elm
  86. * @param {*} ev
  87. */
  88. fireNavEvent: function (elm, ev) {
  89. if (ev) {
  90. elm.addClassName('over');
  91. elm.down('a').addClassName('over');
  92. if (elm.childElements()[1]) {
  93. main.show(elm.childElements()[1]);
  94. }
  95. } else {
  96. elm.removeClassName('over');
  97. elm.down('a').removeClassName('over');
  98. if (elm.childElements()[1]) {
  99. main.hide(elm.childElements()[1]);
  100. }
  101. }
  102. },
  103. /**
  104. * @param {Object} subElm
  105. */
  106. show: function (subElm) {
  107. if (subElm['hide_time_id']) {
  108. clearTimeout(subElm['hide_time_id']);
  109. }
  110. subElm['show_time_id'] = setTimeout(function () {
  111. if (!subElm.hasClassName('shown-sub')) {
  112. subElm.addClassName('shown-sub');
  113. }
  114. }, main.settings['show_delay']);
  115. },
  116. /**
  117. * @param {Object} subElm
  118. */
  119. hide: function (subElm) {
  120. if (subElm['show_time_id']) {
  121. clearTimeout(subElm['show_time_id']);
  122. }
  123. subElm['hide_time_id'] = setTimeout(function () {
  124. if (subElm.hasClassName('shown-sub')) {
  125. subElm.removeClassName('shown-sub');
  126. }
  127. }, main.settings['hide_delay']);
  128. }
  129. };
  130. if (arguments[1]) {
  131. main.settings = Object.extend(main.settings, arguments[1]);
  132. }
  133. if (main['obj_nav']) {
  134. main.init(main['obj_nav'], false);
  135. }
  136. };
  137. document.observe('dom:loaded', function () {
  138. //run navigation without delays and with default id="#nav"
  139. //mainNav();
  140. //run navigation with delays
  141. window.mainNav('nav', {
  142. 'show_delay': '100',
  143. 'hide_delay': '100'
  144. });
  145. });
  146. });