Feat: Client-side hooks - replace window.trigger (#9679)

* feat/clientside-hooks: replace window.trigger with hooks.fire * feat(clientside-hooks): Move hooks require to the top * fix: simplifying complex logical expression * fix: client-side hook for translator - post-review fixes
NodeBB · Aug 13, 2021 · 342503e · 342503e
1 parent a850dd2
commit 342503e
Show file tree

Hide file tree

Showing 30 changed files with 135 additions and 98 deletions.
diff --git a/public/src/admin/settings.js b/public/src/admin/settings.js
@@ -1,7 +1,7 @@
 'use strict';
 
 
-define('admin/settings', ['uploader', 'mousetrap'], function (uploader, mousetrap) {
+define('admin/settings', ['uploader', 'mousetrap', 'hooks'], function (uploader, mousetrap, hooks) {
 	var Settings = {};
 
 	Settings.populateTOC = function () {
@@ -87,7 +87,7 @@ define('admin/settings', ['uploader', 'mousetrap'], function (uploader, mousetra
 					type: 'success',
 				});
 
-				$(window).trigger('action:admin.settingsSaved');
+				hooks.fire('action:admin.settingsSaved');
 			});
 		});
 
@@ -111,7 +111,7 @@ define('admin/settings', ['uploader', 'mousetrap'], function (uploader, mousetra
 		}
 
 		setTimeout(function () {
-			$(window).trigger('action:admin.settingsLoaded');
+			hooks.fire('action:admin.settingsLoaded');
 		}, 0);
 	};
 

diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js
@@ -92,7 +92,7 @@ ajaxify = window.ajaxify || {};
 		var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search + window.location.hash);
 		ajaxify.updateHistory(url, true);
 		ajaxify.end(url, ajaxify.data.template.name);
-		$(window).trigger('action:ajaxify.coldLoad');
+		hooks.fire('action:ajaxify.coldLoad');
 	};
 
 	ajaxify.isCold = function () {
@@ -179,7 +179,7 @@ ajaxify = window.ajaxify || {};
 	}
 
 	function renderTemplate(url, tpl_url, data, callback) {
-		$(window).trigger('action:ajaxify.loadingTemplates', {});
+		hooks.fire('action:ajaxify.loadingTemplates', {});
 		require(['translator', 'benchpress'], function (translator, Benchpress) {
 			Benchpress.render(tpl_url, data)
 				.then(rendered => translator.translate(rendered))
@@ -215,7 +215,7 @@ ajaxify = window.ajaxify || {};
 			// Allow translation strings in title on ajaxify (#5927)
 			title = translator.unescape(title);
 			var data = { title: title };
-			$(window).trigger('action:ajaxify.updateTitle', data);
+			hooks.fire('action:ajaxify.updateTitle', data);
 			translator.translate(data.title, function (translated) {
 				window.document.title = $('<div></div>').html(translated).text();
 			});
@@ -299,7 +299,7 @@ ajaxify = window.ajaxify || {};
 		});
 		ajaxify.widgets.render(tpl_url);
 
-		$(window).trigger('action:ajaxify.contentLoaded', { url: url, tpl: tpl_url });
+		hooks.fire('action:ajaxify.contentLoaded', { url: url, tpl: tpl_url });
 
 		app.processPage();
 	};
