BlazorJavasccriptFunctions 1.0.3

Using JavaScript functions in Blazor as: GetBrwoserDimensions, ScrollTo(), GetDivDimensions, Hide and Show with effects, GetBrowserLanguage, etc.

There is a newer version of this package available.
See the version list below for details.
Install-Package BlazorJavasccriptFunctions -Version 1.0.3
dotnet add package BlazorJavasccriptFunctions --version 1.0.3
<PackageReference Include="BlazorJavasccriptFunctions" Version="1.0.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorJavasccriptFunctions --version 1.0.3
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlazorJavasccriptFunctions, 1.0.3"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorJavasccriptFunctions as a Cake Addin
#addin nuget:?package=BlazorJavasccriptFunctions&version=1.0.3

// Install BlazorJavasccriptFunctions as a Cake Tool
#tool nuget:?package=BlazorJavasccriptFunctions&version=1.0.3
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BlazorJavasccriptFunctions

BlazorJavasccriptFunctions a package for using with Blazor.
This is expanding functions used in JavaScript as:

  • GetWindowsDimensionsAsync()
  • GetBrowserLanguageAsync()
  • GetDivInfoAsync("div id")
  • ScrollToElementAsync("div id", scrollBehaviors)
  • ShowAsync("div id", effect)
  • HideAsync("div id", effect)

Tech

It is using Javascript and for just only Hide and Show is complementing with jQuery scipts.

Installation

  • Install Package
    Install-Package BlazorJavasccriptFunctions
    
  • Attach source file to the < head >
    <script src="_content/BlazorJavasccriptFunctions/js/blazorjavascriptfuncs.min.js"></script>
    
  • Add in "Setup.cs"
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddBlazorJavascriptFuncs();
        ...
    }
    

Usage

Inject into the page
@using BlazorJavasccriptFunctions
@using BlazorJavasccriptFunctions.Models //incase you are using enums.

@inject IJavascriptFuncsService jsService;
  • GetWindowsDimensionsAsync()

    Returns the dimensions of the browser:

    • Width
    • Height
    var browserSimensions = await jsService.GetWindowsDimensionsAsync();
    
  • GetBrowserLanguageAsync()

    Returns the language using in the browser as: 'en', 'es', 'zn'.

    var browserLanguage = await jsService.GetBrowserLanguageAsync();
    
  • GetDivInfoAsync("div id")

    Returns the dimensions and scroll info of a specific DIV by giving the ID.
    Returned data:

    • ScrollLeft
    • ScrollTop
    • OffsetLeft
    • OffsetTop
    • OffsetWidth
    • OffsetHeight.

    It is very usefull when trying to catch user's beheviers in scrolling. Like scrolling to top or bottom, etc.

    <DIV id="myDiv">...</DIV>
    
    @code {
        var myDivDimensions = await jsService.GetDivDimensions("myDiv");
    }
    
  • ScrollToElementAsync("div id", scrollBehaviors)

    Move the browser's scroll to a specific Element in the page.
    With scrollBehaviors you can specify if it should stop at the end of the element or the begining

    <DIV id="myDiv">...</DIV>
    
    @code {
        await jsService.ScrollToElementAsync("myDiv", ScrollBehaviors.Bottom);
    }
    
  • ShowAsync("div id", effect)

    The classical Show from jQuery.
    Wake up a hidden element in the page and even give it an effect.

    <DIV id="myDiv">...</DIV>
    
    @code {
        await jsService.ShowAsync("myDiv", ShowHideEffects.Blind);
    }
    
  • HideAsync("div id", effect)

    The classical Hide from jQuery.
    Hide an element in the page and even give it an effect.

    <DIV id="myDiv">...</DIV>
    
    @code {
        await jsService.HideAsync("myDiv", ShowHideEffects.Blind);
    }
    

BlazorJavasccriptFunctions

BlazorJavasccriptFunctions a package for using with Blazor.
This is expanding functions used in JavaScript as:

  • GetWindowsDimensionsAsync()
  • GetBrowserLanguageAsync()
  • GetDivInfoAsync("div id")
  • ScrollToElementAsync("div id", scrollBehaviors)
  • ShowAsync("div id", effect)
  • HideAsync("div id", effect)

Tech

It is using Javascript and for just only Hide and Show is complementing with jQuery scipts.

Installation

  • Install Package
    Install-Package BlazorJavasccriptFunctions
    
  • Attach source file to the < head >
    <script src="_content/BlazorJavasccriptFunctions/js/blazorjavascriptfuncs.min.js"></script>
    
  • Add in "Setup.cs"
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddBlazorJavascriptFuncs();
        ...
    }
    

Usage

Inject into the page
@using BlazorJavasccriptFunctions
@using BlazorJavasccriptFunctions.Models //incase you are using enums.

@inject IJavascriptFuncsService jsService;
  • GetWindowsDimensionsAsync()

    Returns the dimensions of the browser:

    • Width
    • Height
    var browserSimensions = await jsService.GetWindowsDimensionsAsync();
    
  • GetBrowserLanguageAsync()

    Returns the language using in the browser as: 'en', 'es', 'zn'.

    var browserLanguage = await jsService.GetBrowserLanguageAsync();
    
  • GetDivInfoAsync("div id")

    Returns the dimensions and scroll info of a specific DIV by giving the ID.
    Returned data:

    • ScrollLeft
    • ScrollTop
    • OffsetLeft
    • OffsetTop
    • OffsetWidth
    • OffsetHeight.

    It is very usefull when trying to catch user's beheviers in scrolling. Like scrolling to top or bottom, etc.

    <DIV id="myDiv">...</DIV>
    
    @code {
        var myDivDimensions = await jsService.GetDivDimensions("myDiv");
    }
    
  • ScrollToElementAsync("div id", scrollBehaviors)

    Move the browser's scroll to a specific Element in the page.
    With scrollBehaviors you can specify if it should stop at the end of the element or the begining

    <DIV id="myDiv">...</DIV>
    
    @code {
        await jsService.ScrollToElementAsync("myDiv", ScrollBehaviors.Bottom);
    }
    
  • ShowAsync("div id", effect)

    The classical Show from jQuery.
    Wake up a hidden element in the page and even give it an effect.

    <DIV id="myDiv">...</DIV>
    
    @code {
        await jsService.ShowAsync("myDiv", ShowHideEffects.Blind);
    }
    
  • HideAsync("div id", effect)

    The classical Hide from jQuery.
    Hide an element in the page and even give it an effect.

    <DIV id="myDiv">...</DIV>
    
    @code {
        await jsService.HideAsync("myDiv", ShowHideEffects.Blind);
    }
    

Release Notes

* Bugfix jQuery attaching
* Added license MIT

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.5 267 9/15/2020
1.0.4 139 9/14/2020
1.0.3 225 9/12/2020
1.0.2 223 9/12/2020
1.0.1 143 9/1/2020