Revision as of 14:03, 4 November 2017

Links

Rythm template

@// Rythm template for the WikiCMS approach
@include(wiki.MediaWiki.Bootstrap.rythm)
@include(wiki.MediaWiki.Form.rythm)
@{
  Field[] fields={
    new Field("firstname","First name","Vorname","John","Erika","user",2),
    new Field("lastname","Last name","Nachname","Doe","Mustermann","user",2),
    new Field("email","E-Mail Address","E-Mail Adresse","envelope",5),
    new Field("phone","Phone number","Telefonnummer","+1 845 555-1212","+49 30 675797","earphone",8),
    new Field("address","Address","Adresse","home",8),
    new Field("zip","ZIP Code","PLZ","home",3),
    new Field("city","City","Ort","home",2)
  };
}
@{ boolean de=true;}
@header("en","ContactTest")
@bootstrap()
@formvalidate()
</head>
<body>
  <div class="container">
    <form class="well form-horizontal" action=" " method="post"  id="contact_form">
      <fieldset>
        <!-- Form Name -->
          <legend>Contact Us Today!</legend>
@for (Field field:fields) {
@field(de,field)
}

<!-- radio checks -->
 <div class="form-group">
                        <label class="col-md-4 control-label">Do you have hosting?</label>
                        <div class="col-md-4">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="hosting" value="yes" /> Yes
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="hosting" value="no" /> No
                                </label>
                            </div>
                        </div>
                    </div>

<!-- Text area -->
  
<div class="form-group">
  <label class="col-md-4 control-label">Project Description</label>
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
        	<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
  </div>
  </div>
</div>

<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</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>
</div>
</div><!-- /.container -->
<body>
</html>

@@ Line 5: / Line 5: @@
 @// Rythm template for the WikiCMS approach
 @include(wiki.MediaWiki.Bootstrap.rythm)
-@def static {
+@include(wiki.MediaWiki.Form.rythm)
-  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);
-    }
-  }
-}
 @{
    Field[] fields={
@@ Line 40: / Line 16: @@
      new Field("city","City","Ort","home",2)
    };
-}
-@// add a 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>
 }
 @{ boolean de=true;}
 @header("en","ContactTest")
 @bootstrap()
-  <style>
+@formvalidate()
-#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:fields) {
-@(delim)@fieldvalidate(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();
-            // Get the form instance
-            var $form = $(e.target);
-            // Get the BootstrapValidator instance
-            var bv = $form.data('bootstrapValidator');
-            // Use Ajax to submit form data
-            $.post($form.attr('action'), $form.serialize(), function(result) {
-                console.log(result);
-            }, 'json');
-        });
-});
-  </script>
 </head>
 <body>

Difference between revisions of "ContactTest.rythm"

Revision as of 14:03, 4 November 2017

Links

Rythm template

Navigation menu

Search