JS ol3: manage description inside popup

2 files changed, 132 insertions, 28 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index d6c7ca3..37c8b71 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -347,7 +347,7 @@ ul#action-2 {
     overflow:auto;
 }
 
-.detail_content{
+#detail .detail_content{
     overflow:auto;
     height:80%;
     bottom: 0;
@@ -1481,10 +1481,7 @@ label.labelSpan.olButton{
     margin:auto;
 }
 
-#detail-wrapper div {
-}
-
-#detail-wrapper{
+#detail #detail-wrapper{
     padding: 4px 8px;
     padding-top:50px;
     position:absolute;
@@ -1499,6 +1496,17 @@ label.labelSpan.olButton{
     border-top:1px solid #E7E7E7;
 }
 
+.inside-popup #detail-wrapper{
+    max-height: 350px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.inside-popup.popover{
+    width: 350px;
+    max-width: 350px;
+}
+
 #categories input{
     display:None;
 }
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 9e62055..3f7c9bf 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -157,6 +157,54 @@ var invisibleStyleIcon = new ol.style.Style({
         else
             return v; };
 })( jQuery );
+
+/*
+ * hovering management
+ */
+
+var register_hovering = function(exp, handlers_to_deactivate){
+    $(document).on({
+      mouseenter: function(evt) {
+        $(evt.target).data('hovering', true);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(false);
+            }
+        }
+      },
+      mouseleave: function(evt) {
+        $(evt.target).data('hovering', false);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(true);
+            }
+        }
+      }
+    }, exp);
+    $(exp).hover(function(){
+        $(this).data('hovering', true);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(false);
+            }
+        }
+    }, function(){
+        $(this).data('hover', false);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(true);
+            }
+        }
+    });
+
+}
+
+// jQuery pseudo-expression :hovering
+jQuery.expr[":"].hovering = function(elem) {
+  return $(elem).data('hovering') ? true : false;
+};
+
+
 (function ($) {
     /*
     * Chimere jQuery plugin
@@ -343,14 +391,22 @@ var invisibleStyleIcon = new ol.style.Style({
                 view: settings.view,
                 target: map_element,
                 layers: settings.map_layers
-                // OL3-deprecated: theme: settings.theme
             };
-
             settings.current_position = null;
 
             /* Create map object */
             settings.map = map = new ol.Map(map_options);
 
+            // get interactions
+            settings.map.getInteractions().forEach(function (interaction){
+                if (interaction instanceof ol.interaction.MouseWheelZoom){
+                    settings.MouseWheelZoom = interaction;
+                }
+                if (interaction instanceof ol.interaction.DragPan){
+                    settings.DragPan = interaction;
+                }
+            });
+
             // only display the first layer
             $.each(settings.map.getLayers().getArray(), function(i, layer){
                 if (i > 0){
@@ -497,7 +553,7 @@ var invisibleStyleIcon = new ol.style.Style({
 
             // popup management
             settings.popup_item = document.getElementById('popup');
-            settings.popup = new ol.Overlay({
+            var popup_options = {
                 element: settings.popup_item,
                 positioning: 'bottom-left',
                 stopEvent: false/*,
@@ -505,7 +561,12 @@ var invisibleStyleIcon = new ol.style.Style({
                 autoPanAnimation: {
                   duration: 250
                 }*/
-            });
+            }
+            /*if (settings.popupContentFull){
+                popup_options['autoPan'] = true;
+                popup_options['autoPanAnimation'] = 250;
+            }*/
+            settings.popup = new ol.Overlay(popup_options);
             settings.map.addOverlay(settings.popup);
 
             // display marker on click
@@ -518,6 +579,9 @@ var invisibleStyleIcon = new ol.style.Style({
                 );
                 settings.current_feature = feature;
                 if (!settings.edition){
+                    if ($('.popover-content').is(":hovering")){
+                        return;
+                    }
                     if (feature) {
                         $(settings.popup_item).popover('destroy');
 
@@ -539,6 +603,7 @@ var invisibleStyleIcon = new ol.style.Style({
                             methods.openPopup(feature);
                         }
                     } else {
+                        settings.current_popup = null;
                         $(settings.popup_item).popover('destroy');
                     }
                 }
@@ -853,18 +918,26 @@ var invisibleStyleIcon = new ol.style.Style({
 
             methods.preload_images();
         }, // end of init
-        update_permalink_activation:function(){
-            if (settings.checked_categories.length ||
-                settings.current_feature ||
-                settings.routing_speed ||
-                settings.routing_transport ||
-                settings.routing_start ||
-                settings.routing_end){
-                $("#permalink a").removeAttr("disabled");
-            } else {
-                $("#permalink a").attr("disabled", "disabled");
-            }
-        },
+        /*
+        _panAndZoom: function(map, zoom_in, coordinates){
+            var view = map.getView();
+            var currentResolution = view.getResolution();
+            var delta = zoom_in ? 1 : -1;
+            var pan = ol.animation.pan({
+                 duration: 500,
+                source: view.getCenter(),
+                easing: ol.easing.easeOut
+            });
+            var zoom = ol.animation.zoom({
+                resolution: currentResolution,
+                duration: 500,
+                easing: ol.easing.easeOut
+            });
+            map.beforeRender(pan,zoom);
+            var newResolution = view.constrainResolution(currentResolution, delta);
+            view.setResolution(newResolution);
+            view.setCenter(coordinates);
+        },*/
         register_reload_on_move: function(){
             var reload_on_move = function(evnt){
                 settings._revision += 1;
@@ -1083,6 +1156,7 @@ var invisibleStyleIcon = new ol.style.Style({
             return feature;
         },
         openPopup: function(feature, offset_x, offset_y, alt_coordinates){
+            settings.current_popup = feature.getId();
             if (!offset_x){
                 offset_x = feature.get('popup_offset_x');
                 if (!offset_x) offset_x = 0;
@@ -1112,9 +1186,23 @@ var invisibleStyleIcon = new ol.style.Style({
                 'content': feature.get('name')
             });
             $(settings.popup_item).popover('show');
-            methods.display_feature_detail(feature.get('key'));
+            methods.display_feature_detail(feature.get('key'), feature.get('name'));
+            register_hovering('.popover-content', [settings.MouseWheelZoom,
+                                                   settings.DragPan]);
         },
         /* end of new ol3 */
+        update_permalink_activation:function(){
+            if (settings.checked_categories.length ||
+                settings.current_feature ||
+                settings.routing_speed ||
+                settings.routing_transport ||
+                settings.routing_start ||
+                settings.routing_end){
+                $("#permalink a").removeAttr("disabled");
+            } else {
+                $("#permalink a").attr("disabled", "disabled");
+            }
+        },
         /* Preload icons */
         preload_images: function(){
             if (typeof extra_url == 'undefined') return;
@@ -1172,9 +1260,10 @@ var invisibleStyleIcon = new ol.style.Style({
             if ($('#chimere_map_menu').length){
                 $('#chimere_map_menu').hide();
             }
+            /*
             if (settings.current_popup != null) {
                 settings.current_popup.hide();
-            }
+            }*/
             // settings.map.events.unregister('click', settings.map,
             //                             methods.displayMapMenu);
             //settings.map.events.register('click', settings.map,
@@ -2350,13 +2439,17 @@ var invisibleStyleIcon = new ol.style.Style({
             settings.layerRoute.addFeatures([current_route]);
             return current_route;
         },
-        display_feature_detail: function (key) {
+        display_feature_detail: function (key, name) {
             /*
             * update current detail panel with an AJAX request
             */
             var uri = extra_url
             if (settings.area_id) uri += settings.area_id + "/"
-            uri += "getDetail/" + key;
+            uri += "getDetail/";
+            if (settings.popupContentFull){
+                uri += "popup/";
+            }
+            uri += key;
             var params = {}
             if (settings.simple) { params["simple"] = 1; }
             $.ajax({url: uri,
@@ -2364,7 +2457,6 @@ var invisibleStyleIcon = new ol.style.Style({
                     dataType: "html",
                     success: function (data) {
                         if ( settings.display_feature_detail_fx ) {
-                            // Custom function ?
                             settings.display_feature_detail_fx(data, settings);
                         }
                         else {
@@ -2372,7 +2464,10 @@ var invisibleStyleIcon = new ol.style.Style({
                                 $('#detail').html(data).fadeIn();
                             }
                             else {
-                                settings.current_popup.setContentHTML("<div class='cloud'>" + data + "</div>");
+                                $(".popover").addClass('inside-popup');
+                                $(".popover-title").html(name);
+                                $(".popover-title").show();
+                                $(".popover-content").html(data);
                             }
                         }
                     }
@@ -2658,6 +2753,7 @@ var invisibleStyleIcon = new ol.style.Style({
                 settings.hide_popup_fx(evt, settings)
             }
             else { // Default behaviour
+                /*
                 if (settings.current_popup)
                 {
                     settings.current_feature = null;
@@ -2671,7 +2767,7 @@ var invisibleStyleIcon = new ol.style.Style({
                         methods.update_permalink_activation();
                         return true;
                     }
-                }
+                }*/
             }
             methods.update_permalink_activation();
             return false;