@okjavis/nodebb-theme-javis 4.0.2 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/public/src/client/search.js

@@ -0,0 +1,401 @@
+'use strict';
+
+
+define('forum/search', [
+	'search',
+	'storage',
+	'hooks',
+	'alerts',
+	'api',
+	'translator',
+	'categoryFilter',
+	'userFilter',
+], function (searchModule, storage, hooks, alerts, api, translator, categoryFilter, userFilter) {
+	const Search = {};
+	let selectedUsers = [];
+	let selectedTags = [];
+	let selectedCids = [];
+	let searchFilters = {};
+	Search.init = function () {
+		const searchIn = $('#search-in');
+		searchIn.on('change', function () {
+			updateFormItemVisiblity(searchIn.val());
+		});
+
+		const searchQuery = $('#results').attr('data-search-query');
+		searchModule.highlightMatches(
+			searchQuery,
+			$('.search-results .content p, .search-results .topic-title')
+		);
+
+		$('#advanced-search form').off('submit').on('submit', function (e) {
+			e.preventDefault();
+			searchModule.query(getSearchDataFromDOM());
+			return false;
+		});
+
+		handleSavePreferences();
+
+		categoryFilterDropdown(ajaxify.data.selectedCids);
+		userFilterDropdown($('[component="user/filter"]'), ajaxify.data.userFilterSelected);
+		tagFilterDropdown($('[component="tag/filter"]'), ajaxify.data.tagFilterSelected);
+
+		$('[component="search/filters"]').on('hidden.bs.dropdown', '.dropdown', function () {
+			const updateFns = {
+				replies: updateReplyCountFilter,
+				time: updateTimeFilter,
+				sort: updateSortFilter,
+				tag: updateTagFilter,
+			};
+
+			if (updateFns[$(this).attr('data-filter-name')]) {
+				updateFns[$(this).attr('data-filter-name')]();
+			}
+
+			const searchFiltersNew = getSearchDataFromDOM();
+			if (JSON.stringify(searchFilters) !== JSON.stringify(searchFiltersNew)) {
+				searchFilters = searchFiltersNew;
+				searchModule.query(searchFilters);
+			}
+		});
+
+		fillOutForm();
+		updateTimeFilter();
+		updateReplyCountFilter();
+		updateSortFilter();
+
+		searchFilters = getSearchDataFromDOM();
+	};
+
+	function updateTagFilter() {
+		const isActive = selectedTags.length > 0;
+		let labelText = '[[search:tags]]';
+		if (selectedTags.length) {
+			labelText = translator.compile(
+				'search:tags-x', selectedTags.map(u => u.value).join(', ')
+			);
+		}
+		$('[component="tag/filter/button"]').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateHtml(labelText);
+	}
+
+	function updateTimeFilter() {
+		const isActive = $('#post-time-range').val() > 0;
+		$('#post-time-button').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateText(
+			isActive ?
+				`[[search:time-${$('#post-time-filter').val()}-than-${$('#post-time-range').val()}]]` :
+				`[[search:time]]`
+		);
+	}
+
+	function updateSortFilter() {
+		const isActive = $('#post-sort-by').val() !== 'relevance' || $('#post-sort-direction').val() !== 'desc';
+		$('#sort-by-button').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateText(
+			isActive ?
+				`[[search:sort-by-${$('#post-sort-by').val()}-${$('#post-sort-direction').val()}]]` :
+				`[[search:sort]]`
+		);
+	}
+
+	function updateReplyCountFilter() {
+		const isActive = $('#reply-count').val() > 0;
+		$('#reply-count-button').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateText(
+			isActive ?
+				`[[search:replies-${$('#reply-count-filter').val()}-count, ${$('#reply-count').val()}]]` :
+				`[[search:replies]]`
+		);
+	}
+
+	function getSearchDataFromDOM() {
+		const form = $('#advanced-search');
+		const searchData = {
+			in: $('#search-in').val(),
+		};
+		searchData.term = $('#search-input').val();
+		if (['posts', 'titlesposts', 'titles', 'bookmarks'].includes(searchData.in)) {
+			searchData.matchWords = form.find('#match-words-filter').val();
+			searchData.by = selectedUsers.length ? selectedUsers.map(u => u.username) : undefined;
+			searchData.categories = selectedCids.length ? selectedCids : undefined;
+			searchData.searchChildren = form.find('#search-children').is(':checked');
+			searchData.hasTags = selectedTags.length ? selectedTags.map(t => t.value) : undefined;
+			searchData.replies = form.find('#reply-count').val();
+			searchData.repliesFilter = form.find('#reply-count-filter').val();
+			searchData.timeFilter = form.find('#post-time-filter').val();
+			searchData.timeRange = form.find('#post-time-range').val();
+			searchData.sortBy = form.find('#post-sort-by').val();
+			searchData.sortDirection = form.find('#post-sort-direction').val();
+			searchData.showAs = form.find('#show-results-as').val();
+		}
+
+		hooks.fire('action:search.getSearchDataFromDOM', {
+			form: form,
+			data: searchData,
+		});
+
+		return searchData;
+	}
+
+	function updateFormItemVisiblity(searchIn) {
+		const hideTitlePostFilters = !['posts', 'titles', 'bookmarks'].some(token => searchIn.includes(token));
+		$('.post-search-item').toggleClass('hidden', hideTitlePostFilters);
+	}
+
+	function fillOutForm() {
+		const params = utils.params({
+			disableToType: true,
+		});
+
+		const searchData = searchModule.getSearchPreferences();
+		const formData = utils.merge(searchData, params);
+
+		if (formData) {
+			if (ajaxify.data.term) {
+				$('#search-input').val(ajaxify.data.term);
+			}
+			formData.in = formData.in || ajaxify.data.searchDefaultIn;
+			$('#search-in').val(formData.in);
+			updateFormItemVisiblity(formData.in);
+
+			if (formData.matchWords) {
+				$('#match-words-filter').val(formData.matchWords);
+			}
+
+			if (formData.showAs) {
+				$('#show-results-as').val(formData.showAs);
+			}
+
+			if (formData.by) {
+				formData.by = Array.isArray(formData.by) ? formData.by : [formData.by];
+				formData.by.forEach(function (by) {
+					$('#posted-by-user').tagsinput('add', by);
+				});
+			}
+
+			if (formData.categories) {
+				$('#posted-in-categories').val(formData.categories);
+			}
+
+			if (formData.searchChildren) {
+				$('#search-children').prop('checked', true);
+			}
+
+			if (formData.hasTags) {
+				formData.hasTags = Array.isArray(formData.hasTags) ? formData.hasTags : [formData.hasTags];
+				formData.hasTags.forEach(function (tag) {
+					$('#has-tags').tagsinput('add', tag);
+				});
+			}
+
+			if (formData.replies) {
+				$('#reply-count').val(formData.replies);
+				$('#reply-count-filter').val(formData.repliesFilter);
+			}
+
+			if (formData.timeRange) {
+				$('#post-time-range').val(formData.timeRange);
+				$('#post-time-filter').val(formData.timeFilter);
+			}
+
+			if (formData.sortBy || ajaxify.data.searchDefaultSortBy) {
+				$('#post-sort-by').val(formData.sortBy || ajaxify.data.searchDefaultSortBy);
+			}
+			$('#post-sort-direction').val(formData.sortDirection || 'desc');
+
+			hooks.fire('action:search.fillOutForm', {
+				form: formData,
+			});
+		}
+	}
+
+	function handleSavePreferences() {
+		$('#save-preferences').on('click', function () {
+			const data = getSearchDataFromDOM();
+			const fieldsToSave = [
+				'matchWords', 'in', 'showAs',
+				'replies', 'repliesFilter',
+				'timeFilter', 'timeRange',
+				'sortBy', 'sortDirection',
+			];
+			const saveData = {};
+			fieldsToSave.forEach((key) => {
+				saveData[key] = data[key];
+			});
+			storage.setItem('search-preferences', JSON.stringify(saveData));
+			alerts.success('[[search:search-preferences-saved]]');
+			return false;
+		});
+
+		$('#clear-preferences').on('click', async function () {
+			storage.removeItem('search-preferences');
+			const html = await app.parseAndTranslate('partials/search-filters', {});
+			$('[component="search/filters"]').replaceWith(html);
+			$('#search-in').val(ajaxify.data.searchDefaultIn);
+			$('#post-sort-by').val(ajaxify.data.searchDefaultSortBy);
+			$('#match-words-filter').val('all');
+			$('#show-results-as').val('posts');
+			// clearing dom removes all event handlers, reinitialize
+			userFilterDropdown($('[component="user/filter"]'), []);
+			tagFilterDropdown($('[component="tag/filter"]'), []);
+			categoryFilterDropdown([]);
+			alerts.success('[[search:search-preferences-cleared]]');
+			return false;
+		});
+	}
+
+
+	function categoryFilterDropdown(_selectedCids) {
+		ajaxify.data.allCategoriesUrl = '';
+		selectedCids = _selectedCids || [];
+		const dropdownEl = $('[component="category/filter"]');
+		categoryFilter.init(dropdownEl, {
+			selectedCids: _selectedCids,
+			updateButton: false, // prevent categoryFilter module from updating the button
+			onSelect: function (data) {
+				// Update selectedCids immediately when a category is clicked
+				ajaxify.data.selectedCids = data.selectedCids;
+				selectedCids = data.selectedCids;
+
+				// Trigger search immediately
+				const searchFiltersNew = getSearchDataFromDOM();
+				if (JSON.stringify(searchFilters) !== JSON.stringify(searchFiltersNew)) {
+					searchFilters = searchFiltersNew;
+					searchModule.query(searchFilters);
+				}
+			},
+			onHidden: async function (data) {
+				const isActive = data.selectedCids.length > 0 && data.selectedCids[0] !== 'all';
+				let labelText = '[[search:categories]]';
+				ajaxify.data.selectedCids = data.selectedCids;
+				selectedCids = data.selectedCids;
+				if (data.selectedCids.length === 1 && data.selectedCids[0] === 'all') {
+					ajaxify.data.selectedCategory = null;
+				} else if (data.selectedCids.length > 0) {
+					const categoryData = await api.get(`/categories/${data.selectedCids[0]}`);
+					ajaxify.data.selectedCategory = categoryData;
+					labelText = `[[search:categories-x, ${categoryData.name}]]`;
+				}
+				if (data.selectedCids.length > 1) {
+					labelText = `[[search:categories-x, ${data.selectedCids.length}]]`;
+				}
+
+				$('[component="category/filter/button"]').toggleClass(
+					'active-filter', isActive
+				).find('.filter-label').translateText(labelText);
+			},
+			localCategories: [],
+		});
+	}
+
+	function userFilterDropdown(el, _selectedUsers) {
+		selectedUsers = _selectedUsers || [];
+		userFilter.init(el, {
+			selectedUsers: _selectedUsers,
+			template: 'partials/search-filters',
+			onSelect: function (_selectedUsers) {
+				selectedUsers = _selectedUsers;
+			},
+			onHidden: function (_selectedUsers) {
+				const isActive = _selectedUsers.length > 0;
+				let labelText = '[[search:posted-by]]';
+				if (isActive) {
+					labelText = translator.compile(
+						'search:posted-by-usernames', selectedUsers.map(u => u.username).join(', ')
+					);
+				}
+				el.find('[component="user/filter/button"]').toggleClass(
+					'active-filter', isActive
+				).find('.filter-label').translateText(labelText);
+			},
+		});
+	}
+
+	function tagFilterDropdown(el, _selectedTags) {
+		selectedTags = _selectedTags;
+		async function renderSelectedTags() {
+			const html = await app.parseAndTranslate('partials/search-filters', 'tagFilterSelected', {
+				tagFilterSelected: selectedTags,
+			});
+			el.find('[component="tag/filter/selected"]').html(html);
+		}
+		function tagValueToObject(value) {
+			const escapedTag = utils.escapeHTML(value);
+			return {
+				value: value,
+				valueEscaped: escapedTag,
+				valueEncoded: encodeURIComponent(value),
+				class: escapedTag.replace(/\s/g, '-'),
+			};
+		}
+
+		async function doSearch() {
+			let result = { tags: [] };
+			const query = el.find('[component="tag/filter/search"]').val();
+			if (query && query.length > 1) {
+				if (app.user.privileges['search:tags']) {
+					result = await socket.emit('topics.searchAndLoadTags', { query: query });
+				} else {
+					result = {
+						tags: [tagValueToObject(query)],
+					};
+				}
+			}
+
+			if (!result.tags.length) {
+				el.find('[component="tag/filter/results"]').translateHtml(
+					'[[tags:no-tags-found]]'
+				);
+				return;
+			}
+			result.tags = result.tags.slice(0, 20);
+			const tagMap = {};
+			result.tags.forEach((tag) => {
+				tagMap[tag.value] = tag;
+			});
+
+			const html = await app.parseAndTranslate('partials/search-filters', 'tagFilterResults', {
+				tagFilterResults: result.tags,
+			});
+			el.find('[component="tag/filter/results"]').html(html);
+			el.find('[component="tag/filter/results"] [data-tag]').on('click', async function () {
+				selectedTags.push(tagMap[$(this).attr('data-tag')]);
+				renderSelectedTags();
+			});
+		}
+
+		el.find('[component="tag/filter/search"]').on('keyup', utils.debounce(function () {
+			if (app.user.privileges['search:tags']) {
+				doSearch();
+			}
+		}, 1000));
+
+		el.on('click', '[component="tag/filter/delete"]', function () {
+			const deleteTag = $(this).attr('data-tag');
+			selectedTags = selectedTags.filter(tag => tag.value !== deleteTag);
+			renderSelectedTags();
+		});
+
+		el.find('[component="tag/filter/search"]').on('keyup', (e) => {
+			if (e.key === 'Enter' && !app.user.privileges['search:tags']) {
+				const value = el.find('[component="tag/filter/search"]').val();
+				if (value && selectedTags.every(tag => tag.value !== value)) {
+					selectedTags.push(tagValueToObject(value));
+					renderSelectedTags();
+				}
+				el.find('[component="tag/filter/search"]').val('');
+			}
+		});
+
+		el.on('shown.bs.dropdown', function () {
+			el.find('[component="tag/filter/search"]').trigger('focus');
+		});
+	}
+
+	return Search;
+});

