Skip to content

Instantly share code, notes, and snippets.

@abachuk
Created May 1, 2013 19:43
Show Gist options
  • Save abachuk/5497789 to your computer and use it in GitHub Desktop.
Save abachuk/5497789 to your computer and use it in GitHub Desktop.
Ajax Polling
(function(exports, document, $) {
var window = exports;
var RecentGiftsController = function(mediator) {
var mediator = mediator;
var pollingProcess = null;
var url = '/ajax/get-recent-gifts';
var buffer = [];
var bufferSize = 25;
_.templateSettings = {
interpolate: /\{\{=(.+?)\}\}/g,
evaluate: /\{\{(.+?)\}\}/g
};
var el = $('#latest');
var run = (function() {
var poll = function() {
$.ajax({
url: url + '?num_gifts=' + bufferSize,
cache: false,
dataType: 'json',
success: function(data) {
if (data.status == 'success') {
var cards = data.cards;
cards = cards.reverse();
// not enough gifts in buffer
if (cards.length < bufferSize) return;
// initialize
if (buffer.length == 0) {
for (var i = 0; i < bufferSize; i++) {
buffer.push(cards[i]);
}
startAnimation();
// update
} else {
var latestHash = buffer[buffer.length - 1].hashcode;
var j = bufferSize;
while (j > 0 && cards[j - 1].hashcode != latestHash) {
buffer.shift();
buffer.push(cards[j - 1]);
j--;
}
}
}
pollingProcess = setTimeout(poll, 3000);
},
error: function(jqXRH, errorMsg) {
//alert(jqXRH.responseText); //TODO: replace by error-handling function !!!
}
});
};
var startAnimation = function() {
var template;
template = _.template( $( "script.template" ).html() );
var allRecentCards = {
theCard : buffer
}
$('#latest-wrapper').prepend(template( allRecentCards ));
var renderedCards = $('#latest .cell').length;
$('#latest-wrapper').css({
'width':(renderedCards*155)+75,
'height': 120
});
var times = 20;
//var allRecentGifts = $('#latest-wrapper .cell').length;
//console.log(allRecentGifts);
function animateGifts() {
times--;
//console.log(times);
if(times === 0){
clearInterval(loop);
}
$('#latest-wrapper').animate({
left: '-=157'
}, function(){
});
}
//}};
var loop = setInterval(animateGifts, 4000);
animateGifts();
var pointer = 0;
var tiles = el.find('.latest');
var randomTileIndex = function() {
return Math.floor(Math.random() * tiles.length);
};
var rotateTiles = function() {
var randomIndex = randomTileIndex();
var $randomTile = $(tiles[randomIndex]);
var background_image_file = buffer[pointer].business_image;
var background_image_style = "none"; // set default image here. this is displayed if no business_image is available.
//if(background_image_file) background_image_style = 'url("' + background_image_file + '")';
//$randomTile.find('p').html('<b>' + buffer[pointer].business_name + '</b><br /><small>' + buffer[pointer].business_address + '</small>');
//$randomTile.find('.thumbnail .top').css({'background-image': background_image_style});
$randomTile.find('.thumbnail .top').fadeIn('slow', function() {
//$randomTile.find('.thumbnail .bottom').css({'background-image': background_image_style});
$(this).hide();
if (pointer++ >= tiles.length) pointer = 0;
setTimeout(rotateTiles, 3000);
});
}
var init = (function() {
var numActive = 0;
for (var i = 0; i < tiles.length; i++) {
var $tile = $(tiles[i]);
var background_image_file = buffer[i].business_image;
var background_image_style = "none";
var city_state = buffer[i].business_address;
pointer++;
}
el.find('.thumbnail .bottom').fadeIn('slow', function() {
numActive++;
if (numActive == tiles.length) rotateTiles();
});
})();
};
poll();
})();
return {
}
};
exports.RecentGiftsController = RecentGiftsController;
})(window, document, jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment