treeview.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /**
  2. *
  3. * This file is part of the Sonata package.
  4. *
  5. * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
  6. *
  7. * For the full copyright and license information, please view the LICENSE
  8. * file that was distributed with this source code.
  9. *
  10. */
  11. ;(function ( $, window, document, undefined ) {
  12. var pluginName = 'treeView',
  13. defaultRegistry = '.js-treeview',
  14. defaults = {
  15. togglersAttribute: '[data-treeview-toggler]',
  16. toggledState: 'is-toggled',
  17. activeState: 'is-active',
  18. defaultToggled: '[data-treeview-toggled]',
  19. instanceAttribute: 'data-treeview-instance'
  20. };
  21. function TreeView( element, options ) {
  22. this.element = element;
  23. this.options = $.extend({}, defaults, options) ;
  24. this._defaults = defaults;
  25. this._name = pluginName;
  26. this.init();
  27. }
  28. TreeView.prototype = {
  29. /**
  30. * Constructor
  31. */
  32. init: function() {
  33. this.setElements();
  34. this.setEvents();
  35. this.setAttributes();
  36. this.showActiveElement();
  37. this.showToggledElements();
  38. },
  39. /**
  40. * Cache DOM elements to limit DOM parsing
  41. */
  42. setElements: function() {
  43. this.$element = $(this.element);
  44. this.$togglers = this.$element.find(this.options.togglersAttribute);
  45. this.$defaultToggled = this.$element.find(this.options.defaultToggled);
  46. },
  47. /**
  48. * Set some attrs
  49. */
  50. setAttributes: function() {
  51. this.$element.attr(this.options.instanceAttribute, true);
  52. },
  53. /**
  54. * Set events and delegates
  55. */
  56. setEvents: function() {
  57. this.$togglers.on('click', $.proxy(this.toggle, this));
  58. },
  59. /**
  60. * Toggle an item
  61. */
  62. toggle: function(ev) {
  63. var $target = $(ev.currentTarget),
  64. $parent = $target.parent();
  65. $parent.toggleClass(this.options.toggledState);
  66. $parent.next('ul').slideToggle();
  67. },
  68. /**
  69. * Show active element
  70. */
  71. showActiveElement: function() {
  72. var parents = '[' + this.options.instanceAttribute + '] ul, [' + this.options.instanceAttribute + ']';
  73. var $activeElement = this.$element.find('.' + this.options.activeState);
  74. var $parents = $activeElement.parents(parents);
  75. $parents.show();
  76. $parents.prev().addClass(this.options.toggledState);
  77. },
  78. /**
  79. * Default visible elements
  80. */
  81. showToggledElements: function() {
  82. this.$defaultToggled.addClass(this.options.toggledState);
  83. this.$defaultToggled.next('ul').show();
  84. }
  85. };
  86. // A really lightweight plugin wrapper around the constructor,
  87. // preventing against multiple instantiations
  88. $.fn[pluginName] = function ( options ) {
  89. return this.each(function () {
  90. if (!$.data(this, 'plugin_' + pluginName)) {
  91. $.data(this, 'plugin_' + pluginName, new TreeView(this, options));
  92. }
  93. });
  94. };
  95. })( jQuery, window, document );