Manage new popup

8 files changed, 35 insertions, 388 deletions

diff --git a/.gitignore b/.gitignore
index 86bd6cb..af32872 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@
 media/*
 local_settings.py
 site_static/lib/db.php
+chimere/*
diff --git a/saclay_static/saclay/css/styles.css b/saclay_static/saclay/css/styles.css
index af9c549..b8020ee 100644
--- a/saclay_static/saclay/css/styles.css
+++ b/saclay_static/saclay/css/styles.css
@@ -1753,7 +1753,7 @@ div.cloud h4{
 .close_img{
     display:block;
     overflow:hidden;
-    width:351px;
+    width: 100%;
     height:22px;
     background-image:url(../images/popup/close.png);
     background-position:center;
@@ -2135,3 +2135,16 @@ select#id_categories{
     color:#d38fac;
 }
 
+#detail_footer{
+    border-radius-bottom: 6px;
+}
+
+.popover h4{
+    padding: 0.5em 1em;
+}
+
+.popover,
+.popover-content{
+    padding: 0;
+}
+
diff --git a/saclay_static/saclay/js/SaclayPanZoom.js b/saclay_static/saclay/js/SaclayPanZoom.js
deleted file mode 100644
index 40bfc87..0000000
--- a/saclay_static/saclay/js/SaclayPanZoom.js
+++ /dev/null
@@ -1,374 +0,0 @@
-/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for 
- * full list of contributors). Published under the 2-clause BSD license.
- * See license.txt in the OpenLayers distribution or repository for the
- * full text of the license. */
-
-
-/**
- * @requires OpenLayers/Control/PanZoom.js
- */
-
-/**
- * Class: OpenLayers.Control.PanZoomBar
- * The PanZoomBar is a visible control composed of a
- * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>. 
- * By default it is displayed in the upper left corner of the map as 4
- * directional arrows above a vertical slider.
- *
- * Inherits from:
- *  - <OpenLayers.Control.PanZoom>
- */
-OpenLayers.Control.SaclayPanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, {
-
-    /** 
-     * APIProperty: zoomStopWidth
-     */
-    zoomStopWidth: 18,
-
-    /** 
-     * APIProperty: zoomStopHeight
-     */
-    zoomStopHeight: 7,
-
-    /** 
-     * Property: slider
-     */
-    slider: null,
-
-    /** 
-     * Property: sliderEvents
-     * {<OpenLayers.Events>}
-     */
-    sliderEvents: null,
-
-    /** 
-     * Property: zoombarDiv
-     * {DOMElement}
-     */
-    zoombarDiv: null,
-
-    /** 
-     * APIProperty: zoomWorldIcon
-     * {Boolean}
-     */
-    zoomWorldIcon: false,
-
-    /**
-     * APIProperty: panIcons
-     * {Boolean} Set this property to false not to display the pan icons. If
-     * false the zoom world icon is placed under the zoom bar. Defaults to
-     * true.
-     */
-    panIcons: true,
-
-    /**
-     * APIProperty: forceFixedZoomLevel
-     * {Boolean} Force a fixed zoom level even though the map has 
-     *     fractionalZoom
-     */
-    forceFixedZoomLevel: false,
-
-    /**
-     * Property: mouseDragStart
-     * {<OpenLayers.Pixel>}
-     */
-    mouseDragStart: null,
-
-    /**
-     * Property: deltaY
-     * {Number} The cumulative vertical pixel offset during a zoom bar drag.
-     */
-    deltaY: null,
-
-    /**
-     * Property: zoomStart
-     * {<OpenLayers.Pixel>}
-     */
-    zoomStart: null,
-
-    /**
-     * Constructor: OpenLayers.Control.PanZoomBar
-     */ 
-    buttons: null,
-
-    /**
-     * Top position of the slider: change if the Y position of the slider have change
-     */
-    startTop: 75,
-
-    /**
-     * APIMethod: destroy
-     */
-    destroy: function() {
-
-        this._removeZoomBar();
-
-        this.map.events.un({
-            "changebaselayer": this.redraw,
-            "updatesize": this.redraw,
-            scope: this
-        });
-
-        OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
-
-        delete this.mouseDragStart;
-        delete this.zoomStart;
-    },
-    
-    /**
-     * Method: setMap
-     * 
-     * Parameters:
-     * map - {<OpenLayers.Map>} 
-     */
-    setMap: function(map) {
-        OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
-        this.map.events.on({
-            "changebaselayer": this.redraw,
-            "updatesize": this.redraw,
-            scope: this
-        });
-    },
-
-    /** 
-     * Method: redraw
-     * clear the div and start over.
-     */
-    redraw: function() {
-        if (this.div !== null) {
-            this.removeButtons();
-            this._removeZoomBar();
-        }  
-        this.draw();
-    },
-    
-    /**
-    * Method: draw 
-    *
-    * Parameters:
-    * px - {<OpenLayers.Pixel>} 
-    */
-    draw: function(px) {
-        // initialize our internal div
-        OpenLayers.Control.prototype.draw.apply(this, arguments);
-        px = this.position.clone();
-
-        console.log('plouf 1');
-        // place the controls
-        this.buttons = [];
-        var ids = ['panup', 'panleft', 'panright', 'pandown', 'zoomout', 'zoomin'];
-
-        for (var i = 0; i < ids.length; i++) {
-            var b = document.createElement('div');
-            b.id = ids[i];
-            b.action = ids[i];
-            b.className = 'button olButton';
-            this.div.appendChild(b);
-            this.buttons.push(b);
-        }
-
-        this._addZoomBar();
-        console.log('plouf '+this.div.id);
-        return this.div;
-    },
-
-    /** 
-    * Method: _addZoomBar
-    * 
-    * Parameters:
-    * centered - {<OpenLayers.Pixel>} where zoombar drawing is to start.
-    */
-    _addZoomBar:function() {
-        var id = this.id + "_" + this.map.id;
-        var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
-        var slider = document.createElement('div');
-        slider.id = 'slider';
-        slider.className = 'button';
-        slider.style.cursor = 'move';
-        this.slider = slider;
-        
-        this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
-            { includeXY: true });
-        this.sliderEvents.on({
-            "touchstart": this.zoomBarDown,
-            "touchmove": this.zoomBarDrag,
-            "touchend": this.zoomBarUp,
-            "mousedown": this.zoomBarDown,
-            "mousemove": this.zoomBarDrag,
-            "mouseup": this.zoomBarUp
-        });
-        
-        var height = this.zoomStopHeight * (this.map.getNumZoomLevels());
-        // this is the background image
-        var div = document.createElement('div');
-        div.className = 'button';
-        div.id = 'zoombar';
-        this.zoombarDiv = div;
-        
-        this.div.appendChild(div);
-        this.div.appendChild(slider);
-
-        this.map.events.register("zoomend", this, this.moveZoomBar);
-    },
-    
-    /**
-     * Method: _removeZoomBar
-     */
-    _removeZoomBar: function() {
-        this.sliderEvents.un({
-            "touchstart": this.zoomBarDown,
-            "touchmove": this.zoomBarDrag,
-            "touchend": this.zoomBarUp,
-            "mousedown": this.zoomBarDown,
-            "mousemove": this.zoomBarDrag,
-            "mouseup": this.zoomBarUp
-        });
-        this.sliderEvents.destroy();
-        
-        this.div.removeChild(this.zoombarDiv);
-        this.zoombarDiv = null;
-        this.div.removeChild(this.slider);
-        this.slider = null;
-        
-        this.map.events.unregister("zoomend", this, this.moveZoomBar);
-    },
-    
-    /**
-     * Method: onButtonClick
-     *
-     * Parameters:
-     * evt - {Event}
-     */
-    onButtonClick: function(evt) {
-        console.log('onButtonClick');
-        OpenLayers.Control.PanZoom.prototype.onButtonClick.apply(this, arguments);
-        if (evt.buttonElement === this.zoombarDiv) {
-            var levels = evt.buttonXY.y / this.zoomStopHeight;
-            if (this.forceFixedZoomLevel || !this.map.fractionalZoom) {
-                levels = Math.floor(levels);
-            }    
-            var zoom = (this.map.getNumZoomLevels() - 1) - levels; 
-            zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
-            this.map.zoomTo(zoom);
-        }
-    },
-    
-    /**
-     * Method: passEventToSlider
-     * This function is used to pass events that happen on the div, or the map,
-     * through to the slider, which then does its moving thing.
-     *
-     * Parameters:
-     * evt - {<OpenLayers.Event>} 
-     */
-    passEventToSlider:function(evt) {
-        console.log('passEventToSlider');
-        this.sliderEvents.handleBrowserEvent(evt);
-    },
-    
-    /*
-     * Method: zoomBarDown
-     * event listener for clicks on the slider
-     *
-     * Parameters:
-     * evt - {<OpenLayers.Event>} 
-     */
-    zoomBarDown:function(evt) {
-        console.log('zoomBarDown');
-        if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
-            return;
-        }
-        this.map.events.on({
-            "touchmove": this.passEventToSlider,
-            "mousemove": this.passEventToSlider,
-            "mouseup": this.passEventToSlider,
-            scope: this
-        });
-        this.mouseDragStart = evt.xy.clone();
-        this.zoomStart = evt.xy.clone();
-        this.div.style.cursor = "move";
-        // reset the div offsets just in case the div moved
-        this.zoombarDiv.offsets = null; 
-        OpenLayers.Event.stop(evt);
-    },
-    
-    /*
-     * Method: zoomBarDrag
-     * This is what happens when a click has occurred, and the client is
-     * dragging.  Here we must ensure that the slider doesn't go beyond the
-     * bottom/top of the zoombar div, as well as moving the slider to its new
-     * visual location
-     *
-     * Parameters:
-     * evt - {<OpenLayers.Event>} 
-     */
-    zoomBarDrag: function(evt) {
-        console.log('zoomBarDrag');
-        if (this.mouseDragStart !== null) {
-            var deltaY = this.mouseDragStart.y - evt.xy.y;
-            var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
-            if ((evt.clientY - offsets[1]) > 0 && 
-                (evt.clientY - offsets[1]) < 55) {
-                var newTop = parseInt(this.slider.style.top, 10) - deltaY;
-                this.slider.style.top = newTop + "px";
-                this.mouseDragStart = evt.xy.clone();
-            }
-            // set cumulative displacement
-            this.deltaY = this.zoomStart.y - evt.xy.y;
-            OpenLayers.Event.stop(evt);
-        }
-    },
-    
-    /*
-     * Method: zoomBarUp
-     * Perform cleanup when a mouseup event is received -- discover new zoom
-     * level and switch to it.
-     *
-     * Parameters:
-     * evt - {<OpenLayers.Event>} 
-     */
-    zoomBarUp: function(evt) {
-        console.log('zoomBarUp');
-        if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
-            return;
-        }
-        if (this.mouseDragStart) {
-            this.div.style.cursor="";
-            this.map.events.un({
-                "touchmove": this.passEventToSlider,
-                "mouseup": this.passEventToSlider,
-                "mousemove": this.passEventToSlider,
-                scope: this
-            });
-            var zoomLevel = this.map.zoom;
-            if (!this.forceFixedZoomLevel && this.map.fractionalZoom) {
-                zoomLevel += this.deltaY/this.zoomStopHeight;
-                zoomLevel = Math.min(Math.max(zoomLevel, 0), 
-                                     this.map.getNumZoomLevels() - 1);
-            } else {
-                zoomLevel += this.deltaY/this.zoomStopHeight;
-                zoomLevel = Math.max(Math.round(zoomLevel), 0);      
-            }
-            this.map.zoomTo(zoomLevel);
-            this.mouseDragStart = null;
-            this.zoomStart = null;
-            this.deltaY = 0;
-            OpenLayers.Event.stop(evt);
-        }
-    },
-    
-    /*
-    * Method: moveZoomBar
-    * Change the location of the slider to match the current zoom level.
-    */
-    moveZoomBar:function() {
-        console.log('moveZoomBar');
-        console.log(this.map.getNumZoomLevels());
-        var newTop = 
-            ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) * 
-            this.zoomStopHeight + this.startTop;
-        this.slider.style.top = newTop + "px";
-    },    
-    
-    CLASS_NAME: "OpenLayers.Control.SimplePanZoom"
-});
diff --git a/saclay_static/saclay/js/interface.js b/saclay_static/saclay/js/interface.js
index 64cadca..d125161 100644
--- a/saclay_static/saclay/js/interface.js
+++ b/saclay_static/saclay/js/interface.js
@@ -172,8 +172,8 @@ function change_routing_transport(){
                            $('input[name="transport"]:checked').val());
 }
 
