feat(butil): add Location class to Butil #6328 (#6345)

src/Butil/Bit.Butil.Demo/Pages/LocationPage.razor

@@ -0,0 +1,55 @@
+@page "/location"
+@inject Bit.Butil.Console console
+@inject Bit.Butil.Location location
+
+<PageTitle>Location Samples</PageTitle>
+
+<h1>Location</h1>
+
+<pre style="font-family:Consolas">
+@@inject Bit.Butil.Location location
+
+@@code {
+    ...
+    await location.Reload();
+    ...
+}
+</pre>
+
+<br />
+<hr />
+
+<h3>Open the DevTools console and click on buttons</h3>
+
+<hr />
+<br />
+
+<button @onclick=GetHref>Href</button>
+<br />
+<button @onclick=GetProtocol>Protocol</button>
+<button @onclick=GetHost>Host</button>
+<br />
+<button @onclick=GetOrigin>Origin</button>
+
+
+@code {
+    private async Task GetHref()
+    {
+        await console.Log("location.href =", await location.GetHref());
+    }
+
+    private async Task GetProtocol()
+    {
+        await console.Log("location.protocol =", await location.GetProtocol());
+    }
+
+    private async Task GetHost()
+    {
+        await console.Log("location.host =", await location.GetHost());
+    }
+
+    private async Task GetOrigin()
+    {
+        await console.Log("location.origin =", await location.GetOrigin());
+    }
+}

src/Butil/Bit.Butil.Demo/Shared/Header.razor

@@ -7,6 +7,7 @@
     <a href="/history">History</a> |
     <a href="/element">Element</a> |
     <a href="/navigator">Navigator</a> |
-    <a href="/storage">Storage</a>
+    <a href="/storage">Storage</a> |
+    <a href="/location">Location</a>
 </div>
 <hr />

src/Butil/Bit.Butil/BitButil.cs

@@ -15,6 +15,7 @@ public static IServiceCollection AddBitButilServices(this IServiceCollection ser
         services.AddScoped<Navigator>();
         services.AddScoped<LocalStorage>();
         services.AddScoped<SessionStorage>();
+        services.AddScoped<Location>();
 
         return services;
     }

src/Butil/Bit.Butil/Internals/JsInterops/LocationJsInterop.cs