@@ -379,7 +379,7 @@ ajaxify = window.ajaxify || {};
 	ajaxify.loadData = function (url, callback) {
 		url = ajaxify.removeRelativePath(url);
 
-		$(window).trigger('action:ajaxify.loadingData', { url: url });
+		hooks.fire('action:ajaxify.loadingData', { url: url });
 
 		apiXHR = $.ajax({
 			url: config.relative_path + '/api/' + url,
@@ -405,7 +405,7 @@ ajaxify = window.ajaxify || {};
 				ajaxify.data = data;
 				data.config = config;
 
-				$(window).trigger('action:ajaxify.dataLoaded', { url: url, data: data });
+				hooks.fire('action:ajaxify.dataLoaded', { url: url, data: data });
 
 				callback(null, data);
 			},
@@ -440,6 +440,11 @@ ajaxify = window.ajaxify || {};
 }());
 
 $(document).ready(function () {
+	var hooks;
+	require(['hooks'], function (_hooks) {
+		hooks = _hooks;
+	});
+
 	$(window).on('popstate', function (ev) {
 		ev = ev.originalEvent;
 
@@ -450,7 +455,7 @@ $(document).ready(function () {
 				}, ev.state.returnPath, config.relative_path + '/' + ev.state.returnPath);
 			} else if (ev.state.url !== undefined) {
 				ajaxify.go(ev.state.url, function () {
-					$(window).trigger('action:popstate', { url: ev.state.url });
+					hooks.fire('action:popstate', { url: ev.state.url });
 				}, true);
 			}
 		}

diff --git a/public/src/app.js b/public/src/app.js
@@ -18,6 +18,11 @@ app.cacheBuster = null;
 
 	app.cacheBuster = config['cache-buster'];
 
+	var hooks;
+	require(['hooks'], function (_hooks) {
+		hooks = _hooks;
+	});
+
 	$(document).ready(function () {
 		ajaxify.parseData();
 		app.load();
@@ -117,7 +122,7 @@ app.cacheBuster = null;
 				unread.initUnreadTopics();
 			}
 			function finishLoad() {
-				$(window).trigger('action:app.load');
+				hooks.fire('action:app.load');
 				app.showMessages();
 				appLoaded = true;
 			}
@@ -146,7 +151,7 @@ app.cacheBuster = null;
 
 	app.logout = function (redirect) {
 		redirect = redirect === undefined ? true : redirect;
-		$(window).trigger('action:app.logout');
+		hooks.fire('action:app.logout');
 
 		$.ajax(config.relative_path + '/logout', {
 			type: 'POST',
@@ -157,7 +162,7 @@ app.cacheBuster = null;
 				app.flags._logout = true;
 			},
 			success: function (data) {
-				$(window).trigger('action:app.loggedOut', data);
+				hooks.fire('action:app.loggedOut', data);
 				if (redirect) {
 					if (data.next) {
 						window.location.href = data.next;
@@ -513,7 +518,7 @@ app.cacheBuster = null;
 
 				quickSearchResults.removeClass('hidden').find('.quick-search-results-container').html('');
 				quickSearchResults.find('.loading-indicator').removeClass('hidden');
-				$(window).trigger('action:search.quick.start', options);
+				hooks.fire('action:search.quick.start', options);
 				options.searchOptions.searchOnly = 1;
 				search.api(options.searchOptions, function (data) {
 					quickSearchResults.find('.loading-indicator').addClass('hidden');
@@ -538,7 +543,7 @@ app.cacheBuster = null;
 							'.quick-search-results .quick-search-title, .quick-search-results .snippet'
 						);
 						search.highlightMatches(options.searchOptions.term, highlightEls);
-						$(window).trigger('action:search.quick.complete', {
+						hooks.fire('action:search.quick.complete', {
 							data: data,
 							options: options,
 						});
@@ -658,7 +663,7 @@ app.cacheBuster = null;
 			require(['search'], function (search) {
 				var data = search.getSearchPreferences();
 				data.term = input.val();
-				$(window).trigger('action:search.submit', {
+				hooks.fire('action:search.submit', {
 					searchOptions: data,
 					searchElements: searchElements,
 				});
@@ -711,7 +716,7 @@ app.cacheBuster = null;
 	};
 
 	app.newTopic = function (cid, tags) {
-		$(window).trigger('action:composer.topic.new', {
+		hooks.fire('action:composer.topic.new', {
 			cid: cid || ajaxify.data.cid || 0,
 			tags: tags || (ajaxify.data.tag ? [ajaxify.data.tag] : []),
 		});

diff --git a/public/src/client/account/blocks.js b/public/src/client/account/blocks.js
@@ -3,7 +3,8 @@
 define('forum/account/blocks', [
 	'forum/account/header',
 	'api',
-], function (header, api) {
+	'hooks',
+], function (header, api, hooks) {
 	var Blocks = {};
 
 	Blocks.init = function () {
@@ -54,7 +55,7 @@ define('forum/account/blocks', [
 					$('#users-container').html(html);
 					$('#users-container').siblings('div.alert')[html.length ? 'hide' : 'show']();
 				});
-				$(window).trigger('action:user.blocks.toggle', { data: payload });
+				hooks.fire('action:user.blocks.toggle', { data: payload });
 			})
 			.fail(function () {
 				ajaxify.go(ajaxify.currentPage);

diff --git a/public/src/client/account/topics.js b/public/src/client/account/topics.js
@@ -1,7 +1,11 @@
 'use strict';
 
 
-define('forum/account/topics', ['forum/account/header', 'forum/infinitescroll'], function (header, infinitescroll) {
+define('forum/account/topics', [
+	'forum/account/header',
+	'forum/infinitescroll',
+	'hooks',
+], function (header, infinitescroll, hooks) {
 	var AccountTopics = {};
 
 	var template;
@@ -44,7 +48,7 @@ define('forum/account/topics', ['forum/account/header', 'forum/infinitescroll'],
 			html.find('.timeago').timeago();
 			app.createUserTooltips();
 			utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
-			$(window).trigger('action:topics.loaded', { topics: topics });
+			hooks.fire('action:topics.loaded', { topics: topics });
 			callback();
 		});
 	}

diff --git a/public/src/client/category.js b/public/src/client/category.js
@@ -7,7 +7,8 @@ define('forum/category', [
 	'topicList',
 	'sort',
 	'categorySelector',
-], function (infinitescroll, share, navigator, topicList, sort, categorySelector) {
+	'hooks',
+], function (infinitescroll, share, navigator, topicList, sort, categorySelector, hooks) {
 	var Category = {};
 
 	$(window).on('action:ajaxify.start', function (ev, data) {
@@ -47,8 +48,8 @@ define('forum/category', [
 			},
 		});
 
-		$(window).trigger('action:topics.loaded', { topics: ajaxify.data.topics });
-		$(window).trigger('action:category.loaded', { cid: ajaxify.data.cid });
+		hooks.fire('action:topics.loaded', { topics: ajaxify.data.topics });
+		hooks.fire('action:category.loaded', { cid: ajaxify.data.cid });
 	};
 
 	function handleScrollToTopicIndex() {
@@ -134,7 +135,7 @@ define('forum/category', [
 	function loadTopicsAfter(after, direction, callback) {
 		callback = callback || function () {};
 
-		$(window).trigger('action:category.loading');
+		hooks.fire('action:category.loading');
 		var params = utils.params();
 		infinitescroll.loadMore('categories.loadMore', {
 			cid: ajaxify.data.cid,
@@ -143,7 +144,7 @@ define('forum/category', [
 			query: params,
 			categoryTopicSort: config.categoryTopicSort,
 		}, function (data, done) {
-			$(window).trigger('action:category.loaded');
+			hooks.fire('action:category.loaded');
 			callback(data, done);
 		});
 	}

diff --git a/public/src/client/chats.js b/public/src/client/chats.js
@@ -10,7 +10,8 @@ define('forum/chats', [
 	'forum/chats/messages',
 	'benchpress',
 	'composer/autocomplete',
-], function (components, translator, mousetrap, recentChats, search, messages, Benchpress, autocomplete) {
+	'hooks',
+], function (components, translator, mousetrap, recentChats, search, messages, Benchpress, autocomplete, hooks) {
 	var Chats = {
 		initialised: false,
 	};
@@ -35,7 +36,7 @@ define('forum/chats', [
 		}
 
 		$(document).ready(function () {
-			$(window).trigger('action:chat.loaded', $('.chats-full'));
+			hooks.fire('action:chat.loaded', $('.chats-full'));
 		});
 
 		Chats.initialised = true;
@@ -384,7 +385,7 @@ define('forum/chats', [
 			},
 		};
 
-		$(window).trigger('chat:autocomplete:init', data);
+		hooks.fire('chat:autocomplete:init', data);
 		if (data.strategies.length) {
 			autocomplete.setup(data);
 		}
@@ -429,7 +430,7 @@ define('forum/chats', [
 								ajaxify.data = payload;
 								Chats.setActive();
 								Chats.addEventListeners();
-								$(window).trigger('action:chat.loaded', $('.chats-full'));
+								hooks.fire('action:chat.loaded', $('.chats-full'));
 								messages.scrollToBottom($('.expanded-chat ul.chat-content'));
 								if (history.pushState) {
 									history.pushState({

diff --git a/public/src/client/chats/messages.js b/public/src/client/chats/messages.js
@@ -1,7 +1,7 @@
 'use strict';
 
 
-define('forum/chats/messages', ['components', 'translator', 'benchpress'], function (components, translator, Benchpress) {
+define('forum/chats/messages', ['components', 'translator', 'benchpress', 'hooks'], function (components, translator, Benchpress, hooks) {
 	var messages = {};
 
 	messages.sendMessage = function (roomId, inputEl) {
@@ -15,7 +15,7 @@ define('forum/chats/messages', ['components', 'translator', 'benchpress'], funct
 		inputEl.val('');
 		inputEl.removeAttr('data-mid');
 		messages.updateRemainingLength(inputEl.parent());
-		$(window).trigger('action:chat.sent', {
+		hooks.fire('action:chat.sent', {
 			roomId: roomId,
 			message: msg,
 			mid: mid,
@@ -62,7 +62,7 @@ define('forum/chats/messages', ['components', 'translator', 'benchpress'], funct
 		var element = parent.find('[component="chat/input"]');
 		parent.find('[component="chat/message/length"]').text(element.val().length);
 		parent.find('[component="chat/message/remaining"]').text(config.maximumChatMessageLength - element.val().length);
-		$(window).trigger('action:chat.updateRemainingLength', {
+		hooks.fire('action:chat.updateRemainingLength', {
 			parent: parent,
 		});
 	};
@@ -90,7 +90,7 @@ define('forum/chats/messages', ['components', 'translator', 'benchpress'], funct
 			messages.scrollToBottom(chatContentEl);
 		}
 
-		$(window).trigger('action:chat.received', {
+		hooks.fire('action:chat.received', {
 			messageEl: newMessage,
 		});
 	}
@@ -149,7 +149,7 @@ define('forum/chats/messages', ['components', 'translator', 'benchpress'], funct
 				inputEl.attr('data-mid', messageId).addClass('editing');
 				inputEl.val(raw).focus();
 
-				$(window).trigger('action:chat.prepEdit', {
+				hooks.fire('action:chat.prepEdit', {
 					inputEl: inputEl,
 					messageId: messageId,
 					roomId: roomId,

diff --git a/public/src/client/compose.js b/public/src/client/compose.js
@@ -1,14 +1,14 @@
 'use strict';
 
 
-define('forum/compose', [], function () {
+define('forum/compose', ['hooks'], function (hooks) {
 	var Compose = {};
 
 	Compose.init = function () {
 		var container = $('.composer');
 
 		if (container.length) {
-			$(window).trigger('action:composer.enhance', {
+			hooks.fire('action:composer.enhance', {
 				container: container,
 			});
 		}

diff --git a/public/src/client/infinitescroll.js b/public/src/client/infinitescroll.js
@@ -1,7 +1,7 @@
 'use strict';
 
 
-define('forum/infinitescroll', function () {
+define('forum/infinitescroll', ['hooks'], function (hooks) {
 	var scroll = {};
 	var callback;
 	var previousScrollTop = 0;
@@ -70,7 +70,7 @@ define('forum/infinitescroll', function () {
 		loadingMore = true;
 
 		var hookData = { method: method, data: data };
-		$(window).trigger('action:infinitescroll.loadmore', hookData);
+		hooks.fire('action:infinitescroll.loadmore', hookData);
 
 		socket.emit(hookData.method, hookData.data, function (err, data) {
 			if (err) {
@@ -90,7 +90,7 @@ define('forum/infinitescroll', function () {
 		loadingMore = true;
 		var url = config.relative_path + '/api' + location.pathname.replace(new RegExp('^' + config.relative_path), '');
 		var hookData = { url: url, data: data };
-		$(window).trigger('action:infinitescroll.loadmore.xhr', hookData);
+		hooks.fire('action:infinitescroll.loadmore.xhr', hookData);
 
 		$.get(url, data, function (data) {
 			callback(data, function () {