Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release/v1.6.0 #97

Open
wants to merge 25 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
51e3609
ScrollHandler added more Smooth scroll support.
majorimi Sep 8, 2021
3f45335
Added more smooth scroll, bugfixes and demo updates.
majorimi Sep 8, 2021
1dd2573
Permalink service updates added event for perma value detection and u…
majorimi Sep 8, 2021
7ff462f
Implemented INavigationHistoryService
majorimi Sep 8, 2021
0325ae6
Implemented TabActivation with permalinks
majorimi Sep 10, 2021
c90bad7
Merge pull request #96 from majorimi/dev/parmalinkscroll_and_tabs_enh…
majorimi Sep 10, 2021
c4645ce
Updated CollapsePanel animation when heigh is Auto CSS cannot calcula…
majorimi Oct 28, 2021
03a75e2
Updated Collapse docs.
majorimi Oct 28, 2021
550d552
Fixed unit tests and XML commits.
majorimi Oct 28, 2021
09b34f1
Fixed Server Blazor app Null reference.
majorimi Oct 28, 2021
e480b08
Merge pull request #100 from majorimi/fix/collapse-animation
majorimi Oct 29, 2021
a22ddae
Comment out double events
majorimi Dec 1, 2021
223ce03
Fix double event issue added more unit tests.
majorimi Dec 2, 2021
d93d0fb
Merge pull request #106 from majorimi/fix/typeahead-events
majorimi Dec 2, 2021
b9ac1be
Merge branch 'master' into release/v1.6.0
majorimi Dec 2, 2021
5d3eb52
Added some Get methods to IGoogleMapService. Updated demo and docs.
majorimi Dec 19, 2021
aae48ba
Merge pull request #108 from majorimi/dev/google-maps-methods
majorimi Dec 20, 2021
275eeb7
Implemented GoogleMap restriction boundaries in Init
majorimi Dec 20, 2021
a75b7b0
Added comments for maps restrictions.
majorimi Jan 1, 2022
22b31d4
Merge pull request #110 from majorimi/dev/google-map-restriction
majorimi Jan 1, 2022
41bc095
Added GoogleMapPolylineOptions
majorimi Jan 22, 2022
47ce2dd
Code subfoldering
majorimi Jan 23, 2022
6d062f7
AddPolyline feature
majorimi Feb 17, 2022
2101978
Typeahead exposed OnFocus event.
majorimi May 30, 2022
8115276
Update Typeahead.md
majorimi May 30, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 5 additions & 2 deletions .github/docs/Collapse.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,13 @@ Sets the `style` of the `background-color` when tab is not the Active tab. Use H
- **`HoverColor`: `string { get; set; }` (default: "WhiteSmoke") - Required** <br />
Sets the `style` of the `background-color` when button is hovered over with mouse. Use HTML specified: **Color Names**, **RGB**, **HEX** or with **HSL** values.
- **`ContentHeight`: `int { get; set; }` (default: 200) - Required** <br />
Sets the height of Content panel in `px`. 0 is auto.
Sets the height (in reality sets max-height because of CSS transition issues) of Content panel in `px`. 0 is auto.
- **`MaxAllowedContentHeight`: `int { get; set; }` (default: 200) - Required** <br />
Sets the max-height if Content panel `ContentHeight` is set to 0 (auto).
- **`Animate`: `bool { get; set; }` (default: true)** <br />
Determines to apply CSS animation and transition on Collapse state changes or not.
**Note: in case of `auto` height some animation won't work.**
**Note: in case of Content panel `ContentHeight` is set to 0 (auto), then use `MaxAllowedContentHeight` to set max-height CSS property which will be animated.
Also important based on max-height value transition speed for expand/collapse might differ!.**
- **`Disabled`: `bool { get; set; }` (default: false)** <br />
Determines whether the rendered HTML `<input>` element should be disabled or not.
- **`InnerElementReference`: `ElementReference { get; }`** <br />
Expand Down
68 changes: 52 additions & 16 deletions .github/docs/JsInterop.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ For code examples [see usage](https://github.com/majorimi/blazor-components/blob
You can try it out by using the [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop).

# Features

- **Click JS**:
- `ClickBoundariesElement` is a component which wraps the given content to a DIV and subscribes to all click events: `OnOutsideClick`, `OnInsideClick`.
- Also an **injectable `IClickBoundariesHandler` service** for callback event handlers.
Expand All @@ -31,8 +30,9 @@ You can try it out by using the [demo app](https://blazorextensions.z6.web.core.
- **Language JS**: is an **injectable `ILanguageService` service** for detect the browser language preference.
- **Browser Date JS**: is an **injectable `IBrowserDateService` service** is a simple JS call to `new Date();` to retrieve client machine date and time.
- **Browser Theme JS**: is an **injectable `IBrowserThemeService` service** to handle Browser color scheme queries and changes.
- **Geo JS**: is an **injectable `IGeolocationService` service** for detect the device Geolocation (GPS position, speed, heading, etc.).
- **Geo JS**: is an **injectable `IGeolocationService` service** for detect the device [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) (GPS position, speed, heading, etc.).
- **Head JS**: is an **injectable `IHtmlHeadService` service** for accessing and setting HTML document `Head tags`.
- **Browser History JS**: is an **injectable `INavigationHistoryService` service** to access [HTML History API](https://developer.mozilla.org/en-US/docs/Web/API/History) functionality.

## Click JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#click-js))
**NOTE: Blazor supports `@onclick` event which is equivalent with `OnInsideClick`.
Expand Down Expand Up @@ -169,14 +169,13 @@ Exposes a Blazor `ElementReference` of the wrapped around HTML element. It can b
- **`DisposeAsync()`: `ValueTask IAsyncDisposable()` interface** <br />
Component implements `IAsyncDisposable` interface Blazor framework components also can `@implements IAsyncDisposable` where the injected service should be Disposed.


### `IScrollHandler` Functions
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(ElementReference elementReference)`**<br />
Scrolls the given element into the page view area.
- **`ScrollToElementByIdAsync`**: **`Task ScrollToElementByIdAsync(string id)`**<br />
Finds element by Id and scrolls the given element into the page view area.
- **`ScrollToElementByNameAsync`**: **`Task ScrollToElementByNameAsync(string name)`**<br />
Finds element by name and scrolls the given element into the page view area.
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(ElementReference elementReference, bool smooth)`**<br />
Scrolls the given element into the page view area. **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToElementByIdAsync`**: **`Task ScrollToElementByIdAsync(string id, bool smooth)`**<br />
Finds element by Id and scrolls the given element into the page view area. **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToElementByNameAsync`**: **`Task ScrollToElementByNameAsync(string name, bool smooth)`**<br />
Finds element by name and scrolls the given element into the page view area. **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToPageEndAsync`**: **`Task ScrollToPageEndAsync(bool smooth)`**<br />
Scrolls to end of the page (X bottom).
- **`ScrollToPageTopAsync`**: **`Task ScrollToPageTopAsync(bool smooth)`**<br />
Expand All @@ -197,18 +196,34 @@ Removes event listener for 'scroll' HTML event for the whole document/window by
Implements `IAsyncDisposable` interface the injected service should be Disposed.

### `ElementReference` extensions
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(this ElementReference elementReference)`**<br />
- **`ScrollToEndAsync`**: **`Task ScrollToEndAsync(this ElementReference elementReference)`**<br />
- **`ScrollToTopAsync`**: **`Task ScrollToTopAsync(this ElementReference elementReference)`**<br />
- **`ScrollToXAsync`**: **`Task ScrollToXAsync(this ElementReference elementReference, double xPos)`**<br />
- **`ScrollToYAsync`**: **`Task ScrollToYAsync(this ElementReference elementReference, double yPos)`**<br />
- **`GetScrollPositionAsync`**: **`Task<double> GetScrollPositionAsync(this ElementReference elementReference)`**<br />
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(this ElementReference elementReference, bool smooth = false)`**<br />
Scrolls HTML page to given element. **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToEndAsync`**: **`Task ScrollToEndAsync(this ElementReference elementReference, bool smooth = false)`**<br />
Scrolls inside the given element to the bottom (end). **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToTopAsync`**: **`Task ScrollToTopAsync(this ElementReference elementReference, bool smooth = false)`**<br />
Scrolls inside the given element to the beginning (top). **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToXAsync`**: **`Task ScrollToXAsync(this ElementReference elementReference, double xPos, bool smooth = false)`**<br />
Scrolls inside the given element to the given X position. **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToYAsync`**: **`Task ScrollToYAsync(this ElementReference elementReference, double yPos, bool smooth = false)`**<br />
Scrolls inside the given element to the given Y position. **Note: smooth scroll on element level might not supported by all browsers.**
- **`ScrollToAsync`**: **`Task ScrollToYAsync(this ElementReference elementReference, double xPos, double yPos, bool smooth = false)`**<br />
Scrolls inside the given element to the given X and Y positions. **Note: smooth scroll on element level might not supported by all browsers.**
- **`GetScrollXPositionAsync`**: **`Task<double> GetScrollXPositionAsync(this ElementReference elementReference)`**<br />
Returns given element scroll X (left) position.
- **`GetScrollYPositionAsync`**: **`Task<double> GetScrollYPositionAsync(this ElementReference elementReference)`**<br />
Returns given element scroll Y (top) position.
- **`IsElementHiddenAsync`**: **`Task<bool> IsElementHiddenAsync(this ElementReference elementReference)`**<br />
Returns given element is visible on HTML document or not.
- **`IsElementHiddenBelowAsync`**: **`Task<bool> IsElementHiddenBelowAsync(this ElementReference elementReference)`**<br />
Returns given element is below of the view port.
- **`IsElementHiddenAboveAsync`**: **`Task<bool> IsElementHiddenAboveAsync(this ElementReference elementReference)`**<br />
Returns given element is above of the view port.
- **`ScrollToElementInParentAsync`**: **`Task ScrollToElementInParentAsync(this ElementReference parent, ElementReference innerElement)`**<br />
Scrolls inside the given parent element to the given inner element.
- **`ScrollInParentByIdAsync`**: **`Task ScrollInParentByIdAsync(this ElementReference parent, string id)`**<br />
Scrolls inside the given parent element to the given inner element by Id.
- **`ScrollInParentByClassAsync`**: **`Task ScrollInParentByClassAsync(this ElementReference parent, string className)`**<br />
Scrolls inside the given parent element to the given first found inner element by class name.

## Resize JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#resize-js))
**Resize JS** is an **injectable `IResizeHandler` service** for Window (global) and HTML Elements resize event callback handlers.
Expand Down Expand Up @@ -275,7 +290,6 @@ Removes event listener for `prefers-color-scheme` HTML event for the Browser.
- **`DisposeAsync`: `ValueTask IAsyncDisposable()` interface** <br />
Implements `IAsyncDisposable` interface the injected service should be Disposed.


## Geolocation JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#geo-js))
**Geolocation JS** is an injectable `IGeolocationService` service for **detect the device Geolocation (GPS position, speed, heading, etc.)**.
It is using the Geolocation API which allows users to provide their location to web applications if they desire.
Expand Down Expand Up @@ -313,6 +327,26 @@ If you have multiple fav icon tags set in the Head first call `GetHtmlFavIconsAs
- **`DisposeAsync`: `ValueTask IAsyncDisposable()` interface** <br />
Implements `IAsyncDisposable` interface the injected service should be Disposed.

## Browser History JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#history-js))
**Browser History JS** is an injectable `INavigationHistoryService` service** to access HTML History API functionality.
It is useful when don't want to rely on Blazor `NavigationManager` which does not have access to full History list and when it navigates trigger a page load/update.

### Functions
- **`GetLengthAsync`**: **`ValueTask<int> GetLengthAsync()`** <br />
Returns an Integer representing the number of elements in the session history, including the currently loaded page.
- **`GetScrollRestorationAsync`**: **`ValueTask<string> GetScrollRestorationAsync()`** <br />
Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.
- **`BackAsync`**: **`ValueTask BackAsync()`** <br />
This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to history.go(-1).
- **`ForwardAsync`**: **`ValueTask ForwardAsync()`** <br />
This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to history.go(1).
- **`GoAsync`**: **`ValueTask GoAsync(int delta)`** <br />
Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page.
- **`ReplaceStateAsync`**: **`ValueTask ReplaceStateAsync(ExpandoObject? state, string title, string url)`** <br />
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL.
- **`PushStateAsync`**: **`ValueTask PushStateAsync(ExpandoObject? state, string title, string url)`** <br />
Pushes the given data onto the session history stack with the specified title (and, if provided, URL).


# Configuration

Expand Down Expand Up @@ -351,6 +385,8 @@ Add using statement to your Blazor <component/page>.razor file. Or globally refe
@using Majorsoft.Blazor.Components.Common.JsInterop.BrowserDate
@*Only if you want to use Browser ColorTheme*@
@using Majorsoft.Blazor.Components.Common.JsInterop.BrowserColorTheme
@*Only if you want to use Browser History*@
@using Majorsoft.Blazor.Components.Common.JsInterop.History
```


Expand Down
13 changes: 10 additions & 3 deletions .github/docs/Maps.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,22 @@ It is available in the service provider (Google, Microsoft, etc.) developer site
**NOTE: None of the Majorsoft Maps component tracking or exposing you _Token_ or _API Key_!
Injecting and protecting this _Token_ or _API Key_ in your Blazor application is YOUR responsibility!**

# Components
# Components and Services


#### Google:
- **`GoogleStaticMap`**: component is wrapping **Google Static Maps services** into Blazor components.
- **`GoogleMap`**: component is wrapping **Google JavaScript Maps services** into Blazor components.
- **`BindMap`**: _Planned in release v1.4.0_
- **`IGoogleMapService`**: Injectable service to handle Google JavaScript Maps functionalities. Available on the instance of `GoogleMap` object ref as well.

#### Bing:
- **`BindMap`**: _Planned in release v1.6.0_

Maps using `IGeolocationService` (see "Dependences") to center current position.
It can be omitted and injected separately to your components as well to get or track device location.
To see how it works please check **Geo JS** [documentation](https://github.com/majorimi/blazor-components/blob/master/.github/docs/JsInterop.md#geolocation-js-see-demo-app) and [demo](https://blazorextensions.z6.web.core.windows.net/jsinterop#geo-js).


## `GoogleStaticMap` component (See: [demo app](https://blazorextensions.z6.web.core.windows.net/maps#google-static-maps))

:warning: **To use Google Maps Platform, you must have a billing account. The billing account is used to track costs associated with your projects.**
Expand Down Expand Up @@ -93,7 +99,6 @@ Once operation has finished successfully `OnLocationDetected` event will be fire
- **`DisposeAsync()`: `Task DisposeAsync()`** <br />
Component implements `IAsyncDisposable` interface Blazor framework will call it when parent removed from render tree.


## `GoogleMap` component (See: [demo app](https://blazorextensions.z6.web.core.windows.net/maps#google-js-maps))

:warning: **To use Google Maps Platform, you must have a billing account. The billing account is used to track costs associated with your projects.**
Expand All @@ -111,6 +116,8 @@ You can learn about Google JavaScript Maps features and usage [here](https://dev
Exposes a Blazor `ElementReference` of the wrapped around HTML element. It can be used e.g. for JS interop, etc.
- **`MapId`: `string { get; }`** <br />
Map HTML container Id. It can be used when multiple Maps added to one page.
- **`GoogleMapService`: `string { get; }`** <br />
Exposes `IGeolocationService` which is handling JsInterop. This instance can be used for access more GoogleMap features.
- **`Width`: `int { get; set; }` (default: 400)** <br />
Maps image Width in px.
- **`Height`: `int { get; set; }` (default: 300)** <br />
Expand Down
20 changes: 18 additions & 2 deletions .github/docs/PermaLink.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,17 @@ For more details see Usage section.
### Functions
- **`WatchPermaLinks()`**: **`void WatchPermaLinks()`** <br />
Starts a navigation watcher which will check for Permalinks in the URLs.
- **`ChangePermalink()`**: **`void ChangePermalink(string? newPermalink, bool doNotNavigate)`** <br />
Modify the current URL with given new peralink value and trigger navigation or just update browser History.
- **`CheckPermalink()`**: **`string? CheckPermalink(bool triggerEvent = false)`** <br />
Checks the current URL for permalink again and re-triggers `PermalinkDetected` event if requested.
- **`Dispose()`: `@implements IDisposable` interface** <br />
Component implements `IDisposable` interface Blazor framework will call it when parent removed from render tree.

### Events
- **`PermalinkDetected`: `event EventHandler<PermalinkDetectedEventArgs>** <br />
Event handler for parmalinks detected on navigation.

## `PermaLinkElement` component

### Properties
Expand Down Expand Up @@ -68,9 +76,17 @@ Callback function called when Permalink icon clicked and **`PermaLinkIconActions
## PermaLinkBlazorServerInitializer
Available from v1.4.0 It is convenient wrapper component to initialize navigation watcher in your Blazor Server App `MainLayout.razor` page. **Only one Initializer component allowed per Application.**

### Properties
- **`SmootScroll`: `bool { get; set; }` (default: false)** <br />
Scroll should be jump or smoothly scroll. **Note: smooth scroll on element level might not supported by all browsers.**

## PermalinkBlazorWasmInitializer
Available from v1.4.0 It is convenient wrapper component to initialize navigation watcher in your Blazor WebAssembly App `MainLayout.razor` page. **Only one Initializer component allowed per Application.**

### Properties
- **`SmootScroll`: `bool { get; set; }` (default: false)** <br />
Scroll should be jump or smoothly scroll. **Note: smooth scroll on element level might not supported by all browsers.**

# Configuration

## Installation
Expand Down Expand Up @@ -141,7 +157,7 @@ Also instance should be disposed.
```
@*Permalink initialize*@
@using Majorsoft.Blazor.Components.PermaLink
<PermalinkBlazorWasmInitializer />
<PermalinkBlazorWasmInitializer SmoothScroll="false" />
```

#### Server hosted projects
Expand Down Expand Up @@ -208,7 +224,7 @@ It has to be instantiated manually by using the following code. Also instance sh
```
@*Permalink initialize*@
@using Majorsoft.Blazor.Components.PermaLink
<PermaLinkBlazorServerInitializer />
<PermaLinkBlazorServerInitializer SmoothScroll="false" />
```

#### Creating permalink (#) navigation points inside a Blazor page
Expand Down