Module settings

Intro

Displays a settings button on the toolbar allowing the editor to configure the current module

• wf-class: allow the editor to choose a CSS class for this module, allowing them to change between variations of this module:

      <div wf-module="wfed/composite/page">
          <wf-class name="image-position">
              <title>Image position</title>
              <option value="">Default position</option>
              <option value="left">On the left</option>
              <option value="right">On the right</option>
          </wf-class>
          ... rest of the markup of this module/embedded submodules/etc ...
      </div>

  When the editor selects one of the options, the corresponding CSS class is added automatically to this module.

  By default, if there are less than 5 options, it displays as radio buttons, if there are more, it displays as a <select> element, to save space. If you want to override this behaviour, you can explicitely set <wf-class expanded="false"> (will always display as select, no matter how many options)

• wf-multi-class: Same as the wf-class, but allows checking multiple options (displayed as checkboxes).

• wf-setting: Generic element for other setting types:

      <div wf-module="wfed/composite/page">
          <wf-setting type="select" name="generic-select">
              <title>Title displayed as the label for this select</title>
              <option value="first-option">First option</option>
              <option value="second-option">Second option</option>
          </wf-setting>
      </div>

You can use as many settings as you want for each module, just make sure the name of the setting is different for each of them (that's one of the reasons the name attribute is required)

        <div wf-module="wfed/composite/page">
            <wf-class name="image-position">
                ... options ...
            </wf-class>
            <wf-class name="title-size">
                ... options ...
            </wf-class>
            <wf-multi-class name="other-classes">
                ... options ...
            </wf-class>
        </div>

• ajax-choice: In the form settings, you can generate the values of the fields dynamically through AJAX requests:

  
      <wf-setting type="ajax-choice" expanded="false" name="dim2" url="{{ path('example_route', { index: '2' }) }}">
          <title>DIM2</title>
      </wf-setting>

• wf-article-types: allow the editor to filter the search results. In the example we will obtain just pages of type "gallery".

      <div
              wf-module="wfed/composite/module"
              wf-role="related_gallery"
              wf-article-types="gallery"
      >
      ...
      </div>

Using settings in bindings

To use the value of a certain setting as part of a binding you must define a wf-script element:

    <div
        wf-module="wfed/composite/module"
        wf-new
        wf-role="test_composite"
        wf-toolbar-position="left"
        wf-allow="+-"
        class="test-module"
        >

            <wf-setting type="select" name="xxx">
                <title>Title displayed as the label for this select</title>
                <option value="option1">First option</option>
                <option value="option2">Second option</option>
            </wf-setting>

            <script type="javascript" wf-script>
                var computeds = {
                    isOption1: () => this.getBinding('settings_xxx') === 'option1',
                    isOption2: () => this.getBinding('settings_xxx') === 'option2',
                }
            </script>

            <div class="some-content-for-first-option" data-bind="toggle:isOption1">
                Option 1
            </div>

            <div class="some-content-for-second-option" data-bind="toggle:isOption2">
                Option 2
            </div>

    </div>

Using module setting to determine avalanche filter

This example ilustrate how to use a setting to determine which avalanche filter to use. Note the usage of computeds_ in the filter name, it is mandatory.

IMPORTANT: Also note that, in order to avoid clashing between the computed name and content model's properties, the example is not using "imageFilter" or "image_filter" as the name of the computed property

IMPORTANT: The settings' names are camelCased. So, if you have a setting image_size, use the camelCased version: this.getBinding('settings_imageSize')

    <div
        wf-module="wfed/composite/module"
        wf-new
        wf-role="test_composite"
        wf-toolbar-position="left"
        wf-allow="+-"
        class="test-module"
        >

            <wf-setting type="select" name="xxx">
                <title>Title displayed as the label for this select</title>
                <option value="option1">First option</option>
                <option value="option2">Second option</option>
            </wf-setting>

            <script type="javascript" wf-script>
                var computeds = {
                    imgFilter: () => this.getBinding('settings_xxx') === 'option2' ? 'small_image' : 'big_image'
                }
            </script>

            <img wf-bind="filter:computeds_imgFilter" />


    </div>