Commit a7c278dc authored by jrockowitz's avatar jrockowitz Committed by jrockowitz
Browse files

Issue #3170868 by jrockowitz: Replace jQuery UI tabs with Tabby

parent 2f0ce4e6
......@@ -41,9 +41,7 @@
}
},
"require": {
"drupal/core": "^8.8 || ^9",
"drupal/jquery_ui": "~1.0",
"drupal/jquery_ui_tabs": "~1.0"
"drupal/core": "^8.8 || ^9"
},
"require-dev": {
"drupal/address": "~1.0",
......@@ -54,6 +52,7 @@
"drupal/entity": "~1.0",
"drupal/entity_print": "~2.0",
"drupal/group": "1.0",
"drupal/jquery_ui": "~1.0",
"drupal/jquery_ui_checkboxradio": "~1.0",
"drupal/jquery_ui_datepicker": "~1.0",
"drupal/lingotek": "~3.0",
......
......@@ -52,6 +52,7 @@
"progress-tracker/progress-tracker": "*",
"signature_pad/signature_pad": "*",
"svg-pan-zoom/svg-pan-zoom": "*",
"tabby/tabby": "*",
"tippyjs/5.x": "*",
"tippyjs/6.x": "*"
},
......@@ -474,6 +475,24 @@
}
}
},
"tabby": {
"type": "package",
"package": {
"name": "tabby/tabby",
"version": "12.0.3",
"type": "drupal-library",
"extra": {
"installer-name": "tabby"
},
"dist": {
"url": "https://github.com/cferdinandi/tabby/archive/v12.0.3.zip",
"type": "zip"
},
"require": {
"composer/installers": "~1.0"
}
}
},
"tippyjs/5.x": {
"type": "package",
"package": {
......
/**
* @file
* Webform form tabs styles.
*/
.webform-tabs ul.webform-tabs-item-list {
margin: 0 0 1em 0;
}
.webform-tabs ul.webform-tabs-item-list li {
margin: 0 .5em 0 0;
}
/**
* @file
* JavaScript behaviors for form tabs using jQuery UI.
* JavaScript behaviors for form tabs using Tabby.
*/
(function ($, Drupal) {
'use strict';
// @see http://api.jqueryui.com/tabs/
// @see https://github.com/cferdinandi/tabby
Drupal.webform = Drupal.webform || {};
Drupal.webform.formTabs = Drupal.webform.formTabs || {};
Drupal.webform.formTabs.options = Drupal.webform.formTabs.options || {
hide: true,
show: true
};
Drupal.webform.formTabs.options = Drupal.webform.formTabs.options || {};
/**
* Initialize webform tabs.
......@@ -27,20 +24,25 @@
*/
Drupal.behaviors.webformFormTabs = {
attach: function (context) {
$(context).find('div.webform-tabs').once('webform-tabs').each(function () {
var $tabs = $(this);
var options = jQuery.extend({}, Drupal.webform.formTabs.options);
if (!window.Tabby) {
return;
}
$(context).find('div.webform-tabs').once('webform-tabs').each(function () {
// Set active tab and clear the location hash once it is set.
var tabIndex = 0;
if (location.hash) {
var active = $('a[href="' + location.hash + '"]').data('tab-index');
if (typeof active !== 'undefined') {
options.active = active;
tabIndex = $('a[href="' + location.hash + '"]').data('tab-index');
if (typeof tabIndex !== 'undefined') {
location.hash = '';
}
}
$tabs.tabs(options);
var options = jQuery.extend({
'default': '[data-tab-index="' + tabIndex + '"]',
}, Drupal.webform.formTabs.options);
new Tabby('div.webform-tabs .webform-tabs-item-list', options);
});
}
};
......
......@@ -35,7 +35,7 @@ class WebformFormHelper {
}
/**
* Build form jQuery UI tabs.
* Build form tabs using Tabby.
*
* @param array $form
* A form.
......@@ -140,13 +140,11 @@ class WebformFormHelper {
'#attributes' => ['class' => ['webform-tabs']],
'#attached' => ['library' => ['webform/webform.form.tabs']],
];
if ($active_tab) {
$form['tabs']['#attributes']['data-tab-active'] = 'webform-tab--' . $active_tab;
}
$form['tabs']['items'] = [
'#theme' => 'item_list',
'#items' => $tab_items,
'#attributes' => ['class' => ['webform-tabs-item-list']],
];
return $form;
......
......@@ -448,11 +448,19 @@ class WebformLibrariesManager implements WebformLibrariesManagerInterface {
'version' => '2.3.0',
'elements' => ['webform_signature'],
];
$libraries['tabby'] = [
'title' => $this->t('Tabby'),
'description' => $this->t("Tabby provides lightweight, accessible vanilla JS toggle tabs."),
'notes' => $this->t('Tabby is used to display tabs in the administrative UI'),
'homepage_url' => Url::fromUri('https://github.com/cferdinandi/tabby'),
'download_url' => Url::fromUri('https://github.com/cferdinandi/tabby/archive/v12.0.3.zip'),
'version' => '12.0.3',
];
// Drupal 8 and 9 supports different version of PopperJS which is a
// dependency for TipperJS.
// @see https://www.drupal.org/node/3112670
$libraries['tippyjs/5.x'] = [
'title' => $this->t('tippyjs (5.x)'),
'title' => $this->t('Tippy.j (5.x)'),
'description' => $this->t("Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper."),
'notes' => $this->t('Tippy.js is used to provide a tooltips. Tippy.js 5.x is compatible with Drupal 8.x.'),
'homepage_url' => Url::fromUri('https://github.com/atomiks/tippyjs'),
......@@ -461,7 +469,7 @@ class WebformLibrariesManager implements WebformLibrariesManagerInterface {
'core' => 8,
];
$libraries['tippyjs/6.x'] = [
'title' => $this->t('tippyjs (6.x)'),
'title' => $this->t('Tippy.js (6.x)'),
'description' => $this->t("Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper."),
'notes' => $this->t('Tippy.js is used to provide a tooltips. Tippy.js 6.x is compatible with Drupal 9.x.'),
'homepage_url' => Url::fromUri('https://github.com/atomiks/tippyjs'),
......
......@@ -7,4 +7,3 @@ configure: entity.webform.collection
dependencies:
- 'drupal:field'
- 'drupal:user'
- 'jquery_ui_tabs:jquery_ui_tabs'
......@@ -373,12 +373,15 @@ webform.form.submit_once:
webform.form.tabs:
version: VERSION
css:
component:
css/webform.form.tabs.css: {}
js:
js/webform.form.tabs.js: {}
dependencies:
- core/drupal
- core/jquery.once
- jquery_ui_tabs/tabs
- webform/libraries.tabby
webform.form.unsaved:
version: VERSION
......@@ -1246,6 +1249,22 @@ libraries.signature_pad:
js:
/libraries/signature_pad/example/js/signature_pad.js: {}
libraries.tabby:
remote: https://github.com/cferdinandi/tabby
version: '12.0.3'
license:
name: MIT
url: https://github.com/cferdinandi/tabby/blob/master/LICENSE.md
gpl-compatible: true
directory: tabby
cdn:
/libraries/tabby/: https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12.0.3/
css:
component:
/libraries/tabby/dist/css/tabby-ui.min.css: {}
js:
/libraries/tabby/dist/js/tabby.min.js: {}
# Tippy.js 5.x is compatible with Drupal 8.x.
# Library info is altered to switch to Tippy.js 6.x for Drupal 9.x compatibility.
# @see webform_library_info_alter()
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment