diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 6627118..29cf0e3 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1137,7 +1137,7 @@ function template_preprocess_feed_icon(&$variables) { function theme_indentation($variables) { $output = ''; for ($n = 0; $n < $variables['size']; $n++) { - $output .= '
 
'; + $output .= '
 
'; } return $output; } diff --git a/core/misc/tabledrag.js b/core/misc/tabledrag.js index 0795e30..9717354 100644 --- a/core/misc/tabledrag.js +++ b/core/misc/tabledrag.js @@ -95,7 +95,7 @@ var indent = Drupal.theme('tableDragIndentation'); var testRow = $('').addClass('draggable').appendTo(table); var testCell = $('').appendTo(testRow).prepend(indent).prepend(indent); - var $indentation = testCell.find('.indentation'); + var $indentation = testCell.find('.js-indentation'); this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft; testRow.remove(); } @@ -315,11 +315,11 @@ // Create the handle. var handle = $('
 
').attr('title', Drupal.t('Drag to re-order')); // Insert the handle after indentations (if any). - var $indentationLast = $item.find('td:first .indentation:last'); + var $indentationLast = $item.find('td:first .js-indentation:last'); if ($indentationLast.length) { $indentationLast.after(handle); // Update the total width of indentation in this entire table. - self.indentCount = Math.max($item.find('.indentation').length, self.indentCount); + self.indentCount = Math.max($item.find('.js-indentation').length, self.indentCount); } else { $item.find('td:first').prepend(handle); @@ -388,7 +388,7 @@ if ($(item).is('.tabledrag-root')) { // Swap with the previous top-level row. groupHeight = 0; - while (previousRow && $previousRow.find('.indentation').length) { + while (previousRow && $previousRow.find('.js-indentation').length) { $previousRow = $(previousRow).prev('tr').eq(0); previousRow = $previousRow.get(0); groupHeight += $previousRow.is(':hidden') ? 0 : previousRow.offsetHeight; @@ -770,7 +770,7 @@ sourceRow = changedRow; if ($previousRow.is('.draggable') && $previousRow.find('.' + group).length) { if (this.indentEnabled) { - if ($previousRow.find('.indentations').length === $changedRow.find('.indentations').length) { + if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) { sourceRow = previousRow; } } @@ -780,7 +780,7 @@ } else if ($nextRow.is('.draggable') && $nextRow.find('.' + group).length) { if (this.indentEnabled) { - if ($nextRow.find('.indentations').length === $changedRow.find('.indentations').length) { + if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) { sourceRow = nextRow; } } @@ -794,7 +794,7 @@ else if (rowSettings.relationship === 'parent') { $previousRow = $changedRow.prev('tr'); previousRow = $previousRow; - while ($previousRow.length && $previousRow.find('.indentation').length >= this.rowObject.indents) { + while ($previousRow.length && $previousRow.find('.js-indentation').length >= this.rowObject.indents) { $previousRow = $previousRow.prev('tr'); previousRow = $previousRow; } @@ -838,7 +838,7 @@ switch (rowSettings.action) { case 'depth': // Get the depth of the target row. - targetElement.value = $(sourceElement).closest('tr').find('.indentation').length; + targetElement.value = $(sourceElement).closest('tr').find('.js-indentation').length; break; case 'match': // Update the value. @@ -976,7 +976,7 @@ this.element = tableRow; this.method = method; this.group = [tableRow]; - this.groupDepth = $tableRow.find('.indentation').length; + this.groupDepth = $tableRow.find('.js-indentation').length; this.changed = false; this.table = $tableRow.closest('table')[0]; this.indentEnabled = indentEnabled; @@ -984,12 +984,12 @@ this.direction = ''; // Direction the row is being moved. if (this.indentEnabled) { - this.indents = $tableRow.find('.indentation').length; + this.indents = $tableRow.find('.js-indentation').length; this.children = this.findChildren(addClasses); this.group = $.merge(this.group, this.children); // Find the depth of this entire group. for (var n = 0; n < this.group.length; n++) { - this.groupDepth = Math.max($(this.group[n]).find('.indentation').length, this.groupDepth); + this.groupDepth = Math.max($(this.group[n]).find('.js-indentation').length, this.groupDepth); } } }; @@ -1021,11 +1021,11 @@ while (currentRow.length) { // A greater indentation indicates this is a child. - if (currentRow.find('.indentation').length > parentIndentation) { + if (currentRow.find('.js-indentation').length > parentIndentation) { child++; rows.push(currentRow[0]); if (addClasses) { - currentRow.find('.indentation').each(rowIndentation); + currentRow.find('.js-indentation').each(rowIndentation); } } else { @@ -1034,7 +1034,7 @@ currentRow = currentRow.next('tr.draggable'); } if (addClasses && rows.length) { - $(rows[rows.length - 1]).find('.indentation:nth-child(' + (parentIndentation + 1) + ')').addClass('tree-child-last'); + $(rows[rows.length - 1]).find('.js-indentation:nth-child(' + (parentIndentation + 1) + ')').addClass('tree-child-last'); } return rows; }; @@ -1112,7 +1112,7 @@ // Minimum indentation: // Do not orphan the next row. - minIndent = nextRow ? $(nextRow).find('.indentation').length : 0; + minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0; // Maximum indentation: if (!prevRow || $prevRow.is(':not(.draggable)') || $(this.element).is('.tabledrag-root')) { @@ -1124,7 +1124,7 @@ } else { // Do not go deeper than as a child of the previous row. - maxIndent = $prevRow.find('.indentation').length + ($prevRow.is('.tabledrag-leaf') ? 0 : 1); + maxIndent = $prevRow.find('.js-indentation').length + ($prevRow.is('.tabledrag-leaf') ? 0 : 1); // Limit by the maximum allowed depth for the table. if (this.maxDepth) { maxIndent = Math.min(maxIndent, this.maxDepth - (this.groupDepth - this.indents)); @@ -1160,7 +1160,7 @@ for (var n = 1; n <= Math.abs(indentDiff); n++) { // Add or remove indentations. if (indentDiff < 0) { - $group.find('.indentation:first').remove(); + $group.find('.js-indentation:first').remove(); this.indents--; } else { @@ -1198,7 +1198,7 @@ // Either add immediately if this is a flat table, or check to ensure // that this row has the same level of indentation. if (this.indentEnabled) { - checkRowIndentation = checkRow.find('.indentation').length; + checkRowIndentation = checkRow.find('.js-indentation').length; } if (!(this.indentEnabled) || (checkRowIndentation === rowIndentation)) { @@ -1230,7 +1230,7 @@ Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function () { for (var n in this.children) { if (this.children.hasOwnProperty(n)) { - $(this.children[n]).find('.indentation') + $(this.children[n]).find('.js-indentation') .removeClass('tree-child') .removeClass('tree-child-first') .removeClass('tree-child-last') @@ -1269,7 +1269,7 @@ return '*'; }, tableDragIndentation: function () { - return '
 
'; + return '
 
'; }, tableDragChangedWarning: function () { return ''; diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module index b7e8ef2..aba696e 100644 --- a/core/modules/contextual/contextual.module +++ b/core/modules/contextual/contextual.module @@ -31,7 +31,7 @@ function contextual_toolbar() { ), ), '#wrapper_attributes' => array( - 'class' => array('hidden', 'contextual-toolbar-tab'), + 'class' => array('hidden', 'js-contextual-toolbar-tab,contextual-toolbar-tab'), ), '#attached' => array( 'library' => array( diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.js index 4641890..850e918 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/system/css/system.module.css b/core/modules/system/css/system.module.css index 9eb87dc..0359e4b 100644 --- a/core/modules/system/css/system.module.css +++ b/core/modules/system/css/system.module.css @@ -134,14 +134,14 @@ a.tabledrag-handle:focus .handle { .touch .draggable.drag a.tabledrag-handle .handle { background-position: 50% -32px; } -div.indentation { +div.js-indentation { float: left; /* LTR */ height: 1.7em; margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ padding: 0.42em 0 0.42em 0.6em; /* LTR */ width: 20px; } -[dir="rtl"] div.indentation { +[dir="rtl"] div.js-indentation { float: right; margin: -0.4em -0.4em -0.4em 0.2em; padding: 0.42em 0.6em 0.42em 0; diff --git a/core/modules/taxonomy/src/Tests/TaxonomyTermIndentationTest.php b/core/modules/taxonomy/src/Tests/TaxonomyTermIndentationTest.php index 43d53f4..0e40c1e 100644 --- a/core/modules/taxonomy/src/Tests/TaxonomyTermIndentationTest.php +++ b/core/modules/taxonomy/src/Tests/TaxonomyTermIndentationTest.php @@ -53,7 +53,7 @@ function testTermIndentation() { // Submit the edited form and check for HTML indentation element presence. $this->drupalPostForm('admin/structure/taxonomy/manage/' . $this->vocabulary->get('vid') . '/overview', $edit, t('Save')); - $this->assertPattern('|
 
|'); + $this->assertPattern('|
 
|'); // Check explicitly that term 2's parent is term 1. $parents = taxonomy_term_load_parents($term2->id()); @@ -69,7 +69,7 @@ function testTermIndentation() { $this->drupalPostForm('admin/structure/taxonomy/manage/' . $this->vocabulary->get('vid' ) . '/overview', $edit, t('Save')); // All terms back at the root level, no identation should be present. - $this->assertNoPattern('|
 
|'); + $this->assertNoPattern('|
 
|'); // Check explicitly that term 2 has no parents. \Drupal::entityManager()->getStorage('taxonomy_term')->resetCache(); diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css index c089186..4ddfd35 100644 --- a/core/modules/toolbar/css/toolbar.module.css +++ b/core/modules/toolbar/css/toolbar.module.css @@ -217,12 +217,12 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { */ /* Hide the orientation toggle when the configured narrow breakpoint is not * active. */ -.toolbar .toolbar-tray .toolbar-toggle-orientation { +.toolbar .toolbar-tray .js-toolbar-toggle-orientation { display: none; } /* Show the orientation toggle when the configured narrow breakpoint is * active. */ -.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation { +.toolbar-oriented .toolbar-tray .js-toolbar-toggle-orientation { display: block; } .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation { diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js index 0544a40..3510985 100644 --- a/core/modules/toolbar/js/escapeAdmin.js +++ b/core/modules/toolbar/js/escapeAdmin.js @@ -35,7 +35,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 dcfbb2a..668d1f6 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -43,7 +43,7 @@ return; } // Process the administrative toolbar. - $(context).find('#toolbar-administration').once('toolbar', function () { + $(context).find('#toolbar-administration').once('js-toolbar', function () { // Establish the toolbar models and views. var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({ @@ -68,7 +68,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 }); @@ -129,7 +129,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': $('.toolbar-bar .toolbar-tab:not(.js-home-toolbar-tab) a').get(0) }); } }); @@ -205,7 +205,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 c14d0d4..31f6800 100644 --- a/core/modules/toolbar/js/toolbar.menu.js +++ b/core/modules/toolbar/js/toolbar.menu.js @@ -68,7 +68,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 .toolbar-box').children('.toolbar-handle'); switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open'); // Toggle the item open state. $item.toggleClass('open', switcher); @@ -99,14 +99,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.menu').length) { - var $box = $item.children('.toolbar-box'); + var $box = $item.children('.js-toolbar-box .toolbar-box'); options.text = Drupal.t('@label', {'@label': $box.find('a').text()}); - $item.children('.toolbar-box') + $item.children('.js-toolbar-box .toolbar-box') .append(Drupal.theme('toolbarMenuItemToggle', options)); } }); @@ -156,8 +156,8 @@ // Bind event handlers. $(document) - .on('click.toolbar', '.toolbar-box', toggleClickHandler) - .on('click.toolbar', '.toolbar-box a', linkClickHandler); + .on('click.toolbar', '.js-toolbar-box .toolbar-box', toggleClickHandler) + .on('click.toolbar', '.js-toolbar-box .toolbar-box a', linkClickHandler); // Return the jQuery object. return this.each(function (selector) { diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js index aaccf17..ddfff2a 100644 --- a/core/modules/toolbar/js/views/ToolbarVisualView.js +++ b/core/modules/toolbar/js/views/ToolbarVisualView.js @@ -20,10 +20,10 @@ }; return { - 'click .toolbar-bar .toolbar-tab': 'onTabClick', - 'click .toolbar-toggle-orientation button': 'onOrientationToggleClick', - 'touchend .toolbar-bar .toolbar-tab': touchEndToClick, - 'touchend .toolbar-toggle-orientation button': touchEndToClick + 'click .js-toolbar-bar .js-toolbar-tab': 'onTabClick', + 'click .js-toolbar-toggle-orientation button': 'onOrientationToggleClick', + 'touchend .js-toolbar-bar .js-toolbar-tab': touchEndToClick, + 'touchend .js-toolbar-toggle-orientation button': touchEndToClick }; }, @@ -39,7 +39,7 @@ // Add the tray orientation toggles. this.$el - .find('.toolbar-tray .toolbar-lining') + .find('.js-toolbar-tray .toolbar-lining') .append(Drupal.theme('toolbarOrientationToggle')); // Trigger an activeTab change so that listening scripts can respond on @@ -154,7 +154,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('active'); this.model.set('activeTray', $tray.get(0)); @@ -177,10 +177,10 @@ 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. @@ -196,14 +196,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); + .addClass('js-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) @@ -227,7 +227,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('padding-top', 0); $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical'); @@ -235,7 +235,7 @@ else { // The toolbar container is invisible. Its placement is used to // determine the container for the trays. - $trays.css('padding-top', this.$el.find('.toolbar-bar').outerHeight()); + $trays.css('padding-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 929dac4..dfc7fc5 100644 --- a/core/modules/toolbar/src/Element/ToolbarItem.php +++ b/core/modules/toolbar/src/Element/ToolbarItem.php @@ -82,7 +82,7 @@ public static function preRenderToolbarItem($element) { $element['tray']['#wrapper_attributes'] = array(); } $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 30e61ea..aba6c0d 100644 --- a/core/modules/toolbar/templates/toolbar.html.twig +++ b/core/modules/toolbar/templates/toolbar.html.twig @@ -23,20 +23,20 @@ */ #} - + {% for tab in tabs %} - {{ tab.link }}
+ {{ tab.link }}
{% endfor %} {% for tray in trays %} {% spaceless %} {% if tray.label %} -