Bitrix ajax on scroll ymaps loader (template.php)

ajax_scroll.js

var stp = "<?=SITE_TEMPLATE_PATH?>",
	ids = [],
	globalStop = false;

function collectId(){
	while(ids.length) { ids.pop(); }
	$("ul.contacts-list").children("li").each(function(){
		ids.push($(this).attr("data-id"));
	});
	return true;
}
function findMyLi(id){
	var gg;
	$("ul.contacts-list").children("li").each(function(index){
		var dataid = $(this).attr("data-id");
		if (id == dataid) gg = index;
	});
	return gg;
}
function loadNewData(q, param){
	var d = $.Deferred();
	if (!arguments.length) collectId();
	var sdata = (param ? {id: param, q: q} : {ids: ids});
	$.post(stp+"ajax.php", sdata)
		.done(function(data) {
			d.resolve(data);
		});
	return d.promise();
}
function fetchNewData(res, param){
	var output = JSON.parse(res);
		//console.log(output);
	if (output.length)
	{
		for (var i in output)
		{
    		var mapId = "map_"+output[i].ID,
    			coords = output[i].PROPERTY_YMAP_POINT_VALUE.split(","),
    			img = output[i].PREVIEW_PICTURE ? "<img src='"+output[i].PREVIEW_PICTURE+"' />" : "",
    			address = output[i].PROPERTY_ADDRESS_VALUE ? "<small>Address:&nbsp;"+output[i].PROPERTY_ADDRESS_VALUE+"</small><br />" : "",
    			region = output[i].PROPERTY_CITY_VALUE ? "<small>Region:&nbsp;"+output[i].PROPERTY_CITY_VALUE+"</small>" : "",
    			li = ["<li class='contacts-item' data-id='"+output[i].ID+"' >",
    				"<a href='"+output[i].DETAIL_PAGE_URL+"'>",
    					img,
    				"</a>",
    				"<a href='"+output[i].DETAIL_PAGE_URL+"'>",
    					"<b>"+output[i].NAME+"</b>",
    				"</a><br />",
    				address,
    				"<small>Point on map:&nbsp;<div id='"+mapId+"' class='ymaps_wrapper'>",
    				<?if (!$desktop):?>"<a href='#' class='ymaps_updater'><img src='/new/include/img/map-preview.jpg' class='preview' /></a>",<?endif;?>
    				"</div></small><br />",
    				region,
    				"</li>"
    				];
    		if (arguments.length == 1)
			{
				$("ul.contacts-list").append($(li.join("")));
			}
    		else if (arguments.length > 1)
    		{
    			//happens when !$desktop == mobile
    			var index = findMyLi(output[i].ID);
    			$("ul.contacts-list").children("li").eq(index).find(".ymaps_wrapper").html("");
    		;(function(){
    			var map = new ymaps.Map(mapId, { center: coords, zoom: 12, controls: ['trafficControl', 'zoomControl', 'fullscreenControl'], behaviors: ['drag', 'scrollZoom', 'multiTouch', 'dblClickZoom', 'rightMouseButtonMagnifier'] });
    			var placemark = new ymaps.Placemark(map.getCenter(),{balloonContentBody: '<address><strong>'+output[i].PROPERTY_SHORT_NAME+'</strong><br/>'+output[i].PROPERTY_ADDRESS_VALUE+'<br/></address>' }, {preset:'islands#redDotIcon'});
    			map.geoObjects.add(placemark);
				}());
    		}

    		<?if ($desktop):?>
	    	;(function(){
					var map = new ymaps.Map(mapId, { center: coords, zoom: 12, controls: ['trafficControl', 'zoomControl', 'fullscreenControl'], behaviors: [] });
					var placemark = new ymaps.Placemark(map.getCenter(),{balloonContentBody: '<address><strong>'+output[i].PROPERTY_SHORT_NAME+'</strong><br/>'+output[i].PROPERTY_ADDRESS_VALUE+'<br/></address>' }, {preset:'islands#redDotIcon'});
					map.geoObjects.add(placemark);
					globalFn.push({id: mapId, fn: map });
				}());
			<?endif;?>

			if (arguments.length == 1) ids.push(output[i].ID);
		}

		//console.log(ids);
		$("#ajax_loader").hide();
		globalStop = false;
	}
	else
	{
		$("#footer").show();
		setTimeout(function(){
			$("#ajax_loader").hide();
		}, 2000);
	}
}
function HandleScroll()
{
    var el = $("body");
    if ( (el.scrollTop() + el.prop("clientHeight")) >= ($(document).height() - 400) )
    {
        if (globalStop) return false;
        globalStop = true;

        //$("#page_wrapper_inner").css({"background": "red"});
		$("#ajax_loader").show();
        loadNewData().done(function(res){
        	fetchNewData(res);
        });
    }
}
$(window).on("scroll", HandleScroll);
$(window).on("load", function(){
	$("#footer").hide();
    <?if ($desktop):?>
    	loadNewData().done(function(res){ fetchNewData(res); });
		$("ul.contacts-list").on("click", ".ymaps_wrapper", function(e){
			//console.log(e);
			e.preventDefault();
			for (var i = 0; i < globalFn.length; i++) {
			    if ($(this).attr("id") == globalFn[i].id) {
			    	globalFn[i].fn.behaviors.enable(['drag', 'scrollZoom', 'multiTouch', 'dblClickZoom', 'rightMouseButtonMagnifier']);
			    }
			}
			$(this).off(e);
		});
	<?else:?>
		$("ul.contacts-list").on("click", ".ymaps_updater", function(e){
			e.preventDefault();
			var liid = $(this).closest("li").attr("data-id");
			loadNewData(1, liid).done(function(res){ fetchNewData(res, "param"); });
		});
    <?endif;?>
});