index.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. /*!
  2. * metismenu https://github.com/onokumus/metismenu#readme
  3. * A jQuery menu plugin
  4. * @version 3.0.6
  5. * @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
  6. * @license: MIT
  7. */
  8. import $ from 'jquery';
  9. function _extends() {
  10. _extends = Object.assign || function (target) {
  11. for (var i = 1; i < arguments.length; i++) {
  12. var source = arguments[i];
  13. for (var key in source) {
  14. if (Object.prototype.hasOwnProperty.call(source, key)) {
  15. target[key] = source[key];
  16. }
  17. }
  18. }
  19. return target;
  20. };
  21. return _extends.apply(this, arguments);
  22. }
  23. var Util = function ($) {
  24. // eslint-disable-line no-shadow
  25. var TRANSITION_END = 'transitionend';
  26. var Util = {
  27. // eslint-disable-line no-shadow
  28. TRANSITION_END: 'mmTransitionEnd',
  29. triggerTransitionEnd: function triggerTransitionEnd(element) {
  30. $(element).trigger(TRANSITION_END);
  31. },
  32. supportsTransitionEnd: function supportsTransitionEnd() {
  33. return Boolean(TRANSITION_END);
  34. }
  35. };
  36. function getSpecialTransitionEndEvent() {
  37. return {
  38. bindType: TRANSITION_END,
  39. delegateType: TRANSITION_END,
  40. handle: function handle(event) {
  41. if ($(event.target).is(this)) {
  42. return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
  43. }
  44. return undefined;
  45. }
  46. };
  47. }
  48. function transitionEndEmulator(duration) {
  49. var _this = this;
  50. var called = false;
  51. $(this).one(Util.TRANSITION_END, function () {
  52. called = true;
  53. });
  54. setTimeout(function () {
  55. if (!called) {
  56. Util.triggerTransitionEnd(_this);
  57. }
  58. }, duration);
  59. return this;
  60. }
  61. function setTransitionEndSupport() {
  62. $.fn.mmEmulateTransitionEnd = transitionEndEmulator; // eslint-disable-line no-param-reassign
  63. // eslint-disable-next-line no-param-reassign
  64. $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
  65. }
  66. setTransitionEndSupport();
  67. return Util;
  68. }($);
  69. var NAME = 'metisMenu';
  70. var DATA_KEY = 'metisMenu';
  71. var EVENT_KEY = "." + DATA_KEY;
  72. var DATA_API_KEY = '.data-api';
  73. var JQUERY_NO_CONFLICT = $.fn[NAME];
  74. var TRANSITION_DURATION = 350;
  75. var Default = {
  76. toggle: true,
  77. preventDefault: true,
  78. triggerElement: 'a',
  79. parentTrigger: 'li',
  80. subMenu: 'ul'
  81. };
  82. var Event = {
  83. SHOW: "show" + EVENT_KEY,
  84. SHOWN: "shown" + EVENT_KEY,
  85. HIDE: "hide" + EVENT_KEY,
  86. HIDDEN: "hidden" + EVENT_KEY,
  87. CLICK_DATA_API: "click" + EVENT_KEY + DATA_API_KEY
  88. };
  89. var ClassName = {
  90. METIS: 'metismenu',
  91. ACTIVE: 'mm-active',
  92. SHOW: 'mm-show',
  93. COLLAPSE: 'mm-collapse',
  94. COLLAPSING: 'mm-collapsing',
  95. COLLAPSED: 'mm-collapsed'
  96. };
  97. var MetisMenu = /*#__PURE__*/function () {
  98. // eslint-disable-line no-shadow
  99. function MetisMenu(element, config) {
  100. this.element = element;
  101. this.config = _extends({}, Default, {}, config);
  102. this.transitioning = null;
  103. this.init();
  104. }
  105. var _proto = MetisMenu.prototype;
  106. _proto.init = function init() {
  107. var self = this;
  108. var conf = this.config;
  109. var el = $(this.element);
  110. el.addClass(ClassName.METIS); // add metismenu class to element
  111. el.find(conf.parentTrigger + "." + ClassName.ACTIVE).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the trigger element
  112. el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).addClass(ClassName.ACTIVE);
  113. el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the triggers of all parents
  114. el.find(conf.parentTrigger + "." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW);
  115. el.find(conf.parentTrigger).not("." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE);
  116. el.find(conf.parentTrigger) // .has(conf.subMenu)
  117. .children(conf.triggerElement).on(Event.CLICK_DATA_API, function (e) {
  118. // eslint-disable-line func-names
  119. var eTar = $(this);
  120. if (eTar.attr('aria-disabled') === 'true') {
  121. return;
  122. }
  123. if (conf.preventDefault && eTar.attr('href') === '#') {
  124. e.preventDefault();
  125. }
  126. var paRent = eTar.parent(conf.parentTrigger);
  127. var sibLi = paRent.siblings(conf.parentTrigger);
  128. var sibTrigger = sibLi.children(conf.triggerElement);
  129. if (paRent.hasClass(ClassName.ACTIVE)) {
  130. eTar.attr('aria-expanded', 'false');
  131. self.removeActive(paRent);
  132. } else {
  133. eTar.attr('aria-expanded', 'true');
  134. self.setActive(paRent);
  135. if (conf.toggle) {
  136. self.removeActive(sibLi);
  137. sibTrigger.attr('aria-expanded', 'false');
  138. }
  139. }
  140. if (conf.onTransitionStart) {
  141. conf.onTransitionStart(e);
  142. }
  143. });
  144. };
  145. _proto.setActive = function setActive(li) {
  146. $(li).addClass(ClassName.ACTIVE);
  147. var ul = $(li).children(this.config.subMenu);
  148. if (ul.length > 0 && !ul.hasClass(ClassName.SHOW)) {
  149. this.show(ul);
  150. }
  151. };
  152. _proto.removeActive = function removeActive(li) {
  153. $(li).removeClass(ClassName.ACTIVE);
  154. var ul = $(li).children(this.config.subMenu + "." + ClassName.SHOW);
  155. if (ul.length > 0) {
  156. this.hide(ul);
  157. }
  158. };
  159. _proto.show = function show(element) {
  160. var _this = this;
  161. if (this.transitioning || $(element).hasClass(ClassName.COLLAPSING)) {
  162. return;
  163. }
  164. var elem = $(element);
  165. var startEvent = $.Event(Event.SHOW);
  166. elem.trigger(startEvent);
  167. if (startEvent.isDefaultPrevented()) {
  168. return;
  169. }
  170. elem.parent(this.config.parentTrigger).addClass(ClassName.ACTIVE);
  171. if (this.config.toggle) {
  172. var toggleElem = elem.parent(this.config.parentTrigger).siblings().children(this.config.subMenu + "." + ClassName.SHOW);
  173. this.hide(toggleElem);
  174. }
  175. elem.removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING).height(0);
  176. this.setTransitioning(true);
  177. var complete = function complete() {
  178. // check if disposed
  179. if (!_this.config || !_this.element) {
  180. return;
  181. }
  182. elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW).height('');
  183. _this.setTransitioning(false);
  184. elem.trigger(Event.SHOWN);
  185. };
  186. elem.height(element[0].scrollHeight).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
  187. };
  188. _proto.hide = function hide(element) {
  189. var _this2 = this;
  190. if (this.transitioning || !$(element).hasClass(ClassName.SHOW)) {
  191. return;
  192. }
  193. var elem = $(element);
  194. var startEvent = $.Event(Event.HIDE);
  195. elem.trigger(startEvent);
  196. if (startEvent.isDefaultPrevented()) {
  197. return;
  198. }
  199. elem.parent(this.config.parentTrigger).removeClass(ClassName.ACTIVE); // eslint-disable-next-line no-unused-expressions
  200. elem.height(elem.height())[0].offsetHeight;
  201. elem.addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW);
  202. this.setTransitioning(true);
  203. var complete = function complete() {
  204. // check if disposed
  205. if (!_this2.config || !_this2.element) {
  206. return;
  207. }
  208. if (_this2.transitioning && _this2.config.onTransitionEnd) {
  209. _this2.config.onTransitionEnd();
  210. }
  211. _this2.setTransitioning(false);
  212. elem.trigger(Event.HIDDEN);
  213. elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE);
  214. };
  215. if (elem.height() === 0 || elem.css('display') === 'none') {
  216. complete();
  217. } else {
  218. elem.height(0).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
  219. }
  220. };
  221. _proto.setTransitioning = function setTransitioning(isTransitioning) {
  222. this.transitioning = isTransitioning;
  223. };
  224. _proto.dispose = function dispose() {
  225. $.removeData(this.element, DATA_KEY);
  226. $(this.element).find(this.config.parentTrigger) // .has(this.config.subMenu)
  227. .children(this.config.triggerElement).off(Event.CLICK_DATA_API);
  228. this.transitioning = null;
  229. this.config = null;
  230. this.element = null;
  231. };
  232. MetisMenu.jQueryInterface = function jQueryInterface(config) {
  233. // eslint-disable-next-line func-names
  234. return this.each(function () {
  235. var $this = $(this);
  236. var data = $this.data(DATA_KEY);
  237. var conf = _extends({}, Default, {}, $this.data(), {}, typeof config === 'object' && config ? config : {});
  238. if (!data) {
  239. data = new MetisMenu(this, conf);
  240. $this.data(DATA_KEY, data);
  241. }
  242. if (typeof config === 'string') {
  243. if (data[config] === undefined) {
  244. throw new Error("No method named \"" + config + "\"");
  245. }
  246. data[config]();
  247. }
  248. });
  249. };
  250. return MetisMenu;
  251. }();
  252. /**
  253. * ------------------------------------------------------------------------
  254. * jQuery
  255. * ------------------------------------------------------------------------
  256. */
  257. $.fn[NAME] = MetisMenu.jQueryInterface; // eslint-disable-line no-param-reassign
  258. $.fn[NAME].Constructor = MetisMenu; // eslint-disable-line no-param-reassign
  259. $.fn[NAME].noConflict = function () {
  260. // eslint-disable-line no-param-reassign
  261. $.fn[NAME] = JQUERY_NO_CONFLICT; // eslint-disable-line no-param-reassign
  262. return MetisMenu.jQueryInterface;
  263. };
  264. export default MetisMenu;