Difference between revisions of "MediaWiki:Form.rythm"
Jump to navigation
Jump to search
Line 5: | Line 5: | ||
// a form with fields | // a form with fields | ||
class Form { | class Form { | ||
+ | Captach captcha; | ||
+ | boolean de; // true if things are to be displayed in german | ||
Map<String,Field> fieldMap=new HashMap<String,Field>(); | Map<String,Field> fieldMap=new HashMap<String,Field>(); | ||
String title; | String title; | ||
String title_de; | String title_de; | ||
− | public Form(Field[] fields | + | public Form(boolean de,Field[] fields) { |
− | this. | + | this.de=de; |
− | |||
for (Field field:fields) { | for (Field field:fields) { | ||
this.addField(field); | 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; | ||
} | } | ||
Line 52: | Line 64: | ||
public Field(String name,String label_en, String label_de, String icon, int 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); | 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+"?"; | ||
} | } | ||
} | } | ||
Line 82: | Line 106: | ||
} | } | ||
@// formvalidation | @// formvalidation | ||
− | @def formvalidate( | + | @def formvalidate(Form form) { |
<style> | <style> | ||
#success_message{ display: none;} | #success_message{ display: none;} | ||
Line 98: | Line 122: | ||
@{ String delim="";} | @{ String delim="";} | ||
@for (Field field:form.getFields()) { | @for (Field field:form.getFields()) { | ||
− | @(delim)@(fieldvalidate(de,field)) | + | @(delim)@(fieldvalidate(form.de,field)) |
@{ delim=",";} | @{ delim=",";} | ||
} | } | ||
Line 114: | Line 138: | ||
} | } | ||
@// show form | @// show form | ||
− | @def showform( | + | @def showform(Form form){ |
<form class="well form-horizontal" action=" " method="post" id="contact_form"> | <form class="well form-horizontal" action=" " method="post" id="contact_form"> | ||
<fieldset> | <fieldset> | ||
<!-- Form Name --> | <!-- Form Name --> | ||
− | <legend>@(de?form.title_de:form.title)</legend> | + | <legend>@(form.de?form.title_de:form.title)</legend> |
@for (Field field:form.getFields()) { | @for (Field field:form.getFields()) { | ||
− | @field(de,field) | + | @field(form.de,field) |
} | } | ||
<!-- Success message --> | <!-- Success message --> | ||
− | <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> | + | <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 --> | <!-- Button --> | ||
<div class="form-group"> | <div class="form-group"> |
Revision as of 14:34, 6 November 2017
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>
}