Split up customJS into customHTML and customJS for better organisation (#5981)

* WIP

* fixed customJS not actually working in footer

* Moving scripts to footer, #5980

* Added upgrade scripts for #5980

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 <code>&lt;head&gt;</code> section of your forum's markup.",
+	"custom-header.description": "Enter custom HTML here (ex. Meta Tags, etc.), which will be appended to the <code>&lt;head&gt;</code> section of your forum's markup. Script tags are allowed, but are discouraged, as the <a href=\"#custom-header\" data-toggle=\"tab\">Custom Javascript</a> tab is available.",
 	"custom-header.enable": "Enable Custom Header",
 
 	"custom-css.livereload": "Enable Live Reload",

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;

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');
 

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);

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 = /^<script\s?(?!async|deferred)?>([\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);
+	},
+};

src/views/admin/appearance/customise.tpl

@@ -1,6 +1,7 @@
 <div id="customise" class="customise">
 	<ul class="nav nav-pills">
 		<li class="active"><a href="#custom-css" data-toggle="tab">[[admin/appearance/customise:custom-css]]</a></li>
+		<li><a href="#custom-js" data-toggle="tab">[[admin/appearance/customise:custom-js]]</a></li>
 		<li><a href="#custom-header" data-toggle="tab">[[admin/appearance/customise:custom-header]]</a></li>
 	</ul>
 	<br />
@@ -23,19 +24,37 @@
 			</form>
 		</div>
 
+		<div class="tab-pane fade" id="custom-js">
+			<p>
+				[[admin/appearance/customise:custom-js.description]]
+			</p>
+			<div id="customJS"></div>
+			<input type="hidden" id="customJS-holder" value="" data-field="customJS" />
+
+			<br />
+			<form class="form">
+				<div class="form-group">
+					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="useCustomJS">
+						<input class="mdl-switch__input" id="useCustomJS" type="checkbox" data-field="useCustomJS" />
+						<span class="mdl-switch__label">[[admin/appearance/customise:custom-js.enable]]</span>
+					</label>
+				</div>
+			</form>
+		</div>
+
 		<div class="tab-pane fade" id="custom-header">
 			<p>
 				[[admin/appearance/customise:custom-header.description]]
 			</p>
 
 			<div id="customHTML"></div>
-			<input type="hidden" id="customHTML-holder" value="" data-field="customJS" />
+			<input type="hidden" id="customHTML-holder" value="" data-field="customHTML" />
 
 			<br />
 			<form class="form">
 				<div class="form-group">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="useCustomJS">
-						<input class="mdl-switch__input" id="useCustomJS" type="checkbox" data-field="useCustomJS" />
+					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="useCustomHTML">
+						<input class="mdl-switch__input" id="useCustomHTML" type="checkbox" data-field="useCustomHTML" />
 						<span class="mdl-switch__label">[[admin/appearance/customise:custom-header.enable]]</span>
 					</label>
 				</div>