Handy Code Snippits

A few code snippits we have used that may help you with your code.

• Debounce

  FatKit.$win.on('resize', FatKit.Utils.debounce(function()
  {
  
  	// Stacey put your stuff here
  
  }, 20));

• Images Loaded

  FatKit.Utils.imagesLoaded($(element)).done(function()
  {
  	
  	// All images have loaded, do your stuff
  
  }).fail(function()
  {
  
  	// Optional fail callback if any images don't load
  	
  })

• Sliders and Videos

  This starts a slider, and stops it on slides that have a video. When the video finishes it starts it up again. Note: Doesn't work for videos that have the "loop" attribute, because they never end so don't fire ended.

  let objBanner = $('#banner-id');
  
  if(objBanner.length > 0)
  {
  
  	objBanner.on('focusitem.f.slider', function(e, index, slide)
  	{
  
  		if(slide.has('video').length > 0)
  		{
  
  			FatKit.slider(objBanner).stop();
  			var video = slide.find('video')[0];
  			var $video = $(video);
  			video.currentTime = 0;
  			video.play();
  			$video.off('ended');
  			$video.on('ended', function()
  			{
  				setTimeout(function()
  				{
  
  					FatKit.slider(objBanner).next();
  					FatKit.slider(objBanner).start();
  					$video.off('ended');
  
  				}, 1000);
  
  			});
  
  		}
  
  	});
  	FatKit.slider(objBanner, {dotnav:true});
  }

• Get nearest marker

  This snippet will find the closest map marker on a given map to the location set in 'POSTCODE'.

  You need to include the places API https://maps.google.com/maps/api/js?key=API_KEY&libraries=places,geometry" in your map script reference.

  FatKit.$.get("https://maps.googleapis.com/maps/api/geocode/json?address=POSTCODE").then(function(data) {
  	if (data.status === "OK") {
  		var location = data.results[0].geometry.location;
  		var postcodeLat = location.latitude;
  		var postcodeLng = location.longitude;
  		var gLatLng = new google.maps.LatLng(postcodeLat, postcodeLng);
  		var closest;
  		$.each($('.f-map').data().map.arrMarkers, function () {
  			var distance = google.maps.geometry.spherical
  							.computeDistanceBetween(this.getPosition(), gLatLng);
  			if (!closest || closest.distance > distance) {
  				closest = {
  					marker: this,
  					distance: distance
  				}
  			}
  		});
  		if (closest) {
  			//closest.marker is the closest marker
  			//just triggering the info window showing in this example
  			google.maps.event.trigger(closest.marker, 'click');
  		}
  
  	}
  });

• Debug Event Listeners

  This snippet lists all attached/removed events in order, and what added it.

  
  
  (function () {
      var ael = Node.prototype.addEventListener,
          rel = Node.prototype.removeEventListener;
      Node.prototype.addEventListener = function (a, b, c) {
          console.log('Listener', 'added', this, a, b, c);
          ael.apply(this, arguments);
      };
      Node.prototype.removeEventListener = function (a, b, c) {
          console.log('Listener', 'removed', this, a, b, c);
          rel.apply(this, arguments);
      };
  }());