BlazorJavasccriptFunctions Javascript functions in Blazor

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
  • ScrollY
  • ScrollX

  var browserDimensions = 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);
  }