Implement Select2 selection as a multi select widget

4 files changed, 36 insertions, 4 deletions

diff --git a/archaeological_operations/forms.py b/archaeological_operations/forms.py
index 0a8f9d94d..fa5816bf6 100644
--- a/archaeological_operations/forms.py
+++ b/archaeological_operations/forms.py
@@ -645,9 +645,9 @@ class ArchaeologicalSiteForm(forms.Form):
     reference = forms.CharField(label=_(u"Reference"), max_length=20)
     name = forms.CharField(label=_(u"Name"), max_length=200, required=False)
     periods = forms.MultipleChoiceField(label=_("Periods"),
-                             choices=[], widget=forms.CheckboxSelectMultiple)
+                     choices=[], widget=widgets.Select2Multiple, required=False)
     remains = forms.MultipleChoiceField(label=_("Remains"),
-                             choices=[], widget=forms.CheckboxSelectMultiple)
+                     choices=[], widget=widgets.Select2Multiple, required=False)
 
     def __init__(self, *args, **kwargs):
         self.limits = {}
diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index b19366dc1..5168cba6e 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -932,3 +932,16 @@ a.remove{
 #merge-table th.small{
     width:80px;
 }
+
+/* select2 overload */
+
+.select2-container-multi .select2-choices .select2-search-field {
+    min-width:233px;
+}
+
+.select2-container-multi .select2-choices {
+    border: 0 solid #FFF;
+    background-color: #FFF;
+    background-image: none;
+}
+
diff --git a/ishtar_common/templates/window.html b/ishtar_common/templates/window.html
index c473eff89..c3d8ccf6a 100644
--- a/ishtar_common/templates/window.html
+++ b/ishtar_common/templates/window.html
@@ -14,6 +14,7 @@
     <script language="javascript" type="text/javascript" src="{{JQUERY_UI_URL}}jquery-ui.js"></script>
     <script language="javascript" type="text/javascript" src="{{JQUERY_UI_URL}}ui/i18n/jquery.ui.datepicker-{{COUNTRY}}.js"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}/js/ishtar.js"></script>
+    {{form.media}}
     <link type="text/css" href="{{JQUERY_UI_URL}}css/smoothness/jquery-ui.css" rel="stylesheet" />
     <link rel="stylesheet" href="{{STATIC_URL}}/media/style.css" />
     {% block extra_head %}
@@ -31,8 +32,8 @@ save_and_close_window("{{parent_name}}", "{{parent_pk}}", "{{new_item_label}}",
     <table>
     {% for field in form %}
     <tr{% if field.field.required %} class='required'{% endif %}>
-      <th><label for="{{ field.label }}">{{ field.label_tag }}</th>
-      <td> {{ field.errors }}{{field|safe}}</td>
+      <th>{{ field.label_tag }}</th>
+      <td>{{ field.errors }}{{field|safe}}</td>
     </tr>{% endfor %}
     <tr><td colspan='2' class='submit_button'><input type="submit" id="submit_new_item" value="{% trans "Add" %}"/></td></tr>
     </table>
diff --git a/ishtar_common/widgets.py b/ishtar_common/widgets.py
index 404d5fabe..0ba4061a8 100644
--- a/ishtar_common/widgets.py
+++ b/ishtar_common/widgets.py
@@ -37,6 +37,24 @@ import models
 
 reverse_lazy = lazy(reverse, unicode)
 
+
+class Select2Multiple(forms.SelectMultiple):
+    class Media:
+        css = {
+            'all': ('select2/css/select2.css',)
+        }
+        js = ('select2/js/select2.min.js', 
+              'select2/js/init.js')
+
+    def render(self, name, value, attrs=None, choices=()):
+        klass = attrs and attrs.get('class') or ''
+        klass += ' ' if klass else '' + 'js-select2'
+        if not attrs:
+            attrs = {}
+        attrs['class'] = klass
+        return super(Select2Multiple, self).render(name, value, attrs,
+                                                              choices)
+
 class MultipleAutocompleteField(forms.MultipleChoiceField):
     def __init__(self, *args, **kwargs):
         self.model = None