Valable sans JS

machines/views.py

@@ -129,11 +129,13 @@ def generate_ipv4_mbf_param( form, is_type_tt ):
     i_engine = { 'ipv4': generate_ipv4_engine( is_type_tt ) }
     i_match_func = { 'ipv4': generate_ipv4_match_func( is_type_tt ) }
     i_update_on = { 'ipv4': [f_type_id( is_type_tt )] }
+    i_gen_select = { 'ipv4': False }
     i_mbf_param = {
         'choices': i_choices,
         'engine': i_engine,
         'match_func': i_match_func,
-        'update_on': i_update_on
+        'update_on': i_update_on,
+        'gen_select': i_gen_select
     }
     return i_mbf_param
 

re2o/templatetags/massive_bootstrap_form.py

@@ -113,12 +113,29 @@ def massive_bootstrap_form(form, mbf_fields, *args, **kwargs):
                 A dict of list of ids that the values depends on. The engine
                 and the typeahead properties are recalculated and reapplied.
                 Example :
-                'addition' : {
+                'update_on' : {
                  'field_A' : [ 'id0', 'id1', ... ] ,
                  'field_B' : ... ,
                  ...
                 }
 
+            gen_select (optional)
+                A dict of boolean telling if the form should either generate
+                the normal select (set to true) and then use it to generate
+                the possible choices and then remove it or either (set to
+                false) generate the choices variable in this tag and do not
+                send any select.
+                Sending the select before can be usefull to permit the use
+                without any JS enabled but it will execute more code locally
+                for the client so the loading might be slower.
+                If not specified, this variable is set to true for each field
+                Example :
+                'gen_select' : {
+                 'field_A': True ,
+                 'field_B': ... ,
+                 ...
+                }
+
         See boostrap_form_ for other arguments
 
     **Usage**::
@@ -146,6 +163,11 @@ def massive_bootstrap_form(form, mbf_fields, *args, **kwargs):
                     [  '<field1>': '<update_on1>'
                     [, '<field2>': '<update_on2>'
                     [, ... ] ] ]
+                } ],
+                [, 'gen_select': {
+                    [  '<field1>': '<gen_select1>'
+                    [, '<field2>': '<gen_select2>'
+                    [, ... ] ] ]
                 } ]
             } ]
             [ <standard boostrap_form parameters> ]
@@ -163,6 +185,7 @@ def massive_bootstrap_form(form, mbf_fields, *args, **kwargs):
     engine = param.get('engine', {})
     match_func = param.get('match_func', {})
     update_on = param.get('update_on', {})
+    gen_select = param.get('gen_select', {})
     hidden_fields = [h.name for h in form.hidden_fields()]
 
     html = ''
@@ -184,40 +207,43 @@ def massive_bootstrap_form(form, mbf_fields, *args, **kwargs):
                 multiple = f_value.widget.allow_multiple_selected
                 f_bound = f_value.get_bound_field( form, f_name )
 
+                if gen_select.get(f_name, True) :
+                    html += render_field(
+                        f_bound,
+                        *args,
+                        **kwargs
+                    )
+
                 f_value.widget = TextInput(
                     attrs = {
                         'name': 'mbf_'+f_name,
                         'placeholder': f_value.empty_label
                     }
                 )
-                html += render_field(
+                replace_input = render_field(
                     f_value.get_bound_field( form, f_name ),
                     *args,
                     **kwargs
                 )
 
-                if multiple :
+                if not gen_select.get(f_name, True) : 
+                    html += replace_input
+
                 content = mbf_js(
                     f_name,
                     f_value,
                     f_bound,
                     multiple,
+                    replace_input,
                     choices,
                     engine,
                     match_func,
-                        update_on
+                    update_on,
-                    )
+                    gen_select
-                else :
-                    content = hidden_tag( f_bound, f_name ) + mbf_js(
-                        f_name,
-                        f_value,
-                        f_bound,
-                        multiple,
-                        choices,
-                        engine,
-                        match_func,
-                        update_on
                 )
+                if not multiple and not gen_select.get(f_name, True) :
+                    content += hidden_tag( f_bound, f_name )
+
                 html += render_tag(
                     'div',
                     content = content,
@@ -257,12 +283,14 @@ def hidden_tag( f_bound, f_name ):
         }
     )
 
-def mbf_js( f_name, f_value, f_bound, multiple,
+def mbf_js( f_name, f_value, f_bound, multiple, replace_input,
-        choices_, engine_, match_func_, update_on_ ) :
+        choices_, engine_, match_func_, update_on_, gen_select_ ) :
     """ The whole script to use """
 
