Maybe I am doing this wrong, but regardless of the settings I enter for Power Transforms ( Scale, Position Y, Position X ), I get an error.

Invalid value for Font Awesome Power Transform grow. Please see the Font Awesome icon list for information on correct values.

Full config:
Icon: calendar-check
Style: Solid
Size: Default
Border: Yes
Icon Mask:
- Icon Name: circle
- Style: Regular
Power Transforms:
- Scale:
- - Scale Type: Grow
- - Scale Value: 2
- Position Y:
- - Position Type: Down
- - Position Value: 5
- Position X:
- - Position Type: Left
- - Position Value: 2

The error seems to be thrown in src/Plugin/Field/FieldWidget/FontAwesomeIconWidget.php around line 370

// Check the value of the power transform.
    $transformSettings = $form_state->getValues();
    foreach (array_slice($element['#parents'], 0, 5) as $key) {
      $transformSettings = $transformSettings[$key];
    }

    if (!is_numeric($transformSettings['value'])) {
      $form_state->setError($element, t("Invalid value for Font Awesome Power Transform %value. Please see @iconLink for information on correct values.", [
        '%value' => $value,
        '@iconLink' => Link::fromTextAndUrl(t('the Font Awesome icon list'), Url::fromUri('https://fontawesome.com/how-to-use/svg-with-js'))->toString(),
      ]));
    }

What I can't figure out is why the Power Transform "type" should be numeric? From what I can tell, a string should be valid. The "value" should be numeric.

I think the validation function should look at the field type to determine if the input should be numeric or not. I haven't thought of a great way to do this yet.

Comments

scottsawyer created an issue. See original summary.

daniel.moberly’s picture

I just duplicated your settings and got no error on the transform - it renders as expected. Can you send a screenshot of your settings?

scottsawyer’s picture

StatusFileSize
new204.78 KB

Daniel, my apologies for not responding more quickly, I missed the notification.

What am I doing wrong?

daniel.moberly’s picture

I have no idea - the exact settings you show in your image work fine for me. Can you give me the exact steps to recreate your problem?

scottsawyer’s picture

Hey Daniel,

Thank you for your help. I have some nested paragraphs ( if that matters ), one called "Section Title", with a Fontawesome icon field. I haven't done any alters or anything with that field.

  1. set any icon ( fa-table-tennis )
  2. leave all other settings as default (Style: Solid, Size: Default, everything else blank )
  3. under Power Transforms, set Scale to Shrink or Grow, under Scale Value, set any number ( 1.5 )
  4. save the node and the error appears.

I was suspecting it had something to do with the aforementioned lines in src/Plugin/Field/FieldWidget/FontAwesomeIconWidget.php , so I dumped $transformSettings into the error to see what is in there:

 /**
   * Validate the Font Awesome power transforms.
   */
  public static function validatePowerTransforms($element, FormStateInterface $form_state) {
    $value = $element['#value'];
    if (strlen($value) == 0) {
      $form_state->setValueForElement($element, '');
      return;
    }

    // Check the value of the power transform.
    $transformSettings = $form_state->getValues();
    foreach (array_slice($element['#parents'], 0, 5) as $key) {
      $transformSettings = $transformSettings[$key];
    }

    if (!is_numeric($transformSettings['value'])) {
      $form_state->setError($element, t("Here is the full %transformSettings", [
        '%transformSettings' => print_r($transformSettings, TRUE),
      ]));
    }
  }

What this produces is a HUGE array of everything in my Paragraph subform ( title ):

