diff options
| -rw-r--r-- | chimere/static/chimere/css/styles.css | 17 | ||||
| -rw-r--r-- | chimere/static/chimere/js/jquery.chimere.js | 78 | ||||
| -rw-r--r-- | chimere/templates/chimere/blocks/categories.html | 12 |
3 files changed, 102 insertions, 5 deletions
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css index 83fcd3a..49cfed7 100644 --- a/chimere/static/chimere/css/styles.css +++ b/chimere/static/chimere/css/styles.css @@ -745,11 +745,15 @@ li.main_category label:hover{ } .category-selected .category_name, -.subcategory label:hover, +.subcategory.selected label:hover, .subcategory.selected label{ background-color:rgb(175, 231, 175); } +.subcategory label:hover{ + background-color:rgb(210, 231, 210); +} + #categories li#display_submited{ font-variant:normal; } @@ -1887,3 +1891,14 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button, .ol-ctx-menu-rout-clean:hover{ background-image: url("../img/icon-times-off.png"); } + + +.main-category-tick{ + font-size: 1em; + color: #CCC; + margin-left: 1em; +} + +.main_category.full .main-category-tick{ + color: #AA3333; +} diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index b8d3b4e..fd1787d 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -377,6 +377,7 @@ function transformCoordToLonLat(coord) { layers: settings.map_layers }; settings.current_position = null; + settings.suspend_load = false; /* Create map object */ settings.map = map = new ol.Map(map_options); @@ -1648,6 +1649,17 @@ function transformCoordToLonLat(coord) { $('#action-categories').removeClass('category-selected'); } } + $(".main_category").each(function(index){ + var nb_checked = $(this).find( + "input[type='checkbox']:checked").length; + var nb_total = $(this).find( + "input[type='checkbox']").length; + if (nb_checked == nb_total){ + $(this).addClass('full'); + } else { + $(this).removeClass('full'); + } + }); return master_check; }; var _init_categories = function () { @@ -1673,7 +1685,7 @@ function transformCoordToLonLat(coord) { } else { par.removeClass('selected'); } - methods.loadGeoObjects(); + if (!settings.suspend_load) methods.loadGeoObjects(); _toggle_categories($(this)); if ($('#layer_cat_'+c_name).length){ $('#layer_cat_'+c_name).prop("checked", @@ -1681,6 +1693,18 @@ function transformCoordToLonLat(coord) { } methods.hidePopup(e); }); + $(".main-category-tick").bind("click", function(event){ + event.stopPropagation(); + var category_id = $(this).attr('data-category'); + var main_item = $(this).parent().parent().parent(); + if (main_item.hasClass('full')){ + main_item.removeClass('full'); + methods.uncheck_category(category_id); + } else { + main_item.addClass('full'); + methods.check_category(category_id); + } + }); $('#display_submited_check').bind("click", function () { methods.loadGeoObjects(); }); @@ -1720,6 +1744,58 @@ function transformCoordToLonLat(coord) { } } }, + check_category: function (cat_id) { + /* + * Check all subcategory of a category + */ + settings.suspend_load = true; + $('#maincategory_' + cat_id + '.subcategories li input').each( + function(){ + if(!$(this).is(':checked')){ + $(this).click(); + $(this).parent().removeClass(); + $(this).parent().addClass('selected'); + $(this).parent().addClass('subcategory'); + } + } + ); + settings.suspend_load = false; + methods.loadGeoObjects(); + }, + uncheck_category: function (cat_id) { + /* + * Uncheck all subcategory of a category + */ + settings.suspend_load = true; + $('#maincategory_' + cat_id + '.subcategories li input').each( + function(){ + if($(this).is(':checked')){ + $(this).click(); + $(this).parent().removeClass(); + $(this).parent().addClass('subcategory'); + } + } + ); + settings.suspend_load = false; + methods.loadGeoObjects(); + }, + check_subcategories: function (cat_ids) { + /* + * Check subcategory list + */ + settings.suspend_load = true; + for (idx in cat_ids){ + $('#category_' + cat_ids[idx]).each( + function(){ + $(this).click(); + $(this).parent().removeClass(); + $(this).parent().addClass('selected'); + } + ); + } + settings.suspend_load = false; + methods.loadGeoObjects(); + }, /* * */ diff --git a/chimere/templates/chimere/blocks/categories.html b/chimere/templates/chimere/blocks/categories.html index 32bf724..2b4de53 100644 --- a/chimere/templates/chimere/blocks/categories.html +++ b/chimere/templates/chimere/blocks/categories.html @@ -3,14 +3,20 @@ {% for category, lst_sub_categories in sub_categories %} <li class='main_category'> <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}chimere/img/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" /> - <input type="checkbox" id='checkall_{{category.id}}'> - <span class='category_name'>{% trans category.name %}</span> + {% comment %}<input type="checkbox" id='checkall_{{category.id}}'>{% endcomment %} + <span class='category_name'> + {% trans category.name %} + <i class="fa fa-check main-category-tick" + data-category="{{category.pk}}" + aria-hidden="true"></i> + </span> {% comment %} <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_category" id="zoom_to_category_{{category.id}}"></span> {% endcomment %} <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}> {% for sub_category in lst_sub_categories %} - <li id='li_sub_{{sub_category.id}}' class='subcategory'> + <li id='li_sub_{{sub_category.id}}' class='subcategory' + data-subcategory="{{sub_category.id}}"> <input type='checkbox' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/> <label for='category_{{sub_category.id}}'> <span class='cat_image'><img alt='{{ sub_category.name }}' src='{{ MEDIA_URL }}{{sub_category.icon.image}}'/></span> |