nodebb-theme-persona 13.0.19 → 13.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.0.19",
+  "version": "13.0.21",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/plugin.json

@@ -15,6 +15,8 @@
 	"modules": {
 		"../admin/plugins/persona.js": "public/admin.js",
 		"persona/quickreply.js": "public/modules/quickreply.js",
+		"persona/taskbar.js": "public/modules/taskbar.js",
+		"persona/mobile-menu.js": "public/modules/mobile-menu.js",
 		"../client/account/theme.js": "public/settings.js"
 	},
 	"languages": "languages"

package/public/modules/mobile-menu.js

@@ -0,0 +1,185 @@
+'use strict';
+
+define('persona/mobile-menu', [
+	'pulling/build/pulling-drawer', 'storage', 'alerts', 'search',
+], function (
+	Pulling, Storage, alerts, search
+) {
+	const Menu = {};
+
+	Menu.init = function () {
+		if (!Pulling) {
+			return;
+		}
+
+		// initialization
+
+		const chatMenuVisible = app.user && parseInt(app.user.uid, 10);
+		let swapped = !!Storage.getItem('persona:menus:legacy-layout');
+		const margin = window.innerWidth;
+
+		if (swapped) {
+			$('#mobile-menu').removeClass('float-start');
+			$('#mobile-chats').addClass('float-start');
+		}
+
+		if (document.documentElement.getAttribute('data-dir') === 'rtl') {
+			swapped = !swapped;
+		}
+
+		const navSlideout = Pulling.create({
+			panel: document.getElementById('panel'),
+			menu: document.getElementById('menu'),
+			width: 256,
+			margin: margin,
+			side: swapped ? 'right' : 'left',
+		});
+		$('#menu').removeClass('hidden');
+
+		let chatsSlideout;
+		if (chatMenuVisible) {
+			chatsSlideout = Pulling.create({
+				panel: document.getElementById('panel'),
+				menu: document.getElementById('chats-menu'),
+				width: 256,
+				margin: margin,
+				side: swapped ? 'left' : 'right',
+			});
+			$('#chats-menu').removeClass('hidden');
+		}
+
+		// all menus
+
+		function closeOnClick() {
+			navSlideout.close();
+			if (chatsSlideout) { chatsSlideout.close(); }
+		}
+
+		function onBeforeOpen() {
+			document.documentElement.classList.add('slideout-open');
+		}
+
+		function onClose() {
+			$('#mobile-menu').blur();
+			document.documentElement.classList.remove('slideout-open');
+			$('#panel').off('click', closeOnClick);
+		}
+
+		$(window).on('resize action:ajaxify.start', function () {
+			navSlideout.close();
+			if (chatsSlideout) {
+				chatsSlideout.close();
+			}
+		});
+
+		navSlideout
+			.ignore('code, code *, .preventSlideout, .preventSlideout *')
+			.on('closed', onClose)
+			.on('beforeopen', onBeforeOpen)
+			.on('opened', function () {
+				$('#panel').one('click', closeOnClick);
+			});
+
+		if (chatMenuVisible) {
+			chatsSlideout
+				.ignore('code, code *, .preventSlideout, .preventSlideout *')
+				.on('closed', onClose)
+				.on('beforeopen', onBeforeOpen)
+				.on('opened', function () {
+					$('#panel').one('click', closeOnClick);
+				});
+		}
+
+		// left slideout navigation menu
+
+		$('#mobile-menu').on('click', function () {
+			navSlideout.enable().toggle();
+		});
+
+		if (chatMenuVisible) {
+			navSlideout.on('beforeopen', function () {
+				chatsSlideout.close();
+				chatsSlideout.disable();
+			}).on('closed', function () {
+				chatsSlideout.enable();
+			});
+		}
+
+		$('#menu [data-section="navigation"] ul').html(
+			$('#main-nav').html() +
+			($('#logged-out-menu').html() || '')
+		);
+
+		$('#user-control-list').children().clone(true, true).appendTo($('#chats-menu [data-section="profile"] ul'));
+
+		socket.on('event:user_status_change', function (data) {
+			if (parseInt(data.uid, 10) === app.user.uid) {
+				app.updateUserStatus($('#chats-menu [component="user/status"]'), data.status);
+				navSlideout.close();
+			}
+		});
+
+		// right slideout notifications & chats menu
+
+		function loadNotificationsAndChats() {
+			require(['notifications', 'chat'], function (notifications, chat) {
+				const notifList = $('#chats-menu [data-section="notifications"] ul');
+				notifications.loadNotifications(notifList, function () {
+					notifList.find('.deco-none').removeClass('deco-none');
+					chat.loadChatsDropdown($('#chats-menu .chat-list'));
+				});
+			});
+		}
+
+		if (chatMenuVisible) {
+			$('#mobile-chats').removeClass('hidden').on('click', function () {
+				navSlideout.close();
+				chatsSlideout.enable().toggle();
+			});
+			$('#chats-menu').on('click', 'li[data-roomid]', function () {
+				chatsSlideout.close();
+			});
+
+			chatsSlideout
+				.on('opened', loadNotificationsAndChats)
+				.on('beforeopen', function () {
+					navSlideout.close().disable();
+				})
+				.on('closed', function () {
+					navSlideout.enable();
+				});
+		}
+
+		const searchInputEl = $('.navbar .navbar-search input[name="term"]');
+		const searchButton = $('.navbar .navbar-search button[type="button"]');
+		searchButton.off('click').on('click', function () {
+			if (!config.loggedIn && !app.user.privileges['search:content']) {
+				alerts.alert({
+					message: '[[error:search-requires-login]]',
+					timeout: 3000,
+				});
+				ajaxify.go('login');
+				return false;
+			}
+
+			searchButton.addClass('hidden');
+			searchInputEl.removeClass('hidden').focus();
+			return false;
+		});
+		searchInputEl.on('blur', function () {
+			searchInputEl.addClass('hidden');
+			searchButton.removeClass('hidden');
+		});
+		search.enableQuickSearch({
+			searchElements: {
+				inputEl: searchInputEl,
+				resultEl: $('.navbar .navbar-search .quick-search-container'),
+			},
+			searchOptions: {
+				in: config.searchDefaultInQuick,
+			},
+		});
+	};
+
+	return Menu;
+});

