filter ok

user/themes/lecampus/js/masonry.filter.js

@@ -0,0 +1,51 @@
+/* -- Filter Plugin -- */
+(function ($) {
+    'use strict';
+    $.fn.masonryFilter = function (options) {
+        //reload masonry
+        var reload = function ($container) {
+            setTimeout(function () {
+                $container.masonry("layout");
+            }, 100);
+        };
+
+        var process = function ($container) {
+            var items = $container.masonry("getAllItems"),
+                revealItems = [],
+                hideItems = [];
+
+            $.each(items, function(i) {
+                var item = items[i];
+                var elm = $(item.element),
+                    shouldShow = options.filter && options.filter.call(elm);
+
+                if (shouldShow) {
+                    if (item.isHidden) {
+                        // -- Have to set this property so masonry does
+                        //    not include hidden items when calling "layout"
+                        item.isIgnored = false;
+                        revealItems.push(item);
+                    }
+                } else {
+                    if (!item.isHidden) {                        
+                        // -- Easier to set this property directy rather than
+                        //    using the "ignore" method, as it takes in a DOM
+                        //    element rather than the masonry item object.
+                        item.isIgnored = true;
+                        hideItems.push(item);
+                    }
+                }
+            });
+
+            $container.masonry('hide', hideItems);
+            $container.masonry('reveal', revealItems);
+
+            reload($container);
+        };
+
+        return this.each(function () {
+            var self = $(this);
+            process(self);
+        });
+    };
+}(window.jQuery));

user/themes/lecampus/js/site.js

@@ -1,24 +1,35 @@
 function map() {
+  var $carte = $('#carte');
+  if ( $carte.length ) {
 
-  var mymap = L.map('carte').setView([44.7365818, 4.9776488], 13);
+    var mymap = L.map('carte').setView([44.7365818, 4.9776488], 13);
 
-	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
-		maxZoom: 18,
-		id: 'mapbox.streets'
-	}).addTo(mymap);
+    var greenIcon = L.icon({
+        iconUrl: '/user/themes/lecampus/images/mappoint.svg',
 
-	L.marker([44.7365818, 4.9776488]).addTo(mymap)
-		.bindPopup("<b>Hello world!</b><br />I am le campus.").openPopup();
+        iconSize:     [38, 95], // size of the icon
+        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
+        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+    });
 
-	function onMapClick(e) {
-		popup
-			.setLatLng(e.latlng)
-			.setContent("You clicked the map at " + e.latlng.toString())
-			.openOn(mymap);
-	}
+  	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+  		maxZoom: 18,
+  		id: 'mapbox.streets'
+  	}).addTo(mymap);
 
-	mymap.on('click', onMapClick);
+  	L.marker([44.7365818, 4.9776488], {icon: greenIcon}).addTo(mymap)
+  		.bindPopup("<b>Hello world!</b><br />I am le campus.").openPopup();
 
+  	function onMapClick(e) {
+  		popup
+  			.setLatLng(e.latlng)
+  			.setContent("You clicked the map at " + e.latlng.toString())
+  			.openOn(mymap);
+  	}
+
+  	mymap.on('click', onMapClick);
+
+  }
 }
 
 function filteritem() {
@@ -26,6 +37,20 @@ function filteritem() {
   var $cat = $('.cat a');
   var $img = $('#item .img');
 
+  $(".filters .btn").click(function(e) {
+    e.preventDefault();
+
+    var filter = $(this).attr("data-filter");
+    var self = $('.container #item');
+
+    self.masonryFilter({
+        filter: function () {
+            if (!filter) return true;
+            return $(this).attr("data-filter") == filter;
+        }
+    });
+});
+
   var $grid = $('#archive #item, #calendrier #item').masonry({
     // columnWidth: 200,
     itemSelector: '.card',
@@ -33,14 +58,11 @@ function filteritem() {
     transitionDuration: '0.2s'
   });
 
+// $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
   $grid.imagesLoaded().progress(function() {
       $grid.masonry();
   });
 
-  $grid.multipleFilterMasonry({
-    itemSelector: '.card',
-    filtersGroupSelector:'.filters'
-  });
 }
 
 function slide() {
@@ -67,9 +89,9 @@ function links() {
 
 }
 
-jQuery(document).ready(function($){
+jQuery(document).ready(function(){
   links();
   slide();
   filteritem();
-  // map();
+  map();
 });