- {{ form.username }}
+
{% render_rule_fields form %}
diff --git a/modoboa/extensions/radicale/templatetags/radicale_tags.py b/modoboa/extensions/radicale/templatetags/radicale_tags.py
index 20fc74f7c..f9992e354 100644
--- a/modoboa/extensions/radicale/templatetags/radicale_tags.py
+++ b/modoboa/extensions/radicale/templatetags/radicale_tags.py
@@ -80,8 +80,7 @@ def calendar_actions(calendar):
@register.simple_tag
def render_rule_fields(form):
- """Render access rules for a given calendar.
- """
+ """Render access rules for a given calendar."""
from django.forms import forms
cpt = 1
diff --git a/modoboa/lib/templatetags/form_tags.py b/modoboa/lib/templatetags/form_tags.py
index 5d4e01a42..a53826d07 100644
--- a/modoboa/lib/templatetags/form_tags.py
+++ b/modoboa/lib/templatetags/form_tags.py
@@ -5,7 +5,6 @@ Form rendering tags.
from django import forms
from django import template
from django.template.loader import render_to_string
-from django.utils.translation import ugettext_lazy
from modoboa.lib.formutils import SeparatorField
@@ -55,6 +54,7 @@ def render_field(
@register.simple_tag
def render_fields_group(form, pattern):
+ """Render a group of fields."""
first = forms.forms.BoundField(form, form.fields[pattern], pattern)
configure_field_classes(first)
label = first.label
@@ -73,7 +73,8 @@ def render_fields_group(form, pattern):
cpt += 1
return render_to_string("common/generic_fields_group.html", dict(
- label=label, help_text=first.help_text, group=group, haserror=haserror
+ label=label, help_text=first.help_text, group=group, haserror=haserror,
+ pattern=pattern
))
@@ -82,7 +83,8 @@ def render_extra_fields(form):
result = ''
for fname in form.extra_fields:
result += render_to_string("common/generic_field.html", {
- 'field': form[fname], 'help_display_mode': 'tooltip'
+ 'field': form[fname], 'help_display_mode': 'tooltip',
+ 'label_width': 'col-sm-4'
})
return result
diff --git a/modoboa/static/js/dynamic_input.js b/modoboa/static/js/dynamic_input.js
index 509c29c24..da5a62f9b 100644
--- a/modoboa/static/js/dynamic_input.js
+++ b/modoboa/static/js/dynamic_input.js
@@ -1,19 +1,31 @@
(function($) {
+
+ /**
+ * Creates an instance of DynamicInput.
+ *
+ * @constructor
+ * @this DynamicInput
+ * @param {Object} element -
+ * @param {Object} options -
+ */
var DynamicInput = function(element, options) {
this.$element = $(element);
+ this.$input = (this.$element.is("input")) ?
+ this.$element : this.$element.find("input");
this.options = $.extend({}, $.fn.dynamic_input.defaults, options);
this.nextid = 1;
- this.baseid = this.$element.attr("id");
- this.basename = this.$element.attr("name").split("_")[0];
+ this.baseid = this.$input.attr("id");
+ this.basename = this.$input.attr("name").split("_")[0];
+
+ this.$input.keyup($.proxy(this.checknotempty, this));
- this.$element.keyup($.proxy(this.checknotempty, this));
for (var cpt = 1; true; cpt++) {
var $input = $("#" + this.baseid + "_" + cpt);
if (!$input.length) {
break;
}
- $input.after(this.addrmlink($input));
+ $input.parent().after(this.addrmlink($input));
$input.focusout(this.checkempty);
this.nextid++;
}
@@ -22,57 +34,98 @@
DynamicInput.prototype = {
constructor: DynamicInput,
+ /**
+ * Add a remove link right to an input.
+ *
+ * @this DynamicInput
+ * @param {Object} input - target input
+ * @return {Object} - created link
+ */
addrmlink: function(input) {
- var $rmlink = $('
');
+ var $rmlink = $(
+ "
".format(input.attr("id")) +
+ ""
+ );
- $rmlink.click($.proxy(this.removeinput, $rmlink));
+ $rmlink.click($.proxy(this.removeinput, this));
return $rmlink;
},
+ /**
+ * Add a new input.
+ *
+ * @this DynamicInput
+ */
addinput: function() {
+ var $clone = this.$element.clone();
var id = this.baseid + '_' + this.nextid;
var name = this.basename + '_' + this.nextid;
- var $ninput = $('
');
+
+ $clone.insertAfter(this.$element);
+
+ var $ninput = $clone.find("input").attr("id", id).attr("name", name);
var $rmlink = this.addrmlink($ninput);
+ $clone.append($rmlink);
$ninput.focusout(this.checkempty);
- $ninput.val(this.$element.val());
- this.$element.val(this.options.emptylabel);
- this.$element.after($ninput, $rmlink);
+ $ninput.val(this.$input.val());
+ this.$input.val(this.options.emptylabel);
this.nextid++;
+
+ if (this.options.input_added) {
+ this.options.input_added($clone);
+ }
},
+ /**
+ * Click event. Remove an input.
+ *
+ * @this DynamicInput
+ * @param {Object} evt - event object
+ * @param {boolean} force - force the removal if true
+ */
removeinput: function(evt, force) {
evt.preventDefault();
- var id = "#" + this.attr("id").replace("_rmbtn", "");
+
+ var $link = get_target(evt, "a");
+ var id = "#" + $link.attr("id").replace("_rmbtn", "");
var $input = $(id);
- if ($input.val() == "" && (force == undefined || !force)) {
+ if ($input.val() === "" && (force === undefined || !force)) {
+ return;
+ }
+ if (this.options.input_removed && this.options.input_removed($input)) {
return;
}
$input.remove();
- this.remove();
+ $link.remove();
},
+ /**
+ * Check if input's value is not empty before adding a new input.
+ *
+ * @this DynamicInput
+ * @param {Object} evt - event object
+ */
checknotempty: function(evt) {
if (evt.keyCode != 13) {
return;
}
- if (this.$element.val() == "") {
+ if (this.$input.val() === "") {
return;
}
this.addinput();
},
+ /**
+ * Focus out event : remove the input if it's value is empty.
+ *
+ * @param {Object} evt - event object
+ */
checkempty: function(evt) {
var $input = $(evt.target);
- if ($input.val() == "") {
+ if ($input.val() === "") {
$("#" + $input.attr("id") + "_rmbtn").trigger("click", true);
}
}
@@ -99,7 +152,9 @@
$.fn.dynamic_input.Constructor = DynamicInput;
$.fn.dynamic_input.defaults = {
- emptylabel: ""
+ emptylabel: "",
+ input_added: null,
+ input_removed: null
};
})(jQuery);
diff --git a/modoboa/static/js/global.js b/modoboa/static/js/global.js
index 599498644..30a49dba9 100644
--- a/modoboa/static/js/global.js
+++ b/modoboa/static/js/global.js
@@ -249,8 +249,14 @@ function get_parameter_by_name(url, name) {
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
-/*
- * Return the target associated to an event object.
+/**
+ * Return the target associated to an event object. You will generally
+ * use this function within a click event handler configured on a
+ * tag containg an image. (because e.target will often point to the
+ * image...)
+ *
+ * @param {Object} e - event object
+ * @param {string} tag - desired tag
*/
function get_target(e, tag) {
var $target = $(e.target);
@@ -261,7 +267,7 @@ function get_target(e, tag) {
return $target.parent();
}
-/*
+/**
* Send a simple AJAX request.
*/
function simple_ajax_request(e, uoptions) {
@@ -269,7 +275,7 @@ function simple_ajax_request(e, uoptions) {
var defaults = {};
var options = $.extend({}, defaults, uoptions);
- if (e != undefined) e.preventDefault();
+ if (e !== undefined) e.preventDefault();
$.ajax({
url: $this.attr("href"),
dataType: 'json'
diff --git a/modoboa/templates/common/generic_fields_group.html b/modoboa/templates/common/generic_fields_group.html
index 6ab5f3433..ab83b3fb2 100644
--- a/modoboa/templates/common/generic_fields_group.html
+++ b/modoboa/templates/common/generic_fields_group.html
@@ -1,21 +1,23 @@
{% load i18n %}
-
+{% endfor %}