From 89ada830122c797086558d3d69392305eb806ded Mon Sep 17 00:00:00 2001 From: sbwalker Date: Tue, 16 May 2023 09:09:18 -0400 Subject: [PATCH] migrate CSS references and remove JS Interop methods --- Oqtane.Client/App.razor | 1 + Oqtane.Client/UI/Interop.cs | 30 ----------------- Oqtane.Client/UI/ThemeBuilder.razor | 51 +++++++++++++---------------- Oqtane.Server/Pages/_Host.cshtml | 2 -- Oqtane.Server/Pages/_Host.cshtml.cs | 31 ++---------------- Oqtane.Server/wwwroot/css/empty.css | 0 Oqtane.Server/wwwroot/js/interop.js | 14 -------- 7 files changed, 25 insertions(+), 104 deletions(-) delete mode 100644 Oqtane.Server/wwwroot/css/empty.css diff --git a/Oqtane.Client/App.razor b/Oqtane.Client/App.razor index c36313bb..8a91c1c8 100644 --- a/Oqtane.Client/App.razor +++ b/Oqtane.Client/App.razor @@ -72,6 +72,7 @@ { if (firstRender) { + // prevents flash on initial page load _display = ""; StateHasChanged(); } diff --git a/Oqtane.Client/UI/Interop.cs b/Oqtane.Client/UI/Interop.cs index abe4eb7c..c59eed69 100644 --- a/Oqtane.Client/UI/Interop.cs +++ b/Oqtane.Client/UI/Interop.cs @@ -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 GetElementByName(string name) { try diff --git a/Oqtane.Client/UI/ThemeBuilder.razor b/Oqtane.Client/UI/ThemeBuilder.razor index da7fede3..ec2a05bf 100644 --- a/Oqtane.Client/UI/ThemeBuilder.razor +++ b/Oqtane.Client/UI/ThemeBuilder.razor @@ -41,10 +41,19 @@ // PWA manifest if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null) { - headcontent += ""; + headcontent += "\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(); - 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 ""; + } private string CreatePWAScript(Alias alias, Site site, Route route) { diff --git a/Oqtane.Server/Pages/_Host.cshtml b/Oqtane.Server/Pages/_Host.cshtml index 1fae6e3b..213f3b57 100644 --- a/Oqtane.Server/Pages/_Host.cshtml +++ b/Oqtane.Server/Pages/_Host.cshtml @@ -12,8 +12,6 @@ @Html.Raw(Model.HeadResources) - - diff --git a/Oqtane.Server/Pages/_Host.cshtml.cs b/Oqtane.Server/Pages/_Host.cshtml.cs index b7a9e338..e0079e67 100644 --- a/Oqtane.Server/Pages/_Host.cshtml.cs +++ b/Oqtane.Server/Pages/_Host.cshtml.cs @@ -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; diff --git a/Oqtane.Server/wwwroot/css/empty.css b/Oqtane.Server/wwwroot/css/empty.css deleted file mode 100644 index e69de29b..00000000 diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js index 226fe27b..c15c3d01 100644 --- a/Oqtane.Server/wwwroot/js/interop.js +++ b/Oqtane.Server/wwwroot/js/interop.js @@ -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) {