diff --git a/dist/js/description_toggle.js b/dist/js/description_toggle.js index 9a0ac8a3..95faef8f 100644 --- a/dist/js/description_toggle.js +++ b/dist/js/description_toggle.js @@ -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"), diff --git a/gin.info b/gin.info index cc78596d..77ae7a8e 100755 --- a/gin.info +++ b/gin.info @@ -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 diff --git a/js/description_toggle.js b/js/description_toggle.js index 0de299dd..148e5b43 100644 --- a/js/description_toggle.js +++ b/js/description_toggle.js @@ -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); @@ -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) { diff --git a/template.php b/template.php index 2cd5019d..b1081f35 100644 --- a/template.php +++ b/template.php @@ -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 = '
'; + } + $output = '