package/public/modules/taskbar.js

@@ -0,0 +1,65 @@
+'use strict';
+
+define('persona/taskbar', [
+	'hooks',
+], function (
+	hooks
+) {
+	const Taskbar = {};
+
+	Taskbar.init = function () {
+		hooks.on('filter:taskbar.push', (data) => {
+			data.options.className = 'taskbar-' + data.module;
+			if (data.module === 'composer') {
+				data.options.icon = 'fa-commenting-o';
+			} else if (data.module === 'chat') {
+				if (data.element.length && !data.element.hasClass('active')) {
+					increaseChatCount(data.element);
+				}
+			}
+		});
+		hooks.on('action:taskbar.pushed', (data) => {
+			if (data.module === 'chat') {
+				createChatIcon(data);
+				const elData = data.element.data();
+				if (elData && elData.options && !elData.options.isSelf) {
+					increaseChatCount(data.element);
+				}
+			}
+		});
+
+		socket.on('event:chats.markedAsRead', function (data) {
+			$('#taskbar [data-roomid="' + data.roomId + '"]')
+				.removeClass('new')
+				.attr('data-content', 0);
+		});
+
+		function createChatIcon(data) {
+			$.getJSON(config.relative_path + '/api/user/' + app.user.userslug + '/chats/' + data.options.roomId, function (chatObj) {
+				const el = $('#taskbar [data-uuid="' + data.uuid + '"] a');
+				el.parent('[data-uuid]').attr('data-roomId', data.options.roomId);
+
+				if (chatObj.users.length === 1) {
+					const user = chatObj.users[0];
+					el.find('i').remove();
+
+					if (user.picture) {
+						el.css('background-image', 'url(' + user.picture + ')');
+						el.css('background-size', 'cover');
+					} else {
+						el.css('background-color', user['icon:bgColor'])
+							.text(user['icon:text'])
+							.addClass('avatar');
+					}
+				}
+			});
+		}
+
+		function increaseChatCount(el) {
+			const count = (parseInt($(el).attr('data-content'), 10) || 0) + 1;
+			$(el).attr('data-content', count);
+		}
+	};
+
+	return Taskbar;
+});

