1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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>
|
