MediaWiki:Form.rythm

Rythm template source

@// field definitions
@def static {
  // a form with fields
  class Form {
    Captach captcha;
    boolean de; // true if things are to be displayed in german
    Map<String,Field> fieldMap=new HashMap<String,Field>();
    String title;
    String title_de;
    
    public Form(boolean de,Field[] fields) {
      this.de=de;
      for (Field field:fields) {
        this.addField(field);
      }
      captcha=new Captcha(de);
    }

    public void setTitle(String title, String title_de) {
      this.title=title;
      this.title_de=title_de;    
    }

    public void setSuccess(String success, String success_de) {
      this.success=success;
      this.success_de=success_de;    
    }
    
    public Collection<Field> getFields() {
      return fieldMap.values();
    }
    
    public void addField(Field field) {
      fieldMap.put(field.name,field);
    }
    
    public Field getField(String fieldName) {
      Field field=fieldMap.get(fieldName);
      return field;
    }
  }
  // a field
  class Field {
     String name;
     String label_en;
     String label_de; 
     String placeholder_en;
     String placeholder_de;
     String icon;
     int min;

     public Field(String name,String label_en, String label_de, String placeholder_en,String placeholder_de, String icon, int min) {
        this.name=name;
        this.label_en=label_en;
        this.label_de=label_de;
        this.placeholder_de=placeholder_de;
        this.placeholder_en=placeholder_en;
        this.icon=icon;
        this.min=min;
     }

    public Field(String name,String label_en, String label_de, String icon, int min) {
      this(name,label_en,label_de,label_en,label_de,icon,min);
    }
  }

  class Captcha {
    int expected;
    String task;

    public void Captcha(boolean de) {
      int a1=(int)(Math.random() * 10 + 1);
      int a2=(int)(Math.random() * 10 + 1);
      expected=a1+a2;
      task=de?"Was ist "+a1+"+"+a2+"?":"What is "+a1+"+"+a2+"?";
    }
  }
}
@// add a bootstrap field validation
@def fieldvalidate(boolean de,Field field) {
@(field.name): @("{")
   validators:  @("{")
     stringLength: @("{")
        min: @(field.min),
     @("}"),
     notEmpty: @("{")
        message: '@(de?"Bitte "+field.label_de+" eingeben":"Please supply your "+field.label_en)'
       @("}")
     @("}")
   @("}")
}
@// add a form field
@def field(boolean de,Field field) {
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label">@(de?field.label_de:field.label_en)</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-@(field.icon)"></i></span>
  <input  name="@(field.name)" placeholder="@(de?field.placeholder_de:field.placeholder_en)" class="form-control"  type="text">
    </div>
  </div>
</div>
}
@// formvalidation
@def formvalidate(Form form) {
  <style>
#success_message{ display: none;}
  </style>
  <script>
 $(document).ready(function() @("{")
    $('#contact_form').bootstrapValidator(@("{")
      // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
      feedbackIcons: @("{")
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      @("}"),
      fields: @("{")
@{ String delim="";}
@for (Field field:form.getFields()) {
@(delim)@(fieldvalidate(form.de,field))
@{ delim=",";}
}
    @("}")
  @("}"))
  .on('success.form.bv', function(e) @("{")
    $('#success_message').slideDown(@("{") opacity: "show" @("}"), "slow") // Do something ...
    $('#contact_form').data('bootstrapValidator').resetForm();

    // Prevent form submission
    e.preventDefault();
  @("}"));
 @("}"));
  </script>
}
@// show form
@def showform(Form form){
   <form class="well form-horizontal" action=" " method="post"  id="contact_form">
      <fieldset>
        <!-- Form Name -->
          <legend>@(form.de?form.title_de:form.title)</legend>
@for (Field field:form.getFields()) {
@field(form.de,field)
}
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> @(form.de?form.success_de:form.success)</div>
<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">
    <button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
  </div>
</div>
</fieldset>
</form>
}