diff options
Diffstat (limited to 'templates/chimere/blocks/alternate_multimedia.html')
| -rw-r--r-- | templates/chimere/blocks/alternate_multimedia.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/templates/chimere/blocks/alternate_multimedia.html b/templates/chimere/blocks/alternate_multimedia.html new file mode 100644 index 0000000..d535d7b --- /dev/null +++ b/templates/chimere/blocks/alternate_multimedia.html @@ -0,0 +1,152 @@ +{% load i18n %} + <div id='multimedia_list'> + {% for formset in formsets %} + {{ formset.management_form }} + {% if formset.errors %}<div class='errors'> + {% for dict in formset.errors %} + {% for error in dict.values %} + {{ error }} + {% endfor %} + {% endfor %} + </div>{% endif %} + {% endfor %} + <ul id='multimedia_list_content'> + {% for formset in formsets %} + {% for frm in formset%} + {% if not forloop.last %} + <li class='{% if forloop.parentloop.counter0 %}picture{%else%}multimedia{%endif%}'> + {%if forloop.first %}{% for hidden in frm.hidden_fields %} + {{ hidden }} + {% endfor %}{% endif %} + {% for field in frm.visible_fields %} + {% if field.name == "name" %} + <span class='value'>{{ field.value }}</span> + <img class='remove-media' alt='Remove media' src='{{STATIC_URL}}saclay/images/close.png'/> + {% endif %} + <span class='hidden'>{{field}}</span> + {% endfor %} + </li> + {% endif %} + {% endfor %} + {% endfor %} + </ul> + </div> + <div id='multimedia_form' title="{% trans "Add multimedia from your computer or a website"%}"> + {%comment%}<div class='notice'>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu luctus ipsum. Donec vel urna a turpis consectetur consectetur. Vestibulum ut enim vel odio porta vulputate." %} + </div>{%endcomment%} + <div class="fieldWrapper"> + <label for="multimedia_name">{% trans "Name" %}</label> + <input type='text' id='multimedia_name' name='multimedia_name'> + </div> + <div class="fieldWrapper"> + <input type='radio' value='image' id='media_type_image' name="multimedia_type"> <label for='media_type_image'>{% trans "Image" %}</label> + <input type='radio' value='other' id='media_type_other' name="multimedia_type"> <label for='media_type_other'>{% trans "Audio, video, other..." %}</label> + </div> + <div class="fieldWrapper"> + <label id="multimedia_file_label">{% trans "Download"%}</label> <input type='file' size='15' name='picture-0-picture' id='picture-0-picture' class='multimedia_file'> + <p class='notice'>{% trans "Or" %}</p> + <label for='multimedia_url'>{% trans "Web address"%}</label> <input type='text' name='multimedia_url' id='multimedia_url'> + </div> + <span id='add_media'>{% trans 'Add'%}</span> + </div> + <script text='text/javascript'> + <!-- + $(function(){ + $(".remove-media").click(function(){ + $(this).parents('li').remove(); + }); + var current_image_number = 0; + var current_multi_number = 0; + $("#multimedia_form").dialog({autoOpen:false, + modal:true, + resizable:false, + dialogClass:'no-titlebar-small', + width:300}); + $('#head_multimedia').click(function(){ + $("#multimedia_form").dialog("open"); + return false; + }); + $('#media_type_image').click(function(){ + $("#multimedia_file_label").removeClass('disabled'); + $("#multimedia_file").removeAttr('disabled'); + }); + $('#media_type_other').click(function(){ + $("#multimedia_file_label").addClass('disabled'); + $("#multimedia_file").attr('disabled', 'disabled'); + }); + $('#add_media').click(function(){ + // test the validity + if (!$('#multimedia_name').val()){ + alert("{% trans "You must provide a name." %}") + return false; + } + if (!$('#media_type_image:checked').val() && + !$('#media_type_other:checked').val()){ + alert("{% trans "You must choose a media type." %}") + return false; + } + if ($('#media_type_image:checked').val() + && !$("#picture-"+current_image_number+"-picture").val() + && !$("#multimedia_url").val()){ + alert("{% trans "You must provide a file or a web address." %}") + return false; + } + if ($('#media_type_other:checked').val() + && !$("#multimedia_url").val()){ + alert("{% trans "You must provide a web address." %}") + return false; + } + // recopy field in the main form + var prefix = ''; + var contener = $("#multimedia_list_content") + content = '<li'; + if ($('#media_type_image:checked').val()){ + content += ' class="picture">'; + prefix = 'picture-' + current_image_number; + } else { + content += ' class="multimedia">'; + prefix = 'multimedia-' + current_multi_number; + content += '<input type="hidden" name="'+prefix+'-multimedia_type" value="{{auto_type_id}}" />\n'; + content += '<input type="hidden" name="'+prefix+'-url" value="'+$("#multimedia_url").val()+'" />\n'; + } + content += '<input type="hidden" name="'+prefix+'-id"/>\n'; + content += '<input type="hidden" name="'+prefix+'-miniature" value="1"/>\n'; + content += '<input type="hidden" name="'+prefix+'-DELETE" value=""/>\n'; + content += '<input type="hidden" name="'+prefix+'-name" value="'+ $("#multimedia_name").val() +'"/>\n'; + content += $("#multimedia_name").val(); + content += " <img class='remove-media' alt='Remove media' src='{{STATIC_URL}}saclay/images/close.png'/>"; + content += '</li>'; + contener.append(content); + if ($('#media_type_image:checked').val() + && $("#picture-"+current_image_number+"-picture").val()){ + // the file field cannot be recopied - security issue + // so it is moved + var file_item = $('#picture-'+current_image_number+'-picture'); + var cloned = file_item.clone(true); + file_item.hide(); + cloned.insertAfter(file_item); + file_item.appendTo($("#multimedia_list_content li").last()); + current_image_number += 1; + cloned.attr('id', 'picture-'+current_image_number+'-picture'); + cloned.attr('name', 'picture-'+current_image_number+'-picture'); + cloned.val(''); + $('#id_picture-TOTAL_FORMS').val(current_image_number + 1); + } else { + current_multi_number += 1; + $('#id_multimedia-TOTAL_FORMS').val(current_multi_number + 1); + } + // empty the fields + $("#multimedia_name").val(''); + $("#multimedia_url").val(''); + $("#media_type_image").prop('checked', ''); + $("#media_type_other").prop('checked', ''); + $("#multimedia_form").dialog("close"); + $(".remove-media").click(function(){ + $(this).parents('li').remove(); + }); + return false; + }); + }); + // --> + </script> + |