Allow only_if to accept a conditional attribute

[psal0]

Feature request:
It would enable us to create more complex but yet clean section forms if we had an only_if filter that checks for true / false statements additionally to boolean values.

Right now, visibility is true when there is no only_if setting or the related boolean field is true. Maybe you could add a third case in which the param is a hash and the seleted option equals the condition.

We could show or hide input fields dependent on user choices, e.g. a value of a select option or a radiobutton option chosen.

settings:
- label: Post Type
  id: post_type
  type: select
  select_options:
  - value: image
    label: Image
  - value: gallery
    label: Gallery
  - value: slieder
    label: Slider
  - value: html5
    label: "HTML 5 Video"
  - value: youtube
    label: "YouTube Video"
  - value: vimeo
    label: Vimeo Video
    
-  label: "Hero Image"
   id: image
   type: image_picker
   only_if: {post_type: 'image')

[greyskin]

This is a great idea. At present our sections are bloated with options due to the lack of this feature.

Consider another example, which would benefit hugely from @patternpoints' suggestion:

- label: Background Enabled
  id: section_bg_enabled
  type: checkbox
  default: false

- label: Select Background Type
  id: section_bg_type
  type: radio
  options:
  - label: Colour
    value: color
  - label: Image
    value: image
  only_if: section_bg_enabled
  
- label: Background Colour
  id: section_bg_color
  type: select
  options:
  - label: Select Background Colour
    value: ''
  # Enter collection of site-specific colours. Value must match bg-xxx rules defined in main.css.
  only_if: {section_bg_type: 'color'}

- label: Background Image
  id: section_bg_img_url
  type: image_picker
  compress:
    max_width: '2560'
    max_height: '1440'
  only_if: {section_bg_type: 'image'}

- label: "Background images should ideally be 2560 pixels wide x 1440 pixels high (a 16:9 aspect ratio) and optimised for web to less than 500kb in file size. This will ensure the best experience for your users on both large screens and mobile devices. (The General Content Section will automatically reduce images that are too large. Results may vary.)"
  id: section_bg_img_hint
  type: hint
  only_if: {section_bg_type: 'image'}

- label: Image Horizontal Position
  id: section_bg_img_horz
  type: integer
  only_if: {section_bg_type: 'image'}

- label: "Specify the horizontal position of the image, expressed as a percentage. (0% = left, 100% = right)"
  id: section_bg_img_horz_hint
  type: hint
  only_if: {section_bg_type: 'image'}

- label: Image Vertical Position
  id: section_bg_img_vert
  type: integer
  only_if: {section_bg_type: 'image'}

- label: "Specify the vertical position of the image, expressed as a percentage. (0% = top, 100% = bottom)"
  id: section_bg_img_vert_hint
  type: hint
  only_if: {section_bg_type: 'image'}

- label: Image Brightness
  id: section_bg_img_brightness
  type: integer
  only_if: {section_bg_type: 'image'}

- label: "Specify the brightness of the image, expressed as a percentage. (0% = black, 100% = default, 200% = twice as bright, etc)."
  id: section_bg_img_brightness_hint
  type: hint
  only_if: {section_bg_type: 'image'}

[psal0]

For support of the current syntax of the only_if filter, it could either take a string (the id of the boolean field) or the hash. It would be cool, if the filter would actually also accept an array of hashes. And I guess, the hash would need to have named keys. Something like this:

- label: Background Image
  id: section_bg_img_url
  type: image_picker
  compress:
    max_width: '2560'
    max_height: '1440'
  only_if: 
  - id: section_bg_type
    matches: 'image'
  - id: some_other_field_id
    matches: 'some_option_seleted'

[greyskin]

This obstacle can now be overcome using CSS4's recently released :has pseudo-class.

We've been using CSS in our Section settings for a while now for styling fonts, colours, etc - to keep the Back Office Editor in line with our branding. The :has pseudo-class allows one to effectively target parent selectors, which is what is required due to the way Locomotive CMS Sections Back Office HTML is structured.

We can achieve conditional displays like the following example:

Sections Settings:

settings:
- label: "
    <style>
        /* Hide editor-inputs following bg_type, except some that we don't want hidden */
        .editor-input-radio:has(input#color,input#image) ~ .editor-input:not(
            :nth-child(6),
            :nth-child(7),
            /* and so on... */
        ) {
            display: none;
        }

        /* Display bg_color input when bg_type #color is selected */
        .editor-input-radio:has(input#color:checked) ~ .editor-input:is(
            :nth-child(2)
        ) {
            display: block;
        }

        /* Display bg_image inputs when bg_type #image is selected */
        .editor-input-radio:has(input#image:checked) ~ .editor-input:is(
            :nth-child(3)
        ) {
            display: block;
        }
    </style>"
    id: section_css
    type: hint

- label: Select Background Type
  id: bg_type
  type: radio
  options:
  - label: Colour
    value: color
  - label: Image
    value: image

- label: Background Colour
  id: bg_color
  type: select
  options:
  - label: Select Background Colour
    value: ''
  - label: Red
    value: red
  # Enter collection of site-specific colours.

- label: Background Image
  id: bg_img_url
  type: image_picker
  compress:
    max_width: '2560'
    max_height: '1440'

Hope this helps others!