From 364df4515bed306ca36496ab7d9444e88fca660d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?SAL=C4=B0H=20=C3=96ZKARA?= Date: Mon, 19 Aug 2024 13:44:10 +0300 Subject: [PATCH] Docs module: Show larger image on the same page --- .../docs/src/Volo.Docs.Web/DocsUiOptions.cs | 2 + .../Pages/Documents/Project/Index.cshtml | 9 ++ .../Pages/Documents/Project/Index.cshtml.cs | 5 +- .../Pages/Documents/Project/enlarge-image.css | 87 +++++++++++++++++++ .../Pages/Documents/Project/enlarge-image.js | 34 ++++++++ 5 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.css create mode 100644 modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.js diff --git a/modules/docs/src/Volo.Docs.Web/DocsUiOptions.cs b/modules/docs/src/Volo.Docs.Web/DocsUiOptions.cs index 67af1f3197..702536c31d 100644 --- a/modules/docs/src/Volo.Docs.Web/DocsUiOptions.cs +++ b/modules/docs/src/Volo.Docs.Web/DocsUiOptions.cs @@ -36,6 +36,8 @@ namespace Volo.Docs public bool MultiLanguageMode { get; set; } = true; public SingleProjectModeOptions SingleProjectMode { get; } = new (); + + public bool EnableEnlargeImage { get; set; } = true; private string GetFormattedRoutePrefix() { diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml index 9507da66ce..2167119a0d 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml @@ -23,6 +23,7 @@ @inject IPageLayout PageLayout @inject IHtmlLocalizer L @inject IOptions DocsWebGoogleOptions +@inject IOptions DocsUiOptions @model IndexModel @{ @@ -40,6 +41,10 @@ + @if (DocsUiOptions.Value.EnableEnlargeImage) + { + + } } @@ -57,6 +62,10 @@ + @if (DocsUiOptions.Value.EnableEnlargeImage) + { + + } if (DocsWebGoogleOptions.Value.EnableGoogleTranslate) { diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs index 970e967a98..d69d72f038 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs @@ -572,7 +572,10 @@ namespace Volo.Docs.Pages.Documents.Project Document.LocalDirectory ); - content = HtmlNormalizer.WrapImagesWithinAnchors(content); + if (!_uiOptions.EnableEnlargeImage) + { + content = HtmlNormalizer.WrapImagesWithinAnchors(content); + } //todo find a way to make it on client in prismJS configuration (eg: map C# => csharp) content = HtmlNormalizer.ReplaceCodeBlocksLanguage( diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.css new file mode 100644 index 0000000000..1113d2f914 --- /dev/null +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.css @@ -0,0 +1,87 @@ +/* The Modal (background) */ +.docs-image-modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(41,45,50); /* Fallback color */ + background-color: rgb(41 45 50 / 50%); + cursor: zoom-out; +} + +.docs-image-modal.show { + z-index: 9999; + align-items: center; + display: flex; + padding-top: 0; +} + +/* Modal Content (image) */ +.docs-image-modal .docs-image-modal-content { + margin: auto; + display: block; + background: #fff; + + position: relative; + flex-direction: column; + background-clip: padding-box; + outline: 0; +} + +/* Add Animation */ +.docs-image-modal .docs-image-modal-content{ + -webkit-animation-name: zoom; + -webkit-animation-duration: 0.6s; + animation-name: zoom; + animation-duration: 0.3s; +} + +@-webkit-keyframes zoom { + from {-webkit-transform:scale(0)} + to {-webkit-transform:scale(1)} +} + +@keyframes zoom { + from {transform:scale(0)} + to {transform:scale(1)} +} +/* The Close Button */ +.docs-image-modal .close { + position: absolute; + top: 15px; + right: 35px; + color: #f1f1f1; + transition: 0.3s; + font-size: 48px; + font-weight: 100; +} + +.docs-image-modal .close:hover, +.docs-image-modal .close:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} + +/* 100% Image Width on Smaller Screens */ +@media only screen and (max-width: 768px){ + .docs-image-modal .docs-image-modal-content { + max-width: 95vw; + } +} + +@media only screen and (min-width: 768px){ + .docs-image-modal .docs-image-modal-content { + max-width: 80vw; + max-height: 80vh; + } +} + +.docs-enlarge-image { + cursor: zoom-in; +} \ No newline at end of file diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.js new file mode 100644 index 0000000000..4e402d8abf --- /dev/null +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/enlarge-image.js @@ -0,0 +1,34 @@ +$(function () { + var $enlargeImage = $("article img"); + + if (!$enlargeImage.length) { + return; + } + + $enlargeImage.addClass("docs-enlarge-image"); + + var $modal = $("#image-modal"); + + if (!$modal.length) { + $modal = $("
×
"); + $("body").append($modal); + } + + var modalImg = $modal.find("img"); + $enlargeImage.click(function () { + var width = $(this).width(); + var height = $(this).height(); + modalImg.attr("src", $(this).findWithSelf("img").attr("src")); + modalImg.css("min-width", width + "px"); + modalImg.css("min-height", height + "px"); + $modal.addClass("show"); + }); + + $modal.find(".close").click(modalClose); + + $modal.click(modalClose); + + function modalClose() { + $modal.removeClass("show"); + } +}); \ No newline at end of file