admin.toolbar.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. (function($) {
  2. Drupal.behaviors.adminToolbar = {};
  3. Drupal.behaviors.adminToolbar.attach = function(context) {
  4. $('#admin-toolbar:not(.processed)').each(function() {
  5. var toolbar = $(this);
  6. toolbar.addClass('processed');
  7. // Set initial toolbar state.
  8. Drupal.adminToolbar.init(toolbar);
  9. // Admin toggle.
  10. $('.admin-toggle', this).click(function() { Drupal.adminToolbar.toggle(toolbar); });
  11. // Admin tabs.
  12. $('div.admin-tab', this).click(function() { Drupal.adminToolbar.tab(toolbar, $(this), true); });
  13. $(document).bind('drupalOverlayLoad', {adminToolbar: Drupal.adminToolbar, toolbar: toolbar}, function(event) {
  14. var body = $(document.body);
  15. var adminToolbar = event.data.adminToolbar;
  16. var expand = parseInt(adminToolbar.getState('expanded'));
  17. if (!expand) {
  18. return;
  19. }
  20. var toolbar = event.data.toolbar;
  21. var size = adminToolbar.SIZE + 'px';
  22. adminToolbar.setOverlayState(toolbar, toolbar.is('.vertical'), expand);
  23. });
  24. });
  25. $('div.admin-panes:not(.processed)').each(function() {
  26. var panes = $(this);
  27. panes.addClass('processed');
  28. $('h2.admin-pane-title a').click(function() {
  29. var target = $(this).attr('href').split('#')[1];
  30. var panes = $(this).parents('div.admin-panes')[0];
  31. $('.admin-pane-active', panes).removeClass('admin-pane-active');
  32. $('div.admin-pane.' + target, panes).addClass('admin-pane-active');
  33. $(this).addClass('admin-pane-active');
  34. return false;
  35. });
  36. });
  37. };
  38. /**
  39. * Admin toolbar methods.
  40. */
  41. Drupal.adminToolbar = {};
  42. /**
  43. * The width or height of the toolbar, depending on orientation.
  44. */
  45. Drupal.adminToolbar.SIZE = 260;
  46. /**
  47. * Set the initial state of the toolbar.
  48. */
  49. Drupal.adminToolbar.init = function (toolbar) {
  50. // Set expanded state.
  51. var expanded = this.getState('expanded');
  52. if (!$(document.body).hasClass('admin-ah')) {
  53. if (expanded == 1) {
  54. $(document.body).addClass('admin-expanded');
  55. }
  56. }
  57. // Set default tab state.
  58. var target = this.getState('activeTab');
  59. if (target) {
  60. if ($('div.admin-tab.'+target).size() > 0) {
  61. var tab = $('div.admin-tab.'+target);
  62. this.tab(toolbar, tab, false);
  63. }
  64. }
  65. // Add layout class to body.
  66. var classes = toolbar.attr('class').split(' ');
  67. if (classes[0] === 'nw' || classes[0] === 'ne' || classes[0] === 'se' || classes[0] === 'sw' ) {
  68. $(document.body).addClass('admin-'+classes[0]);
  69. }
  70. if (classes[1] === 'horizontal' || classes[1] === 'vertical') {
  71. $(document.body).addClass('admin-'+classes[1]);
  72. }
  73. if (classes[2] === 'df' || classes[2] === 'ah') {
  74. $(document.body).addClass('admin-'+classes[2]);
  75. }
  76. var vertical = true;
  77. if(classes[1] === 'horizontal') {
  78. vertical = false;
  79. }
  80. };
  81. /**
  82. * Set the active tab.
  83. */
  84. Drupal.adminToolbar.tab = function(toolbar, tab, animate) {
  85. if (!tab.is('.admin-tab-active')) {
  86. var target = $('span', tab).attr('id').split('admin-tab-')[1];
  87. // Vertical
  88. // Use animations to make the vertical tab transition a bit smoother.
  89. if (toolbar.is('.vertical') && animate) {
  90. $('.admin-tab-active', toolbar).fadeOut('fast');
  91. $(tab).fadeOut('fast', function() {
  92. $('.admin-tab-active', toolbar).fadeIn('fast').removeClass('admin-tab-active');
  93. $(tab).slideDown('fast').addClass('admin-tab-active');
  94. Drupal.adminToolbar.setState('activeTab', target);
  95. });
  96. }
  97. // Horizontal
  98. // Tabs don't need animation assistance.
  99. else {
  100. $('div.admin-tab', toolbar).removeClass('admin-tab-active');
  101. $(tab, toolbar).addClass('admin-tab-active');
  102. Drupal.adminToolbar.setState('activeTab', target);
  103. }
  104. // Blocks
  105. $('div.admin-block.admin-active', toolbar).removeClass('admin-active');
  106. $('#block-'+target, toolbar).addClass('admin-active');
  107. }
  108. return false;
  109. };
  110. /**
  111. * Set the width/height of the of the overlay body based on the state admin toolbar.
  112. *
  113. * @param vertical
  114. * A boolean indicating if the toolbar is vertical.
  115. * @param expanded
  116. * A boolean indicating if the toolbar is expanded.
  117. */
  118. Drupal.adminToolbar.setOverlayState = function(toolbar, vertical, expanded) {
  119. var margin,
  120. size = this.SIZE + 65;
  121. if (!expanded) {
  122. size = 0;
  123. }
  124. margin = {marginLeft: size+'px'};
  125. if (vertical) {
  126. if (toolbar.is('.ne') || toolbar.is('.se')) {
  127. margin = {marginRight: size+'px'}
  128. }
  129. }
  130. else {
  131. if (toolbar.is('.ne') || toolbar.is('.nw')) {
  132. margin = {marginTop: size+'px'};
  133. }
  134. else {
  135. margin = {marginBottom: size+'px'};
  136. }
  137. }
  138. $('iframe.overlay-element').contents().find('body').animate(margin, 'fast');
  139. };
  140. /**
  141. * Toggle the toolbar open or closed.
  142. */
  143. Drupal.adminToolbar.toggle = function (toolbar) {
  144. var size = '0px';
  145. if ($(document.body).is('.admin-expanded')) {
  146. if ($(toolbar).is('.vertical')) {
  147. $('div.admin-blocks', toolbar).animate({width:size}, 'fast');
  148. if ($(toolbar).is('.nw') || $(toolbar).is('.sw')) {
  149. $(document.body).animate({marginLeft:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  150. }
  151. else {
  152. $(document.body).animate({marginRight:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  153. }
  154. this.setOverlayState(toolbar, true, false);
  155. }
  156. else {
  157. $('div.admin-blocks', toolbar).animate({height:size}, 'fast');
  158. if ($(toolbar).is('.nw') || $(toolbar).is('.ne')) {
  159. $(document.body).animate({marginTop:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  160. }
  161. else {
  162. $(document.body).animate({marginBottom:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  163. }
  164. this.setOverlayState(toolbar, false, false);
  165. }
  166. this.setState('expanded', 0);
  167. }
  168. else {
  169. size = this.SIZE + 'px';
  170. if ($(toolbar).is('.vertical')) {
  171. $('div.admin-blocks', toolbar).animate({width:size}, 'fast');
  172. if ($(toolbar).is('.nw') || $(toolbar).is('.sw')) {
  173. $(document.body).animate({marginLeft:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  174. }
  175. else {
  176. $(document.body).animate({marginRight:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  177. }
  178. this.setOverlayState(toolbar, true, true);
  179. }
  180. else {
  181. $('div.admin-blocks', toolbar).animate({height:size}, 'fast');
  182. if ($(toolbar).is('.nw') || $(toolbar).is('.ne')) {
  183. $(document.body).animate({marginTop:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  184. }
  185. else {
  186. $(document.body).animate({marginBottom:size}, 'fast', function() { $(this).toggleClass('admin-expanded'); });
  187. }
  188. this.setOverlayState(toolbar, false, true);
  189. }
  190. if ($(document.body).hasClass('admin-ah')) {
  191. this.setState('expanded', 0);
  192. }
  193. else {
  194. this.setState('expanded', 1);
  195. }
  196. }
  197. };
  198. /**
  199. * Get the value of a cookie variable.
  200. */
  201. Drupal.adminToolbar.getState = function(key) {
  202. if (!Drupal.adminToolbar.state) {
  203. Drupal.adminToolbar.state = {};
  204. var cookie = $.cookie('DrupalAdminToolbar');
  205. var query = cookie ? cookie.split('&') : [];
  206. if (query) {
  207. for (var i in query) {
  208. // Extra check to avoid js errors in Chrome, IE and Safari when
  209. // combined with JS like twitter's widget.js.
  210. // See http://drupal.org/node/798764.
  211. if (typeof(query[i]) == 'string' && query[i].indexOf('=') != -1) {
  212. var values = query[i].split('=');
  213. if (values.length === 2) {
  214. Drupal.adminToolbar.state[values[0]] = values[1];
  215. }
  216. }
  217. }
  218. }
  219. }
  220. return Drupal.adminToolbar.state[key] ? Drupal.adminToolbar.state[key] : false;
  221. };
  222. /**
  223. * Set the value of a cookie variable.
  224. */
  225. Drupal.adminToolbar.setState = function(key, value) {
  226. var existing = Drupal.adminToolbar.getState(key);
  227. if (existing != value) {
  228. Drupal.adminToolbar.state[key] = value;
  229. var query = [];
  230. for (var i in Drupal.adminToolbar.state) {
  231. query.push(i + '=' + Drupal.adminToolbar.state[i]);
  232. }
  233. $.cookie('DrupalAdminToolbar', query.join('&'), {expires: 7, path: '/'});
  234. }
  235. };
  236. })(jQuery);