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

refactored script resource declaration to allow for bundling, made script loading async, refactored RichTextEditor to use new method

Browse Source
This commit is contained in:
Shaun Walker 2020-06-17 10:27:14 -04:00
parent 7c24bae753
commit 0636227284
10 changed files with 70 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Oqtane.Client/Modules/Controls/RichTextEditor.razor
View File

@ -109,7 +109,9 @@
public override List<Resource> Resources => new List<Resource>() public override List<Resource> Resources => new List<Resource>()
{ {
new Resource { ResourceType = ResourceType.Script, Url = "js/quill-interop.js" } new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill1.3.6.min.js" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-blot-formatter.min.js" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js" }
}; };
protected override void OnInitialized() protected override void OnInitialized()

8
Oqtane.Client/Modules/ModuleBase.cs
View File

@ -52,11 +52,13 @@ namespace Oqtane.Modules
{ {
if (Resources != null && Resources.Exists(item => item.ResourceType == ResourceType.Script)) if (Resources != null && Resources.Exists(item => item.ResourceType == ResourceType.Script))
{ {
var interop = new Interop(JSRuntime); var scripts = new List<object>();
foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script)) foreach (Resource resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
{ {
await interop.LoadScript(resource.Url, resource.Integrity ?? "", resource.CrossOrigin ?? ""); scripts.Add(new { href = resource.Url, bundle = resource.Bundle ?? "", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "" });
} }
var interop = new Interop(JSRuntime);
await interop.IncludeScripts(scripts.ToArray());
} }
} }
} }

13
Oqtane.Client/Themes/BlazorTheme/Default.razor
View File

@ -32,15 +32,10 @@
public override List<Resource> Resources => new List<Resource>() public override List<Resource> Resources => new List<Resource>()
{ {
new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", Integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", CrossOrigin = "anonymous" }, new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", Integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" } new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://code.jquery.com/jquery-3.3.1.slim.min.js", Integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", Integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", Integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", CrossOrigin = "anonymous" }
}; };
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var interop = new Interop(JSRuntime);
await interop.LoadBootstrapJS();
}
}
} }

14
Oqtane.Client/Themes/OqtaneTheme/Default.razor
View File

@ -25,15 +25,9 @@
public override List<Resource> Resources => new List<Resource>() public override List<Resource> Resources => new List<Resource>()
{ {
new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css", Integrity = "sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM", CrossOrigin = "anonymous" }, new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css", Integrity = "sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" } new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://code.jquery.com/jquery-3.3.1.slim.min.js", Integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", Integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", Integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", CrossOrigin = "anonymous" }
}; };
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var interop = new Interop(JSRuntime);
await interop.LoadBootstrapJS();
}
}
} }

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

@ -31,11 +31,13 @@ namespace Oqtane.Themes
{ {
if (Resources != null && Resources.Exists(item => item.ResourceType == ResourceType.Script)) if (Resources != null && Resources.Exists(item => item.ResourceType == ResourceType.Script))
{ {
var interop = new Interop(JSRuntime); var scripts = new List<object>();
foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script)) foreach (Resource resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
{ {
await interop.LoadScript(resource.Url, resource.Integrity ?? "", resource.CrossOrigin ?? ""); scripts.Add(new { href = resource.Url, bundle = resource.Bundle ?? "", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "" });
} }
var interop = new Interop(JSRuntime);
await interop.IncludeScripts(scripts.ToArray());
} }
} }
} }

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

