feat: #8734, jquery-ui, jquery-form, timeago (#8748)

* feat: #8734, jquery-ui, jquery-form, timeago

get rid of forum/footer.js move that code to app.js & wait for app to load before calling ajaxify.end
make sockets.js a requirejs module
move jquery-ui to node_modules and load via requirejs
move jquery-form to node_modules and load via requirejs
move timeago to node_modules and load via requirejs
only include the css for needed jquery-ui widgets

* feat: keep socket/io global for backwards compat

* refactor: move socket listener to chat

install/package.json

@@ -64,6 +64,8 @@
         "html-to-text": "^5.1.1",
         "ipaddr.js": "^2.0.0",
         "jquery": "3.5.1",
+        "jquery-form": "4.3.0",
+        "jquery-ui": "1.12.1",
         "jsesc": "3.0.1",
         "json2csv": "5.0.3",
         "jsonwebtoken": "^8.5.1",
@@ -128,6 +130,7 @@
         "spider-detector": "2.0.0",
         "textcomplete": "^0.17.1",
         "textcomplete.contenteditable": "^0.1.1",
+        "timeago": "^1.6.7",
         "tinycon": "0.6.8",
         "toobusy-js": "^0.5.1",
         "uglify-es": "^3.3.9",

public/less/jquery-ui.less

@@ -0,0 +1,9 @@
+@import (inline) 'jquery-ui/themes/base/core.css';
+@import (inline) 'jquery-ui/themes/base/menu.css';
+@import (inline) 'jquery-ui/themes/base/button.css';
+@import (inline) 'jquery-ui/themes/base/datepicker.css';
+@import (inline) 'jquery-ui/themes/base/autocomplete.css';
+@import (inline) 'jquery-ui/themes/base/resizable.css';
+@import (inline) 'jquery-ui/themes/base/draggable.css';
+@import (inline) 'jquery-ui/themes/base/sortable.css';
+@import (inline) 'jquery-ui/themes/base/theme.css';

public/src/app.js

@@ -10,6 +10,7 @@ app.flags = {};
 app.cacheBuster = null;
 
 (function () {
+	var appLoaded = false;
 	var params = utils.params();
 	var showWelcomeMessage = !!params.loggedin;
 	var registerMessage = params.register;
@@ -26,6 +27,16 @@ app.cacheBuster = null;
 		app.load();
 	});
 
+	app.coldLoad = function () {
+		if (appLoaded) {
+			ajaxify.coldLoad();
+		} else {
+			$(window).on('action:app.load', function () {
+				ajaxify.coldLoad();
+			});
+		}
+	};
+
 	app.handleEarlyClicks = function () {
 		/**
 		 * Occasionally, a button or anchor (not meant to be ajaxified) is clicked before
@@ -61,8 +72,6 @@ app.cacheBuster = null;
 	app.handleEarlyClicks();
 
 	app.load = function () {
-		overrides.overrideTimeago();
-
 		handleStatusChange();
 
 		if (config.searchEnabled) {
@@ -88,14 +97,38 @@ app.cacheBuster = null;
 		app.showCookieWarning();
 		registerServiceWorker();
 
-		require(['taskbar', 'helpers', 'forum/pagination'], function (taskbar, helpers, pagination) {
+		require([
+			'taskbar',
+			'helpers',
+			'forum/pagination',
+			'translator',
+			'forum/unread',
+			'forum/header/notifications',
+			'forum/header/chat',
+			'timeago/jquery.timeago',
+			'jquery-form',
+		], function (taskbar, helpers, pagination, translator, unread, notifications, chat) {
+			notifications.prepareDOM();
+			chat.prepareDOM();
+			translator.prepareDOM();
 			taskbar.init();
-
 			helpers.register();
-
 			pagination.init();
 
-			$(window).trigger('action:app.load');
+			if (app.user.uid > 0) {
+				unread.initUnreadTopics();
+			}
+
+			overrides.overrideTimeago();
+			if (app.user.timeagoCode && app.user.timeagoCode !== 'en') {
+				require(['timeago/locales/jquery.timeago.' + app.user.timeagoCode], function () {
+					$(window).trigger('action:app.load');
+					appLoaded = true;
+				});
+			} else {
+				$(window).trigger('action:app.load');
+				appLoaded = true;
+			}
 		});
 	};
 
@@ -657,12 +690,15 @@ app.cacheBuster = null;
 		if (typeof $().autocomplete === 'function') {
 			return callback();
 		}
-
-		var scriptEl = document.createElement('script');
-		scriptEl.type = 'text/javascript';
-		scriptEl.src = config.relative_path + '/assets/vendor/jquery/js/jquery-ui.js?' + config['cache-buster'];
-		scriptEl.onload = callback;
-		document.head.appendChild(scriptEl);
+		require([
+			'jquery-ui/widgets/datepicker',
+			'jquery-ui/widgets/autocomplete',
+			'jquery-ui/widgets/sortable',
+			'jquery-ui/widgets/resizable',
+			'jquery-ui/widgets/draggable',
+		], function () {
+			callback();
+		});
 	};
 
 	app.showEmailConfirmWarning = function (err) {

public/src/client/account/settings.js

@@ -91,7 +91,11 @@ define('forum/account/settings', ['forum/account/header', 'components', 'transla
 					htmlEl.attr('data-dir', translated);
 					htmlEl.css('direction', translated);
 				});
-				$.getScript(config.relative_path + '/assets/vendor/jquery/timeago/locales/jquery.timeago.' + utils.userLangToTimeagoCode(config.userLang) + '.js', function () {
+
+				var stringsModule = 'timeago/locales/jquery.timeago.' + utils.userLangToTimeagoCode(config.userLang);
+				// without undef, requirejs won't load the strings a second time
+				require.undef(stringsModule);
+				require([stringsModule], function () {
 					overrides.overrideTimeago();
 					ajaxify.refresh();
 				});

public/src/client/header/chat.js

@@ -26,6 +26,12 @@ define('forum/header/chat', ['components'], function (components) {
 
 		socket.removeListener('event:chats.roomRename', onRoomRename);
 		socket.on('event:chats.roomRename', onRoomRename);
+
+		socket.on('event:unread.updateChatCount', function (count) {
+			components.get('chat/icon')
+				.toggleClass('unread-count', count > 0)
+				.attr('data-content', count > 99 ? '99+' : count);
+		});
 	};
 
 	function onChatMessageReceived(data) {