package/scss/_base.scss

@@ -79,7 +79,8 @@ body {
   font-size: $jv-font-size-base;
   line-height: $jv-line-height-base;
   color: $jv-text-main;
-  background-color: $jv-bg;
+  background: linear-gradient(180deg, #ffffff 0%, #e0f0ff 100%);
+  background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -144,6 +145,55 @@ a {
   }
 }
 
+// ===========================================================
+// PROFILE PAGE - Hide Push Notifications link
+// ===========================================================
+#web-push {
+  display: none !important;
+}
+
+// ===========================================================
+// PROFILE EDIT PAGE - Right side options alignment
+// ===========================================================
+.account .col-xl-6:last-child {
+  // Remove text-center, align left
+  text-align: left !important;
+
+  // The list group for Change Picture, Username, etc.
+  .list-group {
+    border-radius: $jv-radius-sm;
+    overflow: hidden;
+
+    .list-group-item {
+      text-align: left;
+      padding: $jv-space-4 $jv-space-6;
+      border-left: none;
+      border-right: none;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      a {
+        display: block;
+        font-weight: 500;
+      }
+    }
+  }
+
+  // SSO section label - align with list items above
+  > label.form-label {
+    margin-top: $jv-space-6;
+    padding-left: $jv-space-6; // Match list-group-item padding
+  }
+
+  // Delete account button container
+  .d-flex.justify-content-center {
+    justify-content: flex-start !important;
+    margin-top: $jv-space-6;
+  }
+}
+
 // ===========================================================
 // LOGIN PAGE ONLY - Hide search bar
 // ===========================================================

