Skip to content

Commit

Permalink
Issue #19: Add Description Toggle option.
Browse files Browse the repository at this point in the history 
Fixes #19.
  • Loading branch information
@laryn
laryn authored Feb 25, 2024
1 parent f802a3f commit 90916e1
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 10 deletions.
4 changes: 2 additions & 2 deletions dist/js/description_toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
elem.dataset.formDescriptionToggleAttached = !0;
const a11yLabel = "help-icon-label--" + Math.floor(1e4 * Math.random());
elem.setAttribute("id", a11yLabel), elem.setAttribute("aria-expanded", "false"),
elem.setAttribute("aria-controls", "target"), elem.closest(".help-icon__description-container").querySelectorAll(".claro-details__description, .fieldset__description, .form-item__description").forEach((description => {
elem.setAttribute("aria-controls", "target"), elem.closest(".help-icon__description-container").querySelectorAll(".description").forEach((description => {
description.setAttribute("aria-labelledby", a11yLabel);
})), elem.addEventListener("click", (event => {
event.preventDefault(), event.stopPropagation(), "SUMMARY" === event.currentTarget.parentElement.tagName && !1 === event.currentTarget.parentElement.parentElement.open && (event.currentTarget.parentElement.parentElement.open = !0),
event.currentTarget.focus(), event.currentTarget.closest(".help-icon__description-container").querySelectorAll(".claro-details__description, .fieldset__description, .form-item__description").forEach(((description, index) => {
event.currentTarget.focus(), event.currentTarget.closest(".help-icon__description-container").querySelectorAll(".description").forEach(((description, index) => {
if (index > 1) return;
const setStatus = description.classList.contains("visually-hidden");
event.currentTarget.setAttribute("aria-expanded", setStatus), description.classList.toggle("visually-hidden"),
Expand Down
1 change: 1 addition & 0 deletions gin.info
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,4 @@ settings[edit_form_sidebar] = true
settings[preset_accent_color] = blue
settings[preset_focus_color] = gin
settings[layout_density] = default
settings[show_description_toggle] = false
4 changes: 2 additions & 2 deletions js/description_toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
elem
.closest('.help-icon__description-container')
.querySelectorAll(
'.claro-details__description, .fieldset__description, .form-item__description',
'.description',
)
.forEach((description) => {
description.setAttribute('aria-labelledby', a11yLabel);
Expand All @@ -35,7 +35,7 @@
event.currentTarget
.closest('.help-icon__description-container')
.querySelectorAll(
'.claro-details__description, .fieldset__description, .form-item__description',
'.description',
)
.forEach((description, index) => {
if (index > 1) {
Expand Down
97 changes: 97 additions & 0 deletions template.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,3 +537,100 @@ function gin_views_pre_render(&$view) {
$view->field["uri"]->options["thumbnail_style"] = 'medium';
}
}

/**
* Implements theme_form_element().
*
* We're overriding/duplicating this function to allow adjustments to the
* description and implement Gin's description toggle functionality.
*/
function gin_form_element($variables) {
$element = &$variables['element'];

// This function is invoked as theme wrapper, but the rendered form element
// may not necessarily have been processed by form_builder().
$element += array(
'#title_display' => 'before',
'#wrapper_attributes' => array(),
);
$attributes = $element['#wrapper_attributes'];

// Add element #id for #type 'item'.
if (isset($element['#markup']) && !empty($element['#id'])) {
$attributes['id'] = $element['#id'];
}
// Add element's #type and #name as class to aid with JS/CSS selectors.
$attributes['class'][] = 'form-item';
if (!empty($element['#type'])) {
$attributes['class'][] = 'form-type-' . strtr($element['#type'], '_', '-');
if (isset($element['#parents']) && form_get_error($element) !== NULL && !empty($element['#validated'])) {
$attributes['class'][] = 'form-error';
}
}
if (!empty($element['#name'])) {
$attributes['class'][] = 'form-item-' . strtr($element['#name'], array(' ' => '-', '_' => '-', '[' => '-', ']' => ''));
}
// Add a class for disabled elements to facilitate cross-browser styling.
if (!empty($element['#attributes']['disabled'])) {
$attributes['class'][] = 'form-disabled';
}
// Add indentation.
if (isset($element['#indentation'])) {
$attributes['class'][] = 'form-item-indentation';
$attributes['class'][] = 'form-item-indentation-' . $element['#indentation'];
$attributes['data-indentation-depth'] = $element['#indentation'];
}
// Add description toggle classes if settings call for them.
$show_description_toggle = theme_get_setting('show_description_toggle', 'gin');
$description['class'][] = 'description';
$help_icon_open = '';
$help_icon_close = '';
if (!empty($element['#description']) && $show_description_toggle) {
backdrop_add_library('gin', 'gin_description_toggle');
$attributes['class'][] = 'help-icon__description-container';
$description_attributes['class'][] = 'description';
$description_attributes['class'][] = 'visually-hidden';
$help_icon_open = '<div class="help-icon">';
$help_icon_close = '<button class="help-icon__description-toggle"></button></div>';
}
$output = '<div' . backdrop_attributes($attributes) . '>' . "\n";

// If #title is not set, we don't display any label or required marker.
if (!isset($element['#title'])) {
$element['#title_display'] = 'none';
}
$prefix = isset($element['#field_prefix']) ? '<span class="field-prefix">' . $element['#field_prefix'] . '</span> ' : '';
$suffix = isset($element['#field_suffix']) ? ' <span class="field-suffix">' . $element['#field_suffix'] . '</span>' : '';

switch ($element['#title_display']) {
case 'before':
case 'invisible':
$output .= $help_icon_open;
$output .= ' ' . theme('form_element_label', $variables);
$output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
$output .= $help_icon_close;
break;

case 'after':
$output .= $help_icon_open;
$output .= ' ' . $prefix . $element['#children'] . $suffix;
$output .= ' ' . theme('form_element_label', $variables) . "\n";
$output .= $help_icon_close;
break;

case 'none':
case 'attribute':
// Output no label and no required marker, only the children.
$output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
break;
}

if (!empty($element['#description'])) {
$show_description_toggle = theme_get_setting('show_description_toggle', 'gin');
$output .= '<div' . backdrop_attributes($description_attributes) . '>' . $element['#description'] . "</div>\n";
}

$output .= "</div>\n";

return $output;
}
12 changes: 6 additions & 6 deletions theme-settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,9 @@
];

// Description toggle.
// $form['show_description_toggle'] = [
// '#type' => 'checkbox',
// '#title' => t('Enable form description toggle'),
// '#description' => t('Show a help icon to show/hide form descriptions on content forms.'),
// '#default_value' => theme_get_setting('show_description_toggle', 'gin'),
// ];
$form['show_description_toggle'] = [
'#type' => 'checkbox',
'#title' => t('Enable form description toggle'),
'#description' => t('Show a help icon to show/hide form descriptions on content forms.'),
'#default_value' => theme_get_setting('show_description_toggle', 'gin'),
];

0 comments on commit 90916e1

Please sign in to comment.