Tree.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /* Tree()
  2. * ======
  3. * Converts a nested list into a multilevel
  4. * tree view menu.
  5. *
  6. * @Usage: $('.my-menu').tree(options)
  7. * or add [data-widget="tree"] to the ul element
  8. * Pass any option as data-option="value"
  9. */
  10. +function ($) {
  11. 'use strict';
  12. var DataKey = 'lte.tree';
  13. var Default = {
  14. animationSpeed: 500,
  15. accordion : true,
  16. followLink : false,
  17. trigger : '.treeview a'
  18. };
  19. var Selector = {
  20. tree : '.tree',
  21. treeview : '.treeview',
  22. treeviewMenu: '.treeview-menu',
  23. open : '.menu-open, .active',
  24. li : 'li',
  25. data : '[data-widget="tree"]',
  26. active : '.active'
  27. };
  28. var ClassName = {
  29. open: 'menu-open',
  30. tree: 'tree'
  31. };
  32. var Event = {
  33. collapsed: 'collapsed.tree',
  34. expanded : 'expanded.tree'
  35. };
  36. // Tree Class Definition
  37. // =====================
  38. var Tree = function (element, options) {
  39. this.element = element;
  40. this.options = options;
  41. $(this.element).addClass(ClassName.tree);
  42. $(Selector.treeview + Selector.active, this.element).addClass(ClassName.open);
  43. this._setUpListeners();
  44. };
  45. Tree.prototype.toggle = function (link, event) {
  46. var treeviewMenu = link.next(Selector.treeviewMenu);
  47. var parentLi = link.parent();
  48. var isOpen = parentLi.hasClass(ClassName.open);
  49. if (!parentLi.is(Selector.treeview)) {
  50. return;
  51. }
  52. if (!this.options.followLink || link.attr('href') === '#') {
  53. event.preventDefault();
  54. }
  55. if (isOpen) {
  56. this.collapse(treeviewMenu, parentLi);
  57. } else {
  58. this.expand(treeviewMenu, parentLi);
  59. }
  60. };
  61. Tree.prototype.expand = function (tree, parent) {
  62. var expandedEvent = $.Event(Event.expanded);
  63. if (this.options.accordion) {
  64. var openMenuLi = parent.siblings(Selector.open);
  65. var openTree = openMenuLi.children(Selector.treeviewMenu);
  66. this.collapse(openTree, openMenuLi);
  67. }
  68. parent.addClass(ClassName.open);
  69. tree.slideDown(this.options.animationSpeed, function () {
  70. $(this.element).trigger(expandedEvent);
  71. }.bind(this));
  72. };
  73. Tree.prototype.collapse = function (tree, parentLi) {
  74. var collapsedEvent = $.Event(Event.collapsed);
  75. //tree.find(Selector.open).removeClass(ClassName.open);
  76. parentLi.removeClass(ClassName.open);
  77. tree.slideUp(this.options.animationSpeed, function () {
  78. //tree.find(Selector.open + ' > ' + Selector.treeview).slideUp();
  79. $(this.element).trigger(collapsedEvent);
  80. }.bind(this));
  81. };
  82. // Private
  83. Tree.prototype._setUpListeners = function () {
  84. var that = this;
  85. $(this.element).on('click', this.options.trigger, function (event) {
  86. that.toggle($(this), event);
  87. });
  88. };
  89. // Plugin Definition
  90. // =================
  91. function Plugin(option) {
  92. return this.each(function () {
  93. var $this = $(this);
  94. var data = $this.data(DataKey);
  95. if (!data) {
  96. var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
  97. $this.data(DataKey, new Tree($this, options));
  98. }
  99. });
  100. }
  101. var old = $.fn.tree;
  102. $.fn.tree = Plugin;
  103. $.fn.tree.Constructor = Tree;
  104. // No Conflict Mode
  105. // ================
  106. $.fn.tree.noConflict = function () {
  107. $.fn.tree = old;
  108. return this;
  109. };
  110. // Tree Data API
  111. // =============
  112. $(window).on('load', function () {
  113. $(Selector.data).each(function () {
  114. Plugin.call($(this));
  115. });
  116. });
  117. }(jQuery);