package/scss/_buttons.scss

@@ -378,3 +378,55 @@
   text-align: left;
   justify-content: flex-start;
 }
+
+// ===========================================================
+// LINKEDIN SSO BUTTON
+// ===========================================================
+.linkedin-sso-btn {
+  background-color: #0077B5 !important;
+  border-color: #0077B5 !important;
+  color: #fff !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  border-radius: $jv-radius-md !important;
+  box-shadow: 0 4px 14px rgba(0, 119, 181, 0.35) !important;
+  transition: all 0.2s ease !important;
+
+  &:hover {
+    background-color: #005885 !important;
+    border-color: #005885 !important;
+    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.45) !important;
+    transform: translateY(-1px);
+    color: #fff !important;
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(0, 119, 181, 0.3) !important;
+  }
+
+  i {
+    font-size: 20px !important;
+  }
+}
+
+// LinkedIn login block styling
+.linkedin-login-block {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: $jv-space-6;
+  background: $jv-surface;
+  border-radius: $jv-radius-lg;
+  border: 1px solid $jv-border-subtle;
+  box-shadow: $jv-shadow-md;
+}
+
+// Hide admin login section by default (shown via JS when ?admin=true)
+.admin-login-section {
+  display: none !important;
+}
+
+// When admin login is shown
+.admin-login-section[style*="display: block"] {
+  display: block !important;
+}

