Merge pull request #2815 from sbwalker/dev

migrate CSS references and remove JS Interop methods
This commit is contained in:
Shaun Walker 2023-05-16 09:09:32 -04:00 committed by GitHub
commit a003010be5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 25 additions and 104 deletions

View File

@ -72,6 +72,7 @@
{
if (firstRender)
{
// prevents flash on initial page load
_display = "";
StateHasChanged();
}

View File

@ -90,21 +90,6 @@ namespace Oqtane.UI
}
}
public Task IncludeLinks(object[] links)
{
try
{
_jsRuntime.InvokeVoidAsync(
"Oqtane.Interop.includeLinks",
(object) links);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
// external scripts need to specify src, inline scripts need to specify id and content
public Task IncludeScript(string id, string src, string integrity, string crossorigin, string content, string location)
{
@ -135,21 +120,6 @@ namespace Oqtane.UI
}
}
public Task RemoveElementsById(string prefix, string first, string last)
{
try
{
_jsRuntime.InvokeVoidAsync(
"Oqtane.Interop.removeElementsById",
prefix, first, last);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
public ValueTask<string> GetElementByName(string name)
{
try

View File

@ -41,10 +41,19 @@
// PWA manifest
if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
{
headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />";
headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />\n";
}
// meta
headcontent += PageState.Page.Meta ?? "";
if (!string.IsNullOrEmpty(PageState.Page.Meta))
{
headcontent += PageState.Page.Meta + "\n";
}
// stylesheets
foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
{
var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
headcontent += CreateLink(url, resource.Integrity, resource.CrossOrigin) + "\n";
}
SiteState.Properties.HeadContent = headcontent;
// set page body content
@ -58,34 +67,18 @@
SiteState.Properties.BodyContent = bodycontent;
}
DynamicComponent = builder =>
{
var themeType = Type.GetType(PageState.Page.ThemeType);
builder.OpenComponent(0, themeType);
builder.CloseComponent();
};
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var interop = new Interop(JsRuntime);
// manage stylesheets for this page
string batch = DateTime.UtcNow.ToString("yyyyMMddHHmmssfff");
var links = new List<object>();
foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
{
var prefix = "app-stylesheet-" + resource.Level.ToString().ToLower();
var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
links.Add(new { id = prefix + "-" + batch + "-" + (links.Count + 1).ToString("00"), rel = "stylesheet", href = url, type = "text/css", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", insertbefore = prefix });
}
if (links.Any())
DynamicComponent = builder =>
{
await interop.IncludeLinks(links.ToArray());
}
await interop.RemoveElementsById("app-stylesheet-page-", "", "app-stylesheet-page-" + batch + "-00");
await interop.RemoveElementsById("app-stylesheet-module-", "", "app-stylesheet-module-" + batch + "-00");
}
var themeType = Type.GetType(PageState.Page.ThemeType);
builder.OpenComponent(0, themeType);
builder.CloseComponent();
};
}
private string CreateLink(string url, string integrity, string crossorigin)
{
return "<link rel=\"stylesheet\" href=\"" + url + "\"" + (!string.IsNullOrEmpty(integrity) ? " integrity=\"" + integrity + "\"" : "") + (!string.IsNullOrEmpty(crossorigin) ? " crossorigin=\"" + crossorigin + "\"" : "") + " type=\"text/css\"/>";
}
private string CreatePWAScript(Alias alias, Site site, Route route)
{

View File

@ -12,8 +12,6 @@
<script src="js/loadjs.min.js"></script>
<link rel="stylesheet" href="css/app.css" />
@Html.Raw(Model.HeadResources)
<link id="app-stylesheet-page" rel="stylesheet" href="css/empty.css" disabled />
<link id="app-stylesheet-module" rel="stylesheet" href="css/empty.css" disabled />
<component type="typeof(Oqtane.Head)" render-mode="@((RenderMode)Enum.Parse(typeof(RenderMode), Model.RenderMode, true))" />
</head>
<body>

View File

@ -148,18 +148,9 @@ namespace Oqtane.Pages
{
page = _pages.GetPage(site.HomePageId.Value);
}
if (page != null && !page.IsDeleted)
if (page == null || page.IsDeleted)
{
// include theme resources
if (!string.IsNullOrEmpty(page.ThemeType))
{
ThemeType = page.ThemeType;
}
ProcessThemeResources(ThemeType, alias);
}
else // page not found
{
// look for url mapping
// page not found - look for url mapping
var urlMapping = _urlMappings.GetUrlMapping(site.SiteId, route.PagePath);
if (urlMapping != null && !string.IsNullOrEmpty(urlMapping.MappedUrl))
{
@ -385,24 +376,6 @@ namespace Oqtane.Pages
}
}
private void ProcessThemeResources(string ThemeType, Alias alias)
{
var type = Type.GetType(ThemeType);
if (type != null)
{
var obj = Activator.CreateInstance(type) as IThemeControl;
if (obj.Resources != null)
{
int count = 1;
foreach (var resource in obj.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
{
resource.Level = ResourceLevel.Page;
ProcessResource(resource, count++, alias);
}
}
}
}
private void ProcessResource(Resource resource, int count, Alias alias)
{
var url = (resource.Url.Contains("://")) ? resource.Url : alias.BaseUrl + resource.Url;

View File

@ -108,11 +108,6 @@ Oqtane.Interop = {
}
}
},
includeLinks: function (links) {
for (let i = 0; i < links.length; i++) {
this.includeLink(links[i].id, links[i].rel, links[i].href, links[i].type, links[i].integrity, links[i].crossorigin, links[i].insertbefore);
}
},
includeScript: function (id, src, integrity, crossorigin, content, location) {
var script;
if (src !== "") {
@ -249,15 +244,6 @@ Oqtane.Interop = {
}
return getAbsoluteUrl(url);
},
removeElementsById: function (prefix, first, last) {
var elements = document.querySelectorAll('[id^=' + prefix + ']');
for (var i = elements.length - 1; i >= 0; i--) {
var element = elements[i];
if (element.id.startsWith(prefix) && (first === '' || element.id >= first) && (last === '' || element.id <= last)) {
element.parentNode.removeChild(element);
}
}
},
getElementByName: function (name) {
var elements = document.getElementsByName(name);
if (elements.length) {