Tree.js 3.4 KB

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