+    gen_select = gen_select_.get( f_name, True )
+
     choices = ( mark_safe( choices_[f_name] ) if f_name in choices_.keys()
-        else default_choices( f_value ) )
+        else default_choices( f_value, f_bound, gen_select ) )
 
     engine = ( mark_safe( engine_[f_name] ) if f_name in engine_.keys()
         else default_engine ( f_name ) )
@@ -272,6 +300,46 @@ def mbf_js( f_name, f_value, f_bound, multiple,
 
     update_on = update_on_[f_name] if f_name in update_on_.keys() else []
 
+    if gen_select :
+        if multiple :
+            js_content = (
+                '$( "#{input_id}" ).ready( function() {{'
+                    'var choices_{f_name} = {choices};'
+                    '{del_select}'
+                    'var engine_{f_name};'
+                    'var setup_{f_name} = function() {{'
+                        'engine_{f_name} = {engine};'
+                        '$( "#{input_id}" ).tokenfield( "destroy" );'
+                        '$( "#{input_id}" ).tokenfield({{typeahead: [ {datasets} ] }});'
+                    '}};'
+                    '$( "#{input_id}" ).bind( "tokenfield:createtoken", {tok_create} );'
+                    '$( "#{input_id}" ).bind( "tokenfield:edittoken", {tok_edit} );'
+                    '$( "#{input_id}" ).bind( "tokenfield:removetoken", {tok_remove} );'
+                    '{tok_updates}'
+                    'setup_{f_name}();'
+                    '{tok_init_input}'
+                '}} );'
+            )
+        else :
+            js_content = (
+                '$( "#{input_id}" ).ready( function() {{'
+                    'var choices_{f_name} = {choices};'
+                    '{del_select}'
+                    '{gen_hidden}'
+                    'var engine_{f_name};'
+                    'var setup_{f_name} = function() {{'
+                        'engine_{f_name} = {engine};'
+                        '$( "#{input_id}" ).typeahead( "destroy" );'
+                        '$( "#{input_id}" ).typeahead( {datasets} );'
+                    '}};'
+                    '$( "#{input_id}" ).bind( "typeahead:select", {typ_select} );'
+                    '$( "#{input_id}" ).bind( "typeahead:change", {typ_change} );'
+                    '{typ_updates}'
+                    'setup_{f_name}();'
+                    '{typ_init_input}'
+                '}} );'
+            )
+    else :
         if multiple :
             js_content = (
                 'var choices_{f_name} = {choices};'
@@ -281,35 +349,14 @@ def mbf_js( f_name, f_value, f_bound, multiple,
                     '$( "#{input_id}" ).tokenfield( "destroy" );'
                     '$( "#{input_id}" ).tokenfield({{typeahead: [ {datasets} ] }});'
                 '}};'
-            '$( "#{input_id}" ).bind( "tokenfield:createtoken", {create} );'
+                '$( "#{input_id}" ).bind( "tokenfield:createtoken", {tok_create} );'
-            '$( "#{input_id}" ).bind( "tokenfield:edittoken", {edit} );'
+                '$( "#{input_id}" ).bind( "tokenfield:edittoken", {tok_edit} );'
-            '$( "#{input_id}" ).bind( "tokenfield:removetoken", {remove} );'
+                '$( "#{input_id}" ).bind( "tokenfield:removetoken", {tok_remove} );'
-            '{updates}'
+                '{tok_updates}'
                 '$( "#{input_id}" ).ready( function() {{'
                     'setup_{f_name}();'
-                '{init_input}'
+                    '{tok_init_input}'
                 '}} );'
-            ).format(
-                    f_name = f_name,
-                    choices = choices,
-                    engine = engine,
-                    input_id = input_id( f_bound ),
-                    datasets = default_datasets( f_name, match_func ),
-                    create = tokenfield_create( f_name, f_bound ),
-                    edit = tokenfield_edit( f_name, f_bound ),
-                    remove = tokenfield_remove( f_name, f_bound ),
-                    updates = ''.join( [ (
-                        '$( "#{u_id}" ).change( function() {{'
-                            'setup_{f_name}();'
-                            '{reset_input}'
-                        '}} );'
-                        ).format(
-                            u_id = u_id,
-                            reset_input = tokenfield_reset_input( f_bound ),
-                            f_name = f_name
-                        ) for u_id in update_on ]
-                    ),
-                    init_input = tokenfield_init_input( f_name, f_bound ),
             )
         else :
             js_content = (
@@ -320,22 +367,29 @@ def mbf_js( f_name, f_value, f_bound, multiple,
                     '$( "#{input_id}" ).typeahead( "destroy" );'
                     '$( "#{input_id}" ).typeahead( {datasets} );'
                 '}};'
-            '$( "#{input_id}" ).bind( "typeahead:select", {select} );'
+                '$( "#{input_id}" ).bind( "typeahead:select", {typ_select} );'
-            '$( "#{input_id}" ).bind( "typeahead:change", {change} );'
+                '$( "#{input_id}" ).bind( "typeahead:change", {typ_change} );'
-            '{updates}'
+                '{typ_updates}'
                 '$( "#{input_id}" ).ready( function() {{'
                     'setup_{f_name}();'
-                '{init_input}'
+                    '{typ_init_input}'
                 '}} );'
-            ).format(
+            )
+
+    js_content = js_content.format(
             f_name = f_name,
             choices = choices,
+            del_select = del_select( f_bound, replace_input ),
+            gen_hidden = gen_hidden( f_bound ),
             engine = engine,
             input_id = input_id( f_bound ),
             datasets = default_datasets( f_name, match_func ),
-                    select = typeahead_select( f_bound ),
+            typ_select = typeahead_select( f_bound ),
-                    change = typeahead_change( f_bound ),
+            typ_change = typeahead_change( f_bound ),
-                    updates = ''.join( [ (
+            tok_create = tokenfield_create( f_name, f_bound ),
+            tok_edit = tokenfield_edit( f_name, f_bound ),
+            tok_remove = tokenfield_remove( f_name, f_bound ),
+            typ_updates = ''.join( [ (
                 '$( "#{u_id}" ).change( function() {{'
                     'setup_{f_name}();'
                     '{reset_input}'
@@ -346,7 +400,19 @@ def mbf_js( f_name, f_value, f_bound, multiple,
                     f_name = f_name
                 ) for u_id in update_on ]
             ),
-                    init_input = typeahead_init_input( f_name, f_bound ),
+            tok_updates = ''.join( [ (
+                '$( "#{u_id}" ).change( function() {{'
+                    'setup_{f_name}();'
+                    '{reset_input}'
+                '}} );'
+                ).format(
+                    u_id = u_id,
+                    reset_input = tokenfield_reset_input( f_bound ),
+                    f_name = f_name
+                ) for u_id in update_on ]
+            ),
+            tok_init_input = tokenfield_init_input( f_name, f_bound ),
+            typ_init_input = typeahead_init_input( f_name, f_bound ),
     )
 
     return render_tag( 'script', content=mark_safe( js_content ) )
@@ -403,9 +469,21 @@ def tokenfield_reset_input( f_bound ) :
                 input_id = input_id( f_bound ),
         )
 
-def default_choices( f_value ) :
+def default_choices( f_value, f_bound, gen_select ) :
     """ The JS script creating the variable choices_<fieldname> """
-    return '[{objects}]'.format(
+    if gen_select :
+        c = ( 'function plop(o) {{'
+                'var c = [];'
+                'for( let i=0 ; i<o.length ; i++) {{'
+                    'c.push( {{ key: o[i].value, value :o[i].text }} );'
+                '}}'
+                'return c;'
+                '}} ($("#{select_id}")[0].options)'
+        ).format (
+                select_id = input_id( f_bound )
+        )
+    else :
+        c = '[{objects}]'.format(
             objects = ','.join(
                 [ '{{key:{k},value:"{v}"}}'.format(
                     k = choice[0] if choice[0] != '' else '""',
@@ -414,6 +492,34 @@ def default_choices( f_value ) :
             )
         )
 
+    return c
+
+def del_select( f_bound, replace_input ) :
+    """ The JS script to delete the select if it has been generated
+    and replace it with an input. """
+    return ( 'var p = $("#{select_id}").parent()[0];'
+        'var new_input = `{replace_input}`;'
+        'p.innerHTML = new_input;'
+    ).format(
+            select_id = input_id( f_bound ),
+            replace_input = replace_input
+    )
+
+def gen_hidden( f_bound ):
+    """ The JS script to add a hidden tag to store the value. """
+    return ( 'var d = $("#{custom_div_id}")[0];'
+        'var i = document.createElement("input");'
+        'i.id = "{hidden_id}";'
+        'i.name = "{name}";'
+        'i.value = "";'
+        'i.type = "hidden";'
+        'd.appendChild(i);'
+    ).format(
+            custom_div_id = custom_div_id( f_bound ),
+            hidden_id = hidden_id( f_bound ),
+            name = f_bound.html_name
+    )
+
 def default_engine ( f_name ) :
     """ The JS script creating the variable engine_<field_name> """
     return (