From 61552d082fa6999dbdd02f6e9d5aff59d26cda30 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:26:17 +0100 Subject: [PATCH 01/11] Create integration-guide.md --- docs/integration-guide.md | 67 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 docs/integration-guide.md diff --git a/docs/integration-guide.md b/docs/integration-guide.md new file mode 100644 index 0000000..07b3188 --- /dev/null +++ b/docs/integration-guide.md @@ -0,0 +1,67 @@ +# Integration guide + +UmbNav was designed to be as clean and easy for developers as it is for editors to use. + +## Strongly typed models + +Out of the box UmbNav can return strongly typed models for a given navigation. + +The following properties are available in the `UmbNavItem` class: + +| Property | Type | Description | +|-------------------|-------------------|-------------| +| Id | Int | The node ID of the selected content item. For external linking nav items this will be "0" | +| Udi | GuidUdi | The node UDI of the selected content item. For external linking nav items this will be null | +| Title | String | The link title, often the node name | +| Target | String | The link target | +| Noopener | String | noopener if set in the backoffice | +| Noreferrer | String | noreferrer if set in the backoffice | +| Url | String | The link url | +| QueryString | String | The link querystring / anchor | +| Level | Int | The level in the overall navigation that the current item sits at | +| Content | IPublishedContent | The IPublishedContent for the selected content item. For external linking nav items this will be null | +| Children | List | The picked child / sub items for the current item | +| Culture | String | The link culture +| CustomClasses | String | Any CSS classes set in the backoffice +| ImageUrl | String | An image url as set in the backoffice + +## Implementing Razor + +UmbNav was designed to closely follow the "Umbraco way" of doing things so we don't impose our own styles or markup on you. + +It's easy to implement in your own Razor: + +```csharp +@inherits Umbraco.Web.Mvc.UmbracoViewPage +@using UmbNav.Core.Extensions +@using UmbNav.Core.Models +@using Umbraco.Web; +@{ + var site = Model.Root(); + var umbNav = site.FirstChildOfType("siteSettings").Value>("umbNavPE"); +} +@foreach (var item in umbNav) +{ + @item.Title +} +``` + +There is also some helpers available to generate the each menu item: + + ```csharp + GetLinkHtml(this UmbNavItem item, string culture = null, UrlMode mode = UrlMode.Default, object htmlAttributes = null) + ``` + +and in Umbraco V9 there is a TagHelper available: + +```csharp + +``` +To make the tag helper work in Umbraco V9 you will need to add the following you your `_ViewImports.cshtml` + +```csharp +@using UmbNav.Core +@addTagHelper *, UmbNav.Core +``` + +**Note:** For large navigations with multiple levels it is highly recommended that you cache your navigation for optimal performance. From 82bea3f924114c392079a63d9985ecb521e75743 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:28:53 +0100 Subject: [PATCH 02/11] Update README.md --- README.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 61c8503..582c1fb 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,23 @@ UmbNav adds a drag and drop menu builder to the Umbraco V8 backoffice. This package is supported on Umbraco 8.7+. +### Features + +- Set maximum child levels +- Hide menu items where `umbracoNaviHide` is true +- Auto expand the backoffice menu tree on hover +- Set the delay of the auto expand on hover (in ms) +- Add `noopener` +- Add `noreferrer` +- Auto add child nodes when rendering on the front end +- All menu items to be shown / hidden depending on member authentication status +- Add custom CSS classes to each menu item in the backoffice +- Display the property editor as full width in the back office (Hide the label) +- Enter an image url, id, guid or udi for each menu item this will be converted to the relevant url on render + ### Installation -UmbNav is available from [Our Umbraco](https://our.umbraco.com/packages/backoffice-extensions/umbnav), [NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Web), or as a manual download directly from GitHub. +UmbNav is available from [Our Umbraco (V8 only)](https://our.umbraco.com/packages/backoffice-extensions/umbnav), [NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Web), or as a manual download directly from GitHub. #### NuGet package repository To [install UI from NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Web), run the following command in your instance of Visual Studio. @@ -38,7 +52,21 @@ UmbNav is designed to be as clean and simple for developers as it is for content ### Documentation -Coming soon! +After installing the package, you will have a new property editor called UmbNav in the Umbraco backoffice. + +Check out the integration guide[integration guide](docs/integration-guide.md) to learn how to embed the package in your site. + +### Screenshots + +![](https://raw.githubusercontent.com/AaronSadlerUK/Our.Umbraco.UmbNav/develop/Screenshots/UmbNav.1.jpeg) + +![](https://raw.githubusercontent.com/AaronSadlerUK/Our.Umbraco.UmbNav/develop/Screenshots/UmbNav.2.jpeg) + +![](https://raw.githubusercontent.com/AaronSadlerUK/Our.Umbraco.UmbNav/develop/Screenshots/UmbNav.3.jpeg) + +![](https://raw.githubusercontent.com/AaronSadlerUK/Our.Umbraco.UmbNav/develop/Screenshots/UmbNav.4.jpeg) + +![](https://raw.githubusercontent.com/AaronSadlerUK/Our.Umbraco.UmbNav/develop/Screenshots/UmbNav.5.jpeg) ### Contribution guidelines From 2d8562fb5169322ff1aae9427ae818e32c81804d Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:29:20 +0100 Subject: [PATCH 03/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 582c1fb..a67147f 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ UmbNav adds a drag and drop menu builder to the Umbraco V8 backoffice. ## Getting started -This package is supported on Umbraco 8.7+. +This package is supported on Umbraco 8.7+. and Umbraco V9.0+ ### Features From 6083894cb45f8a6095b17fa3096959a813edb9ee Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:29:32 +0100 Subject: [PATCH 04/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a67147f..44a6ff7 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ UmbNav adds a drag and drop menu builder to the Umbraco V8 backoffice. ## Getting started -This package is supported on Umbraco 8.7+. and Umbraco V9.0+ +This package is supported on Umbraco 8.7+ and Umbraco V9.0+ ### Features From e15e3390b2bc658938394e547acdd27b09fc743c Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:30:11 +0100 Subject: [PATCH 05/11] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 44a6ff7..c46d007 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,8 @@ This package is supported on Umbraco 8.7+ and Umbraco V9.0+ - Hide menu items where `umbracoNaviHide` is true - Auto expand the backoffice menu tree on hover - Set the delay of the auto expand on hover (in ms) -- Add `noopener` -- Add `noreferrer` +- Add `noopener` to external links by clicking a checkbox +- Add `noreferrer` to external links by clicking a checkbox - Auto add child nodes when rendering on the front end - All menu items to be shown / hidden depending on member authentication status - Add custom CSS classes to each menu item in the backoffice From c52114b91feb644e54beda40e33fe4cdf6630f52 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:31:00 +0100 Subject: [PATCH 06/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c46d007..ab05243 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ To [install Core from NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.C PM> Install-Package Our.Umbraco.UmbNav.Core -To [install api from NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Api), run the following command in your instance of Visual Studio. +To [install API from NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Api), run the following command in your instance of Visual Studio. PM> Install-Package Our.Umbraco.UmbNav.Api From ee79ae9c8e5fb9b9b2aaa8923e08cdecd300efcb Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:31:37 +0100 Subject: [PATCH 07/11] Update README.md --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index ab05243..504d3cc 100644 --- a/README.md +++ b/README.md @@ -46,10 +46,6 @@ To [install API from NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Ap UmbNav fully supports Umbraco Cloud including the content synchroniser,it has been fully tested transferring and restoring between environments. -### Integration - -UmbNav is designed to be as clean and simple for developers as it is for content editors. - ### Documentation After installing the package, you will have a new property editor called UmbNav in the Umbraco backoffice. From b92905404f6d645e085175dcbfab70919aef5936 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:32:14 +0100 Subject: [PATCH 08/11] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 504d3cc..9dc1c6a 100644 --- a/README.md +++ b/README.md @@ -48,9 +48,9 @@ UmbNav fully supports Umbraco Cloud including the content synchroniser,it has be ### Documentation -After installing the package, you will have a new property editor called UmbNav in the Umbraco backoffice. +After installing the package, you will have a new property editor called UmbNav in the Umbraco backoffice, typically this would get added to your sites "Site Settings" or "Home" node. -Check out the integration guide[integration guide](docs/integration-guide.md) to learn how to embed the package in your site. +Check out the integration guide [integration guide](docs/integration-guide.md) to learn how to embed the package in your site. ### Screenshots From 3beb8fea07adca5e0a1c640841480e9cd6e88432 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:32:30 +0100 Subject: [PATCH 09/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9dc1c6a..de9d3c8 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ To [install API from NuGet](https://www.nuget.org/packages/Our.Umbraco.UmbNav.Ap ## Umbraco Cloud Supported -UmbNav fully supports Umbraco Cloud including the content synchroniser,it has been fully tested transferring and restoring between environments. +UmbNav fully supports Umbraco Cloud including the content synchroniser, it has been fully tested transferring and restoring between environments. ### Documentation From 1b399a7f29ba4c29eaa56a2325dc785fe1574477 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:33:38 +0100 Subject: [PATCH 10/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index de9d3c8..d2a7f23 100644 --- a/README.md +++ b/README.md @@ -78,4 +78,4 @@ Copyright © 2021 [UmbHost Limited](https://umbhost.net), and other contribu Licensed under the MIT License. -As per the spirit of the MIT Licence, feel free to fork and do what you wish with thr source code, all I ask is that if you find a bug or add a feature to PR this repository. +As per the spirit of the MIT Licence, feel free to fork and do what you wish with the source code, all I ask is that if you find a bug or add a feature please create a to PR this repository. From 67364c193198be0eb9a45064837a75748ef16483 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 26 Jul 2021 13:34:59 +0100 Subject: [PATCH 11/11] Update integration-guide.md --- docs/integration-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/integration-guide.md b/docs/integration-guide.md index 07b3188..1616750 100644 --- a/docs/integration-guide.md +++ b/docs/integration-guide.md @@ -55,7 +55,7 @@ There is also some helpers available to generate the each menu item: and in Umbraco V9 there is a TagHelper available: ```csharp - + ``` To make the tag helper work in Umbraco V9 you will need to add the following you your `_ViewImports.cshtml`