refactored widgets api call to render all at once rather than one area at a time, closes https://github.com/NodeBB/NodeBB/issues/2062

public/src/widgets.js

@@ -30,21 +30,25 @@
 			ajaxify.widgets.reposition();
 		}
 
-		function renderWidgets(location) {
-			var area = $('#content [widget-area="' + location + '"]'),
-				areaData = {
-					location: location,
+		function renderWidgets(locations) {
+			var areaDatas = [];
+
+			$.get(RELATIVE_PATH + '/api/widgets/render', {
+				locations: locations,
 				template: template + '.tpl',
 				url: url
-				};
-
-			$.get(RELATIVE_PATH + '/api/widgets/render', areaData, function(renderedWidgets) {
-				var html = '';
+			}, function(renderedAreas) {
+				for (var x=0; x<renderedAreas.length; ++x) {
+					var renderedWidgets = renderedAreas[x].widgets,
+						location = renderedAreas[x].location,
+						html = '';
 
 					for (var i=0; i<renderedWidgets.length; ++i) {
 						html += templates.parse(renderedWidgets[i].html, {});
 					}
 
+					var area = $('#content [widget-area="' + location + '"]');
+
 					if (!area.length && window.location.pathname.indexOf('/admin') === -1 && renderedWidgets.length) {
 						if (location === 'footer' && !$('#content [widget-area="footer"]').length) {
 							$('#content').append($('<div class="col-xs-12"><div widget-area="footer"></div></div>'));
@@ -66,24 +70,16 @@
 					}
 
 					$('#content [widget-area] img:not(.user-img)').addClass('img-responsive');	
-				checkCallback();
-			});
 				}
 				
-		function checkCallback() {
-			numLocations--;
-			if (numLocations < 0) {
 				$(window).trigger('action:widgets.loaded', {});
+				
 				if (typeof callback === 'function') {
 					callback();
 				}
-			}
-		}
-
-		for (var i=0; i<widgetLocations.length; ++i) {
-			renderWidgets(widgetLocations[i]);
+			});
 		}
 
-		checkCallback();
+		renderWidgets(widgetLocations);
 	};
 }(ajaxify || {}));

src/controllers/api.js

@@ -84,19 +84,34 @@ apiController.getConfig = function(req, res, next) {
 
 
 apiController.renderWidgets = function(req, res, next) {
-	var uid = req.user ? req.user.uid : 0,
-		area = {
+	var async = require('async'),
+		uid = req.user ? req.user.uid : 0,
+		areas = {
 			template: req.query.template,
-			location: req.query.location,
+			locations: req.query.locations,
 			url: req.query.url
-		};
+		},
+		renderedWidgets = [];
 
-	if (!area.template || !area.location) {
+	if (!areas.template || !areas.locations) {
 		return res.json(200, {});
 	}
 
-	widgets.render(uid, area, function(err, data) {
-		res.json(200, data);
+	async.each(areas.locations, function(location, next) {
+		widgets.render(uid, {
+			template: areas.template,
+			url: areas.url,
+			location: location
+		}, function(err, widgets) {
+			renderedWidgets.push({
+				location: location,
+				widgets: widgets
+			});
+
+			next();
+		});
+	}, function(err) {
+		res.json(200, renderedWidgets);
 	});
 };