tree.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. jQuery.fn.dw_tree = function(overrides) {
  2. var dw_tree = {
  3. /**
  4. * Delay in ms before showing the throbber.
  5. * Used to skip the throbber for fast AJAX calls.
  6. */
  7. throbber_delay: 500,
  8. $obj: this,
  9. toggle_selector: 'a.idx_dir',
  10. init: function () {
  11. this.$obj.on('click', this.toggle_selector, this,
  12. this.toggle);
  13. jQuery('ul:first', this.$obj).attr('role', 'tree');
  14. jQuery('ul', this.$obj).not(':first').attr('role', 'group');
  15. jQuery('li', this.$obj).attr('role', 'treeitem');
  16. jQuery('li.open > ul', this.$obj).attr('aria-expanded', 'true');
  17. jQuery('li.closed > ul', this.$obj).attr('aria-expanded', 'false');
  18. jQuery('li.closed', this.$obj).attr('aria-live', 'assertive');
  19. },
  20. /**
  21. * Open or close a subtree using AJAX
  22. * The contents of subtrees are "cached" until the page is reloaded.
  23. * A "loading" indicator is shown only when the AJAX call is slow.
  24. *
  25. * @author Andreas Gohr <andi@splitbrain.org>
  26. * @author Ben Coburn <btcoburn@silicodon.net>
  27. * @author Pierre Spring <pierre.spring@caillou.ch>
  28. */
  29. toggle: function (e) {
  30. var $listitem, $sublist, timeout, $clicky, show_sublist, dw_tree, opening;
  31. e.preventDefault();
  32. dw_tree = e.data;
  33. $clicky = jQuery(this);
  34. $listitem = $clicky.closest('li');
  35. $sublist = $listitem.find('ul').first();
  36. opening = $listitem.hasClass('closed');
  37. dw_tree.toggle_display($clicky, opening);
  38. if ($sublist.is(':visible')) {
  39. $listitem.removeClass('open').addClass('closed');
  40. $sublist.attr('aria-expanded', 'false');
  41. } else {
  42. $listitem.removeClass('closed').addClass('open');
  43. $sublist.attr('aria-expanded', 'true');
  44. }
  45. // if already open, close by hiding the sublist
  46. if (!opening) {
  47. $sublist.dw_hide();
  48. return;
  49. }
  50. show_sublist = function (data) {
  51. $sublist.hide();
  52. if (typeof data !== 'undefined') {
  53. $sublist.html(data);
  54. $sublist.parent().attr('aria-busy', 'false').removeAttr('aria-live');
  55. jQuery('li.closed', $sublist).attr('aria-live', 'assertive');
  56. }
  57. if ($listitem.hasClass('open')) {
  58. // Only show if user didn’t close the list since starting
  59. // to load the content
  60. $sublist.dw_show();
  61. }
  62. };
  63. // just show if already loaded
  64. if ($sublist.length > 0) {
  65. show_sublist();
  66. return;
  67. }
  68. //prepare the new ul
  69. $sublist = jQuery('<ul class="idx" role="group"/>');
  70. $listitem.append($sublist);
  71. timeout = window.setTimeout(
  72. bind(show_sublist, '<li aria-busy="true"><img src="' + DOKU_BASE + 'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>'), dw_tree.throbber_delay);
  73. dw_tree.load_data(function (data) {
  74. window.clearTimeout(timeout);
  75. show_sublist(data);
  76. }, $clicky);
  77. },
  78. toggle_display: function ($clicky, opening) {
  79. },
  80. load_data: function (show_data, $clicky) {
  81. show_data();
  82. }
  83. };
  84. jQuery.extend(dw_tree, overrides);
  85. if (!overrides.deferInit) {
  86. dw_tree.init();
  87. }
  88. return dw_tree;
  89. };