-function display_feature_detail(data, settings){
-    settings.current_popup.setContentHTML("<div class='cloud'>" + data + "</div>");
+function display_feature_detail_callback(settings){
+    $('.popover-title').hide();
     $('.detail_zoomin').bind("click", function(event){
         $('#main-map').chimere('hidePopup', event);
         $('#main-map').chimere('zoomIn');
@@ -197,6 +197,7 @@ function display_feature_detail(data, settings){
     jQuery(".close_img").click(function(event){
         $("#main-map").chimere('hidePopup', event);
     });
+    /*
     jQuery("#read_more_"+settings.current_feature.pk).click(function(){
         $('#detail_content').css('height', $('#detail_content').height());
         $("#description_short_"+settings.current_feature.pk).hide();
@@ -210,6 +211,7 @@ function display_feature_detail(data, settings){
         $("#read_less_"+settings.current_feature.pk).hide();
         $("#read_more_"+settings.current_feature.pk).show();
     });
+    */
     $(document).ready(function(){
         share_link_update();
         $("a[rel^='prettyPhoto']").prettyPhoto({
@@ -220,10 +222,6 @@ function display_feature_detail(data, settings){
     $('html').addClass('js-on');
     $(function(){
         // $('div.media-player').jmeEmbedControls();
-        setTimeout(function(){
-            settings.current_popup.updateSize();
-            setTimeout(function(){ settings.current_popup.updateSize(); }, 1000);
-        }, 1000);
     });
 }
 
diff --git a/templates/chimere/base.html b/templates/chimere/base.html
index 5154210..61abe38 100644
--- a/templates/chimere/base.html
+++ b/templates/chimere/base.html
@@ -9,6 +9,7 @@
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/styles.css" />
 {% for css in EXTRA_CSS %}<link rel="stylesheet" href="{{ css }}" />{% endfor %}
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/print.css" media='print'/>
+<script src="{{ STATIC_URL }}bootstrap/bootstrap.min.js" type="text/javascript"></script>
 {% if MOBILE %}
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/mobile.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/mobile.css" />
diff --git a/templates/chimere/blocks/categories.html b/templates/chimere/blocks/categories.html
index d5242e0..05115ef 100644
--- a/templates/chimere/blocks/categories.html
+++ b/templates/chimere/blocks/categories.html
@@ -22,11 +22,6 @@
 <script type='text/javascript'>
 <!--
 $(function() {
-    $('label').click(function() {
-        if ($.browser.msie && $.browser.version.substr(0,1)<9) {
-          $('#' + $(this).attr('for')).click();
-        }
-    });
     if(chimere_init_options && chimere_init_options['checked_categories']){
         for (k=0;k<chimere_init_options['checked_categories'].length;k++){
             $('#li_sub_'+chimere_init_options['checked_categories'][k]+' span'
diff --git a/templates/chimere/blocks/map.html b/templates/chimere/blocks/map.html
index 947a35c..99880e9 100644
--- a/templates/chimere/blocks/map.html
+++ b/templates/chimere/blocks/map.html
@@ -1,5 +1,7 @@
 {% load i18n %}
 <div id='{{map_id}}'></div>
+<div id='popup'></div>
+<div id='layerSwitcher'></div>
 <script type="text/javascript">
 $("#{{map_id}}").show();
 </script>
@@ -88,6 +90,7 @@ $("#{{map_id}}").show();
         {% if area_id %}'area_id': "{{area_id}}",{% endif %}
         {% if p_current_feature %}"display_feature": {{ p_current_feature }},{% endif %}
         {% if selected_map_layer %}"selected_map_layer": {{selected_map_layer}},{% endif %}
+        "display_feature_detail_callback": display_feature_detail_callback,
         "edition_type_is_route": true
     }
     {% if restricted_extent %}{{ restricted_extent }}
@@ -177,4 +180,15 @@ $("#{{map_id}}").show();
     });
 </script>
 <div id='marker_hover'><div id='marker_hover_content'></div></div>
-<div id='cluster_list'></div>
+<div class="modal fade" id="cluster_list" tabindex="-1" role="dialog" aria-labelledby="cluster-label" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header modal-header-success">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="cluster-label">&nbsp;</h4>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index ee0f4ad..f02bd27 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -5,7 +5,6 @@
 {% head_chimere %}
 {% head_jme %}
 {% head_form %}
-<script src="{{ STATIC_URL }}chimere/js/jquery.chimere.js" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}saclay/js/jquery.form.js" type="text/javascript"></script>
 {% if has_search %}
 <script src="{{ STATIC_URL }}chimere/js/search.js" type="text/javascript"></script>