Diplomarbeit-Absolventenverein/oqtane.framework
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #299 from sbwalker/master

Browse Source 
JavaScript interop methods to manage html head elements for title, meta and link
This commit is contained in:
Shaun Walker 2020-03-20 12:58:23 -04:00 committed by GitHub
commit e4808f9b3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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; Url = ThemePath() + Url;
} }
var interop = new Interop(JSRuntime); var interop = new Interop(JSRuntime);
await interop.IncludeCss("Theme", Url); await interop.IncludeCSS("Theme", Url);
} }
public string NavigateUrl() 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 try
{ {
_jsRuntime.InvokeAsync<string>( _jsRuntime.InvokeAsync<string>(
"interop.includeCSS", "interop.updateTitle",
id, url); 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; return Task.CompletedTask;
} }
catch catch

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

@ -20,21 +20,49 @@ window.interop = {
} }
return ""; return "";
}, },
getElementByName: function (name) { updateTitle: function (title) {
var elements = document.getElementsByName(name); if (document.title !== title) {
if (elements.length) { document.title = title;
return elements[0].value;
} else {
return "";
} }
}, },
includeCSS: function (id, url) { updateMeta: function (id, attribute, name, content) {
var link = document.getElementById(id); 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) { if (link === null) {
link = document.createElement("link"); link = document.createElement("link");
link.id = id; if (id !== "") {
link.type = "text/css"; link.id = id;
link.rel = "stylesheet"; }
link.rel = rel;
link.type = type;
link.href = url; link.href = url;
document.head.appendChild(link); 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) { submitForm: function (path, fields) {
const form = document.createElement('form'); const form = document.createElement('form');
form.method = 'post'; form.method = 'post';

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

@ -20,21 +20,49 @@ window.interop = {
} }
return ""; return "";
}, },
getElementByName: function (name) { updateTitle: function (title) {
var elements = document.getElementsByName(name); if (document.title !== title) {
if (elements.length) { document.title = title;
return elements[0].value;
} else {
return "";
} }
}, },
includeCSS: function (id, url) { updateMeta: function (id, attribute, name, content) {
var link = document.getElementById(id); 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) { if (link === null) {
link = document.createElement("link"); link = document.createElement("link");
link.id = id; if (id !== "") {
link.type = "text/css"; link.id = id;
link.rel = "stylesheet"; }
link.rel = rel;
link.type = type;
link.href = url; link.href = url;
document.head.appendChild(link); 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) { submitForm: function (path, fields) {
const form = document.createElement('form'); const form = document.createElement('form');
form.method = 'post'; form.method = 'post';