From ecb4b0d896de20b3b8cc83ca03d0820908d20512 Mon Sep 17 00:00:00 2001
From: John McCormick <jam@neardark.com>
Date: Mon, 27 Jul 2015 18:37:15 -0600
Subject: [PATCH] Issue #2512714 by neardark: Theme 'tabs' widget selector

---
 css/entity_browser.tabs.css                      | 28 ++++++++++
 entity_browser.libraries.yml                     | 12 ++++-
 js/entity_browser.tabs.js                        | 69 ++++++++++++++++++++++++
 src/EntityBrowserForm.php                        |  7 +++
 src/Plugin/EntityBrowser/WidgetSelector/Tabs.php |  1 +
 5 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 css/entity_browser.tabs.css
 create mode 100644 js/entity_browser.tabs.js

diff --git a/css/entity_browser.tabs.css b/css/entity_browser.tabs.css
new file mode 100644
index 0000000..6c918a1
--- /dev/null
+++ b/css/entity_browser.tabs.css
@@ -0,0 +1,28 @@
+/**
+ * @file
+ * Styles for Entity Browser.
+ *
+ * These styles are compatible with Bartik, Seven, and Classy themes.
+ */
+
+/**
+ * Form elements.
+ */
+.entity-browser-form input.edit-submit {
+  margin-top: 20px;
+}
+
+/**
+ * Tab navigation.
+ */
+.entity-browser-form nav.tabs {
+  margin-bottom: 20px;
+}
+
+.entity-browser-form input.tab {
+  display: none;
+}
+
+.entity-browser-form .entity-tabs a {
+  cursor: pointer;
+}
diff --git a/entity_browser.libraries.yml b/entity_browser.libraries.yml
index 8b948bf..82b0aa5 100644
--- a/entity_browser.libraries.yml
+++ b/entity_browser.libraries.yml
@@ -16,10 +16,20 @@ entity_reference:
   version: VERSION
   js:
     js/entity_browser.entity_reference.js: {}
-    
+
 modal:
   version: VERSION
   js:
     js/entity_browser.modal.js: {}
   dependencies:
     - core/drupalSettings
+
+tabs:
+  version: VERSION
+  css:
+    component:
+      css/entity_browser.tabs.css: {}
+  js:
+    js/entity_browser.tabs.js: {}
+  dependencies:
+    - core/drupalSettings
diff --git a/js/entity_browser.tabs.js b/js/entity_browser.tabs.js
new file mode 100644
index 0000000..f4b2ad2
--- /dev/null
+++ b/js/entity_browser.tabs.js
@@ -0,0 +1,69 @@
+/**
+ * @file entity_browser.admin.js
+ *
+ * Defines the behavior of the entity browser's tab display.
+ */
+(function ($, Drupal, drupalSettings) {
+
+  "use strict";
+
+  /**
+   * Registers behaviours related to tab display.
+   */
+  Drupal.behaviors.entityBrowserTabs = {
+    attach: function (context) {
+      var $form = $(context).find('.entity-browser-form').once('entity-browser-admin');
+      if (!$form.length) {
+        return;
+      }
+
+      var $nav = $('<nav class="tabs entity-tabs is-horizontal clearfix"></nav>');
+      var $tabs = $('<ul class="tabs secondary" role="navigation" aria-label="Tabs"></ul>');
+
+      $form.find('.tab').each( function (index, element) {
+        var $element = $(element);
+        var classes = $element.attr('disabled') ? 'is-active' : '';
+        var tabSettings = {
+          class: classes,
+          id: $element.attr('id'),
+          title: $(this)[0].defaultValue
+        };
+        var $tab = $(Drupal.theme('entityTab', tabSettings));
+
+        // Add a click event handler that submits the hidden input buttons.
+        $tab.find('a').on('click', function (event) {
+          var buttonID = event.currentTarget.dataset.buttonId;
+          $form.find('input#' + buttonID).trigger('click');
+        });
+        $tab.appendTo($tabs);
+      });
+      $tabs.appendTo($nav);
+      $nav.prependTo($form);
+      $form.find('input.tab').css('display', 'none');
+    }
+  };
+
+  /**
+   * Theme function for an entity browser tab.
+   *
+   * @param {object} settings
+   *   An object with the following keys:
+   * @param {string} settings.title
+   *   The name of the tab.
+   * @param {string} settings.class
+   *   Classes for the tab.
+   * @param {string} settings.id
+   *   ID for the data- button ID.
+   *
+   * @return {object}
+   *   This function returns a jQuery object.
+   */
+  Drupal.theme.entityTab = function (settings) {
+    return $('<li class="tabs__tab" tabindex="-1"></li>')
+      .addClass(settings.class)
+      .append($('<a href="#"></a>').addClass(settings.class).attr('data-button-id', settings.id)
+        .append(settings.title)
+    );
+  };
+
+}(jQuery, Drupal, drupalSettings));
diff --git a/src/EntityBrowserForm.php b/src/EntityBrowserForm.php
index 508cb75..d800dc8 100644
--- a/src/EntityBrowserForm.php
+++ b/src/EntityBrowserForm.php
@@ -51,6 +51,13 @@ class EntityBrowserForm extends EntityForm {
       ],
     ];
 
+    $form['#attached'] = [
+      'library' =>
+        [
+          'entity_browser/tabs',
+        ]
+    ];
+
     $form[$form['#browser_parts']['selection_display']] = $entity_browser->getSelectionDisplay()->getForm($form, $form_state);
 
     if ($entity_browser->getDisplay() instanceOf DisplayAjaxInterface) {
diff --git a/src/Plugin/EntityBrowser/WidgetSelector/Tabs.php b/src/Plugin/EntityBrowser/WidgetSelector/Tabs.php
index 7e626ef..ae97b6c 100644
--- a/src/Plugin/EntityBrowser/WidgetSelector/Tabs.php
+++ b/src/Plugin/EntityBrowser/WidgetSelector/Tabs.php
@@ -30,6 +30,7 @@ class Tabs extends WidgetSelectorBase {
       $name = 'tab_selector_' . $id;
       $element[$name] = array(
         '#type' => 'button',
+        '#attributes' => ['class' => ['tab']],
         '#value' => $label,
         '#disabled' => $id == $this->getDefaultWidget(),
         '#executes_submit_callback' => TRUE,
-- 
2.2.1