diff --git a/public/language/en-GB/admin/appearance/customise.json b/public/language/en-GB/admin/appearance/customise.json index 5095f7a937..a1220ec96d 100644 --- a/public/language/en-GB/admin/appearance/customise.json +++ b/public/language/en-GB/admin/appearance/customise.json @@ -3,8 +3,12 @@ "custom-css.description": "Enter your own CSS declarations here, which will be applied after all other styles.", "custom-css.enable": "Enable Custom CSS", + "custom-js": "Custom Javascript", + "custom-js.description": "Enter your own javascript here. It will be executed after the page is loaded completely.", + "custom-js.enable": "Enable Custom Javascript", + "custom-header": "Custom Header", - "custom-header.description": "Enter custom HTML here (ex. JavaScript, Meta Tags, etc.), which will be appended to the <head> section of your forum's markup.", + "custom-header.description": "Enter custom HTML here (ex. Meta Tags, etc.), which will be appended to the <head> section of your forum's markup. Script tags are allowed, but are discouraged, as the Custom Javascript tab is available.", "custom-header.enable": "Enable Custom Header", "custom-css.livereload": "Enable Live Reload", diff --git a/public/less/admin/appearance/customise.less b/public/less/admin/appearance/customise.less index 093230c7c6..3bef7fa560 100644 --- a/public/less/admin/appearance/customise.less +++ b/public/less/admin/appearance/customise.less @@ -1,4 +1,4 @@ -#customCSS, #customHTML, #email-editor { +#customCSS, #customJS, #customHTML, #email-editor { width: 100%; height: 450px; display: block; diff --git a/public/src/admin/appearance/customise.js b/public/src/admin/appearance/customise.js index e95ea5ba30..b9abf899c2 100644 --- a/public/src/admin/appearance/customise.js +++ b/public/src/admin/appearance/customise.js @@ -6,9 +6,11 @@ define('admin/appearance/customise', ['admin/settings', 'ace/ace'], function (Se Customise.init = function () { Settings.prepare(function () { $('#customCSS').text($('#customCSS-holder').val()); + $('#customJS').text($('#customJS-holder').val()); $('#customHTML').text($('#customHTML-holder').val()); var customCSS = ace.edit('customCSS'); + var customJS = ace.edit('customJS'); var customHTML = ace.edit('customHTML'); customCSS.setTheme('ace/theme/twilight'); @@ -20,6 +22,15 @@ define('admin/appearance/customise', ['admin/settings', 'ace/ace'], function (Se $('#customCSS-holder').val(customCSS.getValue()); }); + customJS.setTheme('ace/theme/twilight'); + customJS.getSession().setMode('ace/mode/js'); + + customJS.on('change', function () { + app.flags = app.flags || {}; + app.flags._unsaved = true; + $('#customJS-holder').val(customJS.getValue()); + }); + customHTML.setTheme('ace/theme/twilight'); customHTML.getSession().setMode('ace/mode/html'); diff --git a/src/middleware/header.js b/src/middleware/header.js index e35cc0e333..ec454936e0 100644 --- a/src/middleware/header.js +++ b/src/middleware/header.js @@ -65,9 +65,6 @@ module.exports = function (middleware) { async.waterfall([ function (next) { async.parallel({ - scripts: function (next) { - plugins.fireHook('filter:scripts.get', [], next); - }, isAdmin: function (next) { user.isAdministrator(req.uid, next); }, @@ -143,8 +140,8 @@ module.exports = function (middleware) { templateValues.userJSON = JSON.stringify(results.user); templateValues.useCustomCSS = parseInt(meta.config.useCustomCSS, 10) === 1 && meta.config.customCSS; templateValues.customCSS = templateValues.useCustomCSS ? (meta.config.renderedCustomCSS || '') : ''; - templateValues.useCustomJS = parseInt(meta.config.useCustomJS, 10) === 1; - templateValues.customJS = templateValues.useCustomJS ? meta.config.customJS : ''; + templateValues.useCustomHTML = parseInt(meta.config.useCustomHTML, 10) === 1; + templateValues.customHTML = templateValues.useCustomHTML ? meta.config.customHTML : ''; templateValues.maintenanceHeader = parseInt(meta.config.maintenanceMode, 10) === 1 && !results.isAdmin; templateValues.defaultLang = meta.config.defaultLang || 'en-GB'; templateValues.userLang = res.locals.config.userLang; @@ -155,12 +152,6 @@ module.exports = function (middleware) { templateValues.template = { name: res.locals.template }; templateValues.template[res.locals.template] = true; - templateValues.scripts = results.scripts.map(function (script) { - return { src: script }; - }); - - addTimeagoLocaleScript(templateValues.scripts, res.locals.config.userLang); - if (req.route && req.route.path === '/') { modifyTitle(templateValues); } @@ -192,6 +183,21 @@ module.exports = function (middleware) { }, next); }, function (data, next) { + async.parallel({ + scripts: async.apply(plugins.fireHook, 'filter:scripts.get', []), + }, function (err, results) { + next(err, data, results); + }); + }, + function (data, results, next) { + data.templateValues.scripts = results.scripts.map(function (script) { + return { src: script }; + }); + addTimeagoLocaleScript(data.templateValues.scripts, res.locals.config.userLang); + + data.templateValues.useCustomJS = parseInt(meta.config.useCustomJS, 10) === 1; + data.templateValues.customJS = data.templateValues.useCustomJS ? meta.config.customJS : ''; + req.app.render('footer', data.templateValues, next); }, ], callback); diff --git a/src/upgrades/1.7.0/generate-custom-html.js b/src/upgrades/1.7.0/generate-custom-html.js new file mode 100644 index 0000000000..5de0238920 --- /dev/null +++ b/src/upgrades/1.7.0/generate-custom-html.js @@ -0,0 +1,37 @@ +'use strict'; + +var meta = require('../../meta'); + +module.exports = { + name: 'Generate customHTML block from old customJS setting', + timestamp: Date.UTC(2017, 9, 12), + method: function (callback) { + var newHTML = meta.config.customJS; + var newJS = []; + + // Forgive me for parsing HTML with regex... + var scriptMatch = /^([\s\S]+?)<\/script>/m; + var match = scriptMatch.exec(newHTML); + + while (match) { + if (match[1]) { + // Append to newJS array + newJS.push(match[1].trim()); + + // Remove the match from the existing value + newHTML = ((match.index > 0 ? newHTML.slice(0, match.index) : '') + newHTML.slice(match.index + match[0].length)).trim(); + } + + match = scriptMatch.exec(newHTML); + } + + // Combine newJS array + newJS = newJS.join('\n\n'); + + // Write both values to config + meta.configs.setMultiple({ + customHTML: newHTML, + customJS: newJS, + }, callback); + }, +}; diff --git a/src/views/admin/appearance/customise.tpl b/src/views/admin/appearance/customise.tpl index b2d1307b80..1c8a76b2f4 100644 --- a/src/views/admin/appearance/customise.tpl +++ b/src/views/admin/appearance/customise.tpl @@ -1,6 +1,7 @@

@@ -23,19 +24,37 @@
+
+

+ [[admin/appearance/customise:custom-js.description]] +

+
+ + +
+
+
+ +
+
+
+

[[admin/appearance/customise:custom-header.description]]

- +
-