From 77c450f0f17deddf63b96bc82e436eca6c0563b3 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@peacefrogs.net>
Date: Tue, 28 Aug 2012 19:24:21 +0200
Subject: Work on an alternative multimedia form

---
 chimere/static/chimere/css/styles.css              |  37 +++++-
 chimere/static/chimere/img/close.png               | Bin 0 -> 856 bytes
 chimere/static/chimere/img/film_logo.png           | Bin 0 -> 748 bytes
 chimere/static/chimere/img/img_logo.png            | Bin 0 -> 864 bytes
 .../chimere/blocks/alternate_multimedia.html       | 124 +++++++++++++++++++++
 chimere/templatetags/chimere_tags.py               |   5 +
 6 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 chimere/static/chimere/img/close.png
 create mode 100644 chimere/static/chimere/img/film_logo.png
 create mode 100644 chimere/static/chimere/img/img_logo.png
 create mode 100644 chimere/templates/chimere/blocks/alternate_multimedia.html

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 023c037..6529981 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -26,7 +26,7 @@ h2, h3, th, .action li, .action li a,
     color:#333;
 }
 
-.nominatim-widget{
+.nominatim-widget, .disabled{
     color:#aaa;
 }
 
@@ -186,6 +186,10 @@ fieldset{
     margin-top:8px;
 }
 
+.hidden{
+    display:none;
+}
+
 .ui-dialog-buttonset{
     text-align:center;
 }
@@ -695,6 +699,37 @@ table.inline-table td input[type=file]{
     margin-right: auto;
 }
 
+ul#multimedia_list_content{
+    padding:0;
+    margin:0;
+    list-style-type:none;
+}
+
+ul#multimedia_list_content li{
+    padding:0.5em 5px 0.5em 35px;
+    margin:0;
+    display:block;
+    list-style-type:none;
+    border-bottom:1px solid;
+}
+
+ul#multimedia_list_content li img{
+    display:block;
+    float:right;
+}
+
+ul#multimedia_list_content li.picture{
+    background-image:url("../img/img_logo.png");
+    background-position:4px center;
+    background-repeat:no-repeat;
+}
+
+ul#multimedia_list_content li.multimedia{
+    background-image:url("../img/film_logo.png");
+    background-position:6px center;
+    background-repeat:no-repeat;
+}
+
 /* openlayer customisation */
 .olControlPermalink {
     display: block;
diff --git a/chimere/static/chimere/img/close.png b/chimere/static/chimere/img/close.png
new file mode 100644
index 0000000..f9e8d04
Binary files /dev/null and b/chimere/static/chimere/img/close.png differ
diff --git a/chimere/static/chimere/img/film_logo.png b/chimere/static/chimere/img/film_logo.png
new file mode 100644
index 0000000..1ccdc2e
Binary files /dev/null and b/chimere/static/chimere/img/film_logo.png differ
diff --git a/chimere/static/chimere/img/img_logo.png b/chimere/static/chimere/img/img_logo.png
new file mode 100644
index 0000000..b487506
Binary files /dev/null and b/chimere/static/chimere/img/img_logo.png differ
diff --git a/chimere/templates/chimere/blocks/alternate_multimedia.html b/chimere/templates/chimere/blocks/alternate_multimedia.html
new file mode 100644
index 0000000..86fd7ed
--- /dev/null
+++ b/chimere/templates/chimere/blocks/alternate_multimedia.html
@@ -0,0 +1,124 @@
+{% load i18n %}
+    <div id='multimedia_list'>
+    {% for formset in formsets %}
+        {{ formset.management_form }}
+    {% endfor %}
+        <ul id='multimedia_list_content'>
+    {% for formset in formsets %}
+        {% for frm in formset%}
+            {% if not forloop.last %}
+            <li>
+            {%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.field.value }}</span>
+            {% endif %}
+                <span class='hidden'>{{field}}</span>
+            {% endfor %}
+            </li>
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+        </ul>
+        <button id='add_multimedia_list'>{% trans "Add" %}</button>
+    </div>
+    <div id='multimedia_form' title="{% trans "Add multimedia from your computer or a site"%}">
+        <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>
+        <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"> {% trans "Image" %}
+        <input type='radio' value='other' id='media_type_other' name="multimedia_type"> {% trans "Audio, video, other..." %}
+        </div>
+        <div class="fieldWrapper">
+        <label id="multimedia_file_label">{% trans "Download"%}</label> <input type='file' name='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>
+        <button id='add_media'>{% trans "Add" %}</button>
+    </div>
+    <script text='text/javascript'>
+        $(function(){
+            var current_image_number = 0;
+            var current_multi_number = 0;
+            $("#multimedia_form").dialog({autoOpen:false,
+                                          modal:true,
+                                          resizable:false,
+                                          width:400,
+                                          height:300});
+            $('#add_multimedia_list').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()
+                        && !$("#multimedia_file").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()
+                        && !$("#multimedia_file").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" />\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' src='{{STATIC_URL}}chimere/img/close.png'/>";
+                content += '</li>';
+                contener.append(content);
+                if ($('#media_type_image:checked').val()
+                        && !$("#multimedia_file").val()){
+                    // clone the file item
+                    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());
+                }
+                $("#multimedia_form").dialog("close");
+                return false;
+            });
+        });
+    </script>
+
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index a07dc44..71ac9b0 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -216,6 +216,11 @@ def multimedia_render(context, multimedia_file):
     context['multimedia_item'] = multimedia_file
     return context
 
+@register.inclusion_tag('chimere/blocks/alternate_multimedia.html')
+def alternate_multimedia(formset_multi, formset_picture):
+    return {'formsets':[formset_multi, formset_picture],
+            "STATIC_URL": settings.STATIC_URL}
+
 @register.simple_tag
 def get_tinyfied_url(marker, area_name=''):
     if not marker or not hasattr(marker, 'get_absolute_url'):
-- 
cgit v1.2.3