[4.0] Tinymce plugin options bootstrap 5 (joomla#32153)

* Fix the tabs * fix
bembelimen · Jan 25, 2021 · a0676a6 · a0676a6
1 parent ad3e0d9
commit a0676a6
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/layouts/plugins/editors/tinymce/field/tinymcebuilder.php b/layouts/plugins/editors/tinymce/field/tinymcebuilder.php
@@ -11,6 +11,7 @@
 
 use Joomla\CMS\Document\HtmlDocument;
 use Joomla\CMS\Factory;
+use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 
 extract($displayData);
@@ -60,8 +61,7 @@
 // Add assets
 $wa->registerAndUseStyle('tinymce.skin', 'media/vendor/tinymce/skins/ui/oxide/skin.min.css')
 	->registerAndUseStyle('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.css', [], [], ['tinymce.skin', 'dragula'])
-	->registerAndUseScript('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.js', [], ['defer' => true], ['core', 'dragula'])
-	->useScript('bootstrap.js.bundle'); // Need for tabs, can be safely removed when tabs will be moved to CE
+	->registerAndUseScript('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.js', [], ['defer' => true], ['core', 'dragula']);
 
 // Add TinyMCE language file to translate the buttons
 if ($languageFile)
@@ -79,6 +79,7 @@
 	]
 );
 
+HTMLHelper::_('bootstrap.tab', '#setTabs')
 ?>
 <div id="joomla-tinymce-builder">
 
@@ -102,19 +103,19 @@
 	<p><?php echo Text::_('PLG_TINY_SET_TARGET_PANEL_DESCRIPTION'); ?></p>
 
 	<?php // Render tabs for each set ?>
-	<ul class="nav nav-tabs" id="set-tabs">
+	<ul class="nav nav-tabs" id="setTabs">
 		<?php foreach ($setsNames as $num => $title) :
 			$isActive = $num === $setsAmount - 1;
 		?>
-		<li class="nav-item">
-			<a href="#set-<?php echo $num; ?>" class="nav-link <?php echo $isActive ? 'active' : ''; ?>" data-toggle="tab">
+		<li class="nav-item" role="presentation">
+			<a class="nav-link <?php echo $isActive ? 'active' : ''; ?>" id="set-<?php echo $num; ?>-tab" data-bs-toggle="tab" href="#set-<?php echo $num; ?>" role="tab" aria-controls="set-<?php echo $num; ?>">
 				<?php echo $title; ?></a>
 		</li>
 		<?php endforeach; ?>
 	</ul>
 
 	<?php // Render tab content for each set ?>
-	<div class="tab-content">
+	<div class="tab-content" id="setTabsContent">
 		<?php
 		$presetButtonClases = array(
 			'simple'   => 'btn-success',
@@ -148,7 +149,7 @@
 			$valBar1 = empty($value['toolbars'][$num]['toolbar1']) ? array() : $value['toolbars'][$num]['toolbar1'];
 			$valBar2 = empty($value['toolbars'][$num]['toolbar2']) ? array() : $value['toolbars'][$num]['toolbar2'];
 		?>
-			<div class="tab-pane <?php echo $num === $setsAmount - 1 ? 'active' : ''; ?>" id="set-<?php echo $num; ?>">
+			<div class="tab-pane <?php echo $num === $setsAmount - 1 ? 'active' : ''; ?>" role="tabpanel" id="set-<?php echo $num; ?>" aria-labelledby="set-<?php echo $num; ?>-tab">
 				<div class="btn-toolbar float-end">
 					<div class="btn-group btn-group-sm">