Array ( [subform] => Array ( [field_background_color] => Array ( [0] => Array ( [color] => [opacity] => ) ) [field_border_color] => Array ( [0] => Array ( [color] => [opacity] => ) ) [field_border_width] => Array ( [0] => Array ( [value] => 0 ) ) [field_components] => Array ( [0] => Array ( [subform] => Array ( [field_font_family] => Array ( [0] => Array ( [value] => lobster ) ) [field_icon_color] => Array ( [0] => Array ( [color] => [opacity] => ) ) [field_large_horizontal_align] => Array ( [0] => Array ( [value] => large-align-left ) ) [field_large_padding_bottom] => Array ( [0] => Array ( [value] => 0 ) ) [field_large_padding_left] => Array ( [0] => Array ( [value] => 0 ) ) [field_large_padding_right] => Array ( [0] => Array ( [value] => 0 ) ) [field_large_padding_top] => Array ( [0] => Array ( [value] => 0 ) ) [field_large_text_align] => Array ( [0] => Array ( [value] => large-text-left ) ) [field_medium_horizontal_align] => Array ( [0] => Array ( [value] => medium-align-left ) ) [field_medium_padding_bottom] => Array ( [0] => Array ( [value] => 0 ) ) [field_medium_padding_left] => Array ( [0] => Array ( [value] => 0 ) ) [field_medium_padding_right] => Array ( [0] => Array ( [value] => 0 ) ) [field_medium_padding_top] => Array ( [0] => Array ( [value] => 0 ) ) [field_medium_text_align] => Array ( [0] => Array ( [value] => medium-text-left ) ) [field_small_horizontal_align] => Array ( [0] => Array ( [value] => align-left ) ) [field_small_padding_bottom] => Array ( [0] => Array ( [value] => 0 ) ) [field_small_padding_left] => Array ( [0] => Array ( [value] => 0 ) ) [field_small_padding_right] => Array ( [0] => Array ( [value] => 0 ) ) [field_small_padding_top] => Array ( [0] => Array ( [value] => 0 ) ) [field_small_text_align] => Array ( [0] => Array ( [value] => small-text-left ) ) [field_text_color] => Array ( [0] => Array ( [color] => #0a0a0a [opacity] => 1 ) ) [field_text_shadow] => Array ( [0] => Array ( [value] => none ) ) [field_text_size] => Array ( [0] => Array ( [value] => 3 ) ) [field_title] => Array ( [0] => Array ( [value] => ) ) [field_title_icon] => Array ( [0] => Array ( [icon_name] => table-tennis [settings] => Array ( [style] => fas [size] => [fixed-width] => 0 [border] => 0 [invert] => 0 [animation] => [pull] => [masking] => Array ( [mask] => [style] => fas ) [power_transforms] => Array ( [rotate] => Array ( [value] => ) [flip-h] => Array ( [value] => 0 ) [flip-v] => Array ( [value] => 0 ) [scale] => Array ( [type] => shrink [value] => 1.5 ) [position_y] => Array ( [type] => [value] => ) [position_x] => Array ( [type] => [value] => ) ) ) ) ) [field_title_icon_placement] => inline-before ) [top] => Array ( [links] => Array ( [remove_button] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Remove [arguments:protected] => Array ( ) ) ) ) [_weight] => 0 ) [add_more] => Array ( [add_more_button_image] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Add @type [arguments:protected] => Array ( [@type] => Image ) ) [add_more_button_title] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Add @type [arguments:protected] => Array ( [@type] => Title ) ) [add_more_button_subtitle] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Add @type [arguments:protected] => Array ( [@type] => Subtitle ) ) [add_more_button_text] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Add @type [arguments:protected] => Array ( [@type] => Text ) ) [add_more_button_buttons] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Add @type [arguments:protected] => Array ( [@type] => Buttons ) ) ) ) [field_drop_shadow] => none [field_large_direction] => large-flex-dir-column [field_large_horizontal_align] => large-align-left [field_large_order] => Array ( [0] => Array ( [value] => 0 ) ) [field_large_vertical_align] => large-align-top [field_large_width] => large-auto [field_medium_direction] => medium-flex-dir-column [field_medium_horizontal_align] => medium-align-left [field_medium_order] => Array ( [0] => Array ( [value] => 0 ) ) [field_medium_vertical_align] => medium-align-top [field_medium_width] => medium-auto [field_rounded_border] => Array ( [value] => 0 ) [field_small_direction] => flex-dir-column [field_small_horizontal_align] => align-left [field_small_order] => Array ( [0] => Array ( [value] => 0 ) ) [field_small_vertical_align] => align-top [field_small_width] => small-auto ) [top] => Array ( [links] => Array ( [remove_button] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Remove [arguments:protected] => Array ( ) ) [collapse_button] => Drupal\Core\StringTranslation\TranslatableMarkup Object ( [translatedMarkup:protected] => [options:protected] => Array ( ) [stringTranslation:protected] => [string:protected] => Collapse [arguments:protected] => Array ( ) ) ) ) [_weight] => 0 )

That is basically all of the fields in my Paragraph, including the icon field 'field_title_icon'.

What I am thinking ( and I may be WAY wrong about this ) is, when the validation function does this:

// Check the value of the power transform.
    $transformSettings = $form_state->getValues();
    foreach (array_slice($element['#parents'], 0, 5) as $key) {
      $transformSettings = $transformSettings[$key];
    }

It's way too greedy, climbing all the way up the Paragraph subform. I am wondering if setting a '#tree' => TRUE on the $element['settings'] ( around line 87 ) or even on each of the settings groups would help prevent $element['#parents'] from going too high in the form?

daniel.moberly’s picture

Title: Invalid value for Font Awesome Power Transform » Power transforms not properly validated when nested
Status: Active » Needs review
StatusFileSize
new5.48 KB

You are right, and in fact the entire validation system is not written very well. Attaching a patch which should validate properly regardless of the form nesting. Let me know if it fixes your issue!

scottsawyer’s picture

If I haven't said it before, it was an oversight on my part. YOU ARE THE MAN! Thank you so much!

daniel.moberly’s picture

Status: Needs review » Fixed

Glad to hear it worked for you! Pushing to dev.

  • Daniel.Moberly committed 9a4282d on 8.x-2.x
    Issue #3045041 by Daniel.Moberly, scottsawyer: Power transforms not...
truls1502’s picture

Does it need to backport for D7 too?

daniel.moberly’s picture

The drupal 7 version doesn't have the icon field, so it shouldn't need a backport.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.