Skip to content

Instantly share code, notes, and snippets.

@paulsheldrake
Created September 22, 2018 00:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulsheldrake/0a80a2ceb5f85c2abe5635736160f341 to your computer and use it in GitHub Desktop.
Save paulsheldrake/0a80a2ceb5f85c2abe5635736160f341 to your computer and use it in GitHub Desktop.
From 3a65c8056d139f1f252a841505de50f5066c604e Mon Sep 17 00:00:00 2001
From: Paul Sheldrake <paul.sheldrake@gmail.com>
Date: Fri, 21 Sep 2018 17:11:26 -0700
Subject: [PATCH] add bootstrap renderer for quicktabs
---
.gitignore | 2 +
quicktabs.module | 38 ++++++---
src/Plugin/TabRenderer/BootstrapTabs.php | 128 +++++++++++++++++++++++++++++++
templates/quicktabs-bootstrap.html.twig | 18 +++++
4 files changed, 175 insertions(+), 11 deletions(-)
create mode 100644 .gitignore
create mode 100644 src/Plugin/TabRenderer/BootstrapTabs.php
create mode 100644 templates/quicktabs-bootstrap.html.twig
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..090a1f0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+.DS_Store
diff --git a/quicktabs.module b/quicktabs.module
index bde87f7..b4532e7 100644
--- a/quicktabs.module
+++ b/quicktabs.module
@@ -23,14 +23,30 @@ function quicktabs_help($route_name, RouteMatchInterface $route_match) {
/**
* Implements hook_theme().
*/
-function quicktabs_theme($existing, $type, $theme, $path) {
- return array(
- 'quicktabs_block_content' => array(
- 'variables' => array('title' => NULL, 'block' => NULL, 'classes' => NULL, 'id' => NULL),
- 'template' => 'quicktabs-block-content',
- ),
- 'quicktabs_view_quicktabs' => array(
- 'file' => 'quicktabs.theme.inc',
- ),
- );
-}
+ function quicktabs_theme($existing, $type, $theme, $path) {
+ return array(
+ 'quicktabs_block_content' => array(
+ 'variables' => array(
+ 'title' => NULL,
+ 'block' => NULL,
+ 'classes' => NULL,
+ 'id' => NULL
+ ),
+ 'template' => 'quicktabs-block-content',
+ ),
+ 'quicktabs_view_quicktabs' => array(
+ 'file' => 'quicktabs.theme.inc',
+ ),
+ 'quicktabs_bootstrap' => array(
+ 'variables' => array(
+ 'tabs' => NULL,
+ 'panes' => NULL,
+ 'classes' => NULL,
+ 'id' => NULL,
+ 'tab_type' => 'tabs',
+ 'justified' => FALSE,
+ ),
+ 'template' => 'quicktabs-bootstrap',
+ ),
+ );
+ }
diff --git a/src/Plugin/TabRenderer/BootstrapTabs.php b/src/Plugin/TabRenderer/BootstrapTabs.php
new file mode 100644
index 0000000..1299882
--- /dev/null
+++ b/src/Plugin/TabRenderer/BootstrapTabs.php
@@ -0,0 +1,128 @@
+<?php
+/**
+ * @file
+ * Contains \Drupal\quicktabs\Plugin\TabRenderer\QuickTabs.
+ */
+
+namespace Drupal\quicktabs\Plugin\TabRenderer;
+
+use Drupal\quicktabs\TabRendererBase;
+use Drupal\quicktabs\Entity\QuickTabsInstance;
+use Drupal\Core\Link;
+use Drupal\Core\Url;
+use Drupal\Core\Template\Attribute;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+
+/**
+ * Provides a 'Bootstrap' tab renderer.
+ *
+ * @TabRenderer(
+ * id = "quick_tabs_bootstrap",
+ * name = @Translation("Bootstrap"),
+ * )
+ */
+class BootstrapTabs extends TabRendererBase {
+
+ /**
+ * {@inheritdoc}
+ */
+ public function optionsForm(QuickTabsInstance $instance) {
+ $options = $instance->getOptions()['quick_tabs_bootstrap'];
+ $form = [];
+
+ $form['tab_style'] = array(
+ '#type' => 'radios',
+ '#title' => t('Tab Style'),
+ '#options' => array(
+ 'tabs' => t('Tabs'),
+ 'pills' => t('Pills'),
+ ),
+ '#default_value' => ($instance->getRenderer() == 'quick_tabs_bootstrap' && $options['tab_style'] !== NULL) ? $options['tab_style'] : 'tabs',
+ '#description' => t('Choose how the tabs should be shown.'),
+ '#weight' => -5,
+ );
+ $form['justified'] = array(
+ '#type' => 'radios',
+ '#title' => t('Justified'),
+ '#options' => array(
+ FALSE => t('No'),
+ TRUE => t('Yes'),
+ ),
+ '#default_value' => ($instance->getRenderer() == 'quick_tabs_bootstrap' && $options['justified'] !== NULL) ? $options['justified'] : 0,
+ '#description' => t('Easily make tabs or pills equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked. There are problems with Safari when using this.'),
+ '#weight' => -6,
+ );
+ return $form;
+ }
+
+ /**
+ * Returns a render array to be used in a block or page.
+ *
+ * @return array a render array
+ */
+ public function render(QuickTabsInstance $instance) {
+ $qt_id = $instance->id();
+ $type = \Drupal::service('plugin.manager.tab_type');
+
+ // The render array used to build the block
+ $build = [];
+
+ // Pages of content that will be shown or hidden
+ $tab_pages = [];
+
+ // Tabs used to show/hide content
+ $titles = [];
+
+ foreach ($instance->getConfigurationData() as $index => $tab) {
+ // Build the pages //////////////////////////////////////
+ if(!$default_tab = \Drupal::request()->query->get('qt-'. $qt_id)) {
+ $default_tab = $instance->getDefaultTab() == 9999 ? 0 : $instance->getDefaultTab();
+ }
+
+ // Get actual tab content.
+ $object = $type->createInstance($tab['type']);
+ $render = $object->render($tab);
+ $tab_content = render($render)->__toString();
+
+ // Strip all the markup and check for text. Not a super great solution
+ // but it works here. The reason for this is if you have a view it can
+ // still show be the tab because the output has empty divs.
+ $no_tags = trim(strip_tags($tab_content, '<img>'));
+ if ($instance->getHideEmptyTabs() && empty($no_tags)) {
+ continue;
+ }
+
+ $tab_translated = new TranslatableMarkup($tab['title']);
+ $titles[] = $tab_translated->render();
+
+ // Add the tab to be outputed. Make sure it's a string so it can be
+ // outputtedd to the template correctly.
+ $tab_pages[] = $tab_content;
+ }
+
+ $tab_style =
+ $bootstrap = array(
+ '#theme' => 'quicktabs_bootstrap',
+ '#tabs' => $titles,
+ '#panes' => $tab_pages,
+ '#id' => $qt_id,
+ '#tab_type' => $instance->getOptions()['quick_tabs_bootstrap']['tab_style'],
+ '#justified' => $instance->getOptions()['quick_tabs_bootstrap']['justified'],
+ );
+
+ // Add tabs to the build
+ array_unshift($build, $bootstrap);
+
+ // Add a wrapper
+ $build['#theme_wrappers'] = array(
+ 'container' => array(
+ '#attributes' => array(
+ 'class' => array('quicktabs-wrapper-bootstrap'),
+ 'id' => 'quicktabs-' . $qt_id,
+ ),
+ ),
+ );
+
+ return $build;
+ }
+}
diff --git a/templates/quicktabs-bootstrap.html.twig b/templates/quicktabs-bootstrap.html.twig
new file mode 100644
index 0000000..31cb2d0
--- /dev/null
+++ b/templates/quicktabs-bootstrap.html.twig
@@ -0,0 +1,18 @@
+<div id="views-bootstrap-tab-{{ id }}" {{ attributes.addClass(classes) }}>
+ <ul class="nav nav-{{ tab_type }} {% if justified %}nav-justified{% endif %}">
+ {% for key, tab in tabs %}
+ {% set tab_classes = [loop.first ? 'active'] %}
+ <li class="{{ tab_classes|join(' ') }}">
+ <a href="{{ "#tab-#{ id }-#{ key }" }}" data-toggle="tab">{{ tab }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+ <div class="tab-content">
+ {% for key, pane in panes %}
+ {% set pane_classes = ['tab-pane', loop.first ? 'active'] %}
+ <div class="{{ pane_classes|join(' ') }}" id="tab-{{ id }}-{{ key }}" {{ pane.attributes }}>
+ {{ pane|raw }}
+ </div>
+ {% endfor %}
+ </div>
+</div>
--
2.14.3 (Apple Git-98)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment