nodebb/public/src/modules/settings.js

'use strict';


define('settings', ['hooks', 'alerts'], function (hooks, alerts) {
	// eslint-disable-next-line prefer-const
	let Settings;
	let onReady = [];
	let waitingJobs = 0;
	// eslint-disable-next-line prefer-const
	let helper;

	/**
	 Returns the hook of given name that matches the given type or element.
	 @param type The type of the element to get the matching hook for, or the element itself.
	 @param name The name of the hook.
	 */
	function getHook(type, name) {
		if (typeof type !== 'string') {
			type = $(type);
			type = type.data('type') || type.attr('type') || type.prop('tagName');
		}
		const plugin = Settings.plugins[type.toLowerCase()];
		if (plugin == null) {
			return;
		}
		const hook = plugin[name];
		if (typeof hook === 'function') {
			return hook;
		}
		return null;
	}

	// eslint-disable-next-line prefer-const
	helper = {
		/**
		 @returns Object A deep clone of the given object.
		 */
		deepClone: function (obj) {
			if (typeof obj === 'object') {
				return JSON.parse(JSON.stringify(obj));
			}
			return obj;
		},
		/**
		 Creates a new Element with given data.
		 @param tagName The tag-name of the element to create.
		 @param data The attributes to set.
		 @param text The text to add into the element.
		 @returns HTMLElement The created element.
		 */
		createElement: function (tagName, data, text) {
			const element = document.createElement(tagName);
			for (const k in data) {
				if (data.hasOwnProperty(k)) {
					element.setAttribute(k, data[k]);
				}
			}
			if (text) {
				element.appendChild(document.createTextNode(text));
			}
			return element;
		},
		/**
		 Calls the init-hook of the given element.
		 @param element The element to initialize.
		 */
		initElement: function (element) {
			const hook = getHook(element, 'init');
			if (hook != null) {
				hook.call(Settings, $(element));
			}
		},
		/**
		 Calls the destruct-hook of the given element.
		 @param element The element to destruct.
		 */
		destructElement: function (element) {
			const hook = getHook(element, 'destruct');
			if (hook != null) {
				hook.call(Settings, $(element));
			}
		},
		/**
		 Creates and initializes a new element.
		 @param type The type of the new element.
		 @param tagName The tag-name of the new element.
		 @param data The data to forward to create-hook or use as attributes.
		 @returns JQuery The created element.
		 */
		createElementOfType: function (type, tagName, data) {
			let element;
			const hook = getHook(type, 'create');
			if (hook != null) {
				element = $(hook.call(Settings, type, tagName, data));
			} else {
				if (data == null) {
					data = {};
				}
				if (type != null) {
					data.type = type;
				}
				element = $(helper.createElement(tagName || 'input', data));
			}
			element.data('type', type);
			helper.initElement(element);
			return element;
		},
		/**
		 Creates a new Array that contains values of given Array depending on trim and empty.
		 @param array The array to clean.
		 @param trim Whether to trim each value if it has a trim-function.
		 @param empty Whether empty values should get added.
		 @returns Array The filtered and/or modified Array.
		 */
		cleanArray: function (array, trim, empty) {
			const cleaned = [];
			if (!trim && empty) {
				return array;
			}
			for (let i = 0; i < array.length; i += 1) {
				let value = array[i];
				if (trim) {
					if (value === !!value) {
						value = +value;
					} else if (value && typeof value.trim === 'function') {
						value = value.trim();
					}
				}
				if (empty || (value != null && value.length)) {
					cleaned.push(value);
				}
			}
			return cleaned;
		},
		isTrue: function (value) {
			return value === 'true' || +value === 1;
		},
		isFalse: function (value) {
			return value === 'false' || +value === 0;
		},
		/**
		 Calls the get-hook of the given element and returns its result.
		 If no hook is specified it gets treated as input-field.
		 @param element The element of that the value should get read.
		 @returns Object The value of the element.
		 */
		readValue: function (element) {
			let empty = !helper.isFalse(element.data('empty'));
			const trim = !helper.isFalse(element.data('trim'));
			const split = element.data('split');
			const hook = getHook(element, 'get');
			let value;
			if (hook != null) {
				return hook.call(Settings, element, trim, empty);
			}
			if (split != null) {
				empty = helper.isTrue(element.data('empty')); // default empty-value is false for arrays
				value = element.val();
				const array = (value != null && value.split(split || ',')) || [];
				return helper.cleanArray(array, trim, empty);
			}
			value = element.val();
			if (trim && value != null && typeof value.trim === 'function') {
				value = value.trim();
			}
			if (empty || (value !== undefined && (value == null || value.length !== 0))) {
				return value;
			}
		},
		/**
		 Calls the set-hook of the given element.
		 If no hook is specified it gets treated as input-field.
		 @param element The JQuery-Object of the element to fill.
		 @param value The value to set.
		 */
		fillField: function (element, value) {
			const hook = getHook(element, 'set');
			let trim = element.data('trim');
			trim = trim !== 'false' && +trim !== 0;
			if (hook != null) {
				return hook.call(Settings, element, value, trim);
			}
			if (value instanceof Array) {
				value = value.join(element.data('split') || (trim ? ', ' : ','));
			}
			if (trim && value && typeof value.trim === 'function') {
				value = value.trim();
				if (typeof value.toString === 'function') {
					value = value.toString();
				}
			} else if (value != null) {
				if (typeof value.toString === 'function') {
					value = value.toString();
				}
				if (trim) {
					value = value.trim();
				}
			} else {
				value = '';
			}
			if (value !== undefined) {
				element.val(value);
			}
		},
		/**
		 Calls the init-hook and {@link helper.fillField} on each field within wrapper-object.
		 @param wrapper The wrapper-element to set settings within.
		 */
		initFields: function (wrapper) {
			$('[data-key]', wrapper).each(function (ignored, field) {
				field = $(field);
				const hook = getHook(field, 'init');
				const keyParts = field.data('key').split('.');
				let value = Settings.get();
				if (hook != null) {
					hook.call(Settings, field);
				}
				for (let i = 0; i < keyParts.length; i += 1) {
					const part = keyParts[i];
					if (part && value != null) {
						value = value[part];
					}
				}
				helper.fillField(field, value);
			});
		},
		/**
		 Increases the amount of jobs before settings are ready by given amount.
		 @param amount The amount of jobs to register.
		 */
		registerReadyJobs: function (amount) {
			waitingJobs += amount;
			return waitingJobs;
		},
		/**
		 Decreases the amount of jobs before settings are ready by given amount or 1.
		 If the amount is less or equal 0 all callbacks registered by {@link helper.whenReady} get called.
		 @param amount The amount of jobs that finished.
		 */
		beforeReadyJobsDecreased: function (amount) {
			if (amount == null) {
				amount = 1;
			}
			if (waitingJobs > 0) {
				waitingJobs -= amount;
				if (waitingJobs <= 0) {
					for (let i = 0; i < onReady.length; i += 1) {
						onReady[i]();
					}
					onReady = [];
				}
			}
		},
		/**
		 Calls the given callback when the settings are ready.
		 @param callback The callback.
		 */
		whenReady: function (callback) {
			if (waitingJobs <= 0) {
				callback();
			} else {
				onReady.push(callback);
			}
		},
		serializeForm: function (formEl) {
			const values = formEl.serializeObject();

			// "Fix" checkbox values, so that unchecked options are not omitted
			formEl.find('input[type="checkbox"]').each(function (idx, inputEl) {
				inputEl = $(inputEl);
				if (!inputEl.is(':checked')) {
					values[inputEl.attr('name')] = 'off';
				}
			});

			// save multiple selects as json arrays
			formEl.find('select[multiple]').each(function (idx, selectEl) {
				selectEl = $(selectEl);
				values[selectEl.attr('name')] = JSON.stringify(selectEl.val());
			});

			return values;
		},
		/**
		 Persists the given settings with given hash.
		 @param hash The hash to use as settings-id.
		 @param settings The settings-object to persist.
		 @param notify Whether to send notification when settings got saved.
		 @param callback The callback to call when done.
		 */
		persistSettings: function (hash, settings, notify, callback) {
			if (settings != null && settings._ != null && typeof settings._ !== 'string') {
				settings = helper.deepClone(settings);
				settings._ = JSON.stringify(settings._);
			}
			socket.emit('admin.settings.set', {
				hash: hash,
				values: settings,
			}, function (err) {
				if (notify) {
					if (err) {
						alerts.alert({
							title: '[[admin/admin:changes-not-saved]]',
							type: 'danger',
							message: `[[admin/admin/changes-not-saved-message, ${err.message}]]`,
							timeout: 5000,
						});
					} else {
						alerts.alert({
							title: '[[admin/admin:changes-saved]]',
							type: 'success',
							message: '[[admin/admin:changes-saved-message]]',
							timeout: 2500,
						});
					}
				}
				if (typeof callback === 'function') {
					callback(err);
				}
			});
		},
		/**
		 Sets the settings to use to given settings.
		 @param settings The settings to use.
		 */
		use: function (settings) {
			try {
				settings._ = JSON.parse(settings._);
			} catch (_error) {}
			Settings.cfg = settings;
		},
	};

	// eslint-disable-next-line prefer-const
	Settings = {
		helper: helper,
		plugins: {},
		cfg: {},

		/**
		 Returns the saved settings.
		 @returns Object The settings.
		 */
		get: function () {
			if (Settings.cfg != null && Settings.cfg._ !== undefined) {
				return Settings.cfg._;
			}
			return Settings.cfg;
		},
		/**
		 Registers a new plugin and calls its use-hook.
		 @param service The plugin to register.
		 @param types The types to bind the plugin to.
		 */
		registerPlugin: function (service, types) {
			if (types == null) {
				types = service.types;
			} else {
				service.types = types;
			}
			if (typeof service.use === 'function') {
				service.use.call(Settings);
			}
			for (let i = 0; i < types.length; i += 1) {
				const type = types[i].toLowerCase();
				if (Settings.plugins[type] == null) {
					Settings.plugins[type] = service;
				}
			}
		},
		/**
		 Sets the settings to given ones, resets the fields within given wrapper and saves the settings server-side.
		 @param hash The hash to use as settings-id.
		 @param settings The settings to set.
		 @param wrapper The wrapper-element to find settings within.
		 @param callback The callback to call when done.
		 @param notify Whether to send notification when settings got saved.
		 */
		set: function (hash, settings, wrapper, callback, notify) {
			if (notify == null) {
				notify = true;
			}
			helper.whenReady(function () {
				helper.use(settings);
				helper.initFields(wrapper || 'form');
				helper.persistSettings(hash, settings, notify, callback);
			});
		},
		/**
		 Fetches the settings from server and calls {@link Settings.helper.initFields} once the settings are ready.
		 @param hash The hash to use as settings-id.
		 @param wrapper The wrapper-element to set settings within.
		 @param callback The callback to call when done.
		 */
		sync: function (hash, wrapper, callback) {
			socket.emit('admin.settings.get', {
				hash: hash,
			}, function (err, values) {
				if (err) {
					if (typeof callback === 'function') {
						callback(err);
					}
				} else {
					helper.whenReady(function () {
						helper.use(values);
						helper.initFields(wrapper || 'form');
						if (typeof callback === 'function') {
							callback();
						}
					});
				}
			});
		},
		/**
		 Reads the settings from fields and saves them server-side.
		 @param hash The hash to use as settings-id.
		 @param wrapper The wrapper-element to find settings within.
		 @param callback The callback to call when done.
		 @param notify Whether to send notification when settings got saved.
		 */
		persist: function (hash, wrapper, callback, notify) {
			const notSaved = [];
			const fields = $('[data-key]', wrapper || 'form').toArray();
			if (notify == null) {
				notify = true;
			}
			for (let i = 0; i < fields.length; i += 1) {
				const field = $(fields[i]);
				const value = helper.readValue(field);
				let parentCfg = Settings.get();
				const keyParts = field.data('key').split('.');
				const lastKey = keyParts[keyParts.length - 1];
				if (keyParts.length > 1) {
					for (let j = 0; j < keyParts.length - 1; j += 1) {
						const part = keyParts[j];
						if (part && parentCfg != null) {
							parentCfg = parentCfg[part];
						}
					}
				}
				if (parentCfg != null) {
					if (value != null) {
						parentCfg[lastKey] = value;
					} else {
						delete parentCfg[lastKey];
					}
				} else {
					notSaved.push(field.data('key'));
				}
			}
			if (notSaved.length) {
				alerts.alert({
					title: 'Attributes Not Saved',
					message: "'" + (notSaved.join(', ')) + "' could not be saved. Please contact the plugin-author!",
					type: 'danger',
					timeout: 5000,
				});
			}
			helper.persistSettings(hash, Settings.cfg, notify, callback);
		},
		load: function (hash, formEl, callback) {
			callback = callback || function () {};
			const call = formEl.attr('data-socket-get');

			socket.emit(call || 'admin.settings.get', {
				hash: hash,
			}, function (err, values) {
				if (err) {
					return callback(err);
				}
				// multipe selects are saved as json arrays, parse them here
				$(formEl).find('select[multiple]').each(function (idx, selectEl) {
					const key = $(selectEl).attr('name');
					if (key && values.hasOwnProperty(key)) {
						try {
							values[key] = JSON.parse(values[key]);
						} catch (e) {
							// Leave the value as is
						}
					}
				});

				// Save loaded settings into ajaxify.data for use client-side
				ajaxify.data[call ? hash : 'settings'] = values;

				helper.whenReady(function () {
					$(formEl).find('[data-sorted-list]').each(function (idx, el) {
						getHook(el, 'get').call(Settings, $(el), hash);
					});
				});

				$(formEl).deserialize(values);
				hooks.fire('action:admin.settingsLoaded');

				// Handle unsaved changes
				$(formEl).on('change', 'input, select, textarea', function () {
					app.flags = app.flags || {};
					app.flags._unsaved = true;
				});

				const saveEl = document.getElementById('save');
				if (saveEl) {
					require(['mousetrap'], function (mousetrap) {
						mousetrap.bind('ctrl+s', function (ev) {
							saveEl.click();
							ev.preventDefault();
						});
					});
				}

				callback(null, values);
			});
		},
		save: function (hash, formEl, callback) {
			formEl = $(formEl);

			const controls = formEl.get(0).elements;
			const ok = Settings.check(controls);
			if (!ok) {
				return;
			}

			if (formEl.length) {
				const values = helper.serializeForm(formEl);

				helper.whenReady(function () {
					const list = formEl.find('[data-sorted-list]');
					if (list.length) {
						list.each((idx, item) => {
							getHook(item, 'set').call(Settings, $(item), values);
						});
					}
				});

				const call = formEl.attr('data-socket-set');
				socket.emit(call || 'admin.settings.set', {
					hash: hash,
					values: values,
				}, function (err) {
					// Remove unsaved flag to re-enable ajaxify
					app.flags._unsaved = false;

					// Also save to local ajaxify.data
					ajaxify.data[call ? hash : 'settings'] = values;

					if (typeof callback === 'function') {
						callback(err);
					} else if (err) {
						alerts.alert({
							title: '[[admin/admin:changes-not-saved]]',
							message: `[[admin/admin:changes-not-saved-message, ${err.message}]]`,
							type: 'error',
							timeout: 2500,
						});
					} else {
						const saveBtn = document.getElementById('save');
						saveBtn.classList.toggle('saved', true);
						setTimeout(() => {
							saveBtn.classList.toggle('saved', false);
						}, 1500);
					}
				});
			}
		},
		check: function (controls) {
			const onTrigger = (e) => {
				const wrapper = e.target.closest('.form-group');
				if (wrapper) {
					wrapper.classList.add('has-error');
				}

				e.target.removeEventListener('invalid', onTrigger);
			};

			return Array.prototype.map.call(controls, (controlEl) => {
				const wrapper = controlEl.closest('.form-group');
				if (wrapper) {
					wrapper.classList.remove('has-error');
				}

				controlEl.addEventListener('invalid', onTrigger);
				return controlEl.reportValidity();
			}).every(Boolean);
		},
	};


	helper.registerReadyJobs(1);
	require([
		'settings/checkbox',
		'settings/number',
		'settings/textarea',
		'settings/select',
		'settings/array',
		'settings/key',
		'settings/object',
		'settings/sorted-list',
	], function () {
		for (let i = 0; i < arguments.length; i += 1) {
			Settings.registerPlugin(arguments[i]);
		}
		helper.beforeReadyJobsDecreased();
	});

	return Settings;
});