Commit f6ac79e2 authored by alexpott's avatar alexpott

Issue #1860434 by jessebeach, Mark Carver, Wim Leers, droplet: Refactor the...

Issue #1860434 by jessebeach, Mark Carver, Wim Leers, droplet: Refactor the Toolbar JavaScript to use Backbone; fix several poorly functioning behaviors.
parent b6c78d35
......@@ -28,7 +28,6 @@ function contextual_toolbar() {
}
$tab['contextual'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'#type' => 'html_tag',
'#tag' => 'button',
......@@ -39,6 +38,7 @@ function contextual_toolbar() {
'aria-pressed' => 'false',
),
),
'#theme_wrappers' => array('toolbar_tab_wrapper'),
'#wrapper_attributes' => array(
'class' => array('hidden', 'contextual-toolbar-tab'),
),
......
breakpoints:
- module.toolbar.narrow
- module.toolbar.standard
- module.toolbar.wide
......@@ -55,7 +55,7 @@
* is active. The toolbar container, that contains the bar and the trays, is
* position absolutely so that it scrolls with the page. Otherwise, on smaller
* screens, the components of the admin toolbar are positioned statically. */
body.toolbar-paneled .toolbar-oriented,
body.toolbar-fixed .toolbar-oriented,
.toolbar-oriented .toolbar-bar,
.toolbar-oriented .toolbar-tray {
left: 0;
......@@ -69,13 +69,13 @@ body.toolbar-paneled .toolbar-oriented,
}
/* Position the admin toolbar fixed when the configured standard breakpoint is
* active. */
body.toolbar-paneled .toolbar-oriented .toolbar-bar {
body.toolbar-fixed .toolbar-oriented .toolbar-bar {
position: fixed;
}
/* When the configured narrow breakpoint is active, the toolbar is sized to wrap
* around the trays in order to provide a context for scrolling tray content
* that is taller than the viewport. */
body.toolbar-tray-open.toolbar-paneled.toolbar-vertical .toolbar-oriented {
body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
bottom: 0;
width: 240px;
width: 15rem;
......@@ -175,13 +175,13 @@ body.toolbar-tray-open.toolbar-paneled.toolbar-vertical .toolbar-oriented {
/* When the configured standard breakpoint is active and the tray is in a
* horizontal position, the tray is fixed to the top of the viewport and does
* not scroll with the page contents. */
body.toolbar-paneled .toolbar .toolbar-tray-horizontal {
body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
position: fixed;
}
/* When the configured standard breakpoint is active and the tray is in a
* vertical position, the tray does not scroll with the page. The contents of
* the tray scroll within the confines of the viewport. */
body.toolbar-paneled .toolbar .toolbar-tray-vertical {
body.toolbar-fixed .toolbar .toolbar-tray-vertical {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
......@@ -200,11 +200,11 @@ body.toolbar-paneled .toolbar .toolbar-tray-vertical {
}
/* When the configured standard breakpoint is active, the tray appears to push
* the page content away from the edge of the viewport. */
body.toolbar-vertical.toolbar-paneled {
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
margin-left: 240px; /* LTR */
margin-left: 15rem; /* LTR */
}
[dir="rtl"] body.toolbar-vertical.toolbar-paneled {
[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
margin-left: auto;
margin-left: auto;
margin-right: 240px;
......
This diff is collapsed.
......@@ -2,19 +2,19 @@
* Builds a nested accordion widget.
*
* Invoke on an HTML list element with the jQuery plugin pattern.
* - For example, $('.menu').toolbarMenu();
* - For example, $('.menu').drupalToolbarMenu();
*/
(function ($, Drupal) {
(function ($, Drupal, drupalSettings) {
"use strict";
/**
* Store the open menu tray.
*/
var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
var activeItem = drupalSettings.basePath + Drupal.encodePath(drupalSettings.currentPath);
$.fn.toolbarMenu = function () {
$.fn.drupalToolbarMenu = function () {
var ui = {
'handleOpen': Drupal.t('Extend'),
......@@ -46,7 +46,7 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
* simply toggling its presence.
*/
function toggleList ($item, switcher) {
var $toggle = $item.find('> .toolbar-box > .toolbar-handle');
var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
// Toggle the item open state.
$item.toggleClass('open', switcher);
......@@ -80,7 +80,7 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
// Add a handle to each list item if it has a menu.
$menu.find('li').each(function (index, element) {
var $item = $(element);
if ($item.find('> ul.menu').length) {
if ($item.children('ul.menu').length) {
var $box = $item.children('.toolbar-box');
options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
$item.children('.toolbar-box')
......@@ -102,8 +102,8 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
*/
function markListLevels ($lists, level) {
level = (!level) ? 1 : level;
var $lis = $lists.find('> li').addClass('level-' + level);
$lists = $lis.find('> ul');
var $lis = $lists.children('li').addClass('level-' + level);
$lists = $lis.children('ul');
if ($lists.length) {
markListLevels($lists, level + 1);
}
......@@ -154,4 +154,4 @@ var activeItem = drupalSettings.basePath + drupalSettings.currentPath;
return '<button class="' + options['class'] + '"><span class="action">' + options.action + '</span><span class="label">' + options.text + '</span></button>';
};
}(jQuery, Drupal));
}(jQuery, Drupal, drupalSettings));
......@@ -23,7 +23,7 @@ public function subtreesJsonp() {
_toolbar_initialize_page_cache();
$subtrees = toolbar_get_rendered_subtrees();
$response = new JsonResponse($subtrees);
$response->setCallback('Drupal.toolbar.setSubtrees');
$response->setCallback('Drupal.toolbar.setSubtrees.resolve');
return $response;
}
......
......@@ -25,6 +25,7 @@ function toolbar_test_toolbar() {
),
),
'tray' => array(
'#heading' => t('Test tray'),
'#wrapper_attributes' => array(
'id' => 'toolbar-tray-testing',
),
......@@ -35,7 +36,6 @@ function toolbar_test_toolbar() {
l(t('link 2'), '<front>', array('attributes' => array('title' => 'Test link 2 title'))),
l(t('link 3'), '<front>', array('attributes' => array('title' => 'Test link 3 title'))),
),
'#prefix' => '<h2 class="visually-hidden">' . t('Test tray') . '</h2>',
'#attributes' => array(
'class' => array('menu'),
),
......
......@@ -80,8 +80,6 @@ function toolbar_element_info() {
// The id cannot be simply "toolbar" or it will clash with the simpletest
// tests listing which produces a checkbox with attribute id="toolbar"
'id' => 'toolbar-administration',
// The 'overlay-displace-top' class pushes the overlay down, so it appears
// below the toolbar.
'class' => array('toolbar',),
'role' => 'navigation',
),
......@@ -251,22 +249,24 @@ function theme_toolbar(&$variables) {
* A renderable array.
*/
function toolbar_pre_render_item($element) {
// Assign each item a unique ID.
$id = drupal_html_id('toolbar-item');
// Provide attributes for a toolbar item.
$attributes = array(
'id' => $id,
);
// If tray content is present, markup the tray and its associated trigger.
if (!empty($element['tray'])) {
// Trays are associated with their trigger by a unique ID.
$id = drupal_html_id('toolbar-tray');
$element['tab']['#tray_id'] = $id;
// Provide attributes for a tray trigger.
$attributes = array(
'id' => 'toolbar-tab-' . $id,
'data-toolbar-tray' => $id,
// Provide attributes necessary for trays.
$attributes += array(
'data-toolbar-tray' => $id . '-tray',
'aria-owns' => $id,
'role' => 'button',
'aria-pressed' => 'false',
);
// Merge in module-provided attributes.
$element['tab'] += array('#attributes' => array());
$element['tab']['#attributes'] += $attributes;
......@@ -274,9 +274,9 @@ function toolbar_pre_render_item($element) {
// Provide attributes for the tray theme wrapper.
$attributes = array(
'id' => $id,
'data-toolbar-tray' => $id,
'aria-owned-by' => 'toolbar-tab-' . $id,
'id' => $id . '-tray',
'data-toolbar-tray' => $id . '-tray',
'aria-owned-by' => $id,
);
// Merge in module-provided attributes.
if (!isset($element['tray']['#wrapper_attributes'])) {
......@@ -290,11 +290,8 @@ function toolbar_pre_render_item($element) {
}
// Add the standard theme_wrapper for trays.
array_unshift($element['tray']['#theme_wrappers'], 'toolbar_tray_wrapper');
// If a #heading is provided for the tray, provided a #theme_wrapper
// function to append it.
if (!empty($element['tray']['#heading'])) {
array_unshift($element['tray']['#theme_wrappers'], 'toolbar_tray_heading_wrapper');
}
// Add the theme wrapper for the tray heading.
array_unshift($element['tray']['#theme_wrappers'], 'toolbar_tray_heading_wrapper');
}
return $element;
......@@ -373,9 +370,13 @@ function theme_toolbar_tray_wrapper(&$variables) {
* the tray. Properties used: #children and #heading.
*/
function theme_toolbar_tray_heading_wrapper(&$variables) {
if (!empty($variables['element']['#children'])) {
$element = $variables['element'];
return '<h3 class="visually-hidden">' . $element['#heading'] . '</h3>' . $element['#children'];
$element = $variables['element'];
if (!empty($element['#children'])) {
$heading = '';
if (!empty($element['#heading'])) {
$heading = '<h3 class="toolbar-tray-name visually-hidden">' . $element['#heading'] . '</h3>';
}
return $heading . $element['#children'];
}
}
......@@ -597,9 +598,9 @@ function toolbar_library_info() {
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'backbone'),
array('system', 'matchmedia'),
array('system', 'jquery.once'),
array('system', 'drupal.debounce'),
array('system', 'drupal.displace'),
array('toolbar', 'toolbar.menu'),
),
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment