@okjavis/nodebb-theme-javis 2.2.0 → 2.4.0

package/static/lib/theme.js

@@ -21,10 +21,22 @@
     // Fix bookmark alert - only show when bookmark is meaningfully ahead
     fixBookmarkAlert();
 
+    // Initialize parent post click navigation with smooth scroll
+    initParentPostNavigation();
+
+    // Initialize post hover actions (show actions only on directly hovered post)
+    initPostHoverActions();
+
+    // Initialize click handler for composer prompt card (rendered server-side in feed.tpl)
+    initFeedComposerPromptHandler();
+
     // Re-initialize carousels when new posts are loaded (infinite scroll, etc.)
     // Also handle post edits by clearing the processed flag
     $(window).on('action:posts.loaded action:topic.loaded action:ajaxify.end', function() {
       initPostImageCarousels();
+      initParentPostNavigation();
+      initPostHoverActions();
+      initFeedComposerPromptHandler();
     });
 
     // Handle post edits - need to re-process the edited post
@@ -266,4 +278,138 @@
     });
   }
 
+  /**
+   * Initialize parent post click navigation with smooth scroll
+   * Clicking the "Replying to" component scrolls to the parent post
+   */
+  function initParentPostNavigation() {
+    // Use event delegation on the topic container
+    $('[component="topic"]').off('click.javis-parent').on('click.javis-parent', '[component="post/parent"]', function(e) {
+      // Don't navigate if clicking on a link (username, etc.)
+      if ($(e.target).closest('a').length) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      var parentPid = $(this).attr('data-parent-pid');
+      if (!parentPid) {
+        return;
+      }
+
+      // Find the parent post element
+      var $parentPost = $('[component="topic"] > [component="post"][data-pid="' + parentPid + '"]');
+
+      if ($parentPost.length) {
+        // Post is on the current page - smooth scroll to it
+        smoothScrollToPost($parentPost);
+      } else {
+        // Post is on a different page - navigate via URL
+        window.location.href = config.relative_path + '/post/' + parentPid;
+      }
+    });
+  }
+
+  /**
+   * Smooth scroll to a post element with highlight effect
+   */
+  function smoothScrollToPost($postElement) {
+    if (!$postElement.length) {
+      return;
+    }
+
+    // Calculate scroll position (with offset for header)
+    var headerHeight = $('header').outerHeight() || 60;
+    var scrollTop = $postElement.offset().top - headerHeight - 20;
+
+    // Smooth scroll
+    $('html, body').animate({
+      scrollTop: scrollTop
+    }, 400, 'swing', function() {
+      // Add highlight effect after scroll completes
+      highlightPost($postElement);
+    });
+  }
+
+  /**
+   * Briefly highlight a post to draw attention
+   */
+  function highlightPost($postElement) {
+    var $container = $postElement.find('.post-container-parent');
+    if (!$container.length) {
+      $container = $postElement;
+    }
+
+    // Add highlight class
+    $container.addClass('post-highlight-flash');
+
+    // Remove after animation
+    setTimeout(function() {
+      $container.removeClass('post-highlight-flash');
+    }, 1500);
+  }
+
+  /**
+   * Initialize post hover actions
+   * Adds 'post-hovered' class only to the directly hovered post container
+   * This prevents CSS hover from bubbling up to parent posts
+   */
+  function initPostHoverActions() {
+    // Use event delegation for all post containers
+    $(document).off('mouseenter.javis-hover mouseleave.javis-hover', '.post-container-parent');
+
+    $(document).on('mouseenter.javis-hover', '.post-container-parent', function(e) {
+      // Stop propagation to prevent parent containers from getting the event
+      e.stopPropagation();
+      // Remove class from all other containers first
+      $('.post-container-parent.post-hovered').removeClass('post-hovered');
+      // Add class only to this specific container
+      $(this).addClass('post-hovered');
+    });
+
+    $(document).on('mouseleave.javis-hover', '.post-container-parent', function(e) {
+      e.stopPropagation();
+      $(this).removeClass('post-hovered');
+    });
+  }
+
+  /**
+   * Initialize click handler for composer prompt card on feed page
+   * The card HTML is rendered server-side in feed.tpl for instant display (no flicker)
+   * This function only sets up the click handlers
+   */
+  function initFeedComposerPromptHandler() {
+    // Only run on feed page with composer card present
+    var $card = $('.composer-prompt-card');
+    if (!$card.length) {
+      return;
+    }
+
+    // Skip if already initialized
+    if ($card.data('handler-initialized')) {
+      return;
+    }
+    $card.data('handler-initialized', true);
+
+    var isLoggedIn = typeof app !== 'undefined' && app.user && app.user.uid;
+
+    // Bind click handler to open composer
+    $card.on('click', '.composer-prompt-input, .composer-prompt-action', function(e) {
+      e.preventDefault();
+
+      if (!isLoggedIn) {
+        // Redirect to login
+        window.location.href = config.relative_path + '/login';
+        return;
+      }
+
+      // Trigger the original New Topic button click
+      var $newTopicBtn = $('#new_topic');
+      if ($newTopicBtn.length) {
+        $newTopicBtn.trigger('click');
+      }
+    });
+  }
+
 })();

