Map: manage complete list of items

1 files changed, 38 insertions, 20 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 4045d952f..78c02adca 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -6,6 +6,9 @@ var marker_cluster = "/media/images/marker-cluster.png";
 var view_projection = 'EPSG:3857';
 var animation_duration = 250;
 
+var cluster_threshold_1 = 8;
+var cluster_threshold_2 = 25;
+
 var map_default_center = 'SRID=4326;POINT (2.4397 46.5528)';
 var map_default_zoom = '7';
 var min_auto_zoom_on_cluster = 13;
@@ -61,7 +64,7 @@ var cluster_get_style = function(feature, resolution){
     if (!style && size == 1){
         style = _styleCache[size] = [get_icon_style()];
     } else if (!style && size > 1){
-        var color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
+        var color = size > cluster_threshold_2 ? "192,0,0" : size > cluster_threshold_1 ? "255,128,0" : "0,128,0";
         var radius = Math.max(8, Math.min(size * 0.75, 20));
         var lbl = size.toString();
         style = _styleCache[size] = [
@@ -145,20 +148,20 @@ var manage_click_on_map = function(e) {
             return feature;
         }
     );
-    click_on_feature(feature);
+    click_on_feature(feature, e);
 };
 
-var click_on_feature = function(feature){
+var click_on_feature = function(feature, e){
+
+    if (!$(e.target).is($(popup_item))
+        && !$.contains($(popup_item)[0],e.target) ) {
+        $(popup_item).hide();
+    }
 
     if (typeof feature == 'undefined'){
         current_feature = null;
-        $(popup_item).hide();
         return;
     }
-    if (current_feature == feature){
-        $(popup_item).hide();
-        return
-    }
     current_feature = feature;
     if (!feature) return;
 
@@ -172,6 +175,8 @@ var click_on_feature = function(feature){
     }, timeout);
 };
 
+var auto_zoom = false;
+
 var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
                                 current_nb_items){
     if (!duration){
@@ -184,7 +189,9 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
     var props = feature.getProperties();
     if (!'features' in props) return feature;
 
-    if (props['features'].length == 1) return display_cluster_detail(feature);
+    if (!auto_zoom || props['features'].length == 1){
+        return display_cluster_detail(feature);
+    }
 
     if (!current_nb_items){
         current_nb_items = props['features'].length;
@@ -246,7 +253,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
 var display_cluster_detail = function(cluster){
     // console.log("display_cluster_detail");
     var features = cluster.getProperties()['features']
-    var offset_x = -14;
+    var offset_x = 0;
     var offset_y = -21;
     if (features.length == 1){
         offset_y = -54;
@@ -258,30 +265,42 @@ var display_items = function(features, offset_x, offset_y){
     wait_animation_end(function() {_display_items(features, offset_x, offset_y)});
 };
 
+var open_map_window = function(){
+    $('.ishtar-map-window').show();
+};
+
+var complete_list_label = "complete list...";
+
 var _display_items = function(features, offset_x, offset_y){
     // console.log("display_items");
     var feature = features[0];
     var geom = feature.getGeometry();
     var popup_content = "<ul>";
+    var window_content = "<ul>";
     var has_extra = false;
     for (idx_feat in features){
-        if (idx_feat >= 5){
-            has_extra = true;
-            popup_content += "<li><a href='#'>...</a></li>"
-            break;
+        if (idx_feat == 5){
+            popup_content += "<li class='text-center'><a href='#' class='map-list-detail'>";
+            popup_content += complete_list_label;
+            popup_content += "</a></li>";
         }
         var feat = features[idx_feat];
         var properties = feat.getProperties();
         var link = link_template.replace("<pk>", properties["id"]);
-        popup_content += "<li>" + link + " " + properties['name'] + "</li>"
+        var txt = "<li>" + link + " " + properties['name'] + "</li>";
+        window_content += txt;
+        if (idx_feat < 5){
+            popup_content += txt;
+        }
     }
     popup_content += "</ul>";
+    window_content += "</ul>";
+    $(".simple-window-content .modal-body").html(window_content);
     $(popup_item).html(popup_content);
-    popup.setPosition([0, 0]);  // out of the map
+    $(".map-list-detail").click(open_map_window);
+    popup.setPosition(geom.getCoordinates());
     $(popup_item).show(function(){
-        offset_x -= $(popup_item).width() / 2;
         popup.setOffset([offset_x, offset_y]);
-        popup.setPosition(geom.getCoordinates());
     });
 };
 
@@ -311,8 +330,7 @@ var init_popup = function(){
     popup_item = document.getElementById("ishtar-map-popup-" + map_id);
     var popup_options = {
         element: popup_item,
-        positioning: 'bottom-left',
-        stopEvent: false
+        positioning: 'bottom-center'
     }
     popup = new ol.Overlay(popup_options);
     map.addOverlay(popup);