JS ol3 description inside popup: manage offset

3 files changed, 36 insertions, 4 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 37c8b71..ecb74f4 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -189,6 +189,16 @@ fieldset{
     display:none;
 }
 
+.transparent,
+.transparent div,
+.transparent h3{
+    color: transparent;
+    background-color: transparent;
+    opacity: 0;
+    border-color: transparent;
+    box-shadow: 0 0 0 transparent;
+}
+
 .ui-dialog-buttonset{
     text-align:center;
 }
@@ -366,6 +376,15 @@ ul#action-2 {
     margin:0;
 }
 
+.detail_content p.detail_amendment{
+    padding:0.2em 0.5em;
+    margin: 0.2em 0;
+}
+
+.detail_content p.detail_amendment a:hover{
+    text-decoration: none;
+}
+
 ul.share{
     list-style-type:none;
     margin:0;
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 3f7c9bf..a8e4df8 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -1187,8 +1187,6 @@ jQuery.expr[":"].hovering = function(elem) {
             });
             $(settings.popup_item).popover('show');
             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(){
@@ -2464,10 +2462,25 @@ jQuery.expr[":"].hovering = function(elem) {
                                 $('#detail').html(data).fadeIn();
                             }
                             else {
+                                // first display to get the size of the content
+                                // get default popover size
+                                var w = $('.popover').width();
+                                var h = $('.popover').height();
                                 $(".popover").addClass('inside-popup');
+                                // firts display is not user visible
+                                $(".popover").addClass('transparent');
                                 $(".popover-title").html(name);
                                 $(".popover-title").show();
                                 $(".popover-content").html(data);
+                                var offset = settings.popup.getOffset();
+                                offset[0] = offset[0] - $('.popover').width()/2 + w/2;
+                                offset[1] = offset[1] - $('.popover').height() + h;
+                                settings.popup.setOffset(offset);
+                                settings.popup.dispatchEvent('change:offset');
+                                $(".popover").removeClass('transparent');
+                                register_hovering('.popover-content',
+                                                  [settings.MouseWheelZoom,
+                                                   settings.DragPan]);
                             }
                         }
                     }
diff --git a/chimere/templates/chimere/detail.html b/chimere/templates/chimere/detail.html
index a86adf2..2898810 100644
--- a/chimere/templates/chimere/detail.html
+++ b/chimere/templates/chimere/detail.html
@@ -26,8 +26,8 @@
     {% for property in properties %}{% if property.value %}
     <p class='{{property.propertymodel.getNamedId}}'><strong>{{property.propertymodel}}</strong>{% trans ":" %} {{ property.value|sanitize:"p b i br hr strong em img:src:alt span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}</p>
     {% endif %}{% endfor %}
-    {% if marker.origin %}<p class='detail_source'><strong>{% trans "Source:" %}</strong> <span>{{marker.origin}}</span></p>{% endif %}
-    {% if marker.license %}<p class='detail_license'><strong>{% trans "License:" %}</strong> <span>{{marker.license}}</span></p>{% endif %}
+    {% if marker.origin %}<p class='detail_source'><strong>{% trans "Source:" %}</strong> <span>{{marker.origin|sanitize:"a:href:target"|safe}}</span></p>{% endif %}
+    {% if marker.license %}<p class='detail_license'><strong>{% trans "License:" %}</strong> <span>{{marker.license|sanitize:"a:href:target"|safe}}}</span></p>{% endif %}
     {% if marker.multimedia_items %}<p class='detail_multimedia'>
         <a data-toggle='modal' data-target="#multimedia-gallery-{{time_now}}" href='#' id='multimedia-gallery-button'><span class='fa fa-chimere-action fa-camera'></span> <span class='lbl'>{% trans "Show the gallery"%}</span></a>
     </p>{% endif %}