package/scss/_forms.scss

@@ -30,9 +30,11 @@ textarea,
   }
 }
 
-// Textarea specific
-textarea {
-  border-radius: $jv-radius-md;
+// Textarea specific - override pill shape for multi-line inputs
+textarea,
+textarea.form-control,
+.form-control[type="textarea"] {
+  border-radius: $jv-radius-sm !important; // 8px rounded rectangle, not pill
   resize: vertical;
   min-height: 100px;
 }

package/templates/feed.tpl

@@ -128,3 +128,91 @@ $(document).ready(function() {
 	});
 });
 </script>
+
+<script>
+// Embed videos on feed page - runs independently
+(function() {
+	function embedFeedVideos() {
+		// Find all MP4 links in feed posts
+		var $links = $('a[href*=".mp4"]').not('.stretched-link');
+
+		$links.each(function() {
+			var $link = $(this);
+
+			// Avoid double-processing
+			if ($link.data('javisVideoEmbedded')) {
+				return;
+			}
+
+			var href = $link.attr('href');
+			if (!href || href.indexOf('.mp4') === -1) return;
+
+			// Normalise relative URLs
+			var src = href;
+			if (href.indexOf('http') !== 0) {
+				src = window.location.origin + href;
+			}
+
+			// Find the parent post content div and feed-content-section
+			var $contentDiv = $link.closest('[component="post/content"]');
+			var $feedContentSection = $link.closest('.feed-content-section');
+
+			// Remove the stretched-link overlay so video controls work
+			if ($contentDiv.length) {
+				$contentDiv.find('.stretched-link').remove();
+				$contentDiv.removeClass('position-relative');
+			}
+
+			// Create the inline video player
+			var $video = $('<video />', {
+				src: src,
+				controls: true,
+				preload: 'metadata',
+				class: 'javis-feed-video'
+			}).css({
+				width: '100%',
+				maxWidth: '100%',
+				borderRadius: '8px',
+				backgroundColor: '#000'
+			});
+
+			// Wrap video in a container
+			var $videoContainer = $('<div class="feed-video-section px-3 pb-3"></div>').append($video);
+
+			// Insert video container after the feed-content-section (outside of it)
+			if ($feedContentSection.length) {
+				$feedContentSection.after($videoContainer);
+			}
+
+			// Hide the link/paragraph containing the MP4 link
+			var $parent = $link.closest('p');
+			if ($parent.length) {
+				$parent.hide();
+			} else {
+				$link.hide();
+			}
+
+			$link.data('javisVideoEmbedded', true);
+		});
+	}
+
+	// Run when DOM is ready
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', function() {
+			setTimeout(embedFeedVideos, 200);
+		});
+	} else {
+		setTimeout(embedFeedVideos, 200);
+	}
+
+	// Also run on ajaxify (SPA navigation)
+	$(window).on('action:ajaxify.end', function() {
+		setTimeout(embedFeedVideos, 200);
+	});
+
+	// Run when new posts are loaded (infinite scroll)
+	$(window).on('action:posts.loaded', function() {
+		setTimeout(embedFeedVideos, 200);
+	});
+})();
+</script>

