moved socket connection out of app.js

public/src/app.js

@@ -1,178 +1,86 @@
 "use strict";
 /*global io, templates, ajaxify, utils, bootbox, RELATIVE_PATH, config, Visibility*/
 
-var	socket,
+var app = app || {};
-	app = app || {};
 
 app.isFocused = true;
-app.isConnected = false;
 app.currentRoom = null;
 app.widgets = {};
 app.cacheBuster = null;
 
 (function () {
-	var showWelcomeMessage = false;
+	var showWelcomeMessage = !!utils.params().loggedin;
-	var reconnecting = false;
-
-	function socketIOConnect() {
-		var ioParams = {
-			reconnectionAttempts: config.maxReconnectionAttempts,
-			reconnectionDelay: config.reconnectionDelay,
-			transports: config.socketioTransports,
-			path: config.relative_path + '/socket.io'
-		};
-
-		socket = io(config.websocketAddress, ioParams);
-		reconnecting = false;
-
-		socket.on('event:connect', function () {
-			app.showLoginMessage();
-			app.replaceSelfLinks();
-			$(window).trigger('action:connected');
-			app.isConnected = true;
-		});
 
-		socket.on('connect', onSocketConnect);
+	templates.setGlobal('config', config);
-
-		socket.on('event:disconnect', function() {
-			$(window).trigger('action:disconnected');
-			app.isConnected = false;
-			socket.connect();
-		});
-
-		socket.on('reconnecting', function (attempt) {
-			reconnecting = true;
-			var reconnectEl = $('#reconnect');
-
-			if (!reconnectEl.hasClass('active')) {
-				reconnectEl.html('<i class="fa fa-spinner fa-spin"></i>');
-			}
 
-			reconnectEl.addClass('active').removeClass("hide").tooltip({
+	app.cacheBuster = config['cache-buster'];
-				placement: 'bottom'
-			});
-		});
 
-		socket.on('event:banned', function() {
+	require(['csrf'], function(csrf) {
-			app.alert({
+		csrf.set(config.csrf_token);
-				title: '[[global:alert.banned]]',
-				message: '[[global:alert.banned.message]]',
-				type: 'danger',
-				timeout: 1000
 	});
 
-			setTimeout(function() {
+	bootbox.setDefaults({
-				window.location.href = config.relative_path + '/';
+		locale: config.userLang
-			}, 1000);
 	});
 
-		socket.on('event:logout', app.logout);
+	app.load = function() {
+		$('document').ready(function () {
+			var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search, true);
+			ajaxify.end(url, app.template);
 
-		socket.on('event:alert', function(data) {
+			handleStatusChange();
-			app.alert(data);
-		});
 
-		socket.on('reconnect_failed', function() {
+			if (config.searchEnabled) {
-			// Wait ten times the reconnection delay and then start over
+				app.handleSearch();
-			setTimeout(socket.connect.bind(socket), parseInt(config.reconnectionDelay, 10) * 10);
-		});
 			}
 
-	function onSocketConnect(data) {
+			handleNewTopic();
-		if (reconnecting) {
-			var reconnectEl = $('#reconnect');
-
-			reconnectEl.tooltip('destroy');
-			reconnectEl.html('<i class="fa fa-check"></i>');
-			reconnecting = false;
 
-			// Rejoin room that was left when we disconnected
+			require(['components'], function(components) {
-			var	url_parts = window.location.pathname.slice(RELATIVE_PATH.length).split('/').slice(1);
+				components.get('user/logout').on('click', app.logout);
-			var room;
+			});
 
-			switch(url_parts[0]) {
+			Visibility.change(function(e, state){
-				case 'user':
+				if (state === 'visible') {
-					room = 'user/' + (ajaxify.data ? ajaxify.data.theirid : 0);
+					app.isFocused = true;
-				break;
+					app.alternatingTitle('');
-				case 'topic':
+				} else if (state === 'hidden') {
-					room = 'topic_' + url_parts[1];
+					app.isFocused = false;
-				break;
-				case 'category':
-					room = 'category_' + url_parts[1];
-				break;
-				case 'recent':
-					room = 'recent_topics';
-				break;
-				case 'unread':
-					room = 'unread_topics';
-				break;
-				case 'popular':
-					room = 'popular_topics';
-				break;
-				case 'admin':
-					room = 'admin';
-				break;
-				case 'categories':
-					room = 'categories';
-				break;
 				}
-			app.currentRoom = '';
+			});
-			app.enterRoom(room);
-
-			socket.emit('meta.reconnected');
-
-			app.isConnected = true;
-			$(window).trigger('action:reconnected');
 
-			setTimeout(function() {
+			overrides.overrideBootbox();
-				reconnectEl.removeClass('active').addClass('hide');
+			overrides.overrideTimeago();
-			}, 3000);
+			createHeaderTooltips();
-		}
+			app.showEmailConfirmWarning();
-	}
 
-	function overrideBootbox() {
+			socket.removeAllListeners('event:nodebb.ready');
-		var dialog = bootbox.dialog,
+			socket.on('event:nodebb.ready', function(data) {
-			prompt = bootbox.prompt,
+				if (!app.cacheBusters || app.cacheBusters['cache-buster'] !== data['cache-buster']) {
-			confirm = bootbox.confirm;
+					app.cacheBusters = data;
 
-		function translate(modal) {
+					app.alert({
-			var footer = modal.find('.modal-footer');
+						alert_id: 'forum_updated',
-			translator.translate(footer.html(), function(html) {
+						title: '[[global:updated.title]]',
-				footer.html(html);
+						message: '[[global:updated.message]]',
+						clickfn: function() {
+							window.location.reload();
+						},
+						type: 'warning'
 					});
 				}
+			});
 
-		bootbox.dialog = function() {
+			require(['taskbar', 'helpers'], function(taskbar, helpers) {
-			var modal = $(dialog.apply(this, arguments)[0]);
+				taskbar.init();
-			translate(modal);
-			return modal;
-		};
-
-		bootbox.prompt = function() {
-			var modal = $(prompt.apply(this, arguments)[0]);
-			translate(modal);
-			return modal;
-		};
-
-		bootbox.confirm = function() {
-			var modal = $(confirm.apply(this, arguments)[0]);
-			translate(modal);
-			return modal;
-		};
-	}
 
-	function overrideTimeago() {
+				// templates.js helpers
-		var timeagoFn = $.fn.timeago;
+				helpers.register();
-		$.fn.timeago = function() {
-			var els = timeagoFn.apply(this, arguments);
 
-			if (els) {
+				$(window).trigger('action:app.load');
-				els.each(function() {
+			});
-					$(this).attr('title', (new Date($(this).attr('title'))).toString());
 		});
-			}
 	};
-	}
 
 	app.logout = function() {
 		require(['csrf'], function(csrf) {
@@ -245,14 +153,7 @@ app.cacheBuster = null;
 		var path = window.location.pathname;
 		$('#main-nav li').removeClass('active');
 		if (path) {
-			$('#main-nav li a').each(function () {
+			$('#main-nav li').removeClass('active').find('a[href="' + path + '"]').parent().addClass('active');
-				var href = $(this).attr('href');
-
-				if (href && path.startsWith(href)) {
-					$(this.parentNode).addClass('active');
-				 	return false;
-				}
-			});
 		}
 	}
 
@@ -535,65 +436,6 @@ app.cacheBuster = null;
 		});
 	}
 
-	app.load = function() {
-		$('document').ready(function () {
-			var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search, true);
-			ajaxify.end(url, app.template);
-
-			handleStatusChange();
-
-			if (config.searchEnabled) {
-				app.handleSearch();
-			}
-
-			handleNewTopic();
-
-			require(['components'], function(components) {
-				components.get('user/logout').on('click', app.logout);
-			});
-
-			Visibility.change(function(e, state){
-				if (state === 'visible') {
-					app.isFocused = true;
-					app.alternatingTitle('');
-				} else if (state === 'hidden') {
-					app.isFocused = false;
-				}
-			});
-
-			overrideBootbox();
-			overrideTimeago();
-			createHeaderTooltips();
-			app.showEmailConfirmWarning();
-
-			socket.removeAllListeners('event:nodebb.ready');
-			socket.on('event:nodebb.ready', function(data) {
-				if (!app.cacheBusters || app.cacheBusters['cache-buster'] !== data['cache-buster']) {
-					app.cacheBusters = data;
-
-					app.alert({
-						alert_id: 'forum_updated',
-						title: '[[global:updated.title]]',
-						message: '[[global:updated.message]]',
-						clickfn: function() {
-							window.location.reload();
-						},
-						type: 'warning'
-					});
-				}
-			});
-
-			require(['taskbar', 'helpers'], function(taskbar, helpers) {
-				taskbar.init();
-
-				// templates.js helpers
-				helpers.register();
-
-				$(window).trigger('action:app.load');
-			});
-		});
-	};
-
 	app.loadJQueryUI = function(callback) {
 		if (typeof $().autocomplete === 'function') {
 			return callback();
@@ -636,21 +478,5 @@ app.cacheBuster = null;
 		}
 	};
 
-	showWelcomeMessage = window.location.href.indexOf('loggedin') !== -1;
-
-	socketIOConnect();
-
-	templates.setGlobal('config', config);
-
-	app.cacheBuster = config['cache-buster'];
-
-	require(['csrf'], function(csrf) {
-		csrf.set(config.csrf_token);
-	});
 
-	bootbox.setDefaults({
-		locale: config.userLang
-	});
-
-	app.alternatingTitle('');
 }());

public/src/client/login.js

@@ -28,7 +28,7 @@ define('forum/login', ['csrf', 'translator'], function(csrf, translator) {
 						'x-csrf-token': csrf.get()
 					},
 					success: function(data, status) {
-						window.location.href = data;
+						window.location.href = data + '?loggedin';
 					},
 					error: function(data, status) {
 						errorEl.find('p').translateText(data.responseText);

public/src/overrides.js

@@ -1,5 +1,9 @@
 'use strict';
 
+/* global bootbox, translator */
+
+var overrides = overrides || {};
+
 if ('undefined' !== typeof window) {
 
 	(function ($, undefined) {
@@ -102,4 +106,48 @@ if ('undefined' !== typeof window) {
 			});
 	})();
 
+	overrides.overrideBootbox = function () {
+		var dialog = bootbox.dialog,
+			prompt = bootbox.prompt,
+			confirm = bootbox.confirm;
+
+		function translate(modal) {
+			var footer = modal.find('.modal-footer');
+			translator.translate(footer.html(), function(html) {
+				footer.html(html);
+			});
+		}
+
+		bootbox.dialog = function() {
+			var modal = $(dialog.apply(this, arguments)[0]);
+			translate(modal);
+			return modal;
+		};
+
+		bootbox.prompt = function() {
+			var modal = $(prompt.apply(this, arguments)[0]);
+			translate(modal);
+			return modal;
+		};
+
+		bootbox.confirm = function() {
+			var modal = $(confirm.apply(this, arguments)[0]);
+			translate(modal);
+			return modal;
+		};
+	};
+
+	overrides.overrideTimeago = function() {
+		var timeagoFn = $.fn.timeago;
+		$.fn.timeago = function() {
+			var els = timeagoFn.apply(this, arguments);
+
+			if (els) {
+				els.each(function() {
+					$(this).attr('title', (new Date($(this).attr('title'))).toString());
+				});
+			}
+		};
+	};
+
 }

public/src/sockets.js

@@ -0,0 +1,133 @@
+'use strict';
+/* globals config, io, ajaxify */
+
+var app = app || {};
+var socket;
+app.isConnected = false;
+
+(function () {
+	var reconnecting = false;
+
+	var ioParams = {
+		reconnectionAttempts: config.maxReconnectionAttempts,
+		reconnectionDelay: config.reconnectionDelay,
+		transports: config.socketioTransports,
+		path: config.relative_path + '/socket.io'
+	};
+
+	socket = io(config.websocketAddress, ioParams);
+
+	socket.on('connect', onSocketConnect);
+
+	socket.on('reconnecting', onReconnecting);
+
+	socket.on('reconnect_failed', function() {
+		// Wait ten times the reconnection delay and then start over
+		setTimeout(socket.connect.bind(socket), parseInt(config.reconnectionDelay, 10) * 10);
+	});
+
+	socket.on('event:connect', onEventConnect);
+
+	socket.on('event:disconnect', onEventDisconnect);
+
+	socket.on('event:banned', onEventBanned);
+
+	socket.on('event:logout', app.logout);
+
+	socket.on('event:alert', app.alert);
+
+	function onSocketConnect() {
+		if (reconnecting) {
+			var reconnectEl = $('#reconnect');
+
+			reconnectEl.tooltip('destroy');
+			reconnectEl.html('<i class="fa fa-check"></i>');
+			reconnecting = false;
+
+			reJoinCurrentRoom();
+
+			socket.emit('meta.reconnected');
+
+			app.isConnected = true;
+			$(window).trigger('action:reconnected');
+
+			setTimeout(function() {
+				reconnectEl.removeClass('active').addClass('hide');
+			}, 3000);
+		}
+	}
+
+	function reJoinCurrentRoom() {
+		var	url_parts = window.location.pathname.slice(config.relative_path.length).split('/').slice(1);
+		var room;
+
+		switch(url_parts[0]) {
+			case 'user':
+				room = 'user/' + (ajaxify.data ? ajaxify.data.theirid : 0);
+			break;
+			case 'topic':
+				room = 'topic_' + url_parts[1];
+			break;
+			case 'category':
+				room = 'category_' + url_parts[1];
+			break;
+			case 'recent':
+				room = 'recent_topics';
+			break;
+			case 'unread':
+				room = 'unread_topics';
+			break;
+			case 'popular':
+				room = 'popular_topics';
+			break;
+			case 'admin':
+				room = 'admin';
+			break;
+			case 'categories':
+				room = 'categories';
+			break;
+		}
+		app.currentRoom = '';
+		app.enterRoom(room);
+	}
+
+	function onReconnecting(attempt) {
+		reconnecting = true;
+		var reconnectEl = $('#reconnect');
+
+		if (!reconnectEl.hasClass('active')) {
+			reconnectEl.html('<i class="fa fa-spinner fa-spin"></i>');
+		}
+
+		reconnectEl.addClass('active').removeClass("hide").tooltip({
+			placement: 'bottom'
+		});
+	}
+
+	function onEventConnect() {
+		app.showLoginMessage();
+		app.replaceSelfLinks();
+		$(window).trigger('action:connected');
+		app.isConnected = true;
+	}
+
+	function onEventDisconnect() {
+		$(window).trigger('action:disconnected');
+		app.isConnected = false;
+		socket.connect();
+	}
+
+	function onEventBanned() {
+		app.alert({
+			title: '[[global:alert.banned]]',
+			message: '[[global:alert.banned.message]]',
+			type: 'danger',
+			timeout: 1000
+		});
+
+		setTimeout(function() {
+			window.location.href = config.relative_path + '/';
+		}, 1000);
+	}
+
+}());

src/meta/js.js

@@ -38,6 +38,7 @@ module.exports = function(Meta) {
 				'public/vendor/autosize.js',
 				'./node_modules/templates.js/lib/templates.js',
 				'public/src/utils.js',
+				'public/src/sockets.js',
 				'public/src/app.js',
 				'public/src/ajaxify.js',
 				'public/src/overrides.js',