Refactor Javascript and Stylesheet loading
This commit is contained in:
@ -1,4 +1,5 @@
|
||||
using Microsoft.JSInterop;
|
||||
using Oqtane.Models;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Oqtane.UI
|
||||
@ -56,13 +57,13 @@ namespace Oqtane.UI
|
||||
}
|
||||
}
|
||||
|
||||
public Task IncludeMeta(string id, string attribute, string name, string content)
|
||||
public Task IncludeMeta(string id, string attribute, string name, string content, string key)
|
||||
{
|
||||
try
|
||||
{
|
||||
_jsRuntime.InvokeAsync<object>(
|
||||
"Oqtane.Interop.includeMeta",
|
||||
id, attribute, name, content);
|
||||
id, attribute, name, content, key);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
catch
|
||||
@ -71,13 +72,13 @@ namespace Oqtane.UI
|
||||
}
|
||||
}
|
||||
|
||||
public Task IncludeLink(string id, string rel, string url, string type, string integrity, string crossorigin)
|
||||
public Task IncludeLink(string id, string rel, string href, string type, string integrity, string crossorigin, string key)
|
||||
{
|
||||
try
|
||||
{
|
||||
_jsRuntime.InvokeAsync<object>(
|
||||
"Oqtane.Interop.includeLink",
|
||||
id, rel, url, type, integrity, crossorigin);
|
||||
id, rel, href, type, integrity, crossorigin, key);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
catch
|
||||
@ -86,13 +87,28 @@ namespace Oqtane.UI
|
||||
}
|
||||
}
|
||||
|
||||
public Task IncludeScript(string id, string src, string content, string location, string integrity, string crossorigin)
|
||||
public Task IncludeLinks(object[] links)
|
||||
{
|
||||
try
|
||||
{
|
||||
_jsRuntime.InvokeAsync<object>(
|
||||
"Oqtane.Interop.includeLinks",
|
||||
(object) links);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
catch
|
||||
{
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
|
||||
public Task IncludeScript(string id, string src, string integrity, string crossorigin, string content, string location, string key)
|
||||
{
|
||||
try
|
||||
{
|
||||
_jsRuntime.InvokeAsync<object>(
|
||||
"Oqtane.Interop.includeScript",
|
||||
id, src, content, location, integrity, crossorigin);
|
||||
id, src, integrity, crossorigin, content, location, key);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
catch
|
||||
@ -101,13 +117,13 @@ namespace Oqtane.UI
|
||||
}
|
||||
}
|
||||
|
||||
public Task IncludeCSS(string id, string url)
|
||||
public Task IncludeScripts(object[] scripts)
|
||||
{
|
||||
try
|
||||
{
|
||||
_jsRuntime.InvokeAsync<object>(
|
||||
"Oqtane.Interop.includeLink",
|
||||
id, "stylesheet", url, "text/css");
|
||||
"Oqtane.Interop.includeScripts",
|
||||
(object)scripts);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
catch
|
||||
@ -131,7 +147,6 @@ namespace Oqtane.UI
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public ValueTask<string> GetElementByName(string name)
|
||||
{
|
||||
try
|
||||
|
@ -23,31 +23,31 @@
|
||||
await interop.UpdateTitle(PageState.Site.Name + " - " + PageState.Page.Name);
|
||||
}
|
||||
|
||||
// update page resources
|
||||
int stylesheet = 0;
|
||||
int script = 0;
|
||||
// include page resources
|
||||
var links = new List<object>();
|
||||
var scripts = new List<object>();
|
||||
foreach (Resource resource in PageState.Page.Resources)
|
||||
{
|
||||
switch (resource.ResourceType)
|
||||
{
|
||||
case ResourceType.Stylesheet:
|
||||
stylesheet += 1;
|
||||
await interop.IncludeLink("app-stylesheet" + stylesheet.ToString("00"), "stylesheet", resource.Url, "text/css", resource.Integrity ?? "", resource.CrossOrigin ?? "");
|
||||
links.Add(new { id = "app-stylesheet" + links.Count.ToString("00"), rel = "stylesheet", href = resource.Url, type = "text/css", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", key = "" });
|
||||
break;
|
||||
case ResourceType.Script:
|
||||
script += 1;
|
||||
await interop.IncludeScript("app-script" + script.ToString("00"), resource.Url, "", "body", resource.Integrity ?? "", resource.CrossOrigin ?? "");
|
||||
scripts.Add(new { id = "app-script" + scripts.Count.ToString("00"), src = resource.Url, integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", content = "", location = "body", key = "" });
|
||||
break;
|
||||
}
|
||||
}
|
||||
// remove any page resources references which are no longer required for this page
|
||||
await interop.RemoveElementsById("app-stylesheet", "app-stylesheet" + (stylesheet + 1).ToString("00"), "");
|
||||
await interop.RemoveElementsById("app-script", "app-script" + (script + 1).ToString("00"), "");
|
||||
await interop.IncludeLinks(links.ToArray());
|
||||
await interop.IncludeScripts(scripts.ToArray());
|
||||
// remove any page resource references which are no longer required for this page
|
||||
await interop.RemoveElementsById("app-stylesheet", "app-stylesheet" + links.Count.ToString("00"), "");
|
||||
await interop.RemoveElementsById("app-script", "app-script" + scripts.Count.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", "", "");
|
||||
await interop.IncludeLink("app-favicon", "shortcut icon", Utilities.ContentUrl(PageState.Alias, PageState.Site.FaviconFileId.Value), "image/x-icon", "", "", "id");
|
||||
}
|
||||
// add PWA support
|
||||
if (PageState.Site.PwaIsEnabled)
|
||||
@ -97,10 +97,10 @@
|
||||
"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); " +
|
||||
"document.getElementById('app-manifest').setAttribute('href', url); " +
|
||||
"} " +
|
||||
", 1000);";
|
||||
await interop.IncludeScript("pwa-manifestscript", "", manifest, "body", "", "");
|
||||
await interop.IncludeScript("app-pwa", "", "", "", manifest, "body", "id");
|
||||
|
||||
// service worker must be in root of site
|
||||
string serviceworker = "if ('serviceWorker' in navigator) { " +
|
||||
@ -110,6 +110,6 @@
|
||||
"console.log('ServiceWorker Registration Failed ', err); " +
|
||||
"}); " +
|
||||
"}";
|
||||
await interop.IncludeScript("pwa-serviceworker", "", serviceworker, "body", "", "");
|
||||
await interop.IncludeScript("app-serviceworker", "", "", "", serviceworker, "body", "id");
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user