Improve Theme functions

• Currently the themes class lacks functionality when it comes to handling checkboxes and radio inputs. (Might be more, but that’s the ones I’m focusing on at the moment)
• Some functions needs to have access to more parameters. (#432 is a good example of this)
• Several themes have different functionality (i.e. some support infoText option and other just ignore it)
• There’s no way to customize themes at runtime other than overriding functions.

If anyone have worked on creating new themes or modified some of the existing, please post your comments on how we could improve this.

[mirannda]

[pmk65]

@lukzas After I wrote the reply about afterInputReady, I updated the Spectre theme to get it to look nice with Select2 and Selectize using the afterInputReady to add/remove classes. The classes are not applied to the input element itself (Since Select2 and Selectice replaces that with a custom select), but on adjacent/sibling element (and it’s children)

Since afterInputReady is theme specific, you know where the label is based on the input field position. (I think the label element will be input.parentElement in Materialize theme)

I think this approach is better than adding extra code to the editors, like you did in #205. And also better than adding an extra parameter (Like I did for the getSelectInput ) It might be a little more complicated than just checking for a parameter, but this way we don’t have to change the theme functions (or add additional code to the editors).

Here’s an example from the Spectre theme.

  afterInputReady: function(input) {

    if (input.localName === 'select') {
      // Selectize adjustments
      if (input.classList.contains('selectized')) {
        var selectized = input.nextSibling;
        if (selectized) {
          // Remove Spectre class 'form-select' as this conflicts with Selectize styling
          selectized.classList.remove('form-select');
          $each(selectized.querySelectorAll('.form-select'), function(i, el) {
            el.classList.remove('form-select');
          });
        }
      }
      // Select2 ajustments
      else if (input.classList.contains('select2-hidden-accessible')) {
        var select2 = input.nextSibling,
            single = select2 && select2.querySelector('.select2-selection--single');
        // Add Spectre 'form-select' to single-select2 elements
        if (single) select2.classList.add('form-select');
      }
    }

    if (input.controlgroup) return;
    input.controlgroup = this.closest(input, '.form-group');
    if (this.closest(input, '.compact')) {
      input.controlgroup.style.marginBottom = 0;
    }
  },

The theme also contains some Inline Style Rules to maker further CSS adjustments to the Select2/Selectize boxes.