Cleaned up JS a bit

flask_admin/form/widgets.py

@@ -17,14 +17,25 @@ class Select2Widget(widgets.Select):
     def __call__(self, field, **kwargs):
         allow_blank = getattr(field, 'allow_blank', False)
 
+        kwargs['data-role'] = u'select2'
+
         if allow_blank and not self.multiple:
-            kwargs['data-role'] = u'select2blank'
-        else:
-            kwargs['data-role'] = u'select2'
+            kwargs['data-allow-blank'] = u'1'
 
         return super(Select2Widget, self).__call__(field, **kwargs)
 
 
+class Select2TagsWidget(widgets.TextInput):
+    """`Select2 <http://ivaynberg.github.com/select2/#tags>`_ styled text widget.
+    You must include select2.js, form.js and select2 stylesheet for it to work.
+    """
+    def __call__(self, field, **kwargs):
+        kwargs['data-role'] = u'select'
+        kwargs['data-tags'] = u'1'
+        return super(Select2TagsWidget, self).__call__(field, **kwargs)
+
+
+
 class DatePickerWidget(widgets.TextInput):
     """
         Date picker widget.
@@ -73,12 +84,3 @@ class RenderTemplateWidget(object):
 
         template = jinja_env.get_template(self.template)
         return template.render(kwargs)
-
-
-class Select2TagsWidget(widgets.TextInput):
-    """`Select2 <http://ivaynberg.github.com/select2/#tags>`_ styled text widget.
-    You must include select2.js, form.js and select2 stylesheet for it to work.
-    """
-    def __call__(self, field, **kwargs):
-        kwargs['data-role'] = u'select2tags'
-        return super(Select2TagsWidget, self).__call__(field, **kwargs)

flask_admin/static/admin/js/form.js

 (function() {
     var AdminForm = function() {
-      this.applyStyle = function(el, name) {
+      // Field converters
+      var fieldConverters = [];
+
+      /**
+      * Process data-role attribute for the given input element. Feel free to override
+      *
+      * @param {Selector} $el jQuery selector
+      * @param {String} name data-role value
+      */
+      this.applyStyle = function($el, name) {
+        // Process converters first
+        for (var conv in fieldConverters) {
+            var fildConv = fieldConverters[conv];
+
+            if (fieldConv($el, name))
+                return true;
+        }
+
         switch (name) {
             case 'select2':
-                $(el).select2({width: 'resolve'});
-                break;
-            case 'select2blank':
-                $(el).select2({allowClear: true, width: 'resolve'});
-                break;
-            case 'select2tags':
-                $(el).select2({tags: [], tokenSeparators: [','], width: 'resolve'});
-                break;
+                opts = {
+                    width: 'resolve'
+                };
+
+                if ($el.attr('data-allow-blank'))
+                    opts['allowClear'] = true;
+
+                if ($el.attr('data-tags')) {
+                    $.extend(opts, {
+                        multiple: true,
+                        tokenSeparators: [',']
+                    });
+                }
+
+                $el.select2(opts);
+                return true;
             case 'datepicker':
-                $(el).datepicker();
-                break;
+                $el.datepicker();
+                return true;
             case 'datetimepicker':
-                $(el).datepicker({displayTime: true});
-                break;
+                $el.datepicker({displayTime: true});
+                return true;
         }
       };
 
+      /**
+      * Add inline form field
+      *
+      * @method addInlineField
+      * @param {String} id Form ID
+      * @param {Node} el Form element
+      * @param {String} template Form template
+      */
       this.addInlineField = function(id, el, template) {
         var $el = $(el);
         var $template = $($(template).text());
@@ -60,12 +93,19 @@
         this.applyGlobalStyles($template);
       };
 
+      /**
+      * Apply global input styles.
+      *
+      * @method applyGlobalStyles
+      * @param {Selector} jQuery element
+      */
       this.applyGlobalStyles = function(parent) {
-        $('[data-role=select2]', parent).select2({width: 'resolve'});
-        $('[data-role=select2blank]', parent).select2({allowClear: true, width: 'resolve'});
-        $('[data-role=select2tags]', parent).select2({multiple: true, tokenSeparators: [','], width: 'resolve'});
-        $('[data-role=datepicker]', parent).datepicker();
-        $('[data-role=datetimepicker]', parent).datepicker({displayTime: true});
+        var self = this;
+
+        $('[data-role]', parent).each(function() {
+            var $el = $(this);
+            self.applyStyle($el, $el.attr('data-role'));
+        });
       };
     };
 
@@ -80,6 +120,8 @@
     // Expose faForm globally
     var faForm = window.faForm = new AdminForm();
 
-    // Apply global styles
-    faForm.applyGlobalStyles(document);
+    // Apply global styles for current page after page loaded
+    $(function() {
+        faForm.applyGlobalStyles(document);
+    });
 })();