menu.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/Plugin/menu", ["Plugin"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(require("Plugin"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(global.Plugin);
  11. global.PluginMenu = mod.exports;
  12. }
  13. })(this, function (_Plugin2) {
  14. "use strict";
  15. _Plugin2 = babelHelpers.interopRequireDefault(_Plugin2);
  16. var NAME = 'menu';
  17. var Menu =
  18. /*#__PURE__*/
  19. function (_Plugin) {
  20. babelHelpers.inherits(Menu, _Plugin);
  21. function Menu() {
  22. var _babelHelpers$getProt;
  23. var _this;
  24. babelHelpers.classCallCheck(this, Menu);
  25. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  26. args[_key] = arguments[_key];
  27. }
  28. _this = babelHelpers.possibleConstructorReturn(this, (_babelHelpers$getProt = babelHelpers.getPrototypeOf(Menu)).call.apply(_babelHelpers$getProt, [this].concat(args)));
  29. _this.folded = true;
  30. _this.foldAlt = true;
  31. _this.outerHeight = 0;
  32. return _this;
  33. }
  34. babelHelpers.createClass(Menu, [{
  35. key: "getName",
  36. value: function getName() {
  37. return NAME;
  38. }
  39. }, {
  40. key: "render",
  41. value: function render() {
  42. this.bindEvents();
  43. this.$el.data('menuApi', this);
  44. }
  45. }, {
  46. key: "bindEvents",
  47. value: function bindEvents() {
  48. var self = this;
  49. this.$el.on('mouseenter.site.menu', '.site-menu-item', function () {
  50. var $item = $(this);
  51. if ($item.is('.has-sub') && $item.parent('.site-menu').length > 0) {
  52. var $sub = $item.children('.site-menu-sub');
  53. self.position($item, $sub);
  54. }
  55. $item.addClass('hover');
  56. }).on('mouseleave.site.menu', '.site-menu-item', function () {
  57. var $item = $(this);
  58. if ($item.is('.has-sub') && $item.parent('.site-menu').length > 0) {
  59. $item.children('.site-menu-sub').css('max-height', '');
  60. }
  61. $item.removeClass('hover');
  62. }).on('open.site.menu', '.site-menu-item', function (e) {
  63. var $item = $(this);
  64. self.expand($item, function () {
  65. $item.addClass('open');
  66. });
  67. $item.siblings('.open').trigger('close.site.menu');
  68. e.stopPropagation();
  69. }).on('close.site.menu', '.site-menu-item.open', function (e) {
  70. var $item = $(this);
  71. self.collapse($item, function () {
  72. $item.removeClass('open');
  73. });
  74. e.stopPropagation();
  75. }).on('click.site.menu ', '.site-menu-item', function (e) {
  76. var $item = $(this);
  77. if ($item.parent('.site-menu').length === 0 && $item.is('.has-sub') && $(e.target).closest('.site-menu-item').is(this)) {
  78. if ($item.is('.open')) {
  79. $item.trigger('close.site.menu');
  80. } else {
  81. $item.trigger('open.site.menu');
  82. }
  83. }
  84. e.stopPropagation();
  85. }).on('tap.site.menu', '> .site-menu-item > a', function () {
  86. var link = $(this).attr('href');
  87. if (link) {
  88. window.location = link;
  89. }
  90. }).on('touchstart.site.menu', '.site-menu-item', function () {
  91. $(this).one('touchend.site.menu', function () {
  92. var $item = $(this);
  93. if ($item.is('.has-sub') && $item.parent('.site-menu').length > 0) {
  94. $item.siblings('.hover').each(function () {
  95. var $item = $(this);
  96. if ($item.is('.has-sub') && $item.parent('.site-menu').length > 0) {
  97. $item.children('.site-menu-sub').css('max-height', '');
  98. }
  99. $item.removeClass('hover');
  100. });
  101. if ($item.is('.hover')) {
  102. if ($item.is('.has-sub') && $item.parent('.site-menu').length > 0) {
  103. $item.children('.site-menu-sub').css('max-height', '');
  104. }
  105. $item.removeClass('hover');
  106. } else {
  107. if ($item.is('.has-sub') && $item.parent('.site-menu').length > 0) {
  108. var $sub = $item.children('.site-menu-sub');
  109. self.position($item, $sub);
  110. }
  111. $item.addClass('hover');
  112. }
  113. }
  114. });
  115. }).on('scroll.site.menu', '.site-menu-sub', function (e) {
  116. e.stopPropagation();
  117. });
  118. }
  119. }, {
  120. key: "collapse",
  121. value: function collapse($item, callback) {
  122. var self = this;
  123. var $sub = $item.children('.site-menu-sub');
  124. $sub.show().slideUp(this.options.speed, function () {
  125. $(this).css('display', '');
  126. $(this).find('> .site-menu-item').removeClass('is-shown');
  127. if (callback) {
  128. callback();
  129. }
  130. self.$el.trigger('collapsed.site.menu');
  131. });
  132. }
  133. }, {
  134. key: "expand",
  135. value: function expand($item, callback) {
  136. var self = this;
  137. var $sub = $item.children('.site-menu-sub');
  138. var $children = $sub.children('.site-menu-item').addClass('is-hidden');
  139. $sub.hide().slideDown(this.options.speed, function () {
  140. $(this).css('display', '');
  141. if (callback) {
  142. callback();
  143. }
  144. self.$el.trigger('expanded.site.menu');
  145. });
  146. setTimeout(function () {
  147. $children.addClass('is-shown');
  148. $children.removeClass('is-hidden');
  149. }, 0);
  150. }
  151. }, {
  152. key: "refresh",
  153. value: function refresh() {
  154. this.$el.find('.open').filter(':not(.active)').removeClass('open');
  155. }
  156. }, {
  157. key: "position",
  158. value: function position($item, $dropdown) {
  159. var itemHeight = $item.find('> a').outerHeight();
  160. var menubarHeight = this.outerHeight;
  161. var offsetTop = $item.position().top;
  162. $dropdown.removeClass('site-menu-sub-up').css('max-height', '');
  163. if (offsetTop > menubarHeight / 2) {
  164. $dropdown.addClass('site-menu-sub-up');
  165. if (this.foldAlt) {
  166. offsetTop -= itemHeight;
  167. }
  168. $dropdown.css('max-height', offsetTop + itemHeight);
  169. } else {
  170. if (this.foldAlt) {
  171. offsetTop += itemHeight;
  172. }
  173. $dropdown.removeClass('site-menu-sub-up');
  174. $dropdown.css('max-height', menubarHeight - offsetTop);
  175. }
  176. }
  177. }], [{
  178. key: "getDefaults",
  179. value: function getDefaults() {
  180. return {
  181. speed: 250
  182. };
  183. }
  184. }]);
  185. return Menu;
  186. }(_Plugin2.default);
  187. _Plugin2.default.register(NAME, Menu);
  188. });