profiler.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. var anbu = {
  2. // Sandbox a jQuery instance for the profiler.
  3. jq: jQuery.noConflict(true)
  4. };
  5. anbu.jq.extend(anbu, {
  6. // BOUND ELEMENTS
  7. // -------------------------------------------------------------
  8. // Binding these elements early, stops jQuery from "querying"
  9. // the DOM every time they are used.
  10. el: {
  11. main: anbu.jq('.anbu'),
  12. close: anbu.jq('#anbu-close'),
  13. zoom: anbu.jq('#anbu-zoom'),
  14. hide: anbu.jq('#anbu-hide'),
  15. show: anbu.jq('#anbu-show'),
  16. tab_pane: anbu.jq('.anbu-tab-pane'),
  17. hidden_tab_pane: anbu.jq('.anbu-tab-pane:visible'),
  18. tab: anbu.jq('.anbu-tab'),
  19. tabs: anbu.jq('.anbu-tabs'),
  20. tab_links: anbu.jq('.anbu-tabs a'),
  21. window: anbu.jq('.anbu-window'),
  22. closed_tabs: anbu.jq('#anbu-closed-tabs'),
  23. open_tabs: anbu.jq('#anbu-open-tabs'),
  24. content_area: anbu.jq('.anbu-content-area')
  25. },
  26. // CLASS ATTRIBUTES
  27. // -------------------------------------------------------------
  28. // Useful variable for Anbu.
  29. // is anbu in full screen mode
  30. is_zoomed: false,
  31. // initial height of content area
  32. small_height: anbu.jq('.anbu-content-area').height(),
  33. // the name of the active tab css
  34. active_tab: 'anbu-active-tab',
  35. // the data attribute of the tab link
  36. tab_data: 'data-anbu-tab',
  37. // size of anbu when compact
  38. mini_button_width: '2.6em',
  39. // is the top window open?
  40. window_open: false,
  41. // current active pane
  42. active_pane: '',
  43. // START()
  44. // -------------------------------------------------------------
  45. // Sets up all the binds for Anbu!
  46. start: function() {
  47. // hide initial elements
  48. anbu.el.close.css('visibility', 'visible').hide();
  49. anbu.el.zoom.css('visibility', 'visible').hide();
  50. anbu.el.tab_pane.css('visibility', 'visible').hide();
  51. // bind all click events
  52. anbu.el.close.click(function(event) {
  53. anbu.close_window();
  54. event.preventDefault();
  55. });
  56. anbu.el.hide.click(function(event) {
  57. anbu.hide();
  58. event.preventDefault();
  59. });
  60. anbu.el.show.click(function(event) {
  61. anbu.show();
  62. event.preventDefault();
  63. });
  64. anbu.el.zoom.click(function(event) {
  65. anbu.zoom();
  66. event.preventDefault();
  67. });
  68. anbu.el.tab.click(function(event) {
  69. anbu.clicked_tab(anbu.jq(this));
  70. event.preventDefault();
  71. });
  72. },
  73. // CLICKED_TAB()
  74. // -------------------------------------------------------------
  75. // A tab has been clicked, decide what to do.
  76. clicked_tab: function(tab) {
  77. // if the tab is closed
  78. if (anbu.window_open && anbu.active_pane == tab.attr(anbu.tab_data)) {
  79. anbu.close_window();
  80. } else {
  81. anbu.open_window(tab);
  82. }
  83. },
  84. // OPEN_WINDOW()
  85. // -------------------------------------------------------------
  86. // Animate open the top window to the appropriate tab.
  87. open_window: function(tab) {
  88. // can't directly assign this line, but it works
  89. anbu.jq('.anbu-tab-pane:visible').fadeOut(200);
  90. anbu.jq('.' + tab.attr(anbu.tab_data)).delay(220).fadeIn(300);
  91. anbu.el.tab_links.removeClass(anbu.active_tab);
  92. tab.addClass(anbu.active_tab);
  93. anbu.el.window.slideDown(300);
  94. anbu.el.close.fadeIn(300);
  95. anbu.el.zoom.fadeIn(300);
  96. anbu.active_pane = tab.attr(anbu.tab_data);
  97. anbu.window_open = true;
  98. },
  99. // CLOSE_WINDOW()
  100. // -------------------------------------------------------------
  101. // Animate closed the top window hiding all tabs.
  102. close_window: function() {
  103. anbu.el.tab_pane.fadeOut(100);
  104. anbu.el.window.slideUp(300);
  105. anbu.el.close.fadeOut(300);
  106. anbu.el.zoom.fadeOut(300);
  107. anbu.el.tab_links.removeClass(anbu.active_tab);
  108. anbu.active_pane = '';
  109. anbu.window_open = false;
  110. },
  111. // SHOW()
  112. // -------------------------------------------------------------
  113. // Show the Anbu toolbar when it has been compacted.
  114. show: function() {
  115. anbu.el.closed_tabs.fadeOut(600, function () {
  116. anbu.el.main.removeClass('anbu-hidden');
  117. anbu.el.open_tabs.fadeIn(200);
  118. });
  119. anbu.el.main.animate({width: '100%'}, 700);
  120. },
  121. // HIDE()
  122. // -------------------------------------------------------------
  123. // Hide the anbu toolbar, show a tiny re-open button.
  124. hide: function() {
  125. anbu.close_window();
  126. setTimeout(function() {
  127. anbu.el.window.slideUp(400, function () {
  128. anbu.close_window();
  129. anbu.el.main.addClass('anbu-hidden');
  130. anbu.el.open_tabs.fadeOut(200, function () {
  131. anbu.el.closed_tabs.fadeIn(200);
  132. });
  133. anbu.el.main.animate({width: anbu.mini_button_width}, 700);
  134. });
  135. }, 100);
  136. },
  137. // TOGGLEZOOM()
  138. // -------------------------------------------------------------
  139. // Toggle the zoomed mode of the top window.
  140. zoom: function() {
  141. var height;
  142. if (anbu.is_zoomed) {
  143. height = anbu.small_height;
  144. anbu.is_zoomed = false;
  145. } else {
  146. // the 6px is padding on the top of the window
  147. height = (anbu.jq(window).height() - anbu.el.tabs.height() - 6) + 'px';
  148. anbu.is_zoomed = true;
  149. }
  150. anbu.el.content_area.animate({height: height}, 700);
  151. }
  152. });
  153. // launch anbu on jquery dom ready
  154. anbu.jq(anbu.start);