Docs module: Show larger image on the same page

modules/docs/src/Volo.Docs.Web/DocsUiOptions.cs

@@ -36,6 +36,8 @@ public string RoutePrefix
         public bool MultiLanguageMode { get; set; } = true;
 
         public SingleProjectModeOptions SingleProjectMode { get; } = new ();
+
+        public bool EnableEnlargeImage { get; set; } = true;
 
         private string GetFormattedRoutePrefix()
         {

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml

@@ -23,6 +23,7 @@
 @inject IPageLayout PageLayout
 @inject IHtmlLocalizer<DocsResource> L
 @inject IOptions<DocsWebGoogleOptions> DocsWebGoogleOptions
+@inject IOptions<DocsUiOptions> DocsUiOptions
 
 @model IndexModel
 @{
@@ -40,6 +41,10 @@
         <abp-style src="/Pages/Documents/Project/bootstrap-toc.css"/>
         <abp-style src="/Pages/Documents/Shared/Styles/vs.css"/>
         <abp-style src="/Pages/Documents/Project/index.css"/>
+        @if (DocsUiOptions.Value.EnableEnlargeImage)
+        {
+            <abp-style src="/Pages/Documents/Project/enlarge-image.css"/>
+        }
     </abp-style-bundle>
 }
 
@@ -57,6 +62,10 @@
             <abp-script src="/Pages/Documents/Project/bootstrap-toc.js"/>
             <abp-script src="/Pages/Documents/Shared/Scripts/vs.js"/>
             <abp-script src="/Pages/Documents/Project/index.js"/>
+            @if (DocsUiOptions.Value.EnableEnlargeImage)
+            {
+            <abp-script src="/Pages/Documents/Project/enlarge-image.js"/>
+            }
         </abp-script-bundle>
         if (DocsWebGoogleOptions.Value.EnableGoogleTranslate)
         {

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs

@@ -572,7 +572,10 @@ private async Task ConvertDocumentContentToHtmlAsync()
                 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(

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;
+}

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 = $("<div class='docs-image-modal'><span class='close'>&times;</span><img class='docs-image-modal-content'/></div>");
+        $("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");
+    }
+});