package/public/persona.js

@@ -112,59 +112,9 @@ $(document).ready(function () {
 	}
 
 	function setupTaskbar() {
-		require(['hooks'], (hooks) => {
-			hooks.on('filter:taskbar.push', (data) => {
-				data.options.className = 'taskbar-' + data.module;
-				if (data.module === 'composer') {
-					data.options.icon = 'fa-commenting-o';
-				} else if (data.module === 'chat') {
-					if (data.element.length && !data.element.hasClass('active')) {
-						increaseChatCount(data.element);
-					}
-				}
-			});
-			hooks.on('action:taskbar.pushed', (data) => {
-				if (data.module === 'chat') {
-					createChatIcon(data);
-					var elData = data.element.data();
-					if (elData && elData.options && !elData.options.isSelf) {
-						increaseChatCount(data.element);
-					}
-				}
-			});
-		});
-
-		socket.on('event:chats.markedAsRead', function (data) {
-			$('#taskbar [data-roomid="' + data.roomId + '"]')
-				.removeClass('new')
-				.attr('data-content', 0);
+		require(['persona/taskbar'], function (taskbar) {
+			taskbar.init();
 		});
-
-		function createChatIcon(data) {
-			$.getJSON(config.relative_path + '/api/user/' + app.user.userslug + '/chats/' + data.options.roomId, function (chatObj) {
-				var el = $('#taskbar [data-uuid="' + data.uuid + '"] a');
-				el.parent('[data-uuid]').attr('data-roomId', data.options.roomId);
-
-				if (chatObj.users.length === 1) {
-					var user = chatObj.users[0];
-					el.find('i').remove();
-
-					if (user.picture) {
-						el.css('background-image', 'url(' + user.picture + ')');
-						el.css('background-size', 'cover');
-					} else {
-						el.css('background-color', user['icon:bgColor'])
-							.text(user['icon:text'])
-							.addClass('avatar');
-					}
-				}
-			});
-		}
-
-		function increaseChatCount(el) {
-			var count = (parseInt($(el).attr('data-content'), 10) || 0) + 1;
-			$(el).attr('data-content', count);
-		}
 	}
 
 	function setupEditedByIcon() {
@@ -196,182 +146,8 @@ $(document).ready(function () {
 	}
 
 	function setupMobileMenu() {
-		if (!window.addEventListener) {
-			return;
-		}
-
-		require(['pulling/build/pulling-drawer', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
-			if (!Pulling) {
-				return;
-			}
-
-			// initialization
-
-			var chatMenuVisible = app.user && parseInt(app.user.uid, 10);
-			var swapped = !!Storage.getItem('persona:menus:legacy-layout');
-			var margin = window.innerWidth;
-
-			if (swapped) {
-				$('#mobile-menu').removeClass('float-start');
-				$('#mobile-chats').addClass('float-start');
-			}
-
-			if (document.documentElement.getAttribute('data-dir') === 'rtl') {
-				swapped = !swapped;
-			}
-
-			var navSlideout = Pulling.create({
-				panel: document.getElementById('panel'),
-				menu: document.getElementById('menu'),
-				width: 256,
-				margin: margin,
-				side: swapped ? 'right' : 'left',
-			});
-			$('#menu').removeClass('hidden');
-
-			var chatsSlideout;
-			if (chatMenuVisible) {
-				chatsSlideout = Pulling.create({
-					panel: document.getElementById('panel'),
-					menu: document.getElementById('chats-menu'),
-					width: 256,
-					margin: margin,
-					side: swapped ? 'left' : 'right',
-				});
-				$('#chats-menu').removeClass('hidden');
-			}
-
-			// all menus
-
-			function closeOnClick() {
-				navSlideout.close();
-				if (chatsSlideout) { chatsSlideout.close(); }
-			}
-
-			function onBeforeOpen() {
-				document.documentElement.classList.add('slideout-open');
-			}
-
-			function onClose() {
-				$('#mobile-menu').blur();
-				document.documentElement.classList.remove('slideout-open');
-				$('#panel').off('click', closeOnClick);
-			}
-
-			$(window).on('resize action:ajaxify.start', function () {
-				navSlideout.close();
-				if (chatsSlideout) {
-					chatsSlideout.close();
-				}
-			});
-
-			navSlideout
-				.ignore('code, code *, .preventSlideout, .preventSlideout *')
-				.on('closed', onClose)
-				.on('beforeopen', onBeforeOpen)
-				.on('opened', function () {
-					$('#panel').one('click', closeOnClick);
-				});
-
-			if (chatMenuVisible) {
-				chatsSlideout
-					.ignore('code, code *, .preventSlideout, .preventSlideout *')
-					.on('closed', onClose)
-					.on('beforeopen', onBeforeOpen)
-					.on('opened', function () {
-						$('#panel').one('click', closeOnClick);
-					});
-			}
-
-			// left slideout navigation menu
-
-			$('#mobile-menu').on('click', function () {
-				navSlideout.enable().toggle();
-			});
-
-			if (chatMenuVisible) {
-				navSlideout.on('beforeopen', function () {
-					chatsSlideout.close();
-					chatsSlideout.disable();
-				}).on('closed', function () {
-					chatsSlideout.enable();
-				});
-			}
-
-			$('#menu [data-section="navigation"] ul').html(
-				$('#main-nav').html() +
-				($('#logged-out-menu').html() || '')
-			);
-
-			$('#user-control-list').children().clone(true, true).appendTo($('#chats-menu [data-section="profile"] ul'));
-
-			socket.on('event:user_status_change', function (data) {
-				if (parseInt(data.uid, 10) === app.user.uid) {
-					app.updateUserStatus($('#chats-menu [component="user/status"]'), data.status);
-					navSlideout.close();
-				}
-			});
-
-			// right slideout notifications & chats menu
-
-			function loadNotificationsAndChats() {
-				require(['notifications', 'chat'], function (notifications, chat) {
-					const notifList = $('#chats-menu [data-section="notifications"] ul');
-					notifications.loadNotifications(notifList, function () {
-						notifList.find('.deco-none').removeClass('deco-none');
-						chat.loadChatsDropdown($('#chats-menu .chat-list'));
-					});
-				});
-			}
-
-			if (chatMenuVisible) {
-				$('#mobile-chats').removeClass('hidden').on('click', function () {
-					navSlideout.close();
-					chatsSlideout.enable().toggle();
-				});
-				$('#chats-menu').on('click', 'li[data-roomid]', function () {
-					chatsSlideout.close();
-				});
-
-				chatsSlideout
-					.on('opened', loadNotificationsAndChats)
-					.on('beforeopen', function () {
-						navSlideout.close().disable();
-					})
-					.on('closed', function () {
-						navSlideout.enable();
-					});
-			}
-
-			const searchInputEl = $('.navbar .navbar-search input[name="term"]');
-			const searchButton = $('.navbar .navbar-search button[type="button"]');
-			searchButton.off('click').on('click', function () {
-				if (!config.loggedIn && !app.user.privileges['search:content']) {
-					alerts.alert({
-						message: '[[error:search-requires-login]]',
-						timeout: 3000,
-					});
-					ajaxify.go('login');
-					return false;
-				}
-
-				searchButton.addClass('hidden');
-				searchInputEl.removeClass('hidden').focus();
-				return false;
-			});
-			searchInputEl.on('blur', function () {
-				searchInputEl.addClass('hidden');
-				searchButton.removeClass('hidden');
-			});
-			search.enableQuickSearch({
-				searchElements: {
-					inputEl: searchInputEl,
-					resultEl: $('.navbar .navbar-search .quick-search-container'),
-				},
-				searchOptions: {
-					in: config.searchDefaultInQuick,
-				},
-			});
+		require(['persona/mobile-menu'], function (mobileMenu) {
+			mobileMenu.init();
 		});
 	}
 

package/scss/modules/alerts.scss

@@ -25,20 +25,48 @@
 			height: 100%;
 		}
 
-		&.alert-info::before {
-			background-color: $info;
+		&.alert-info {
+			.btn-close {
+				$btn-close-color: $info;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			&::before {
+				background-color: $info;
+			}
 		}
 
-		&.alert-warning::before {
-			background-color: $warning;
+		&.alert-warning {
+			.btn-close {
+				$btn-close-color: $warning;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			::before {
+				background-color: $warning;
+			}
 		}
 
-		&.alert-success::before {
-			background-color: $success;
+		&.alert-success {
+			.btn-close {
+				$btn-close-color: $success;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			::before {
+				background-color: $success;
+			}
 		}
 
-		&.alert-danger::before {
-			background-color: $danger;
+		&.alert-danger {
+			.btn-close {
+				$btn-close-color: $danger;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			::before {
+				background-color: $danger;
+			}
 		}
 
 		&.animate {

package/templates/partials/acceptTos.tpl

@@ -1,9 +1,9 @@
-<div class="form-group">
-	<label for="agree-terms">[[register:terms_of_use]]</label>
-	<div class="tos">{termsOfUse}</div>
-	<div class="checkbox">
-		<label>
-			<input type="checkbox" name="agree-terms" id="agree-terms"> [[register:agree_to_terms_of_use]]
-		</label>
-	</div>
+<div class="form-group">
+	<label for="agree-terms">[[register:terms_of_use]]</label>
+	<div class="tos">{termsOfUse}</div>
+	<div class="checkbox">
+		<label>
+			<input type="checkbox" name="agree-terms" id="agree-terms"> [[register:agree_to_terms_of_use]]
+		</label>
+	</div>
 </div>

package/templates/partials/categories/link.tpl

@@ -1,11 +1,11 @@
-<!-- IF ../isSection -->
-{../name}
-<!-- ELSE -->
-<!-- IF ../link -->
-<a href="{../link}" itemprop="url">
-<!-- ELSE -->
-<a href="{config.relative_path}/category/{../slug}" itemprop="url">
-<!-- ENDIF ../link -->
-{../name}
-</a>
+<!-- IF ../isSection -->
+{../name}
+<!-- ELSE -->
+<!-- IF ../link -->
+<a href="{../link}" itemprop="url">
+<!-- ELSE -->
+<a href="{config.relative_path}/category/{../slug}" itemprop="url">
+<!-- ENDIF ../link -->
+{../name}
+</a>
 <!-- ENDIF ../isSection -->

package/templates/tos.tpl

@@ -1,4 +1,4 @@
-<h3>[[register:terms_of_use]]</h3>
-<hr/>
-
-{termsOfUse}
+<h3>[[register:terms_of_use]]</h3>
+<hr/>
+
+{termsOfUse}

package/theme.json

@@ -1,7 +1,7 @@
-{
-    "id": "nodebb-theme-persona",
-    "name": "Persona",
-    "description": "The default theme for NodeBB. Uses a standard approach to forum design.",
-    "url": "https://github.com/psychobunny/nodebb-theme-persona",
-    "screenshot": "screenshot.png"
+{
+    "id": "nodebb-theme-persona",
+    "name": "Persona",
+    "description": "The default theme for NodeBB. Uses a standard approach to forum design.",
+    "url": "https://github.com/psychobunny/nodebb-theme-persona",
+    "screenshot": "screenshot.png"
 }