Improve detail display

* add a short_description property to marker which cut desc
* add options in jquery.chimere.js to customize popup display

5 files changed, 45 insertions, 8 deletions

diff --git a/chimere/models.py b/chimere/models.py
index 4f6d4e0..8bff588 100644
--- a/chimere/models.py
+++ b/chimere/models.py
@@ -25,6 +25,7 @@ import simplejson as json
 from lxml import etree
 from PIL import Image
 from subprocess import Popen, PIPE
+from BeautifulSoup import BeautifulSoup
 
 from django.conf import settings
 from django.contrib.gis.db import models
@@ -344,6 +345,29 @@ class Marker(GeographicItem):
         if settings.CHIMERE_DAYS_BEFORE_EVENT:
             return self.start_date
 
+    @property
+    def description_short(self):
+        if not self.description:
+            return ''
+        if len(self.description) <= settings.CHIMERE_SHORT_DESC_LENGTH:
+            return self.description
+        desc = self.description[:settings.CHIMERE_SHORT_DESC_LENGTH]
+        short_desc = ""
+        # find a correct opportunity to cut
+        for idx, c in enumerate(reversed(desc)):
+            if c == '>':
+                break
+            if c == '<':
+                short_desc = desc[:-(idx+1)]
+                break
+        if not short_desc:
+            for idx, c in enumerate(reversed(desc)):
+                if c == ' ' or c == '\n':
+                    short_desc = desc[:-(idx+1)]
+                    break
+        short_desc += "..."
+        return BeautifulSoup(short_desc).prettify()
+
     class Meta:
         ordering = ('status', 'name')
         verbose_name = _(u"Point of interest")
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index ecdd70c..640fc29 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -367,8 +367,6 @@ ul#share li{
 
 #main-map{
     position:absolute;
-    margin:0px;
-    padding:0px;
     height:93%;
     margin:0;
     padding:0;
@@ -697,7 +695,6 @@ table.inline-table td input[type=file]{
     margin-right: auto;
 }
 
-
 /* openlayer customisation */
 .olControlPermalink {
     display: block;
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 12fb68f..4bc487e 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -74,15 +74,18 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             // Provide this function for overriding the getSubcategories default
             get_subcategories_fx: null,
             hide_popup_fx: null,
+            // if leave to false every click on the map hide the pop-up
+            explicit_popup_hide: false,
             controls:[new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.SimplePanZoom(),
                       new OpenLayers.Control.ScaleLine()],
             popupClass: OpenLayers.Popup.FramedCloud,
+            popupContentFull: false, // if true the detail is inside the popup
             category_accordion: true, // category opening behave like an accordion
             maxResolution: 156543.0399,
             units: 'm',
             projection: new OpenLayers.Projection('EPSG:4326'),
-            theme:null,
+            theme: null,
             routing: false, // enable routing management
             routing_panel_open: function(){
                                     $('#chimere_itinerary_panel').dialog('open');
@@ -454,6 +457,14 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             var marker = feature.createMarker();
             /* manage markers events */
             var _popup = function() {
+                if (settings.popupContentFull){
+                    var pixel = new OpenLayers.Pixel(0, 60);
+                    var lonlat = map.getLonLatFromPixel(pixel);
+                    lonlat.lon = settings.current_feature.lonlat.lon;
+                    settings.map.setCenter(lonlat);
+                } else {
+                    methods.center_on_feature();
+                }
                 /* show the popup */
                 if (settings.current_popup != null) {
                   settings.current_popup.hide();
@@ -466,7 +477,9 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 }
                 settings.current_popup = feature.popup;
                 /* hide on click on the cloud */
-                settings.current_popup.groupDiv.onclick = methods.hidePopup;
+                if (!settings.explicit_popup_hide){
+                    settings.current_popup.groupDiv.onclick = methods.hidePopup;
+                }
                 settings.permalink.updateLink();
             }
             var markerClick = function (evt) {
@@ -716,14 +729,14 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             var params = {}
             if (settings.simple) { params["simple"] = 1; }
             $.ajax({url: uri, 
-                    data: params, 
+                    data: params,
                     success: function (data) {
                             if ( settings.display_feature_detail_fx ) {
                                 // Custom function ?
                                 settings.display_feature_detail_fx(data, settings);
                             }
                             else {
-                                if (!settings.simple) {
+                                if (!settings.popupContentFull) {
                                     $('#detail').html(data).show();
                                 }
                                 else {
diff --git a/chimere/templates/chimere/blocks/multimedia_file.html b/chimere/templates/chimere/blocks/multimedia_file.html
index a1e9868..d659348 100644
--- a/chimere/templates/chimere/blocks/multimedia_file.html
+++ b/chimere/templates/chimere/blocks/multimedia_file.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if multimedia_item.picture %}
-<a rel="prettyPhoto" href='{{multimedia_item.picture.url}}' ><img alt="{{multimedia_item.name}}" src='{{multimedia_item.thumbnailfile.url}}'/></a>{% endif %}
+<a rel="prettyPhoto" href='{{multimedia_item.picture.url}}' ><img class='thumbnail' alt="{{multimedia_item.name}}" src='{{multimedia_item.thumbnailfile.url}}'/></a>{% endif %}
 {% if multimedia_item.url %}
 
 {% if multimedia_item.multimedia_type.iframe %}
diff --git a/example_project/settings.py b/example_project/settings.py
index e78751d..2aef8be 100644
--- a/example_project/settings.py
+++ b/example_project/settings.py
@@ -100,6 +100,9 @@ NOMINATIM_URL = 'http://nominatim.openstreetmap.org/search'
 CHIMERE_THUMBS_SCALE_HEIGHT=250
 CHIMERE_THUMBS_SCALE_WIDTH=None
 
+# length of short description
+CHIMERE_SHORT_DESC_LENGTH = 400
+
 ADMINS = (
     # ('Your Name', 'your_email@domain.com'),
 )