Show/hide subcategories - #47

git-svn-id: http://www.peacefrogs.net/svn/chimere/trunk@33 9215b0d5-fb2c-4bbd-8d3e-bd2e9090e864

7 files changed, 31 insertions, 5 deletions

diff --git a/main/admin.py b/main/admin.py
index 85c90e8..554651f 100644
--- a/main/admin.py
+++ b/main/admin.py
@@ -22,7 +22,7 @@ Settings for administration pages
 """
 
 from chimere.main.models import Category, Icon, SubCategory, Marker, \
-                             PropertyModel, Property, News, Route, Area
+                                PropertyModel, News, Route, Area
 from chimere.main.forms import MarkerAdminForm, RouteAdminForm, AreaAdminForm,\
                                NewsAdminForm
 from chimere.main.widgets import TextareaWidget
diff --git a/main/views.py b/main/views.py
index 2263047..0c304ec 100644
--- a/main/views.py
+++ b/main/views.py
@@ -46,6 +46,7 @@ def index(request):
         for sub_category in sub_cats:
             if sub_category.id in settings.DEFAULT_CATEGORIES:
                 sub_category.selected = True
+                cat.selected= True
     extra = ""
     tab = " "*4
     for url in URL_OSM_CSS:
diff --git a/static/icons/minus.png b/static/icons/minus.png
new file mode 100644
index 0000000..a95822f
--- /dev/null
+++ b/static/icons/minus.png
diff --git a/static/icons/plus.png b/static/icons/plus.png
new file mode 100644
index 0000000..404a24a
--- /dev/null
+++ b/static/icons/plus.png
diff --git a/static/main_map.js b/static/main_map.js
index 61f838a..145f936 100644
--- a/static/main_map.js
+++ b/static/main_map.js
@@ -18,6 +18,26 @@ See the file COPYING for details.
 
 /* main map */
 
+var current_cat;
+
+/* open a category section */
+function toggleCategory(id){
+    old = document.getElementById('maincategory_' + current_cat)
+    if(old){
+        old.style.display = 'None';
+        old_img = document.getElementById('maincategory_img_' + current_cat);
+        old_img.src = "/" + extra_url + "static/icons/plus.png";
+    }
+    if (id != current_cat){
+        current_cat = id;
+        document.getElementById('maincategory_' + current_cat).style.display = 'block';
+        img = document.getElementById('maincategory_img_' + current_cat);
+        img.src = "/" + extra_url + "static/icons/minus.png";
+    } else {
+        current_cat = 0;
+    }
+}
+
 /* check all the categories if clicked, unckeck if unclick */
 function checkAll(item, ids){
     check = false;
diff --git a/static/styles.css b/static/styles.css
index 45b9b71..df08ee3 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -258,6 +258,11 @@ color:purple;
 cursor:pointer;
 }
 
+.control_image{
+cursor:pointer;
+vertical-align:text-bottom;
+}
+
 .errorlist{
 color:purple;
 font-weight:bold;
diff --git a/templates/main_map.html b/templates/main_map.html
index e442757..882e0f2 100644
--- a/templates/main_map.html
+++ b/templates/main_map.html
@@ -9,10 +9,10 @@ var lst_{{category.id}}=new Array();
 {% for sub_category in lst_sub_categories %}
 lst_{{category.id}}.push("{{sub_category.id}}");{% endfor %}
 --></script>
-  <li><input type='checkbox' id='maincat_{{category.id}}' onclick='checkAll(this, lst_{{category.id}});loadGeoObjects();' {% if category.selected %} checked='checked'{%endif%} />
- {% trans category.name %}
- <img class='zoom_image' alt='{% trans "Zoom to" %} {{category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory(lst_{{category.id}}.join("_"))'/>
-    <ul class='subcategories'>{% for sub_category in lst_sub_categories %}
+  <li>{% if category.selected %}<script language='javascript'>var current_cat={{category.id}};{% endif %}</script><img class='control_image' id='maincategory_img_{{category.id}}' alt='control' src='{{media_path}}icons/{% if category.selected %}minus.png{%else%}plus.png{%endif%}' onclick='toggleCategory({{category.id}});'/>
+{% trans category.name %}
+<img class='zoom_image' alt='{% trans "Zoom to" %} {{category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory(lst_{{category.id}}.join("_"))'/>
+    <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}>{% for sub_category in lst_sub_categories %}
       <li><input type='checkbox' onclick='loadGeoObjects()' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/> <label for='{{sub_category.id}}'>
       <img alt='{{sub_category.name}}' src='{{media_path}}{{sub_category.icon.image}}'/>
       {% trans sub_category.name %}</label>