Use of cropper examples (#225)

## Target
<!--
  Why are you making this change?
 -->

#### Open Questions
<!-- OPTIONAL
- [ ] Use the GitHub checklists to spark discussion on issues that may
arise from your approach. Please tick the box and explain your answer.
-->

## Checklist
<!--
It serves as a gentle reminder for common tasks. Confirm it's done and
check everything that applies.
-->
- [ ] Documentation updated
- [ ] Tests cover new or modified code
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] New dependencies added
- [ ] Includes breaking changes
- [ ] Version bumped

## Visuals
<!-- OPTIONAL
Show results both before and after this change. When the output changes,
it can be a screenshot of a trace, metric, or log illustrating the
change.
-->

.github/linters/.stylelintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": ["function", "if", "each", "include", "mixin"]
+    }],
     "selector-list-comma-newline-after": "always-multi-line",
     "selector-list-comma-newline-before": "never-multi-line",
     "block-closing-brace-newline-before": "always",

README.md

@@ -27,7 +27,10 @@ Cropper.Blazor is an essential component for building interactive image cropping
 - [CropperBlazor.github.io/demo](https://CropperBlazor.github.io/demo)
 
 ## API
-- [https://cropperblazor.github.io/api](https://cropperblazor.github.io/api)
+- [CropperBlazor.github.io/api](https://cropperblazor.github.io/api)
+
+## Examples
+- [CropperBlazor.github.io/examples/cropperusage](https://cropperblazor.github.io/examples/cropperusage)
 
 ## Prerequisites
 - Supported .NET 7.0, .NET 6.0 versions for these web platforms:
@@ -123,9 +126,9 @@ And then use it in Razor file ([for example](https://github.com/CropperBlazor/Cr
 
 ```razor
 <CropperComponent
-  Class="cropper-demo"
+  Class="cropper-container"
   ErrorLoadImageClass="cropper-error-load"
-  @ref="cropperComponent"
+  @ref="CropperComponent"
   OnCropStartEvent="OnCropStartEvent"
   OnCropEndEvent="OnCropEndEvent"
   OnCropEvent="OnCropEvent"
@@ -135,23 +138,26 @@ And then use it in Razor file ([for example](https://github.com/CropperBlazor/Cr
   OnLoadImageEvent="OnLoadImageEvent"
   Src="@Src"
   InputAttributes="@InputAttributes"
-  ErrorLoadImageSrc="@ErrorLoadImageSrc"
+  ErrorLoadImageSrc="@_errorLoadImageSrc"
   IsErrorLoadImage="@IsErrorLoadImage"
   OnErrorLoadImageEvent="OnErrorLoadImageEvent"
-  Options="options">
+  Options="Options"
+  IsAvaibleInitCropper="IsAvaibleInitCropper">
 </CropperComponent>
 ```
 
 And then use it in [*.razor.cs file](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs)
 
 You may override Cropper JavaScript module with execution script which can replace 6 event handlers (onReady, onCropStart, onCropMove, onCropEnd, onCrop, onZoom), such as overriding the onZoom callback in JavaScript:
 ```js
-window.overrideCropperJsInteropModule = (minZoomRatio, maxZoomRatio) => {
+window.overrideOnZoomCropperEvent = (minZoomRatio, maxZoomRatio) => {
     window.cropper.onZoom = function (imageObject, event, correlationId) {
-        const jSEventData = this.getJSEventData(event, correlationId);
-        const isApplyPreventZoomRatio = minZoomRatio != null || maxZoomRatio != null;
+		const jSEventData = this.getJSEventData(event, correlationId);
+
+		const isApplyPreventZoomMinRatio = (minZoomRatio != null) && (minZoomRatio > event.detail.ratio);
+		const isApplyPreventZoomMaxRatio = (maxZoomRatio != null) && (event.detail.ratio > maxZoomRatio);
 
-        if (isApplyPreventZoomRatio && (event.detail.ratio < minZoomRatio || event.detail.ratio > maxZoomRatio)) {
+		if (isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio) {
             event.preventDefault();
         }
         else {

src/Cropper.Blazor/Client/Components/Docs/DocsPage.razor

@@ -1,20 +1,11 @@
-@using MudBlazor;
-
-<div class="mt-5 mb-5">
+<MudMainContent Class="mudblazor-main-content">
     <MudContainer MaxWidth="MaxWidth.Large">
         <div id="docspage" class="docs-page">
             <CascadingValue Value="this" IsFixed>
                 @ChildContent
             </CascadingValue>
         </div>
-        <div class="docs-navigation-footer">
-        </div>
     </MudContainer>
-    @if (DisplayFooter)
-    {
-        <MudContainer MaxWidth="MaxWidth.Large" Class="mt-16">
-        </MudContainer>
-    }
     <MudDrawer Class="docs-page-content-navigation-drawer" @bind-Open="_contentDrawerOpen" Breakpoint="Breakpoint.Lg" Anchor="Anchor.End" ClipMode="DrawerClipMode.Always" Elevation="0" Color="Color.Transparent">
         @if (_displayView)
         {
@@ -28,4 +19,4 @@
         }
         <MudPageContentNavigation SectionClassSelector="docs-section-header" @ref="_contentNavigation" ActivateFirstSectionAsDefault="true" />
     </MudDrawer>
-</div>
+</MudMainContent>

src/Cropper.Blazor/Client/Components/Docs/DocsPage.razor.cs

@@ -1,15 +1,14 @@
 using System.Diagnostics;
 using Cropper.Blazor.Client.Services;
 using Microsoft.AspNetCore.Components;
+using Cropper.Blazor.Client.Models;
 using MudBlazor;
 using MudBlazor.Interfaces;
 
 namespace Cropper.Blazor.Client.Components.Docs
 {
     public partial class DocsPage : ComponentBase
     {
-        [Parameter] public bool DisplayFooter { get; set; }
-
         private Queue<DocsSectionLink> _bufferedSections = new();
         private MudPageContentNavigation _contentNavigation;
         private Stopwatch _stopwatch = Stopwatch.StartNew();

src/Cropper.Blazor/Client/Components/Docs/DocsPageContent.razor

@@ -1,5 +1,4 @@
-
-<div class="docs-page-content">
+<div class="docs-page-content">
     @ChildContent
 </div>
 

src/Cropper.Blazor/Client/Components/Docs/DocsPageHeader.razor

@@ -0,0 +1,38 @@
+@using System
+@using System.Linq
+@using Microsoft.AspNetCore.Components
+@using MudBlazor
+@using System.Collections.Generic
+@using System.Text.RegularExpressions
+
+@if (SpecialHeaderContent != null)
+{
+    <div class="docs-page-header my-16">
+        @SpecialHeaderContent
+    </div>
+}
+else
+{
+    <div class="docs-page-header mt-6 mb-12">
+        <MudText Typo="@Typo.h3">@Title</MudText>
+        <MudText>@GetSubTitle() @Description</MudText>
+    </div>
+}
+
+@code {
+
+    [Parameter] public string Title { get; set; }
+    [Parameter] public string SubTitle { get; set; }
+    [Parameter] public RenderFragment Description { get; set; }
+    [Parameter] public RenderFragment SpecialHeaderContent { get; set; }
+
+
+    string GetTitle() => $"{Title} - MudBlazor";
+
+    string GetSubTitle()
+    {
+        if (string.IsNullOrEmpty(SubTitle))
+            return "";
+        return SubTitle.TrimEnd('.') + ".";
+    }
+}

src/Cropper.Blazor/Client/Components/Docs/SectionContent.razor

@@ -14,30 +14,35 @@
         @if (Codes != null || ChildContent != null)
         {
             <MudToolBar Class="@ToolbarClassname">
-                <MudButtonGroup Color="Color.Primary" Class="mud-width-full" Variant="Variant.Outlined" VerticalAlign="IsVerticalAlign">
-                @if(Codes != null)
-                {
-                    @foreach (var codefile in Codes)
+                <MudButtonGroup Color="Color.Primary" Class="mud-width-full"
+                                Variant="Variant.Text" VerticalAlign="IsVerticalAlign"
+                                Style="border-radius: 8px 8px 0 0">
+                    @if (Codes != null)
                     {
-                        <MudButton
-                            Class="@GetActiveCode(codefile.code)"
-                            OnClick="@(() => SetActiveCode(codefile.code))"
-                            Style="word-break: break-word;"
-                            Size="Size.Small">
+                        @foreach (var codefile in Codes)
+                        {
+                            <MudButton Class="@GetActiveCode(codefile.code)"
+                                       OnClick="@(() => SetActiveCode(codefile.code))"
+                                       Style="word-break: break-word;"
+                                       Size="Size.Small">
                                 @codefile.title
-                        </MudButton>
+                            </MudButton>
+                        }
                     }
-                }
-                <MudSpacer/>
-                @if (HasCode && ChildContent != null)
-                {
-                    <MudButton OnClick="OnShowCode"
-                        StartIcon="@(ShowCode ? @Icons.Material.Rounded.CodeOff : Icons.Material.Rounded.Code)"
-                        Color="Color.Default"
-                        Size="Size.Small">
+
+                    @if (!IsVerticalAlign)
+                    {
+                        <MudSpacer />
+                    }
+
+                    @if (HasCode && ChildContent != null)
+                    {
+                        <MudButton OnClick="OnShowCode"
+                                   StartIcon="@(ShowCode ? @Icons.Material.Rounded.CodeOff : Icons.Material.Rounded.Code)"
+                                   Size="Size.Small">
                             @(ShowCode ? "Hide code" : "Show code")
-                    </MudButton>
-                }
+                        </MudButton>
+                    }
                 </MudButtonGroup>
             </MudToolBar>
         }
@@ -55,11 +60,10 @@
         <div class="docs-section-source-container">
             @CodeComponent(ActiveCode)
         </div>
-        <MudIconButton
-            Icon="@Icons.Material.Outlined.FileCopy"
-            Size="Size.Medium"
-            Color="Color.Secondary"
-            Class="copy-code-button"
-            @onclick="CopyTextToClipboardAsync" />
+        <MudIconButton Icon="@Icons.Material.Outlined.FileCopy"
+                       Size="Size.Medium"
+                       Color="Color.Secondary"
+                       Class="copy-code-button"
+        @onclick="CopyTextToClipboardAsync" />
     </div>
-}
+}

src/Cropper.Blazor/Client/Components/Docs/SectionHeader.razor

@@ -1,5 +1,5 @@
 <div @ref="@SectionReference" id="@GetSectionId()" class="@Classname">
-    @if (!string.IsNullOrWhiteSpace(Title) && HideTitle == false)
+    @if (!String.IsNullOrWhiteSpace(Title) && HideTitle == false)
     {
         <MudText Class="@TitleClass" Typo="@GetTitleTypo()">
             <b>@Title</b>

src/Cropper.Blazor/Client/Components/Docs/SectionHeader.razor.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Components;
+using Cropper.Blazor.Client.Models;
+using Microsoft.AspNetCore.Components;
 using MudBlazor;
 using MudBlazor.Utilities;
 
@@ -11,9 +12,10 @@ public partial class SectionHeader
             .AddClass(Class)
             .Build();
 
-    [CascadingParameter] private DocsPageSection Section { get; set; }
     [CascadingParameter] private DocsPage DocsPage { get; set; }
 
+    [CascadingParameter] private DocsPageSection Section { get; set; }
+
     [Parameter] public string Class { get; set; }
 
     [Parameter] public string Title { get; set; }
@@ -24,10 +26,11 @@ public partial class SectionHeader
     [Parameter] public RenderFragment SubTitle { get; set; }
 
     [Parameter] public RenderFragment Description { get; set; }
-    public DocsSectionLink SectionInfo { get; set; }
 
     public ElementReference SectionReference;
 
+    public DocsSectionLink SectionInfo { get; set; }
+
     protected override void OnInitialized()
     {
         base.OnInitialized();
@@ -51,7 +54,7 @@ protected override void OnInitialized()
     protected override void OnAfterRender(bool firstRender)
     {
         base.OnAfterRender(firstRender);
-        if (firstRender == true && DocsPage != null && !string.IsNullOrWhiteSpace(Title))
+        if (firstRender == true && DocsPage != null && !String.IsNullOrWhiteSpace(Title))
         {
             DocsPage.AddSection(SectionInfo, Section);
         }

src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor

@@ -30,7 +30,7 @@
             <MudChip Variant="Variant.Outlined" Color="Color.Primary" Class="flex-1 ma-0 mt-4">
                 Zoom event ratio:
             </MudChip>
-            <MudNumericField @bind-Value="Ratio" Format="N2" Variant="Variant.Text"
+            <MudNumericField @bind-Value="CurrentRatio" Format="N2" Variant="Variant.Text"
                              HideSpinButtons="true" ReadOnly="true" Class="flex-1" />
         </div>
     </MudCardContent>

src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor.cs

@@ -34,22 +34,22 @@ private decimal? MaxZoomRatio
 
         private decimal? OldRatio { get; set; } = null;
 
-        private decimal? Ratio { get; set; } = null;
+        private decimal? CurrentRatio { get; set; } = null;
 
         [CascadingParameter(Name = "CropperComponent"), Required]
         private CropperComponent CropperComponent { get; set; } = null!;
 
         public void OnZoomEvent(ZoomEvent? zoomEvent)
         {
             OldRatio = zoomEvent?.OldRatio;
-            Ratio = zoomEvent?.Ratio;
+            CurrentRatio = zoomEvent?.Ratio;
 
             StateHasChanged();
         }
 
         public void SetRatio(decimal? ratio)
         {
-            Ratio = ratio;
+            CurrentRatio = ratio;
 
             StateHasChanged();
         }

src/Cropper.Blazor/Client/Cropper.Blazor.Client.csproj

@@ -79,7 +79,17 @@
 		<Exec Command="$(ProjectDocsCompiler)" Condition="!Exists('$(BinDocsCompiler)')" />
 	</Target>
 
-	<Target Name="IncludeGeneratedFiles" BeforeTargets="BeforeBuild" DependsOnTargets="CompileDocs">
+	<!--This file contains any ExampleCode that is new and needs including in the build -->
+	<Target Name="ReadFromFile" DependsOnTargets="CompileDocs">
+		<ItemGroup>
+			<NewFiles Include="NewFilesToBuild.txt" />
+		</ItemGroup>
+		<ReadLinesFromFile File="@(NewFiles)">
+			<Output TaskParameter="Lines" ItemName="NewExampleCodeToBuild" />
+		</ReadLinesFromFile>
+	</Target>
+
+	<Target Name="IncludeGeneratedFiles" BeforeTargets="BeforeBuild" DependsOnTargets="CompileDocs;ReadFromFile">
 		<ItemGroup>
 			<Compile Include="Models/DocStrings.generated.cs" Condition="!Exists('Models/DocStrings.generated.cs')" />
 			<Compile Include="Models/Snippets.generated.cs" Condition="!Exists('Models/Snippets.generated.cs')" />
@@ -108,6 +118,9 @@
 			<FilesToClean Include="./Models/Snippets.generated.cs" />
 			<FilesToClean Include="./wwwroot/helper.min.js" />
 			<FilesToClean Include="./wwwroot/sw-registrator.min.js" />
+			<FilesToClean Include="./wwwroot/sw-registrator.min.js" />
+			<FilesToClean Include="**/Code/*.html" />
+			<FilesToClean Include="./NewFilesToBuild.txt" />
 			<FilesToClean Include="./wwwroot/resizeWindowEventListener.min.js" />
 		</ItemGroup>
 		<Delete Files="@(FilesToClean)" />
@@ -166,6 +179,9 @@
 	<ItemGroup>
 		<EmbeddedResource Include="Pages\**\*.html" />
 	</ItemGroup>
+	<ItemGroup>
+	  <None Remove="Pages\CropZoom\Examples\MinMaxZoomRatio_ScriptCode.html" />
+	</ItemGroup>
 	<ItemGroup>
 		<ProjectReference Include="..\Cropper.Blazor.Shared\Cropper.Blazor.Shared.csproj" />
 		<ProjectReference Include="..\Cropper.Blazor\Cropper.Blazor.csproj" />

src/Cropper.Blazor/Client/Enums/BasePage.cs

@@ -4,6 +4,7 @@ public enum BasePage
 {
     None,
     Demo,
+    Examples,
     Api,
     About
 }

src/Cropper.Blazor/Client/Enums/ThemeMode.cs

@@ -0,0 +1,8 @@
+namespace Cropper.Blazor.Client.Enums;
+
+public enum ThemeMode
+{
+    System = 0,
+    Light = 1,
+    Dark = 2
+}

src/Cropper.Blazor/Client/Extensions/DocsVeiewExtension.cs

@@ -34,5 +34,7 @@ public static void TryAddDocsViewServices(this IServiceCollection services)
             {
                 Capacity = int.MaxValue
             });
+
+        services.AddSingleton<IMenuService, MenuService>();
     }
 }