@ -117,23 +117,13 @@ namespace Oqtane.UI
} }
} }
public async Task LoadScript(string url, string integrity, string crossorigin) public async Task IncludeScripts(object[] scripts)
{ {
try try
{ {
await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadScript", url, integrity, crossorigin); await _jsRuntime.InvokeVoidAsync(
} "Oqtane.Interop.includeScripts",
catch (object)scripts);
{
// ignore exception
}
}
public async Task LoadBootstrapJS()
{
try
{
await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadBootstrapJS");
} }
catch catch
{ {

7
Oqtane.Client/UI/ThemeBuilder.razor
View File

@ -33,12 +33,9 @@
// manage stylesheets for this page // manage stylesheets for this page
string batch = DateTime.Now.ToString("yyyyMMddHHmmssfff"); string batch = DateTime.Now.ToString("yyyyMMddHHmmssfff");
var links = new List<object>(); var links = new List<object>();
foreach (Resource resource in PageState.Page.Resources) foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
{ {
if (resource.ResourceType == ResourceType.Stylesheet) links.Add(new { id = "app-stylesheet-" + batch + "-" + (links.Count + 1).ToString("00"), rel = "stylesheet", href = resource.Url, type = "text/css", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", key = "" });
{
links.Add(new { id = "app-stylesheet-" + batch + "-" + (links.Count + 1).ToString("00"), rel = "stylesheet", href = resource.Url, type = "text/css", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", key = "" });
}
} }
await interop.IncludeLinks(links.ToArray()); await interop.IncludeLinks(links.ToArray());
await interop.RemoveElementsById("app-stylesheet", "", "app-stylesheet-" + batch + "-00"); await interop.RemoveElementsById("app-stylesheet", "", "app-stylesheet-" + batch + "-00");

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

@ -198,32 +198,49 @@ Oqtane.Interop = {
script.onerror = rej(); script.onerror = rej();
}); });
}, },
loadScript: async function (url, integrity, crossorigin) { includeScripts: async function (scripts) {
const promise = new Promise((resolve, reject) => { const bundles = [];
for (let s = 0; s < scripts.length; s++) {
if (loadjs.isDefined(url)) { if (scripts[s].bundle === '') {
resolve(true); scripts[s].bundle = scripts[s].href;
return;
} }
if (!bundles.includes(scripts[s].bundle)) {
loadjs(url, url, { bundles.push(scripts[s].bundle);
async: false, }
returnPromise: true, }
before: function (path, element) { const urls = [];
if (path === url && integrity !== '') { for (let b = 0; b < bundles.length; b++) {
element.integrity = integrity; for (let s = 0; s < scripts.length; s++) {
} if (scripts[s].bundle === bundles[b]) {
if (path === url && crossorigin !== '') { urls.push(scripts[s].href);
element.crossOrigin = crossorigin;
}
} }
}) }
.then(function () { resolve(true) }) const promise = new Promise((resolve, reject) => {
.catch(function (pathsNotFound) { reject(false) }); if (loadjs.isDefined(bundles[b])) {
}); resolve(true);
}
const result = await promise; else {
return; loadjs(urls, bundles[b], {
async: true,
returnPromise: true,
before: function (path, element) {
for (let s = 0; s < scripts.length; s++) {
if (path === scripts[s].href && scripts[s].integrity !== '') {
element.integrity = scripts[s].integrity;
}
if (path === scripts[s].href && scripts[s].crossorigin !== '') {
element.crossOrigin = scripts[s].crossorigin;
}
}
}
})
.then(function () { resolve(true) })
.catch(function (pathsNotFound) { reject(false) });
}
});
await promise;
urls = [];
}
}, },
getAbsoluteUrl: function (url) { getAbsoluteUrl: function (url) {
var a = document.createElement('a'); var a = document.createElement('a');
@ -343,31 +360,5 @@ Oqtane.Interop = {
setInterval(function () { setInterval(function () {
window.location.href = url; window.location.href = url;
}, wait * 1000); }, wait * 1000);
},
loadBootstrapJS: async function () {
if (!loadjs.isDefined('Bootstrap')) {
const bootstrap = loadjs(['https://code.jquery.com/jquery-3.3.1.slim.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'], 'Bootstrap', {
async: false,
returnPromise: true,
before: function (path, element) {
if (path === 'https://code.jquery.com/jquery-3.3.1.slim.min.js') {
element.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo';
element.crossOrigin = 'anonymous';
}
if (path === 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js') {
element.integrity = 'sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1';
element.crossOrigin = 'anonymous';
}
if (path === 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') {
element.integrity = 'sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM';
element.crossOrigin = 'anonymous';
}
}
})
.then(function () { })
.catch(function (pathsNotFound) { });
await bootstrap;
}
} }
}; };

10
Oqtane.Server/wwwroot/js/quill-interop.js
View File

@ -5,15 +5,7 @@ Oqtane.RichTextEditor = {
quillElement, toolBar, readOnly, quillElement, toolBar, readOnly,
placeholder, theme, debugLevel) { placeholder, theme, debugLevel) {
if (!loadjs.isDefined('Quill')) { Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
const loadQuill = loadjs(['js/quill1.3.6.min.js', 'js/quill-blot-formatter.min.js'], 'Quill',
{ async: true, returnPromise: true })
.then(function () {
Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
})
.catch(function (pathsNotFound) { });
await loadQuill;
}
var options = { var options = {
debug: debugLevel, debug: debugLevel,

1
Oqtane.Shared/Models/Resource.cs
View File

@ -8,5 +8,6 @@ namespace Oqtane.Models
public string Url { get; set; } public string Url { get; set; }
public string Integrity { get; set; } public string Integrity { get; set; }
public string CrossOrigin { get; set; } public string CrossOrigin { get; set; }
public string Bundle { get; set; }
} }
} }