From c974b5b78c2c83d1bad20d7ecfb419425ad6175e Mon Sep 17 00:00:00 2001 From: Shaun Walker Date: Fri, 20 Mar 2020 12:55:00 -0400 Subject: [PATCH] JavaScript interop methods to manage html head elements for title, meta and link --- Oqtane.Client/Themes/ThemeBase.cs | 2 +- Oqtane.Client/UI/Interop.cs | 51 +++++++++++++++++++++++-- Oqtane.Client/wwwroot/js/interop.js | 58 +++++++++++++++++++++++------ Oqtane.Server/wwwroot/js/interop.js | 58 +++++++++++++++++++++++------ 4 files changed, 143 insertions(+), 26 deletions(-) diff --git a/Oqtane.Client/Themes/ThemeBase.cs b/Oqtane.Client/Themes/ThemeBase.cs index b443c584..2ee51b39 100644 --- a/Oqtane.Client/Themes/ThemeBase.cs +++ b/Oqtane.Client/Themes/ThemeBase.cs @@ -27,7 +27,7 @@ namespace Oqtane.Themes Url = ThemePath() + Url; } var interop = new Interop(JSRuntime); - await interop.IncludeCss("Theme", Url); + await interop.IncludeCSS("Theme", Url); } public string NavigateUrl() diff --git a/Oqtane.Client/UI/Interop.cs b/Oqtane.Client/UI/Interop.cs index 03d94ec4..5b2c6b7c 100644 --- a/Oqtane.Client/UI/Interop.cs +++ b/Oqtane.Client/UI/Interop.cs @@ -43,13 +43,58 @@ namespace Oqtane.UI } } - public Task IncludeCss(string id, string url) + public Task UpdateTitle(string title) { try { _jsRuntime.InvokeAsync( - "interop.includeCSS", - id, url); + "interop.updateTitle", + title); + return Task.CompletedTask; + } + catch + { + return Task.CompletedTask; + } + } + + public Task UpdateMeta(string id, string attribute, string name, string content) + { + try + { + _jsRuntime.InvokeAsync( + "interop.updateMeta", + id, attribute, name, content); + return Task.CompletedTask; + } + catch + { + return Task.CompletedTask; + } + } + + public Task UpdateLink(string id, string rel, string type, string url) + { + try + { + _jsRuntime.InvokeAsync( + "interop.updateLink", + id, rel, type, url); + return Task.CompletedTask; + } + catch + { + return Task.CompletedTask; + } + } + + public Task IncludeCSS(string id, string url) + { + try + { + _jsRuntime.InvokeAsync( + "interop.updateLink", + id, "stylesheet", "text/css", url); return Task.CompletedTask; } catch diff --git a/Oqtane.Client/wwwroot/js/interop.js b/Oqtane.Client/wwwroot/js/interop.js index f2a2421f..c9860f68 100644 --- a/Oqtane.Client/wwwroot/js/interop.js +++ b/Oqtane.Client/wwwroot/js/interop.js @@ -20,21 +20,49 @@ window.interop = { } return ""; }, - getElementByName: function (name) { - var elements = document.getElementsByName(name); - if (elements.length) { - return elements[0].value; - } else { - return ""; + updateTitle: function (title) { + if (document.title !== title) { + document.title = title; } }, - includeCSS: function (id, url) { - var link = document.getElementById(id); + updateMeta: function (id, attribute, name, content) { + var meta; + if (id !== "") { + meta = document.getElementById(id); + } + else { + meta = document.querySelector("meta[" + attribute + "=\"" + CSS.escape(name) + "\"]"); + } + if (meta === null) { + meta = document.createElement("meta"); + meta.setAttribute(attribute, name); + if (id !== "") { + meta.id = id; + } + meta.content = content; + document.head.appendChild(meta); + } + else { + if (meta.content !== content) { + meta.setAttribute("content", content); + } + } + }, + updateLink: function (id, rel, type, url) { + var link; + if (id !== "") { + link = document.getElementById(id); + } + else { + link = document.querySelector("link[href=\"" + CSS.escape(url) + "\"]"); + } if (link === null) { link = document.createElement("link"); - link.id = id; - link.type = "text/css"; - link.rel = "stylesheet"; + if (id !== "") { + link.id = id; + } + link.rel = rel; + link.type = type; link.href = url; document.head.appendChild(link); } @@ -44,6 +72,14 @@ window.interop = { } } }, + getElementByName: function (name) { + var elements = document.getElementsByName(name); + if (elements.length) { + return elements[0].value; + } else { + return ""; + } + }, submitForm: function (path, fields) { const form = document.createElement('form'); form.method = 'post'; diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js index f2a2421f..c9860f68 100644 --- a/Oqtane.Server/wwwroot/js/interop.js +++ b/Oqtane.Server/wwwroot/js/interop.js @@ -20,21 +20,49 @@ window.interop = { } return ""; }, - getElementByName: function (name) { - var elements = document.getElementsByName(name); - if (elements.length) { - return elements[0].value; - } else { - return ""; + updateTitle: function (title) { + if (document.title !== title) { + document.title = title; } }, - includeCSS: function (id, url) { - var link = document.getElementById(id); + updateMeta: function (id, attribute, name, content) { + var meta; + if (id !== "") { + meta = document.getElementById(id); + } + else { + meta = document.querySelector("meta[" + attribute + "=\"" + CSS.escape(name) + "\"]"); + } + if (meta === null) { + meta = document.createElement("meta"); + meta.setAttribute(attribute, name); + if (id !== "") { + meta.id = id; + } + meta.content = content; + document.head.appendChild(meta); + } + else { + if (meta.content !== content) { + meta.setAttribute("content", content); + } + } + }, + updateLink: function (id, rel, type, url) { + var link; + if (id !== "") { + link = document.getElementById(id); + } + else { + link = document.querySelector("link[href=\"" + CSS.escape(url) + "\"]"); + } if (link === null) { link = document.createElement("link"); - link.id = id; - link.type = "text/css"; - link.rel = "stylesheet"; + if (id !== "") { + link.id = id; + } + link.rel = rel; + link.type = type; link.href = url; document.head.appendChild(link); } @@ -44,6 +72,14 @@ window.interop = { } } }, + getElementByName: function (name) { + var elements = document.getElementsByName(name); + if (elements.length) { + return elements[0].value; + } else { + return ""; + } + }, submitForm: function (path, fields) { const form = document.createElement('form'); form.method = 'post';