diff --git a/core/modules/toolbar/toolbar.js b/core/modules/toolbar/toolbar.js index d345284..0d2cdc9 100644 --- a/core/modules/toolbar/toolbar.js +++ b/core/modules/toolbar/toolbar.js @@ -1,23 +1,39 @@ -(function ($) { +(function () { Drupal.toolbar = Drupal.toolbar || {}; +var + toolbar, + toggleLink, + toggleDrawer, + body; + /** * Attach toggling behavior and notify the overlay of the toolbar. */ Drupal.behaviors.toolbar = { attach: function(context) { - var $context = $(context); // Set the initial state of the toolbar. - $context.find('#toolbar').once('toolbar', Drupal.toolbar.init); + // ID, don't need to scope. We don't support broken code right? + toolbar = document.querySelector('#toolbar'); + toggleLink = document.querySelector('#toolbar a.toggle'); + toggleDrawer = document.querySelector('#toolbar div.toolbar-drawer'); + body = document.body; + + if (!toolbar.classList.contains('toolbar-processed')) { + Drupal.toolbar.init(); + } // Toggling toolbar drawer. - $context.find('#toolbar a.toggle').once('toolbar-toggle').click(function(e) { - Drupal.toolbar.toggle(); - // Allow resize event handlers to recalculate sizes/positions. - $(window).triggerHandler('resize'); - return false; - }); + if (!toggleLink.classList.contains('toolbar-toggle-processed')) { + toggleLink.classList.add('toolbar-toggle-processed'); + // needs a wrapper. + toggleLink.addEventListener('click', function (e) { + e.preventDefault(); + Drupal.toolbar.toggle(); + // use event lib to trigger: window.resizeTo(); + }, true); + } } }; @@ -26,7 +42,7 @@ Drupal.behaviors.toolbar = { */ Drupal.toolbar.init = function() { // Retrieve the collapsed status from a stored cookie. - var collapsed = $.cookie('Drupal.toolbar.collapsed'); + var collapsed = false;//getCookie('Drupal.toolbar.collapsed'); // Expand or collapse the toolbar based on the cookie value. if (collapsed == 1) { @@ -41,51 +57,34 @@ Drupal.toolbar.init = function() { * Collapse the toolbar. */ Drupal.toolbar.collapse = function() { - var toggle_text = Drupal.t('Show shortcuts'); - $('#toolbar div.toolbar-drawer').addClass('collapsed'); - $('#toolbar a.toggle') - .removeClass('toggle-active') - .attr('title', toggle_text) - .html(toggle_text); - $('body').removeClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height()); - $.cookie( - 'Drupal.toolbar.collapsed', - 1, - { - path: Drupal.settings.basePath, - // The cookie should "never" expire. - expires: 36500 - } - ); + toolbarState(Drupal.t('Show shortcuts')); }; /** * Expand the toolbar. */ Drupal.toolbar.expand = function() { - var toggle_text = Drupal.t('Hide shortcuts'); - $('#toolbar div.toolbar-drawer').removeClass('collapsed'); - $('#toolbar a.toggle') - .addClass('toggle-active') - .attr('title', toggle_text) - .html(toggle_text); - $('body').addClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height()); - $.cookie( - 'Drupal.toolbar.collapsed', - 0, - { - path: Drupal.settings.basePath, - // The cookie should "never" expire. - expires: 36500 - } - ); + toolbarState(Drupal.t('Hide shortcuts'), true); }; +function toolbarState(toggle_text, expand) { + toggleDrawer.classList[expand ? 'remove' : 'add']('collapsed'); + + toggleLink.classList.add('toggle-active'); + toggleLink.title = toggle_text; + toggleLink.removeChild(toggleLink.firstChild); + toggleLink.appendChild(document.createTextNode(toggle_text)); + + body.classList[expand ? 'add' : 'remove']('toolbar-drawer'); + body.style.paddingTop = Drupal.toolbar.height() + 'px'; + // setCookie('Drupal.toolbar.collapsed', (expand ? 0 : 1), {path: Drupal.settings.basePath, expires: 36500 }); +} + /** * Toggle the toolbar. */ Drupal.toolbar.toggle = function() { - if ($('#toolbar div.toolbar-drawer').hasClass('collapsed')) { + if (toggleDrawer.classList.contains('collapsed')) { Drupal.toolbar.expand(); } else { @@ -94,18 +93,21 @@ Drupal.toolbar.toggle = function() { }; Drupal.toolbar.height = function() { - var $toolbar = $('#toolbar'); - var height = $toolbar.outerHeight(); - // In modern browsers (including IE9), when box-shadow is defined, use the - // normal height. - var cssBoxShadowValue = $toolbar.css('box-shadow'); - var boxShadow = (typeof cssBoxShadowValue !== 'undefined' && cssBoxShadowValue !== 'none'); - // In IE8 and below, we use the shadow filter to apply box-shadow styles to - // the toolbar. It adds some extra height that we need to remove. - if (!boxShadow && /DXImageTransform\.Microsoft\.Shadow/.test($toolbar.css('filter'))) { - height -= $toolbar[0].filters.item("DXImageTransform.Microsoft.Shadow").strength; + // This ugly condition is needed because tableheader screw things up. There is a patch waiting for review: #1417378. + if (toolbar) { + var height = toolbar.offsetHeight; + // In modern browsers (including IE9), when box-shadow is defined, use the + // normal height. + var cssBoxShadowValue = toolbar.style['boxShadow']; + var boxShadow = (typeof cssBoxShadowValue !== 'undefined' && cssBoxShadowValue !== 'none'); + // In IE8 and below, we use the shadow filter to apply box-shadow styles to + // the toolbar. It adds some extra height that we need to remove. + if (!boxShadow && /DXImageTransform\.Microsoft\.Shadow/.test(toolbar.style.filter)) { + height -= +toolbar.filters.item("DXImageTransform.Microsoft.Shadow").strength; + } + return height; } - return height; + return 0; }; -})(jQuery); +}());