diff --git a/core/misc/tableheader.js b/core/misc/tableheader.js index 0d4f7cd..3ae33c2 100644 --- a/core/misc/tableheader.js +++ b/core/misc/tableheader.js @@ -130,6 +130,7 @@ $.extend(TableHeader, { /** * Sum all [data-offset-top] values and cache it. + * @todo move this out of tableheader.js into a move generic place like drupal.js. */ computeOffsetTop: function () { var $offsets = $('[data-offset-top]'); diff --git a/core/modules/toolbar/css/interactivemenu-rtl.css b/core/modules/toolbar/css/interactivemenu-rtl.css new file mode 100644 index 0000000..e69de29 diff --git a/core/modules/toolbar/css/interactivemenu.css b/core/modules/toolbar/css/interactivemenu.css new file mode 100644 index 0000000..118aae5 --- /dev/null +++ b/core/modules/toolbar/css/interactivemenu.css @@ -0,0 +1,46 @@ +/** + * Toolbar menus. + */ +.toolbar-main .menu { + list-style: none; + margin: 0; + padding: 0; +} +.toolbar-main .box { + display: block; + line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */ + position: relative; + width: auto; +} +.toolbar-main .tray .interactive-menu li { + display: block; +} +.toolbar-main .horizontal .interactive-menu .handle, +.toolbar-main .horizontal .level-1 ul, +.toolbar-main .vertical .level-1 ul { + display: none; +} +.toolbar-main .vertical .open > ul { /* Show the sub-menus */ + display: block; +} +.toolbar-main .interactive-menu a { + display: block; + line-height: 1; + overflow: hidden; +} +.toolbar-main .tray .interactive-menu li a, +.toolbar-main .toolbar-list a { + display: block; +} +.toolbar-main .handle { + float: right; +} +.toolbar-main .handle:hover { + cursor: pointer; +} +.toolbar-main .horizontal .toolbar-list li { + float: left; +} +.toolbar-main .horizontal .toolbar-list li + li { + margin-left: 0.5em; /* LTR */ +} diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css index d2511ff..46ba0c3 100644 --- a/core/modules/toolbar/css/toolbar.base.css +++ b/core/modules/toolbar/css/toolbar.base.css @@ -65,31 +65,32 @@ body.toolbar-tray-open { */ .toolbar-main .tray { display: none; - overflow-x: hidden; - overflow-y: auto; + position: absolute; width: 100%; z-index: 250; } -.toolbar-main .tray.vertical { +.toolbar-main .vertical { bottom: 0; - height: 100%; left: -100%; position: absolute; } -.toolbar-main .tray.horizontal { +.toolbar-main .horizontal { left: 0; /* LTR */ height: 0; - position: absolute; z-index: 750; } .toolar-main .tray .lining { position: relative; } -.toolbar-main .tray.vertical > .slider { +.toolbar-main .vertical > .lining { left: -100%; /* LTR */ + min-height: 100%; position: absolute; width: 100%; } +.toolbar-main .vertical > .lining > .edge { + display: none; +} .toolbar-main .tray.active { display: block; } @@ -97,20 +98,28 @@ body.toolbar-tray-open { height: auto; } .toolbar-main .tray.vertical.active, -.toolbar-main .tray.vertical.active > .slider { +.toolbar-main .tray.vertical.active > .lining { left: 0; /* LTR */ } @media screen and (min-width: 16.5em) { - .toolbar-main .tray.vertical { - bottom: 0; - position: absolute; + .toolbar-main .tray.vertical, + .toolbar-main .vertical > .lining > .edge { width: 240px; width: 15rem; } + .toolbar-main .vertical.active > .lining > .edge { + display: block; + height: 100%; + left: 1px; + /* Support for devices that do not support position fixed. */ + position: absolute; + position: fixed; + top: 0; + z-index: -1; + } } @media screen and (min-width: 28.125em) { - .toolbar-main .tray.horizontal, - .toolbar-main .tray.vertical { + .toolbar-main .tray.horizontal { position: fixed; } } @@ -125,70 +134,12 @@ body.toolbar-tray-open { } } /** - * Toolbar menus. - */ -.toolbar-main .menu { - list-style: none; - margin: 0; - padding: 0; -} -.toolbar-main .interactive-menu { - height: 100%; -} -.toolbar-main .interactive-menu-offset { - height: 100%; - position: relative; -} -.toolbar-main .box { - display: block; - line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */ - position: relative; - width: auto; -} -.toolbar-main .dormant { - display: none; -} -.toolbar-main .trail > ul { /* Show the sub-menus */ - display: block; -} -.toolbar-main .active > ul { - z-index: 51; /* Pull the active trail li's above the other li's */ -} -.toolbar-main .tray .interactive-menu li { - display: block; -} -.toolbar-main .interactive-menu a { - display: block; - line-height: 1; - overflow: hidden; -} -.toolbar-main .tray .interactive-menu li a, -.toolbar-main .toolbar-list a { - display: block; -} -.toolbar-main .handle { - float: right; -} -.toolbar-main .handle:hover { - cursor: pointer; -} -.toolbar-main .horizontal .toolbar-list li { - float: left; -} -.toolbar-main .horizontal .toolbar-list li + li { - margin-left: 0.5em; /* LTR */ -} -.toolbar-main .horizontal .interactive-menu .handle, -.toolbar-main .horizontal .interactive-menu .level-2 { - display: none; -} -/** * ToolBar icons. */ .toolbar-main .bar .tab, .toolbar-main .bar .active .tab, .toolbar-main .bar .tab:active, -.toolbar-main .level-1 > li > .box > a { +.toolbar-main .level-1 > .box > a { background-attachment: scroll; background-color: transparent; background-image: none; diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css index 8ca753f..5a3fab3 100644 --- a/core/modules/toolbar/css/toolbar.icons.css +++ b/core/modules/toolbar/css/toolbar.icons.css @@ -6,7 +6,7 @@ .toolbar-main .bar .tab, .toolbar-main .bar .active .tab, .toolbar-main .bar .tab:active, - .toolbar-main .level-1 > li > .box > a { + .toolbar-main .level-1 > .box > a { background-size: 1.75em 1.75em; } .toolbar-main .bar .tab, @@ -16,12 +16,12 @@ text-indent: -9999px; /* LTR */ width: 3em; } - .toolbar-main .level-1 > li > .box > a { + .toolbar-main .level-1 > .box > a { background-position: 0.4545em center; padding-left: 2.5em; } - .toolbar-main .level-2 { - margin-left: 2.1667em; + .toolbar-main .level-1 > ul { + margin-left: 2.3333em; } /* ToolBar bar icons. */ .toolbar-main .bar .home .tab{ diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css index 3259bca..83b5c54 100644 --- a/core/modules/toolbar/css/toolbar.theme.css +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -50,10 +50,17 @@ /** * Toolbar tray. */ -.toolbar-main .tray { +.toolbar-main .tray > .lining { + background-color: #ffffff; +} +.toolbar-main .vertical > .lining > .edge { background-color: #ffffff; border-right: 1px solid #aaaaaa; - box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3333); + box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); +} +.toolbar-main .horizontal { + border-bottom: 1px solid #aaaaaa; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); } .toolbar-main .horizontal .tray { background-color: #f5f5f5; @@ -73,7 +80,7 @@ .toolbar-main .vertical .toolbar-list a { margin-right: 3.5em; } -.toolbar-main .vertical .level-1 > li + li, +.toolbar-main .vertical .level-1 + .level-1, .toolbar-main .vertical .toolbar-list > li + li, .toolbar-main .vertical .toolbar-list > .menu > li + li { border-top: 1px solid #dddddd; @@ -90,7 +97,7 @@ border-bottom-width: 1px; border-top-width: 1px; } -.toolbar-main .vertical .level-2 li:last-child > ul { +.toolbar-main .vertical .level-1 li:last-child > ul { border-bottom: 0; } .toolbar-main .level-2 a { @@ -102,70 +109,60 @@ font-weight: normal; } .toolbar-main .level-3 { - border-color: #cccccc; -} -.toolbar-main .level-3 li { padding-left: 0.1667em; } -.toolbar-main .level-3 > li { - background-color: #f5f5f5; -} .toolbar-main .level-3 a { color: #303030; } -.toolbar-main .level-4 { - border-color: #bbbbbb; -} -.toolbar-main .level-4 > li { - background-color: #e5e5e5; -} .toolbar-main .level-4 a { color: #2d2d2d; } -.toolbar-main .level-5 { - border-color: #aaaaaa; -} -.toolbar-main .level-5 > li { - background-color: #d5d5d5; -} .toolbar-main .level-5 a { color: #2a2a2a; } -.toolbar-main .level-6 { - background-color: #c5c5c5; -} -.toolbar-main .level-6 > li{ - border-color: #888888; -} .toolbar-main .level-6 a { color: #272727; } -.toolbar-main .level-7 { - background-color: #d5d5d5; +.toolbar-main .level-7 a { + color: #2a2a2a; } -.toolbar-main .level-7 > li { - border-color: #777777; +.toolbar-main .level-8 a { + color: #2d2d2d; } -.toolbar-main .level-7 a { - color: #242424; +.toolbar-main .level-9 a { + color: #303030; } -.toolbar-main .level-8 { +.toolbar-main .level-2 > ul { + background-color: #f5f5f5; + border-color: #cccccc; +} +.toolbar-main .level-3 > ul { background-color: #e5e5e5; + border-color: #bbbbbb; +} +.toolbar-main .level-4 > ul { + background-color: #d5d5d5; + border-color: #aaaaaa; } -.toolbar-main .level-8 > li { - border-color: #666666; +.toolbar-main .level-5 > ul { + background-color: #c5c5c5; + border-color: #999999; } -.toolbar-main .level-8 a { - color: #212121; +.toolbar-main .level-6 > ul { + background-color: #b5b5b5; + border-color: #888888; } -.toolbar-main .level-9 { - background-color: #f5f5f5; +.toolbar-main .level-7 > ul { + background-color: #c5c5c5; + border-color: #999999; } -.toolbar-main .level-9 > li { - border-color: #555555; +.toolbar-main .level-8 > ul { + background-color: #d5d5d5; + border-color: #aaaaaa; } -.toolbar-main .level-9 a { - color: #1e1e1e; +.toolbar-main .level-9 > ul { + background-color: #e5e5e5; + border-color: #bbbbbb; } /** * ToolBar tray - horizontal. diff --git a/core/modules/toolbar/js/interactivemenu.js b/core/modules/toolbar/js/interactivemenu.js index 7b5376c..2b2c31c 100644 --- a/core/modules/toolbar/js/interactivemenu.js +++ b/core/modules/toolbar/js/interactivemenu.js @@ -4,61 +4,61 @@ (function ($) { +/** + * Store the open menu tray. + */ +var openItem = JSON.parse(localStorage.getItem('Drupal.interactivemenu.openItem')); + $.fn.interactiveMenu = function () { var ui = { 'handleOpen': Drupal.t('Open'), 'handleClose': Drupal.t('Close') }; - - var toggleList = function (event) { - // The toggle. + /** + * + */ + var toggleClickHandler = function (event) { var $toggle = $(event.target); var $item = $toggle.closest('li'); - var $list = $item.children('ul'); - var isHidden = $list.hasClass('dormant'); - // Close open siblings. - $item.siblings().filter('.open').find('.handle').trigger('click'); + // Toggle the list item. + toggleList($item); + // Close open siblings and their open children. + var $openItems = $item.siblings().filter('.open'); + $openItems = $openItems.add($openItems.find('.open')); + toggleList($openItems, false); + // Save link of the closest open item through a unique selector. + var href = $toggle.siblings('a[href]').attr('href'); + if (href) { + localStorage.setItem('Drupal.interactivemenu.openItem', JSON.stringify(href)); + } + else { + localStorage.removeItem('Drupal.interactivemenu.openItem'); + } + }; + /** + * + */ + var toggleList = function ($item, switcher) { + var $toggle = $item.children('.box').children('.handle'); + switcher = (switcher !== undefined) ? switcher : ($item.hasClass('open')) ? false : true; // Toggle the item open state. - $item - [((isHidden) ? 'add' : 'remove') + 'Class']('open'); - // Toggle the item list visibility. - $list - [((isHidden) ? 'remove' : 'add') + 'Class']('dormant'); + $item.toggleClass('open', switcher); // Twist the toggle. - $toggle - [((isHidden) ? 'add' : 'remove') + 'Class']('open'); + $toggle.toggleClass('open', switcher) // Adjust the toggle text. $toggle - .text((isHidden) ? ui.handleClose : ui.handleOpen) - .attr('aria-pressed', isHidden); + .text((switcher) ? ui.handleOpen : ui.handleClose) + .attr('aria-pressed', switcher); }; /** * */ - var initItems = function ($list) { + var initItems = function ($menu) { var boxClass = 'box'; var handleClass = 'handle'; - // Get lists and items. - var $ul = $list.find('ul').andSelf(); - var $li = $list.find('li'); - // Basic setup - $ul - .each(function (index, element) { - $(this).data('toolbar', { - processed: false, - type: 'list', - level: NaN - }); - }); // Initialize items and their links. - $li - .each(function (index, element) { - $(this).data('toolbar', { - processed: false, - type: 'item' - }); - }) + $menu.find('li') // Add a class to item links. .children('a') .wrap( @@ -86,47 +86,43 @@ */ var markListLevels = function ($lists, level) { level = (!level) ? 1 : level; - $lists - .addClass('level-' + level) - .each(function (index, element) { - $(this).data().toolbar.level = level; - }); + $lists.children('li').addClass('level-' + level); $lists = $lists.children('li').children('ul'); if ($lists.length > 0) { markListLevels($lists, (level + 1)); } }; - var setLevelVisibility = function ($lists, visibleAfter) { - var level; - $lists - .each(function (index, element) { - var $this = $(this); - level = $(this).data().toolbar.level; - if (level > visibleAfter) { - $this.addClass('dormant'); - } - else { - $this.addClass('visible'); - } - }); - $lists = $lists.children('li').children('ul'); - if ($lists.length > 0) { - setLevelVisibility($lists, visibleAfter); + /** + * + */ + var traceActiveTrail = function ($menu) { + $menu.find('a.active').parentsUntil('.root', 'li').addClass('active-trail'); + }; + /** + * + */ + var openActiveItem = function ($menu) { + var $activeItem = $menu.find('a.active'); + if ($activeItem.attr('href') === location.pathname) { + toggleList($('a[href="' + location.pathname + '"]', $menu).parentsUntil('.root', 'li'),true); + localStorage.setItem('Drupal.interactivemenu.openItem', JSON.stringify(location.pathname)); + } + else if (openItem) { + toggleList($('a[href="' + openItem + '"]', $menu).parentsUntil('.root', 'li'),true); } }; return this.each(function (selector) { - var $menu = $(this).once('decorate-menu'); + var $menu = $(this).once('interactivemenu'); if ($menu.length) { $menu.addClass('root'); initItems($menu); markListLevels($menu); - setLevelVisibility($menu, 1); - // Wrap the list in a div to provide a positioning context. - $menu - .wrap('
') - .parent() // Bind event handlers. - .on('click.interactivemenu', '.handle', toggleList); + $(document) + .on('click.interactivemenu', '.handle', toggleClickHandler); + // Restore previous and active states. + traceActiveTrail($menu); + openActiveItem($menu); } }); }; diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index dc044a1..212c225 100755 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -41,10 +41,6 @@ Drupal.behaviors.toolbar = { $tray .find('.lining') .append(Drupal.theme('toolbarOrientationToggle')); - // Ensure the orientation toggle agrees with the current tray orientation. - toggleOrientationToggle($tray, 'vertical'); - // Adjust the body to accomodate trays. - setBodyState(); // Set up switching between the vertical and horizontal presentation // of the toolbar trays based on a breakpoint. @@ -67,7 +63,7 @@ Drupal.behaviors.toolbar = { .on('click.toolbar', '#toolbar .bar .tab', Drupal.toolbar.toggleTray) .on('click.toolbar', '#toolbar .tray .toggle-orientation button', Drupal.toolbar.orientationChangeHandler); // Decorate the main menu with an interactive menu. - $('.interactive-menu > .menu', $toolbar).interactiveMenu(); + $('.administration.tray .interactive-menu > .menu', $toolbar).interactiveMenu(); // Restore the toolbar to its saved state. restoreState(); } @@ -99,7 +95,9 @@ Drupal.toolbar.toggleTray = function (event) { // Disable non-selected tabs and trays. $('.bar .tab', $toolbar).not($tab).parent().removeClass('active'); $('.tray', $toolbar).not($activateTray).removeClass('active'); + // Adjust the body to accomodate trays. setBodyState(); + // Adjust the height of the toolbar. Drupal.toolbar.setHeight(); } }; @@ -129,9 +127,6 @@ Drupal.toolbar.setHeight = function (event) { // Get the height of the active horizontal tray and include it in the total // height of the toolbar. height += $trays.filter('.active.horizontal').height('auto').outerHeight() || 0; - // Set the height of the vertical tray to the scrollHeight of the - // documentElement. - $trays.filter('.active.vertical').height(document.documentElement.scrollHeight); // Indicate the height of the toolbar in the attribute data-offset-top. var offset = $toolbar.attr('data-offset-top'); if (offset !== height) { @@ -148,7 +143,9 @@ Drupal.toolbar.setHeight = function (event) { Drupal.toolbar.mediaQueryChangeHandler = function (mql) { var orientation = (mql.matches) ? 'horizontal' : 'vertical'; changeOrientation($('.tray', '#toolbar'), orientation); + // Adjust the body to accomodate trays. setBodyState(); + // Adjust the height of the toolbar. Drupal.toolbar.setHeight(); }; /** @@ -161,26 +158,33 @@ Drupal.toolbar.orientationChangeHandler = function (event) { var orientation = event.target.value; var $tray = $button.closest('.tray'); changeOrientation($tray, orientation, true); + // Adjust the body to accomodate trays. setBodyState(); + // Adjust the height of the toolbar. Drupal.toolbar.setHeight(); }; /** * */ var restoreState = function () { + var $toolbar = $('#toolbar'); // Restore the open tab. if (activeTab) { - $('[data-toolbar-tray="' + activeTab + '"].tab', '#toolbar').trigger('click.toolbar'); + $('[data-toolbar-tray="' + activeTab + '"].tab', $toolbar).trigger('click.toolbar'); } // Restore tray orientations. if (trayOrientations.length) { - var $trays = $('.tray', '#toolbar'); + var $trays = $('.tray', $toolbar); var $tray; for (var i = trayOrientations.length - 1; i >= 0; i--) { $tray = $trays.filter('[data-toolbar-tray="' + trayOrientations[i].tray + '"]'); changeOrientation($tray, trayOrientations[i].orientation, true); } } + // Adjust the body to accomodate trays. + setBodyState(); + // Adjust the height of the toolbar. + Drupal.toolbar.setHeight(); }; /** * @@ -244,12 +248,17 @@ var setBodyState = function () { /** * Change the orientation toggle active state. */ -var toggleOrientationToggle = function ($tray, orientation) { - $tray - .find('[value="' + orientation + '"]') - .removeClass('active') - .siblings() - .addClass('active'); +var toggleOrientationToggle = function ($trays) { + $trays = ($trays.length) ? $trays : $('.tray', '#toolbar'); + for (var i = $trays.length - 1; i >= 0; i--) { + var $tray = $($trays[i]); + var orientation = $tray.attr('data-toolbar-orientation'); + $tray + .find('[value="' + orientation + '"]') + .removeClass('active') + .siblings() + .addClass('active'); + } } /** diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module index 5493364..5c7ec61 100755 --- a/core/modules/toolbar/toolbar.module +++ b/core/modules/toolbar/toolbar.module @@ -307,7 +307,7 @@ function theme_toolbar_tray($trays) { $output = ''; foreach ($trays['element']['#trays'] as $key => $tray) { - $output .= '