diff --git a/includes/yamlform.theme.inc b/includes/yamlform.theme.inc index 0d601bb..f2b2453 100644 --- a/includes/yamlform.theme.inc +++ b/includes/yamlform.theme.inc @@ -6,6 +6,7 @@ */ use Drupal\Core\Link; +use Drupal\Core\Render\Element; use Drupal\Core\Url; use Drupal\Component\Serialization\Yaml; use Drupal\Component\Utility\Xss; @@ -357,7 +358,7 @@ function template_preprocess_yamlform_codemirror(array &$variables) { * - multiline: Flag to determine if value spans multiple lines. * - email: Flag to determine if element is for an email. */ -function template_preprocess_yamlform_element_base_html(array &$variables) { +function template_preprocess_yamlform_composite_base_html(array &$variables) { $element = $variables['element']; $variables['title'] = (YamlFormElementHelper::isTitleDisplayed($element)) ? $element['#title'] : NULL; } @@ -375,8 +376,8 @@ function template_preprocess_yamlform_element_base_html(array &$variables) { * - multiline: Flag to determine if value spans multiple lines. * - email: Flag to determine if element is for an email. */ -function template_preprocess_yamlform_element_base_text(array &$variables) { - template_preprocess_yamlform_element_base_html($variables); +function template_preprocess_yamlform_composite_base_text(array &$variables) { + template_preprocess_yamlform_composite_base_html($variables); } /** @@ -481,3 +482,87 @@ function template_preprocess_yamlform_progress_bar(array &$variables) { $variables['current_page'] = count($variables['pages']) - 1; } } + +/** + * Prepares variables for address composite element templates. + * + * Default template: yamlform-element-address.html.twig. + * + * @param array $variables + * An associative array containing: + * - element: An associative array containing the properties of the element. + * Properties used: #title, #value, #options, #description, #required, + * #attributes. + */ +function template_preprocess_yamlform_composite_address(&$variables) { + $element = $variables['element']; + foreach (Element::children($element) as $key) { + if ($element[$key]['#access']) { + $variables['content'][$key] = $element[$key]; + } + } + $variables['flexbox'] = (isset($element['#flexbox'])) ? $element['#flexbox'] : FALSE; +} + +/** + * Prepares variables for contact composite element templates. + * + * Default template: yamlform-element-contact.html.twig. + * + * @param array $variables + * An associative array containing: + * - element: An associative array containing the properties of the element. + * Properties used: #title, #value, #options, #description, #required, + * #attributes. + */ +function template_preprocess_yamlform_composite_contact(&$variables) { + $element = $variables['element']; + foreach (Element::children($element) as $key) { + if ($element[$key]['#access']) { + $variables['content'][$key] = $element[$key]; + } + } + $variables['flexbox'] = (isset($element['#flexbox'])) ? $element['#flexbox'] : FALSE; +} + +/** + * Prepares variables for creditcard composite element templates. + * + * Default template: yamlform-element-creditcard.html.twig. + * + * @param array $variables + * An associative array containing: + * - element: An associative array containing the properties of the element. + * Properties used: #title, #value, #options, #description, #required, + * #attributes. + */ +function template_preprocess_yamlform_composite_creditcard(&$variables) { + $element = $variables['element']; + foreach (Element::children($element) as $key) { + if ($element[$key]['#access']) { + $variables['content'][$key] = $element[$key]; + } + } + $variables['flexbox'] = (isset($element['#flexbox'])) ? $element['#flexbox'] : FALSE; +} + +/** + * Prepares variables for name composite element templates. + * + * Default template: yamlform-element-name.html.twig. + * + * @param array $variables + * An associative array containing: + * - element: An associative array containing the properties of the element. + * Properties used: #title, #value, #options, #description, #required, + * #attributes. + */ +function template_preprocess_yamlform_composite_name(&$variables) { + $element = $variables['element']; + foreach (Element::children($element) as $key) { + if ($element[$key]['#access']) { + $variables['content'][$key] = $element[$key]; + } + } + $variables['flexbox'] = (isset($element['#flexbox'])) ? $element['#flexbox'] : FALSE; +} diff --git a/src/Element/YamlFormAddress.php b/src/Element/YamlFormAddress.php index 3cf67b5..629fdcd 100755 --- a/src/Element/YamlFormAddress.php +++ b/src/Element/YamlFormAddress.php @@ -12,51 +12,34 @@ class YamlFormAddress extends YamlFormCompositeBase { /** * {@inheritdoc} */ - public static function getCompositeElements($use_flexbox = FALSE) { + public static function getCompositeElements() { $elements = []; - $elements['address'] = [ '#type' => 'textfield', '#title' => t('Address'), - ] + static::setFlexbox($use_flexbox); - + ]; $elements['address_2'] = [ '#type' => 'textfield', '#title' => t('Address 2'), - ] + static::setFlexbox($use_flexbox); - - if ($use_flexbox) { - $elements['start_city_state_flexbox'] = ['#markup' => '
']; - } + ]; $elements['city'] = [ '#type' => 'textfield', '#title' => t('City/Town'), - ] + static::setFlex($use_flexbox); + ]; $elements['state_province'] = [ '#type' => 'select', '#title' => t('State/Province'), '#options' => 'state_province_names', - ] + static::setFlex($use_flexbox); - if ($use_flexbox) { - $elements['end_city_state_flexbox'] = ['#markup' => '
']; - } - - if ($use_flexbox) { - $elements['start_postal_country_flexbox'] = ['#markup' => '
']; - } - $elements['postal_code'] = [ - '#type' => 'textfield', - '#title' => t('Zip/Postal Code'), - ] + static::setFlex($use_flexbox); + ]; $elements['country'] = [ '#type' => 'select', '#title' => t('Country'), '#options' => 'country_names', - ] + static::setFlex($use_flexbox); - if ($use_flexbox) { - $elements['end_postal_country_flexbox'] = ['#markup' => '
']; - } - + ]; + $elements['postal_code'] = [ + '#type' => 'textfield', + '#title' => t('Zip/Postal Code'), + ]; return $elements; } diff --git a/src/Element/YamlFormCompositeBase.php b/src/Element/YamlFormCompositeBase.php index da892b9..c7d18d8 100755 --- a/src/Element/YamlFormCompositeBase.php +++ b/src/Element/YamlFormCompositeBase.php @@ -28,6 +28,7 @@ abstract class YamlFormCompositeBase extends FormElement { '#pre_render' => [ [$class, 'preRenderCompositeFormElement'], ], + '#theme' => str_replace('yamlform_', 'yamlform_composite_', $this->getPluginId()), '#theme_wrappers' => ['container'], '#required' => FALSE, '#flexbox' => TRUE, @@ -37,80 +38,15 @@ abstract class YamlFormCompositeBase extends FormElement { /** * Get a renderable array of form elements. * - * @param bool $use_flexbox - * Flag to enabled/disable Flexbox layouts. - * * @return array * A renderable array of form elements, containing the base properties * for the composite's form elements. */ - public static function getCompositeElements($use_flexbox = FALSE) { + public static function getCompositeElements() { return []; } /** - * Get a renderable array of form elements using Flexbox layout. - * - * @param array $elements - * A renderable array of form elements. - * - * @return array - * A renderable array of form elements using Flexbox layout. - */ - public static function getFlexboxLayout(array $elements) { - return $elements; - } - - /** - * Set flex(box) class attributes. - * - * @param bool $use_flexbox - * Flag to enabled/disable Flexbox layouts. - * @param int $flex - * The flex property specifies the length of the item, relative to the rest - * of the flexible items inside the same container. - * - * @return array - * An associative array of wrapper attributes containing yamlform-flex - * classes. - */ - public static function setFlex($use_flexbox = FALSE, $flex = 1) { - return ($use_flexbox) ? [ - '#prefix' => '
', - '#suffix' => '
', - ] : []; - } - - /** - * Set flex(box) class attributes. - * - * @param bool $use_flexbox - * Flag to enabled/disable Flexbox layouts. - * @param int $flex - * The flex property specifies the length of the item, relative to the rest - * of the flexible items inside the same container. - * - * @return array - * An associative array of wrapper attributes containing yamlform-flex - * classes. - */ - public static function setFlexbox($use_flexbox = FALSE, $flex = 1) { - if (!$use_flexbox) { - return []; - } - - $properties = [ - '#prefix' => '
', - '#suffix' => '
', - ]; - if ($flex) { - $properties['#prefix'] .= '
'; - $properties['#suffix'] .= '
'; - } - return $properties; - } - - /** * Processes a composite form element. */ public static function processYamlFormComposite(&$element, FormStateInterface $form_state, &$complete_form) { @@ -120,8 +56,7 @@ abstract class YamlFormCompositeBase extends FormElement { $element['#initialize'] = TRUE; $element['#tree'] = TRUE; - $element['#flexbox'] = (!empty($element['#flexbox'])) ? TRUE : FALSE; - $composite_elements = static::getCompositeElements($element['#flexbox']); + $composite_elements = static::getCompositeElements(); foreach ($composite_elements as $composite_key => &$composite_element) { // Transfer '#{composite_key}_{property}' from main element to composite // element. @@ -136,8 +71,13 @@ abstract class YamlFormCompositeBase extends FormElement { $composite_element['#value'] = $element['#value'][$composite_key]; } + // Always set #access which is used to hide/show the elements container. + $composite_element += [ + '#access' => TRUE, + ]; + // Never required hidden composite elements. - if (isset($composite_element['#access']) && $composite_element['#access'] == FALSE) { + if ($composite_element['#access'] == FALSE) { unset($composite_element['#required']); } @@ -171,11 +111,7 @@ abstract class YamlFormCompositeBase extends FormElement { $element += $composite_elements; $element['#element_validate'] = [[get_called_class(), 'validateYamlFormComposite']]; - if ($element['#flexbox']) { - $element += ['#prefix' => '', '#suffix' => '']; - $element['#prefix'] = $element['#prefix'] . '
'; - $element['#suffix'] = '
' . $element['#suffix']; - + if (!empty($element['#flexbox'])) { $element['#attached']['library'][] = 'yamlform/yamlform.element.flexbox'; } diff --git a/src/Element/YamlFormContact.php b/src/Element/YamlFormContact.php index 11c8cea..b936fba 100755 --- a/src/Element/YamlFormContact.php +++ b/src/Element/YamlFormContact.php @@ -12,41 +12,25 @@ class YamlFormContact extends YamlFormAddress { /** * {@inheritdoc} */ - public static function getCompositeElements($use_flexbox = FALSE) { + public static function getCompositeElements() { $elements = []; - - if ($use_flexbox) { - $elements['start_name_company_flexbox'] = ['#markup' => '
']; - } $elements['name'] = [ '#type' => 'textfield', '#title' => t('Name'), - ] + static::setFlex($use_flexbox); + ]; $elements['company'] = [ '#type' => 'textfield', '#title' => t('Company'), - ] + static::setFlex($use_flexbox); - if ($use_flexbox) { - $elements['end_name_company_flexbox'] = ['#markup' => '
']; - } - - if ($use_flexbox) { - $elements['start_email_phone_flexbox'] = ['#markup' => '
']; - } + ]; + $elements += parent::getCompositeElements(); $elements['email'] = [ '#type' => 'email', '#title' => t('Email'), - ] + static::setFlex($use_flexbox); + ]; $elements['phone'] = [ '#type' => 'tel', '#title' => t('Phone'), - ] + static::setFlex($use_flexbox); - if ($use_flexbox) { - $elements['end_email_phone_flexbox'] = ['#markup' => '
']; - } - - $elements += parent::getCompositeElements($use_flexbox); - + ]; return $elements; } diff --git a/src/Element/YamlFormCreditCard.php b/src/Element/YamlFormCreditCard.php index 1af2628..32b7cd1 100755 --- a/src/Element/YamlFormCreditCard.php +++ b/src/Element/YamlFormCreditCard.php @@ -12,7 +12,7 @@ class YamlFormCreditCard extends YamlFormCompositeBase { /** * {@inheritdoc} */ - public static function getCompositeElements($use_flexbox = FALSE) { + public static function getCompositeElements() { $month_options = range(1, 12); $year_options = range(date('Y'), date('Y') + 10); diff --git a/src/Element/YamlFormName.php b/src/Element/YamlFormName.php index 3da5413..df36149 100755 --- a/src/Element/YamlFormName.php +++ b/src/Element/YamlFormName.php @@ -12,43 +12,33 @@ class YamlFormName extends YamlFormCompositeBase { /** * {@inheritdoc} */ - public static function getCompositeElements($use_flexbox = FALSE) { + public static function getCompositeElements() { $elements = []; - - if ($use_flexbox) { - $elements['start_name_flexbox'] = ['#markup' => '
']; - } - $elements['title'] = [ '#type' => 'yamlform_select_other', '#title' => t('Title'), '#options' => 'titles', - ] + static::setFlex($use_flexbox, 2); + ]; $elements['first'] = [ '#type' => 'textfield', '#title' => t('First'), - ] + static::setFlex($use_flexbox, 3); + ]; $elements['middle'] = [ '#type' => 'textfield', '#title' => t('Middle'), - ] + static::setFlex($use_flexbox, 2); + ]; $elements['last'] = [ '#type' => 'textfield', '#title' => t('Last'), - ] + static::setFlex($use_flexbox, 3); + ]; $elements['suffix'] = [ '#type' => 'textfield', '#title' => t('Suffix'), - ] + static::setFlex($use_flexbox, 1); + ]; $elements['degree'] = [ '#type' => 'textfield', '#title' => t('Degree'), - ] + static::setFlex($use_flexbox, 1); - - if ($use_flexbox) { - $elements['end_name_flexbox'] = ['#markup' => '
']; - } - + ]; return $elements; } diff --git a/templates/yamlform-composite-address.html.twig b/templates/yamlform-composite-address.html.twig new file mode 100644 index 0000000..9f86b7f --- /dev/null +++ b/templates/yamlform-composite-address.html.twig @@ -0,0 +1,50 @@ +{# +/** + * @file + * Default theme implementation of an address composite form element. + * + * Available variables: + * - content: The address form element to be output. + * - flexbox: Determines if Flexbox layout should be applied to the composite + * element. + * + * @see template_preprocess_yamlform_name() + * + * @ingroup themeable + */ +#} +{% if flexbox %} + + {% if content.address %} +
+
{{ content.address }}
+
+ {% endif %} + + {% if content.address_2 %} +
+
{{ content.address_2 }}
+
+ {% endif %} + +
+ {% if content.city %} +
{{ content.city }}
+ {% endif %} + {% if content.state_province %} +
{{ content.state_province }}
+ {% endif %} + {% if content.postal_code %} +
{{ content.postal_code }}
+ {% endif %} +
+ + {% if content.country %} +
+
{{ content.country }}
+
+ {% endif %} + +{% else %} + {{ content }} +{% endif %} diff --git a/templates/yamlform-composite-contact.html.twig b/templates/yamlform-composite-contact.html.twig new file mode 100644 index 0000000..bcc2c5e --- /dev/null +++ b/templates/yamlform-composite-contact.html.twig @@ -0,0 +1,68 @@ +{# +/** + * @file + * Default theme implementation of a contact composite form element. + * + * Available variables: + * - content: The contact form element to be output. + * - flexbox: Determines if Flexbox layout should be applied to the composite + * element. + * + * @see template_preprocess_yamlform_contact() + * + * @ingroup themeable + */ +#} +{% if flexbox %} + +
+ {% if content.name %} +
{{ content.name }}
+ {% endif %} + {% if content.company %} +
{{ content.company }}
+ {% endif %} +
+ + {% if content.address %} +
+
{{ content.address }}
+
+ {% endif %} + + {% if content.address_2 %} +
+
{{ content.address_2 }}
+
+ {% endif %} + +
+ {% if content.city %} +
{{ content.city }}
+ {% endif %} + {% if content.state_province %} +
{{ content.state_province }}
+ {% endif %} + {% if content.postal_code %} +
{{ content.postal_code }}
+ {% endif %} +
+ + {% if content.country %} +
+
{{ content.country }}
+
+ {% endif %} + +
+ {% if content.email %} +
{{ content.email }}
+ {% endif %} + {% if content.phone %} +
{{ content.phone }}
+ {% endif %} +
+ +{% else %} + {{ content }} +{% endif %} diff --git a/templates/yamlform-composite-creditcard.html.twig b/templates/yamlform-composite-creditcard.html.twig new file mode 100644 index 0000000..4ff8add --- /dev/null +++ b/templates/yamlform-composite-creditcard.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Default theme implementation of a creditcard composite form element. + * + * Available variables: + * - content: The creditcard form element to be output. + * - flexbox: Determines if Flexbox layout should be applied to the composite + * element. + * + * @see template_preprocess_yamlform_creditcard() + * + * @ingroup themeable + */ +#} +{% if flexbox %} + + {% if content.name %} +
+
{{ content.name }}
+
+ {% endif %} + +
+ {% if content.type %} +
{{ content.type }}
+ {% endif %} +
{{ content.number }}
+
+ +
+
+ {{ content.expiration }} + {{ content.expiration_month }} + {{ content.expiration_year }} +
+
+ +{% else %} + {{ content }} +{% endif %} diff --git a/templates/yamlform-composite-name.html.twig b/templates/yamlform-composite-name.html.twig new file mode 100644 index 0000000..9cf51e7 --- /dev/null +++ b/templates/yamlform-composite-name.html.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Default theme implementation of a name composite form element. + * + * Available variables: + * - content: The name form element to be output. + * - flexbox: Determines if Flexbox layout should be applied to the composite + * element. + * + * @see template_preprocess_yamlform_name() + * + * @ingroup themeable + */ +#} +{% if flexbox %} +
+ {% if content.title %} +
{{ content.title }}
+ {% endif %} + {% if content.first %} +
{{ content.first }}
+ {% endif %} + {% if content.middle %} +
{{ content.middle }}
+ {% endif %} + {% if content.last %} +
{{ content.last }}
+ {% endif %} + {% if content.suffix %} +
{{ content.suffix }}
+ {% endif %} + {% if content.degree %} +
{{ content.degree }}
+ {% endif %} +
+{% else %} + {{ content }} +{% endif %} diff --git a/yamlform.module b/yamlform.module index 04d8625..2868f3e 100755 --- a/yamlform.module +++ b/yamlform.module @@ -402,6 +402,19 @@ function yamlform_theme() { 'variables' => ['element' => NULL, 'value' => NULL, 'options' => []], ], + 'yamlform_composite_address' => array( + 'render element' => 'element', + ), + 'yamlform_composite_contact' => array( + 'render element' => 'element', + ), + 'yamlform_composite_creditcard' => array( + 'render element' => 'element', + ), + 'yamlform_composite_name' => array( + 'render element' => 'element', + ), + 'yamlform_codemirror' => [ 'variables' => ['code' => NULL, 'type' => 'text'], ],