@@ -0,0 +1,59 @@
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace Bit.Butil;
+
+internal static class LocationJsInterop
+{
+    internal static async Task<string> LocationGetHref(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getHref");
+    internal static async Task LocationSetHref(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setHref", value);
+
+    internal static async Task<string> LocationGetProtocol(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getProtocol");
+    internal static async Task LocationSetProtocol(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setProtocol", value);
+
+    internal static async Task<string> LocationGetHost(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getHost");
+    internal static async Task LocationSetHost(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setHost", value);
+
+    internal static async Task<string> LocationGetHostname(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getHostname");
+    internal static async Task LocationSetHostname(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setHostname", value);
+
+    internal static async Task<string> LocationGetPort(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getPort");
+    internal static async Task LocationSetPort(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setPort", value);
+
+    internal static async Task<string> LocationGetPathname(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getPathname");
+    internal static async Task LocationSetPathname(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setPathname", value);
+
+    internal static async Task<string> LocationGetSearch(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getSearch");
+    internal static async Task LocationSetSearch(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setSearch", value);
+
+    internal static async Task<string> LocationGetHash(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.getHash");
+    internal static async Task LocationSetHash(this IJSRuntime js, string value)
+        => await js.InvokeVoidAsync("BitButil.location.setHash", value);
+
+    internal static async Task<string> LocationGetOrigin(this IJSRuntime js)
+        => await js.InvokeAsync<string>("BitButil.location.origin");
+
+    internal static async Task LocationAssign(this IJSRuntime js, string url)
+        => await js.InvokeVoidAsync("BitButil.location.assign", url);
+
+    internal static async Task LocationReload(this IJSRuntime js)
+        => await js.InvokeVoidAsync("BitButil.location.reload");
+
+    internal static async Task LocationReplace(this IJSRuntime js, string url)
+        => await js.InvokeVoidAsync("BitButil.location.replace", url);
+}

src/Butil/Bit.Butil/Publics/Location.cs

@@ -0,0 +1,167 @@
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace Bit.Butil;
+
+/// <summary>
+/// The Location interface represents the location (URL) of the object it is linked to. 
+/// Changes done on it are reflected on the object it relates to. 
+/// Both the Document and Window interface have such a linked Location, accessible 
+/// via Document.location and Window.location respectively.
+/// <br />
+/// More info: <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location">https://developer.mozilla.org/en-US/docs/Web/API/Location</see>
+/// </summary>
+public class Location(IJSRuntime js)
+{
+    /// <summary>
+    /// returns a string containing the entire URL.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href">https://developer.mozilla.org/en-US/docs/Web/API/Location/href</see>
+    /// </summary>
+    public async Task<string> GetHref()
+        => await js.LocationGetHref();
+    /// <summary>
+    /// Sets the href of the location andn then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href">https://developer.mozilla.org/en-US/docs/Web/API/Location/href</see>
+    /// </summary>
+    public async Task SetHref(string value)
+        => await js.LocationSetHref(value);
+
+    /// <summary>
+    /// A string containing the protocol scheme of the URL, including the final ':'.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol">https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol</see>
+    /// </summary>
+    public async Task<string> GetProtocol()
+        => await js.LocationGetProtocol();
+    /// <summary>
+    /// Sets the protocol scheme of the URL and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol">https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol</see>
+    /// </summary>
+    public async Task SetProtocol(string value)
+        => await js.LocationSetProtocol(value);
+
+    /// <summary>
+    /// A string containing the host, that is the hostname, a ':', and the port of the URL.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/host">https://developer.mozilla.org/en-US/docs/Web/API/Location/host</see>
+    /// </summary>
+    public async Task<string> GetHost()
+        => await js.LocationGetHost();
+    /// <summary>
+    /// Sets the host of the location and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/host">https://developer.mozilla.org/en-US/docs/Web/API/Location/host</see>
+    /// </summary>
+    public async Task SetHost(string value)
+        => await js.LocationSetHost(value);
+
+    /// <summary>
+    /// A string containing the domain of the URL.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname">https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname</see>
+    /// </summary>
+    public async Task<string> GetHostname()
+        => await js.LocationGetHostname();
+    /// <summary>
+    /// Sets the hostname of the location and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname">https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname</see>
+    /// </summary>
+    public async Task SetHostname(string value)
+        => await js.LocationSetHostname(value);
+
+    /// <summary>
+    /// A string containing the port number of the URL.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/port">https://developer.mozilla.org/en-US/docs/Web/API/Location/port</see>
+    /// </summary>
+    public async Task<string> GetPort()
+        => await js.LocationGetPort();
+    /// <summary>
+    /// Sets the port of the location and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/port">https://developer.mozilla.org/en-US/docs/Web/API/Location/port</see>
+    /// </summary>
+    public async Task SetPort(string value)
+        => await js.LocationSetPort(value);
+
+    /// <summary>
+    /// A string containing an initial '/' followed by the path of the URL, not including the query string or fragment.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname">https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname</see>
+    /// </summary>
+    public async Task<string> GetPathname()
+        => await js.LocationGetPathname();
+    /// <summary>
+    /// Sets the pathname of the location and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname">https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname</see>
+    /// </summary>
+    public async Task SetPathname(string value)
+        => await js.LocationSetPathname(value);
+
+    /// <summary>
+    /// A string containing a '?' followed by the parameters or "querystring" of the URL.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/search">https://developer.mozilla.org/en-US/docs/Web/API/Location/search</see>
+    /// </summary>
+    public async Task<string> GetSearch()
+        => await js.LocationGetSearch();
+    /// <summary>
+    /// Sets the search of the location and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/search">https://developer.mozilla.org/en-US/docs/Web/API/Location/search</see>
+    /// </summary>
+    public async Task SetSearch(string value)
+        => await js.LocationSetSearch(value);
+
+    /// <summary>
+    /// A string containing a '#' followed by the fragment identifier of the URL.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash">https://developer.mozilla.org/en-US/docs/Web/API/Location/hash</see>
+    /// </summary>
+    public async Task<string> GetHash()
+        => await js.LocationGetHash();
+    /// <summary>
+    /// Sets the hash of the location and then the associated document navigates to the new page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash">https://developer.mozilla.org/en-US/docs/Web/API/Location/hash</see>
+    /// </summary>
+    public async Task SetHash(string value)
+        => await js.LocationSetHash(value);
+
+    /// <summary>
+    /// Returns a string containing the canonical form of the origin of the specific location.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/origin">https://developer.mozilla.org/en-US/docs/Web/API/Location/origin</see>
+    /// </summary>
+    public async Task<string> GetOrigin()
+        => await js.LocationGetOrigin();
+
+    /// <summary>
+    /// Loads the resource at the URL provided in parameter.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign">https://developer.mozilla.org/en-US/docs/Web/API/Location/assign</see>
+    /// </summary>
+    public async Task Assign(string url)
+        => await js.LocationAssign(url);
+
+    /// <summary>
+    /// Reloads the current URL, like the Refresh button.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/reload">https://developer.mozilla.org/en-US/docs/Web/API/Location/reload</see>
+    /// </summary>
+    public async Task Reload()
+        => await js.LocationReload();
+
+    /// <summary>
+    /// Replaces the current resource with the one at the provided URL (redirects to the provided URL).
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace">https://developer.mozilla.org/en-US/docs/Web/API/Location/replace</see>
+    /// </summary>
+    public async Task Replace(string url)
+        => await js.LocationReplace(url);
+}

src/Butil/Bit.Butil/Scripts/location.ts

@@ -0,0 +1,26 @@
+var BitButil = BitButil || {};
+
+(function (butil: any) {
+    butil.location = {
+        getHref() { return window.location.href },
+        setHref(value: string) { window.location.href = value },
+        getProtocol() { return window.location.protocol },
+        setProtocol(value: string) { window.location.protocol = value },
+        getHost() { return window.location.host },
+        setHost(value: string) { window.location.host = value },
+        getHostname() { return window.location.hostname },
+        setHostname(value: string) { window.location.hostname = value },
+        getPort() { return window.location.port },
+        setPort(value: string) { window.location.port = value },
+        getPathname() { return window.location.pathname },
+        setPathname(value: string) { window.location.pathname = value },
+        getSearch() { return window.location.search },
+        setSearch(value: string) { window.location.search = value },
+        getHash() { return window.location.hash },
+        setHash(value: string) { window.location.hash = value },
+        origin() { return window.location.origin },
+        assign(url: string) { window.location.assign(url) },
+        reload() { window.location.reload() },
+        replace(url: string) { window.location.replace(url) },
+    };
+}(BitButil));