From 9e94edb5aa8e3cf26cca8bea0c1e04ccc886107e Mon Sep 17 00:00:00 2001 From: Baris Usakli Date: Fri, 7 Jul 2017 15:33:16 -0400 Subject: [PATCH] widgets refactor render widgets server side widgets can use all the data the template can use --- public/src/ajaxify.js | 2 +- public/src/widgets.js | 93 +++++++++++++----------------- src/controllers/api.js | 50 +++++----------- src/database/mongo/helpers.js | 2 +- src/middleware/render.js | 12 ++++ src/routes/api.js | 1 - src/views/admin/extend/widgets.tpl | 22 +++---- src/widgets/admin.js | 2 +- src/widgets/index.js | 64 ++++++++++++++------ test/controllers.js | 9 ++- 10 files changed, 130 insertions(+), 127 deletions(-) diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js index 9ca9052dc9..e2303c501c 100644 --- a/public/src/ajaxify.js +++ b/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 }); diff --git a/public/src/widgets.js b/public/src/widgets.js index f5f667d2a7..90b2d355c7 100644 --- a/public/src/widgets.js +++ b/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, {}); - } - - var area = $('#content [widget-area="' + location + '"]'); + widgetsAtLocation.forEach(function (widget) { + html += widget.html; - if (!area.length && window.location.pathname.indexOf('/admin') === -1 && renderedWidgets.length) { - if (location === 'footer' && !$('#content [widget-area="footer"]').length) { - $('#content').append($('
')); - } else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) { - if ($('[component="account/cover"]').length) { - $('[component="account/cover"]').nextAll().wrapAll($('
')); - } else if ($('[component="groups/cover"]').length) { - $('[component="groups/cover"]').nextAll().wrapAll($('
')); - } else { - $('#content > *').wrapAll($('
')); - } - } else if (location === 'header' && !$('#content [widget-area="header"]').length) { - $('#content').prepend($('
')); + if (location === 'footer' && !$('#content [widget-area="footer"]').length) { + $('#content').append($('
')); + } else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) { + if ($('[component="account/cover"]').length) { + $('[component="account/cover"]').nextAll().wrapAll($('
')); + } else if ($('[component="groups/cover"]').length) { + $('[component="groups/cover"]').nextAll().wrapAll($('
')); + } else { + $('#content > *').wrapAll($('
')); } - - area = $('#content [widget-area="' + location + '"]'); + } else if (location === 'header' && !$('#content [widget-area="header"]').length) { + $('#content').prepend($('
')); } + }); + area = $('#content [widget-area="' + location + '"]'); + if (html && area.length) { area.html(html); + } - if (renderedWidgets.length) { - area.removeClass('hidden'); - ajaxify.widgets.reposition(location); - } + 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'), - }); + 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); }); + $(window).trigger('action:widgets.loaded', {}); + callback(); }; }(ajaxify || {})); diff --git a/src/controllers/api.js b/src/controllers/api.js index 5ec2f55697..b464748f49 100644 --- a/src/controllers/api.js +++ b/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) { diff --git a/src/database/mongo/helpers.js b/src/database/mongo/helpers.js index 47f8434c77..7a791c9fca 100644 --- a/src/database/mongo/helpers.js +++ b/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; }; diff --git a/src/middleware/render.js b/src/middleware/render.js index e37b994445..bf3cb03638 100644 --- a/src/middleware/render.js +++ b/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; diff --git a/src/routes/api.js b/src/routes/api.js index 9b5a7f77c7..34f14f5a8c 100644 --- a/src/routes/api.js +++ b/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); diff --git a/src/views/admin/extend/widgets.tpl b/src/views/admin/extend/widgets.tpl index 07b8b5c193..0e2d2a848c 100644 --- a/src/views/admin/extend/widgets.tpl +++ b/src/views/admin/extend/widgets.tpl @@ -32,32 +32,32 @@

[[admin/extend/widgets:explanation]]

- +
[[none-installed, {config.relative_path}/admin/extend/plugins]]
- +

- +
-
+
- {widgets.name} -
{widgets.description} + {availableWidgets.name} +
{availableWidgets.description}
- +
diff --git a/src/widgets/admin.js b/src/widgets/admin.js index dde3aca43d..4ca05571f5 100644 --- a/src/widgets/admin.js +++ b/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, }); }); }); diff --git a/src/widgets/index.js b/src/widgets/index.js index 2e228dab63..982b40c696 100644 --- a/src/widgets/index.js +++ b/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] = []; diff --git a/test/controllers.js b/test/controllers.js index 34c515fc7a..07bd00ec9c 100644 --- a/test/controllers.js +++ b/test/controllers.js @@ -688,21 +688,20 @@ describe('Controllers', function () { }); 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) { + request(nconf.get('url') + '/api/users', { json: true }, function (err, res, body) { assert.ifError(err); assert.equal(res.statusCode, 200); assert(body); - assert.equal(Object.keys(body), 0); + 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'; - request(url, { json: true }, function (err, res, body) { + request(nconf.get('url') + '/api/categories', { json: true }, function (err, res, body) { assert.ifError(err); assert.equal(res.statusCode, 200); - assert(body); + assert(body.widgets && body.widgets.sidebar); done(); }); });