Support reusing code in TWBootstrapViewStrategyBase for custom html/css not related to Twitter Bootstrap

[atsu85]

Motivation

I'm not using Twitter Bootstrap, so the html/css for my application needs to differ slightly compared to bootstrap html/css - for example instead of:

    <div class="form-group">
      <label>
            First Name
      </label>
      <!-- by default validation message is added here -->
      <input type="text" value.bind="firstName" class="form-control" >
    </div>

I need following layout:

    <p class="field">
      <label>
            First Name
            <!-- need to add validation message here -->
      </label>
      <input type="text" value.bind="firstName" class="form-control" >
    </p>

Proposal

To be able to reuse TWBootstrapViewStrategyBase, following changes need to be made in that class:

1. export TWBootstrapViewStrategyBase from index.js
2. allow passing following parameters to the constructor (instead of hard-coded values):

• formGroupClass = "form-group"
• validationMsgTagName = "p"

3. extract code related to inserting helpBlock from findExistingHelpBlock
4. extract code related to finding existing helpBlock from appendMessageToElement

[atsu85]

Please merge my pull request #169
to resolve this issue.

[atsu85]

After merging this pull request, following ViewStrategy will work for the desired example:

import {TWBootstrapViewStrategyBase} from 'aurelia-validation';

export class TKRViewStrategy extends TWBootstrapViewStrategyBase {

  constructor(helpBlockClass: string, formGroupClass: string, validationMsgTagName: string ) {
    super(false, true, helpBlockClass, formGroupClass, validationMsgTagName);
  }

  findExistingHelpBlock(element: Element) {
    var helpBlock: Element = <Element>element.lastChild;
    if (helpBlock) {
      if (!helpBlock.classList) {
        return null;
      }
      else if (!helpBlock.classList.contains(this.helpBlockClass)) {
        return null;
      }
    }
    return helpBlock;
  }

  addHelpBlockToElement(element: Element, helpBlock: Element) {
    element.appendChild(helpBlock);
  }
}

when plugin is configured as follows:

    .plugin('aurelia-validation', (config: ValidationConfig) => {
      config.useViewStrategy(new TKRViewStrategy('custom-validation-msg-class', 'field', 'span'));
    })

[plwalters]

Moved to https://github.com/aurelia/templating-validation/issues/new