oqtane.framework/Oqtane.Client/UI/ThemeBuilder.razor

112 lines
4.5 KiB
Plaintext

@namespace Oqtane.UI
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@DynamicComponent
@code {
[CascadingParameter] PageState PageState { get; set; }
RenderFragment DynamicComponent { get; set; }
protected override async Task OnParametersSetAsync()
{
var interop = new Interop(JsRuntime);
// set page title
if (!string.IsNullOrEmpty(PageState.Page.Title))
{
await interop.UpdateTitle(PageState.Page.Title);
}
else
{
await interop.UpdateTitle(PageState.Site.Name + " - " + PageState.Page.Name);
}
// manage page resources- they cannot be removed first and then added because the browser will "flash" and result in a poor user experience - they need to be updated
int index = 0;
foreach (Resource resource in PageState.Page.Resources)
{
index += 1;
switch (resource.ResourceType)
{
case ResourceType.Stylesheet:
await interop.IncludeLink("app-resource" + index.ToString("00"), "stylesheet", resource.Url, "text/css", resource.Integrity, resource.CrossOrigin);
break;
case ResourceType.Script:
break;
}
}
// remove any page resources references which are no longer required for this page
await interop.RemoveElementsById("app-resource", "app-resource" + (index + 1).ToString("00"), "");
// add favicon
if (PageState.Site.FaviconFileId != null)
{
await interop.IncludeLink("fav-icon", "shortcut icon", Utilities.ContentUrl(PageState.Alias, PageState.Site.FaviconFileId.Value), "image/x-icon", "", "");
}
// add PWA support
if (PageState.Site.PwaIsEnabled)
{
await InitializePwa(interop);
}
DynamicComponent = builder =>
{
var themeType = Type.GetType(PageState.Page.ThemeType);
if (themeType != null)
{
builder.OpenComponent(0, themeType);
builder.CloseComponent();
}
else
{
// theme does not exist with type specified
builder.OpenComponent(0, Type.GetType(Constants.ModuleMessageComponent));
builder.AddAttribute(1, "Message", "Error Loading Page Theme " + PageState.Page.ThemeType);
builder.CloseComponent();
}
};
}
private async Task InitializePwa(Interop interop)
{
// dynamically create manifest.json and add to page
string manifest = "setTimeout(() => { " +
"var manifest = { " +
"\"name\": \"" + PageState.Site.Name + "\", " +
"\"short_name\": \"" + PageState.Site.Name + "\", " +
"\"start_url\": \"/\", " +
"\"display\": \"standalone\", " +
"\"background_color\": \"#fff\", " +
"\"description\": \"" + PageState.Site.Name + "\", " +
"\"icons\": [{ " +
"\"src\": \"" + Utilities.ContentUrl(PageState.Alias, PageState.Site.PwaAppIconFileId.Value) + "\", " +
"\"sizes\": \"192x192\", " +
"\"type\": \"image/png\" " +
"}, { " +
"\"src\": \"" + Utilities.ContentUrl(PageState.Alias, PageState.Site.PwaSplashIconFileId.Value) + "\", " +
"\"sizes\": \"512x512\", " +
"\"type\": \"image/png\" " +
"}] " +
"} " +
"const serialized = JSON.stringify(manifest); " +
"const blob = new Blob([serialized], {type: 'application/javascript'}); " +
"const url = URL.createObjectURL(blob); " +
"document.getElementById('pwa-manifest').setAttribute('href', url); " +
"} " +
", 1000);";
await interop.IncludeScript("pwa-manifestscript", "", manifest, "body", "", "");
// service worker must be in root of site
string serviceworker = "if ('serviceWorker' in navigator) { " +
"navigator.serviceWorker.register('/service-worker.js').then(function(registration) { " +
"console.log('ServiceWorker Registration Successful'); " +
"}).catch (function(err) { " +
"console.log('ServiceWorker Registration Failed ', err); " +
"}); " +
"}";
await interop.IncludeScript("pwa-serviceworker", "", serviceworker, "body", "", "");
}
}