diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.js index b5a9053..4b39c8c 100644 --- a/core/modules/contextual/js/contextual.toolbar.js +++ b/core/modules/contextual/js/contextual.toolbar.js @@ -35,7 +35,7 @@ }); var viewOptions = { - el: $('.toolbar .toolbar-bar .contextual-toolbar-tab'), + el: $('.js-toolbar .js-toolbar-bar .js-contextual-toolbar-tab'), model: model, strings: strings }; diff --git a/core/modules/contextual/js/toolbar/views/AuralView.js b/core/modules/contextual/js/toolbar/views/AuralView.js index d684ffb..12c872c 100644 --- a/core/modules/contextual/js/toolbar/views/AuralView.js +++ b/core/modules/contextual/js/toolbar/views/AuralView.js @@ -60,7 +60,7 @@ } // Create a new tabbing context when edit mode is enabled. if (!this.model.get('isViewing')) { - tabbingContext = Drupal.tabbingManager.constrain($('.contextual-toolbar-tab, .contextual')); + tabbingContext = Drupal.tabbingManager.constrain($('.js-contextual-toolbar-tab, .contextual')); this.model.set('tabbingContext', tabbingContext); this.announceTabbingConstraint(); this.announcedOnce = true; diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js index 6e8f992..2c0c7fe 100644 --- a/core/modules/toolbar/js/escapeAdmin.js +++ b/core/modules/toolbar/js/escapeAdmin.js @@ -40,7 +40,7 @@ else { $toolbarEscape.text(Drupal.t('Home')); } - $toolbarEscape.closest('.toolbar-tab').removeClass('hidden'); + $toolbarEscape.closest('.js-toolbar-tab').removeClass('hidden'); } } }; diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index 8accad9..0d9fe85 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -72,7 +72,7 @@ // Render collapsible menus. var menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel(); Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({ - el: $(this).find('.toolbar-menu-administration').get(0), + el: $(this).find('.js-toolbar-menu-administration').get(0), model: menuModel, strings: options.strings }); @@ -134,7 +134,7 @@ // not the first 'Home' toolbar tab). if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) { Drupal.toolbar.models.toolbarModel.set({ - activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0) + 'activeTab': $('.js-toolbar-bar .js-toolbar-tab:not(.js-home-toolbar-tab) a').get(0) }); } }); @@ -235,7 +235,7 @@ * A string representing a DOM fragment. */ Drupal.theme.toolbarOrientationToggle = function () { - return '
' + + return '
' + '' + '
'; }; diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js index 0ca25a9..9c6acb8 100644 --- a/core/modules/toolbar/js/toolbar.menu.js +++ b/core/modules/toolbar/js/toolbar.menu.js @@ -55,7 +55,7 @@ if (!Drupal.toolbar.models.toolbarModel.get('isFixed')) { Drupal.toolbar.models.toolbarModel.set('activeTab', null); } - // Stopping propagation to make sure that once a toolbar-box is clicked + // Stopping propagation to make sure that once a js-toolbar-box is clicked // (the whitespace part), the page is not redirected anymore. event.stopPropagation(); } @@ -71,7 +71,7 @@ * simply toggling its presence. */ function toggleList($item, switcher) { - var $toggle = $item.children('.toolbar-box').children('.toolbar-handle'); + var $toggle = $item.children('.js-toolbar-box').children('.toolbar-handle'); switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open'); // Toggle the item open state. $item.toggleClass('open', switcher); @@ -89,7 +89,7 @@ * * Items with sub-elements have a list toggle attached to them. Menu item * links and the corresponding list toggle are wrapped with in a div - * classed with .toolbar-box. The .toolbar-box div provides a positioning + * classed with .toolbar-box. The .js-toolbar-box div provides a positioning * context for the item list toggle. * * @param {jQuery} $menu @@ -102,14 +102,14 @@ text: '' }; // Initialize items and their links. - $menu.find('li > a').wrap('
'); + $menu.find('li > a').wrap('
'); // Add a handle to each list item if it has a menu. $menu.find('li').each(function (index, element) { var $item = $(element); if ($item.children('ul.toolbar-menu').length) { - var $box = $item.children('.toolbar-box'); + var $box = $item.children('.js-toolbar-box'); options.text = Drupal.t('@label', {'@label': $box.find('a').text()}); - $item.children('.toolbar-box') + $item.children('.js-toolbar-box') .append(Drupal.theme('toolbarMenuItemToggle', options)); } }); diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js index f26c98c..5d45a3c 100644 --- a/core/modules/toolbar/js/views/ToolbarVisualView.js +++ b/core/modules/toolbar/js/views/ToolbarVisualView.js @@ -51,7 +51,7 @@ // Add the tray orientation toggles. this.$el - .find('.toolbar-tray .toolbar-lining') + .find('.js-toolbar-tray .js-toolbar-lining') .append(Drupal.theme('toolbarOrientationToggle')); // Trigger an activeTab change so that listening scripts can respond on @@ -171,7 +171,7 @@ localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id)); } // Activate the associated tray. - var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray'); + var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].js-toolbar-tray'); if ($tray.length) { $tray.addClass('is-active'); this.model.set('activeTray', $tray.get(0)); @@ -194,14 +194,14 @@ updateBarAttributes: function () { var isOriented = this.model.get('isOriented'); if (isOriented) { - this.$el.find('.toolbar-bar').attr('data-offset-top', ''); + this.$el.find('.js-toolbar-bar').attr('data-offset-top', ''); } else { - this.$el.find('.toolbar-bar').removeAttr('data-offset-top'); + this.$el.find('.js-toolbar-bar').removeAttr('data-offset-top'); } // Toggle between a basic vertical view and a more sophisticated // horizontal and vertical display of the toolbar bar and trays. - this.$el.toggleClass('toolbar-oriented', isOriented); + this.$el.toggleClass('js-toolbar-oriented', isOriented); }, /** @@ -213,14 +213,14 @@ // the tray orientation toggle. var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical'; // Update the orientation of the trays. - var $trays = this.$el.find('.toolbar-tray') + var $trays = this.$el.find('.js-toolbar-tray') .removeClass('toolbar-tray-horizontal toolbar-tray-vertical') .addClass('toolbar-tray-' + orientation); // Update the tray orientation toggle button. var iconClass = 'toolbar-icon-toggle-' + orientation; var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation; - var $orientationToggle = this.$el.find('.toolbar-toggle-orientation') + var $orientationToggle = this.$el.find('.js-toolbar-toggle-orientation') .toggle(this.model.get('isTrayToggleVisible')); $orientationToggle.find('button') .val(antiOrientation) @@ -244,7 +244,7 @@ * Sets the tops of the trays so that they align with the bottom of the bar. */ adjustPlacement: function () { - var $trays = this.$el.find('.toolbar-tray'); + var $trays = this.$el.find('.js-toolbar-tray'); if (!this.model.get('isOriented')) { $trays.css('margin-top', 0); $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical'); @@ -252,7 +252,7 @@ else { // The toolbar container is invisible. Its placement is used to // determine the container for the trays. - $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight()); + $trays.css('margin-top', this.$el.find('.js-toolbar-bar').outerHeight()); } }, diff --git a/core/modules/toolbar/src/Element/ToolbarItem.php b/core/modules/toolbar/src/Element/ToolbarItem.php index 79cbed2..2a5dcb0 100644 --- a/core/modules/toolbar/src/Element/ToolbarItem.php +++ b/core/modules/toolbar/src/Element/ToolbarItem.php @@ -76,7 +76,7 @@ public static function preRenderToolbarItem($element) { $element['tray']['#wrapper_attributes'] = []; } $element['tray']['#wrapper_attributes'] += $attributes; - $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray'; + $element['tray']['#wrapper_attributes']['class'][] = 'js-toolbar-tray'; } $element['tab']['#attributes']['class'][] = 'toolbar-item'; diff --git a/core/modules/toolbar/templates/toolbar.html.twig b/core/modules/toolbar/templates/toolbar.html.twig index cb82774..93b8992 100644 --- a/core/modules/toolbar/templates/toolbar.html.twig +++ b/core/modules/toolbar/templates/toolbar.html.twig @@ -22,20 +22,20 @@ * @ingroup themeable */ #} - - + + {% for key, tab in tabs %} {% set tray = trays[key] %} - + {{ tab.link }}
{{ tab.link }} {% spaceless %} {% if tray.label %} -