Widgets refactor (#5817)

* widgets refactor

render widgets server side
widgets can use all the data the template can use

* fix tests

public/src/ajaxify.js

@@ -204,7 +204,7 @@ $(document).ready(function () {
 		}
 		ajaxify.loadScript(tpl_url, done);
 
-		ajaxify.widgets.render(tpl_url, url, done);
+		ajaxify.widgets.render(tpl_url, done);
 
 		$(window).trigger('action:ajaxify.contentLoaded', { url: url, tpl: tpl_url });
 

public/src/widgets.js

@@ -1,6 +1,5 @@
 'use strict';
 
-
 (function (ajaxify) {
 	ajaxify.widgets = {};
 
@@ -14,77 +13,63 @@
 		});
 	};
 
-	ajaxify.widgets.render = function (template, url, callback) {
+	ajaxify.widgets.render = function (template, callback) {
 		callback = callback || function () {};
+
 		if (template.match(/^admin/)) {
 			return callback();
 		}
 
-		var widgetLocations = ['sidebar', 'footer', 'header'];
+		var locations = Object.keys(ajaxify.data.widgets);
 
-		$('#content [widget-area]').each(function () {
-			var location = $(this).attr('widget-area');
-			if ($.inArray(location, widgetLocations) === -1) {
-				widgetLocations.push(location);
+		locations.forEach(function (location) {
+			var area = $('#content [widget-area="' + location + '"]');
+			if (area.length) {
+				return;
 			}
-		});
 
-		$.get(config.relative_path + '/api/widgets/render?' + config['cache-buster'], {
-			locations: widgetLocations,
-			template: template + '.tpl',
-			url: url,
-			cid: ajaxify.data.cid,
-			isMobile: utils.isMobile(),
-		}, function (renderedAreas) {
-			for (var x = 0; x < renderedAreas.length; x += 1) {
-				var renderedWidgets = renderedAreas[x].widgets;
-				var location = renderedAreas[x].location;
-				var html = '';
+			var widgetsAtLocation = ajaxify.data.widgets[location] || [];
+			var html = '';
 
-				for (var i = 0; i < renderedWidgets.length; i += 1) {
-					html += templates.parse(renderedWidgets[i].html, {});
-				}
+			widgetsAtLocation.forEach(function (widget) {
+				html += widget.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="row"><div widget-area="footer" class="col-xs-12"></div></div>'));
-					} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) {
-						if ($('[component="account/cover"]').length) {
-							$('[component="account/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
-						} else if ($('[component="groups/cover"]').length) {
-							$('[component="groups/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
-						} else {
-							$('#content > *').wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
-						}
-					} else if (location === 'header' && !$('#content [widget-area="header"]').length) {
-						$('#content').prepend($('<div class="row"><div widget-area="header" class="col-xs-12"></div></div>'));
+				if (location === 'footer' && !$('#content [widget-area="footer"]').length) {
+					$('#content').append($('<div class="row"><div widget-area="footer" class="col-xs-12"></div></div>'));
+				} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) {
+					if ($('[component="account/cover"]').length) {
+						$('[component="account/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
+					} else if ($('[component="groups/cover"]').length) {
+						$('[component="groups/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
+					} else {
+						$('#content > *').wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
 					}
-
-					area = $('#content [widget-area="' + location + '"]');
+				} else if (location === 'header' && !$('#content [widget-area="header"]').length) {
+					$('#content').prepend($('<div class="row"><div widget-area="header" class="col-xs-12"></div></div>'));
 				}
+			});
 
+			area = $('#content [widget-area="' + location + '"]');
+			if (html && area.length) {
 				area.html(html);
-
-				if (renderedWidgets.length) {
-					area.removeClass('hidden');
-					ajaxify.widgets.reposition(location);
-				}
 			}
 
-			var widgetAreas = $('#content [widget-area]');
-			widgetAreas.find('img:not(.not-responsive)').addClass('img-responsive');
-			widgetAreas.find('.timeago').timeago();
-			widgetAreas.find('img[title].teaser-pic,img[title].user-img').each(function () {
-				$(this).tooltip({
-					placement: 'top',
-					title: $(this).attr('title'),
-				});
-			});
-			$(window).trigger('action:widgets.loaded', {});
-
-			callback(renderedAreas);
+			if (widgetsAtLocation.length) {
+				area.removeClass('hidden');
+				ajaxify.widgets.reposition(location);
+			}
 		});
+
+		var widgetAreas = $('#content [widget-area]');
+		widgetAreas.find('img:not(.not-responsive)').addClass('img-responsive');
+		widgetAreas.find('.timeago').timeago();
+		widgetAreas.find('img[title].teaser-pic,img[title].user-img').each(function () {
+			$(this).tooltip({
+				placement: 'top',
+				title: $(this).attr('title'),
+			});
+		});
+		$(window).trigger('action:widgets.loaded', {});
+		callback();
 	};
 }(ajaxify || {}));

src/controllers/api.js

@@ -11,12 +11,11 @@ var topics = require('../topics');
 var categories = require('../categories');
 var privileges = require('../privileges');
 var plugins = require('../plugins');
-var widgets = require('../widgets');
 var translator = require('../translator');
 
 var apiController = module.exports;
 
-apiController.getConfig = function (req, res, next) {
+apiController.loadConfig = function (req, callback) {
 	var config = {};
 	config.environment = process.env.NODE_ENV;
 	config.relative_path = nconf.get('relative_path');
@@ -59,7 +58,7 @@ apiController.getConfig = function (req, res, next) {
 	config.requireEmailConfirmation = parseInt(meta.config.requireEmailConfirmation, 10) === 1;
 	config.topicPostSort = meta.config.topicPostSort || 'oldest_to_newest';
 	config.categoryTopicSort = meta.config.categoryTopicSort || 'newest_to_oldest';
-	config.csrf_token = req.csrfToken();
+	config.csrf_token = req.csrfToken && req.csrfToken();
 	config.searchEnabled = plugins.hasListeners('filter:search.query');
 	config.bootswatchSkin = meta.config.bootswatchSkin || 'noskin';
 	config.defaultBootswatchSkin = meta.config.bootswatchSkin || 'noskin';
@@ -80,7 +79,7 @@ apiController.getConfig = function (req, res, next) {
 
 	async.waterfall([
 		function (next) {
-			if (!req.user) {
+			if (!req.uid) {
 				return next(null, config);
 			}
 			user.getSettings(req.uid, next);
@@ -98,41 +97,22 @@ apiController.getConfig = function (req, res, next) {
 			config.bootswatchSkin = (settings.bootswatchSkin && settings.bootswatchSkin !== 'default') ? settings.bootswatchSkin : config.bootswatchSkin;
 			plugins.fireHook('filter:config.get', config, next);
 		},
-	], function (err, config) {
-		if (err) {
-			return next(err);
-		}
-
-		if (res.locals.isAPI) {
-			res.json(config);
-		} else {
-			next(null, config);
-		}
-	});
+	], callback);
 };
 
-
-apiController.renderWidgets = function (req, res, next) {
-	if (!req.query.template || !req.query.locations) {
-		return res.status(200).json({});
-	}
-
-	widgets.render(req.uid,
-		{
-			template: req.query.template,
-			url: req.query.url,
-			locations: req.query.locations,
-			isMobile: req.query.isMobile === 'true',
-			cid: req.query.cid,
+apiController.getConfig = function (req, res, next) {
+	async.waterfall([
+		function (next) {
+			apiController.loadConfig(req, next);
 		},
-		req,
-		res,
-		function (err, widgets) {
-			if (err) {
-				return next(err);
+		function (config, next) {
+			if (res.locals.isAPI) {
+				res.json(config);
+			} else {
+				next(null, config);
 			}
-			res.status(200).json(widgets);
-		});
+		},
+	], next);
 };
 
 apiController.getPostData = function (pid, uid, callback) {

src/database/mongo/helpers.js

@@ -6,7 +6,7 @@ helpers.toMap = function (data) {
 	var map = {};
 	for (var i = 0; i < data.length; i += 1) {
 		map[data[i]._key] = data[i];
-		data[i]._key = undefined;
+		delete data[i]._key;
 	}
 	return map;
 };

src/middleware/render.js

@@ -7,6 +7,7 @@ var winston = require('winston');
 
 var plugins = require('../plugins');
 var translator = require('../translator');
+var widgets = require('../widgets');
 
 module.exports = function (middleware) {
 	middleware.processRender = function (req, res, next) {
@@ -49,6 +50,17 @@ module.exports = function (middleware) {
 				function (data, next) {
 					options = data.templateData;
 
+					widgets.render(req.uid, {
+						template: template + '.tpl',
+						url: options.url,
+						templateData: options,
+						req: req,
+						res: res,
+					}, next);
+				},
+				function (data, next) {
+					options.widgets = data;
+
 					res.locals.template = template;
 					options._locals = undefined;
 

src/routes/api.js

@@ -9,7 +9,6 @@ module.exports = function (app, middleware, controllers) {
 	app.use('/api', router);
 
 	router.get('/config', middleware.applyCSRF, controllers.api.getConfig);
-	router.get('/widgets/render', controllers.api.renderWidgets);
 
 	router.get('/me', middleware.checkGlobalPrivacySettings, controllers.user.getCurrentUser);
 	router.get('/user/uid/:uid', middleware.checkGlobalPrivacySettings, controllers.user.getUserByUID);

src/views/admin/extend/widgets.tpl

@@ -32,32 +32,32 @@
 			<div class="panel-body">
 				<div class="available-widgets">
 					<p>[[admin/extend/widgets:explanation]]</p>
-					<!-- IF !widgets.length -->
+					<!-- IF !availableWidgets.length -->
 					<div class="alert alert-info">[[none-installed, {config.relative_path}/admin/extend/plugins]]</div>
-					<!-- ENDIF !widgets.length -->
+					<!-- ENDIF !availableWidgets.length -->
 					<p>
 						<select id="widget-selector" class="form-control">
-							<!-- BEGIN widgets -->
-							<option value="{widgets.widget}">{widgets.name}</option>
-							<!-- END widgets -->
+							<!-- BEGIN availableWidgets -->
+							<option value="{availableWidgets.widget}">{availableWidgets.name}</option>
+							<!-- END availableWidgets -->
 						</select>
 					</p>
 					<div class="row">
-						<!-- BEGIN widgets -->
+						<!-- BEGIN availableWidgets -->
 						<div class="col-xs-12">
-							<div data-widget="{widgets.widget}" class="panel widget-panel panel-default pointer hide">
+							<div data-widget="{availableWidgets.widget}" class="panel widget-panel panel-default pointer hide">
 								<div class="panel-heading">
-									<strong>{widgets.name}</strong>
-									<small><br />{widgets.description}</small>
+									<strong>{availableWidgets.name}</strong>
+									<small><br />{availableWidgets.description}</small>
 								</div>
 								<div class="panel-body hidden">
 									<form>
-										{widgets.content}
+										{availableWidgets.content}
 									</form>
 								</div>
 							</div>
 						</div>
-						<!-- END widgets -->
+						<!-- END availableWidgets -->
 					</div>
 				</div>
 			</div>

src/widgets/admin.js

@@ -72,7 +72,7 @@ admin.get = function (callback) {
 			callback(false, {
 				templates: templates,
 				areas: widgetData.areas,
-				widgets: widgetData.widgets,
+				availableWidgets: widgetData.widgets,
 			});
 		});
 	});

src/widgets/index.js

@@ -3,27 +3,35 @@
 var async = require('async');
 var winston = require('winston');
 var templates = require('templates.js');
+var _ = require('lodash');
 
 var plugins = require('../plugins');
 var translator = require('../translator');
 var db = require('../database');
+var apiController = require('../controllers/api');
 
 var widgets = module.exports;
 
-widgets.render = function (uid, area, req, res, callback) {
-	if (!area.locations || !area.template) {
+widgets.render = function (uid, options, callback) {
+	if (!options.template) {
 		return callback(new Error('[[error:invalid-data]]'));
 	}
 
 	async.waterfall([
 		function (next) {
-			widgets.getAreas(['global', area.template], area.locations, next);
+			widgets.getWidgetDataForTemplates(['global', options.template], next);
 		},
 		function (data, next) {
 			var widgetsByLocation = {};
 
-			async.map(area.locations, function (location, done) {
-				widgetsByLocation[location] = data.global[location].concat(data[area.template][location]);
+			delete data.global.drafts;
+
+			var locations = _.uniq(Object.keys(data.global).concat(Object.keys(data[options.template])));
+
+			var returnData = {};
+
+			async.each(locations, function (location, done) {
+				widgetsByLocation[location] = (data.global[location] || []).concat(data[options.template][location] || []);
 
 				if (!widgetsByLocation[location].length) {
 					return done(null, { location: location, widgets: [] });
@@ -33,28 +41,43 @@ widgets.render = function (uid, area, req, res, callback) {
 					if (!widget || !widget.data ||
 						(!!widget.data['hide-registered'] && uid !== 0) ||
 						(!!widget.data['hide-guests'] && uid === 0) ||
-						(!!widget.data['hide-mobile'] && area.isMobile)) {
+						(!!widget.data['hide-mobile'] && options.req.useragent.isMobile)) {
 						return next();
 					}
 
-					renderWidget(widget, uid, area, req, res, next);
-				}, function (err, result) {
-					done(err, { location: location, widgets: result.filter(Boolean) });
+					renderWidget(widget, uid, options, next);
+				}, function (err, renderedWidgets) {
+					if (err) {
+						return done(err);
+					}
+					returnData[location] = renderedWidgets.filter(Boolean);
+					done();
 				});
-			}, next);
+			}, function (err) {
+				next(err, returnData);
+			});
 		},
 	], callback);
 };
 
-function renderWidget(widget, uid, area, req, res, callback) {
+function renderWidget(widget, uid, options, callback) {
 	async.waterfall([
 		function (next) {
+			if (options.res.locals.isAPI) {
+				apiController.loadConfig(options.req, next);
+			} else {
+				next(null, options.res.locals.config);
+			}
+		},
+		function (config, next) {
+			var templateData = _.assign(options.templateData, { config: config });
 			plugins.fireHook('filter:widget.render:' + widget.widget, {
 				uid: uid,
-				area: area,
+				area: options,
+				templateData: templateData,
 				data: widget.data,
-				req: req,
-				res: res,
+				req: options.req,
+				res: options.res,
 			}, next);
 		},
 		function (data, next) {
@@ -84,23 +107,28 @@ function renderWidget(widget, uid, area, req, res, callback) {
 	], callback);
 }
 
-widgets.getAreas = function (templates, locations, callback) {
+widgets.getWidgetDataForTemplates = function (templates, callback) {
 	var keys = templates.map(function (tpl) {
 		return 'widgets:' + tpl;
 	});
+
 	async.waterfall([
 		function (next) {
-			db.getObjectsFields(keys, locations, next);
+			db.getObjects(keys, next);
 		},
 		function (data, next) {
 			var returnData = {};
 
 			templates.forEach(function (template, index) {
 				returnData[template] = returnData[template] || {};
+
+				var templateWidgetData = data[index] || {};
+				var locations = Object.keys(templateWidgetData);
+
 				locations.forEach(function (location) {
-					if (data && data[index] && data[index][location]) {
+					if (templateWidgetData && templateWidgetData[location]) {
 						try {
-							returnData[template][location] = JSON.parse(data[index][location]);
+							returnData[template][location] = JSON.parse(templateWidgetData[location]);
 						} catch (err) {
 							winston.error('can not parse widget data. template:  ' + template + ' location: ' + location);
 							returnData[template][location] = [];

test/controllers.js

@@ -687,22 +687,23 @@ describe('Controllers', function () {
 			], done);
 		});
 
-		it('should return {} if there is no template or locations', function (done) {
-			request(nconf.get('url') + '/api/widgets/render', { json: true }, function (err, res, body) {
+		it('should return {} if there are no widgets', function (done) {
+			request(nconf.get('url') + '/api/category/' + cid, { json: true }, function (err, res, body) {
 				assert.ifError(err);
 				assert.equal(res.statusCode, 200);
-				assert(body);
-				assert.equal(Object.keys(body), 0);
+				assert(body.widgets);
+				assert.equal(Object.keys(body.widgets), 0);
 				done();
 			});
 		});
 
 		it('should render templates', function (done) {
-			var url = nconf.get('url') + '/api/widgets/render?template=categories.tpl&url=&isMobile=false&locations%5B%5D=sidebar&locations%5B%5D=footer&locations%5B%5D=header';
+			var url = nconf.get('url') + '/api/categories';
 			request(url, { json: true }, function (err, res, body) {
 				assert.ifError(err);
 				assert.equal(res.statusCode, 200);
-				assert(body);
+				assert(body.widgets);
+				assert(body.widgets.sidebar);
 				done();
 			});
 		});