package/templates/partials/category/filter-dropdown-content.tpl

@@ -0,0 +1,44 @@
+<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    {{{ if selectedCategory }}}
+    <span class="category-item d-inline-flex align-items-center gap-1">
+        {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
+        <span class="d-none d-md-inline fw-semibold">{selectedCategory.name}</span>
+    </span>
+    {{{ else }}}
+    <i class="fa fa-fw fa-list text-primary"></i>
+    <span class="d-none d-md-inline fw-semibold">[[unread:all-categories]]</span>{{{ end }}}
+</button>
+
+<div class="dropdown-menu p-1">
+    <div component="category-selector-search" class="p-1 hidden">
+        <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
+    </div>
+
+    <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+        <li role="presentation" class="category" data-cid="all">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
+                <div class="flex-grow-1">[[unread:all-categories]]</div>
+                <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
+            </a>
+        </li>
+        {{{each categoryItems}}}
+        <li role="presentation" class="category {{{ if ./disabledClass }}}disabled{{{ end }}}" data-cid="{./cid}" data-parent-cid="{./parentCid}" data-name="{./name}">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">
+                {./level}
+                <span component="category-markup" class="flex-grow-1" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                    {{{ if ./icon }}}
+                    <div class="category-item d-inline-flex align-items-center gap-1">
+                        {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                        {./name}
+                    </div>
+                    {{{ else }}}
+                    {./name}
+                    {{{ end }}}
+                </span>
+                <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{end}}}
+    </ul>
+</div>

package/templates/partials/sidebar/user-menu-dropdown.tpl

@@ -46,11 +46,6 @@
 			<i class="fa fa-fw fa-edit text-secondary"></i> <span>[[user:edit-profile]]</span>
 		</a>
 	</li>
-	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings" role="menuitem">
-			<i class="fa fa-fw fa-gear text-secondary"></i> <span>[[user:settings]]</span>
-		</a>
-	</li>
 	{{{ if showModMenu }}}
 	<li role="presentation" class="dropdown-divider"></li>
 	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>