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. })
  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. })
  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)