kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JavaScript interop methods to manage html head elements for title, meta and link

Browse Source
This commit is contained in:
Shaun Walker 2020-03-20 12:55:00 -04:00
parent 7da2824e50
commit c974b5b78c
4 changed files with 143 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Oqtane.Client/Themes/ThemeBase.cs
View File

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

51
Oqtane.Client/UI/Interop.cs
View File

@ -43,13 +43,58 @@ namespace Oqtane.UI
}
}
public Task IncludeCss(string id, string url)
public Task UpdateTitle(string title)
{
try
{
_jsRuntime.InvokeAsync<string>(
"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<string>(
"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<string>(
"interop.updateLink",
id, rel, type, url);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
public Task IncludeCSS(string id, string url)
{
try
{
_jsRuntime.InvokeAsync<string>(
"interop.updateLink",
id, "stylesheet", "text/css", url);
return Task.CompletedTask;
}
catch

58
Oqtane.Client/wwwroot/js/interop.js
View File

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

58
Oqtane.Server/wwwroot/js/interop.js
View File

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