package/templates/feed.tpl

@@ -0,0 +1,163 @@
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<style>.feed .post-body .content > p:last-child { margin-bottom: 0px; }</style>
+<div class="feed">
+	<div class="row">
+		<div data-widget-area="left" class="col-lg-3 col-sm-12 {{{ if !widgets.left.length }}}hidden{{{ end }}}">
+			{{{each widgets.left}}}
+			{{widgets.left.html}}
+			{{{end}}}
+		</div>
+		{{{ if ((widgets.left.length && widgets.right.length) || (!widgets.left.length && !widgets.right.length))}}}
+		<div class="col-lg-6 col-sm-12 mx-auto">
+		{{{ end }}}
+		{{{ if (widgets.left.length && !widgets.right.length) }}}
+		<div class="col-lg-6 col-sm-12 me-auto">
+		{{{ end }}}
+		{{{ if (!widgets.left.length && widgets.right.length) }}}
+		<div class="col-lg-6 col-sm-12 ms-auto">
+		{{{ end }}}
+
+			<!-- JAVIS: LinkedIn-style Composer Prompt Card -->
+			<div class="composer-prompt-card{{{ if !loggedIn }}} composer-prompt-guest{{{ end }}}">
+				<div class="composer-prompt-inner">
+					<div class="composer-prompt-avatar">
+						{{{ if loggedIn }}}
+						{buildAvatar(loggedInUser, "48px", true, "avatar avatar-rounded")}
+						{{{ else }}}
+						<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>
+						{{{ end }}}
+					</div>
+					<button class="composer-prompt-input" type="button" id="composer-prompt-btn">
+						<span class="composer-prompt-placeholder">{{{ if loggedIn }}}Start a discussion...{{{ else }}}Sign in to start a discussion...{{{ end }}}</span>
+					</button>
+					{{{ if loggedIn }}}
+					<div class="composer-prompt-actions">
+						<button class="composer-prompt-action" type="button" title="Add image"><i class="fa fa-image"></i></button>
+						<button class="composer-prompt-action" type="button" title="Add link"><i class="fa fa-link"></i></button>
+					</div>
+					{{{ end }}}
+				</div>
+			</div>
+
+			<!-- Hidden controls row - New Topic button kept for JS functionality -->
+			<div class="d-flex justify-content-between py-2 mb-2 gap-1 feed-controls-row">
+				{{{ if canPost }}}
+				<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
+				{{{ end }}}
+				{{{ if (!loggedIn && !canPost) }}}
+				<a href="{config.relative_path}/login" class="btn btn-primary btn-sm d-none">[[category:guest-login-post]]</a>
+				{{{ end }}}
+
+				<div class="d-flex justify-content-end gap-1 ms-auto">
+					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+
+					<div id="options-dropdown" class="btn-group dropdown dropdown-right bottom-sheet">
+						<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<i class="fa fa-fw fa-gear text-primary"></i>
+						</button>
+						<ul class="dropdown-menu p-1 text-sm" role="menu">
+							<li class="py-1 px-3">
+								<div class="form-check form-switch d-flex px-0 align-items-center justify-content-between gap-3">
+									<label class="form-check-label text-nowrap" for="showAllPosts">[[feed:show-all-posts]]</label>
+									<input class="form-check-input float-none m-0 pointer" type="checkbox" role="switch" id="showAllPosts" {{{ if showAllPosts }}}checked{{{ end }}}>
+								</div>
+							</li>
+							{{{ if loggedIn }}}
+							<li class="py-1 px-3">
+								<div class="form-check form-switch d-flex px-0 align-items-center justify-content-between gap-3">
+									<label class="form-check-label text-nowrap" for="showFollowedUsers">[[feed:followed-users-only]]</label>
+									<input class="form-check-input float-none m-0 pointer" type="checkbox" role="switch" id="showFollowedUsers" {{{ if showFollowed }}}checked{{{ end }}}>
+								</div>
+							</li>
+							{{{ end }}}
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			{{{ if !posts.length  }}}
+			<div class="alert alert-warning text-center">[[feed:no-posts-found]] {{{ if !following.length }}}[[feed:are-you-following-anyone]] {{{ end }}}</div>
+			{{{ end }}}
+
+			<ul component="posts" class="list-unstyled" data-nextstart="{nextStart}">
+				{{{ each posts }}}
+				<li component="post" class="shadow-sm mb-3 rounded-2 border posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
+
+					{{{ if (showThumbs && ./topic.thumbs.length)}}}
+					<div class="p-1 position-relative">
+						<div class="overflow-hidden rounded-1" style="max-height: 300px;">
+							<a href="{config.relative_path}/topic/{./topic.slug}">
+								<img class="w-100" src="{./topic.thumbs.0.url}">
+							</a>
+						</div>
+
+						<div class="position-absolute end-0 bottom-0 p-3 d-flex gap-2 align-items-center pe-none">
+							{{{ each ./topic.thumbs }}}
+							{{{ if (@index != 0) }}}
+							<img class="rounded-1" style="max-height: 64px; object-fit: contain;" src="{./url}">
+							{{{ end }}}
+							{{{ end }}}
+						</div>
+					</div>
+					{{{ end }}}
+
+					<div class="d-flex gap-2 p-3">
+						<div class="d-none d-lg-block">
+							<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "40px", true, "not-responsive")}</a>
+						</div>
+						<div class="post-body d-flex flex-column gap-2 flex-grow-1 hover-parent" style="min-width: 0px;">
+							{{{ if ./isMainPost }}}
+							<a class="lh-1 topic-title fw-semibold fs-5 text-reset text-break d-block" href="{config.relative_path}/topic/{./topic.slug}">
+							{./topic.title}
+							</a>
+							{{{ end }}}
+
+							<div class="d-flex gap-1 post-info text-sm align-items-center">
+								<div class="post-author d-flex align-items-center gap-1">
+									<a class="d-inline d-lg-none lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+									<a class="lh-normal fw-semibold text-nowrap" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a>
+								</div>
+								{{{ if !./isMainPost}}}{./repliedString}{{{ else }}}<span class="timeago text-muted lh-normal" title="{./timestampISO}"></span>{{{ end}}}
+							</div>
+
+							<div component="post/content" class="content text-sm text-break position-relative truncate-post-content">
+								<a href="{config.relative_path}/post/{./pid}" class="stretched-link"></a>
+								{./content}
+							</div>
+							<div class="position-relative hover-visible">
+								<button component="show/more" class="btn btn-light btn-sm rounded-pill position-absolute start-50 translate-middle-x bottom-0 z-1 hidden ff-secondary">[[feed:see-more]]</button>
+							</div>
+							<hr class="my-2"/>
+							<div class="d-flex justify-content-between">
+								<a href="{config.relative_path}/post/{{{ if ./topic.teaserPid }}}{./topic.teaserPid}{{{ else }}}{./pid}{{{ end }}}" class="btn btn-link btn-sm text-body {{{ if !./isMainPost }}}invisible{{{ end }}}"><i class="fa-fw fa-regular fa-message text-muted"></i> {humanReadableNumber(./topic.postcount)}</a>
+
+								<a href="#" data-pid="{./pid}" data-action="bookmark" data-bookmarked="{./bookmarked}" data-bookmarks="{./bookmarks}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-bookmark {{{ if ./bookmarked }}}fa text-primary{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="bookmark-count">{humanReadableNumber(./bookmarks)}</span></a>
+
+								<a href="#" data-pid="{./pid}" data-action="upvote" data-upvoted="{./upvoted}" data-upvotes="{./upvotes}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-heart {{{ if ./upvoted }}}fa text-danger{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="upvote-count">{humanReadableNumber(./upvotes)}</span></a>
+
+								<a href="#" data-pid="{./pid}" data-is-main="{./isMainPost}" data-tid="{./tid}" data-action="reply" class="btn btn-link btn-sm text-body"><i class="fa-fw fa fa-reply text-muted"></i> [[topic:reply]]</a>
+							</div>
+						</div>
+					</div>
+				</li>
+				{{{ end }}}
+			</ul>
+		</div>
+
+		<div data-widget-area="right" class="col-lg-3 col-sm-12 {{{ if !widgets.right.length }}}hidden{{{ end }}}">
+			{{{each widgets.right}}}
+			{{widgets.right.html}}
+			{{{end}}}
+		</div>
+	</div>
+</div>
+
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>

package/templates/partials/topic/post-parent.tpl

@@ -0,0 +1,9 @@
+<div component="post/parent" data-parent-pid="{./parent.pid}" data-uid="{./parent.uid}" class="btn btn-ghost btn-sm d-flex gap-2 text-start flex-row mb-2 post-parent-clickable" style="font-size: 13px;">
+	<div class="d-flex gap-2 text-nowrap">
+		<div class="d-flex flex-nowrap gap-1 align-items-center">
+			<a href="{config.relative_path}/user/{./parent.user.userslug}" class="text-decoration-none lh-1" onclick="event.stopPropagation();">{buildAvatar(./parent.user, "16px", true, "not-responsive align-middle")}</a>
+			<a class="fw-semibold text-truncate" style="max-width: 150px;" href="{config.relative_path}/user/{./parent.user.userslug}" onclick="event.stopPropagation();">{./parent.user.displayname}</a>
+		</div>
+	</div>
+	<div component="post/parent/content" class="text-muted line-clamp-1 text-break w-100">{./parent.content}</div>
+</div>

package/theme.scss

@@ -21,3 +21,4 @@
 @import "./scss/categories";
 @import "./scss/feed";
 @import "./scss/topic";
+@import "./scss/composer";