From 45685fb58a92212266a6f286a11f47d811e304a9 Mon Sep 17 00:00:00 2001 From: Musa Demir Date: Tue, 29 Mar 2022 16:26:39 +0300 Subject: [PATCH 1/3] add scroll index to blog post page --- .../BlogPostScrollIndexFeature.cs | 17 ++ .../GlobalFeatures/GlobalCmsKitFeatures.cs | 3 + .../CmsKit/Localization/Resources/en.json | 4 +- .../CmsKit/Localization/Resources/tr.json | 4 +- .../Pages/Public/CmsKit/Blogs/BlogPost.cshtml | 167 +++++++++-------- .../Pages/Public/CmsKit/Blogs/blogPost.css | 17 ++ .../Pages/Public/CmsKit/Blogs/blogpost.js | 46 +++++ .../Public/CmsKit/Blogs/bootstrap-toc.css | 60 +++++++ .../Public/CmsKit/Blogs/bootstrap-toc.js | 168 ++++++++++++++++++ 9 files changed, 414 insertions(+), 72 deletions(-) create mode 100644 modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/BlogPostScrollIndexFeature.cs create mode 100644 modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost.js create mode 100644 modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.css create mode 100644 modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.js diff --git a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/BlogPostScrollIndexFeature.cs b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/BlogPostScrollIndexFeature.cs new file mode 100644 index 0000000000..9f03f973e1 --- /dev/null +++ b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/BlogPostScrollIndexFeature.cs @@ -0,0 +1,17 @@ +using JetBrains.Annotations; +using Volo.Abp.GlobalFeatures; + +namespace Volo.CmsKit.GlobalFeatures; + + +[GlobalFeatureName(Name)] +public class BlogPostScrollIndexFeature : GlobalFeature +{ + public const string Name = "CmsKit.BlogPost.ScrollIndex"; + + internal BlogPostScrollIndexFeature( + [NotNull] GlobalCmsKitFeatures cmsKit + ) : base(cmsKit) + { + } +} \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/GlobalCmsKitFeatures.cs b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/GlobalCmsKitFeatures.cs index 9c07101616..6a7ca3245a 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/GlobalCmsKitFeatures.cs +++ b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/GlobalFeatures/GlobalCmsKitFeatures.cs @@ -26,6 +26,8 @@ public class GlobalCmsKitFeatures : GlobalModuleFeatures public MenuFeature Menu => GetFeature(); public GlobalResourcesFeature GlobalResources => GetFeature(); + + public BlogPostScrollIndexFeature BlogPostScrollIndex => GetFeature(); public GlobalCmsKitFeatures([NotNull] GlobalFeatureManager featureManager) : base(featureManager) @@ -40,5 +42,6 @@ public class GlobalCmsKitFeatures : GlobalModuleFeatures AddFeature(new CmsUserFeature(this)); AddFeature(new MenuFeature(this)); AddFeature(new GlobalResourcesFeature(this)); + AddFeature(new BlogPostScrollIndexFeature(this)); } } diff --git a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json index 0dd826480d..2634099fd1 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json +++ b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json @@ -164,6 +164,8 @@ "GlobalResources": "Global Resources", "Script": "Script", "Style": "Style", - "SavedSuccessfully": "Saved successfully" + "SavedSuccessfully": "Saved successfully", + "GoToTop": "Go to top", + "InThisDocument": "In this document" } } diff --git a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json index 95ef414c17..00cc5303d4 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json +++ b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json @@ -163,6 +163,8 @@ "GlobalResources": "Global Kaynaklar", "Script": "Script", "Style": "Style", - "SavedSuccessfully": "Başarıyla kaydedildi" + "SavedSuccessfully": "Başarıyla kaydedildi", + "GoToTop": "Yukarı Git", + "InThisDocument": "Bu belgede" } } diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml index d8c1f428da..90f16c18fd 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml @@ -17,91 +17,118 @@ @inject IMarkdownToHtmlRenderer MarkdownRenderer @section styles{ - - - - + + + + + } @section scripts{ - - - - + + + + + + } @{ string dummyImageSource = "https://dummyimage.com/1280x720/a3a3a3/fff.png?text=" + Model.BlogPost.Title; + var isScrollIndexEnabled = GlobalFeatureManager.Instance.IsEnabled(); } - - - - -
-

