nodebb-theme-persona 11.3.40 → 11.4.0

package/library.js

@@ -2,15 +2,23 @@
 
 const meta = require.main.require('./src/meta');
 const user = require.main.require('./src/user');
+const translator = require.main.require('./src/translator');
+
+const controllers = require('./lib/controllers');
 
 const library = module.exports;
 
 library.init = async function (params) {
 	const { router, middleware } = params;
 	const routeHelpers = require.main.require('./src/routes/helpers');
-	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/persona', middleware, [], (req, res) => {
-		res.render('admin/plugins/persona', {});
-	});
+	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/persona', middleware, [], controllers.renderAdminPage);
+
+	routeHelpers.setupPageRoute(router, '/user/:userslug/theme', middleware, [
+		middleware.exposeUid,
+		middleware.ensureLoggedIn,
+		middleware.canViewUsers,
+		middleware.checkAccountPermissions,
+	], controllers.renderThemeSettings);
 };
 
 library.addAdminNavigation = async function (header) {
@@ -22,6 +30,24 @@ library.addAdminNavigation = async function (header) {
 	return header;
 };
 
+library.addProfileItem = async (data) => {
+	data.links.push({
+		id: 'theme',
+		route: 'theme',
+		icon: 'fa-paint-brush',
+		name: await translator.translate('[[persona:settings.title]]'),
+		visibility: {
+			self: true,
+			other: false,
+			moderator: false,
+			globalMod: false,
+			admin: false,
+		},
+	});
+
+	return data;
+};
+
 library.defineWidgetAreas = async function (areas) {
 	const locations = ['header', 'sidebar', 'footer'];
 	const templates = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "11.3.40",
+  "version": "11.4.0",
   "nbbpm": {
     "compatibility": "^1.18.0"
   },

package/plugin.json

@@ -5,10 +5,12 @@
 		{ "hook": "filter:config.get", "method": "getThemeConfig" },
 		{ "hook": "static:app.load", "method": "init" },
 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
+		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
 		{ "hook": "filter:topic.build", "method": "addUserToTopic" }
 	],
 	"scripts": [
 		"public/persona.js",
+		"public/settings.js",
 		"public/modules/autohidingnavbar.js",
 		"public/modules/quickreply.js"
 	],

package/public/.eslintrc

@@ -1,3 +1,3 @@
-{
-    "extends": "nodebb/public"
+{
+    "extends": "nodebb/public"
 }

package/public/modules/autohidingnavbar.js

@@ -1,221 +1,221 @@
-/*
- *  Bootstrap Auto-Hiding Navbar - v4.0.0
- *  An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.
- *  http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/
- *
- *  Made by István Ujj-Mészáros
- *  Under Apache License v2.0 License
- */
-;(function($, window, document, undefined) {
-    var pluginName = 'autoHidingNavbar',
-        $window = $(window),
-        $document = $(document),
-        _scrollThrottleTimer = null,
-        _resizeThrottleTimer = null,
-        _throttleDelay = 70,
-        _lastScrollHandlerRun = 0,
-        _previousScrollTop = null,
-        _windowHeight = $window.height(),
-        _visible = true,
-        _hideOffset,
-        defaults = {
-          disableAutohide: false,
-          showOnUpscroll: true,
-          showOnBottom: true,
-          hideOffset: 'auto', // "auto" means the navbar height
-          animationDuration: 200,
-          navbarOffset: 0
-        };
-
-    function AutoHidingNavbar(element, options) {
-      this.element = $(element);
-      this.settings = $.extend({}, defaults, options);
-      this._defaults = defaults;
-      this._name = pluginName;
-      this.init();
-    }
-
-    function hide(autoHidingNavbar) {
-      if (!_visible) {
-        return;
-      }
-
-      autoHidingNavbar.element.addClass('navbar-hidden').animate({
-        top: -1 * parseInt(autoHidingNavbar.element.css('height'), 10) + autoHidingNavbar.settings.navbarOffset
-      }, {
-        queue: false,
-        duration: autoHidingNavbar.settings.animationDuration
-      });
-
-      try {
-        $('.dropdown.open .dropdown-toggle, .dropdown.show .dropdown-toggle', autoHidingNavbar.element).dropdown('toggle');
-      }
-      catch(e) {}
-
-      _visible = false;
-
-      autoHidingNavbar.element.trigger('hide.autoHidingNavbar');
-    }
-
-    function show(autoHidingNavbar) {
-      if (_visible) {
-        return;
-      }
-
-      autoHidingNavbar.element.removeClass('navbar-hidden').animate({
-        top: 0
-      }, {
-        queue: false,
-        duration: autoHidingNavbar.settings.animationDuration
-      });
-      _visible = true;
-
-      autoHidingNavbar.element.trigger('show.autoHidingNavbar');
-    }
-
-    function detectState(autoHidingNavbar) {
-      var scrollTop = $window.scrollTop(),
-          scrollDelta = scrollTop - _previousScrollTop;
-
-      _previousScrollTop = scrollTop;
-
-      if (scrollDelta < 0) {
-        if (_visible) {
-          return;
-        }
-
-        if (autoHidingNavbar.settings.showOnUpscroll || scrollTop <= _hideOffset) {
-          show(autoHidingNavbar);
-        }
-      }
-      else if (scrollDelta > 0) {
-        if (!_visible) {
-          if (autoHidingNavbar.settings.showOnBottom && scrollTop + _windowHeight === $document.height()) {
-            show(autoHidingNavbar);
-          }
-          return;
-        }
-
-        if (scrollTop >= _hideOffset) {
-          hide(autoHidingNavbar);
-        }
-      }
-
-    }
-
-    function scrollHandler(autoHidingNavbar) {
-      if (autoHidingNavbar.settings.disableAutohide) {
-        return;
-      }
-
-      _lastScrollHandlerRun = new Date().getTime();
-
-      detectState(autoHidingNavbar);
-    }
-
-    function bindEvents(autoHidingNavbar) {
-      $document.on('scroll.' + pluginName, function() {
-        if (new Date().getTime() - _lastScrollHandlerRun > _throttleDelay) {
-          scrollHandler(autoHidingNavbar);
-        }
-        else {
-          clearTimeout(_scrollThrottleTimer);
-          _scrollThrottleTimer = setTimeout(function() {
-            scrollHandler(autoHidingNavbar);
-          }, _throttleDelay);
-        }
-      });
-
-      $window.on('resize.' + pluginName, function() {
-        clearTimeout(_resizeThrottleTimer);
-        _resizeThrottleTimer = setTimeout(function() {
-          _windowHeight = $window.height();
-        }, _throttleDelay);
-      });
-    }
-
-    function unbindEvents() {
-      $document.off('.' + pluginName);
-
-      $window.off('.' + pluginName);
-    }
-
-    AutoHidingNavbar.prototype = {
-      init: function() {
-        this.elements = {
-          navbar: this.element
-        };
-
-        this.setDisableAutohide(this.settings.disableAutohide);
-        this.setShowOnUpscroll(this.settings.showOnUpscroll);
-        this.setShowOnBottom(this.settings.showOnBottom);
-        this.setHideOffset(this.settings.hideOffset);
-        this.setAnimationDuration(this.settings.animationDuration);
-
-        _hideOffset = this.settings.hideOffset === 'auto' ? parseInt(this.element.css('height'), 10) : this.settings.hideOffset;
-        bindEvents(this);
-
-        return this.element;
-      },
-      setDisableAutohide: function(value) {
-        this.settings.disableAutohide = value;
-        return this.element;
-      },
-      setShowOnUpscroll: function(value) {
-        this.settings.showOnUpscroll = value;
-        return this.element;
-      },
-      setShowOnBottom: function(value) {
-        this.settings.showOnBottom = value;
-        return this.element;
-      },
-      setHideOffset: function(value) {
-        this.settings.hideOffset = value;
-        return this.element;
-      },
-      setAnimationDuration: function(value) {
-        this.settings.animationDuration = value;
-        return this.element;
-      },
-      show: function() {
-        show(this);
-        return this.element;
-      },
-      hide: function() {
-        hide(this);
-        return this.element;
-      },
-      destroy: function() {
-        unbindEvents(this);
-        show(this);
-        $.data(this, 'plugin_' + pluginName, null);
-        return this.element;
-      }
-    };
-
-    $.fn[pluginName] = function(options) {
-      var args = arguments;
-
-      if (options === undefined || typeof options === 'object') {
-        return this.each(function() {
-          if (!$.data(this, 'plugin_' + pluginName)) {
-            $.data(this, 'plugin_' + pluginName, new AutoHidingNavbar(this, options));
-          }
-        });
-      } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
-        var returns;
-
-        this.each(function() {
-          var instance = $.data(this, 'plugin_' + pluginName);
-
-          if (instance instanceof AutoHidingNavbar && typeof instance[options] === 'function') {
-            returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
-          }
-        });
-
-        return returns !== undefined ? returns : this;
-      }
-
-    };
-
+/*
+ *  Bootstrap Auto-Hiding Navbar - v4.0.0
+ *  An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.
+ *  http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/
+ *
+ *  Made by István Ujj-Mészáros
+ *  Under Apache License v2.0 License
+ */
+;(function($, window, document, undefined) {
+    var pluginName = 'autoHidingNavbar',
+        $window = $(window),
+        $document = $(document),
+        _scrollThrottleTimer = null,
+        _resizeThrottleTimer = null,
+        _throttleDelay = 70,
+        _lastScrollHandlerRun = 0,
+        _previousScrollTop = null,
+        _windowHeight = $window.height(),
+        _visible = true,
+        _hideOffset,
+        defaults = {
+          disableAutohide: false,
+          showOnUpscroll: true,
+          showOnBottom: true,
+          hideOffset: 'auto', // "auto" means the navbar height
+          animationDuration: 200,
+          navbarOffset: 0
+        };
+
+    function AutoHidingNavbar(element, options) {
+      this.element = $(element);
+      this.settings = $.extend({}, defaults, options);
+      this._defaults = defaults;
+      this._name = pluginName;
+      this.init();
+    }
+
+    function hide(autoHidingNavbar) {
+      if (!_visible) {
+        return;
+      }
+
+      autoHidingNavbar.element.addClass('navbar-hidden').animate({
+        top: -1 * parseInt(autoHidingNavbar.element.css('height'), 10) + autoHidingNavbar.settings.navbarOffset
+      }, {
+        queue: false,
+        duration: autoHidingNavbar.settings.animationDuration
+      });
+
+      try {
+        $('.dropdown.open .dropdown-toggle, .dropdown.show .dropdown-toggle', autoHidingNavbar.element).dropdown('toggle');
+      }
+      catch(e) {}
+
+      _visible = false;
+
+      autoHidingNavbar.element.trigger('hide.autoHidingNavbar');
+    }
+
+    function show(autoHidingNavbar) {
+      if (_visible) {
+        return;
+      }
+
+      autoHidingNavbar.element.removeClass('navbar-hidden').animate({
+        top: 0
+      }, {
+        queue: false,
+        duration: autoHidingNavbar.settings.animationDuration
+      });
+      _visible = true;
+
+      autoHidingNavbar.element.trigger('show.autoHidingNavbar');
+    }
+
+    function detectState(autoHidingNavbar) {
+      var scrollTop = $window.scrollTop(),
+          scrollDelta = scrollTop - _previousScrollTop;
+
+      _previousScrollTop = scrollTop;
+
+      if (scrollDelta < 0) {
+        if (_visible) {
+          return;
+        }
+
+        if (autoHidingNavbar.settings.showOnUpscroll || scrollTop <= _hideOffset) {
+          show(autoHidingNavbar);
+        }
+      }
+      else if (scrollDelta > 0) {
+        if (!_visible) {
+          if (autoHidingNavbar.settings.showOnBottom && scrollTop + _windowHeight === $document.height()) {
+            show(autoHidingNavbar);
+          }
+          return;
+        }
+
+        if (scrollTop >= _hideOffset) {
+          hide(autoHidingNavbar);
+        }
+      }
+
+    }
+
+    function scrollHandler(autoHidingNavbar) {
+      if (autoHidingNavbar.settings.disableAutohide) {
+        return;
+      }
+
+      _lastScrollHandlerRun = new Date().getTime();
+
+      detectState(autoHidingNavbar);
+    }
+
+    function bindEvents(autoHidingNavbar) {
+      $document.on('scroll.' + pluginName, function() {
+        if (new Date().getTime() - _lastScrollHandlerRun > _throttleDelay) {
+          scrollHandler(autoHidingNavbar);
+        }
+        else {
+          clearTimeout(_scrollThrottleTimer);
+          _scrollThrottleTimer = setTimeout(function() {
+            scrollHandler(autoHidingNavbar);
+          }, _throttleDelay);
+        }
+      });
+
+      $window.on('resize.' + pluginName, function() {
+        clearTimeout(_resizeThrottleTimer);
+        _resizeThrottleTimer = setTimeout(function() {
+          _windowHeight = $window.height();
+        }, _throttleDelay);
+      });
+    }
+
+    function unbindEvents() {
+      $document.off('.' + pluginName);
+
+      $window.off('.' + pluginName);
+    }
+
+    AutoHidingNavbar.prototype = {
+      init: function() {
+        this.elements = {
+          navbar: this.element
+        };
+
+        this.setDisableAutohide(this.settings.disableAutohide);
+        this.setShowOnUpscroll(this.settings.showOnUpscroll);
+        this.setShowOnBottom(this.settings.showOnBottom);
+        this.setHideOffset(this.settings.hideOffset);
+        this.setAnimationDuration(this.settings.animationDuration);
+
+        _hideOffset = this.settings.hideOffset === 'auto' ? parseInt(this.element.css('height'), 10) : this.settings.hideOffset;
+        bindEvents(this);
+
+        return this.element;
+      },
+      setDisableAutohide: function(value) {
+        this.settings.disableAutohide = value;
+        return this.element;
+      },
+      setShowOnUpscroll: function(value) {
+        this.settings.showOnUpscroll = value;
+        return this.element;
+      },
+      setShowOnBottom: function(value) {
+        this.settings.showOnBottom = value;
+        return this.element;
+      },
+      setHideOffset: function(value) {
+        this.settings.hideOffset = value;
+        return this.element;
+      },
+      setAnimationDuration: function(value) {
+        this.settings.animationDuration = value;
+        return this.element;
+      },
+      show: function() {
+        show(this);
+        return this.element;
+      },
+      hide: function() {
+        hide(this);
+        return this.element;
+      },
+      destroy: function() {
+        unbindEvents(this);
+        show(this);
+        $.data(this, 'plugin_' + pluginName, null);
+        return this.element;
+      }
+    };
+
+    $.fn[pluginName] = function(options) {
+      var args = arguments;
+
+      if (options === undefined || typeof options === 'object') {
+        return this.each(function() {
+          if (!$.data(this, 'plugin_' + pluginName)) {
+            $.data(this, 'plugin_' + pluginName, new AutoHidingNavbar(this, options));
+          }
+        });
+      } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
+        var returns;
+
+        this.each(function() {
+          var instance = $.data(this, 'plugin_' + pluginName);
+
+          if (instance instanceof AutoHidingNavbar && typeof instance[options] === 'function') {
+            returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+          }
+        });
+
+        return returns !== undefined ? returns : this;
+      }
+
+    };
+
   })(jQuery, window, document);

package/public/persona.js

@@ -46,7 +46,14 @@ $(document).ready(function () {
 			return;
 		}
 
-		require(['hooks'], (hooks) => {
+		require(['hooks', 'storage'], (hooks, Storage) => {
+			let preference = ['xs', 'sm'];
+
+			try {
+				preference = JSON.parse(Storage.getItem('persona:navbar:autohide'));
+			} catch (e) {
+				console.warn('[persona/settings] Unable to parse value for navbar autohiding');
+			}
 			var env = utils.findBootstrapEnvironment();
 			// if env didn't change don't destroy and recreate
 			if (env === lastBSEnv) {
@@ -58,7 +65,7 @@ $(document).ready(function () {
 			navbarEl.css('top', '');
 
 			hooks.fire('filter:persona.configureNavbarHiding', {
-				resizeEnvs: ['xs', 'sm'],
+				resizeEnvs: preference,
 			}).then(({ resizeEnvs }) => {
 				if (resizeEnvs.includes(env)) {
 					navbarEl.autoHidingNavbar({
@@ -372,33 +379,6 @@ $(document).ready(function () {
 					in: config.searchDefaultInQuick,
 				},
 			});
-
-
-			// add a checkbox in the user settings page
-			// so users can swap the sides the menus appear on
-
-			function setupSetting() {
-				if (ajaxify.data.template['account/settings'] && !document.getElementById('persona:menus:legacy-layout')) {
-					require(['translator'], function (translator) {
-						translator.translate('[[persona:mobile-menu-side]]', function (translated) {
-							$('<div class="well checkbox"><label><input type="checkbox" id="persona:menus:legacy-layout"/><strong>' + translated + '</strong></label></div>')
-								.appendTo('#content .account > .row > div:first-child')
-								.find('input')
-								.prop('checked', Storage.getItem('persona:menus:legacy-layout', 'true'))
-								.change(function (e) {
-									if (e.target.checked) {
-										Storage.setItem('persona:menus:legacy-layout', 'true');
-									} else {
-										Storage.removeItem('persona:menus:legacy-layout');
-									}
-								});
-						});
-					});
-				}
-			}
-
-			$(window).on('action:ajaxify.end', setupSetting);
-			setupSetting();
 		});
 	}
 

package/public/settings.js

@@ -0,0 +1,53 @@
+'use strict';
+
+define('forum/account/theme', ['forum/account/header', 'storage', 'settings', 'alerts'], function (header, Storage, settings, alerts) {
+	const Theme = {};
+
+	Theme.init = () => {
+		header.init();
+		Theme.setupForm();
+	};
+
+	Theme.setupForm = () => {
+		const saveEl = document.getElementById('save');
+		const formEl = document.getElementById('theme-settings');
+		const [sidebarSwapped, autohideNavbarEnvs] = [
+			!!Storage.getItem('persona:menus:legacy-layout'),
+			Storage.getItem('persona:navbar:autohide'),
+		];
+
+		document.getElementById('persona:menus:legacy-layout').checked = sidebarSwapped;
+		try {
+			const parsed = JSON.parse(autohideNavbarEnvs);
+			parsed.forEach((env) => {
+				const optionEl = document.getElementById('persona:navbar:autohide').querySelector(`option[value="${env}"]`);
+				optionEl.selected = true;
+			});
+		} catch (e) {
+			console.warn(e);
+		}
+
+		if (saveEl) {
+			saveEl.addEventListener('click', () => {
+				const themeSettings = settings.helper.serializeForm($(formEl));
+				Object.keys(themeSettings).forEach((key) => {
+					if (key === 'persona:menus:legacy-layout') {
+						if (themeSettings[key] === 'on') {
+							Storage.setItem('persona:menus:legacy-layout', 'true');
+						} else {
+							Storage.removeItem('persona:menus:legacy-layout');
+						}
+
+						return;
+					}
+
+					Storage.setItem(key, themeSettings[key]);
+				});
+
+				alerts.success('[[success:settings-saved]]');
+			});
+		}
+	};
+
+	return Theme;
+});