Refactor Javascript and Stylesheet loading

This commit is contained in:
Shaun Walker
2020-05-27 16:03:38 -04:00
parent cc40733cff
commit 963148c639
7 changed files with 97 additions and 47 deletions

View File

@ -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

View File

@ -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");
}
}