menus accordéons dans la sidebar + rangement dans le js

panorama/templates/panorama/main.html

@@ -48,25 +48,52 @@ style="padding:0px;height:calc(100vh - 50px)"
     var ajaxRequest;
     var plotlist;
     var plotlayers=[];
+    var allMarkers = []
     var markerClusters = L.markerClusterGroup({
     spiderfyOnMaxZoom: false,
     showCoverageOnHover: false,
     maxClusterRadius: 20
     });
+    var crosshairIcon = L.icon({
+        iconUrl: '{% static "panorama/img/marker-blue.png" %}',
+        iconSize:     [22, 35],
+        iconAnchor:   [11, 35]
+    });
+    var panoIcon = L.icon({
+        iconUrl: '{% static "panorama/img/marker-red.png" %}',
+        iconSize: [22, 35],
+        iconAnchor: [11, 35],
+        popupAnchor: [0,-50]
+    });
 
-    function fillcoord() {
-            var lat = map.getCenter().lat.toFixed(5);
-            var lng = map.getCenter().lng.toFixed(5);
-            $('#id_custompoint-latitude').val(lat);
-            $('#id_newpano-latitude').val(lat);
-            $('#id_custompoint-longitude').val(lng);
-            $('#id_newpano-longitude').val(lng);
-            $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
-                function(data) {
-                    $('#id_custompoint-altitude').val(parseInt(data));
-                    $('#id_newpano-altitude').val(parseInt(data));
+    function accordionMenus() {
+        $("ul.side-nav").children().click(function(e) {
+            var menu = $(e.target);
+            var target = menu.next();
+            if (!target.hasClass("in")) {
+                $(".collapse.in").each(function(){ 
+                    $(".collapse.in").animate({height: '1px'}, 500, function(){
+                        $(".collapse.in").removeClass("in");
+                        $(target).addClass("in");
+                    });
                 });
+            };
+        });
+    }
+    function fillCoord() {
+        var lat = map.getCenter().lat.toFixed(5);
+        var lng = map.getCenter().lng.toFixed(5);
+        $('#id_custompoint-latitude').val(lat);
+        $('#id_newpano-latitude').val(lat);
+        $('#id_custompoint-longitude').val(lng);
+        $('#id_newpano-longitude').val(lng);
+        $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
+            function(data) {
+                $('#id_custompoint-altitude').val(parseInt(data));
+                $('#id_newpano-altitude').val(parseInt(data));
+            });
     }
+
     function initmap() {
         // set up the map
         map = new L.Map('map');
@@ -75,16 +102,12 @@ style="padding:0px;height:calc(100vh - 50px)"
         var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
         var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
         var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
+
         // start the map in Grenoble
         map.setView(new L.LatLng(45.1842, 5.7218),13);
         map.addLayer(osm);
 
         // Add in a crosshair for the map
-        var crosshairIcon = L.icon({
-            iconUrl: '{% static "panorama/img/marker-blue.png" %}',
-            iconSize:     [22, 35], // size of the icon
-            iconAnchor:   [11, 35] // point of the icon which will correspond to marker's location
-        });
         crosshair = new L.marker(map.getCenter(), {clickable:false,icon:crosshairIcon});
         crosshair.addTo(map);
 
@@ -92,31 +115,31 @@ style="padding:0px;height:calc(100vh - 50px)"
         map.on('move', function(e) {
             crosshair.setLatLng(map.getCenter());
         });
+
+        // Autofill forms while moving crosshair and expanding menus
         map.on('moveend', function(e) {
             if ($("#locate-gps,#new-pano").hasClass("collapse in")){
-                fillcoord();
+                fillCoord();
             }
         });
-        $('#locate-gps-btn, #new-pano-btn').on('click', function(e) {
-            fillcoord();
+        $('#locate-gps-btn, #new-pano-btn').click(function(e) {
+            fillCoord();
         });
-    var panoIcon = L.icon({
-        iconUrl: '{% static "panorama/img/marker-red.png" %}',
-        iconSize: [22, 35],
-        iconAnchor: [11, 35],
-        popupAnchor: [0,-50],
-    });
-    var allMarkers = []
-    {% for pano in panoramas %}
-        var marker = L.marker([{{ pano.latitude }}, {{ pano.longitude }}], {icon: panoIcon, riseOnHover: true});
-        marker.bindPopup('{{ pano.name }}',{className : 'markerpopup', closeButton: false,}).on('mouseover', marker.openPopup).on('mouseout', marker.closePopup);
-        marker.on("click",function(){document.location.href="{% url 'panorama:view_pano' pano.id %}"});
-        markerClusters.addLayer( marker );
-        allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
-    {% endfor %}
-    map.addLayer( markerClusters );
-    map.fitBounds(allMarkers,{padding: [30, 30]});
-    }
+
+        // Create markers for panoramas
+        {% for pano in panoramas %}
+            var marker = L.marker([{{ pano.latitude }}, {{ pano.longitude }}], {icon: panoIcon, riseOnHover: true});
+            marker.on("click",function(){document.location.href="{% url 'panorama:view_pano' pano.id %}"});
+            var popup = marker.bindPopup('{{ pano.name }}',{className : 'markerpopup', closeButton: false,});
+            popup.on('mouseover', marker.openPopup);
+            popup.on('mouseout', marker.closePopup);
+            markerClusters.addLayer( marker );
+            allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
+        {% endfor %}
+        map.addLayer( markerClusters );
+        map.fitBounds(allMarkers,{padding: [30, 30]});
+        }
     initmap();
+    accordionMenus(); 
 </script>
 {% endblock js %}