@Model.BlogPost.Title

-

- @@@Model.BlogPost.Author?.UserName - @Model.BlogPost.CreationTime -

+
+
+ + + + +
+

@Model.BlogPost.Title

+

+ @@@Model.BlogPost.Author?.UserName + @Model.BlogPost.CreationTime +

- @if(!Model.BlogPost.Content.IsNullOrEmpty()) - { - @Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content)) - } + @if (!Model.BlogPost.Content.IsNullOrEmpty()) + { + @Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content)) + } -

- @if (Model.BlogPost.LastModificationTime != null) - { - @L["LastModification"].Value : @Model.BlogPost.LastModificationTime - } -

-
+

+ @if (Model.BlogPost.LastModificationTime != null) + { + @L["LastModification"].Value : @Model.BlogPost.LastModificationTime + } +

+
- @if (GlobalFeatureManager.Instance.IsEnabled()) - { - if (Model.TagsFeature?.IsEnabled == true) - { - @await Component.InvokeAsync(typeof(TagViewComponent), new - { - entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, - entityId = Model.BlogPost.Id.ToString() - }) - } - } -
- + @if (GlobalFeatureManager.Instance.IsEnabled()) + { + if (Model.TagsFeature?.IsEnabled == true) + { + @await Component.InvokeAsync(typeof(TagViewComponent), new + { + entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, + entityId = Model.BlogPost.Id.ToString() + }) + } + } +
+ - - - @if (GlobalFeatureManager.Instance.IsEnabled()) - { - if (Model.ReactionsFeature?.IsEnabled == true) - { - @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new + + + @if (GlobalFeatureManager.Instance.IsEnabled()) { - entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, - entityId = Model.BlogPost.Id.ToString() - }) - } - } - - - @if (GlobalFeatureManager.Instance.IsEnabled()) - { - if (Model.RatingsFeature?.IsEnabled == true) - { - @await Component.InvokeAsync(typeof(RatingViewComponent), new + if (Model.ReactionsFeature?.IsEnabled == true) + { + @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new + { + entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, + entityId = Model.BlogPost.Id.ToString() + }) + } + } + + + @if (GlobalFeatureManager.Instance.IsEnabled()) { - entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, - entityId = Model.BlogPost.Id.ToString() - }) - } - } - - - - + if (Model.RatingsFeature?.IsEnabled == true) + { + @await Component.InvokeAsync(typeof(RatingViewComponent), new + { + entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, + entityId = Model.BlogPost.Id.ToString() + }) + } + } + + + + +
+ @if (isScrollIndexEnabled) + { +
+
+
@L["InThisDocument"]
+ + +
+
+ + @L["GoToTop"] + +
+
+
+
+ } + +
@if (GlobalFeatureManager.Instance.IsEnabled()) { diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css index 98c4a3100d..d09be3150d 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css @@ -20,4 +20,21 @@ span.area-title { } .popover { min-width: 276px; +} + +#scroll-index { + position: sticky; + top: 20px; +} + +#scroll-index .scroll-top-btn.showup{ + display: block; +} + +#scroll-index .scroll-top-btn{ + display: none; + font-size: .85em; + color: #aaa; + text-decoration: none; + padding-left: 18px; } \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost.js new file mode 100644 index 0000000000..603649e2c9 --- /dev/null +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost.js @@ -0,0 +1,46 @@ +$(function () { + var $myNav = $('#blog-post-sticky-index'); + var $scrollToTopBtn = $('.scroll-top-btn'); + + window.Toc.helpers.createNavList = function () { + return $('
    '); + }; + + window.Toc.helpers.createChildNavList = function ($parent) { + var $childList = this.createNavList(); + $parent.append($childList); + return $childList; + }; + + window.Toc.helpers.generateNavEl = function (anchor, text) { + var $a = $(''); + $a.attr('href', '#' + anchor); + $a.text(text); + var $li = $('
  • '); + $li.append($a); + return $li; + }; + + Toc.init($myNav); + + $('body').scrollspy({ + target: $myNav, + }); + + $scrollToTopBtn.click(function () { + $('html, body').animate({scrollTop: 0}, 'fast'); + }); + + // When the user scrolls down 20px from the top of the document, show the button + window.onscroll = function () { + scrollFunction() + }; + + function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + $scrollToTopBtn.addClass('showup'); + } else { + $scrollToTopBtn.removeClass('showup'); + } + } +}); diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.css new file mode 100644 index 0000000000..b15e18ee85 --- /dev/null +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.css @@ -0,0 +1,60 @@ +/*! + * Bootstrap Table of Contents v<%= version %> (http://afeld.github.io/bootstrap-toc/) + * Copyright 2015 Aidan Feldman + * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ + +/* modified from https://github.com/twbs/bootstrap/blob/94b4076dd2efba9af71f0b18d4ee4b163aa9e0dd/docs/assets/css/src/docs.css#L548-L601 */ + +/* All levels of nav */ +nav[data-toggle='toc'] .nav > li > a { + display: block; + padding: 4px 20px; + font-size: 13px; + font-weight: 500; + color: #767676; +} +nav[data-toggle='toc'] .nav > li > a:hover, +nav[data-toggle='toc'] .nav > li > a:focus { + padding-left: 19px; + color: #563d7c; + text-decoration: none; + background-color: transparent; + border-left: 1px solid #563d7c; +} +nav[data-toggle='toc'] .nav-link.active, +nav[data-toggle='toc'] .nav-link.active:hover, +nav[data-toggle='toc'] .nav-link.active:focus { + padding-left: 18px; + font-weight: bold; + color: #563d7c; + background-color: transparent; + border-left: 2px solid #563d7c; +} + +/* Nav: second level (shown on .active) */ +nav[data-toggle='toc'] .nav-link + ul { + display: none; /* Hide by default, but at >768px, show it */ + padding-bottom: 10px; +} + +nav[data-toggle='toc'] .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 30px; + font-size: 12px; + font-weight: normal; +} +nav[data-toggle='toc'] .nav .nav > li > a:hover, +nav[data-toggle='toc'] .nav .nav > li > a:focus { + padding-left: 29px; +} +nav[data-toggle='toc'] .nav .nav > li > .active, +nav[data-toggle='toc'] .nav .nav > li > .active:hover, +nav[data-toggle='toc'] .nav .nav > li > .active:focus { + padding-left: 28px; + font-weight: 500; +} + +nav[data-toggle='toc'] .nav-link.active + ul { + display: block; +} \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.js new file mode 100644 index 0000000000..13a4d1f6a5 --- /dev/null +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/bootstrap-toc.js @@ -0,0 +1,168 @@ +/*! + * Bootstrap Table of Contents v1.0.0 (http://afeld.github.io/bootstrap-toc/) + * Copyright 2015 Aidan Feldman + * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ +(function ($) { + 'use strict'; + + window.Toc = { + helpers: { + // return all matching elements in the set, or their descendants + findOrFilter: function ($el, selector) { + // http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/ + // http://stackoverflow.com/a/12731439/358804 + var $descendants = $el.find(selector); + return $el + .filter(selector) + .add($descendants) + .filter(':not([data-toc-skip])'); + }, + + generateUniqueIdBase: function (el) { + var text = $(el).text(); + var anchor = text + .trim() + .toLowerCase() + .replace(/[^A-Za-z0-9]+/g, '-'); + return anchor || el.tagName.toLowerCase(); + }, + + generateUniqueId: function (el) { + var anchorBase = this.generateUniqueIdBase(el); + for (var i = 0; ; i++) { + var anchor = anchorBase; + if (i > 0) { + // add suffix + anchor += '-' + i; + } + // check if ID already exists + if (!document.getElementById(anchor)) { + return anchor; + } + } + }, + + generateAnchor: function (el) { + if (el.id) { + return el.id; + } else { + var anchor = this.generateUniqueId(el); + el.id = anchor; + return anchor; + } + }, + + createNavList: function () { + return $('
      '); + }, + + createChildNavList: function ($parent) { + var $childList = this.createNavList(); + $parent.append($childList); + return $childList; + }, + + generateNavEl: function (anchor, text) { + var $a = $(''); + $a.attr('href', '#' + anchor); + $a.text(text); + var $li = $('
    • '); + $li.append($a); + return $li; + }, + + generateNavItem: function (headingEl) { + var anchor = this.generateAnchor(headingEl); + var $heading = $(headingEl); + var text = $heading.data('toc-text') || $heading.text(); + return this.generateNavEl(anchor, text); + }, + + // Find the first heading level (`

      `, then `

      `, etc.) that has more than one element. Defaults to 1 (for `

      `). + getTopLevel: function ($scope) { + for (var i = 1; i <= 6; i++) { + var $headings = this.findOrFilter($scope, 'h' + i); + if ($headings.length > 1) { + return i; + } + } + + return 1; + }, + + // returns the elements for the top level, and the next below it + getHeadings: function ($scope, topLevel) { + var topSelector = 'h' + topLevel; + + var secondaryLevel = topLevel + 1; + var secondarySelector = 'h' + secondaryLevel; + + return this.findOrFilter( + $scope, + topSelector + ',' + secondarySelector + ); + }, + + getNavLevel: function (el) { + return parseInt(el.tagName.charAt(1), 10); + }, + + populateNav: function ($topContext, topLevel, $headings) { + var $context = $topContext; + var $prevNav; + + var helpers = this; + $headings.each(function (i, el) { + var $newNav = helpers.generateNavItem(el); + var navLevel = helpers.getNavLevel(el); + + // determine the proper $context + if (navLevel === topLevel) { + // use top level + $context = $topContext; + } else if ($prevNav && $context === $topContext) { + // create a new level of the tree and switch to it + $context = helpers.createChildNavList($prevNav); + } // else use the current $context + + $context.append($newNav); + + $prevNav = $newNav; + }); + }, + + parseOps: function (arg) { + var opts; + if (arg.jquery) { + opts = { + $nav: arg, + }; + } else { + opts = arg; + } + opts.$scope = opts.$scope || $(document.body); + return opts; + }, + }, + + // accepts a jQuery object, or an options object + init: function (opts) { + opts = this.helpers.parseOps(opts); + + // ensure that the data attribute is in place for styling + opts.$nav.attr('data-toggle', 'toc'); + + var $topContext = this.helpers.createChildNavList(opts.$nav); + var topLevel = this.helpers.getTopLevel(opts.$scope); + var $headings = this.helpers.getHeadings(opts.$scope, topLevel); + this.helpers.populateNav($topContext, topLevel, $headings); + }, + }; + + $(function () { + $('nav[data-toggle="toc"]').each(function (i, el) { + var $nav = $(el); + Toc.init($nav); + }); + }); +})(jQuery); From db9a022d1aad8c48156d5a01a14a1f5906323e2d Mon Sep 17 00:00:00 2001 From: Musa Demir Date: Tue, 29 Mar 2022 23:55:11 +0300 Subject: [PATCH 2/3] import scroll index style and js file if feature enabled --- .../Pages/Public/CmsKit/Blogs/BlogPost.cshtml | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml index 2c29649dd3..d28a57889e 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml @@ -16,28 +16,40 @@ @inject IMarkdownToHtmlRenderer MarkdownRenderer + +@{ + string dummyImageSource = "https://dummyimage.com/1280x720/a3a3a3/fff.png?text=" + Model.BlogPost.Title; + var isScrollIndexEnabled = GlobalFeatureManager.Instance.IsEnabled(); +} + @section styles{ + @if (isScrollIndexEnabled) + { + + + + } - } @section scripts{ + @if (isScrollIndexEnabled) + { + + + + } + - } -@{ - string dummyImageSource = "https://dummyimage.com/1280x720/a3a3a3/fff.png?text=" + Model.BlogPost.Title; - var isScrollIndexEnabled = GlobalFeatureManager.Instance.IsEnabled(); -} -
      From b12d8f71c993e34444bcffe8ae6d82be46de489d Mon Sep 17 00:00:00 2001 From: Musa Demir Date: Wed, 30 Mar 2022 09:37:16 +0300 Subject: [PATCH 3/3] load blogpost-scroll-index when it's feature is enabled --- .../Pages/Public/CmsKit/Blogs/BlogPost.cshtml | 2 +- .../CmsKit/Blogs/{blogpost.js => blogpost-scroll-index.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/{blogpost.js => blogpost-scroll-index.js} (100%) diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml index d28a57889e..709d96182f 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml @@ -40,13 +40,13 @@ { + } - } diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost-scroll-index.js similarity index 100% rename from modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost.js rename to modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogpost-scroll-index.js